/* Mailbox (was the mailbox markup in +page.svelte). app.css already styles the
   SPA's classes; these rules cover links that replaced buttons, htmx states and
   the reader slot. Everything is scoped under .mailbox-view or .mailbox-compose. */

/* The reader replaces the list on screen; the list stays in the DOM so its
   scroll position survives closing the reader. */
.mailbox-view:has(#mailbox-reader .reader) .mailbox-list-workspace{display:none}
.mailbox-view .mailbox-reader-slot:empty{display:none}
.mailbox-view .mailbox-reader-wait{margin:14px 0 0}
.mailbox-view:has(.message-row .mailbox-row-wait) .mailbox-reader-wait{display:none}

.mailbox-view .mailbox-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mailbox-view .mailbox-switch-form{display:contents}
.mailbox-view .mail-head .status{text-transform:none}
.mailbox-view .mailbox-button-link{display:inline-flex;align-items:center;text-decoration:none}
.mailbox-view .mailbox-test-result:empty{display:none}
.mailbox-view .mailbox-test-result .inline-error{margin:0 0 14px}
.mailbox-view .repair-note a{color:inherit;text-decoration:underline}

/* Picker cards are links. */
.mailbox-view a.picker-card{text-decoration:none}
.mailbox-view a.picker-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mailbox-view .mailbox-picker-results>.count{display:block;margin:0 0 10px;text-align:right}

/* Folder rail entries are links (the SPA used buttons). */
.mailbox-view .folder-rail a:not(.rail-refresh){display:flex;align-items:center;gap:9px;width:100%;border-radius:7px;padding:8px 11px;color:var(--muted);text-align:left;text-decoration:none;overflow:hidden;font-size:.8rem}
.mailbox-view .folder-rail a:not(.rail-refresh):hover,.mailbox-view .folder-rail a.current{background:var(--surface-3);color:var(--text)}
.mailbox-view .folder-rail a span{font-size:.9rem;color:var(--faint)}
.mailbox-view .folder-rail a.current span{color:var(--accent)}
.mailbox-view .folder-rail a .folder-name{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:inherit;color:inherit;line-height:1.4}
.mailbox-view .folder-rail a.rail-refresh{display:inline-block;text-decoration:none}
.mailbox-view .folder-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Search and refresh. */
.mailbox-view .list-toolbar form{align-items:center}
.mailbox-view .mailbox-clear-search{white-space:nowrap;text-decoration:none}
.mailbox-view .search-box input[type=search]::-webkit-search-cancel-button{filter:grayscale(1)}
.mailbox-view .mailbox-refresh.htmx-request .spin-glyph,
.mailbox-view:has(#mailbox-list[data-polling]) .mailbox-refresh .spin-glyph{animation:glyph-spin .8s linear infinite}
.mailbox-view .mailbox-sync-busy{display:none}
.mailbox-view #mailbox-sync-status.htmx-request{visibility:visible}
.mailbox-view #mailbox-sync-status.htmx-request .mailbox-sync-busy{display:inline}
.mailbox-view #mailbox-sync-status.htmx-request .mailbox-sync-idle{display:none}

/* Message rows are links that load the reader. */
.mailbox-view a.message-row{text-decoration:none}
.mailbox-view a.message-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mailbox-view .message-row .mailbox-opening{display:none}
.mailbox-view .message-row.htmx-request .mailbox-opening{display:flex}
.mailbox-view .message-row.htmx-request,
.mailbox-view .message-row:has(.mailbox-row-wait){background:color-mix(in srgb,var(--info) 7%,var(--surface));box-shadow:inset 3px 0 var(--info)}
.mailbox-view .message-row.htmx-request>span:not(.mailbox-opening),
.mailbox-view .message-row:has(.mailbox-row-wait)>span:not(.mailbox-row-wait){visibility:hidden}
.mailbox-view .message-row.htmx-request .mailbox-row-wait{display:none}
.mailbox-view .row-tail time{font:inherit}

/* Reader. */
.mailbox-view .reader iframe[hidden],.mailbox-view .reader .plain-body[hidden]{display:none}
.mailbox-view .reader-actions .when-busy{align-items:center;gap:7px}
.mailbox-view .reader-actions .htmx-request .when-busy{display:inline-flex}
.mailbox-view .browser-message-actions>div{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px}
.mailbox-view .browser-message-actions summary{cursor:pointer;font-size:.72rem;color:var(--text-2);padding:8px 0}
.mailbox-view .mailbox-labels .label-controls input{flex:1}
.mailbox-view .detail-section form.label-controls{margin:0}
.mailbox-view .detail-section .text-button{margin-top:10px}

/* Compose dialog (rendered into #dialogs, outside .mailbox-view). */
.mailbox-compose .mailbox-compose-help{margin:-.6rem 0 1rem}
.mailbox-compose .file-label .help{font-weight:400}
.mailbox-compose .mailbox-attachment-list{margin:-.4rem 0 .6rem}
.mailbox-compose .mailbox-attachment-list:empty{display:none}
.mailbox-compose #mailbox-compose-error{margin:0 0 12px}
.mailbox-compose .repair-note a{color:inherit;text-decoration:underline}

@media(max-width:820px){
  .mailbox-view .mail-layout{min-height:0;align-content:start}
  .mailbox-view .folder-rail a:not(.rail-refresh){width:auto;flex:none}
  .mailbox-view .folder-rail a .folder-name{white-space:nowrap}
}
@media(max-width:520px){
  .mailbox-view .head-actions{width:100%}
  .mailbox-view .head-actions .mailbox-switch{flex:1 1 100%;max-width:none}
  .mailbox-view .list-toolbar{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .mailbox-view .mailbox-refresh.htmx-request .spin-glyph,
  .mailbox-view:has(#mailbox-list[data-polling]) .mailbox-refresh .spin-glyph{animation:none}
}