/* =========================================================
   GEXI — public/shell/gx-skin.css   (SU3 Step 4 / SU2 — the Gemini-grade SKIN)

   The functional shell (rail + dock + composer + zones) is built and token-driven; this sheet is the PREMIUM LAYER on
   top — "reason like Claude, feel like Gemini". Linked LAST in views/app-shell.html (after gx-rail.css) so it wins the
   cascade. Application, not authoring: the design kit (gx-ui / gx-motion / gx-glyphs + the dark-canvas tokens) already
   exists; the shell just never consumed it.

   SCOPING LAW — every rule is under `#gx-shell`. The hero/composer hooks (.cv-send / .cv-composer / .cv-empty /
   .cv-suggest / .cv-chip) are SHARED with /chat via the makeComposer factory; /chat never loads THIS sheet (app-shell.html
   is route-gated to /app), but scoping under #gx-shell is the belt-and-suspenders guarantee that /chat stays byte-identical.

   TOKENS — all real (public/styles.css, dual-themed). --grad-neon is referenced DIRECTLY (the kit's .gx-hero-title/
   .gx-prompt-go use the OLD --gx-grad=--grad-creative; the neon is reserved here for the three loud moments).
   MOTION BUDGET (premium-calm) — neon/glow lives on three moments only (hero load, send press, Stage deliver=SU6); the
   only loops are active-load shimmer + the rail making-pip (opacity-only, already guarded). Message entrance reuses the
   kit's .gx-enter (one reduced-motion guard in gx-motion.css); any NEW keyframe below carries its OWN guard.
   GOTCHAS — never put a slash-star terminator inside a comment; mobile flex-children keep width:100%;min-width:0.
   ========================================================= */

/* ===== 1 · DEPTH — "AI lab at night" + the one-loud-zone focal rule (idle: the dock is the hero; rail+stage recede) ===== */
#gx-shell { background: var(--void); }
#gx-shell #gx-chat  { background: var(--void); }                 /* the loud zone — the brain conversation */
#gx-shell #gx-drawer { background: var(--void-2); }              /* the Work Rail recedes one tier */
#gx-shell #gx-stage { background: var(--void-2); isolation: isolate; }   /* recedes; position lives on the base #gx-stage (appShell.css) so the SU7 mobile @media sheet rule can override it (specificity) */

/* a faint lab-grid texture over the Stage only (pure paint, no motion; opacity keeps it a whisper). */
#gx-shell #gx-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline-neon) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-neon) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center; opacity: 0.05;
}
#gx-shell #gx-stage > * { position: relative; z-index: 1; }

/* hairlines on the loud zone read as a panel edge, not a hard line. */
#gx-shell #gx-chat { border-left-color: var(--line); border-right-color: var(--line); }

/* ===== 2 · HERO — the empty-state first impression (a warm gradient prompt + the capability constellation) ===== */
/* the HERO LAYOUT is scoped to the empty STATE (.cv-empty); the bare .gx-dock-empty unavailable notice keeps its compact
   shellChat.css styling instead of being yanked to full-height hero-center (Step-4 audit [medium]). */
#gx-shell .gx-dock-empty.cv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6) var(--space-4); min-height: 100%; text-align: center;
  max-width: 100%; width: 100%; margin: 0 auto;   /* override chat.css's ~218px cap so the hero FILLS the dock (kills the cramped/off-centre look) */
  position: relative; overflow: hidden;            /* the positioning + clip context for the glowing gecko trail behind the hero */
}
/* the glowing gecko-print trail (owner): reuse the site-wide .gecko-* trail (styles.css), but the spacious shell home SHOWS
   it on mobile too (styles.css hides it <=720px), and the hero/sub sit ABOVE it. It's inside .cv-empty, so it disappears
   the instant a conversation starts. */
#gx-shell .gx-dock-empty.cv-empty > .gx-dock-hero,
#gx-shell .gx-dock-empty.cv-empty > .cv-hello-sub { position: relative; z-index: 1; }
#gx-shell .gx-dock-empty.cv-empty .gecko-tracks-layer { display: block; z-index: 0; }
/* FACE THE TRAVEL DIRECTION (owner): the trail walks DOWN-right, so every print's toes point ~143deg (down + ~37deg right =
   the path heading) instead of styles.css's up-pointing -30..+36 fan. The left-of-centre prints toe-in a touch right (~138deg)
   and the right-of-centre ones toe-in a touch left (~150deg), so it staggers like a real walk rather than all leaning one way.
   Override transform only (the fade/glow animation is on opacity+filter, untouched); #gx-shell-scoped so the marketing home keeps its trail. */
#gx-shell .gecko-print-1 { transform: rotate(144deg); }
#gx-shell .gecko-print-2 { transform: rotate(150deg); }
#gx-shell .gecko-print-3 { transform: rotate(138deg); }
#gx-shell .gecko-print-4 { transform: rotate(150deg); }
#gx-shell .gecko-print-5 { transform: rotate(138deg); }
#gx-shell .gecko-print-6 { transform: rotate(150deg); }
#gx-shell .gecko-print-7 { transform: rotate(138deg); }
#gx-shell .gecko-print-8 { transform: rotate(145deg); }
/* the warm one-line prompt (the elicitation LAW: ONE warm prompt, never a form), gradient-clipped to --grad-neon. */
#gx-shell .gx-dock-hero {
  margin: 0; max-width: 18ch; font-size: var(--text-2xl); font-weight: 680; line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  background: var(--grad-neon); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* the home HERO is now the GEXI "G" logo (owner) — the brand plate, sized + centred. The text-gradient styles above are
   inert on an <img> (nothing to clip), but we null them on the logo variant so nothing paints behind the mark. */
#gx-shell .gx-dock-hero--logo { background: none; -webkit-text-fill-color: initial; max-width: none; line-height: 0; }
#gx-shell .gx-dock-logo { display: block; width: 76px; height: 76px; }
#gx-shell .gx-dock-empty .cv-hello-sub {
  margin: 0; max-width: 42ch; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-normal);
}
/* the starters BECOME the constellation — re-skin the existing chip set as a tile grid (no second element, no dupe). */
#gx-shell .gx-dock-empty .cv-suggest {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
  width: 100%; max-width: 420px; margin-top: var(--space-2);
}
/* the constellation tile — a clean CENTRED tile (icon over label), softly rounded, uniform height. */
#gx-shell .gx-dock-empty .cv-chip {
  width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3); min-height: 96px; text-align: center;
  background: var(--void-2); border: 0.5px solid var(--line); border-radius: 16px;
  color: var(--text); font-size: var(--text-sm); line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#gx-shell .gx-dock-empty .cv-chip:hover {
  background: var(--card-alt); border-color: var(--hairline-neon); transform: translateY(-2px); box-shadow: var(--glow-accent);
}
#gx-shell .gx-dock-empty .cv-chip-ic { font-size: var(--text-2xl); line-height: 1; flex: none; }

/* ===== 3 · COMPOSER — minimal & near-opaque (Gemini/Claude feel): ONE calm pill, a quiet send, no neon gradient,
   no heavy drop-shadow, no green focus-glow. Field + attach + send read as a single flat surface (the revamp). ===== */
#gx-shell .cv-composer {
  background: var(--void-2); border: 1px solid var(--line); border-radius: 26px; padding-left: 7px;
  box-shadow: none;   /* was the heavy 0 8px 24px --cv-shadow — Gemini/Claude's field has none */
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#gx-shell .cv-composer:focus-within { border-color: var(--muted); box-shadow: none; }   /* a quiet neutral strengthen, NOT a green glow */
/* LIGHT — the composer reads as a distinct RAISED input surface (Gemini's composer sits ABOVE the near-white canvas
   with a clear border + a soft shadow). White field (--card) over the #fafafd page, a stronger --line-strong border,
   and a two-layer soft shadow — no inner box, no green (the BAR-100% clutter stays gone). Dark keeps the flat void-2
   pill (already reads as a surface against the deeper --void). 2026-07-24 feel-parity.
   NOTE: light = the DEFAULT (theme.js deletes data-theme for light; only dark sets [data-theme="dark"]), so the
   light condition is :not([data-theme="dark"]) — a bare [data-theme="light"] would never match the default state. */
:root:not([data-theme="dark"]) #gx-shell .cv-composer {
  background: var(--card); border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .06);
}
/* SEND — a two-state affordance (2026-07-24 feel-parity; supersedes the earlier all-ghost send). IDLE/EMPTY stays a
   quiet faint ghost, uniform with the bar (zero green — the owner's BAR-100% law holds for the resting state). ARMED
   (has input) goes HIGH-CONTRAST FILLED — the primary affordance, exactly like Gemini/ChatGPT's filled send: a solid
   --ink disc (near-black on the near-white light canvas, near-white in dark) with the arrow in the opposite --void.
   Theme-aware by token; no colour literal. The stop button keeps its own filled chat.css base (is-stop untouched). */
#gx-shell .cv-send:not(.is-stop) { background: transparent; color: var(--text); box-shadow: none; }
#gx-shell .cv-send.is-empty:not(.is-stop) { color: var(--faint); }
#gx-shell .cv-send.is-empty:not(.is-stop):hover { background: var(--card-alt); color: var(--text); }
#gx-shell .cv-send:not(.is-stop):not(.is-empty) { background: var(--ink); color: var(--void); }
#gx-shell .cv-send:not(.is-stop):not(.is-empty):hover { background: color-mix(in srgb, var(--ink) 85%, var(--void)); }
/* the FIELD itself must be fully transparent — a global dark-mode `textarea { background: rgba(255,255,255,.04) }` in
   styles.css (specificity 0,1,2) otherwise beats the base `.cv-input` and paints a faint inner box (the "box-in-a-box").
   The #gx-shell id wins. This is what makes the field read as ONE surface with the pill (no inner layer). */
#gx-shell .cv-input { background: transparent; }
/* THE SLEEK BAR (2026-07-22) — the leading "+" (base ghost styling lives in chat.css .cv-plus; here only the shell's
   token mapping) + the anchored popover on the shell's surface tokens. The old .cv-attach-btn rules retired with it. */
#gx-shell .cv-plus { color: var(--muted); }
#gx-shell .cv-plus:hover, #gx-shell .cv-plus[aria-expanded="true"] { background: var(--card-alt); color: var(--text); }
#gx-shell .cv-plus-menu { background: var(--void-2); border-color: var(--line); }
#gx-shell .cv-plus-item:hover, #gx-shell .cv-plus-menu .cv-tool-toggle:hover { background: var(--card-alt); }
/* tap-taming for the dock's touch targets (send pill, constellation tiles) — no blue flash / double-tap-zoom (mobile audit). */
#gx-shell .cv-send, #gx-shell .gx-dock-empty .cv-chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ===== 4 · MESSAGES — a one-shot entrance (the .gx-enter class is added in JS; keyed, so it fires once per mount) ===== */
/* (styling lives in gx-motion.css .gx-enter + its reduced-motion guard — nothing to add here.) */

/* ===== 5 · THE WORK RAIL — an active-row glow, a real shimmer skeleton ===== */
/* (the rail's ＋New is now a CALM "New chat" row — the header's ＋New owns the single green CTA; no neon re-skin here.) */
#gx-shell .gx-rail-work.is-active { box-shadow: inset 2px 0 0 var(--brand-500), var(--glow-accent); }
#gx-shell .gx-rail-item.active { box-shadow: inset 2px 0 0 var(--brand-500); }
/* REVAMP — the Tools "Sign in" is a <button> styled as a rail item (reset the native button chrome so it lines up with
   the <a> rooms); a quiet emerald label marks it as the one account CTA in the menu. */
#gx-shell .gx-rail-signin { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#gx-shell .gx-rail-signin .gx-rail-label { color: var(--brand-600); font-weight: 600; }
/* the first-load skeleton gets the kit's token-coloured sweep instead of a flat block (active-load loop, guarded below). */
#gx-shell .gx-rail-skelrow {
  background: linear-gradient(90deg, var(--void-2) 25%, var(--card-alt) 37%, var(--void-2) 63%);
  background-size: 300% 100%; opacity: 1;
  animation: gxm-skeleton var(--gx-dur-shimmer) ease-in-out infinite;
}

/* ===== 6 · reduced-motion guard for the ONE loop this sheet introduces (the skeleton sweep) ===== */
@media (prefers-reduced-motion: reduce) {
  #gx-shell .gx-rail-skelrow { animation: none; background: var(--void-2); }   /* flat tier, not a frozen mid-sweep band */
}

/* ===== 7 · LIGHT PARITY — every token is dual-themed, so no overrides are needed EXCEPT the hero gradient: the emerald
   gradient clipped to text can read thin on the near-white light canvas. Anchor a darker neon + a solid fallback. ===== */
[data-theme="light"] #gx-shell .gx-dock-hero {
  background: linear-gradient(135deg, #0f9d6b 0%, #169f5e 50%, #4a7a0f 100%);   /* darker lime end for AA-large margin on near-white */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* light-theme composer focus: the neutral border strengthen (→ --muted) IS the focus indicator; the RAISED shadow
   lifts a touch on focus (the Gemini "the field woke up" cue) while a 1px --muted ring keeps it clearly perceptible
   for keyboard users WITHOUT the green glow (a11y kept, minimal look). Light = default → :not([data-theme="dark"]). */
:root:not([data-theme="dark"]) #gx-shell .cv-composer:focus-within { box-shadow: 0 0 0 1px var(--muted), 0 2px 10px rgba(16, 24, 40, .09); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #gx-shell .gx-dock-hero { color: var(--brand-600); -webkit-text-fill-color: currentColor; background: none; }
}

/* ===== 8 · MOBILE DRAWER (owner mobile pass 2026-07-16: "clean and minimal like Claude — enterprise level").
   Scoped to the shell's own overlay breakpoint (appShell.css @959px). Comfortable 44px touch rows, readable 15px
   labels, ONE quiet icon column (fixed width, muted — the glyphs read as a system, not stickers), calmer group
   headers, and a hairline between the nav groups and the Tools/account block. Desktop rail untouched. ===== */
@media (max-width: 959px) {
  #gx-shell .gx-rail-item, #gx-shell .gx-rail-new { min-height: 44px; font-size: 15px; padding: 10px 12px; border-radius: 12px; }
  #gx-shell .gx-rail-work { min-height: 44px; font-size: 14px; border-radius: 12px; }
  #gx-shell .gx-rail-search { min-height: 44px; font-size: 15px; border-radius: 12px; }                     /* STRUCTURE PASS — the rail's pinned search joins the 44px row family */
  #gx-shell .gx-rail-convos .cv-session { font-size: 15px; border-radius: 12px; }                            /* the shared session rows read at the same size as the tool rows (44px floor comes from gx-rail.css) */
  #gx-shell .gx-rail-icon { flex: 0 0 22px; width: 22px; text-align: center; font-size: 15px; color: var(--muted); }
  #gx-shell .gx-rail-work > .gx-pip { margin: 0 7px; }                                                       /* the pip centres in the SAME 22px mobile icon column — one label edge holds */
  #gx-shell .gx-rail-item:hover .gx-rail-icon, #gx-shell .gx-rail-item.active .gx-rail-icon { color: var(--text); }
  #gx-shell .gx-rail-grouphd { min-height: 32px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }   /* STRUCTURE PASS — 40px → 32px (the owner's "too spaced out") */
  #gx-shell .gx-rail-tools { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-1); }
  #gx-shell #gx-drawer { padding: 14px 10px calc(14px + env(safe-area-inset-bottom)); }
}

/* ===== 9 · VOICE-IO (2026-07-17) — the dock mic matches the ghost attach/send family (44px touch floor) ===== */
#gx-shell .cv-mic { flex: 0 0 44px; width: 44px; height: 44px; color: var(--faint); }
#gx-shell .cv-mic:hover { background: var(--card-alt); color: var(--text); }
#gx-shell .cv-mic.is-listening { color: #ef4444; }

/* ===== 10 · IDLE READING COLUMN (2026-07-24 feel-parity, "smooth like Gemini") — Gemini/ChatGPT centre a readable
   conversation column; ours sat cramped in a 440px left dock beside a DEAD idle Stage (the ambient "your work collects
   here" panel), reading left-shifted + narrow. PROGRESSIVE DISCLOSURE: when NOTHING is on the Stage (no active
   production — no .gx-producing — and no framed room — no #gx-stage.gx-staged), the chat zone takes the freed track and
   the transcript + composer centre at a ~48rem Gemini reading width. The instant a production starts (.gx-producing) or
   a room frames (.gx-staged) the rule stops matching and the 3-zone split returns — the Stage reappears with its work.
   Desktop only (mobile chat is already full-screen; the Stage is a bottom sheet). Pure CSS via :has() — no JS, no flow
   change; browsers without :has() gracefully keep today's 3-zone layout. ===== */
#gx-shell { --gx-read-w: 48rem; }
@media (min-width: 960px) {
  #gx-shell:not([data-mode="project"]):not(.gx-producing):not(:has(#gx-stage.gx-staged)) {
    grid-template-columns: var(--gx-rail-w) minmax(0, 1fr) 0;
  }
  #gx-shell:not([data-mode="project"]):not(.gx-producing):not(:has(#gx-stage.gx-staged)) > #gx-stage { display: none; }
  /* centre the transcript + composer at the reading width inside the widened chat zone (symmetric side gutters that
     collapse to the base padding when the zone is narrower than the column). */
  #gx-shell:not([data-mode="project"]):not(.gx-producing):not(:has(#gx-stage.gx-staged)) .gx-dock-thread {
    padding-left: max(var(--space-3), calc((100% - var(--gx-read-w)) / 2));
    padding-right: max(var(--space-3), calc((100% - var(--gx-read-w)) / 2));
  }
  #gx-shell:not([data-mode="project"]):not(.gx-producing):not(:has(#gx-stage.gx-staged)) .cv-composer,
  #gx-shell:not([data-mode="project"]):not(.gx-producing):not(:has(#gx-stage.gx-staged)) .cv-disclaimer { max-width: var(--gx-read-w); }
}