/* Responsive layout: every width below the full desktop, in one place.

   static/style.css and the component sheets lay the app out for a laptop. This sheet, linked LAST on
   every page (base.html, _auth_head.html, legal_base.html), is where a narrower screen changes that.
   Four widths, matching the shell pivot the rail already uses (900px, static/js/base.js):

     phone            <= 600px   rail is a drawer, one-column mail rows, full-screen chat and sheets
     hand-held        <= 900px   rail is a drawer (tablet portrait, big phones landscape)
     compact desktop  901-1199px rail is visible but the header is tight (tablet landscape, small laptop)
     desktop          >= 1200px  what style.css was written for; nothing here applies

   plus `(hover: none)` for touch, whatever the width. Rules are grouped by component, widest first,
   and each says what it is for. `!important` appears only where the rule it overrides already uses
   it (the header row, the chat panel, the compose drawer) - never add one to win an ordinary fight,
   raise the specificity instead. Sheets linked from a page BODY (email_detail_content.html) load after
   this one, so overrides of those use an id (#agentraChatPanel, #composeDrawer, #agentraChatBtn).

   Verify a change with `uv run python scripts/layout_probe.py --render --measure` (headless Chrome,
   no login): it lists every element that pokes past a 390px viewport, page by page.
   tests/test_responsive.py pins the link on every page and the shell rules below. */

:root {
  /* The fixed header's height; base.js's forceHeaderFixed reads it, main's top padding is built on it. */
  --app-header-h: 70px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* iOS Safari inflates text when a phone turns to landscape unless told not to. */
  -webkit-text-size-adjust: 100%;
}

/* ============================================================ the shell, at every width
   `main.inbox` is a flex child of `.gmail-layout` and a flex child's minimum width is its content's:
   one row of nowrap buttons (the email page toolbar, a mail row) was making the WHOLE column wider
   than a phone, so every page was cut off on the right. Let it shrink; what is inside must then fit,
   and the rules below make it. `100dvh` is the visible height on iOS Safari (100vh counts the space
   under its toolbar); a browser that does not know dvh keeps style.css's 100vh. */
main.inbox {
  min-width: 0;
  overflow-x: hidden;
  height: 100dvh;
}

.sidebar {
  height: 100dvh;
  max-height: 100dvh;
}

body.sidebar-open {
  height: 100dvh;
}

.hamburger-container {
  min-width: 0;
}

.hamburger-container .header-search {
  min-width: 0;
}

.hamburger-container .header-left {
  min-width: 0;
}

.hamburger-container .header-right {
  flex: 0 0 auto;
}

/* The mail page's AI actions collapse behind one button below 901px; on a laptop the row itself is
   the control and this button does not exist (base.html renders it, base.js opens it). */
.header-actions-toggle {
  display: none;
}

/* Tap targets do not need the grey flash the mobile browsers paint on every press. */
button,
a,
.tab,
.icon-btn,
.email-row {
  -webkit-tap-highlight-color: transparent;
}

/* A row chip wider than its 160px cap was sliced mid-letter at EVERY width, laptop included:
   `text-overflow: ellipsis` does nothing on an inline-FLEX box, so there was no ellipsis to fall
   back on and a long category name read as a fragment - or, cut short enough, as a stray glyph.
   inline-block is all the ellipsis needs; the chips' own metrics are unchanged. */
.row-category-chip,
.row-detect-chip,
.row-label-badge {
  display: inline-block;
}

/* Wide tables (the Plans matrix - `.usage-table` is its class - and the label settings) scroll
   inside their wrap rather than the page. */
.usage-table-wrap,
.label-settings-table-wrap {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ============================================================ compact desktop: 901-1199px
   The rail is on screen (260px) so the header has 640-940px for a search box, three labelled
   buttons and the avatar - or, on the email page, seven action buttons. Labels go, icons stay. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hamburger-container {
    padding: 0 16px;
    gap: 8px;
  }

  .hamburger-container .header-search {
    flex: 1 1 160px;
    max-width: 560px;
    margin: 0 4px 0 0;
  }

  .hamburger-container .launch-agent-btn {
    padding: 8px 10px;
    margin-right: 0;
  }

  .hamburger-container .launch-agent-text {
    display: none;
  }

  .hamburger-container .header-left {
    flex: 0 1 auto;
    overflow: visible;
  }

  .hamburger-container .header-left .summarize-btn .text,
  .hamburger-container .header-left .btn-generate .text,
  .hamburger-container .header-left .btn-notes .text,
  .hamburger-container .header-left .btn-calendar .text,
  .hamburger-container .header-left .btn-notify .text,
  .hamburger-container .header-left .btn-include-doc-head .text {
    display: none;
  }

  .hamburger-container .header-left .summarize-btn,
  .hamburger-container .header-left .btn-generate,
  .hamburger-container .header-left .btn-notes,
  .hamburger-container .header-left .btn-calendar,
  .hamburger-container .header-left .btn-notify,
  .hamburger-container .header-left .btn-include-doc-head {
    padding: 8px 10px !important;
  }

  /* Tablet-landscape rows: the sender column and the attachment chips leave the subject room. */
  .row-from {
    width: 150px;
  }

  .row-attach-list {
    max-width: 240px;
  }
}

/* ============================================================ hand-held: <= 900px
   The rail is a drawer (style.css) and the header is one row: menu, search, a few icon buttons,
   avatar. Nothing in it may push the avatar off screen, so the search shrinks first and the email
   page's action strip scrolls sideways under the finger. */
@media (max-width: 900px) {
  .hamburger-container {
    height: var(--app-header-h);
    padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
    gap: 8px;
  }

  .hamburger-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
  }

  .header-logo {
    width: 26px;
    height: 26px;
  }

  .hamburger-container .header-search {
    flex: 1 1 120px;
    max-width: none;
    margin: 0;
    padding: 4px 12px;
  }

  .search-input {
    min-width: 0;
    line-height: 30px;
  }

  .hamburger-container .launch-agent-btn {
    flex: 0 0 auto;
    width: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 10px;
  }

  .hamburger-container .launch-agent-text {
    display: none;
  }

  .hamburger-container .daily-report-wrap {
    flex: 0 0 auto;
  }

  /* The mail page's AI actions - Summarize, Generate Response, Add to Notes, Book Schedule, Notify,
     Follow up, Include in Doc. Spelled out they need about 700px; as seven unlabelled squares they
     squeezed the search box to nothing and read as a jumble of near-identical icons. Below 901px
     they collapse behind one button and open as a menu that says what each one does - the labels
     are the `.text` spans the laptop row already carries, so nothing new is written per action. */
  .header-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
  }

  .header-actions-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* The word, not just a sparkle: the mail page has no header search, so there is room for it and
     a lone glyph gives no clue what it opens. It is the first thing to go if the row gets tight. */
  .header-actions-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }

  .header-actions-caret {
    font-size: 10px;
    line-height: 1;
    opacity: 0.7;
  }

  .header-actions-toggle[aria-expanded="true"] {
    background: var(--tab-bg-subtle);
    border-color: var(--blue);
    color: var(--blue);
  }

  /* The strip becomes the menu. `.hamburger-container` is position:fixed, so it is the containing
     block this anchors to. */
  .hamburger-container .header-left {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    right: max(10px, var(--safe-right));
    left: auto;
    z-index: 4200;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 212px;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - var(--app-header-h) - 24px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.32);
  }

  .hamburger-container .header-left.is-open {
    display: flex;
  }

  /* Each action is a full-width row: icon, then what it does. */
  .hamburger-container .header-left .summarize-btn,
  .hamburger-container .header-left .btn-generate,
  .hamburger-container .header-left .btn-notes,
  .hamburger-container .header-left .btn-calendar,
  .hamburger-container .header-left .btn-notify,
  .hamburger-container .header-left .btn-include-doc-head {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px !important;
    width: 100%;
    min-height: 40px;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-align: left;
    white-space: nowrap;
    box-shadow: none !important;
  }

  /* style.css hides these labels below 901px, and parks Generate Response's as a hover tooltip
     (`position: absolute; bottom: -38px; background: #111`). In the menu the label IS the row, so
     they come back inline. Every button is named because the rule being overridden names them too
     - a shorter selector loses the tie however late it is in the cascade. */
  .hamburger-container .header-left .summarize-btn .text,
  .hamburger-container .header-left .btn-generate .text,
  .hamburger-container .header-left .btn-notes .text,
  .hamburger-container .header-left .btn-calendar .text,
  .hamburger-container .header-left .btn-notify .text,
  .hamburger-container .header-left .btn-include-doc-head .text {
    display: inline !important;
    position: static !important;
    opacity: 1 !important;
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: 14px !important;
    white-space: nowrap;
    pointer-events: auto !important;
  }

  /* The icons keep their size in the menu; without this they inherit the 20px the collapsed
     header buttons used and tower over their own labels. */
  .hamburger-container .header-left .icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 15px;
  }

  .hamburger-container .header-left .icon .action-icon {
    width: 17px;
    height: 17px;
  }

  /* Generate Response and its "in my own words" caret stay one control, one row wide. */
  .hamburger-container .header-left .gen-prompt-wrap {
    display: flex;
    width: 100%;
  }

  .hamburger-container .header-left .btn-generate {
    flex: 1 1 auto;
  }

  .hamburger-container .header-left .btn-generate-more {
    flex: 0 0 auto;
  }

  .hamburger-container .header-right {
    margin-left: auto;
  }

  main.inbox {
    padding: calc(var(--app-header-h) + 12px) 12px 16px 12px;
  }

  .sidebar {
    width: min(260px, 85vw);
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  /* --- mail rows. The one-line desktop row (sender | subject + chips + snippet | date) needs a
     wide window: below one, the chips are what runs off the end, and because `.row-content` clips
     with `overflow: hidden` for its ellipsis, a chip does not disappear - it is sliced down the
     middle, or down to a sliver that reads as an icon. So on anything hand-held the row stacks
     instead: sender and date, then the subject, then the chips, then the snippet, then the
     attachments. `.row-meta` dissolves (`display: contents`) so its date and attachment list
     become items of the row itself and can take different lines. */
  .email-row {
    align-items: flex-start;
  }

  .row-checkbox {
    width: 32px;
    padding: 12px 2px 0 8px;
  }

  .row-star-left {
    margin: 9px 4px 0 0;
  }

  .email-row-link {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 1px;
    padding: 8px 10px 9px 0;
  }

  .row-from {
    order: 1;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 8px;
    font-size: 14px;
  }

  .row-meta {
    display: contents;
  }

  .row-date,
  .email-row:hover .row-date {
    display: inline;
    order: 2;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
    font-size: 12px;
  }

  /* A flex row that wraps, so each chip is a flex item on a line of its own rather than an inline
     box in a text line whose height it exceeds - that, plus the clipping above, is what cut them
     in half. Nothing here clips. */
  .row-content {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 100%;
    width: 100%;
    row-gap: 3px;
    column-gap: 6px;
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
  }

  .row-subject,
  .row-snippet {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row-subject {
    font-size: 14px;
  }

  .row-snippet {
    font-size: 13px;
  }

  .row-snippet-sep {
    display: none;
  }

  /* A chip past its 160px cap was sliced mid-letter with no ellipsis, because `text-overflow` does
     nothing on an inline-FLEX box - there was no ellipsis to fall back on. inline-block gives it
     something to work on. The fill is stronger than the laptop's too: at 12% alpha on a small
     screen the pill read as no pill at all. The margins came from the one-line row, where a chip
     trailed the subject; on a line of their own the flex gap spaces them. */
  .row-category-chip,
  .row-detect-chip,
  .row-label-badge {
    display: inline-block;
    max-width: 100%;
    line-height: 19px;
  }

  .row-category-chip,
  .row-detect-chip,
  .row-label-badges,
  .row-label-badge {
    margin: 0;
    max-width: 100%;
  }

  .row-category-chip {
    border-color: rgba(100, 116, 139, 0.5);
    background: rgba(100, 116, 139, 0.2);
  }

  html[data-theme='dark'] .row-category-chip {
    border-color: rgba(148, 163, 184, 0.55);
    background: rgba(148, 163, 184, 0.3);
    color: #f1f5f9;
  }

  .row-label-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  /* The attachments have a line to themselves here, so the file names stay - a row of bare "PDF" /
     "PNG" badges says an attachment exists but never which one. */
  .row-attach-list {
    order: 4;
    flex: 0 0 100%;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
    margin-top: 4px;
  }

  .row-attach-chip {
    flex: 0 0 auto;
    max-width: 165px;
  }

  /* Six actions revealed by a hover the row cannot receive, hiding the date while they are there.
     The tick box and the selection bar do the same jobs, and opening the mail does the rest. */
  .row-quick-actions {
    display: none !important;
  }

  /* --- the mail toolbar. style.css hides Print, Spam, Trash, Block and Move To below 1200px,
     which left three buttons on the row and put the two actions people reach for most behind a
     menu. Spam and Trash come back; their twins in the three-dot menu go, so nothing is offered
     twice (the twins are named `overflow-spam` / `overflow-trash` in email_detail_content.html).
     Every button is the same square so the row reads as one group, the prev/next/more group is
     flush right, and the actions scroll rather than push it off the screen.
     `.email-detail-page` is in each selector because the rules being overridden carry it - a
     shorter selector loses the tie however late it is in the cascade. */
  .email-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .email-detail-page .email-toolbar .toolbar-actions {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .email-detail-page .email-toolbar .toolbar-actions::-webkit-scrollbar {
    display: none;
  }

  .email-detail-page .email-toolbar .icon-btn.btn-spam,
  .email-detail-page .email-toolbar .icon-btn.btn-trash {
    display: inline-flex !important;
  }

  .email-detail-page .toolbar-more-item.overflow-spam,
  .email-detail-page .toolbar-more-item.overflow-trash {
    display: none !important;
  }

  .email-detail-page .email-toolbar .toolbar-actions .icon-btn,
  .email-detail-page .email-toolbar .toolbar-more-wrap .icon-btn {
    flex: 0 0 auto;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 16px !important;
  }

  .email-detail-page .email-toolbar .toolbar-more-wrap {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: 6px;
  }

  /* An open mail inside a conversation keeps the thread's column (style.css
     `.email-body-container.in-thread`). style.css pads and spaces the reading card with
     !important below 901px (16px, then 12px under 481px), so the thread's shape repeats both. */
  .email-detail-page .email-body-container.in-thread {
    padding: 0 !important;
    margin: 0 8px 16px 52px !important;
  }

  /* The chat button on a mail: bottom-right, off the reply box (there is no gutter beside the rail
     to keep it in). Chat's own script writes `left` inline, hence the !important. */
  #agentraChatBtn {
    left: auto !important;
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
    width: 50px;
    height: 50px;
  }

  #agentraChatBtn::after {
    display: none;
  }

  /* Popovers anchored to the header stay inside the screen. */
  .advanced-search-panel {
    max-width: calc(100vw - 24px);
  }

  .toolbar-more-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
  }

  .agent-detail-footer {
    padding: 10px 16px;
  }

  /* The admin surface: four KPI tiles across becomes two, then one, and every panel grid
     becomes a single column. The tables stay tables and scroll inside their panel rather than
     widening the page - `main.inbox` is a flex child and a flex child's minimum width is its
     content's, which is what used to push every page off a phone screen. */
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid-2,
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-panel { padding: 14px; }
  .admin-controls .admin-stamp { margin-left: 0; width: 100%; }
  .admin-panel .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 520px; }
}

/* ============================================================ phone: <= 600px */
@media (max-width: 600px) {
  :root {
    --app-header-h: 56px;
  }

  /* --- iOS zooms the page when a focused field's text is smaller than 16px. Keep it at 16px. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea,
  .search-input,
  .ac-input,
  [contenteditable="true"] {
    font-size: 16px;
  }

  /* ... including the two that set their own size with a class, which outranks the element
     selectors above: the automation picker's blanks (a select inherits the sentence's size) and
     the review queue's draft box (13px) both zoomed the page on focus. */
  .automation-slot,
  .review-draft-body {
    font-size: 16px;
  }

  /* --- header */
  .hamburger-container {
    gap: 6px;
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
    box-shadow: 0 1px 0 var(--border);
  }

  .hamburger-btn {
    width: 38px;
    height: 38px;
  }

  .header-logo {
    width: 24px;
    height: 24px;
  }

  .hamburger-container .header-search {
    padding: 3px 10px;
    border-radius: 20px;
  }

  .hamburger-container .header-search .search-icon {
    margin-right: 6px;
  }

  .hamburger-container .launch-agent-btn {
    width: 38px;
    min-height: 38px;
  }

  .profile-avatar-btn {
    width: 34px;
    height: 34px;
  }

  /* The actions menu (opened by #headerActionsToggle above) spans the screen's width here rather
     than hanging off the button, so a long label never wraps against the edge. */
  .hamburger-container .header-left {
    right: 8px;
    left: 8px;
    min-width: 0;
    max-width: none;
  }

  .header-actions-toggle {
    min-width: 38px;
    height: 38px;
    gap: 5px;
  }

  main.inbox {
    padding: calc(var(--app-header-h) + 8px) 8px calc(16px + var(--safe-bottom)) 8px;
  }

  .gmail-inbox {
    border-radius: 0;
  }

  /* --- inbox toolbar: one row, filters left and paging right. The filter strip scrolls sideways
     before anything wraps, and the range text goes before the arrows do (the 400px rule). */
  .inbox-toolbar {
    flex-wrap: nowrap;
    gap: 4px 8px;
    padding: 4px 6px 4px 2px;
  }

  .inbox-toolbar-left {
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
  }

  .filter-toggle {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-toggle::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 12px;
    gap: 4px;
  }

  .inbox-toolbar-right {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .gmail-pagination .pagination-range {
    font-size: 12px;
    margin-right: 2px;
  }

  .gmail-pagination .pagination-arrow {
    width: 32px;
    height: 32px;
  }

  .bulk-toolbar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 10px;
  }

  /* style.css pins every `.toolbar-actions` to one row below 800px with !important - meant for
     the mail page's toolbar, but the selection bar shares the class, and its six buttons are
     wider than a phone. */
  .bulk-toolbar .toolbar-actions {
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* --- mail rows: the stacked layout is set for everything hand-held (above); a phone only tightens
     it, and caps a chip so one long category cannot take the whole line to itself. */
  .row-attach-chip {
    max-width: 150px;
  }

  .row-category-chip,
  .row-detect-chip,
  .row-label-badge {
    max-width: 68vw;
  }

  /* --- the strips above the list */
  .followups-strip {
    flex-wrap: wrap;
    padding: 6px 8px 6px 10px;
    gap: 6px 10px;
  }

  .plan-notice {
    padding: 10px 12px;
  }

  /* --- header popovers: the search builder and the daily report become full-width sheets. */
  .advanced-search-panel {
    position: fixed;
    top: calc(var(--app-header-h) + 6px);
    left: 8px;
    right: 8px;
    margin-top: 0;
    max-width: none;
    max-height: calc(100dvh - var(--app-header-h) - 20px);
    overflow-y: auto;
    padding: 12px;
  }

  .advanced-search-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }

  .advanced-search-checks {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .daily-report-panel {
    bottom: calc(12px + var(--safe-bottom));
  }

  /* --- Launch Agent: a full-screen sheet whose tab strip wraps instead of running off the edge. */
  .agent-modal {
    height: 100dvh;
    max-height: 100dvh;
  }

  .agent-modal-header {
    padding: 12px 16px;
  }

  .agent-toggle-group {
    flex-wrap: wrap;
    width: 100%;
    gap: 2px;
  }

  .agent-toggle {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px;
  }

  .agent-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--safe-bottom));
  }

  /* --- email page: the sender block wraps and the attachments pill takes its own line; the menu
     under "more" opens against the right edge; the chat button sits bottom-right, off the cards. */
  .email-meta-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .email-meta-details {
    flex: 1 1 160px;
    min-width: 0;
  }

  .email-from-address {
    overflow-wrap: anywhere;
  }

  .email-attachments-indicator {
    order: 3;
    flex: 0 0 100%;
    justify-content: center;
  }

  .email-toolbar {
    padding: 6px 0 10px 0;
  }

  /* --- a conversation on a phone: every message's body runs the width of the screen, under its
     avatar rather than beside it (52px of a 390px screen is too much to give up), and the open one
     does the same so the thread stays on one line. The margin answers the hand-held rule above. */
  .email-detail-page .thread-card-body {
    padding-left: 8px;
  }

  .email-detail-page .email-body-container.in-thread {
    margin: 0 8px 16px 8px !important;
  }

  .email-detail-page .email-body-container.in-thread ~ #email-attachments,
  .email-detail-page .email-body-container.in-thread ~ #email-attachments-loading,
  .email-detail-page .email-body-container.in-thread ~ #email-attachment-note {
    padding-left: 8px;
  }

  /* --- Cusentra Chat: the trigger is an icon (the header's on the inbox, the round button on a
     mail) and the panel is the whole screen, above the app header (base.js pins that at z-index
     99999) so its own header with the close button is what shows. Chat's own sheet sets
     width/height/left/bottom with !important, so these do too, from an id. */
  #agentraChatPanel,
  #agentraChatPanel.expanded {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 100000;
    border-radius: 0;
    transform: translateY(12px);
  }

  #agentraChatPanel.open {
    transform: none;
  }

  #agentraChatPanel .ac-header {
    cursor: default;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }

  #agentraChatPanel .ac-input-area {
    padding-bottom: calc(10px + var(--safe-bottom));
  }

  /* --- Compose: a bottom sheet the full width of the screen. */
  #composeDrawer,
  #composeDrawer.is-expanded {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    max-height: calc(100dvh - 48px);
    border-radius: 12px 12px 0 0;
  }

  #composeDrawer .compose-foot {
    gap: 6px 8px;
    padding: 8px 10px calc(8px + var(--safe-bottom));
  }

  #composeDrawer .compose-tools {
    flex-wrap: wrap;
  }

  /* --- follow-ups, the away panel, nudges: full-width sheets with room for the home bar. */
  .followups-panel {
    padding-bottom: var(--safe-bottom);
  }

  .nudge-modal,
  .followup-popover {
    max-height: calc(100dvh - 24px);
  }

  .nudge-actions {
    flex-wrap: wrap;
  }

  /* The settings DIALOG exists only where there is room for one. Below the pivot the panel
     stops being a box at all - `display: contents` takes the wrapper out of the layout, so
     the rail and the content are laid out by the rules above exactly as they were before the
     dialog existed: the rail off-canvas behind the hamburger, the content full width.

     That also keeps the app header on a phone, which matters more than the shape: the header
     is where the hamburger lives, and the hamburger is the only way to the rail at this width.
     The close control is hidden with it - "Back to inbox" is the first item in the rail. */
  .settings-dialog {
    display: contents;
  }

  .settings-dialog-close {
    display: none;
  }

  /* --- the settings area (Settings, Connections, Plans, Usage, Profile, Review, Shortcuts) */
  .settings-shell {
    font-size: 14px;
  }

  .settings-header {
    margin: 0 0 14px;
  }

  .settings-card {
    padding: 14px 12px;
    margin-bottom: 12px;
  }

  .settings-tabs {
    margin: 0 -8px 16px;
    padding: 0 8px 2px;
  }

  /* The Privacy tab: its picker drops under its words and takes the row (the provider chips wrap
     there by themselves); a switch stays beside its words at every width. */
  #settings-root .set-row .set-row-select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .usage-table th,
  .usage-table td {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* --- admin */
  .admin-user-card {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-user-actions {
    justify-content: flex-start;
  }

  /* --- modals that name a fixed width */
  .meeting-popup {
    right: 12px;
    left: 12px;
    width: auto;
  }

  .label-settings-modal {
    width: calc(100vw - 16px);
  }

  .agent-toast-container {
    left: 12px;
    right: 12px;
    max-width: none;
  }

  /* The admin KPI strip: two tiles no longer fit a phone's width once the value itself is more
     than a couple of digits (the AI-cost and revenue tiles run to "$1,234.56"), so it drops to
     one column and the number shrinks a touch to match the rest of the phone type scale. */
  .admin-kpis { grid-template-columns: 1fr; }
  .admin-kpi-value { font-size: 22px; }
}

/* ============================================================ very small phones: <= 400px
   iPhone SE / mini and 360px Androids: the paging range text is the first thing to go. */
@media (max-width: 400px) {
  .gmail-pagination .pagination-range {
    display: none;
  }

  .filter-btn {
    padding: 6px 7px;
  }

  /* "Categories" keeps its grid icon and its title; the word was the widest thing in the row. */
  #categoriesToggleBtn .filter-label {
    display: none;
  }

  .hamburger-container {
    gap: 4px;
  }
}

/* ============================================================ touch, at any width
   A finger cannot hover. The per-row actions that appear on hover are never reachable, so they
   stay hidden and the date stays put; the tooltips that follow the pointer are noise. */
@media (hover: none) {
  .row-quick-actions {
    display: none !important;
  }

  .email-row:hover .row-date {
    display: inline;
  }

  /* The tooltip that follows a pointer is noise on a touch screen. The header actions' own labels
     are NOT tooltips below 901px - they are the menu's rows - so they are not touched here. */
  .agentra-chat-btn::after {
    display: none !important;
  }

  .email-row:hover {
    box-shadow: none;
  }
}

/* ============================================================ landscape phones
   Under 480px of height the fixed header and a full-screen sheet leave little room: shrink both. */
@media (max-height: 480px) and (max-width: 900px) {
  :root {
    --app-header-h: 52px;
  }

  #agentraChatPanel .ac-header {
    padding: 6px 12px;
  }
}


/* ============================================================ the first run (<= 600px)
   The welcome is the first thing a new account sees, and on a phone it IS the page. Three theme
   tiles side by side need ~440px of row before they stop shrinking, which made the card wider
   than the screen and cut the right-hand one off - so they stack, and the buttons go full width
   in reading order (the primary one last, nearest the thumb). Six labelled steps do not fit
   across 390px either, so the rail keeps its bars and drops its words, and "Step 3 of 6 -
   Integrations" says it in one line instead. The pictures keep their shape on a smaller scale.
   Fields are 16px so iOS does not zoom the page when one is tapped. static/css/onboarding.css has
   the rest. */
@media (max-width: 600px) {
  .onb-overlay { padding: 12px; }

  .onb-modal {
    padding: 18px 16px 16px;
    max-height: 94vh;
  }

  .onb-top { flex-wrap: wrap; row-gap: 8px; margin-bottom: 14px; }
  .onb-rail { flex-basis: 100%; }
  .onb-rail-item { padding-top: 0; gap: 0; }
  .onb-rail-num,
  .onb-rail-label { display: none; }
  .onb-progress {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }

  .onb-title { margin-bottom: 14px; font-size: 20px; }
  .onb-title-lg { font-size: 22px; }
  .onb-title + .onb-lede { margin-top: -8px; }

  /* One per row: three across cannot fit, and a squashed preview shows nothing useful. Short
     enough that all three and Continue sit on one phone screen. */
  .onb-themes { gap: 12px; }
  .onb-theme { flex: 1 1 100%; gap: 8px; padding: 8px 8px 10px; }
  .onb-theme-art { height: 76px; }
  .onb-art-body { padding: 10px; gap: 6px; }
  .onb-art-bar { height: 6px; }
  .onb-theme.is-chosen::after { top: 14px; right: 14px; }

  /* The pictures: the same drawings, smaller, on a narrower bridge. */
  .onb-art { margin-bottom: 16px; padding: 20px 12px 18px; }
  .onb-flow { flex-basis: 40px; }
  .onb-flow::before { left: 4px; right: 4px; }
  .onb-flow-spark { width: 30px; height: 30px; font-size: 14px; box-shadow: 0 0 0 4px var(--onb-soft); }
  .onb-mail { gap: 7px; padding: 10px 11px 12px; }
  .onb-mail-sent {
    box-shadow:
      4px -4px 0 -1px var(--card), 4px -4px 0 0 var(--border),
      8px -8px 0 -1px var(--card), 8px -8px 0 0 var(--border);
    margin-top: 8px;
  }
  .onb-mail-line { height: 6px; }
  .onb-art-tag { padding: 2px 7px; font-size: 9.5px; }
  .onb-art-btns { gap: 6px; }
  .onb-art-btn { gap: 6px; padding: 6px 9px; font-size: 11px; }
  .onb-art-btn svg { width: 14px; height: 14px; }
  .onb-inbox-row { gap: 10px; padding: 10px 12px; }
  .onb-page { width: 140px; margin-right: 34px; padding: 13px 13px 16px; gap: 8px; }
  .onb-art-time { right: -50px; bottom: -14px; padding: 6px 11px 6px 9px; font-size: 13px; }
  .onb-art-done { min-height: 120px; }

  .onb-chips { gap: 8px; }
  .onb-chip { padding: 7px 13px 7px 11px; }

  .onb-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onb-sum-value { font-size: 18px; }

  .onb-input { font-size: 16px; }
  .onb-app-head { gap: 12px; padding: 10px 12px 10px 10px; }
  .onb-app-ico { width: 32px; height: 32px; }
  .onb-app-body { padding: 2px 12px 12px; }
  .onb-add { padding: 12px; }
  .onb-howto { overflow-wrap: anywhere; }

  /* Column-REVERSE so the primary action is the first button under the step, where the eye
     lands, and Back sits last, while the DOM order keeps Back and Skip before Continue for a
     screen reader and for tab order. */
  .onb-actions { flex-direction: column-reverse; }
  .onb-btn { width: 100%; text-align: center; }
  .onb-back { margin-right: 0; }
  .onb-save-msg { text-align: left; }
}