/* Live controls extend the original reference styles without changing that source. */
.session-card .session-note{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--muted)}
.session-screen{min-height:100dvh;display:grid;place-items:center;padding:24px}.session-card{max-width:480px;padding:36px;border:1px solid var(--glass-edge);border-radius:24px;background:var(--glass-dialog);box-shadow:var(--shadow)}.session-card .brand{margin-bottom:30px}.session-card h1{font-size:24px;line-height:1.4;margin-bottom:14px}.session-card p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:24px}.session-card .primary-button{display:inline-flex}.mailbox-control{margin:30px 10px 22px;min-width:0}.mailbox-control label{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.mailbox-control select{width:100%;padding:9px 7px;background:var(--surface-soft);color:var(--text);border:1px solid var(--line);border-radius:9px;font:inherit;font-size:11px}.mailbox-control select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.profile{min-width:0}.profile>div{min-width:0}.profile strong,.profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sync-status{font-size:10px;color:var(--muted);padding:0 25px 12px;line-height:1.5;min-height:27px}.pagination{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.mail-open{display:block;width:100%;text-align:left;padding:0;min-width:0}.mail-open .mail-title,.mail-open .mail-snippet{display:block}.star-indicator{cursor:default!important;pointer-events:none}.star-indicator svg{width:14px;height:14px}.mail-body{white-space:pre-wrap;overflow-wrap:anywhere}.thread-subject,.sender-name,.sender-email,.sender-to{overflow-wrap:anywhere}.reader-note{font-size:10px;color:var(--muted);padding-left:5px}.sender-time{white-space:normal;max-width:110px}.attachment-card{cursor:default;min-width:0}.attachment-card strong{max-width:220px}.attachment-note,.release-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:14px}.reader-pane .empty-state{min-height:200px}.error-state h2{font-size:17px}.empty-state p{max-width:270px;overflow-wrap:anywhere}.sidebar{min-height:0}.folder-nav{overflow:auto;min-height:0}.sidebar-bottom{flex-shrink:0}.sidebar-backdrop{z-index:30}.sidebar{z-index:31}
@media(max-width:850px){.mail-panes{position:relative;min-height:0}.mail-panes>.inbox-pane{height:100%}.reader-pane{display:none;position:absolute;inset:0;z-index:10}.mail-panes.reader-open>.reader-pane{display:flex}.reader-back{display:inline-flex}.reader-note{font-size:9px}.thread-scroll{min-height:0}}
@media(max-width:620px){.mail-panes{flex:1}.topbar{gap:8px}.prototype{display:none!important}.topbar-end{gap:0}.search-wrap{min-width:0}.sidebar{height:100dvh;transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.mobile-nav-toggle{display:inline-flex}.message-list{padding-bottom:14px}.sidebar-bottom{padding-top:14px}.profile{padding:12px 4px;margin-top:8px}.sync-status{padding-left:25px;padding-right:25px}.sender-row{align-items:flex-start}.sender-time{max-width:80px;font-size:9px}.sender-email{display:block;margin-left:0;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* File and mailbox actions keep the reference controls usable on narrow screens. */
.compose-attachments { display: block; min-width: 0; }
.compose-attachments > .compose-main-actions { flex-wrap: wrap; gap: 8px; }
.compose-files {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  min-width: 0;
}
.compose-files .attachment-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px;
}
.attachment-description { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.attachment-description strong, .attachment-description small {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.attachment-description small { color: var(--muted); margin-top: 4px; }
.compose-files .secondary-button { padding: 6px 8px; min-height: 32px; }
.attachment-chip > span[aria-hidden] { flex: 0 0 16px; }
.attachment-chip > span[aria-hidden] svg { width: 16px; height: 16px; }
.compose-attachments .attachment-note { overflow-wrap: anywhere; }
.forward-parts { margin-top: 16px; }
.forward-part-options { display: grid; gap: 10px; margin: 12px 0; }
.forward-part-choice { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; }
.forward-part-choice span { min-width: 0; overflow-wrap: anywhere; }
.forward-part-choice input { flex-shrink: 0; margin-top: 2px; }
.reader-toolbar {
  height: auto;
  min-height: 57px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 6px;
}
.reader-action-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.attachment-cards .attachment-card { flex-wrap: wrap; }
.attachment-card > span:not(.file-icon) { min-width: 0; flex: 1 1 140px; }
.attachment-card strong { white-space: normal; overflow-wrap: anywhere; }
.mailbox-actions {
  flex-shrink: 0;
  max-height: 180px;
  overflow: auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.mailbox-actions .release-note { margin: 0 0 8px; overflow-wrap: anywhere; }
.mailbox-actions .secondary-button { margin: 0 6px 6px 0; }
.compose-attachments[hidden], .forward-parts[hidden], .mailbox-actions[hidden] { display: none; }
@media (max-width: 620px) {
  .reader-toolbar .secondary-button { padding: 8px 10px; font-size: 10px; }
  .compose-main-actions, .compose-footer { flex-wrap: wrap; }
  .compose-files .attachment-description { flex-basis: 130px; }
  .mailbox-actions { max-height: 160px; padding: 10px 16px; }
  .compose-attachments { padding-left: 22px; padding-right: 22px; }
}