/* ── Topbar shell ────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

/* ── Brand ───────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #111716;
  border: 1px solid #26302d;
  display: grid;
  place-items: center;
}

.brand-mark svg { width: 15px; height: 15px; fill: var(--green); }

.brand-text { min-width: 0; }

.brand-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #dce4e0;
  white-space: nowrap;
}

.brand-subtitle {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim-text);
  white-space: nowrap;
}

/* ── Quickbar ────────────────────────────────────────────── */
.quickbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.qbtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--floating-ui-border);
  background: var(--floating-ui-bg);
  color: var(--dim-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.qbtn:hover { background: rgba(4,8,10,0.52); color: var(--text); }
.qbtn:active { background: rgba(4,8,10,0.62); }
.qbtn svg { width: 16px; height: 16px; fill: currentColor; filter: var(--icon-readability-filter); }
.qbtn-tabs  { color: var(--green); }
.qbtn-focus { color: var(--green); }
.qbtn-apps  { color: var(--green); }
/* .qbtn-ai accent styling is in AIPanel.css */

/* ── Labelled topbar buttons (icon + text) ───────────────────
   Clearer than icon-only on a touchscreen — every action reads
   at a glance with no learning curve. */
.topbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--floating-ui-border);
  background: var(--floating-ui-bg);
  color: var(--muted-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
/* Impostazioni and Layout are the two buttons the user cannot remove, because
   they are the way back in rather than features. A control you are stuck with
   should not also be the loudest thing on the bar, so they step back: no plate,
   no border, no shadow, dimmed until touched. They keep the full 36px target —
   quieter to look at, not harder to hit. */
.topbtn.qbtn-settings,
.topbtn.qbtn-layout {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--dim-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbtn.qbtn-settings:hover,
.topbtn.qbtn-layout:hover {
  background: var(--floating-ui-bg);
  border-color: var(--floating-ui-border);
  color: var(--text);
}
/* Layout editing is a MODE you are inside, so while it is on the button comes
   back to full strength — that is a state worth seeing, unlike the resting one. */
.topbtn.qbtn-layout.active,
body.layout-editing .topbtn.qbtn-layout {
  border-color: var(--floating-ui-border);
  background: var(--floating-ui-bg);
  color: var(--accent);
}

.topbtn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
  filter: var(--icon-readability-filter);
}
.topbtn:hover { background: rgba(255,255,255,0.07); color: var(--text); border-color: rgba(255,255,255,0.16); }
.topbtn:active { transform: scale(0.97); }
.topbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Accent-tinted icons that match the previous green quick actions */
.topbtn.qbtn-focus svg,
.topbtn.qbtn-apps svg { color: var(--green); }

/* Xenon AI launcher — the hero action: a solid accent pill with a clean
   sparkle icon and a subtle living shimmer, so it stands out from the ghost
   utility buttons without floating over the dashboard. */
.topbtn.topbtn-xenon {
  position: relative;
  overflow: hidden;
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(var(--accent-rgb), 0.42);
}
.topbtn.topbtn-xenon:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 2px 22px rgba(var(--accent-rgb), 0.7);
}
.topbtn.topbtn-xenon svg { fill: currentColor; stroke: none; filter: none; }
.topbtn.topbtn-xenon span,
.topbtn.topbtn-xenon svg { position: relative; z-index: 1; }
/* slow diagonal light sweep across the pill */
.topbtn.topbtn-xenon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.4) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: xenon-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
/* Frosted overlay open: every change under a full-screen backdrop-filter forces a
   re-blur of the whole surface, so the topbar's infinite loops pause while hidden
   behind the haze (see the overlay-frozen block in styles/backgroundfx.css). */
body.overlay-frozen .topbtn.topbtn-xenon::after,
body.overlay-frozen .clock-sep,
body.overlay-frozen .status-dot-inline::after { animation-play-state: paused; }
@keyframes xenon-shimmer {
  0%, 58%  { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}
body.ai-voice-mode .topbtn.topbtn-xenon { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5), 0 2px 18px rgba(var(--accent-rgb), 0.6); }
@media (prefers-reduced-motion: reduce) { .topbtn.topbtn-xenon::after { animation: none; opacity: 0; } }

/* Layout editor "on" state (toggle) — accent fill */
.topbtn.qbtn-layout.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.4);
}
.topbtn.qbtn-layout.active svg { color: var(--on-accent); filter: none; }

/* Narrow widths: collapse labels to icons so nothing wraps */
@media (max-width: 1180px) {
  .topbtn span { display: none; }
  .topbtn { padding: 0; width: 36px; justify-content: center; }
}

/* The width cap is NOT scoped to a side: since v4.11.4 the user can move this strip
   between the two ends of the bar, and a cap that applied on only one of them
   would let the strip grow without limit on the other — which is the whole reason
   it exists. The rail has its own sizing (TopbarMinimal.css) and overrides it. */
.app-favorites {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: min(250px, 34vw);
  overflow: hidden;
  flex-wrap: nowrap;
}

.qbtn-favorite { color: var(--amber); }
.qbtn-favorite img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 5px;
  display: block;
}

.qbtn-fav-letter {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(var(--warning-rgb),0.14);
  color: var(--amber);
  font-size: 11px;
  font-weight: 950;
}

/* Favorites dock states: a running favorite is bright with a live dot, a closed
   one that can still be launched is dimmed, and a closed one with no known path
   is inert (shown, but not actionable). touch-action:none lets the pointer-drag
   reorder own the gesture on the Xeneon Edge without the page scrolling. */
.qbtn-favorite { position: relative; touch-action: none; }
.qbtn-favorite.closed { opacity: 0.55; }
.qbtn-favorite.closed:hover { opacity: 0.9; }
.qbtn-favorite.inert { opacity: 0.32; cursor: default; }
.qbtn-favorite.inert:hover { background: transparent; }
.qbtn-favorite.dragging {
  opacity: 0.9;
  transform: scale(1.12);
  z-index: 2;
  cursor: grabbing;
}
.qbtn-fav-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1.5px var(--topbar-bg, #0c1210), 0 0 5px rgba(var(--accent-rgb),0.7);
}
.app-favorites.reordering { cursor: grabbing; }
.app-favorites.reordering .qbtn-favorite:not(.dragging) { transition: transform 0.16s ease; }

.qbtn-custom {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.qbtn-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.qbtn-separator { width: 0; }

/* ── Top-right actions ───────────────────────────────────── */
.top-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* ── Clock ───────────────────────────────────────────────── */
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

/* Dynamic Island visibility is shared by Full + Minimal. Minimal adds its own
   segment class too; this host-level class is what makes the same eye switch
   authoritative in the classic full topbar. */
.topbar-item-hidden { display: none !important; }

/* Nothing left in the meta row but the status dot (date, weather, music and the
   rest hidden). The clock centres as one block, so that 6px dot plus the 5px gap
   pushed the time 5.5px above the bar's centre — measured, and the reason the
   clock read as off-centre once someone stripped the island down. Take the bare
   row out of the flow so the FACE is what gets centred; the dot keeps its place
   just under the digits, where it already was. */
.clock.clock-meta-bare { position: relative; }
.clock.clock-meta-bare > .clock-meta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
}

/* ── Face: big digit display ─────────────────────────────── */
.clock-face {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}

.clock-h,
.clock-m {
  font-size: 45px;
  font-weight: 800;
  color: var(--text);
  text-shadow: var(--readability-shadow);
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  min-width: 2.05ch;
  text-align: center;
}

/* Accent colon with smooth blink animation */
.clock-sep {
  font-size: 37px;
  font-weight: 300;
  color: var(--accent);
  text-shadow: var(--readability-shadow);
  padding: 0 1px;
  margin-bottom: 2px;
  align-self: center;
  animation: clock-colon-blink 1s ease-in-out infinite;
  will-change: opacity;
  contain: layout style;
}

@keyframes clock-colon-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}
/* Topbar loops restart whenever a data pass re-renders their element, which slips
   them past ambient-idle's one-shot WAAPI freeze — a CSS gate holds regardless of
   when the animation (re)starts. `animation: none` + a solid resting state, not
   play-state paused: a pause mid-keyframe would strand the colon half-faded and
   the shimmer band as a permanent diagonal streak. */
body.overlay-frozen .clock-sep,
body.ambient-idle .clock-sep,
body.game-mode .clock-sep,
body.low-power-gpu .clock-sep { animation: none; opacity: 1; }
body.overlay-frozen .topbtn.topbtn-xenon::after,
body.ambient-idle .topbtn.topbtn-xenon::after,
body.game-mode .topbtn.topbtn-xenon::after,
body.low-power-gpu .topbtn.topbtn-xenon::after { animation: none; }
body.overlay-frozen .status-dot-inline::after,
body.ambient-idle .status-dot-inline::after,
body.game-mode .status-dot-inline::after,
body.low-power-gpu .status-dot-inline::after { animation: none; opacity: 0.6; }

/* AM/PM — a quiet uppercase suffix riding the top of the digits, no box.
   The bordered pill read as clutter next to the big numerals; a bare
   letter-spaced label sits like a superscript and lets the time breathe. */
.clock-ampm {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim-text);
  align-self: flex-start;
  margin-top: 7px;
  margin-left: 6px;
  line-height: 1;
  text-shadow: var(--readability-shadow);
}
.clock-ampm:empty { display: none; }

/* ── Meta row: ● date · weather ──────────────────────────── */
.clock-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.clock-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-text);
  text-shadow: var(--readability-shadow);
  letter-spacing: 0.15px;
  text-transform: capitalize;
  white-space: nowrap;
}

.clock-meta-sep {
  font-size: 14.5px;
  color: var(--dim-text);
  text-shadow: var(--readability-shadow);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  margin-bottom: 1px;
}

/* ── Status dot — live indicator ─────────────────────────── */
/* The breathing glow lives on a pseudo-element whose OPACITY pulses: opacity
   animates on the compositor, while animating box-shadow itself runs the
   main-thread style→paint pipeline at full display rate for as long as the
   dot is visible — i.e. forever, on every surface (GitHub #99). */
.status-dot-inline {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.55);
}

.status-dot-inline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(var(--accent-rgb), 1), 0 0 24px rgba(var(--accent-rgb), 0.38);
  opacity: 0;
  animation: dot-pulse 2.6s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

.status-dot-inline.offline {
  background: var(--red);
  box-shadow: 0 0 7px rgba(var(--danger-rgb), 0.55);
  animation: none;
}
.status-dot-inline.offline::after { animation: none; opacity: 0; }

/* ── Legacy selectors — kept as no-ops for safety ────────── */
.clock-row  { display: contents; }
.clock-time { display: none; }

/* ── Language toggle ─────────────────────────────────────── */
.lang-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  border: 1px solid #26302d;
  border-radius: 999px;
  background: rgba(15, 20, 19, 0.6);
  padding: 3px;
  gap: 2px;
}

.lang-seg {
  border: 0;
  background: transparent;
  color: var(--muted-text);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  font-variant-numeric: tabular-nums;
}
.lang-seg:hover:not(.active) { color: #d3ddd9; }
.lang-seg.active {
  background: rgba(var(--accent-rgb), 0.18);
  color: #d6ffe6;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.32);
}

/* ── Liquid Glass topbar ──────────────────────────────────────
   Applies only in the full dashboard. Embed modes (?panel=…) keep
   their own compact topbar styling from breakpoints.css. */
body:not([data-panel]) .topbar {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-modal);
  /* Match the dashboard tiles exactly (same `--panel` surface, no frosted blur)
     so the Surface settings — panel opacity in particular — and the light/dark
     theme apply to the top bar just like every other tile. */
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--panel-highlight-alpha)), var(--shadow-lg);
}

@media (prefers-reduced-transparency: reduce) {
  body:not([data-panel]) .topbar {
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}