/* ALYSSIUN OS — the premium layer. ONE set of shell tokens for both interfaces
   (the mobile shell's values, which were the most refined, become the shared
   ones), one easing, one radius scale, one glass, one icon shape. This sheet
   loads LAST, so every older token family (--desktop-*, --aos-m-*, --aos-lambda-*,
   --aos-pill-*, --aos-sw-*) is aliased onto the shared set here rather than
   being edited in five places. The OS panel (a shadow tree, os/launcher/v1.css)
   reads the same custom properties, which inherit across the shadow boundary.
   LUX is Ceramic Mist, NEO is Infinite Void; nothing here invents a colour. */

:root {
  --brand-font: "Avenir Next", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  --aos-font: var(--brand-font);
  /* Motion: one easing for everything that moves, three durations. */
  --aos-ease: cubic-bezier(.2, .8, .2, 1);
  --aos-t-fast: 140ms;
  --aos-t-med: 260ms;
  --aos-t-slow: 420ms;
  /* Corners: one scale. Pills are pills; app icons are a superellipse-ish 31%. */
  --aos-r-xs: 8px;
  --aos-r-s: 12px;
  --aos-r-m: 16px;
  --aos-r-l: 22px;
  --aos-r-xl: 28px;
  --aos-r-pill: 999px;
  --aos-icon-radius: 31%;
  /* Glass: one blur, one hair inset, one edge. */
  --aos-blur: blur(22px) saturate(160%);
  /* Type scale (rem): caption, small, body, lead, title, display. */
  --aos-fs-xs: .72rem;
  --aos-fs-sm: .8rem;
  --aos-fs-md: .9rem;
  --aos-fs-lg: 1.05rem;
  --aos-fs-xl: 1.5rem;
  --aos-track-label: .12em;
  /* The band the interface pill keeps at the top; the OS panel centres below it. */
  --aos-panel-clear: 60px;
}

:root, :root[data-alyssiun-atmosphere="lux"] {
  --aos-text: #0e1018;
  --aos-muted: #5c6273;
  --aos-faint: #949aab;
  --aos-glass: rgba(255, 255, 255, .62);
  --aos-glass-2: rgba(255, 255, 255, .84);
  --aos-solid: rgba(250, 251, 253, .97);
  --aos-edge: rgba(255, 255, 255, .92);
  --aos-hair: rgba(14, 18, 34, .09);
  --aos-hair-2: rgba(14, 18, 34, .16);
  --aos-ink: #0e1018;
  --aos-ink-on: #ffffff;
  --aos-accent: #315f8f;
  --aos-shadow-s: 0 2px 10px rgba(20, 26, 50, .06);
  --aos-shadow-m: 0 14px 40px rgba(20, 26, 50, .10), 0 2px 10px rgba(20, 26, 50, .05);
  --aos-shadow-l: 0 30px 80px rgba(20, 26, 50, .16), 0 6px 20px rgba(20, 26, 50, .06);
  --aos-dim: rgba(14, 18, 34, .28);
  --aos-press: rgba(14, 18, 34, .07);
}

:root[data-alyssiun-atmosphere="neo"] {
  --aos-text: #f2f4fb;
  --aos-muted: #9aa2b8;
  --aos-faint: #616a80;
  --aos-glass: rgba(255, 255, 255, .055);
  --aos-glass-2: rgba(255, 255, 255, .10);
  --aos-solid: rgba(7, 9, 16, .96);
  --aos-edge: rgba(255, 255, 255, .14);
  --aos-hair: rgba(255, 255, 255, .08);
  --aos-hair-2: rgba(255, 255, 255, .16);
  --aos-ink: #ffffff;
  --aos-ink-on: #05070e;
  --aos-accent: #86e0c0;
  --aos-shadow-s: 0 2px 10px rgba(0, 0, 0, .4);
  --aos-shadow-m: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  --aos-shadow-l: 0 34px 90px rgba(0, 0, 0, .7), 0 6px 20px rgba(0, 0, 0, .4);
  --aos-dim: rgba(0, 0, 0, .55);
  --aos-press: rgba(255, 255, 255, .10);
}

/* --- Older token families, aliased onto the shared set ---------------------- */
:root, :root[data-alyssiun-atmosphere="lux"], :root[data-alyssiun-atmosphere="neo"] {
  --aos-m-text: var(--aos-text); --aos-m-muted: var(--aos-muted); --aos-m-faint: var(--aos-faint);
  --aos-m-glass: var(--aos-glass); --aos-m-glass-2: var(--aos-glass-2); --aos-m-solid: var(--aos-solid);
  --aos-m-edge: var(--aos-edge); --aos-m-hair: var(--aos-hair); --aos-m-ink: var(--aos-ink); --aos-m-ink-on: var(--aos-ink-on);
  --aos-m-shadow-s: var(--aos-shadow-s); --aos-m-shadow: var(--aos-shadow-m); --aos-m-shadow-l: var(--aos-shadow-l); --aos-m-dim: var(--aos-dim);
  --aos-lambda-text: var(--aos-text); --aos-lambda-edge: var(--aos-edge); --aos-lambda-hair: var(--aos-hair);
  --aos-lambda-shadow: var(--aos-shadow-m); --aos-lambda-ink: var(--aos-ink); --aos-lambda-accent: var(--aos-accent); --aos-lambda-solid: var(--aos-solid);
  --aos-pill-text: var(--aos-text); --aos-pill-glass: var(--aos-glass); --aos-pill-edge: var(--aos-edge);
  --aos-pill-hair: var(--aos-hair); --aos-pill-shadow: var(--aos-shadow-s); --aos-pill-ink: var(--aos-ink);
  --aos-sw-text: var(--aos-text); --aos-sw-muted: var(--aos-muted); --aos-sw-solid: var(--aos-solid); --aos-sw-edge: var(--aos-edge);
  --aos-sw-hair: var(--aos-hair); --aos-sw-ink: var(--aos-ink); --aos-sw-glass: var(--aos-glass-2);
  --aos-sw-shadow-s: var(--aos-shadow-s); --aos-sw-shadow-l: var(--aos-shadow-l); --aos-sw-dim: var(--aos-dim);
  --desktop-border: var(--aos-hair-2);
  --desktop-shadow: var(--aos-shadow-l);
}
:root[data-alyssiun-atmosphere="lux"] { --aos-lambda-glass: var(--aos-glass); }
:root[data-alyssiun-atmosphere="neo"] { --aos-lambda-glass: rgba(7, 9, 16, .68); }

body { font-family: var(--aos-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.aos-mobile-shell, .aos-switcher { font-family: var(--aos-font); }

/* --- Windows ------------------------------------------------------------------ */
.desktop-window.desktop-window {
  border-radius: var(--aos-r-l);
  border-color: var(--aos-hair-2);
  transition: box-shadow var(--aos-t-med) var(--aos-ease), border-color var(--aos-t-med) var(--aos-ease);
}
.desktop-window.desktop-window:not(.is-focused) { box-shadow: var(--aos-shadow-m); }
.desktop-window.desktop-window.is-focused { box-shadow: var(--aos-shadow-l); }
.desktop-window.is-maximized.is-maximized { border-radius: 0; }
.desktop-window[data-snap] { border-radius: var(--aos-r-s); }
.window-titlebar { padding: 0 8px 0 14px; border-bottom-color: var(--aos-hair); }
.window-identity strong { font-size: var(--aos-fs-sm); font-weight: 600; letter-spacing: .005em; }
.window-identity .desktop-app-icon { width: 26px; height: 26px; border-radius: var(--aos-r-xs); box-shadow: none; }
.window-control {
  width: 32px; height: 32px; border-radius: var(--aos-r-xs);
  transition: background var(--aos-t-fast) var(--aos-ease), transform var(--aos-t-fast) var(--aos-ease), color var(--aos-t-fast) var(--aos-ease);
}
.window-control:hover:not(:disabled), .window-control:focus-visible { background: var(--aos-press); }
.window-control:active:not(:disabled) { transform: scale(.92); }
.desktop-window.is-window-opening { animation-timing-function: var(--aos-ease); }
@media (max-width: 640px) { .desktop-window.desktop-window { border-radius: var(--aos-r-m); } }

/* --- Top-right controls, sign-in, toast --------------------------------------- */
/* One size, one glass for every top control (Batch B2 T5): the boxes are gone
   and each control is a 40px circle (display-controls.css). */
.desktop-display-control { transition: background var(--aos-t-fast) var(--aos-ease), transform var(--aos-t-fast) var(--aos-ease); }
.desktop-display-control:active { transform: scale(.92); }
.desktop-display-control svg { stroke-width: 1.7; }
.desktop-sign-in { border-radius: 999px; font-weight: 650; }
html[data-no-fullscreen] .desktop-sign-in { right: max(12px, env(safe-area-inset-right, 0px)); }
.desktop-notification-toast { border-radius: var(--aos-r-m); box-shadow: var(--aos-shadow-m); }
.desktop-notification-toast .notification-card, .desktop-notification-toast .notification-item {
  border-radius: var(--aos-r-m); border-color: var(--aos-hair); background: var(--aos-solid);
  -webkit-backdrop-filter: var(--aos-blur); backdrop-filter: var(--aos-blur);
}

/* --- The interface pill (top centre, both shells) ----------------------------- */
body .aos-interface-pill {
  top: max(12px, env(safe-area-inset-top, 0px)); min-height: 40px; padding: 0 16px; font-size: var(--aos-fs-sm); font-weight: 550; letter-spacing: .01em;
  transition: transform var(--aos-t-med) var(--aos-ease), box-shadow var(--aos-t-med) var(--aos-ease), background var(--aos-t-med) var(--aos-ease);
}
@media (hover: hover) { body .aos-interface-pill:hover { transform: translateX(-50%) translateY(-2px); box-shadow: var(--aos-shadow-m); } }
body .aos-interface-pill:active { transform: translateX(-50%) scale(.97); }

/* --- Λ, its icons, and the hint ----------------------------------------------- */
.aos-lambda { transition: left var(--aos-t-med) var(--aos-ease), top var(--aos-t-med) var(--aos-ease); }
.aos-lambda-face { transition: transform var(--aos-t-med) var(--aos-ease), opacity var(--aos-t-med) var(--aos-ease), box-shadow var(--aos-t-med) var(--aos-ease); }
.aos-lambda-app, .aos-lambda-more {
  border-radius: calc(var(--aos-lambda-item, 40px) * .31);
  transition: left var(--aos-t-med) var(--aos-ease), top var(--aos-t-med) var(--aos-ease), transform var(--aos-t-med) var(--aos-ease), opacity var(--aos-t-med) var(--aos-ease);
}
.aos-lambda-app .desktop-app-icon, .aos-lambda-app .alyssiun-color-icon { border-radius: calc(var(--aos-lambda-item, 40px) * .31 - 1px); }
.aos-lambda-more { border-radius: 50%; }

/* --- Mobile home --------------------------------------------------------------- */
.aos-mobile-greeting { font-weight: 300; letter-spacing: -.022em; }
.aos-mobile-section-label { font-size: var(--aos-fs-xs); font-weight: 650; letter-spacing: var(--aos-track-label); }
.aos-mobile-tile-icon { border-radius: var(--aos-icon-radius); transition: transform var(--aos-t-med) var(--aos-ease); }
.aos-mobile-tile:active .aos-mobile-tile-icon { transform: scale(.94); }
.aos-mobile-tile-label { font-size: var(--aos-fs-xs); font-weight: 450; letter-spacing: .005em; }
.aos-mobile-grid[data-view="list"] .aos-mobile-tile { border-radius: var(--aos-r-m); transition: background var(--aos-t-fast) var(--aos-ease); }
.aos-mobile-grid[data-view="list"] .aos-mobile-tile-icon { border-radius: var(--aos-icon-radius); }
.aos-mobile-view-toggle { border-radius: var(--aos-r-s); transition: color var(--aos-t-fast) var(--aos-ease), background var(--aos-t-fast) var(--aos-ease); }
.aos-mobile-chip, .aos-mobile-avatar, .aos-mobile-live-line, .aos-mobile-signin, .aos-mobile-support-btn, .aos-mobile-foot-link {
  transition: transform var(--aos-t-med) var(--aos-ease), background var(--aos-t-fast) var(--aos-ease), color var(--aos-t-fast) var(--aos-ease);
}
.aos-mobile-chip:active, .aos-mobile-support-btn:active, .aos-mobile-live-line:active { transform: scale(.97); }
.aos-mobile-ask-input { font-size: var(--aos-fs-md); transition: box-shadow var(--aos-t-med) var(--aos-ease), outline-color var(--aos-t-fast) var(--aos-ease); }
.aos-mobile-ask-input:focus { box-shadow: var(--aos-shadow-m); }
.aos-mobile-foot { border-top-color: var(--aos-hair); }
.aos-mobile-foot-company { letter-spacing: var(--aos-track-label); }

/* --- Switcher cards ------------------------------------------------------------ */
.aos-switcher-card { border-radius: var(--aos-r-xl); }
.aos-switcher-head { font-size: var(--aos-fs-sm); font-weight: 600; letter-spacing: .01em; }
.aos-switcher-head-icon .desktop-app-icon { border-radius: var(--aos-icon-radius); }
.aos-switcher-poster-icon .desktop-app-icon { border-radius: var(--aos-icon-radius); }
.aos-switcher-close { transition: transform var(--aos-t-fast) var(--aos-ease), background var(--aos-t-fast) var(--aos-ease); }
.aos-switcher-close:active { transform: scale(.9); }
@media (max-width: 640px) { .aos-switcher-card { border-radius: var(--aos-r-xl); } }

/* --- Settings window ----------------------------------------------------------- */
.settings-nav { border-right-color: var(--aos-hair); }
.settings-nav-item { border-radius: var(--aos-r-s); transition: background var(--aos-t-fast) var(--aos-ease), border-color var(--aos-t-fast) var(--aos-ease); }
.settings-nav-label { font-weight: 650; }
.settings-nav-hint { font-size: var(--aos-fs-xs); }
.wallpaper-label { font-size: var(--aos-fs-xs); font-weight: 650; letter-spacing: var(--aos-track-label); }
.settings-atmosphere-option, .wallpaper-swatch { border-radius: var(--aos-r-s); transition: border-color var(--aos-t-fast) var(--aos-ease), background var(--aos-t-fast) var(--aos-ease), transform var(--aos-t-fast) var(--aos-ease); }
.settings-atmosphere-option:active, .wallpaper-swatch:active { transform: scale(.985); }
.settings-bg-tab, .wallpaper-upload-button, .wallpaper-reset, .wallpaper-fit-option { transition: background var(--aos-t-fast) var(--aos-ease), color var(--aos-t-fast) var(--aos-ease), border-color var(--aos-t-fast) var(--aos-ease); }

/* --- Desktop shortcuts ---------------------------------------------------------- */
.desktop-shortcut { border-radius: var(--aos-r-s); transition: background var(--aos-t-fast) var(--aos-ease); }
.desktop-shortcut-label { border-radius: 6px; font-weight: 600; letter-spacing: .005em; }
.desktop-app-icon { border-radius: var(--aos-icon-radius); }
.window-identity .desktop-app-icon { border-radius: var(--aos-r-xs); }

/* --- Unread badges (os/badges/badges.js): one look on every icon ---------------- */
.aos-mobile-tile-icon, .aos-lambda-app { position: relative; }
.aos-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--aos-r-pill);
  background: var(--aos-ink); color: var(--aos-ink-on);
  box-shadow: 0 0 0 2px var(--aos-solid), var(--aos-shadow-s);
  font-family: var(--aos-font); font-size: 10.5px; font-weight: 700; line-height: 18px; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
  pointer-events: none;
  animation: aos-badge-in var(--aos-t-med) var(--aos-ease) both;
}
@keyframes aos-badge-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.aos-mobile-grid[data-view="list"] .aos-badge { top: -5px; right: -5px; }

/* --- Icon glyphs: one stroke weight on every surface ---------------------------- */
.desktop-app-icon svg, .aos-mobile-tile-icon svg, .aos-lambda-app svg, .aos-switcher-head-icon svg, .aos-switcher-poster-icon svg { stroke-width: 2.2; }

@media (prefers-reduced-motion: reduce) {
  .desktop-window.desktop-window, .window-control, .desktop-display-controls, .desktop-display-control, body .aos-interface-pill,
  .aos-lambda, .aos-lambda-face, .aos-lambda-app, .aos-lambda-more, .aos-mobile-tile-icon, .aos-mobile-chip, .aos-switcher-close,
  .settings-nav-item, .settings-atmosphere-option, .wallpaper-swatch, .desktop-shortcut { transition: none; }
  .aos-badge { animation: none; }
}

/* The floating Help & Support button (desktop/help-support.js supportFabMarkup),
   bottom right of the desktop layer on both shells. It is part of the desktop:
   BELOW every app window (the window / app layers stack above it), clear of the
   bottom bar (--os-inset-bottom) and of the device's safe areas. */
.os-support-fab {
  position: absolute; z-index: 0;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--aos-lambda-edge, rgba(255, 255, 255, .9));
  outline: 1px solid var(--aos-lambda-hair, rgba(14, 18, 34, .09)); outline-offset: -1px;
  background: var(--aos-lambda-glass, rgba(255, 255, 255, .66)); color: var(--aos-lambda-ink, #0e1018);
  box-shadow: var(--aos-lambda-shadow, 0 14px 40px rgba(20, 26, 50, .10));
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease;
}
.os-support-fab svg { width: 22px; height: 22px; }
@media (hover: hover) { .os-support-fab:hover { transform: translateY(-2px); } }
.os-support-fab:active { transform: scale(.94); }
.os-support-fab:focus-visible { outline: 2px solid var(--aos-lambda-ink, #0e1018); outline-offset: 3px; }
/* Mobile: the shell spans the whole screen, so the bar's height is cleared here
   (the Desktop surface already stops at the bar). Under the app layer (z 3). */
.aos-mobile-shell > .os-support-fab {
  z-index: 2; bottom: calc(max(var(--os-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 18px);
}
.aos-mobile-shell[data-switcher="true"] > .os-support-fab { visibility: hidden; }
/* Phones: only on the empty desktop. Hidden while the OS panel or any window is
   open (data-busy, help-support.js), and on the Mobile shell, whose home IS the
   panel (its footer carries its own Help & Support button). */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .os-support-fab[data-busy="true"], .aos-mobile-shell > .os-support-fab { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .os-support-fab { transition: none; } }