/* ============================================================================
   SAI web app navigation: SAI's own dock, PORTED VERBATIM from the desktop app (ui/styles/main.css .dock) so the web and
   the app move the same way: a floating glass rail of icons on the left that expands to labels on hover or keyboard
   focus (collapsed 60px, open 228px), and a bottom tab bar on a phone. Web additions below the port are marked.
   Universal Network Development LLC · UND Industries   [UND-MARKER: SAI-WEB v1]
   ============================================================================ */

/* ---- ported from ui/styles/main.css (the desktop dock), unchanged ---- */
.dock { position: fixed; left: var(--sai-space-4); top: 80px; bottom: var(--sai-space-4); margin: auto 0; height: max-content; max-height: calc(100vh - 140px); width: 60px; padding: var(--sai-space-2); display: grid; gap: 6px; align-content: center;
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.16); overflow: hidden; z-index: var(--sai-z-rail);
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(28,34,62,0.74) 40%, rgba(16,20,38,0.86));
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.06); -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.04), 0 18px 50px rgba(0,0,0,0.45), 0 0 30px rgba(92,153,255,0.14);
  transition: width var(--sai-motion-rail) var(--sai-ease); }
.dock:hover, .dock:focus-within { width: 228px; }
.dock a { display: grid; grid-template-columns: 40px 1fr; align-items: center; height: 40px; width: 40px; margin: 0 auto; padding: 0; border-radius: 12px; color: rgba(233,236,248,0.9); text-decoration: none; white-space: nowrap; transition: background var(--sai-motion-fast) ease, color var(--sai-motion-fast) ease; }
.dock:hover a, .dock:focus-within a { width: 100%; margin: 0; }
.dock a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.dock a.on { background: rgba(120,160,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }
.dock a:focus-visible { outline: 2px solid #EDEFF7; outline-offset: -2px; }
.dock a svg { grid-column: 1; width: 19px; height: 19px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock a span { grid-column: 2; opacity: 0; transition: opacity var(--sai-motion-fast) ease 60ms; font-size: var(--sai-text-md); }
.dock:hover a span, .dock:focus-within a span { opacity: 1; }
.dock a.support { color: var(--sai-orange); }
.dock a.support:hover, .dock a.support.on { background: rgba(255,180,92,0.14); color: #ffd7a8; }
@media (max-width: 640px) {
  .dock { top: auto; bottom: 0; left: 0; right: 0; margin: 0; width: auto; height: 60px; max-height: 60px; grid-auto-flow: column; grid-auto-columns: 1fr; align-content: center; justify-items: center; border-radius: 20px 20px 0 0; padding: 6px var(--sai-space-2); }
  .dock:hover, .dock:focus-within { width: auto; }
  .dock a, .dock:hover a, .dock:focus-within a { width: 40px; margin: 0 auto; grid-template-columns: 40px; }
  .dock a span, .dock:hover a span, .dock:focus-within a span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock a span { transition: none; animation: none; } }

/* ---- web additions ---- */
/* The rail's items are real links or buttons that behave like them; a <button> gets the same look as an <a>. */
.dock button { font: inherit; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; align-items: center; height: 40px; width: 40px; margin: 0 auto; padding: 0; border-radius: 12px; color: rgba(233,236,248,0.9); text-align: left; white-space: nowrap; transition: background var(--sai-motion-fast) ease, color var(--sai-motion-fast) ease; }
.dock:hover button, .dock:focus-within button { width: 100%; margin: 0; }
.dock button:hover { background: rgba(255,255,255,0.07); color: #fff; }
.dock button:focus-visible { outline: 2px solid #EDEFF7; outline-offset: -2px; }
.dock button svg { grid-column: 1; width: 19px; height: 19px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock button span { grid-column: 2; opacity: 0; transition: opacity var(--sai-motion-fast) ease 60ms; font-size: var(--sai-text-md); }
.dock:hover button span, .dock:focus-within button span { opacity: 1; }
/* A part of SAI that is not on the web yet: dimmer, with a "Soon" chip; a tap shakes it (the composer's shake-deny). */
.dock .soon { color: rgba(233,236,248,0.55); }
.dock .soon .chip { font-style: normal; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; letter-spacing: 0.02em; background: rgba(255,255,255,0.10); color: rgba(233,236,248,0.75); }
.dock .sep { height: 1px; margin: 4px 8px; background: rgba(255,255,255,0.12); }
/* Room for the rail: the chat never sits under it (the desktop keeps an 84px gutter the same way). */
@media (min-width: 641px) { .sai-chat-page .sai-chat-shell { width: min(880px, calc(100vw - 2 * 84px)); } }
/* Phone: the four places a person moves between on the web; the rest live in Settings. */
@media (max-width: 640px) {
  .dock .soon, .dock .sep, .dock .signout { display: none; }
  .dock button, .dock:hover button, .dock:focus-within button { width: 40px; margin: 0 auto; grid-template-columns: 40px; }
  .dock button span, .dock:hover button span, .dock:focus-within button span { display: none; }
  .sai-chat-page .sai-chat-shell { height: calc(100dvh - 32px - 60px - 4px); }   /* top margin + the tab bar's 60px, no dead band */
}

/* ---- the account button + pull-up menu (Alex 2026-10-03: "your name at the bottom with the pull-up: Settings, Usage...") ----
   One button at the foot of the rail: the person's initial, name and plan. It opens a menu that sits OUTSIDE the rail
   (the rail clips its overflow), anchored to its bottom-left. Usage is shown there as percentages, never raw counts. */
.dock .dock-account { height: 44px; margin-top: 4px; }
.dock .acct-avatar { grid-column: 1; justify-self: center; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; opacity: 1;
  font: 700 13px/1 var(--sai-font-body); color: #0b1020; background: linear-gradient(135deg, #b8cdfc, #d8c3ff); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.dock .acct-text { display: grid; gap: 1px; line-height: 1.15; overflow: hidden; }
.dock .acct-text b { font-weight: 600; font-size: var(--sai-text-sm); overflow: hidden; text-overflow: ellipsis; }
.dock .acct-text small { font-size: 11px; color: rgba(233,236,248,0.6); }
/* a pull-up: it rises from just above the account button, over the rail (sai-chat.js sets `bottom` from the button) */
.account-menu { position: fixed; left: var(--sai-space-4); bottom: 80px; z-index: calc(var(--sai-z-rail) + 1); width: 248px;
  padding: 6px; border-radius: 16px; border: 1px solid var(--sai-line); background: var(--sai-surface); box-shadow: var(--sai-glass-shadow); display: grid; gap: 2px; }
.account-menu[hidden] { display: none; }
.account-menu .am-head { padding: 10px 10px 8px; border-bottom: 1px solid var(--sai-line); margin-bottom: 4px; }
.account-menu .am-head b { display: block; font-size: var(--sai-text-sm); }
.account-menu .am-head small { color: var(--sai-muted); font-size: var(--sai-text-xs); }
.account-menu button, .account-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--sai-text); font: 500 var(--sai-text-sm) var(--sai-font-body); text-decoration: none; text-align: left; cursor: pointer; }
.account-menu button:hover, .account-menu a:hover, .account-menu button:focus-visible, .account-menu a:focus-visible { background: var(--sai-raised); outline: none; }
.account-menu svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.account-menu .am-sep { height: 1px; margin: 4px 6px; background: var(--sai-line); }
.account-menu .am-out { color: var(--sai-bad); }
/* Usage: percentages with bars, today, resetting at midnight UTC */
.usage-rows { display: grid; gap: 16px; margin: 6px 0 4px; }
.usage-row .ur-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: var(--sai-text-sm); }
.usage-row .ur-top b { font: 700 var(--sai-text-md) var(--sai-font-body); }
.usage-bar { height: 8px; border-radius: 999px; background: var(--sai-raised); overflow: hidden; border: 1px solid var(--sai-line); }
.usage-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8fb2ff, #c4a3ff); transition: width 300ms var(--sai-ease); }
.usage-fill.is-high { background: linear-gradient(90deg, #ffb35c, #ff7a7a); }
@media (max-width: 640px) {
  .dock .dock-account { height: 40px; margin: 0 auto; }
  .dock .acct-text { display: none; }
  .dock .dock-account .acct-avatar, .dock:hover .dock-account .acct-avatar, .dock:focus-within .dock-account .acct-avatar { display: grid; }   /* the rail hides every other label on a phone */
  .account-menu { left: 12px; right: 12px; width: auto; bottom: 72px; }
}