/*
 * aiSofts Mail component layer. Reads only --as-* design tokens (theme/tokens.css, the aiSofts design system), so
 * light/dark and any future re-derivation of the palette carry through. Layered in as-components (tokens.css order).
 */
@layer as-components {
  /* ------------------------------------------------------------------ primitives */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--as-sp-2);
    min-block-size: var(--as-target-min);
    padding: 0 var(--as-sp-4);
    border-radius: var(--as-r-sm);
    border: var(--as-border-w) solid var(--as-border-hairline);
    background: var(--as-surface-raised);
    color: var(--as-text-primary);
    font-weight: var(--as-fw-medium);
    font-size: var(--as-fs-sm);
    cursor: pointer;
    box-shadow: var(--as-shadow-1), var(--as-sheen);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    white-space: nowrap;
    text-decoration: none;
  }
  .btn:hover { background: var(--as-surface-sunk); }
  .btn:active { transform: translateY(1px); }
  .btn[disabled] { opacity: 0.6; cursor: progress; }
  .btn-primary {
    background: var(--as-accent-fill);
    border-color: var(--as-accent-edge);
    color: var(--as-on-accent);
    box-shadow: var(--as-shadow-1), var(--as-sheen-fill);
  }
  .btn-primary:hover { background: var(--as-accent-hover); }
  .btn-primary:active { background: var(--as-accent-active); }
  .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
  .btn-ghost:hover { background: var(--as-row-hover); }
  .btn-sm { min-block-size: 2.25rem; padding: 0 var(--as-sp-3); }
  .btn-block { inline-size: 100%; min-block-size: var(--as-target-touch); font-size: var(--as-fs-base); }
  .icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: var(--as-target-min);
    block-size: var(--as-target-min);
    border-radius: var(--as-r-sm);
    border: 0;
    background: transparent;
    color: var(--as-text-muted);
    cursor: pointer;
    flex: none;
  }
  .icon-btn:hover { background: var(--as-row-hover); color: var(--as-text-primary); }
  .icon-btn-sm { inline-size: 1.75rem; block-size: 1.75rem; }
  .link-btn { border: 0; background: none; color: var(--as-accent); cursor: pointer; padding: var(--as-sp-1) var(--as-sp-2); font-size: var(--as-fs-sm); border-radius: var(--as-r-xs); }
  .link-btn:hover { background: var(--as-accent-soft); }
  .spacer { flex: 1 1 auto; }
  .muted { color: var(--as-text-muted); }
  .glass {
    background: var(--as-glass-fill-strong);
    -webkit-backdrop-filter: var(--as-glass-blur-lg);
    backdrop-filter: var(--as-glass-blur-lg);
    border: var(--as-border-w) solid var(--as-glass-stroke);
    box-shadow: var(--as-glass-shadow);
  }
  .field { display: grid; gap: var(--as-sp-1); }
  .field label { font-size: var(--as-fs-sm); font-weight: var(--as-fw-medium); color: var(--as-text-muted); }
  .field input, .dialog input {
    min-block-size: var(--as-target-touch);
    padding: 0 var(--as-sp-3);
    border-radius: var(--as-r-sm);
    border: var(--as-border-w) solid var(--as-border-control);
    background: var(--as-surface-raised);
    color: var(--as-text-primary);
    inline-size: 100%;
  }
  .field input:focus-visible, .dialog input:focus-visible { border-color: var(--as-accent); }
  .form-error { color: var(--as-danger); font-size: var(--as-fs-sm); background: var(--as-danger-soft); padding: var(--as-sp-2) var(--as-sp-3); border-radius: var(--as-r-sm); }
  .form-error[hidden] { display: none; }
  .badge {
    margin-inline-start: auto;
    min-inline-size: 1.5rem;
    padding: 0 var(--as-sp-2);
    border-radius: var(--as-r-pill);
    background: var(--as-accent-soft);
    color: var(--as-accent);
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    line-height: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .badge[hidden] { display: none; }
  .avatar {
    --avatar-h: 230;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-semibold);
    color: oklch(0.32 0.09 var(--avatar-h));
    background: oklch(0.92 0.05 var(--avatar-h));
    letter-spacing: 0.02em;
  }
  [data-theme="dark"] .avatar { color: oklch(0.9 0.06 var(--avatar-h)); background: oklch(0.36 0.07 var(--avatar-h)); }
  @media (prefers-color-scheme: dark) {
    [data-theme="system"] .avatar { color: oklch(0.9 0.06 var(--avatar-h)); background: oklch(0.36 0.07 var(--avatar-h)); }
  }
  .avatar-lg { inline-size: 3rem; block-size: 3rem; font-size: var(--as-fs-base); }
  .skip { position: absolute; inset-block-start: -10rem; inset-inline-start: var(--as-sp-2); z-index: var(--as-z-skiplink); background: var(--as-surface-raised); padding: var(--as-sp-2) var(--as-sp-3); border-radius: var(--as-r-sm); }
  .skip:focus { inset-block-start: var(--as-sp-2); }
  .boot { min-block-size: 100dvh; }

  /* ------------------------------------------------------------------ brand + login */
  .brand { display: flex; align-items: center; gap: var(--as-sp-2); font-size: var(--as-fs-lg); color: var(--as-text-primary); }
  .brand img { border-radius: var(--as-r-sm); box-shadow: var(--as-shadow-1); }
  .brand-name strong { font-weight: var(--as-fw-bold); }
  .login { position: relative; min-block-size: 100dvh; display: grid; place-items: center; padding: var(--as-gutter-page); overflow: hidden; isolation: isolate; }
  .aurora { position: absolute; inset: -10%; background: var(--as-aurora); z-index: -1; filter: saturate(1.1); }
  .aurora::after { content: ""; position: absolute; inset: 0; background: var(--as-aurora-scrim); }
  .login-card { inline-size: min(100%, var(--as-form-w-narrow)); padding: var(--as-sp-8); border-radius: var(--as-r-xl); display: grid; gap: var(--as-sp-4); }
  .login-title { font-size: var(--as-fs-2xl); margin-block-start: var(--as-sp-4); }
  .login-sub { color: var(--as-text-muted); margin-block-start: calc(-1 * var(--as-sp-2)); }
  .login-theme { position: absolute; inset-block-start: var(--as-sp-4); inset-inline-end: var(--as-sp-4); }

  /* ------------------------------------------------------------------ shell */
  .shell { display: grid; grid-template-columns: var(--as-rail-w) minmax(0, 1fr); block-size: 100dvh; background: var(--as-surface-canvas); }
  .rail { display: flex; flex-direction: column; gap: var(--as-sp-4); padding: var(--as-sp-5) var(--as-sp-3); border-inline-end: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-surface-sunk); min-block-size: 0; }
  .rail .brand { padding-inline: var(--as-sp-2); }
  .compose-btn { min-block-size: var(--as-target-touch); justify-content: flex-start; padding-inline: var(--as-sp-4); border-radius: var(--as-r-md); font-size: var(--as-fs-base); }
  .rail nav { display: grid; gap: 2px; }
  .nav-link { display: flex; align-items: center; gap: var(--as-sp-3); min-block-size: var(--as-target-min); padding: 0 var(--as-sp-3); border-radius: var(--as-r-sm); color: var(--as-text-muted); text-decoration: none; font-weight: var(--as-fw-medium); }
  .nav-link:hover { background: var(--as-row-hover); color: var(--as-text-primary); }
  .nav-link[aria-current="page"] { background: var(--as-accent-soft); color: var(--as-accent); }
  .account { display: flex; align-items: center; gap: var(--as-sp-2); padding: var(--as-sp-2); border-radius: var(--as-r-md); background: var(--as-surface-raised); border: var(--as-border-w) solid var(--as-border-hairline); }
  .account-text { display: grid; min-inline-size: 0; flex: 1; }
  .account-name { font-weight: var(--as-fw-semibold); font-size: var(--as-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-addr { color: var(--as-text-muted); font-size: var(--as-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; min-block-size: 0; }
  .topbar { display: flex; align-items: center; gap: var(--as-sp-2); padding: var(--as-sp-3) var(--as-sp-4); border-block-end: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-glass-fill-strong); -webkit-backdrop-filter: var(--as-glass-blur-md); backdrop-filter: var(--as-glass-blur-md); }
  .search { flex: 1; display: flex; align-items: center; gap: var(--as-sp-2); max-inline-size: 40rem; min-block-size: var(--as-target-min); padding: 0 var(--as-sp-3); border-radius: var(--as-r-pill); background: var(--as-surface-sunk); color: var(--as-text-muted); border: var(--as-border-w) solid transparent; }
  .search:focus-within { background: var(--as-surface-raised); border-color: var(--as-accent); color: var(--as-text-primary); }
  .search input { flex: 1; border: 0; background: transparent; outline: none; min-block-size: 2.5rem; }
  .search input:focus-visible { box-shadow: none; }
  .panes { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); min-block-size: 0; }
  .list-pane { display: flex; flex-direction: column; min-block-size: 0; overflow-y: auto; border-inline-end: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-surface-raised); }
  .list-head { position: sticky; inset-block-start: 0; z-index: var(--as-z-sticky); padding: var(--as-sp-4) var(--as-sp-4) var(--as-sp-2); background: var(--as-surface-raised); }
  .list-title { font-size: var(--as-fs-xl); }
  .list { display: flex; flex-direction: column; padding: 0 var(--as-sp-2) var(--as-sp-6); }
  .row { display: flex; gap: var(--as-sp-3); padding: var(--as-sp-3); border-radius: var(--as-r-md); color: inherit; text-decoration: none; min-block-size: var(--as-row-min-h); }
  .row + .row { margin-block-start: 2px; }
  .row:hover { background: var(--as-row-hover); }
  .row[aria-current="true"] { background: var(--as-accent-soft); }
  .row-body { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
  .row-top { display: flex; gap: var(--as-sp-2); align-items: baseline; }
  .row-from { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--as-fs-sm); color: var(--as-text-muted); }
  .row-date { font-size: var(--as-fs-xs); color: var(--as-text-subtle); font-variant-numeric: tabular-nums; flex: none; }
  .row-subject { display: flex; align-items: center; gap: var(--as-sp-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--as-fs-sm); }
  .row-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--as-fs-sm); color: var(--as-text-subtle); }
  .row.unread .row-from, .row.unread .row-subject { color: var(--as-text-primary); font-weight: var(--as-fw-semibold); }
  .row-clip { color: var(--as-text-subtle); flex: none; }
  .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--as-accent); flex: none; }
  .more { display: grid; place-items: center; padding: var(--as-sp-4); }
  .empty { display: grid; justify-items: center; gap: var(--as-sp-2); text-align: center; padding: var(--as-sp-16) var(--as-sp-6); color: var(--as-text-muted); }
  .empty svg { color: var(--as-text-subtle); }
  .empty-title { color: var(--as-text-primary); font-weight: var(--as-fw-semibold); font-size: var(--as-fs-lg); }

  /* skeletons */
  .sk { display: block; border-radius: var(--as-r-xs); background: linear-gradient(90deg, var(--as-surface-sunk), var(--as-row-hover), var(--as-surface-sunk)); background-size: 200% 100%; }
  @media (prefers-reduced-motion: no-preference) { .sk { animation: sk 1.2s ease-in-out infinite; } }
  @keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .sk-avatar { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; flex: none; }
  .sk-line { block-size: 0.8rem; inline-size: 80%; margin-block: 0.3rem; }
  .sk-short { inline-size: 50%; }
  .sk-block { block-size: 12rem; inline-size: 100%; margin-block-start: var(--as-sp-6); border-radius: var(--as-r-md); }

  /* ------------------------------------------------------------------ reader */
  .reader { min-inline-size: 0; overflow-y: auto; background: var(--as-surface-canvas); }
  .reader-empty { display: grid; justify-items: center; align-content: center; gap: var(--as-sp-3); block-size: 100%; color: var(--as-text-subtle); padding: var(--as-sp-8); text-align: center; }
  .reader-loading { padding: var(--as-sp-8); }
  .message { max-inline-size: 60rem; margin-inline: auto; padding: var(--as-sp-4) var(--as-sp-6) var(--as-sp-12); display: grid; gap: var(--as-sp-4); }
  .reader-actions { display: flex; align-items: center; gap: var(--as-sp-1); position: sticky; inset-block-start: 0; z-index: var(--as-z-sticky); padding-block: var(--as-sp-2); background: var(--as-surface-canvas); flex-wrap: wrap; }
  .back-btn { display: none; }
  .message-subject { font-size: var(--as-fs-2xl); overflow-wrap: anywhere; }
  .message-subject:focus-visible { box-shadow: none; }
  .message-head { display: flex; gap: var(--as-sp-3); align-items: flex-start; }
  .message-meta { display: grid; gap: 2px; min-inline-size: 0; font-size: var(--as-fs-sm); }
  .from-line { display: flex; flex-wrap: wrap; gap: var(--as-sp-2); align-items: center; font-size: var(--as-fs-base); }
  .addr-line { color: var(--as-text-muted); overflow-wrap: anywhere; }
  .addr-label { color: var(--as-text-subtle); margin-inline-end: var(--as-sp-2); }
  .chip-auth { display: inline-flex; align-items: center; gap: var(--as-sp-1); padding: 0 var(--as-sp-2); border-radius: var(--as-r-pill); font-size: var(--as-fs-xs); font-weight: var(--as-fw-medium); line-height: 1.5rem; }
  .chip-auth.ok { background: var(--as-success-soft); color: var(--as-success); }
  .chip-auth.warn { background: var(--as-warning-soft); color: var(--as-warning); }
  .banner { display: flex; align-items: center; gap: var(--as-sp-3); padding: var(--as-sp-3) var(--as-sp-4); border-radius: var(--as-r-md); font-size: var(--as-fs-sm); flex-wrap: wrap; }
  .banner[hidden] { display: none; }
  .banner > span { flex: 1; min-inline-size: 12rem; }
  .banner-warn { background: var(--as-warning-soft); color: var(--as-warning); }
  .banner-info { background: var(--as-info-soft); color: var(--as-info); }
  .body-frame { inline-size: 100%; min-block-size: 8rem; border: var(--as-border-w) solid var(--as-border-hairline); border-radius: var(--as-r-lg); background: #fff; padding: var(--as-sp-4); box-shadow: var(--as-shadow-1); color-scheme: light; }
  .attachments h3 { font-size: var(--as-fs-sm); color: var(--as-text-muted); margin-block-end: var(--as-sp-2); font-weight: var(--as-fw-medium); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--as-sp-2); padding: 0; margin: 0; list-style: none; }
  .chips:empty { display: none; }
  .chip { display: inline-flex; align-items: center; gap: var(--as-sp-2); max-inline-size: 100%; padding: var(--as-sp-1) var(--as-sp-2) var(--as-sp-1) var(--as-sp-3); border-radius: var(--as-r-sm); border: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-surface-raised); font-size: var(--as-fs-sm); min-block-size: 2.5rem; }
  .chip-link { color: var(--as-text-primary); text-decoration: none; padding-inline-end: var(--as-sp-3); }
  .chip-link:hover { background: var(--as-row-hover); }
  .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 16rem; }
  .chip-meta { color: var(--as-text-subtle); font-size: var(--as-fs-xs); font-variant-numeric: tabular-nums; }

  /* ------------------------------------------------------------------ compose */
  .compose {
    position: fixed;
    inset-block-end: var(--as-sp-4);
    inset-inline-end: var(--as-sp-6);
    z-index: var(--as-z-sheet);
    inline-size: min(40rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    border-radius: var(--as-r-lg);
    background: var(--as-surface-overlay);
    border: var(--as-border-w) solid var(--as-border-hairline);
    box-shadow: var(--as-shadow-3);
    overflow: hidden;
  }
  .compose-head { display: flex; align-items: center; justify-content: space-between; padding: var(--as-sp-2) var(--as-sp-2) var(--as-sp-2) var(--as-sp-4); background: var(--as-surface-sunk); }
  .compose-head h2 { font-size: var(--as-fs-base); }
  .compose-form { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
  .compose-fields { display: grid; }
  .field-row { display: flex; align-items: center; gap: var(--as-sp-2); padding: 0 var(--as-sp-4); border-block-end: var(--as-border-w) solid var(--as-border-hairline); }
  .field-row[hidden] { display: none; }
  .field-row label { inline-size: 4.5rem; color: var(--as-text-muted); font-size: var(--as-fs-sm); flex: none; }
  .field-row input { flex: 1; min-inline-size: 0; border: 0; background: transparent; min-block-size: var(--as-target-touch); outline: none; }
  .field-row input:focus-visible { box-shadow: none; }
  .field-row:focus-within { box-shadow: inset 0 -2px 0 var(--as-accent); }
  .field-row-actions { display: flex; gap: var(--as-sp-1); }
  .compose textarea { flex: 1; min-block-size: 14rem; resize: vertical; border: 0; padding: var(--as-sp-4); background: transparent; line-height: var(--as-lh-relaxed); outline: none; }
  .compose textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--as-accent); border-radius: 0; }
  .compose .chips { padding: 0 var(--as-sp-4) var(--as-sp-2); }
  .compose .form-error { margin: 0 var(--as-sp-4) var(--as-sp-2); }
  .compose-actions { display: flex; align-items: center; gap: var(--as-sp-2); padding: var(--as-sp-3) var(--as-sp-4); border-block-start: var(--as-border-w) solid var(--as-border-hairline); }

  /* ------------------------------------------------------------------ rich editor (Quill snow, re-skinned on tokens) */
  .compose .editor { flex: 1; display: flex; flex-direction: column; min-block-size: 16rem; }
  .compose .ql-toolbar.ql-snow { border: 0; border-block-end: var(--as-border-w) solid var(--as-border-hairline); padding: var(--as-sp-2) var(--as-sp-3); background: var(--as-surface-raised); }
  .compose .ql-container.ql-snow { border: 0; flex: 1; font: inherit; font-size: var(--as-fs-base); }
  .compose .ql-editor { min-block-size: 12rem; padding: var(--as-sp-4); line-height: var(--as-lh-relaxed); color: var(--as-text-primary); }
  .compose .ql-editor.ql-blank::before { color: var(--as-text-subtle); font-style: normal; inset-inline: var(--as-sp-4); }
  .compose .ql-editor img { max-inline-size: 100%; }
  .compose .ql-snow .ql-stroke { stroke: var(--as-text-muted); }
  .compose .ql-snow .ql-fill { fill: var(--as-text-muted); }
  .compose .ql-snow .ql-picker { color: var(--as-text-muted); }
  .compose .ql-snow .ql-picker-options { background: var(--as-surface-overlay); border-color: var(--as-border-hairline); box-shadow: var(--as-shadow-2); }
  .compose .ql-snow button:hover .ql-stroke, .compose .ql-snow button.ql-active .ql-stroke { stroke: var(--as-accent); }
  .compose .ql-snow button:hover .ql-fill, .compose .ql-snow button.ql-active .ql-fill { fill: var(--as-accent); }
  .compose .ql-snow .ql-tooltip { background: var(--as-surface-overlay); color: var(--as-text-primary); border-color: var(--as-border-hairline); box-shadow: var(--as-shadow-2); z-index: 2; }
  .compose .ql-snow .ql-tooltip input[type="text"] { background: var(--as-surface-raised); color: var(--as-text-primary); border-color: var(--as-border-control); }
  .quote-note { display: flex; align-items: center; gap: var(--as-sp-2); margin: 0 var(--as-sp-4) var(--as-sp-2); padding: var(--as-sp-2) var(--as-sp-3); border-radius: var(--as-r-sm); background: var(--as-surface-sunk); color: var(--as-text-muted); font-size: var(--as-fs-sm); }

  /* ------------------------------------------------------------------ reader extras */
  .date-line { display: flex; align-items: center; gap: var(--as-sp-2); flex-wrap: wrap; }
  .view-toggle { min-block-size: 1.75rem; }
  .plain-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--as-font-mono); font-size: var(--as-fs-sm); line-height: var(--as-lh-relaxed); padding: var(--as-sp-4); border-radius: var(--as-r-lg); border: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-surface-raised); }
  .plain-body[hidden], .body-frame[hidden] { display: none; }
  .attachments .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .att { display: grid; gap: var(--as-sp-1); min-inline-size: 0; }
  .att-thumb { display: block; border-radius: var(--as-r-sm); overflow: hidden; border: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-surface-sunk); aspect-ratio: 16 / 10; }
  .att-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .att-chip { inline-size: 100%; }
  .att-chip .chip-name { flex: 1; }

  /* ------------------------------------------------------------------ dialog + toasts */
  .dialog { inline-size: min(32rem, calc(100vw - 2rem)); padding: 0; border: var(--as-border-w) solid var(--as-border-hairline); border-radius: var(--as-r-lg); background: var(--as-surface-overlay); color: var(--as-text-primary); box-shadow: var(--as-shadow-3); }
  .dialog::backdrop { background: var(--as-scrim); }
  .dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--as-sp-3) var(--as-sp-3) var(--as-sp-3) var(--as-sp-5); border-block-end: var(--as-border-w) solid var(--as-border-hairline); }
  .dialog-head h2 { font-size: var(--as-fs-lg); }
  .dialog-section { display: grid; gap: var(--as-sp-3); padding: var(--as-sp-5); justify-items: start; }
  .dialog-section + .dialog-section { border-block-start: var(--as-border-w) solid var(--as-border-hairline); }
  .dialog-section .field { inline-size: 100%; }
  .dialog-section h3 { font-size: var(--as-fs-base); }
  .toasts { position: fixed; inset-block-end: var(--as-sp-6); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--as-z-toast); display: grid; gap: var(--as-sp-2); justify-items: center; }
  .toast { display: flex; align-items: center; gap: var(--as-sp-3); padding: var(--as-sp-3) var(--as-sp-4); border-radius: var(--as-r-md); background: var(--as-text-primary); color: var(--as-surface-raised); box-shadow: var(--as-shadow-3); font-size: var(--as-fs-sm); max-inline-size: min(36rem, calc(100vw - 2rem)); }
  .toast-error { background: var(--as-danger); color: var(--as-on-danger); }
  .toast-out { opacity: 0; transition: opacity 300ms ease; }

  /* ------------------------------------------------------------------ mobile chrome */
  .tabbar, .fab { display: none; }

  @media (max-width: 64rem) {
    .shell { grid-template-columns: var(--as-rail-w-collapsed) minmax(0, 1fr); }
    .rail { padding-inline: var(--as-sp-2); align-items: center; }
    .rail .brand-name, .nav-label, .account-text, .compose-btn span { display: none; }
    .compose-btn { inline-size: var(--as-target-touch); padding: 0; justify-content: center; }
    .nav-link { justify-content: center; padding: 0; inline-size: var(--as-target-touch); position: relative; }
    .nav-link .badge { position: absolute; inset-block-start: 2px; inset-inline-end: -4px; min-inline-size: 1.1rem; line-height: 1.1rem; font-size: 0.65rem; padding: 0 3px; }
    .account { flex-direction: column; padding: var(--as-sp-1); background: transparent; border: 0; }
  }

  @media (max-width: 48rem) {
    .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .rail { display: none; }
    .panes { grid-template-columns: minmax(0, 1fr); }
    .list-pane { border-inline-end: 0; }
    .shell[data-view="reader"] .list-pane { display: none; }
    .shell[data-view="list"] .reader { display: none; }
    .back-btn { display: inline-grid; }
    .message { padding-inline: var(--as-sp-4); }
    .message-subject { font-size: var(--as-fs-xl); }
    .tabbar { display: flex; justify-content: space-around; border-block-start: var(--as-border-w) solid var(--as-border-hairline); background: var(--as-glass-fill-strong); -webkit-backdrop-filter: var(--as-glass-blur-md); backdrop-filter: var(--as-glass-blur-md); padding-block-end: env(safe-area-inset-bottom); }
    .tab { flex: 1; display: grid; justify-items: center; gap: 2px; padding: var(--as-sp-2) 0; min-block-size: var(--as-tabbar-h); color: var(--as-text-muted); text-decoration: none; font-size: var(--as-fs-xs); }
    .tab[aria-current="page"] { color: var(--as-accent); }
    .fab { display: grid; place-items: center; position: fixed; inset-inline-end: var(--as-sp-4); inset-block-end: calc(var(--as-tabbar-h) + var(--as-sp-4) + env(safe-area-inset-bottom)); inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--as-r-lg); border: 0; background: var(--as-accent-fill); color: var(--as-on-accent); box-shadow: var(--as-shadow-3); cursor: pointer; z-index: var(--as-z-rail); }
    .shell[data-view="reader"] .fab { display: none; }
    .compose { inset: 0; inline-size: 100%; max-block-size: none; border-radius: 0; }
    .login-card { padding: var(--as-sp-6); }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn, .toast-out { transition: none; }
  }
}