/* AskSary Portal — one screen, one nav.
   The nav above every surface is Aria Guardian's HorizontalSectorNav, exactly
   (owner, 2026-09-27): full-width tiles, each a sector or a panel, with an
   accent dot, a line icon, the label, its sub-labels and an accent underline
   when active. Surfaces keep their own DOM, their own composer and their own
   state, and are hidden or parked, never destroyed, so switching back
   resumes where the work was left.
   Loaded after every tool stylesheet: these rules only place the tools and
   never restyle them. */
:root {
  /* One line for the whole Portal (owner, 2026-09-27: "every line solid,
     exactly the same thickness as Studio's outlines"): 1px, opaque, the
     shade Studio's translucent border reads as over its dark surface. */
  --portal-line: #303030;
  --border-subtle: var(--portal-line);
  /* Inside .main-container (zoomed to 0.8 on desktop) a 1px line paints at
     0.8px; 1.25px there is the same thickness on screen. */
  --portal-line-z: 1px;
  --portal-bar-h: 92px;
  /* Aria's dashboard frame, almost full screen and sitting just under the
     nav (owner, 2026-09-27); the nav stays visible above it. */
  --dash-gap: 12px;
  --dash-w: calc(100vw - var(--dash-gap) * 2);
  --dash-h: calc(100vh - var(--portal-bar-h) - var(--dash-gap) * 2);
  --dash-head: 110px;
  --dash-top: calc(var(--portal-bar-h) + var(--dash-gap));
  --dash-left: calc((100vw - var(--dash-w)) / 2);
  --dash-body-top: calc(var(--dash-top) + var(--dash-head));
  --dash-body-h: calc(var(--dash-h) - var(--dash-head));
}

#portal-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--portal-bar-h);
  z-index: 100500; display: flex; align-items: stretch; gap: 0;
  padding: 0; box-sizing: border-box;
  background: rgba(4, 6, 18, .94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--portal-line);
  box-shadow: 0 4px 32px rgba(0, 0, 0, .52);
  color: #eaf7ff; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  -webkit-user-select: none; user-select: none;
  transition: opacity .38s ease;
}
/* Right-to-left languages do not mirror the bar: the brand (the SaryOS menu) stays at the left and the
   account at the right, as its margins and the menu's left anchor assume (owner, 2026-10-02: "make rtl
   not swap the logo around with profile as the logo is the menu button that goes off screen when
   flipped"). The labels are still Arabic; only the menus' own text runs right to left. */
html[dir="rtl"] #portal-bar { direction: ltr; }
html[dir="rtl"] #portal-brand-menu { direction: rtl; }
/* The nav stays visible while a panel is shown; the panel sits under it. */
html.light-mode { --portal-line: #dedfe3; }
html.light-mode #portal-bar { background: rgba(246, 248, 252, .94); color: #1a2333; }
#portal-bar .portal-brand {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; cursor: pointer;
  font-weight: 800; letter-spacing: .04em; font-size: 13px; white-space: nowrap;
  border-right: 1px solid var(--portal-line);
}
#portal-bar .portal-brand:hover { background: rgba(234, 247, 255, .028); }
#portal-bar .portal-brand-mark { font: 800 16px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; color: #eaf7ff; }
#portal-bar .portal-brand-mark b { color: #63f5ff; font-weight: 800; }
/* The logo (owner, 2026-10-01: "use the whole image and put the recording
   over it"; then "new logo top left": the owner's lotus logo clip, looping,
   /brand/saryos-logo.mp4 with its held frame as the poster) fills the brand at the bar's height, and
   Record (script.js mountSaryOSRecordButton) floats over its top-left corner. */
#portal-bar .portal-brand:has(.portal-brand-banner) { padding: 2px 1px 1.8px 3px; /* bottom 1.8 px, 1 px to the right (owner, 2026-10-01) */ box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, .08); }
/* The clip ends above the bar's grey line (owner, 2026-10-01: "make the video a bit smaller so the grey line goes over it"): the logo carries the same 2 px line as the tiles beside it, so it runs unbroken. */
/* A little smaller (owner, 2026-10-01: "make logo a little bit smaller too top left corner"): 80% of the bar's height, centred, with a margin either side. */
#portal-bar .portal-brand-mark { display: block; height: 100%; } /* fills the brand inside a 2 px padding all round (owner, 2026-10-01: "take padding down to 2px") */
#portal-bar .portal-brand-banner { display: block; height: 100%; width: auto; aspect-ratio: 31 / 24; object-fit: cover; background: #000; pointer-events: none; }
/* Record under Talk (owner, 2026-10-01: "move record to under talk"): one column in Talk's place;
   beside Talk when the bar folds into two short rows (1100 px and below). */
#portal-bar .portal-talk-stack { order: 5; align-self: center; margin-left: auto; margin-right: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
#portal-bar .portal-guide-btn + .portal-talk-stack { margin-left: 8px; }
#portal-bar .portal-talk-stack > .portal-narrate-btn { margin: 0 !important; order: 0; align-self: stretch; justify-content: center; }
#portal-bar .portal-talk-stack > #portal-record-btn { position: static; height: 26px; min-height: 0; padding: 0 10px; font-size: 11px; gap: 6px; justify-content: center; }
#portal-bar .portal-talk-stack > .portal-narrate-btn + .portal-surface-btn { margin-left: 0; }
@media (max-width: 1100px) {
  #portal-bar .portal-talk-stack { flex-direction: row; align-items: center; margin-right: 0; gap: 6px; }
  #portal-bar .portal-talk-stack > #portal-record-btn { height: 34px; }
  #portal-bar .portal-talk-stack > #portal-record-btn span { display: none; }
}
#portal-bar .portal-tabs { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#portal-bar .portal-tabs::-webkit-scrollbar { display: none; }
#portal-bar .portal-tab {
  --accent: #63f5ff; position: relative;
  appearance: none; flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 14px 18px 16px; background: transparent; border: 0; border-left: 1px solid var(--portal-line);
  border-bottom: 2px solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
#portal-bar .portal-tab:first-child { border-left: 0; }
#portal-bar .portal-tab:hover { background: rgba(234, 247, 255, .028); }
#portal-bar .portal-tab[aria-current="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom-color: var(--accent); }
#portal-bar .portal-tab .portal-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); flex: 0 0 auto; }
#portal-bar .portal-tab .portal-tab-icon { color: rgba(234, 247, 255, .55); transition: color .15s; line-height: 0; }
#portal-bar .portal-tab .portal-tab-icon svg { width: 22px; height: 22px; }
#portal-bar .portal-tab:hover .portal-tab-icon { color: rgba(234, 247, 255, .85); }
#portal-bar .portal-tab[aria-current="true"] .portal-tab-icon { color: var(--accent); }
#portal-bar .portal-tab .portal-tab-label { font-size: 13px; font-weight: 700; color: rgba(234, 247, 255, .88); letter-spacing: .02em; line-height: 1.2; }
#portal-bar .portal-tab[aria-current="true"] .portal-tab-label { color: var(--accent); }
#portal-bar .portal-tab .portal-tab-subs { font-size: 9px; color: rgba(173, 217, 255, .4); letter-spacing: .18em; }
html.light-mode #portal-bar .portal-tab .portal-tab-label { color: #1a2333; }
html.light-mode #portal-bar .portal-tab .portal-tab-icon { color: rgba(26, 35, 51, .6); }
html.light-mode #portal-bar .portal-tab .portal-tab-subs { color: rgba(26, 35, 51, .45); }
#portal-bar .portal-tab .portal-dot { position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #34d399; display: none; }
#portal-bar .portal-tab[data-alive="true"] .portal-dot { display: inline-block; }
#portal-bar .portal-right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 14px; border-left: 1px solid var(--portal-line); }
#portal-bar .portal-btn {
  appearance: none; border: 1px solid var(--portal-line); background: rgba(3, 3, 7, .6);
  color: inherit; height: 32px; padding: 0 12px; border-radius: 7px; font: inherit; font-size: 11.5px; letter-spacing: .06em;
  font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none;
}
#portal-bar .portal-btn:hover { background: rgba(99, 245, 255, .1); }
html.light-mode #portal-bar .portal-btn { background: #fff; border-color: #cfd8e6; }
#portal-bar .portal-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff; font-weight: 800; font-size: 12px;
  border: 0; cursor: pointer; padding: 0; overflow: hidden;
}
#portal-bar .portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
#portal-bar .portal-right { order: 6; margin-left: 0; }
/* Signed in, the box holds only the profile picture: it is the right-hand column's width, so its edge
   lines up with the tool squares below (owner, 2026-10-01: "same width as tool icons below"). */
#portal-bar .portal-right:has(> .portal-avatar:only-child) { box-sizing: border-box; width: var(--portal-side-w, 58px); min-width: 0; padding: 0; justify-content: center; }
#portal-bar .portal-tabs { order: 2; }
#portal-bar .portal-brand { order: 1; }
#portal-bar .portal-narrate-btn { order: 5; align-self: center; margin-left: auto; }
/* fa-microphone-lines carries wide side-bearing in its glyph box, so at the
   bar's shared 11.5px icon size it reads small and off-centre next to Talk
   (owner, 2026-09-28: "make the talk symbol fit better"). Centred in a fixed
   box, at the same visual weight as the line-art icons beside it. */
#portal-bar .portal-narrate-btn i { display: inline-flex; align-items: center; justify-content: center; width: 13px; font-size: 13px; }
#portal-bar .portal-surface-btn, #portal-bar .portal-wall-btn { order: 5; align-self: center; margin-left: 8px; }
#portal-bar .portal-narrate-btn + .portal-surface-btn { margin-left: 8px; }

/* The swap (owner, 2026-09-27: "a slow dissolve between them, like particle
   diffusion"). The surface that leaves softens and thins out, the one that
   arrives condenses from the same haze, and a field of drifting particles
   diffuses across the screen in between (portal.js draws it on a canvas). */
#portal-particles {
  position: fixed; inset: var(--portal-bar-h) 0 0 0; z-index: 100490; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
#portal-particles.on { opacity: 1; }
#portal-veil { display: none; }
@keyframes portalDissolveOut {
  from { opacity: 1; filter: blur(0) saturate(1); }
  to   { opacity: 0; filter: blur(18px) saturate(.6); }
}
@keyframes portalDissolveIn {
  from { opacity: 0; filter: blur(18px) saturate(.6); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0) saturate(1); }
}
.portal-dissolve-out { animation: portalDissolveOut .7s cubic-bezier(.4, 0, .6, 1) forwards !important; pointer-events: none !important; }
.portal-dissolve-in { animation: portalDissolveIn 1.15s cubic-bezier(.2, .7, .2, 1) both !important; }
/* Aria has no dissolve: panels scale in from .88 (the frame above); the
   particle field and the dissolve classes are kept off (portal.js ARIA_EXACT). */
.portal-dissolve-out, .portal-dissolve-in { animation: none !important; }
#portal-particles { display: none; }

/* Aria's navigating status overlay: the accent dot pulsing beside
   "ROUTING <label>", the route name beneath, fixed above the bottom. */
#portal-routing {
  --accent: #63f5ff; position: fixed; bottom: 140px; left: 50%; transform: translate(-50%, 8px); z-index: 100480; pointer-events: none;
  display: grid; gap: 4px; justify-items: center; padding: 10px 20px; border-radius: 8px;
  background: rgba(1, 2, 10, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
#portal-routing.is-visible { opacity: 1; transform: translate(-50%, 0); }
#portal-routing .pr-row { display: flex; align-items: center; gap: 10px; }
#portal-routing .pr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: navPulse .8s ease-in-out infinite; }
#portal-routing .pr-label { font-size: 12px; color: color-mix(in srgb, var(--accent) 92%, transparent); letter-spacing: .14em; }
#portal-routing .pr-route { font-size: 10px; color: rgba(234, 247, 255, .52); letter-spacing: .18em; text-transform: uppercase; }
@keyframes navPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.6); } }

body.cosmos-hover { cursor: pointer; }

/* Aria's backdrop behind the dashboard and the centre-floating dashboard
   frame the arriving tool docks into, exactly as Aria styles them (owner,
   2026-09-27: "identical to Aria"). LiveLoop is the one exception: it lands
   full screen with no frame. */
#portal-dashboard-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(1, 2, 10, .06); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; transition: opacity .42s ease; }
#portal-dashboard-scrim.is-visible { opacity: 1; }
#portal-dashboard {
  --accent: #63f5ff; position: fixed; top: var(--dash-top); left: var(--dash-left); width: var(--dash-w); height: var(--dash-h); z-index: 1; box-sizing: border-box;
  border-radius: 28px; border: 1px solid var(--portal-line);
  /* Glass: about 95% see-through (owner, 2026-09-27). */
  background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 34%), radial-gradient(circle at 82% 12%, rgba(255, 72, 220, .03), transparent 30%), linear-gradient(145deg, rgba(10, 7, 16, .06), rgba(5, 8, 18, .05) 54%, rgba(16, 7, 26, .055));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 42px 130px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .42s ease; transform: scale(.88); opacity: 0; pointer-events: none;
}
#portal-dashboard.is-visible { transform: scale(1); opacity: 1; pointer-events: auto; }
#portal-dashboard .pd-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 0; flex: 0 0 auto; height: calc(var(--dash-head) - 1px); box-sizing: border-box; }
#portal-dashboard .pd-arrival { display: flex; align-items: center; gap: 10px; }
#portal-dashboard .pd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
#portal-dashboard .pd-arrival-text { font-size: 10px; letter-spacing: .28em; color: color-mix(in srgb, var(--accent) 90%, transparent); text-transform: uppercase; }
#portal-dashboard .pd-label { margin-top: 8px; font-size: 30px; font-weight: 700; color: #eaf7ff; line-height: 1.1; }
#portal-dashboard .pd-callout { margin-top: 4px; font-size: 12px; color: rgba(215, 235, 255, .6); letter-spacing: .08em; text-transform: uppercase; }
#portal-dashboard .pd-close { background: none; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 7px; color: rgba(234, 247, 255, .72); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
#portal-dashboard .pd-close span { font-size: 14px; line-height: 1; }
#portal-dashboard .pd-close:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
#portal-dashboard .pd-rule { height: 1px; margin-top: 16px; background: color-mix(in srgb, var(--accent) 18%, transparent); flex: 0 0 auto; }
html.light-mode #portal-dashboard { background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(244, 247, 252, .76)); }
html.light-mode #portal-dashboard .pd-label { color: #1a2333; }
html.light-mode #portal-dashboard-scrim { background: rgba(240, 244, 250, .3); }

/* The docked surface fills the frame below its header. The tools' own
   stylesheets say inset:0 or top:0 at high z-index; these move the root into
   the frame. body.portal-docked is set by portal.js with the panel open. */
body.portal-ready.portal-docked #liveloop-container,
body.portal-ready.portal-docked #code-lab-overlay.cl-overlay,
body.portal-ready.portal-docked #visual-lib-overlay,
body.portal-ready.portal-docked #asksary-studio,
body.portal-ready.portal-docked #asksary-video-editor,
body.portal-ready.portal-docked #code-canvas-container.canvas-fullscreen,
body.portal-ready.portal-docked #code-canvas-container:not(.hidden) {
  position: fixed !important; top: var(--dash-body-top) !important; left: var(--dash-left) !important; right: auto !important; bottom: auto !important;
  width: var(--dash-w) !important; height: var(--dash-body-h) !important; max-height: none !important; margin: 0 !important;
  border-radius: 0 0 27px 27px !important; overflow: hidden !important;
  /* A transformed root is the containing block for its fixed descendants:
     the tools' own fixed panels (LiveLoop's stage and chat dock, the canvas
     preview) now fill the frame, as they filled the viewport before. */
  transform: translate3d(0, 0, 0) !important;
}
body.portal-ready.portal-docked #code-canvas-container:not(.hidden) { padding-top: 0 !important; }
/* The chat floor is a panel too. LiveLoop and the canvas live inside
   .main-container beside .chat-container, so only the chat grid is hidden or
   docked, never the container. */
body.portal-ready .main-container { height: 100vh; margin: 0; pointer-events: none; }
body.portal-ready .main-container > * { pointer-events: auto; }
body.portal-ready:not([data-portal-panel="chat"]) .main-container > .chat-container,
body.portal-ready:not([data-portal-panel="chat"]) .main-container > #canvas-chat-divider { visibility: hidden !important; pointer-events: none !important; }
body.portal-ready[data-portal-panel="chat"].portal-docked .main-container > .chat-container {
  position: fixed !important; top: var(--dash-body-top) !important; left: var(--dash-left) !important; width: var(--dash-w) !important; height: var(--dash-body-h) !important;
  border-radius: 0 0 27px 27px !important; overflow: hidden !important; z-index: 2; border-left: 0 !important; box-shadow: none !important; transform: translate3d(0, 0, 0);
}
body.portal-ready[data-portal-panel="chat"].portal-docked .sidebar { top: var(--dash-body-top) !important; height: var(--dash-body-h) !important; }
body.portal-ready[data-portal-panel="chat"].portal-docked .sidebar.open { left: var(--dash-left) !important; border-radius: 0 0 0 27px; }
/* The gallery's modal is sized to the viewport (95% x 90vh); inside the
   frame it fills the docked overlay instead. */
body.portal-ready.portal-docked #visual-lib-overlay .visual-modal { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; }
/* The desktop workspace (app.html) zooms .main-container to 0.8, so the
   roots inside it (LiveLoop, the canvas, the chat grid) take their frame
   geometry divided by that zoom; Code Lab restores zoom 1 while open. */
@media (min-width: 961px) {
  body.portal-ready.portal-docked:not(.coding-lab-open) #liveloop-container,
  body.portal-ready.portal-docked:not(.coding-lab-open) #code-canvas-container:not(.hidden),
  body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open) .main-container > .chat-container {
    top: calc(var(--dash-body-top) / .8) !important; left: calc(var(--dash-left) / .8) !important;
    width: calc(var(--dash-w) / .8) !important; height: calc(var(--dash-body-h) / .8) !important; border-radius: 0 0 34px 34px !important;
  }
}
/* LiveLoop, the landing panel, is full screen under the nav: no frame. */
body.portal-ready.portal-docked[data-portal-panel="liveloop"] #liveloop-container {
  /* --portal-vh is the dynamic viewport and --portal-bar-h carries the top
     safe area, so LiveLoop never runs under a phone's browser chrome. */
  top: var(--portal-bar-h) !important; left: var(--sa-left, 0px) !important; width: 100vw !important; height: calc(var(--portal-vh, 100vh) - var(--portal-bar-h) - var(--sa-bottom, 0px)) !important; border-radius: 0 !important;
}
@media (min-width: 961px) {
  body.portal-ready.portal-docked[data-portal-panel="liveloop"]:not(.coding-lab-open) #liveloop-container {
    top: calc(var(--portal-bar-h) / .8) !important; left: calc(var(--sa-left, 0px) / .8) !important; width: calc(100vw / .8) !important; height: calc((var(--portal-vh, 100vh) - var(--portal-bar-h) - var(--sa-bottom, 0px)) / .8) !important; border-radius: 0 !important;
  }
}
body.portal-ready[data-portal-panel="liveloop"] #portal-dashboard, body.portal-ready[data-portal-panel="liveloop"] #portal-dashboard-scrim { display: none; }
body.portal-ready #suite-panel-overlay { top: var(--portal-bar-h); }
body.portal-ready #session-shield { z-index: 100600; }
/* The parked-workspace dock has no room between the nav and the frame; the
   nav's green dots carry the parked state, and each tool keeps its own X. */
body.portal-ready #workspace-resume-dock { display: none !important; }
@media (prefers-reduced-motion: reduce) { #portal-dashboard { transition: none; } }

/* The narration overlay (cosmos/narration.js), Aria's NarrativeVoiceOverlay
   driven by LiveLoop's realtime voice: a full-screen entity that never takes
   input except through its Close control and question dock. */
#portal-narration { position: fixed; inset: var(--portal-bar-h) 0 0 0; z-index: 100600; pointer-events: none; opacity: 0; transition: opacity .5s ease; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
#portal-narration.is-open { opacity: 1; }
#portal-narration .pn-entity { position: absolute; inset: 0; overflow: hidden; }
#portal-narration .pn-entity canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#portal-narration .pn-noise { opacity: .16; mix-blend-mode: soft-light; }
#portal-narration .pn-close {
  position: absolute; top: 18px; right: 18px; pointer-events: auto; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(5, 10, 22, .86); color: #f5fbff;
  padding: 8px 14px; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
#portal-narration.is-open .pn-close { pointer-events: auto; }
#portal-narration .pn-dock {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(560px, 92vw);
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; pointer-events: none;
}
#portal-narration.is-open .pn-dock { pointer-events: auto; }
#portal-narration .pn-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(160, 205, 255, .22);
  background: rgba(5, 10, 22, .78); color: #eaf7ff; font: inherit; font-size: 12px; letter-spacing: .04em; outline: none;
}
#portal-narration .pn-input:focus { border-color: rgba(99, 245, 255, .55); box-shadow: 0 0 0 3px rgba(99, 245, 255, .12); }
#portal-narration .pn-ask {
  border: 1px solid rgba(160, 205, 255, .22); border-radius: 999px; background: rgba(22, 135, 255, .12); color: rgba(234, 247, 255, .86);
  padding: 9px 14px; font: inherit; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
#portal-narration .pn-status {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); max-width: 92vw; text-align: center;
  color: rgba(234, 247, 255, .72); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* While Talk is on the voice layer is in front of everything (owner, 2026-09-28);
   the bar rises above it so its Talk button, now "End talk", stays in reach. */
body.portal-talk-open #portal-bar { z-index: 100700 !important; }
/* The voice guide button (public/voice-guide.js) sits before Talk and takes
   the push to the right that Talk had on its own. While the guide is on, the
   controls it can describe show a help cursor, and the one being described
   is outlined. */
#portal-bar .portal-guide-btn { order: 5; align-self: center; margin-left: auto; padding: 0 17px; gap: 10px; }
#portal-bar .portal-guide-btn i { display: inline-flex; align-items: center; justify-content: center; width: 13px; font-size: 13px; }
#portal-bar .portal-guide-btn + .portal-narrate-btn { margin-left: 8px; }
#portal-bar .portal-guide-btn.is-open { border-color: rgba(99, 245, 255, .7); background: rgba(99, 245, 255, .14); }
#portal-bar .portal-guide-btn.is-speaking { box-shadow: 0 0 14px rgba(99, 245, 255, .25); }
body.portal-guide-on #portal-bar [data-item], body.portal-guide-on #portal-dock [data-item],
body.portal-guide-full #liveloop-container button,
body.portal-guide-on .portal-signin, body.portal-guide-on #portal-narrate-btn { cursor: help !important; }
.portal-guide-speaking { outline: 2px solid rgba(99, 245, 255, .85) !important; outline-offset: 2px; }
/* The pop-up that explains the guide before it turns on. Solid, no blur. */
#portal-guide-prompt { position: fixed; inset: 0; z-index: 100700; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: Inter, system-ui, sans-serif; }
#portal-guide-prompt .pg-scrim { position: absolute; inset: 0; background: rgba(1, 2, 10, .55); }
#portal-guide-prompt .pg-card { position: relative; width: min(460px, 100%); padding: 22px 22px 18px; border: 1px solid rgba(99, 245, 255, .35); border-radius: 14px; background: rgb(9, 11, 18); color: #e8ecf5; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
#portal-guide-prompt .pg-eyebrow { display: flex; align-items: center; gap: 8px; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #63f5ff; }
#portal-guide-prompt h2 { margin: 12px 0 10px; font: 800 19px/1.25 Inter, system-ui, sans-serif; color: #fff; }
#portal-guide-prompt p { margin: 0 0 10px; font: 400 14px/1.5 Inter, system-ui, sans-serif; color: #c4cad8; }
#portal-guide-prompt .pg-free { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid rgba(34, 197, 94, .45); border-radius: 10px; background: rgba(34, 197, 94, .1); color: #dcfce7; font-weight: 600; }
#portal-guide-prompt .pg-free i { margin-top: 3px; color: #4ade80; }
html.light-mode #portal-guide-prompt .pg-free { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .5); color: #14532d; }
html.light-mode #portal-guide-prompt .pg-free i { color: #16a34a; }
#portal-guide-prompt .pg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
#portal-guide-prompt .pg-choice { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #e8ecf5; cursor: pointer; }
#portal-guide-prompt .pg-choice b { font: 800 15px/1.2 Inter, system-ui, sans-serif; color: #fff; }
#portal-guide-prompt .pg-choice span { font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #c4cad8; }
#portal-guide-prompt .pg-choice:hover, #portal-guide-prompt .pg-choice:focus-visible, #portal-guide-prompt .pg-choice.is-last { border-color: rgba(99, 245, 255, .7); background: rgba(99, 245, 255, .12); outline: none; }
html.light-mode #portal-guide-prompt .pg-choice { border-color: rgba(0, 0, 0, .18); background: #fff; color: #1b2030; }
html.light-mode #portal-guide-prompt .pg-choice b { color: #0b1020; }
html.light-mode #portal-guide-prompt .pg-choice span { color: #3d4558; }
html.light-mode #portal-guide-prompt .pg-choice:hover, html.light-mode #portal-guide-prompt .pg-choice.is-last { border-color: #0891b2; background: rgba(8, 145, 178, .08); }
@media (max-width: 480px) { #portal-guide-prompt .pg-choices { grid-template-columns: 1fr; } }
#portal-guide-prompt .pg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
#portal-guide-prompt .pg-actions button { padding: 10px 16px; border-radius: 10px; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
#portal-guide-prompt .pg-cancel { border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #c4cad8; }
#portal-guide-prompt .pg-accept { border: 1px solid rgba(99, 245, 255, .7); background: rgba(99, 245, 255, .16); color: #fff; }
html.light-mode #portal-guide-prompt .pg-card { background: #f6f7fb; color: #1b2030; border-color: rgba(8, 145, 178, .45); }
html.light-mode #portal-guide-prompt h2 { color: #0b1020; }
html.light-mode #portal-guide-prompt p, html.light-mode #portal-guide-prompt .pg-cancel { color: #3d4558; }
html.light-mode #portal-guide-prompt .pg-cancel { border-color: rgba(0, 0, 0, .2); }
html.light-mode #portal-guide-prompt .pg-eyebrow { color: #0891b2; }
html.light-mode #portal-guide-prompt .pg-accept { background: #0891b2; border-color: #0891b2; color: #fff; }
#portal-bar .portal-narrate-btn.is-open { border-color: rgba(255, 99, 132, .6); background: rgba(255, 99, 132, .12); }
#portal-bar .portal-narrate-btn.is-live { border-color: rgba(99, 245, 255, .7); background: rgba(99, 245, 255, .14); box-shadow: 0 0 14px rgba(99, 245, 255, .25); }
@media (prefers-reduced-motion: reduce) { #portal-narration .pn-noise { display: none; } }

@media (max-width: 1700px) {
  #portal-bar .portal-tab { padding: 11px 12px 13px; gap: 4px; }
  #portal-bar .portal-tab .portal-tab-label { font-size: 12px; }
  #portal-bar .portal-tab .portal-tab-subs { display: none; }
  #portal-bar .portal-tab .portal-tab-icon svg { width: 19px; height: 19px; }
}
@media (max-width: 1360px) {
}
/* Phones: the tiles shed their sub-labels and icons; the frame goes edge to edge. */
@media (max-width: 900px) {
  :root { --portal-bar-h: 64px; --dash-w: 100vw; --dash-h: calc(100vh - var(--portal-bar-h)); --dash-head: 56px; }
  
  #portal-bar .portal-tab { padding: 10px 12px 12px; gap: 3px; flex: 0 0 auto; }
  #portal-bar .portal-tab .portal-tab-subs, #portal-bar .portal-tab .portal-tab-icon { display: none; }
  #portal-bar .portal-btn span { display: none; }
  #portal-dashboard { border-radius: 0; border-left: 0; border-right: 0; }
  #portal-dashboard .pd-label { font-size: 16px; }
  #portal-dashboard .pd-callout { display: none; }
  body.portal-ready.portal-docked #liveloop-container, body.portal-ready.portal-docked #code-lab-overlay.cl-overlay, body.portal-ready.portal-docked #visual-lib-overlay,
  body.portal-ready.portal-docked #asksary-studio, body.portal-ready.portal-docked #asksary-video-editor, body.portal-ready.portal-docked #code-canvas-container:not(.hidden),
  body.portal-ready[data-portal-panel="chat"].portal-docked .main-container > .chat-container { border-radius: 0 !important; }
  #portal-routing { bottom: 90px; }
}

/* Every panel follows Code Lab (owner, 2026-09-27): the frame has no header
   of its own, the tool's own header is the one line, and the tool fills the
   frame. The nav tiles, the brand (home) and each tool's own close leave it. */
body.portal-ready { --dash-head: 0px; --dash-body-top: var(--dash-top); --dash-body-h: var(--dash-h); }
#portal-dashboard .pd-head, #portal-dashboard .pd-rule { display: none; }
body.portal-ready.portal-docked #liveloop-container, body.portal-ready.portal-docked #code-lab-overlay.cl-overlay, body.portal-ready.portal-docked #visual-lib-overlay,
body.portal-ready.portal-docked #asksary-studio, body.portal-ready.portal-docked #asksary-video-editor, body.portal-ready.portal-docked #code-canvas-container:not(.hidden),
body.portal-ready[data-portal-panel="chat"].portal-docked .main-container > .chat-container { border-radius: 27px !important; }
@media (min-width: 961px) { body.portal-ready.portal-docked:not(.coding-lab-open) #code-canvas-container:not(.hidden), body.portal-ready.portal-docked:not(.coding-lab-open) #liveloop-container,
  body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open) .main-container > .chat-container { border-radius: 34px !important; } }
:root:root:root:root body.portal-docked #code-canvas-container .canvas-header { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px; min-height: 0 !important; padding: 8px 16px !important; }
:root:root:root:root body.portal-docked #code-canvas-container .canvas-header-left { flex: 1 1 auto; min-width: 340px; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; position: relative; z-index: 2; }
:root:root:root:root body.portal-docked #code-canvas-container .canvas-header-actions { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; }
:root:root:root:root body.portal-docked #code-canvas-container .canvas-header-actions::-webkit-scrollbar { display: none; }
/* Narrower frames: the tools go icon-only so the search box keeps its room. */
@media (max-width: 1320px) { :root:root:root:root body.portal-docked #code-canvas-container .canvas-header-actions .canvas-tool-label { display: none; } }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label { font-size: 0 !important; line-height: 1; white-space: nowrap; width: auto !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; overflow: visible !important; display: inline-flex !important; align-items: center; }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label i { display: none !important; }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label::after { content: 'Code Lab'; font: 700 22px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; letter-spacing: .01em; }
:root:root:root:root body.portal-docked[data-portal-panel="canvas"] #code-canvas-container #canvas-title-label::after { content: 'Canvas'; }
:root:root:root:root body.portal-docked #code-canvas-container .view-toggles { display: none !important; }
:root:root:root:root body.portal-docked #code-canvas-container #coding-lab-search { margin-left: auto; flex: 0 1 auto; min-width: 0; }
@media (max-width: 900px) { :root:root:root:root body.portal-docked #code-canvas-container .canvas-header-actions .canvas-tool-label { display: none; } }
/* Canvas / Code Lab docked on tablets and phones: the header stays on top
   (app.html moves it to the bottom below 768px), wraps into a title row and an
   action row, and the close is pinned at its top right so it is always on
   screen. With the split on, the lab is tabbed below 900px (applyCodingLabTabs):
   the Preview / Code / Assistant toggles are its only way between panes. */
@media (max-width: 900px) {
  :root:root:root:root body.portal-docked #code-canvas-container .canvas-header { order: -1 !important; position: relative; flex-wrap: wrap !important; row-gap: 8px; padding: 8px 60px 8px 12px !important; border-top: 0 !important; }
  :root:root:root:root body.portal-docked #code-canvas-container .canvas-header-left { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 8px; }
  :root:root:root:root body.portal-docked #code-canvas-container .canvas-header-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap !important; overflow: visible; row-gap: 6px; }
  :root:root:root:root body.portal-docked #code-canvas-container #close-canvas-btn { position: absolute; top: 8px; right: 12px; margin: 0; }
  :root:root:root:root body.portal-docked #code-canvas-container.coding-lab-split[data-lab-tab] .view-toggles { display: flex !important; }
  :root:root:root:root body.portal-docked #code-canvas-container.coding-lab-split[data-lab-tab="code"] #coding-lab-search { margin-left: 0; flex: 1 1 140px; }
}

/* Serenity: the grey controls in the Code Lab (Run, Cost: Approve, the
   detach button, the composer's buttons) match the black tool buttons
   (owner, 2026-09-27: "match the grey buttons to the black ones"). */
:root:root:root:root.theme-stealth:not(.light-mode) #run-code-btn,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-cost-mode,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-detach,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-ai .coding-lab-ai-head button,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-ai .coding-lab-ai-header button,
:root:root:root:root.theme-stealth:not(.light-mode) .asksary-composer .asksary-composer-btn {
  background: #050505 !important; background-image: none !important; border: 1px solid #303030 !important; color: #f5f5f5 !important; box-shadow: none !important;
}
:root:root:root:root.theme-stealth:not(.light-mode) #run-code-btn:hover,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-cost-mode:hover,
:root:root:root:root.theme-stealth:not(.light-mode) #coding-lab-detach:hover,
:root:root:root:root.theme-stealth:not(.light-mode) .asksary-composer .asksary-composer-btn:hover { background: #141414 !important; border-color: #4a4a4a !important; }
:root:root:root:root.theme-stealth:not(.light-mode) .asksary-composer .asksary-composer-effort-menu { background: #050505; border-color: #303030; }

/* No AskSary branding inside the panels (owner, 2026-09-27): the gallery is
   "Gallery", the studio is "Studio", LiveLoop drops its tag line. */
:root:root:root:root #visual-lib-overlay .visual-header h2 { font-size: 0 !important; line-height: 1 !important; }
:root:root:root:root #visual-lib-overlay .visual-header h2 i { display: none !important; }
:root:root:root:root #visual-lib-overlay .visual-header h2::after { content: 'Sary-OS Drive'; font: 700 22px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; }
:root:root:root:root #asksary-studio .ast-brand { font-size: 0 !important; }
:root:root:root:root #asksary-studio .ast-brand::after { content: 'StudioLab'; font: 700 20px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; }
:root:root:root:root #asksary-studio .ast-badge { display: none !important; }
:root:root:root:root #liveloop-container .liveloop-veil-mark small { display: none !important; }
/* No arrival flash (owner, 2026-10-01: "remove the loading logo that comes on for a split second in the panel"): the LiveLoop mark and purple glow (app.html .liveloop-veil, 1.15 s on opening) are not drawn. */
:root:root:root:root #liveloop-container .liveloop-veil { display: none !important; animation: none !important; }
:root:root:root:root #liveloop-container .liveloop-title strong { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Solid mode (owner, 2026-09-27: "two modes, transparent and solid, that
   users can toggle"): body.portal-solid, set by the Glass / Solid control in
   the nav and kept in localStorage. The frame and scrim go opaque here; the
   tool shells go opaque in portal-backdrops.css. */
body.portal-solid #portal-dashboard { background: var(--ps-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.portal-solid #portal-dashboard-scrim { background: rgba(1, 2, 10, .55); }
#portal-bar .portal-surface-btn.is-solid { border-color: rgba(234, 247, 255, .5); }

/* The LiveLoop field: the background under the stage, and the overlay over
   it while a patch is in flight (script.js liveLoopFieldBuilding). */
#liveloop-field-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
:root:root:root:root #liveloop-viewport > #liveloop-zoom-canvas, :root:root:root:root #liveloop-viewport > #liveloop-stage-shell { position: relative; z-index: 1; }
#liveloop-field-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .7s ease; }
#liveloop-field-overlay.is-on { opacity: 1; }
/* On is a filled key with the word On; off is an outline with the word Off
   (owner, 2026-10-04: "not clear when its on or off"). Outranks the tools'
   border rule below, which had cancelled the old on-state border. */
:root:root:root:root #liveloop-container .liveloop-tools #liveloop-visuals-btn#liveloop-visuals-btn[aria-pressed="true"] { background: #6d28d9 !important; border-color: #6d28d9 !important; color: #fff !important; }
:root:root:root:root #liveloop-container .liveloop-tools #liveloop-visuals-btn#liveloop-visuals-btn[aria-pressed="false"] { background: transparent !important; opacity: .72; }
#liveloop-visuals-btn .liveloop-visuals-state { font-weight: 800; margin-left: 2px; }

/* Every structural line inside the panels is the Portal line: 1px, solid. */
@media (min-width: 961px) { body.portal-ready:not(.coding-lab-open) { --portal-line-z: 1.25px; } }
:root:root:root:root #liveloop-container .liveloop-header { border-bottom: var(--portal-line-z) solid var(--portal-line) !important; }
:root:root:root:root #liveloop-chat.live-chat-panel { border-top: var(--portal-line-z) solid var(--portal-line) !important; }
:root:root:root:root #code-canvas-container .canvas-header { border-bottom: var(--portal-line-z) solid var(--portal-line) !important; }
:root:root:root:root #code-canvas-container .coding-lab-ai, :root:root:root:root #code-canvas-container #coding-lab-ai { border-left: var(--portal-line-z) solid var(--portal-line) !important; }
:root:root:root:root #code-lab-overlay .cl-header { border-bottom: 1px solid var(--portal-line) !important; }
:root:root:root:root #code-lab-overlay .cl-sidebar { border-right: 1px solid var(--portal-line) !important; }
:root:root:root:root #code-lab-overlay .cl-ai { border-left: 1px solid var(--portal-line) !important; }
:root:root:root:root #visual-lib-overlay .visual-header, :root:root:root:root #visual-lib-overlay .visual-tabs { border-bottom: 1px solid var(--portal-line) !important; }
:root:root:root:root #visual-lib-overlay .gallery-sidebar { border-right: 1px solid var(--portal-line) !important; }
:root:root:root:root #asksary-studio { --ast-border: var(--portal-line); }
:root:root:root:root .asksary-composer { --composer-border: var(--portal-line); }
:root:root:root:root .asksary-composer .asksary-composer-btn, :root:root:root:root .asksary-composer .asksary-composer-effort-menu { border-color: var(--portal-line) !important; }
:root:root:root:root .main-container > .chat-container { border-left: var(--portal-line-z) solid var(--portal-line) !important; box-shadow: none !important; }
:root:root:root:root #liveloop-container .liveloop-tools button, :root:root:root:root #code-canvas-container .canvas-tool-btn, :root:root:root:root #code-lab-overlay .cl-btn, :root:root:root:root #code-lab-overlay .cl-icon-btn { border-color: var(--portal-line) !important; }
:root:root:root:root #liveloop-container .asksary-composer, :root:root:root:root #liveloop-container .asksary-composer .asksary-composer-btn, :root:root:root:root #code-canvas-container .asksary-composer, :root:root:root:root #code-canvas-container .asksary-composer .asksary-composer-btn { border-width: var(--portal-line-z) !important; }

/* LiveLoop header: two lines. Row 1 ends with Today's work and Back; row 2
   is the tool row alone (it wraps rather than scrolling: see below);
   the stage fills everything beneath with no gap. */
:root:root:root:root #liveloop-container .liveloop-header { padding: 8px 12px !important; gap: 6px !important; }
:root:root:root:root #liveloop-container .liveloop-header-row1, :root:root:root:root #liveloop-container .liveloop-header-row2 { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; min-width: 0; }
:root:root:root:root #liveloop-container .liveloop-header-row1::-webkit-scrollbar, :root:root:root:root #liveloop-container .liveloop-header-row2::-webkit-scrollbar { display: none; }
:root:root:root:root #liveloop-container .liveloop-header-row1 .liveloop-row1-end { margin-left: auto !important; flex: 0 0 auto; }
:root:root:root:root #liveloop-container .liveloop-header-row1 #liveloop-close-btn { flex: 0 0 auto; }
:root:root:root:root #liveloop-container .liveloop-tools, :root:root:root:root #liveloop-container .liveloop-tools-secondary { flex-wrap: nowrap !important; }
:root:root:root:root #liveloop-container .liveloop-tools button span, :root:root:root:root #liveloop-container .liveloop-header-row1 button span { white-space: nowrap; }
:root:root:root:root #liveloop-stage { margin: 0 !important; }
/* Every control reachable at every width (browser test 2026-09-28, T1/M3/P4:
   the rows scrolled sideways with no scrollbar, so Record..Download, Run,
   Files and Back sat past the edge). The rows wrap instead of hiding what
   does not fit; where the two lines would not hold, the tools go icon-only
   first (each keeps its title), and below 900px the tool row folds behind
   "More" (#liveloop-more-btn, liveloop-layout.js). */
:root:root:root:root #liveloop-container .liveloop-header-row1, :root:root:root:root #liveloop-container .liveloop-header-row2 { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px !important; }
:root:root:root:root #liveloop-container .liveloop-tools, :root:root:root:root #liveloop-container .liveloop-tools-secondary { flex-wrap: wrap !important; min-width: 0; row-gap: 6px; }
:root:root:root:root #liveloop-container .liveloop-more-wrap { display: none !important; }
/* The tool row lives inside row 1 (arrangeLiveLoopHeader): its buttons are
   row 1's own items, so they fill row 1's second line beside Today's work
   and Back; the emptied row 2 takes no space. */
:root:root:root:root #liveloop-container .liveloop-header-row1 > .liveloop-tools-secondary { display: contents !important; }
:root:root:root:root #liveloop-container .liveloop-header-row2:not(:has(> :not(.hidden))) { display: none !important; }
@media (max-width: 1439px) {
  :root:root:root:root #liveloop-container .liveloop-tools-secondary button > span { display: none !important; }
  :root:root:root:root #liveloop-container .liveloop-tools-secondary button { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 1100px) {
  :root:root:root:root #liveloop-container .liveloop-header-row1 .liveloop-tools button:not(#liveloop-more-btn) > span { display: none !important; }
  :root:root:root:root #liveloop-container .liveloop-title small { display: none !important; }
}
@media (max-width: 899px) {
  :root:root:root:root #liveloop-container .liveloop-header { padding: 6px 8px !important; }
  :root:root:root:root #liveloop-container .liveloop-header-row1, :root:root:root:root #liveloop-container .liveloop-header-row2, :root:root:root:root #liveloop-container .liveloop-tools { column-gap: 6px !important; }
  :root:root:root:root #liveloop-container .liveloop-more-wrap { display: inline-flex !important; }
  :root:root:root:root #liveloop-container:not(.ll-more-open) .liveloop-header-row2 { display: none !important; }
  :root:root:root:root #liveloop-container:not(.ll-more-open) .liveloop-header-row1 > .liveloop-tools-secondary { display: none !important; }
  :root:root:root:root #liveloop-container .liveloop-header-row1 #liveloop-close-btn > span, :root:root:root:root #liveloop-container .liveloop-header-row1 #liveloop-report-btn > span { display: none !important; }
  :root:root:root:root #liveloop-container #liveloop-project-name { max-width: 140px; }
  :root:root:root:root #liveloop-container .liveloop-title strong { font-size: 13px; }
}
/* A phone: the first row's tools (New, Talk, Versions, Projects, Run, the
   effort dial) fold behind "More" as well, so the header is two short lines
   and the stage keeps its room. */
@media (max-width: 560px) {
  :root:root:root:root #liveloop-container:not(.ll-more-open) .liveloop-header-row1 > .liveloop-tools:not(.liveloop-more-wrap) { display: none !important; }
  :root:root:root:root body #liveloop-container .liveloop-title small, :root:root:root:root body #liveloop-container .liveloop-title > i, :root:root:root:root body #liveloop-more-btn > span { display: none !important; }
  /* What describes the session on the first line; the controls on the second. */
  :root:root:root:root #liveloop-container .liveloop-header-row1 > .liveloop-title, :root:root:root:root #liveloop-container #liveloop-project-name, :root:root:root:root #liveloop-container #liveloop-context,
  :root:root:root:root #liveloop-container #liveloop-plan, :root:root:root:root #liveloop-container #liveloop-save { order: -1; }
  :root:root:root:root #liveloop-container .liveloop-header-row1 .liveloop-row1-end { margin-left: 0 !important; }
  :root:root:root:root #liveloop-container .liveloop-header-row1 > .liveloop-more-wrap { margin-left: auto; }
}

/* The other tools: a vertical column down the right-hand side, under the
   nav, in the tile style at square size (owner, 2026-09-27). Tiles and
   squares drag anywhere; a square dropped on a tile swaps with it. */
:root { --portal-side-w: 58px; }
#portal-side {
  position: fixed; top: var(--portal-bar-h); right: 0; bottom: 0; width: var(--portal-side-w); z-index: 100500; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; padding: 10px 0; overflow-y: auto; scrollbar-width: none;
  background: rgba(4, 6, 18, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-left: 1px solid var(--portal-line);
}
#portal-side::-webkit-scrollbar { display: none; }
html.light-mode #portal-side { background: rgba(246, 248, 252, .94); }
#portal-side .portal-dock { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 100%; width: 100%; }
#portal-side .portal-square {
  --accent: #63f5ff; position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--portal-line); border-radius: 9px; background: rgba(3, 3, 7, .6); color: rgba(234, 247, 255, .72); font-size: 15px; cursor: grab; transition: background .15s, color .15s, border-color .15s;
}
#portal-side .portal-square:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
#portal-side .portal-square .portal-tab-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
#portal-side .portal-square.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
#portal-side .portal-dock.is-over { box-shadow: inset 0 0 0 1px rgba(99, 245, 255, .35); }
#portal-bar .portal-tab .portal-tab-icon i { font-size: 19px; line-height: 22px; }
#portal-bar .portal-tab { cursor: grab; }
#portal-bar .portal-tab:active, #portal-side .portal-square:active { cursor: grabbing; }
#portal-bar .is-dragging, #portal-side .is-dragging { opacity: .35; }
#portal-bar .portal-tab.is-over { background: color-mix(in srgb, var(--accent) 16%, transparent); border-bottom-color: var(--accent); }
#portal-bar .portal-tabs.is-over { box-shadow: inset 0 0 0 1px rgba(99, 245, 255, .35); }
/* The frame and LiveLoop stop short of the column. */
:root { --dash-w: calc(100vw - var(--portal-side-w) - var(--dash-gap) * 2); --dash-left: var(--dash-gap); }
body.portal-ready.portal-docked[data-portal-panel="liveloop"] #liveloop-container { width: calc(100vw - var(--portal-side-w) - var(--sa-left, 0px) - var(--sa-right, 0px)) !important; }
@media (min-width: 961px) { body.portal-ready.portal-docked[data-portal-panel="liveloop"]:not(.coding-lab-open) #liveloop-container { width: calc((100vw - var(--portal-side-w) - var(--sa-left, 0px) - var(--sa-right, 0px)) / .8) !important; } }
@media (max-width: 900px) { :root { --portal-side-w: 46px; --dash-w: calc(100vw - var(--portal-side-w)); } #portal-side .portal-square { width: 34px; height: 34px; font-size: 13px; } }

/* The Portal's overlays (portal-auth.js): sign in / create account, and the
   landing page's pages. The frame is the panel frame; it dissolves from
   glass to solid slowly (owner, 2026-09-27: "dissolve to solid, slow motion"). */
.portal-overlay { position: fixed; inset: 0; z-index: 100650; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.portal-overlay[hidden] { display: none; }
.portal-overlay .po-scrim { position: absolute; inset: 0; background: rgba(1, 2, 10, 0); transition: background 1.6s ease; }
.portal-overlay.is-open .po-scrim { background: rgba(1, 2, 10, .45); }
.portal-overlay .po-frame {
  position: absolute; top: calc(var(--portal-bar-h) + var(--dash-gap)); left: 50%; width: min(720px, calc(100vw - var(--portal-side-w) - var(--dash-gap) * 2)); height: calc(100vh - var(--portal-bar-h) - var(--dash-gap) * 2);
  transform: translateX(calc(-50% - var(--portal-side-w) / 2)) scale(.96); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--portal-line); border-radius: 28px; background: rgba(7, 8, 14, 0); opacity: 0;
  transition: background 1.8s ease, opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.portal-overlay.is-open .po-frame { background: rgb(7, 8, 14); opacity: 1; transform: translateX(calc(-50% - var(--portal-side-w) / 2)) scale(1); }
#portal-page .po-frame { width: min(1120px, calc(100vw - var(--portal-side-w) - var(--dash-gap) * 2)); }
html.light-mode .portal-overlay.is-open .po-frame { background: #f6f7fb; }
.portal-overlay .po-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--portal-line); flex: 0 0 auto; }
.portal-overlay .po-tabs { display: flex; gap: 6px; }
.portal-overlay .po-tabs button, .portal-overlay .po-close {
  appearance: none; height: 34px; padding: 0 12px; border: 1px solid var(--portal-line); border-radius: 8px; background: #050505; color: rgba(234, 247, 255, .82);
  font: 700 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; cursor: pointer;
}
.portal-overlay .po-tabs button[aria-current="true"] { color: #63f5ff; border-color: #63f5ff; }
.portal-overlay .po-tabs button:hover, .portal-overlay .po-close:hover { background: #141414; }
.portal-overlay .po-title { flex: 1 1 auto; text-align: right; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(234, 247, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-overlay .po-close span { font-size: 14px; }
.portal-overlay .po-body { flex: 1 1 auto; min-height: 0; }
.portal-overlay .po-frame-body { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: dark; }
html.light-mode .portal-overlay .po-frame-body { color-scheme: light; }
@media (max-width: 900px) { .portal-overlay .po-frame { border-radius: 0; width: calc(100vw - var(--portal-side-w)); height: calc(100vh - var(--portal-bar-h)); top: var(--portal-bar-h); } .portal-overlay .po-tabs button { padding: 0 8px; font-size: 11px; } }

/* SaryOS (owner, 2026-09-27): every panel carries the house mark. */
:root:root:root:root #liveloop-container .liveloop-title small { display: inline !important; margin-left: 8px; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55) !important; }
:root:root:root:root #code-canvas-container #canvas-title-label::after { content: 'Code Lab'; }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label { gap: 8px; }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label::before { content: 'Code Lab'; font: 700 22px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; letter-spacing: .01em; }
:root:root:root:root body.portal-docked[data-portal-panel="canvas"] #code-canvas-container #canvas-title-label::before { content: 'Canvas'; }
:root:root:root:root body.portal-docked #code-canvas-container #canvas-title-label::after, :root:root:root:root body.portal-docked[data-portal-panel="canvas"] #code-canvas-container #canvas-title-label::after { content: 'by Sary-OS'; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55); }
:root:root:root:root #visual-lib-overlay .visual-header h2 { display: inline-flex !important; align-items: baseline; gap: 8px; }
:root:root:root:root #visual-lib-overlay .visual-header h2::before { content: 'Sary-OS Drive'; font: 700 22px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; }
:root:root:root:root #visual-lib-overlay .visual-header h2::after { content: 'by Sary-OS'; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55); }
:root:root:root:root #asksary-studio .ast-brand { display: inline-flex !important; align-items: baseline; gap: 8px; }
:root:root:root:root #asksary-studio .ast-brand::before { content: 'StudioLab'; font: 700 20px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: #eaf7ff; }
:root:root:root:root #asksary-studio .ast-brand::after { content: 'by Sary-OS'; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55); }
:root:root:root:root #asksary-video-editor .ave-brand { display: inline-flex !important; align-items: baseline; gap: 8px; }
:root:root:root:root #asksary-video-editor .ave-brand::after { content: 'by Sary-OS'; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55); }
:root:root:root:root #code-lab-overlay .cl-title::after { content: 'by Sary-OS'; margin-left: 8px; font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .55); }
/* Sary-OS Code's project name is a title, like every other panel's (owner,
   2026-09-30: "too square and doesn't even fit anything with it"): the glass
   painted the name and its pencil as 48px button boxes, which cut the name
   off. Plain text in the house face; the pencil is a bare icon beside it. */
:root:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay .cl-title { min-width: 0 !important; width: auto !important; max-width: none !important; overflow: visible !important; }
:root:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay #cl-project-name#cl-project-name {
  width: auto !important; min-width: 0 !important; max-width: min(34vw, 420px) !important; height: auto !important; min-height: 0 !important;
  padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  /* 15px, not the 22px tool-title size (owner, 2026-10-01: "the project names are too big too, looks plucked on"). */
  font: 700 15px/1.2 ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .01em !important; color: rgba(234, 247, 255, .9) !important; -webkit-text-fill-color: currentColor !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: left !important;
}
:root:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay #cl-project-rename#cl-project-rename:not(.hidden) {
  display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; width: 24px !important; min-width: 0 !important; height: 24px !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: 12px !important; color: #eaf7ff !important; opacity: .55 !important;
}
:root:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay #cl-project-rename#cl-project-rename:not(.hidden):hover { opacity: 1 !important; }
/* The title's icon tile is for the mark before the name, not the pencil. */
:root:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay #cl-project-rename#cl-project-rename i { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; color: inherit !important; }
html.light-mode:root:root:root:root:root:root body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay#code-lab-overlay :is(#cl-project-name#cl-project-name, #cl-project-rename#cl-project-rename) { color: #0b0d12 !important; }
:root:root:root:root #liveloop-chat .live-chat-head b { font: 800 12px/1 ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .04em; color: #eaf7ff; }
/* Light mode: the prompt window's title and Send were white on white (owner, 2026-09-28). */
html.light-mode:root:root:root #liveloop-chat#liveloop-chat .live-chat-head b { color: #0b0d12 !important; }
html.light-mode:root:root:root #liveloop-chat#liveloop-chat .live-chat-send { color: #0b0d12 !important; border-color: rgba(11, 13, 18, .35) !important; }
html.light-mode:root:root:root #liveloop-chat#liveloop-chat .live-chat-send:not(:disabled):hover { background: #0b0d12 !important; color: #fff !important; }

/* The SaryOS menu (owner, 2026-09-27: wallpaper and panel choices live under
   the brand for now; the tiles are for tools). */
#portal-bar .portal-brand { position: relative; }
#portal-brand-menu {
  position: absolute; top: calc(100% + 6px); left: 8px; z-index: 100520; min-width: 200px; padding: 6px; display: grid; gap: 2px;
  border: 1px solid var(--portal-line); border-radius: 12px; background: #050505; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); cursor: default;
}
#portal-brand-menu[hidden] { display: none; }
#portal-brand-menu .pbm-head { padding: 6px 8px 4px; font: 800 9.5px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; color: rgba(173, 217, 255, .5); }
#portal-brand-menu .pbm-rule { height: 1px; margin: 4px 0; background: var(--portal-line); }
#portal-bar #portal-brand-menu button {
  appearance: none; display: flex !important; align-items: center; gap: 10px; width: 100%; height: auto !important; min-height: 0 !important; padding: 8px 10px !important; margin: 0;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
  color: rgba(234, 247, 255, .82) !important; font: 700 12px/1 ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .02em; text-align: left; cursor: pointer;
}
#portal-bar #portal-brand-menu button span { display: inline !important; }
#portal-bar #portal-brand-menu button i { width: 14px; text-align: center; font-size: 12px; opacity: .8; }
#portal-bar #portal-brand-menu button i.pbm-flag { font-style: normal; font-size: 14px; opacity: 1; line-height: 1; }
#portal-bar #portal-brand-menu button:hover { background: #141414 !important; }
#portal-bar #portal-brand-menu button[aria-checked="true"] { color: #63f5ff !important; border-color: var(--portal-line) !important; background: #0d0d0d !important; }

/* Tool overlays docked in the frame (portal.js TOOL_ROOTS): the panel
   geometry, under the nav and left of the column, glass or solid like every
   panel, and a close control at the frame's corner for tools without one. */
:root:root:root:root .portal-tool-docked {
  position: fixed !important; inset: auto !important; top: var(--dash-body-top) !important; left: var(--dash-left) !important; right: auto !important; bottom: auto !important;
  width: var(--dash-w) !important; height: var(--dash-body-h) !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
  border-radius: 27px !important; overflow: hidden !important; z-index: 19500 !important; transform: translate3d(0, 0, 0) !important; box-sizing: border-box !important;
  background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important;
}
:root:root:root:root body.portal-solid .portal-tool-docked { background: var(--ps-bg) !important; }
:root:root:root:root .portal-tool-docked > * { max-height: 100% !important; }
/* Their own full-screen shells fill the frame instead of the viewport. */
:root:root:root:root .portal-tool-docked > .it-shell, :root:root:root:root .portal-tool-docked > .mp-shell, :root:root:root:root .portal-tool-docked > .sp-shell,
:root:root:root:root .portal-tool-docked .music-studio-shell { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
#portal-tool-close {
  position: fixed; top: calc(var(--dash-top) + 10px); left: calc(var(--dash-left) + var(--dash-w) - 46px); z-index: 19600; width: 36px; height: 36px; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--portal-line); border-radius: 9px; background: #050505; color: #eaf7ff; font: 800 18px/1 ui-monospace, 'SF Mono', Menlo, monospace; cursor: pointer;
}
#portal-tool-close:hover { background: #141414; }
/* Shown only while a tool is docked; the themes' generic *-close rules must not surface it. */
:root:root:root:root #portal-tool-close { display: none !important; }
:root:root:root:root body.portal-tool-open #portal-tool-close { display: inline-flex !important; }
/* Prompt modals sit above the frame but under the nav and the column. */
:root:root:root:root #global-modal-overlay { z-index: 100450 !important; }
/* ImageLab pins its own inset with !important and scales itself by zoom; the doubled id outranks it and the zoom is lifted so the frame geometry holds. */
:root:root:root:root #flux-assisted-studio#flux-assisted-studio.portal-tool-docked { zoom: 1 !important; }
:root:root:root:root #flux-assisted-studio#flux-assisted-studio.portal-tool-docked, :root:root:root:root #suite-panel-overlay#suite-panel-overlay.portal-tool-docked, :root:root:root:root #notepad-tts-overlay#notepad-tts-overlay.portal-tool-docked {
  inset: auto !important; top: var(--dash-body-top) !important; left: var(--dash-left) !important; width: var(--dash-w) !important; height: var(--dash-body-h) !important; border-radius: 27px !important;
}
/* The Workspace Dock (open-workspaces bar) is retired in SaryOS (owner, 2026-09-28):
   the bar's live dots already show what is kept open. */
:root:root:root:root body.portal-ready #workspace-resume-dock { display: none !important; }

/* Video and Image Generation open as a centred popup over a dimmed page; docked,
   the popup fills the frame like every other tool and the dimmer goes. */
:root:root:root:root #img-flow-wrap.portal-tool-docked:not(.asksary-workspace-parked) { display: flex !important; align-items: stretch !important; justify-content: stretch !important; }
:root:root:root:root #img-flow-wrap.portal-tool-docked #img-flow-backdrop { display: none !important; }
:root:root:root:root #img-flow-wrap.portal-tool-docked #img-flow-box#img-flow-box {
  position: relative !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important;
  border-radius: 27px !important; box-shadow: none !important; overflow-y: auto !important; box-sizing: border-box !important;
}
:root:root:root:root #img-flow-wrap.portal-tool-docked #img-flow-box#img-flow-box.vc2-shell { overflow: hidden !important; }
:root:root:root:root #img-flow-wrap.portal-tool-docked #img-flow-box:not(.video-creator-shell) #img-flow-inner { max-width: 640px; margin: 0 auto; }
/* Podcast Studio: its card fills the frame instead of floating at viewport size. */
:root:root:root:root #podcast-overlay.portal-tool-docked:not(.asksary-workspace-parked) { display: flex !important; align-items: stretch !important; justify-content: stretch !important; }
:root:root:root:root #podcast-overlay.portal-tool-docked .podcast-card {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 27px !important; overflow-y: auto !important; box-sizing: border-box !important;
}

/* Filling the frame, the card kept its 920px card spacing: the player and
   the exit question sat as a tight stack at the top, and the glow (200% of
   the card) added half a frame of empty scroll. */
:root:root:root:root #podcast-overlay.portal-tool-docked .podcast-card { justify-content: safe center; gap: 34px; padding: 48px clamp(24px, 4vw, 64px) !important; }
:root:root:root:root #podcast-overlay.portal-tool-docked .podcast-card::before { top: 0; left: 0; width: 100%; height: 100%; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-audio-progress { max-width: 720px; }
:root:root:root:root #podcast-overlay.portal-tool-docked .podcast-controls { gap: 18px; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-builder-grid { gap: 26px; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-source-pane, :root:root:root:root #podcast-overlay.portal-tool-docked .pod-options-pane { padding: 24px; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-options-pane { gap: 20px; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-setup { height: 100%; display: flex; flex-direction: column; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-builder-grid { flex: 1; min-height: 0; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-source-pane, :root:root:root:root #podcast-overlay.portal-tool-docked .pod-source-view:not([hidden]) { display: flex; flex-direction: column; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-source-view:not([hidden]) { flex: 1; }
:root:root:root:root #podcast-overlay.portal-tool-docked .pod-source-text { flex: 1; min-height: 200px; }

/* Home is the one fixed block; the bin appears while anything is dragged;
   the galaxy takes a drop while the Home orbit is open. */
#portal-bar .portal-tab.is-fixed { cursor: pointer; }
#portal-bar .portal-tab.is-fixed .portal-tab-dot { box-shadow: 0 0 10px var(--accent); }
#portal-bin {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 100600; display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border: 1px solid var(--portal-line); border-radius: 12px; background: #050505; color: rgba(234, 247, 255, .82); font: 700 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease, border-color .15s ease, background .15s ease;
}
#portal-bin i { color: #ff3d81; }
#portal-bin.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#portal-bin.is-over { border-color: #ff3d81; background: rgba(255, 61, 129, .14); }
body.portal-ring-over #cosmos-mount { filter: brightness(1.35); }
/* The Home orbit's note (owner, 2026-10-01): tools can be dragged in. It
   steps aside while anything is dragged, so the bin has the spot. */
#portal-home-note {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 100500; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 32px)); padding: 12px 12px 12px 18px;
  border: 1px solid var(--portal-line); border-radius: 12px; background: rgba(5, 6, 14, .78); color: rgba(234, 247, 255, .82); font: 500 13px/1.45 inherit; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .6s ease;
}
#portal-home-note.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.portal-dragging #portal-home-note, body.cosmos-dragging #portal-home-note { opacity: 0; pointer-events: none; }
#portal-home-note > i { color: #63f5ff; font-size: 16px; flex: none; }
#portal-home-note b { color: #eaf7ff; font-weight: 700; }
#portal-home-note .phn-close { flex: none; width: 28px; height: 28px; border: 1px solid var(--portal-line); border-radius: 8px; background: transparent; color: inherit; font: 400 18px/1 inherit; cursor: pointer; }
#portal-home-note .phn-close:hover { border-color: #63f5ff; color: #eaf7ff; }
html.light-mode #portal-home-note { background: rgba(255, 255, 255, .95); color: #333; border-color: #111; }
html.light-mode #portal-home-note b { color: #111; }
@media (max-width: 700px) { #portal-home-note { bottom: calc(28px + var(--sa-bottom, 0px)); font-size: 12px; } }
body.cosmos-dragging { cursor: grabbing; }

/* The layer lights in the SaryOS menu: lit when the layer is on. */
#portal-bar #portal-brand-menu button[data-layer] { justify-content: flex-start; }
#portal-bar #portal-brand-menu .pbm-light { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #2a2a2a; box-shadow: none; transition: background .15s, box-shadow .15s; }
#portal-bar #portal-brand-menu button:is([data-layer], [data-watermark])[aria-checked="true"] .pbm-light { background: #63f5ff; box-shadow: 0 0 8px #63f5ff; }
#portal-bar #portal-brand-menu button[role="switch"][aria-checked="true"] { color: rgba(234, 247, 255, .95) !important; border-color: transparent !important; background: transparent !important; }

/* Appearance panel: the wallpaper grid and the mode switch. */
#portal-appearance .po-frame { width: min(980px, calc(100vw - var(--portal-side-w) - var(--dash-gap) * 2)); }
#portal-appearance .pa-body { overflow: auto; padding: 14px 16px 24px; }
#portal-appearance .pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#portal-appearance .pa-tile { appearance: none; position: relative; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid var(--portal-line); border-radius: 12px; background: #050505; color: #eaf7ff; cursor: pointer; }
#portal-appearance .pa-tile video, #portal-appearance .pa-tile .pa-swatch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: radial-gradient(circle at 30% 30%, #1b2230, #050505); }
#portal-appearance .pa-tile .pa-label { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); font: 700 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; }
#portal-appearance .pa-tile[aria-checked="true"] { border-color: #63f5ff; box-shadow: 0 0 0 1px #63f5ff; }
#portal-appearance .po-tabs button[aria-current="true"] { color: #63f5ff; border-color: #63f5ff; }

/* Light mode (owner, 2026-09-27): gloss white surfaces, black lines. */
html.light-mode { --portal-line: #111; }
html.light-mode body { background: #f6f7fb; }
html.light-mode #portal-bar { background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 246, 250, .96)); color: #111; box-shadow: 0 4px 24px rgba(0, 0, 0, .08), inset 0 1px 0 #fff; }
html.light-mode #portal-bar .portal-brand-mark { color: #111; }
html.light-mode #portal-bar .portal-tab .portal-tab-label, html.light-mode #portal-bar .portal-tab .portal-tab-icon { color: #111; }
html.light-mode #portal-bar .portal-tab .portal-tab-subs { color: rgba(0, 0, 0, .5); }
html.light-mode #portal-bar .portal-tab:hover { background: rgba(0, 0, 0, .04); }
html.light-mode #portal-bar .portal-btn, html.light-mode #portal-side .portal-square, html.light-mode #portal-tool-close, html.light-mode #portal-bin { background: linear-gradient(180deg, #fff, #eef0f5); color: #111; border-color: #111; }
html.light-mode #portal-side { background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 246, 250, .96)); }
html.light-mode #portal-bar #portal-brand-menu { background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); }
html.light-mode #portal-bar #portal-brand-menu button { color: #111 !important; }
html.light-mode #portal-bar #portal-brand-menu button:hover { background: #f0f2f7 !important; }
html.light-mode #portal-bar #portal-brand-menu button[aria-checked="true"] { background: #f0f2f7 !important; color: #111 !important; }
html.light-mode #portal-bar #portal-brand-menu .pbm-head { color: rgba(0, 0, 0, .5); }
html.light-mode #portal-dashboard { background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(244, 246, 250, .78)); }
html.light-mode .portal-overlay.is-open .po-frame { background: #fff; color: #111; }
html.light-mode .portal-overlay .po-tabs button, html.light-mode .portal-overlay .po-close, html.light-mode #portal-appearance .pa-tile { background: linear-gradient(180deg, #fff, #eef0f5); color: #111; }
html.light-mode .portal-overlay .po-title { color: rgba(0, 0, 0, .55); }
html.light-mode #portal-routing { background: rgba(255, 255, 255, .92); color: #111; border-color: #111; }
html.light-mode #portal-bar #portal-brand-menu .pbm-light { background: #cfd3db; }

/* Static motion (owner, 2026-09-27: "no animated effects, no navigation
   route; each panel dissolves into view"). */
body.portal-static .portal-dissolve-in { animation: portalDissolveIn 1.15s cubic-bezier(.2, .7, .2, 1) both !important; }
body.portal-static #portal-dashboard { transform: none !important; transition: opacity 1.1s ease !important; }
body.portal-static #portal-routing { display: none !important; }

/* Welcome pills on LiveLoop (owner, 2026-09-27): the sign-in panel's parts
   as modular pills in the toolbar's tile style, top left of the canvas.
   They appear slowly out of the field and dissolve back into it. */
#portal-welcome { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 18px; box-sizing: border-box; }
#portal-welcome[hidden] { display: none; }
/* The welcome line, bigger, top left; the pills, every step, centred on the canvas (owner, 2026-09-27). */
#portal-welcome .pw-title { position: absolute; top: 22px; left: 24px; font: 700 clamp(22px, 2.6vw, 34px)/1.05 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .86); opacity: 0; filter: blur(8px); transition: opacity 1.3s ease, filter 1.3s ease; }
#portal-welcome .pw-title.is-in { opacity: 1; filter: blur(0); }
/* The old-site line under the title (portal-welcome.js, ?from=asksary). */
#portal-welcome .pw-note { position: absolute; top: calc(22px + clamp(22px, 2.6vw, 34px) + 14px); left: 24px; max-width: min(560px, calc(100% - 48px)); font: 500 14px/1.5 Inter, system-ui, sans-serif; color: rgba(234, 247, 255, .72); opacity: 0; filter: blur(6px); transition: opacity 1.3s ease .25s, filter 1.3s ease .25s; }
#portal-welcome .pw-note b { color: rgba(234, 247, 255, .95); font-weight: 700; }
#portal-welcome .pw-note.is-in { opacity: 1; filter: blur(0); }
html.light-mode body.portal-solid #portal-welcome .pw-note { color: rgba(0, 0, 0, .62); }
html.light-mode body.portal-solid #portal-welcome .pw-note b { color: rgba(0, 0, 0, .86); }
@media (max-width: 700px) { #portal-welcome .pw-note { top: calc(14px + clamp(22px, 2.6vw, 34px) + 10px); left: 14px; font-size: 13px; } }
#portal-welcome .pw-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; max-width: min(820px, 100%); }
#portal-welcome .pw-pill {
  pointer-events: auto; appearance: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-width: 150px; box-sizing: border-box;
  padding: 13px 18px 14px; background: rgba(6, 8, 18, .05); border: 1px solid var(--portal-line); border-radius: 12px; color: #eaf7ff; font: inherit; text-align: left; cursor: pointer;
  opacity: 0; filter: blur(10px); transform: translateY(10px) scale(.985);
  transition: opacity 1.3s ease, filter 1.3s ease, transform 1.3s ease, background .15s;
}
#portal-welcome .pw-pill.is-in { opacity: 1; filter: blur(0); transform: none; }
#portal-welcome .pw-pill.is-out { opacity: 0; filter: blur(12px); transform: translateY(6px) scale(.985); transition-duration: 1s; pointer-events: none; }
#portal-welcome .pw-pill:hover { background: rgba(234, 247, 255, .04); }
#portal-welcome .pw-label { font-weight: 700; font-size: 15px; line-height: 1.15; }
#portal-welcome .pw-label:has(.pw-logo) { display: inline-flex; align-items: center; gap: 10px; }
#portal-welcome img.pw-logo { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
#portal-welcome i.pw-logo { font-size: 21px; width: 20px; text-align: center; line-height: 1; }
#portal-welcome .pw-subs { font: 600 10px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; color: rgba(234, 247, 255, .5); }
#portal-welcome .pw-field { cursor: text; min-width: 250px; }
#portal-welcome .pw-field .pw-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 247, 255, .6); }
#portal-welcome .pw-field input { width: 100%; background: transparent; border: 0; outline: 0; color: #eaf7ff; font: inherit; font-size: 15px; padding: 0; }
#portal-welcome .pw-field input::placeholder { color: rgba(234, 247, 255, .3); }
#portal-welcome .pw-check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
#portal-welcome .pw-check input { width: 16px; height: 16px; margin: 0; accent-color: #63f5ff; }
#portal-welcome .pw-check .pw-label { font-size: 13px; font-weight: 600; }
#portal-welcome .pw-check a { color: #63f5ff; text-decoration: none; }
#portal-welcome .pw-info { cursor: default; max-width: 420px; }
#portal-welcome .pw-info:hover { background: rgba(6, 8, 18, .05); }
#portal-welcome .pw-info .pw-label { font-size: 12.5px; font-weight: 500; line-height: 1.45; opacity: .8; }
#portal-welcome .pw-primary { background: #eaf7ff; color: #050505; border-color: #eaf7ff; }
#portal-welcome .pw-primary:hover { background: #fff; }
#portal-welcome .pw-primary .pw-subs { color: rgba(5, 5, 5, .55); }
#portal-welcome .pw-pill[disabled] { opacity: .5; cursor: progress; }
#portal-welcome .pw-status { pointer-events: auto; display: none; text-align: center; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 120, 120, .35); background: rgba(255, 80, 80, .08); color: #ffb4b4; font-size: 13px; max-width: 520px; }
#portal-welcome .pw-status.is-on { display: block; }
#portal-welcome .pw-ask { appearance: none; margin-top: 8px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: 600 13px/1.2 inherit; cursor: pointer; }
#portal-welcome .pw-status.success { border-color: rgba(45, 212, 191, .35); background: rgba(45, 212, 191, .08); color: #a5e2c3; }
body.portal-solid #portal-welcome .pw-pill { background: var(--ps-bg); }
body.portal-solid #portal-welcome .pw-primary { background: #eaf7ff; }
html.light-mode #portal-welcome .pw-pill { background: linear-gradient(180deg, #fff, #eef0f5); color: #111; border-color: #111; }
html.light-mode #portal-welcome .pw-primary { background: #111; color: #fff; border-color: #111; }
html.light-mode body.portal-solid #portal-welcome .pw-title, html.light-mode #portal-welcome .pw-subs, html.light-mode #portal-welcome .pw-field .pw-label { color: rgba(0, 0, 0, .6); }
html.light-mode #portal-welcome .pw-field input { color: #111; }
#portal-welcome-engine { position: fixed; left: -9999px; top: 0; width: 900px; height: 900px; opacity: 0; pointer-events: none; border: 0; }
@media (max-width: 700px) { #portal-welcome { padding: 12px; } #portal-welcome .pw-title { top: 14px; left: 14px; } #portal-welcome .pw-pill { min-width: 0; flex: 1 1 140px; } }

/* The preview tile that follows the pointer while a ring node is dragged. */
#portal-drag-ghost { position: fixed; left: 0; top: 0; z-index: 100600; pointer-events: none; display: none; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 16px 13px; border: 1px solid var(--portal-line); border-radius: 12px; background: rgba(6, 8, 18, .82); color: #eaf7ff; font: inherit; opacity: .92; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
#portal-drag-ghost.is-visible { display: flex; }
#portal-drag-ghost .portal-tab-icon { color: var(--accent); }
#portal-drag-ghost .portal-tab-label { font-weight: 700; font-size: 14px; white-space: nowrap; }
html.light-mode #portal-drag-ghost { background: rgba(255, 255, 255, .95); color: #111; border-color: #111; }
/* The themes' button rules force a .16 s transition; the pills' slow rise and dissolve win. */
:root:root:root:root #portal-welcome .pw-pill { transition: opacity 1.8s ease, filter 1.8s ease, transform 1.8s ease, background .15s !important; }
:root:root:root:root #portal-welcome .pw-pill.is-out { transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease !important; }
:root:root:root:root #portal-welcome .pw-title { transition: opacity 1.8s ease, filter 1.8s ease !important; }

/* The arrival veil: the account comes in inside SaryOS. */
#portal-arrival { position: fixed; inset: 0; z-index: 100700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(2, 3, 8, .55); backdrop-filter: none; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
#portal-arrival[hidden] { display: none; }
#portal-arrival.is-in { opacity: 1; pointer-events: auto; }
#portal-arrival .pa-mark { font: 700 clamp(28px, 4vw, 52px)/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; color: #eaf7ff; text-transform: uppercase; opacity: 0; filter: blur(10px); transform: translateY(8px); transition: opacity 1.6s ease .2s, filter 1.6s ease .2s, transform 1.6s ease .2s; }
#portal-arrival.is-in .pa-mark { opacity: 1; filter: blur(0); transform: none; }
#portal-arrival .pa-line { display: flex; align-items: center; gap: 10px; font: 600 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(234, 247, 255, .72); opacity: 0; transition: opacity 1.4s ease .6s; }
#portal-arrival.is-in .pa-line { opacity: 1; }
#portal-arrival .pa-dot { width: 6px; height: 6px; border-radius: 50%; background: #63f5ff; box-shadow: 0 0 10px rgba(99, 245, 255, .6); animation: navPulse 1.6s ease-in-out infinite; }
html.light-mode #portal-arrival { background: rgba(246, 248, 252, .7); }
html.light-mode #portal-arrival .pa-mark, html.light-mode #portal-arrival .pa-line { color: #111; }

/* Solid freezes every animation (owner, 2026-09-27); Glass runs them again.
   Pausing alone froze one-shot entrances on their first frame, so fade-in
   overlays (Video/Image Generation, Podcast) opened at opacity 0. The negative
   delay puts every animation past its end: entrances land finished, loops hold still. */
:root:root:root:root body.portal-solid *, :root:root:root:root body.portal-solid *::before, :root:root:root:root body.portal-solid *::after { animation-play-state: paused !important; animation-delay: -600s !important; }
:root:root:root:root body.portal-solid #portal-arrival .pa-dot { animation-play-state: running !important; }

/* Web Architect opens as the global modal at 100vw x 100dvh, which put it
   under the nav and the right-hand column (owner, 2026-09-28: "fix this panel
   ratio"). Docked into the same frame as every other tool instead. */
:root:root:root:root body.portal-ready #global-modal-overlay[data-variant="web-architect"] {
  inset: auto !important; top: var(--dash-top) !important; left: var(--dash-left) !important;
  width: var(--dash-w) !important; height: var(--dash-h) !important; padding: 0 !important;
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root:root body.portal-ready #global-modal-overlay[data-variant="web-architect"] .custom-modal {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  border-radius: 27px !important; border: 1px solid var(--portal-line) !important;
}

/* Solid comes in two (owner, 2026-09-28: "split solid into light mode and
   dark mode; glass is almost light mode as it's white -- make it solid, not
   transparent"). Both are opaque; the variables carry the colours. */
body.portal-solid { --ps-bg: rgb(6, 8, 18); --ps-deep: rgb(1, 2, 10); --ps-side: rgb(4, 6, 14); --ps-stage: #000; }
html.light-mode body.portal-solid { --ps-bg: #ffffff; --ps-deep: #eef0f5; --ps-side: #f4f5f8; --ps-stage: #f7f8fb; }
html.light-mode body.portal-solid #portal-bar, html.light-mode body.portal-solid #portal-side { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.light-mode body.portal-solid #portal-dashboard-scrim { background: rgba(238, 240, 245, .7); }
:root:root:root:root #liveloop-preview-frame, :root:root:root:root #code-preview-frame { color-scheme: dark !important; }
/* Talk gets room (owner, 2026-09-28: "spacing out here a bit between Talk"):
   wider inside, a clear gap from the project switcher and from Sign in. */
#portal-bar .portal-narrate-btn { padding: 0 17px; gap: 10px; margin-right: 14px; }

/* The Code Lab / Canvas name reads in light mode too (it was fixed light ink). */
html.light-mode body.portal-docked #code-canvas-container #canvas-title-label::before { color: #0b0d12 !important; }
html.light-mode body.portal-docked #code-canvas-container #canvas-title-label::after { color: rgba(11, 13, 18, .55) !important; }
/* Gallery in light mode: its dark-theme white text read white on white
   (owner, 2026-09-28: "fix white on white text"). */
html.light-mode #visual-lib-overlay .visual-header h2::before { color: #0b0d12 !important; }
html.light-mode #visual-lib-overlay .visual-header h2::after { color: rgba(11, 13, 18, .55) !important; }
html.light-mode #visual-lib-overlay .v-tab-count, html.light-mode #visual-lib-overlay .folder-count { color: #3f4553 !important; background: #e9ecf2 !important; }
html.light-mode #visual-lib-overlay .gallery-folder-row, html.light-mode #visual-lib-overlay .gallery-folder-row span, html.light-mode #visual-lib-overlay .gallery-folder-row i { color: #0b0d12 !important; }
html.light-mode #visual-lib-overlay .gallery-folder-empty { color: rgba(11, 13, 18, .58) !important; }
html.light-mode #visual-lib-overlay :is(.gallery-folders-head, .gallery-folder-head, .gallery-folders-title) span, html.light-mode #visual-lib-overlay .gallery-sidebar [class*="folder"] > span:first-child { color: #6d28d9 !important; }
/* The Gallery has its own close; the frame's second one is not needed. */
body[data-portal-panel="gallery"] #portal-tool-close { display: none !important; }
html.light-mode:root:root:root #visual-lib-overlay#visual-lib-overlay .v-tab-count, html.light-mode:root:root:root #visual-lib-overlay#visual-lib-overlay .folder-count { color: #3f4553 !important; background: #e9ecf2 !important; }
html.light-mode:root:root:root #visual-lib-overlay#visual-lib-overlay .gallery-folder-empty { color: rgba(11, 13, 18, .58) !important; }
:root:root:root:root body.portal-tool-open[data-portal-panel="gallery"] #portal-tool-close { display: none !important; }
/* ImageLab carries its own close (which parks the work); the frame's would sit on top of it. */
:root:root:root:root body.portal-tool-open:has(#flux-assisted-studio.portal-tool-docked) #portal-tool-close { display: none !important; }

/* Tools hidden by the portal keep their DOM and state (portal.js parkEl). */
:root:root:root:root:root .portal-parked, :root:root:root:root:root .portal-parked.portal-tool-docked { display: none !important; }
/* A panel under a tool on screen is hidden, never closed (portal.js syncPanelsUnder). */
:root:root:root:root:root .portal-panel-under { visibility: hidden !important; pointer-events: none !important; }
/* A tool waiting under the Drive it opened (portal.js openTool). */
:root:root:root:root:root .portal-tool-under { visibility: hidden !important; pointer-events: none !important; }

/* Light mode: tool titles and their "by Sary-OS" tags in dark ink (owner, 2026-09-28). */
html.light-mode:root:root:root #asksary-studio#asksary-studio .ast-brand::before, html.light-mode:root:root:root #asksary-video-editor#asksary-video-editor .ave-brand { color: #0b0d12 !important; }
html.light-mode:root:root:root #asksary-studio#asksary-studio .ast-brand::after, html.light-mode:root:root:root #asksary-video-editor#asksary-video-editor .ave-brand::after, html.light-mode:root:root:root #code-lab-overlay#code-lab-overlay .cl-title::after { color: rgba(11, 13, 18, .55) !important; }

/* Project Lab's start page fits the frame on short windows (owner, 2026-09-28:
   "make it fit on one page, can't see the bottom"). */
@media (max-height: 820px) {
  :root:root:root:root #code-lab-overlay #cl-welcome { padding: 14px 20px !important; gap: 8px !important; overflow-y: auto; }
  :root:root:root:root #code-lab-overlay #cl-welcome > i { display: none !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome > h3 { margin: 0 !important; font-size: 18px !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome > p { margin: 0 !important; font-size: 13px !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-mode-card { padding: 12px 14px !important; gap: 6px !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-mode-card > i { font-size: 18px !important; margin: 0 !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-mode-card small { line-height: 1.35 !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-welcome-actions { gap: 6px !important; margin: 2px 0 !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-saved-projects { padding: 10px 14px !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-saved-project-list { max-height: 96px; overflow-y: auto; }
}
/* Code Lab's shell is a flex child with min-height:auto, so its content made it
   taller than the frame and the bottom hung off-screen; it now fits the frame. */
:root:root:root:root #code-lab-overlay > .cl-shell { min-height: 0 !important; max-height: 100% !important; }
:root:root:root:root #code-lab-overlay .cl-shell > .cl-body, :root:root:root:root #code-lab-overlay .cl-main { min-height: 0 !important; }
@media (max-height: 700px) {
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-mode-card > i, :root:root:root:root #code-lab-overlay #cl-welcome #cl-welcome-note { display: none !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-welcome-actions { flex-wrap: nowrap !important; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-welcome-actions .cl-btn { padding: 6px 10px !important; font-size: 12px !important; min-height: 32px !important; white-space: nowrap; }
  :root:root:root:root #code-lab-overlay #cl-welcome .cl-saved-project-list { max-height: 48px; }
}

/* Canvas in light mode (owner, 2026-09-28: "text is white on white"): the panel
   takes the light glass like every other panel, its title reads in dark ink,
   and its toolbar buttons are light with dark icons (they were black on black). */
html.light-mode:root:root:root body:not(.portal-solid) #code-canvas-container#code-canvas-container { background: rgba(255, 255, 255, .68) !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container #canvas-title-label { color: #0b0d12 !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container #canvas-title-label::before { color: #0b0d12 !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container #canvas-title-label::after { color: rgba(11, 13, 18, .55) !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container .canvas-tool-btn { background: #ffffff !important; color: #111318 !important; border-color: rgba(11, 13, 18, .18) !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container .canvas-tool-btn i { color: #111318 !important; }
html.light-mode:root:root:root #code-canvas-container#code-canvas-container .canvas-tool-btn:hover { background: #eef0f4 !important; }

/* DocLab (public/tools/doclab.js) carries its own close, which hides the work
   and keeps it; the frame's would sit on top of it. */
:root:root:root:root body.portal-tool-open:has(#doclab-overlay.portal-tool-docked) #portal-tool-close { display: none !important; }
:root:root:root:root #doclab-overlay.portal-tool-docked { background: transparent !important; }

/* The mobile Command Center is removed (owner, 2026-09-28: "the mobile command
   center, remove it, don't need it"). Its hidden grid still holds the tool
   buttons launchTool presses, so the element stays in the page but never shows,
   whatever opens it (openCommandCenter, _openMobileCmdCenter, a tool's return). */
:root:root:root:root:root body.portal-ready #cmd-overlay, :root:root:root:root:root body.portal-ready #cmd-overlay.active { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* Gallery is now Sary-OS Drive (owner, 2026-09-28); the name already says Sary-OS, so no "by Sary-OS" tag. */
:root:root:root:root #visual-lib-overlay .visual-header h2::after { content: none !important; display: none !important; }

/* One close per tool (owner, 2026-09-28): the frame's close hides whenever the
   docked tool shows its own (portal.js syncToolDocking, portal-tool-own-close). */
:root:root:root:root body.portal-tool-own-close #portal-tool-close { display: none !important; }


/* ==== Portal shell: tablets, phones and the iPhone app (browser test
   2026-09-28: P1, P2, P7, M4, M5, M6, T3, 2.3). Owned by portal.js's shell;
   the tools' own layouts live in their own files. ==== */
/* Safe areas (the app loads with viewport-fit=cover): every inset is 0 in a
   normal browser, so none of this moves anything there. The bar's content
   height is --portal-bar-core; --portal-bar-h adds the status bar / Dynamic
   Island above it. Heights use the dynamic viewport, so the frame never runs
   under a phone's browser chrome. */
:root {
  --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px);
  --portal-vh: 100vh;
  --portal-bar-core: 92px;
  --portal-bar-h: calc(var(--portal-bar-core) + var(--sa-top));
  --dash-left: calc(var(--dash-gap) + var(--sa-left));
  --dash-w: calc(100vw - var(--portal-side-w) - var(--dash-gap) * 2 - var(--sa-left) - var(--sa-right));
  --dash-h: calc(var(--portal-vh) - var(--portal-bar-h) - var(--dash-gap) * 2 - var(--sa-bottom));
}
@supports (height: 100dvh) { :root { --portal-vh: 100dvh; } }
#portal-bar { padding: var(--sa-top) var(--sa-right) 0 var(--sa-left); }
#portal-side { width: calc(var(--portal-side-w) + var(--sa-right)); padding: 10px var(--sa-right) calc(10px + var(--sa-bottom)) 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #63f5ff 30%, transparent) transparent; }
#portal-side::-webkit-scrollbar { display: block; width: 3px; }
#portal-side::-webkit-scrollbar-thumb { background: color-mix(in srgb, #63f5ff 30%, transparent); border-radius: 3px; }
.portal-overlay .po-frame { height: calc(var(--portal-vh) - var(--portal-bar-h) - var(--dash-gap) * 2 - var(--sa-bottom)); }
#portal-routing { bottom: calc(140px + var(--sa-bottom)); }
#portal-bin { bottom: calc(28px + var(--sa-bottom)); }
#portal-welcome { padding-left: max(18px, var(--sa-left)); padding-right: max(18px, var(--sa-right)); padding-bottom: max(18px, var(--sa-bottom)); }
#portal-arrival { padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); }
#portal-brand-menu { max-height: calc(var(--portal-vh) - var(--portal-bar-h) - 16px); overflow-y: auto; }

/* The tile strip: when it cannot fit it scrolls sideways with a thin
   scrollbar, and fades at the end that has more (portal.js syncFade). */
#portal-bar .portal-tabs { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #63f5ff 35%, transparent) transparent; }
#portal-bar .portal-tabs::-webkit-scrollbar { display: block; height: 3px; }
#portal-bar .portal-tabs::-webkit-scrollbar-thumb { background: color-mix(in srgb, #63f5ff 35%, transparent); border-radius: 3px; }
#portal-bar .portal-tabs.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
#portal-bar .portal-tabs.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
#portal-bar .portal-tabs.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* The square that is open is lit like the current tile: accent ring, tint,
   accent icon and the accent underline (portal.js render marks it). */
#portal-side .portal-square[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent); }
html.light-mode #portal-side .portal-square[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, #fff); color: #111; box-shadow: inset 0 -2px 0 var(--accent); }
html.light-mode #portal-side .portal-square[aria-current="true"] i:not(.portal-tab-dot) { color: color-mix(in srgb, var(--accent) 70%, #000); }

/* The phone Tools button (portal.js): hidden until the column folds away. */
#portal-bar .portal-tools-btn { display: none; order: 1; align-self: center; margin: 0 4px 0 8px; }
#portal-bar .portal-tools-btn.is-lit, #portal-bar .portal-tools-btn[aria-expanded="true"] { border-color: #63f5ff; color: #63f5ff; }
html.light-mode #portal-bar .portal-tools-btn.is-lit, html.light-mode #portal-bar .portal-tools-btn[aria-expanded="true"] { border-color: #0891b2; color: #0891b2; }

/* Tablets and phones: the bar is two rows, the brand and the right-hand
   controls above, every tile below at full width, so no tile hides behind
   the controls (T3, M6, P1). */
@media (max-width: 1100px) {
  :root { --portal-bar-core: 96px; }
  #portal-bar { flex-wrap: wrap; align-content: flex-start; }
  #portal-bar > .portal-brand, #portal-bar > .portal-right { height: 48px; }
  /* 48px: the app's touch rule gives every button a 48px minimum. */
  #portal-bar .portal-tabs { order: 20; flex: 1 0 100%; width: 100%; height: 48px; overflow-y: hidden; border-top: 1px solid var(--portal-line); box-sizing: border-box; }
  #portal-bar .portal-tabs > .portal-tab { height: 100%; }
  #portal-bar .portal-tab { flex: 1 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 0 clamp(8px, 1.2vw, 14px); }
  #portal-bar .portal-tab .portal-tab-icon, #portal-bar .portal-tab .portal-tab-subs { display: none; }
  #portal-bar .portal-tab .portal-tab-dot { width: 6px; height: 6px; }
  #portal-bar .portal-tab .portal-dot { top: 6px; right: 6px; }
}
/* 900px and below the frame fills the space under the bar exactly: no gap,
   so it never runs 12px past the bottom (M4, P7). */
@media (max-width: 900px) {
  :root { --dash-gap: 0px; --dash-w: calc(100vw - var(--portal-side-w) - var(--sa-left) - var(--sa-right)); }
  :root:root:root:root .portal-tool-docked { border-radius: 0 !important; }
  .portal-overlay .po-frame { width: calc(100vw - var(--portal-side-w) - var(--sa-left) - var(--sa-right)); height: calc(var(--portal-vh) - var(--portal-bar-h) - var(--sa-bottom)); }
  :root:root #portal-side .portal-square { width: 34px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; font-size: 13px; }
}
/* Phones: the column folds into a sheet under the bar, opened by Tools, so
   the frame (and its close) has the full width (P2, P7). The brand and the
   right-hand controls tighten so Talk, the project and Sign in stay in reach. */
@media (max-width: 700px) {
  :root { --portal-side-w: 0px; }
  #portal-bar .portal-tools-btn { display: inline-flex; }
  #portal-bar .portal-brand { padding: 0 8px 0 10px; }
  #portal-bar .portal-brand-mark { font-size: 14px; letter-spacing: .04em; }
  #portal-bar .portal-guide-btn, #portal-bar .portal-narrate-btn { padding: 0 10px; margin-right: 0; }
  #portal-bar .portal-guide-btn + .portal-narrate-btn, #portal-bar .portal-narrate-btn + .portal-surface-btn { margin-left: 6px; }
  #portal-bar .portal-right { padding: 0 8px; }
  #portal-side {
    display: none; top: var(--portal-bar-h); left: 0; right: 0; bottom: auto; width: auto;
    max-height: calc(var(--portal-vh) - var(--portal-bar-h) - var(--sa-bottom)); overflow-y: auto;
    padding: 12px calc(12px + var(--sa-right)) 14px calc(12px + var(--sa-left));
    border-left: 0; border-bottom: 1px solid var(--portal-line); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
  body.portal-side-open #portal-side { display: block; }
  #portal-side .portal-dock { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; min-height: 0; }
  :root:root #portal-side .portal-square { width: 100% !important; height: 62px !important; min-width: 0 !important; flex-direction: column; gap: 6px; font-size: 17px; cursor: pointer; }
  #portal-side .portal-square::after { content: attr(title); max-width: 100%; padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; }
}

/* The Dashboard is one thing on screen, like a tool (owner, 2026-09-28: "chat
   and dashboard page interfere with each other"). While it is open, whatever
   panel or tool sits in the frame under it is hidden, never closed, and comes
   back as it was when the Dashboard closes (portal-dashboard.js toggles
   body.sd-open). */
:root:root:root:root:root body.sd-open .main-container > .chat-container,
:root:root:root:root:root body.sd-open #liveloop-container,
:root:root:root:root:root body.sd-open #code-canvas-container,
:root:root:root:root:root body.sd-open #code-lab-overlay,
:root:root:root:root:root body.sd-open #asksary-studio,
:root:root:root:root:root body.sd-open #visual-lib-overlay,
:root:root:root:root:root body.sd-open .portal-tool-docked,
:root:root:root:root:root body.sd-open #portal-tool-close { visibility: hidden !important; pointer-events: none !important; }

/* The Tools panel is hidden for now (owner, 2026-09-29: "tools panel doesn't need
   to show at all"). Its tool cards stay in the DOM, so launchTool still reaches them. */
:root:root:root:root:root #suite-panel-overlay { display: none !important; }
/* Notepad TTS and Voiceover fill the frame like every other tool (owner,
   2026-09-29: "these need to be full screen within the panels"); their card
   was a centred column. */
:root:root:root:root body:is(*, #lg-boost) #notepad-tts-overlay.portal-tool-docked { display: flex !important; align-items: stretch !important; justify-content: stretch !important; }
:root:root:root:root body:is(*, #lg-boost) #notepad-tts-overlay.portal-tool-docked #notepad-tts-card {
  width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; flex: 1 1 auto !important;
  border-radius: 0 !important; border: 0 !important; box-sizing: border-box !important; overflow-y: auto !important;
}
/* No full screen in the Portal (owner, 2026-09-29): the docked canvas already
   fills the frame, and full screen stretched its header past it. */
:root:root:root:root body.portal-ready #canvas-fullscreen-btn { display: none !important; }
/* No Chat + Live / Code + Live in the header (owner, 2026-09-29): the Canvas
   and Code Lab tiles are the switch. The Portal still presses it itself. */
:root:root:root:root body.portal-ready #coding-lab-split-btn { display: none !important; }
/* Canvas's header carries no toolbar; Code Lab keeps its own (owner,
   2026-09-30: "back there. Did I say remove from Code Lab? I said remove from
   Canvas"). On Canvas (the container with the split off) Reset, Project,
   Download and the rest are hidden, not removed, and still answer to their
   shortcuts and to the Portal. The title and Close stay. Code Lab's search,
   Run, Reset, Project and Download are on show again. */
:root:root:root:root body.portal-ready #code-canvas-container:not(.coding-lab-split) .canvas-header #coding-lab-search,
:root:root:root:root body.portal-ready #code-canvas-container:not(.coding-lab-split) .canvas-header .canvas-header-actions > :not(#close-canvas-btn):not(#canvas-back-to-codelab-btn) { display: none !important; }
/* Canvas is Code Lab's page at full frame, so it carries the way back to the
   code (owner, 2026-09-30: "needs a way to go from canvas back to Code Lab"). */
:root:root:root:root body.portal-ready #code-canvas-container:not(.coding-lab-split) .canvas-header #canvas-back-to-codelab-btn { display: inline-flex !important; }
/* And Code Lab carries the way there (owner, 2026-09-30: "there's no full
   screen mode on Code Lab"): Full screen opens Canvas, the page on its own. */
:root:root:root:root body.portal-ready #code-canvas-container.coding-lab-split .canvas-header #codelab-fullscreen-btn { display: inline-flex !important; }
:root:root:root:root body.portal-ready #code-canvas-container:not(.coding-lab-split) .canvas-header .canvas-header-actions { margin-left: auto; }
/* LiveLoop has no Create button (owner, 2026-09-30: "I said remove. Don't
   add stuff"). Hidden, not deleted; it opens nothing. */
:root:root:root:root #liveloop-create-btn { display: none !important; }
/* Chat's own Close: only while Chat is the panel in the frame. */
#portal-chat-close { display: none !important; }
:root:root:root:root body.portal-ready[data-portal-panel="chat"] #portal-chat-close { display: inline-flex !important; align-items: center; justify-content: center; }
/* Vault is in front of any other docked tool (owner, 2026-09-29: "shows under
   some panels"), under the frame's rim and sheen. */
:root:root:root:root body:is(*, #lg-boost) #ind-tool-vault-overlay.portal-tool-docked:not(.portal-parked) { z-index: 19560 !important; }
/* Talk's bar: solid, in front, movable (owner, 2026-09-29). */
:root:root:root:root #portal-narration .pn-dock {
  grid-template-columns: 1fr auto; row-gap: 8px; padding: 10px 12px 12px; border-radius: 22px;
  background: #070b18; border: 1px solid rgba(160, 205, 255, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 40px rgba(99, 245, 255, .12);
}
:root:root:root:root #portal-narration .pn-dock .pn-status {
  position: static; transform: none; grid-column: 1 / -1; max-width: none; padding: 2px 6px 0; text-align: center;
  color: rgba(234, 247, 255, .8); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; pointer-events: auto;
}
:root:root:root:root #portal-narration .pn-dock .pn-status:active { cursor: grabbing; }
:root:root:root:root #portal-narration .pn-input { background: #0d1428 !important; color: #eaf7ff !important; -webkit-text-fill-color: #eaf7ff !important; border-color: rgba(160, 205, 255, .3) !important; box-shadow: none !important; }
:root:root:root:root #portal-narration .pn-ask {
  background: linear-gradient(100deg, #0a84ff, #5e5ce6) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important;
  font-weight: 800; padding: 11px 18px; box-shadow: 0 6px 20px rgba(10, 132, 255, .4) !important;
}
:root:root:root:root.light-mode #portal-narration .pn-dock { background: #ffffff; border-color: rgba(20, 10, 60, .2); box-shadow: 0 24px 60px rgba(40, 20, 90, .25); }
:root:root:root:root.light-mode #portal-narration .pn-dock .pn-status { color: #14131b; }
:root:root:root:root.light-mode #portal-narration .pn-input { background: #f4f3fa !important; color: #14131b !important; -webkit-text-fill-color: #14131b !important; }
/* In front of the Drive (owner, 2026-09-29: "when Drive is opened and video is
   played it opens behind the gallery and can't even stop it"): a file's
   preview, and the questions LiveLoop asks about a picked file. The Drive sits
   at 19500 docked and at 100300 while picking; both of these were under it. */
:root:root:root:root body.portal-ready #lib-preview-overlay { z-index: 100650 !important; top: var(--portal-bar-h) !important; height: calc(100% - var(--portal-bar-h)) !important; }
/* The question is in front of everything that can be open when it is asked
   (owner, 2026-10-01: "it can't be seen when I attach as it's hidden behind
   the screen"): the Assets panel sits at 2147483000 and LiveLoop's fullscreen
   stage up to 2147483200. Only toasts and the phone gate are above it. */
:root:root:root:root body.portal-ready .ask-text-overlay { z-index: 2147483600 !important; }
/* Everything that asks, warns or confirms is in front of the tools (owner,
   2026-09-29: "check every panel as somehow it's behind every tool"). A docked
   tool sits at 19500; these dialogs were written for the old full-page chat
   and sit at 10,000 or so, so over a tool they opened unseen: confirmations,
   the limit and upgrade notices, settings, the prompt library, the command
   palette, the wallpaper picker, and every toast. One of them docked as a tool
   keeps the tool's layer. */
:root:root:root:root body.portal-ready :is(#custom-confirm-overlay, #limit-reached-overlay, #premium-offer-overlay, #premium-credentials-overlay, #theme-confirm-overlay,
  #settings-overlay, #profile-settings-overlay, #folder-manager-overlay, #prompt-library-overlay, #cmd-overlay, #wallpaper-modal-overlay, #notes-overlay,
  #tracker-overlay, #token-tracker-overlay, #org-modal-overlay, #speech-onboarding-overlay, #ob-overlay, #tw-overlay, #ntts-translate-popup,
  .sp-fav-picker, .theme-mood-overlay, #liveloop-gallery-progress):not(.portal-tool-docked) { z-index: 100680 !important; }
:root:root:root:root body.portal-ready #toast-container { z-index: 100900 !important; }

/* Single file / Project (owner, 2026-09-29: "when clicked on doesn't distinguish
   between the two, make one purple"). The chosen one is purple in every theme
   and glass; the other is plain. Weighted above the themes' forced button rules. */
:root:root:root:root body:is(*, #lg-boost) #liveloop-container .liveloop-mode button:is(*, #lg-boost) { background: transparent !important; color: #9a9aa8 !important; box-shadow: none !important; }
:root:root:root:root body:is(*, #lg-boost) #liveloop-container .liveloop-mode button[aria-pressed="true"]:is(*, #lg-boost) { background: #6d28d9 !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, .55) inset !important; }
:root:root:root:root.light-mode body:is(*, #lg-boost) #liveloop-container .liveloop-mode button:not([aria-pressed="true"]):is(*, #lg-boost) { color: #5c5c6a !important; }

/* Talk is the portal bar's one global control (owner, 2026-09-29: "talk in
   LiveLoop's own interface is not needed"). LiveLoop's own button stays in the
   page for the code that reads it, and is never shown. */
:root:root:root:root #liveloop-container #liveloop-voice-btn { display: none !important; }

/* Drive, list view (owner, 2026-09-30: "some of the view is wrong ... how the
   documents are"). A document row is a row like an image's: the type badge and
   icon on the left, the name and date left-aligned beside them, nothing
   centred, nothing clipped. The card body is a column by default, which made
   the icon sit above a centred name with the date cut off by the 76px row. */
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item { grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; padding: 0; }
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item .visual-badge { grid-column: 1; justify-self: center; margin: 0; }
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item .doc-card-body {
  grid-column: 2; height: auto; min-width: 0; padding: 0 14px 0 0; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; justify-items: start;
}
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item .doc-card-body > i { grid-row: 1 / span 2; grid-column: 1; margin: 0 !important; font-size: 1.6rem !important; }
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item .doc-name { grid-column: 2; grid-row: 1; text-align: left !important; width: 100% !important; align-self: end; }
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item.doc-item .doc-card-body > div:last-child { grid-column: 2; grid-row: 2; opacity: .55 !important; font-size: .7rem !important; padding: 0 !important; margin: 0 !important; align-self: start; }

/* Drive, list view: the row under the pointer keeps its slight zoom and gains an
   outline that contrasts with the theme (owner, 2026-09-30): white on dark,
   black on light. An outline, so nothing shifts. */
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item:hover,
:root:root #visual-lib-overlay .visual-grid.gallery-list .visual-item:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 0; }
:root:root.light-mode #visual-lib-overlay .visual-grid.gallery-list .visual-item:hover,
:root:root.light-mode #visual-lib-overlay .visual-grid.gallery-list .visual-item:focus-visible { outline: 2px solid #000000 !important; }

/* The chat header keeps credits and search only (owner, 2026-10-01: "settings, tips, need to be hidden from chat").
   Hidden, not removed: script.js, app.html and portal.js still bind to these two ids. */
:root:root:root:root body #controls-header-content :is(#tips-header-btn, #settings-btn) { display: none !important; }

/* ---- Sary-OS Drive: one control language with the other tools (owner, 2026-10-01:
   "fix buttons here, gallery looks tacky here compared to the rest").
   The Drive's own styles (script.js) mixed five heights (36-64 px), four corner radii,
   three fonts, solid black fields among glass ones, and a fixed violet (#7c3aed) whatever
   the accent. Here every control is StudioLab's: 38 px, 10 px corners, Inter, glass,
   the account's accent. The prefix outranks the theme and liquid-glass rules. ---- */
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay {
  --drv-accent: var(--panel-accent, var(--lg-a1, #4a90e2));
  --drv-line: rgba(255, 255, 255, .12); --drv-ctl: rgba(255, 255, 255, .06); --drv-ctl-hover: rgba(255, 255, 255, .11);
  --drv-text: #e9f1ff; --drv-muted: rgba(233, 241, 255, .62);
}
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(button, select, input, kbd, .v-tab) { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; }
/* Header */
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-multiselect-hint { color: var(--drv-muted) !important; font-size: 12px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-multiselect-hint i { color: var(--drv-accent) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-multiselect-hint kbd { background: var(--drv-ctl) !important; border: 1px solid var(--drv-line) !important; color: var(--drv-text) !important; border-radius: 5px !important; padding: 1px 6px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay #close-visual-lib { width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; border-radius: 10px !important; font-size: 18px !important; line-height: 1 !important; }
/* Dark's gloss-black keys (request 289) carry four ids and painted every row here as a
   black key (owner, 2026-10-01: "this still needs sorting out, looks clashed"). Every rule
   in this block carries the same four, so the Drive's own list wins: rows, not keys. */
/* Sidebar: the sections are rows, not stacked boxes */
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .visual-tabs { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-content: flex-start !important; gap: 2px !important; height: auto !important; flex: 0 0 auto !important; grid-auto-rows: auto !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-folder-row) {
  height: 38px !important; min-height: 0 !important; padding: 0 12px !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
  border-radius: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--drv-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important;
}
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-drive-upload)[hidden], :root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab.kb-subscription-only):not(body.knowledge-base-unlocked *) { display: none !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-folder-row, .gallery-folder-add, .gallery-folder-action) :is(span, b, strong, small, em, i) { -webkit-text-fill-color: currentColor !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-folder-row) > i { width: 16px; flex: none; text-align: center; color: var(--drv-muted) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-folder-row):hover { background: var(--drv-ctl) !important; color: #fff !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab.active, .gallery-folder-row.active, .gallery-folder-row.is-active, .gallery-folder-row[aria-current="true"]) { background: color-mix(in srgb, var(--drv-accent) 20%, transparent) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--drv-accent) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab.active, .gallery-folder-row.active, .gallery-folder-row.is-active) > i { color: var(--drv-accent) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-row > span:not(.folder-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab-count, .folder-count) {
  margin-left: auto !important; min-width: 0 !important; height: auto !important; padding: 2px 7px !important; border-radius: 99px !important; border: 0 !important;
  background: rgba(255, 255, 255, .07) !important; color: var(--drv-muted) !important; font: 600 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif !important; box-shadow: none !important;
}
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .v-tab.active .v-tab-count { background: color-mix(in srgb, var(--drv-accent) 35%, transparent) !important; color: #fff !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-head { font: 600 11px/1 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: .14em !important; color: var(--drv-muted) !important; }
/* Folder rows: rename and delete are small and come up on hover, so the name keeps one line */
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-entry { position: relative !important; display: flex !important; align-items: center !important; gap: 2px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-entry > .gallery-folder-row { flex: 1 1 auto !important; min-width: 0 !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-actions { position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%); display: flex !important; gap: 2px !important; padding: 2px; border-radius: 9px; background: rgba(6, 12, 30, .92); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-entry:is(:hover, :focus-within) .gallery-folder-actions { opacity: 1; pointer-events: auto; }
:root:root:root:root:root:root:root:root.light-mode body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-actions { background: rgba(255, 255, 255, .95); }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.gallery-folder-action, .gallery-folder-add) {
  width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important;
  border-radius: 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--drv-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: 12px !important;
}
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.gallery-folder-action, .gallery-folder-add):hover { background: var(--drv-ctl-hover) !important; color: #fff !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-folder-action.delete:hover { color: #f87171 !important; }
/* Toolbar: search, sort, upload, view and size are the same height and glass */
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay #lib-filter-row { align-items: center !important; gap: 8px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(#lib-search-input, #lib-date-sort, .gallery-drive-upload, .gallery-view-toggle, .gallery-zoom) {
  height: 38px !important; min-height: 0 !important; border-radius: 10px !important; border: 1px solid var(--drv-line) !important;
  background: var(--drv-ctl) !important; background-image: none !important; box-shadow: none !important; color: var(--drv-text) !important;
  font-size: 13px !important; font-weight: 600 !important; -webkit-text-fill-color: currentColor !important;
}
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay #lib-search-input { font-weight: 400 !important; padding: 0 14px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay #lib-search-input::placeholder { color: var(--drv-muted) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay #lib-date-sort { padding: 0 30px 0 12px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-drive-upload { padding: 0 14px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-drive-upload i { color: var(--drv-accent) !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-drive-upload:hover:not(:disabled) { background: var(--drv-ctl-hover) !important; border-color: var(--drv-accent) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-view-toggle { display: inline-flex !important; padding: 3px !important; gap: 2px !important; overflow: hidden; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-view-toggle button { width: 34px !important; height: 30px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: var(--drv-muted) !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-view-toggle button:is(.active, [aria-pressed="true"], .is-active) { background: color-mix(in srgb, var(--drv-accent) 28%, transparent) !important; color: #fff !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-zoom { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; color: var(--drv-muted) !important; }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-zoom input[type="range"] { accent-color: var(--drv-accent); }
:root:root:root:root:root:root:root:root body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-drive-summary { color: var(--drv-muted) !important; }
:root:root:root:root:root:root:root:root.light-mode body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay {
  --drv-line: rgba(20, 19, 27, .14); --drv-ctl: rgba(20, 19, 27, .04); --drv-ctl-hover: rgba(20, 19, 27, .08); --drv-text: #14131b; --drv-muted: #4b5568;
}
:root:root:root:root:root:root:root:root.light-mode body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay :is(.v-tab, .gallery-folder-row):is(:hover, .active), :root:root:root:root:root:root:root:root.light-mode body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #visual-lib-overlay#visual-lib-overlay .gallery-view-toggle button.active { color: #14131b !important; }

/* The voice agent is a LiveLoop perk (owner, 2026-10-01): once the trial ends
   without a plan, Talk (the bar's and LiveLoop's own) is not shown.
   public/script.js syncLiveLoopVoicePerk() sets the attribute. */
html[data-liveloop-voice="off"] :is(#portal-narrate-btn, #liveloop-voice-btn) { display: none !important; }

/* Guide, Talk and Record: one matched set (owner, 2026-10-02: "fix this, looks
   shit. use nicer buttons"). They were three sizes (48, 48 and 26 px) with
   three paddings and type sizes. Now one grid in Talk's place: Guide and Talk
   side by side, Record the full width under them (still under Talk, owner
   2026-10-01), every button 36 px with the same corners and type.
   stackSaryOSRecordUnderTalk (script.js) moves Guide into the stack. The
   :root chain and !important are the theme's own weight (liquid-glass.css). */
:root:root:root:root #portal-bar .portal-talk-stack {
  display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 32px; gap: 6px;
  /* Centred with room on every side (owner, 2026-10-02: "make it more
     central and not touching the edges"): 70 px in the 92 px bar. */
  align-self: center; margin: 0 22px !important; min-width: 206px;
}
:root:root:root:root #portal-bar .portal-talk-stack > :is(.portal-guide-btn, .portal-narrate-btn, #portal-record-btn)[class] {
  position: static; margin: 0 !important; width: 100%; height: 32px !important; min-height: 32px !important; max-height: 32px;
  padding: 0 14px !important; gap: 8px !important; justify-content: center; border-radius: 11px !important;
  font: 700 12px/1 Inter, system-ui, sans-serif !important; letter-spacing: .02em !important;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
:root:root:root:root #portal-bar .portal-talk-stack > :is(.portal-guide-btn, .portal-narrate-btn, #portal-record-btn)[class]:active { transform: translateY(1px); }
:root:root:root:root #portal-bar .portal-talk-stack > :is(.portal-guide-btn, .portal-narrate-btn) i { width: 14px; font-size: 13px; }
:root:root:root:root #portal-bar .portal-talk-stack > .portal-guide-btn { grid-column: 1; grid-row: 1; }
:root:root:root:root #portal-bar .portal-talk-stack > .portal-narrate-btn { grid-column: 2; grid-row: 1; }
:root:root:root:root #portal-bar .portal-talk-stack > #portal-record-btn#portal-record-btn { grid-column: 1 / -1; grid-row: 2; }
/* Only Talk in the stack (no Guide yet): Talk and Record share one column. */
:root:root:root:root #portal-bar .portal-talk-stack:not(:has(> .portal-guide-btn)) { grid-template-columns: 1fr; min-width: 112px; }
:root:root:root:root #portal-bar .portal-talk-stack:not(:has(> .portal-guide-btn)) > .portal-narrate-btn { grid-column: 1; }

/* Record keeps the theme's key and reads as record by its lit dot, which pulses while a take runs. */
:root:root:root:root #portal-bar .portal-talk-stack > #portal-record-btn#portal-record-btn i { font-size: 9px; color: #ef4444 !important; filter: drop-shadow(0 0 4px rgba(239, 68, 68, .8)); }
:root:root:root:root #portal-bar .portal-talk-stack > #portal-record-btn#portal-record-btn.is-recording i { animation: portal-rec-pulse 1.2s ease-in-out infinite; }
@keyframes portal-rec-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { :root:root:root:root #portal-bar .portal-talk-stack > #portal-record-btn#portal-record-btn.is-recording i { animation: none; } }
/* The short bar (1100 px and below): one row of three, icons only. */
@media (max-width: 1100px) {
  :root:root:root:root #portal-bar .portal-talk-stack { grid-template-columns: repeat(3, 36px); grid-auto-rows: 34px; min-width: 0; margin-right: 0; }
  :root:root:root:root #portal-bar .portal-talk-stack > :is(.portal-guide-btn, .portal-narrate-btn, #portal-record-btn)[class] { grid-row: 1; grid-column: auto; height: 34px !important; min-height: 34px !important; padding: 0 !important; }
  :root:root:root:root #portal-bar .portal-talk-stack > * span { display: none; }
}