/* _rail.css — platform-specific slot content for <aly-rail-shell>.
   Chrome behavior (60→240 hover, blur, brand mark, scroll, section
   eyebrows, spacer) lives in
   ../../components/rail-shell/rail-shell.css. This file owns only
   the platform's nav-button styles, recent-conversations list, and
   user popover. */

.rail-btn{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius);
  font-size:var(--type-body);
  font-weight:var(--fw-medium);
  color:var(--text-2);
  cursor:pointer;user-select:none;
  background:transparent;border:none;font-family:inherit;text-align:left;
  text-decoration:none;width:100%;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
  white-space:nowrap;min-height:36px;
}
/* Rail icons — crisp linework. Rest text-3, hover reference-blue, active brand. */
.rail-btn svg{
  width:18px;height:18px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--text-3);
  transition:color var(--dur-card) var(--ease),
             stroke-width var(--dur-card) var(--ease);
}
.rail:hover .rail-btn svg{color:var(--text-3);stroke-width:1}
/* off-system: reason="rail label reveal — 180ms opacity + 200ms transform with 80ms stagger delay; the rail's signature breathing-room cadence" approved="2026-05" */
.rail-btn .lbl{opacity:0;transform:translateX(-6px);transition:opacity 180ms var(--ease) 80ms, transform 200ms var(--ease) 80ms}
.rail:hover .rail-btn .lbl,
.rail[data-expanded="true"] .rail-btn .lbl{opacity:1;transform:translateX(0)}
.rail-btn:hover{background:color-mix(in srgb, var(--ink) 4%, transparent);color:var(--text)}
.rail:hover .rail-btn:hover svg,
.rail[data-expanded="true"] .rail-btn:hover svg{color:var(--reference);stroke-width:1.25}
.rail-btn.active{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--text)}
.rail-btn.active svg{color:var(--brand);stroke-width:1.5}
.rail:hover .rail-btn.active svg{color:var(--brand);stroke-width:1.5}
/* B4.3 — Rx glyph robustness rule. The Prescriptions item uses an SVG <text>
   element rendering the Unicode ℞ (U+211E). The global `.rail-btn svg
   { fill:none; stroke:currentColor }` rule above would normally hide a
   filled glyph, so the rx-glyph variant explicitly restores fill + drops
   stroke. Today the cascade lets the inline `fill="currentColor"` win;
   making the rule explicit insulates the glyph from a future tightening
   of the global rail-btn svg rule. */
.rail-btn.rx-glyph svg{fill:currentColor;stroke:none}
.rail-btn .kbd{
  margin-left:auto;font-size: var(--type-caption);font-weight:600;color:var(--text-4);
  padding:var(--space-0-5) var(--space-1-5);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--ink) 4%, transparent);
  /* off-system: reason="rail stagger uses 180ms+120ms-delay for label reveal; intentionally slower than --dur-hover (160ms) for the breathing-room feel" approved="2026-05" */
  opacity:0;transition:opacity 180ms var(--ease) 120ms;
  /* off-system: reason="kbd-chip uses .02em tracking for monogram clarity at micro size" approved="2026-05" */
  letter-spacing:.02em;
}
.rail:hover .rail-btn .kbd,
.rail[data-expanded="true"] .rail-btn .kbd{opacity:1}

.rail-history{
  display:flex;flex-direction:column;gap:1px;overflow:hidden;
  /* Match the .rail-section eyebrow's left edge so chats and the "RECENT"
     header sit on one column. The eyebrow uses var(--space-2) horizontal
     padding via rail-shell.css; we mirror that here so child .rail-chat
     items inherit the same starting X via their own var(--space-2)
     left padding (no extra margin needed). */
  padding:0;
}
.rail-history-row{display:block}
/* the expanded list scrolls; its items must never shrink to fit (they squashed to 8 px and rendered as dots — 2026-09-03) */
.rail-history > .rail-chat, .rail-history > .rail-chat-sep, .rail-history > .rail-chats-more{flex-shrink:0}
.rail-search-btn:focus-within,
.rail[data-rail-search-active="true"] .rail-search-btn{
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  outline:2px solid color-mix(in srgb, var(--brand) 40%, transparent);
  outline-offset:0;
}
.rail-search-btn .lbl{
  overflow:hidden;
}
.rail-search-input{
  flex:0 1 0;min-width:0;width:0;border:none;background:transparent;
  font-family:inherit;font-size:var(--type-body-sm);color:var(--text);
  padding:0;outline:none;
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
  transition:opacity 180ms var(--ease) 80ms, transform 200ms var(--ease) 80ms;
}
.rail-search-btn:focus-within .lbl,
.rail[data-rail-search-active="true"] .rail-search-btn .lbl{
  width:0;
  opacity:0;
  transform:translateX(-6px);
}
.rail-search-btn:focus-within .rail-search-input,
.rail[data-rail-search-active="true"] .rail-search-input{
  flex:1 1 auto;
  width:auto;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.rail-search-input::placeholder{color:var(--text-3)}
.rail-search-input::-webkit-search-cancel-button{appearance:none;display:none}

/* Recent chat items — body / medium / text-2; brand-wash active pill. */
.rail-chat{
  padding:var(--space-1) var(--space-2);border-radius:var(--radius);
  font-size:var(--type-body);
  font-weight:var(--fw-medium);
  color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
  opacity:0;transform:translateX(-4px);
  /* off-system: reason="rail micro-motion vocabulary — 140/180/200/220ms cadences are intentional stagger increments" approved="2026-05" */
  transition:opacity 200ms var(--ease), transform 200ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.rail:hover .rail-chat,
.rail[data-expanded="true"] .rail-chat{opacity:1;transform:translateX(0)}
.rail-chat:hover{background:color-mix(in srgb, var(--ink) 4%, transparent);color:var(--text)}
.rail-chat.active{background:color-mix(in srgb, var(--brand) 10%, transparent);color:var(--brand-deep)}
.rail-chat[data-filtered="true"]{display:none}

/* Age-bucket separators — same eyebrow vocabulary as .rail-section but
   inline-styled here so they nest cleanly inside .rail-history without
   triggering the rail-section ::before column-line. */
.rail-chat-sep{
  padding:var(--space-3) var(--space-2) var(--space-1);
  font-size:var(--type-caption);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow-sm);
  text-transform:uppercase;
  color:var(--text-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateX(-4px);
  /* off-system: reason="rail micro-motion vocabulary — 140/180/200/220ms cadences are intentional stagger increments" approved="2026-05" */
  transition:opacity 200ms var(--ease), transform 200ms var(--ease);
}
.rail:hover .rail-chat-sep,
.rail[data-expanded="true"] .rail-chat-sep{opacity:1;transform:translateX(0)}
.rail-history[data-collapsed="true"] .rail-chat-sep{display:none}
.rail-history[data-searching="true"] .rail-chat-sep{display:none}

/* Collapsed state — show first 3 chats only (and the search input above).
   The :nth-of-type counts among `.rail-chat` siblings within `.rail-history`. */
.rail-history[data-collapsed="true"] .rail-chat:nth-of-type(n+4){display:none}

/* Show-more / show-less toggle. Visible only when the rail is expanded. */
.rail-chats-more{
  margin-top:var(--space-2);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius);
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:var(--type-body-sm);font-weight:var(--fw-medium);
  color:var(--text-3);text-align:left;
  opacity:0;transform:translateX(-4px);
  /* off-system: reason="rail micro-motion vocabulary — 140/180/200/220ms cadences are intentional stagger increments" approved="2026-05" */
  transition:opacity 200ms var(--ease), transform 200ms var(--ease), color 140ms var(--ease);
}
.rail:hover .rail-chats-more,
.rail[data-expanded="true"] .rail-chats-more{opacity:1;transform:translateX(0)}
.rail-chats-more:hover{color:var(--text)}
.rail-history[data-searching="true"] .rail-chats-more{display:none}
.rail-chats-more .lbl-expanded{display:none}
.rail-history[data-collapsed="false"] .rail-chats-more .lbl-collapsed{display:none}
.rail-history[data-collapsed="false"] .rail-chats-more .lbl-expanded{display:inline}

/* When expanded, the chat list can scroll inside the rail (the rail itself
   has fixed height; the history grows below the show-more). */
.rail-history[data-collapsed="false"]{
  max-height:50vh;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--ink-wash-12) transparent;
}
.rail-history[data-collapsed="false"]:hover{scrollbar-color:var(--ink-wash-22) transparent}

/* subtle stagger on expand — only for the first 3 (default-visible) so the
   rest don't animate when revealed via show-more. */
.rail:hover .rail-chat:nth-of-type(1){transition-delay:120ms, 120ms, 0ms, 0ms}
.rail:hover .rail-chat:nth-of-type(2){transition-delay:150ms, 150ms, 0ms, 0ms}
.rail:hover .rail-chat:nth-of-type(3){transition-delay:180ms, 180ms, 0ms, 0ms}

.rail-user{
  display:flex;align-items:center;gap:var(--space-2-5);
  padding:var(--space-2) var(--space-1-5);border-top:1px solid transparent;margin-top:var(--space-1-5);
  /* off-system: reason="border-color reveal at the section seam intentionally slower than --dur-card (240ms) for ambient settle" approved="2026-05" */
  transition:border-color 260ms var(--ease);
  cursor:pointer;border-radius:var(--radius-lg);
  position:relative;
}
.rail:hover .rail-user{border-color:transparent}
.rail-user:hover{background:color-mix(in srgb, var(--ink) 4%, transparent)}
.rail-user.is-open{background:color-mix(in srgb, var(--ink) 4%, transparent)}
.rail-user .av{
  width:28px;height:28px;border-radius:50%;
  /* off-system: reason="user-avatar gradient is a brand-distinctive identity element (lighter-to-deeper green); the two stop hexes are intentional visual choices that don't map to --brand/--brand-deep exactly — preserved for parity across the rail/popover/topbar usages of the same monogram" approved="2026-05" */
  background:linear-gradient(135deg,#3A8D3F,#1E5C23);
  color:var(--text-inverse);font-size: var(--type-body-sm);font-weight:650;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  /* off-system: reason="white inset hairline on the avatar gives subtle elevation against the dark gradient; matches the monogram pattern used across rail/popover" approved="2026-05" */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  /* off-system: reason="monogram tracking optimized for two-letter avatar (.01em opens spacing slightly for legibility at 28px)" approved="2026-05" */
  letter-spacing:.01em;
}
.rail-user > .who{display:flex;flex-direction:column;gap:1px;min-width:0;
  /* off-system: reason="user-card name+role reveal staggered to 160ms-delay after rail expand for sequential reveal feel" approved="2026-05" */
  opacity:0;transform:translateX(-4px);transition:opacity 180ms var(--ease) 160ms, transform 200ms var(--ease) 160ms;}
.rail:hover .rail-user > .who,
.rail[data-expanded="true"] .rail-user > .who{opacity:1;transform:translateX(0)}
/* off-system: reason="optical-tighter tracking on .n is the canonical platform headline treatment per design-system display-set rules" approved="2026-05" */
.rail-user .n{font-size: var(--type-body);font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-user .r{font-size: var(--type-micro);color:var(--text-3);font-weight:500;line-height:1.2}

/* ── User popover (anchored above .rail-user row) ── */
.rail-user-pop{
  position:absolute;left:calc(100% + 8px);bottom:0;
  min-width:220px;max-width:224px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-xl);
  box-shadow:0 12px 40px -12px var(--ink-wash-22), 0 2px 6px -2px var(--ink-wash-8);
  padding:var(--space-1-5);
  opacity:0;transform:translateY(4px) scale(.98);pointer-events:none;transform-origin:bottom left;
  /* off-system: reason="popover entry uses 180ms-no-delay + 220ms spring; intentional ambient feel slightly slower than --dur-mount (360ms) reverse" approved="2026-05" */
  transition:opacity 180ms var(--ease), transform 220ms var(--ease-spring);
  z-index:1001;
}
.rail-user-pop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.rail-user-pop .rup-head{
  display:flex;align-items:center;gap:var(--space-2-5);
  padding:var(--space-2-5);margin-bottom:var(--space-1);
  border-bottom:1px solid var(--line);
}
.rail-user-pop .rup-head .av{
  width:32px;height:32px;border-radius:50%;
  /* off-system: reason="popover avatar mirrors the rail .rail-user .av monogram-gradient identity element" approved="2026-05" */
  background:linear-gradient(135deg,#3A8D3F,#1E5C23);
  color:var(--text-inverse);font-size: var(--type-body-sm);font-weight:650;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  /* off-system: reason="white inset hairline matches the rail .rail-user .av elevation pattern" approved="2026-05" */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  /* off-system: reason="monogram tracking matches the rail .rail-user .av two-letter clarity at 32px" approved="2026-05" */
  letter-spacing:.01em;
}
.rail-user-pop .rup-head .who{display:flex;flex-direction:column;gap:1px;min-width:0}
/* off-system: reason="optical-tighter tracking on .n matches the platform display-set rule applied across user-card patterns" approved="2026-05" */
.rail-user-pop .rup-head .n{font-size: var(--type-body);font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.2;white-space:nowrap}
.rail-user-pop .rup-head .r{font-size: var(--type-micro);color:var(--text-3);font-weight:500;line-height:1.2}
.rail-user-pop .rup-it{
  display:flex;align-items:center;gap:var(--space-2-5);
  width:100%;padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-lg);
  background:transparent;border:none;text-align:left;cursor:pointer;
  font-family:inherit;font-size: var(--type-body);color:var(--text);font-weight:500;
  text-decoration:none;
  /* off-system: reason="rail micro-motion vocabulary — 140/180/200/220ms cadences are intentional stagger increments" approved="2026-05" */
  transition:background 140ms var(--ease), color 140ms var(--ease);
}
.rail-user-pop .rup-it:hover{background:var(--paper-2);color:var(--ink)}
.rail-user-pop .rup-it.active{background:var(--brand-soft);color:var(--brand-deep)}
.rail-user-pop .rup-it.active .ic{color:var(--brand)}
.rail-user-pop .rup-it .ic{
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  color:var(--text-3);flex-shrink:0;
  /* off-system: reason="rail micro-motion vocabulary — 140/180/200/220ms cadences are intentional stagger increments" approved="2026-05" */
  transition:color 140ms var(--ease);
}
.rail-user-pop .rup-it .ic svg{width:16px;height:16px;stroke:currentColor;fill:none}
.rail-user-pop .rup-it:hover .ic{color:var(--reference)}
.rail-user-pop .rup-it.is-disabled{color:var(--text-4);cursor:help}
.rail-user-pop .rup-it.is-disabled:hover{background:transparent;color:var(--text-4)}
.rail-user-pop .rup-it.is-disabled:hover .ic{color:var(--text-4)}
.rail-user-pop .rup-it.is-disabled::after{
  content:"Coming soon";margin-left:auto;
  font-size: var(--type-micro);color:var(--text-4);font-weight:500;
  padding:1px var(--space-1-5);border-radius:var(--radius-sm);background:var(--paper-3);
}
.rail-user-pop .rup-signout{color:var(--text-2)}
.rail-user-pop .rup-signout:hover{color:var(--danger)}
.rail-user-pop .rup-signout:hover .ic{color:var(--danger)}
.rail-user-pop .rup-div{
  height:1px;background:var(--line);margin:var(--space-1) var(--space-2);
}

/* iter-11 polish (2026-05-18) — honor OS-level reduced-motion preference.
   The user-saved data-motion="reduce" path is handled globally by
   _settings.js; this parallel @media rule covers OS-signal users before
   they open settings. Disables the rail's stagger animations and
   transitions for the hover-expand, label reveal, icon shading,
   chat-list reveal, popover entry, etc. */
@media (prefers-reduced-motion: reduce){
  .rail-btn, .rail-btn svg, .rail-btn .lbl, .rail-btn .kbd,
  .rail-search-input, .rail-chat, .rail-chat-sep, .rail-chats-more,
  .rail-user, .rail-user .who, .rail-user .av,
  .rail-user-pop, .rail-user-pop .rup-it, .rail-user-pop .rup-head .av{
    transition:none !important;
    animation:none !important;
  }
}