/* The navigation drawer: the chat list at the start of the page, M3's drawer laid out the way Gemini's is.
 * On a wide screen it folds down to an 80px rail of icons and back (nav-rail on <html>, nav.js); below 820px it is a
 * modal drawer over the page instead (shell.js). The values are M3's: items inset 12px with pill-shaped
 * indicators, 24px icons, label-large labels, title-small headlines. */

.side {
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:var(--md-surface-container); border-inline-end:1px solid var(--ua-line);
}
.side-head { flex:0 0 auto; display:flex; align-items:center; height:64px; padding-inline:16px; }
.navbtn { width:48px; height:48px; font-size:24px; }

.side-top { flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding:0 12px 8px; }
.newchat {
  display:flex; align-items:center; gap:12px; width:100%; height:56px; padding-inline:16px 24px; cursor:pointer;
  border:0; border-radius:var(--md-shape-full); background:transparent; color:var(--md-on-surface-variant);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track); text-align:start; white-space:nowrap;
}
.newchat .ic { font-size:24px; }
.newchat kbd { margin-inline-start:auto; font:var(--md-label-medium); letter-spacing:var(--md-label-medium-track); }
.newchat:hover { background-image:var(--md-hover-layer); }
.newchat:active { background-image:var(--md-press-layer); }
.railfind { display:none; width:48px; height:48px; font-size:24px; }

/* M3's search field, as a pill */
.side-find {
  flex:0 0 auto; display:flex; align-items:center; gap:12px; height:40px; margin:0 12px 8px; padding-inline:16px;
  border-radius:var(--md-shape-full); background:var(--md-surface-container-high); color:var(--md-on-surface-variant);
}
.side-find:focus-within { outline:2px solid var(--md-primary); outline-offset:-2px; }
.side-find .ic { font-size:20px; }
.side-find input {
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  color:var(--md-on-surface); font:var(--md-body-medium);
}
.side-find input::-webkit-search-cancel-button { -webkit-appearance:none; }

.chats {
  flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; padding:0 12px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.chat-group { display:flex; flex-direction:column; }
.chat-group > .lbl { padding:12px 16px 8px; font:var(--md-title-small); color:var(--md-on-surface-variant); }
/* 40px rows, not M3's 56: a chat list wants Gemini's density. The chat on screen gets the pill indicator. */
.chat {
  display:flex; align-items:center; gap:4px; height:40px; padding-inline:16px 4px;
  border-radius:var(--md-shape-full); color:var(--md-on-surface-variant);
}
.chat:hover { background-image:var(--md-hover-layer); }
/* the same pale green as a question, so the chat on screen and its questions read as one thing */
.chat.on { background-color:var(--ua-tint); color:var(--md-on-surface); }
/* The ring goes round the whole row, inside it, rather than round the name alone. */
.chat:has(.open:focus-visible) { outline:3px solid var(--md-secondary); outline-offset:-3px; }
@supports selector(:has(a)) { .chat .open:focus-visible { outline:none; } }   /* else the name keeps its own ring */
.chat .open {
  /* positioned so that it, not the row, holds the screen-reader "(answering)" note: its overflow then clips the
   * note, which otherwise sat past the end of a long name and gave the list a sideways scrollbar */
  position:relative;
  flex:1 1 0%; min-width:0; height:100%; border:0; background:transparent; cursor:pointer; padding:0;
  color:inherit; font:var(--md-body-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* A name is set in its own direction (dir=auto), so a long one is always cut at its own end, but a short one lines
   * up with the list rather than with itself: an Arabic name in the English list starts at the left like the rest.
   * match-parent resolves start against the list's direction; Chrome and Safari take only the prefixed form. */
  text-align:-webkit-match-parent;
  text-align:match-parent;
}
.chat.on .open { font-weight:700; }
.chat .x { width:32px; height:32px; font-size:16px; color:inherit; visibility:hidden; }
/* visibility, not opacity, so a tap on a touch screen can't hit a × nobody can see; it shows once the row has
 * focus, so Tab can reach it from the chat's name */
.chat.on .x, .chat:focus-within .x { visibility:visible; }
/* only where there is real hover: a touch screen keeps :hover on the last row touched (tokens.css) */
@media (hover: hover) {
  .chat:hover .x { visibility:visible; }
  .chat .x:hover { color:var(--md-error); }
}
/* a chat whose answer is still streaming, possibly while another chat is on screen */
.chat .answering {
  flex:0 0 auto; width:8px; height:8px; margin-inline-end:4px; border-radius:50%;
  background:var(--md-primary); animation:pulse 1.2s ease-in-out infinite;
}
.chats .empty { padding:8px 16px; font:var(--md-body-medium); color:var(--md-on-surface-variant); }

.side-foot { flex:0 0 auto; margin-block-start:auto; display:flex; flex-direction:column; gap:4px; padding:8px 12px 12px; }
.scopebtn {
  display:flex; align-items:center; gap:12px; width:100%; height:48px; padding-inline:16px; cursor:pointer;
  border:0; border-radius:var(--md-shape-full); background:transparent; color:var(--md-on-surface-variant);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track); text-align:start; white-space:nowrap;
}
.scopebtn .ic { font-size:24px; }
.scopebtn:hover { background-image:var(--md-hover-layer); }
.side-foot-row { display:flex; align-items:center; gap:8px; padding-inline:16px 0; }
/* M3's outlined button */
.langbtn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:40px; padding-inline:12px 16px; cursor:pointer;
  border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-full); background:transparent;
  color:var(--md-primary); font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.langbtn .ic { font-size:18px; }
.langbtn:hover { background-image:var(--md-hover-layer); }

/* ---------- wide: the drawer folds down to a rail ---------- */
@media (min-width: 821px) {
  /* While the drawer opens, what is in it keeps its full width and is uncovered as the edge moves, rather than
   * squeezed into whatever width the animation has reached. */
  :root:not(.nav-rail) :is(.side-head, .side-top, .chats, .side-foot) { min-width:287px; }   /* 288 less the 1px edge */
  :root:not(.nav-rail) .side-find { min-width:263px; }

  /* The rail's buttons line up at the start rather than the centre, so while the drawer folds they stay where
   * they are and the edge closes in on them. Each icon sits on the same line it had in the open drawer. */
  .nav-rail .app { --nav-width:80px; }
  .nav-rail .app .side-top { align-items:flex-start; padding-inline:16px; }
  .nav-rail .app .side-find, .nav-rail .app .chats, .nav-rail .app .newchat kbd { display:none; }
  .nav-rail .app .railfind { display:grid; }
  /* a label the rail has no room for is hidden from sight only, so the button keeps its name */
  .nav-rail .app .nav-label {
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  /* New chat is the one filled button on the rail: M3's tonal icon button */
  .nav-rail .app .newchat {
    justify-content:center; width:48px; height:48px; padding:0;
    background-color:var(--md-secondary-container); color:var(--md-on-secondary-container);
  }
  .nav-rail .app .side-foot { align-items:flex-start; padding-inline:16px; }
  /* the language button stays the same pill as in the open drawer, centred: it is wider than the rail's icons */
  .nav-rail .app .side-foot-row { align-self:center; padding:0; }
  .nav-rail .app .langbtn { gap:4px; padding-inline:10px; }   /* tighter, so EN clears the rail's edges too */
  .nav-rail .app .scopebtn {
    justify-content:center; width:48px; height:48px; padding:0; color:var(--md-on-surface-variant);
  }
}

/* ---------- narrow: a modal drawer over the page ---------- */
.veil {
  position:fixed; inset:0; z-index:20; border:0; padding:0;
  background:color-mix(in srgb, var(--md-scrim-tone) 40%, transparent);
  animation:ig-veil var(--md-dur-medium2) var(--md-ease-standard) both;
}
.veil[hidden] { display:none; }

@media (max-width: 820px) {
  /* Out of sight when closed, so Tab never walks into a drawer nobody can see. It slides in decelerating and out
   * accelerating, which is how M3 moves things that enter and leave. */
  .side {
    position:fixed; inset-block:0; inset-inline-start:0; z-index:21; width:min(340px, 86vw);
    background:var(--md-surface-container-low); box-shadow:var(--md-elev-1);
    border-start-end-radius:var(--md-shape-lg); border-end-end-radius:var(--md-shape-lg);
    transform:translateX(-100%); visibility:hidden;
    transition:transform var(--md-dur-short4) var(--md-ease-emph-accel), visibility 0s linear var(--md-dur-short4);
  }
  [dir="rtl"] .side { transform:translateX(100%); }
  .app.drawer-open .side {
    transform:none; visibility:visible;
    transition:transform var(--md-dur-medium4) var(--md-ease-emph-decel), visibility 0s;
  }
  /* its menu button sits exactly where the top bar's opened it, so the same tap closes it again (as do the scrim,
   * Escape and choosing a chat) */
  .side-head { padding-inline:4px; }
  .side .langbtn { display:none; }   /* on the top bar instead, reachable without opening the drawer */
}

/* ---------- touch screens ----------
 * Rows and the × get M3's 48px and 40px targets, the keyboard shortcut goes, and the search box is set at 16px:
 * iPhone Safari zooms the whole page into a field set smaller than that as soon as it is tapped, and stays zoomed. */
@media (hover: none) and (pointer: coarse) {
  .chat { height:48px; }
  .chat .x { width:40px; height:40px; }
  .newchat kbd { display:none; }
  .side-find input { font-size:16px; }
}