/* German in Context — Drawer V4 follow-up (2026-10-11).
   Scoped fixes only: notifications, personal-review dialogs, notes review.
   Does not alter the menu/header hit targets, lessons or rating engine. */

/* Notification panel is portalled under BODY by gic-notification-center.js.
   Its z-index must clear the header/hero's transformed stacking contexts. */
body > .gic-notify-panel.gic-notify-layer-root {
  position: fixed !important;
  z-index: 2147483500 !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 16px) !important;
  max-height: min(650px, calc(100dvh - 82px)) !important;
  overflow: hidden !important;
  isolation: isolate;
}
body > .gic-notify-panel.gic-notify-layer-root[hidden] {
  display: none !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-head,
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-toolbar,
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-footer {
  flex: 0 0 auto;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Personal Review V5 is a different dialog from the dashboard reminder.
   Account for padding, mobile safe areas and lessons with wide media. */
@media (max-width: 850px) {
  body > .gic-lr-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483350 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(7px + env(safe-area-inset-top, 0px)) 8px
             calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  body > .gic-lr-backdrop > .gic-lr-sheet {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 680px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 20px !important;
  }
  body > .gic-lr-backdrop .gic-lr-header,
  body > .gic-lr-backdrop .gic-lr-footer {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 0;
  }
  body > .gic-lr-backdrop .gic-lr-scroll {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body > .gic-lr-backdrop .gic-lr-lesson,
  body > .gic-lr-backdrop .gic-lr-toprow,
  body > .gic-lr-backdrop .gic-lr-ratings {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body > .gic-lr-backdrop .gic-lr-lesson img,
  body > .gic-lr-backdrop .gic-lr-lesson video,
  body > .gic-lr-backdrop .gic-lr-lesson iframe,
  body > .gic-lr-backdrop .gic-lr-lesson svg {
    max-width: 100% !important;
    height: auto;
  }
  body > .gic-lr-backdrop .gic-lr-lesson pre,
  body > .gic-lr-backdrop .gic-lr-lesson table {
    display: block;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  body > .gic-lr-backdrop .gic-lr-toprow h2,
  body > .gic-lr-backdrop .gic-lr-lesson p,
  body > .gic-lr-backdrop .gic-lr-lesson h2,
  body > .gic-lr-backdrop .gic-lr-lesson h3 {
    overflow-wrap: anywhere;
  }
  body > .gic-lr-backdrop .gic-lr-ratings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body > .gic-lr-backdrop .gic-lr-ratings > button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  /* Review Today lives inside the saved-notes page. Avoid any element's
     min-content width stretching the viewport on narrow phones. */
  main.gic-library-page,
  main.gic-library-page > .gic-rhub-head,
  main.gic-library-page > .gic-rv-center,
  main.gic-library-page > .gic-rhub-mastered,
  main.gic-library-page .gic-rv-item {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  main.gic-library-page .gic-rv-item-title,
  main.gic-library-page .gic-rhub-master-title {
    overflow-wrap: anywhere;
  }
  main.gic-library-page .gic-rhub-tabs > button,
  main.gic-library-page .gic-rhub-stats > div {
    min-width: 0 !important;
  }
}
/* Visual refresh: the notification panel should feel distinct from the
   learning card, and on mobile it should drop down from the top near the bell
   rather than slide up from the bottom like a sheet. */
body > .gic-notify-panel.gic-notify-layer-root {
  border: 1px solid rgba(45, 88, 133, 0.18) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
  box-shadow: 0 22px 64px rgba(17, 47, 88, 0.24), 0 8px 24px rgba(18, 66, 120, 0.10) !important;
  color: #18324d !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-head {
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid rgba(152, 177, 205, 0.22) !important;
  background: linear-gradient(135deg, #204f86 0%, #2f77b5 56%, #7bb8d9 100%) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-head h3,
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-summary {
  color: #ffffff !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-summary {
  opacity: 0.88;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-close {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(8px);
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-toolbar {
  background: #eef5ff !important;
  border-bottom: 1px solid rgba(152, 177, 205, 0.26) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-filters {
  background: #ddeaf8 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-filter {
  color: #4e6782 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-filter.active {
  background: #ffffff !important;
  color: #1b4d81 !important;
  box-shadow: 0 4px 12px rgba(38, 87, 140, 0.14) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-mark-all {
  color: #9b5d1b !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(217, 226, 238, 0.78) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row.unread {
  background: linear-gradient(180deg, #f4f9ff 0%, #edf6ff 100%) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row:hover {
  background: #f7fbff !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-icon {
  background: linear-gradient(135deg, #d7e8fb 0%, #c7ddf5 100%) !important;
  color: #1a4c7f !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row[data-kind="membership"] .gic-notify-icon {
  background: linear-gradient(135deg, #fff2d6 0%, #ffe0ad 100%) !important;
  color: #9d661f !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row[data-kind="achievement"] .gic-notify-icon {
  background: linear-gradient(135deg, #fff7d7 0%, #ffe6a1 100%) !important;
  color: #9b7420 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-row[data-kind="security"] .gic-notify-icon {
  background: linear-gradient(135deg, #ffe5e8 0%, #ffd1d6 100%) !important;
  color: #a14e5c !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-title {
  color: #173652 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-body {
  color: #5c7088 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-time {
  color: #8ca0b4 !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-dot {
  background: #c7872f !important;
  box-shadow: 0 0 0 4px rgba(199, 135, 47, 0.12) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-empty {
  color: #72849a !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-footer {
  background: linear-gradient(180deg, #f3f8ff 0%, #edf5ff 100%) !important;
  border-top: 1px solid rgba(152, 177, 205, 0.22) !important;
}
body > .gic-notify-panel.gic-notify-layer-root .gic-notify-footer a {
  color: #1b568f !important;
}

@media (max-width: 640px) {
  body > .gic-notify-panel.gic-notify-layer-root {
    top: calc(74px + env(safe-area-inset-top, 0px)) !important;
    left: auto !important;
    right: 8px !important;
    bottom: auto !important;
    width: min(392px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(72dvh, calc(100dvh - 88px - env(safe-area-inset-top, 0px))) !important;
  }
  body > .gic-notify-panel.gic-notify-layer-root .gic-notify-list {
    max-height: none !important;
  }
}

/* GIC_NOTIFICATION_MOBILE_FIT_V2_BEGIN
   Keep the learner notification popover inside the mobile visual viewport even
   when dashboard code mounts the host inside the dashboard bell slot. */
@media (max-width: 640px) {
  html body .gic-dashboard-notify-mounted .gic-notify-panel[data-gic-notify-panel],
  html body > .gic-notify-panel.gic-notify-layer-root[data-gic-notify-panel] {
    position: fixed !important;
    top: calc(74px + env(safe-area-inset-top, 0px)) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(72dvh, calc(100dvh - 88px - env(safe-area-inset-top, 0px))) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 2147482000 !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-panel[data-gic-notify-panel]:not([hidden]),
  html body > .gic-notify-panel.gic-notify-layer-root[data-gic-notify-panel]:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-panel[data-gic-notify-panel] *,
  html body > .gic-notify-panel.gic-notify-layer-root[data-gic-notify-panel] * {
    box-sizing: border-box;
    min-width: 0;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-toolbar,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-toolbar {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-filters,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-filters {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-mark-all,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-mark-all {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    max-width: 100% !important;
    padding: 7px 4px !important;
    white-space: normal !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-list,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body .gic-dashboard-notify-mounted .gic-notify-head,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-head,
  html body .gic-dashboard-notify-mounted .gic-notify-footer,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-footer {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 360px) {
  html body .gic-dashboard-notify-mounted .gic-notify-head,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-head {
    padding: 15px 14px 12px !important;
  }
  html body .gic-dashboard-notify-mounted .gic-notify-toolbar,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-toolbar {
    align-items: stretch !important;
  }
  html body .gic-dashboard-notify-mounted .gic-notify-mark-all,
  html body > .gic-notify-panel.gic-notify-layer-root .gic-notify-mark-all {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
}
/* GIC_NOTIFICATION_MOBILE_FIT_V2_END */