/* ==========================================================================
   Chrome — topbar controls, popovers, the theme switch, and the popped-out chat.
   ========================================================================== */

/* --- topbar icon buttons ------------------------------------------------- */
.iconbtn {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease-spring);
}
.iconbtn:hover { background: var(--surface-hover); color: var(--text); }
.iconbtn:active { transform: scale(0.92); }
.iconbtn.is-open { background: var(--accent-soft); color: var(--accent); }

.iconbtn__badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--bg);
  animation: popIn var(--t) var(--ease-spring) both;
}
.iconbtn__dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--bg);
}

/* the avatar button sits slightly larger and rounder than the icon buttons */
.avatarbtn {
  display: grid; place-items: center;
  border-radius: 50%; padding: 0;
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease);
}
.avatarbtn:hover { transform: scale(1.06); }
.avatarbtn:active { transform: scale(0.94); }
.avatarbtn.is-open { box-shadow: var(--ring); }

/* --- popovers ------------------------------------------------------------ */
.popover-layer { position: fixed; inset: 0; z-index: 90; }

.popover {
  position: absolute;
  min-width: 260px;
  max-width: min(400px, calc(100vw - 24px));
  background: var(--material-thick);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: var(--hairline) solid var(--separator-firm);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform-origin: top right;
  animation: popoverIn var(--t) var(--ease-spring) both;
}
.popover.is-closing { animation: popoverOut var(--t-fast) var(--ease-in-out) both; }

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes popoverOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-5px) scale(0.97); }
}

.popover__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--separator);
}
.popover__title { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.02em; }
.popover__body { max-height: min(60vh, 460px); overflow-y: auto; }
.popover__foot {
  padding: var(--sp-2);
  border-top: var(--hairline) solid var(--separator);
}

.popover__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: var(--fs-base); font-weight: 500;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.popover__item:hover { background: var(--surface-hover); color: var(--text); }
.popover__item:active { transform: scale(0.985); }
.popover__item.is-danger { color: var(--red); }
.popover__item.is-danger:hover { background: var(--red-soft); }
.popover__item .icon { color: var(--text-3); flex: 0 0 auto; }
.popover__item.is-danger .icon { color: var(--red); }
.popover__section { padding: var(--sp-2); }
.popover__divider { height: var(--hairline); background: var(--separator); }

/* --- profile card -------------------------------------------------------- */
.profile-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
}
.profile-card__name { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.02em; }
.profile-card__mail { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }

.theme-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 12px;
}
.theme-row__label { font-size: var(--fs-base); font-weight: 500; color: var(--text-2); }

/* --- theme switch: sun + clouds  <->  moon + stars ----------------------- */
.themeswitch {
  position: relative;
  width: 60px; height: 30px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
  background: linear-gradient(180deg, #7FC4F5 0%, #B8E0FA 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  cursor: pointer;
  transition: background var(--t-slow) var(--ease);
}
.themeswitch.is-dark { background: linear-gradient(180deg, #1B2A4A 0%, #2E3F63 100%); }

.themeswitch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 32%, #FFE9A8, #FFC93C 62%, #F5A623);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 201, 60, 0.55);
  transition: transform var(--t-slow) var(--ease-spring),
              background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  z-index: 2;
}
.themeswitch.is-dark .themeswitch__knob {
  transform: translateX(30px);
  background: radial-gradient(circle at 36% 32%, #FBFBFD, #D6DAE3 62%, #AEB4C2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 12px rgba(214, 218, 227, 0.4);
}
/* moon craters, revealed only in dark */
.themeswitch__knob::before,
.themeswitch__knob::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(120, 128, 146, 0.42);
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.themeswitch__knob::before { width: 6px; height: 6px; top: 5px; left: 12px; }
.themeswitch__knob::after  { width: 4px; height: 4px; top: 14px; left: 6px; }
.themeswitch.is-dark .themeswitch__knob::before,
.themeswitch.is-dark .themeswitch__knob::after { opacity: 1; }

/* clouds drift out to the right as night falls */
.themeswitch__clouds, .themeswitch__stars {
  position: absolute; inset: 0;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  z-index: 1; pointer-events: none;
}
.themeswitch__clouds i {
  position: absolute; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.themeswitch__clouds i:nth-child(1) { width: 16px; height: 7px; top: 7px;  right: 6px; }
.themeswitch__clouds i:nth-child(2) { width: 11px; height: 6px; top: 16px; right: 13px; opacity: 0.8; }
.themeswitch__clouds i:nth-child(3) { width: 8px;  height: 5px; top: 5px;  right: 22px; opacity: 0.6; }
.themeswitch.is-dark .themeswitch__clouds { opacity: 0; transform: translateX(14px); }

.themeswitch__stars i {
  position: absolute; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  animation: twinkle 3.2s var(--ease-in-out) infinite;
}
.themeswitch__stars i:nth-child(1) { width: 3px; height: 3px; top: 7px;  left: 9px; }
.themeswitch__stars i:nth-child(2) { width: 2px; height: 2px; top: 17px; left: 15px; animation-delay: 0.5s; }
.themeswitch__stars i:nth-child(3) { width: 2.5px; height: 2.5px; top: 11px; left: 21px; animation-delay: 1.1s; }
.themeswitch__stars i:nth-child(4) { width: 2px; height: 2px; top: 21px; left: 7px; animation-delay: 1.7s; }
.themeswitch__stars { opacity: 0; transform: translateX(-10px); }
.themeswitch.is-dark .themeswitch__stars { opacity: 1; transform: none; }

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- notifications ------------------------------------------------------- */
.notif {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; padding: 10px 12px 10px 22px;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.notif:hover { background: var(--surface-hover); }
.notif + .notif { box-shadow: inset 0 var(--hairline) 0 var(--separator); }
.notif.is-unread::before {
  content: ""; position: absolute; left: 9px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.notif.is-read { opacity: 0.55; }
.notif__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hue-soft, var(--surface-3)); color: var(--hue, var(--text-3));
}
.notif__body { min-width: 0; flex: 1 1 auto; }
.notif__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.notif__text {
  font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif__time { font-size: var(--fs-xs); color: var(--text-4); margin-top: 4px; }
.notif__group {
  padding: var(--sp-3) var(--sp-4) 5px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-4);
}

/* --- sidebar build stamp ------------------------------------------------- */
/* In the rail only the health dot shows; the version text fades in with the sidebar. */
.buildstamp {
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 11px;
  font-size: var(--fs-xs); color: var(--text-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.buildstamp span { opacity: 0; transition: opacity var(--t) var(--ease); }
.sidebar:hover .buildstamp span,
.sidebar:focus-within .buildstamp span { opacity: 1; }
.buildstamp__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.buildstamp__dot.is-offline { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }

/* --- popped-out chat ----------------------------------------------------- */
.chat-modal {
  width: min(1040px, 94vw);
  height: min(82vh, 860px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: var(--hairline) solid var(--separator-firm);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: sheetIn var(--t-slow) var(--ease-spring) both;
}
.scrim.is-closing .chat-modal { animation: sheetOut var(--t-fast) var(--ease-in-out) both; }
.chat-modal .thread { flex: 1 1 auto; min-height: 0; border-radius: 0; }
/* The modal has its own chrome, so the thread's internal header loses its top rounding. */
.chat-modal .thread__head { border-radius: 0; }

/* Full screen: drop the scrim's padding and let the modal fill its grid area.
   `position: fixed; inset: 0` does NOT work here — the scrim has a backdrop-filter, which
   makes it a containing block for fixed descendants, so the modal would resolve against
   the scrim's padding box instead of the viewport and sit inset on every edge. */
.scrim.is-full { padding: 0; }
.chat-modal--full {
  width: 100%; height: 100%; max-width: none; max-height: none;
  border-radius: 0; border: 0;
}

@media (max-width: 720px) {
  .chat-modal { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
}