:root {
  --bg: #f4f5f7; --panel: #fff; --col: #e9ebef; --text: #1b1d21; --muted: #666b74;
  --border: #d5d8de; --accent: #2f6fde; --accent-text: #fff; --drop: #d6e4ff;
  --unread: #2f6fde; --shadow: 0 1px 2px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c; --panel: #22252b; --col: #1c1f24; --text: #e6e8eb; --muted: #9aa0aa;
    --border: #33373f; --accent: #5b8ff0; --accent-text: #fff; --drop: #24365a;
    --unread: #7aa5ff; --shadow: none;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
}
button {
  font: inherit; padding: .5rem .9rem; min-height: 40px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.big { font-size: 1.1rem; padding: .8rem 1.4rem; }
input, textarea {
  font: inherit; color: var(--text); background: var(--panel); width: 100%;
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }

.bar {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem;
  background: var(--bar-bg); color: var(--bar-text);
}
.bar h1 { font-size: 1.15rem; margin: 0; }
.bar .status { color: var(--bar-muted); }
.bar button {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--bar-text);
}
.bar button:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.bar .search-box input {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: var(--bar-text);
}
.bar .search-box input::placeholder { color: var(--bar-muted); }
.bar :focus-visible { outline-color: #d9e8a6; }
.status { color: var(--muted); font-size: .9rem; }
.search-box { flex: 0 1 360px; min-width: 0; }
.search-box input { padding: .45rem .8rem; border-radius: 20px; }
.column.search { border: 2px dashed var(--accent); }
.column.search h2 .q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column.search h2 .count { margin-left: auto; }
.column.search .icon-btn { width: 30px; min-height: 30px; }
.column .hint { padding: 0 .4rem; }
.card .where {
  font-size: .75rem; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 0 .45rem;
}
.spacer { flex: 1; }
.banner { background: #fff3cd; color: #5c4400; padding: .6rem 1rem; display: flex; gap: 1rem; align-items: center; }

.main-row { flex: 1; display: flex; min-height: 0; }
.board { flex: 1; min-width: 0; display: flex; gap: 1rem; padding: 1rem; overflow-x: auto; min-height: 0; }
.menu-btn { font-size: 1.2rem; padding: .3rem .7rem; }

.sidebar {
  flex: 0 0 236px; overflow-y: auto; padding: .6rem .5rem .6rem 0;
  background: var(--panel); border-right: 1px solid var(--border);
}
.nav-item { display: flex; align-items: center; border-radius: 0 18px 18px 0; }
.nav-item:hover { background: var(--col); }
.nav-item.active { background: var(--drop); }
.nav-main, .nav-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; min-height: 34px;
  padding: .3rem .5rem .3rem 1.1rem; border: 0; border-radius: inherit;
  background: transparent; text-align: left; font-size: .92rem;
}
.nav-main:hover:not(:disabled) { background: transparent; }
.nav-main svg { width: 20px; height: 20px; flex: none; fill: var(--muted); }
.nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-main .n { font-size: .8rem; }
.nav-item.has-count .nav-main, .nav-item.active .nav-main { font-weight: 700; }
.nav-item.active .nav-main svg { fill: var(--text); }
.nav-menu {
  width: 30px; min-height: 30px; padding: 0; margin-right: .3rem; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 1.1rem; visibility: hidden;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { visibility: visible; }
.nav-menu:hover:not(:disabled) { background: var(--border); }
.nav-item.drop { background: var(--drop); box-shadow: inset 0 0 0 1px var(--accent); }
.nav-toggle { width: 100%; color: var(--muted); border-radius: 0 18px 18px 0; }
.nav-toggle:hover:not(:disabled) { background: var(--col); }
.nav-toggle .chev { width: 20px; text-align: center; }
.nav-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; padding: 1rem .4rem .3rem 1.1rem;
}
.nav-head .icon-btn { font-size: 1.3rem; }

.menu {
  position: fixed; z-index: 30; min-width: 220px; padding: .4rem 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.menu hr { border: 0; border-top: 1px solid var(--border); margin: .35rem 0; }
.menu-head { padding: .35rem 1rem; font-size: .85rem; color: var(--muted); }
.menu-item {
  display: flex; gap: .5rem; width: 100%; min-height: 34px; padding: .35rem 1rem;
  border: 0; border-radius: 0; background: transparent; text-align: left;
}
.menu-item:hover:not(:disabled) { background: var(--col); }
.menu-item .tick { width: 1.1rem; color: var(--accent); }
.menu-swatches { display: flex; flex-wrap: wrap; gap: .35rem; padding: .2rem 1rem .4rem; }
.menu-swatches .swatch { width: 28px; min-height: 28px; }
@media (max-width: 800px) {
  .sidebar { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 9; width: 236px; box-shadow: 4px 0 16px rgba(0,0,0,.2); }
}
.column {
  flex: 1 0 290px; max-width: 420px; display: flex; flex-direction: column; min-height: 0;
  background: var(--col); border-radius: 12px; border: 2px solid transparent;
}
.column.drop { background: var(--drop); border-color: var(--accent); }
.column h2 { font-size: 1rem; margin: 0; padding: .8rem 1rem; display: flex; gap: .5rem; align-items: center; }
.column h2 { background: var(--bar-bg); color: var(--bar-text); border-radius: 10px 10px 0 0; margin-bottom: .6rem; }
.column .count { margin-left: auto; color: var(--bar-muted); font-weight: normal; }
.column h2 .icon-btn { width: 30px; min-height: 30px; font-size: .95rem; color: var(--bar-text); opacity: .65; }
.column h2 .icon-btn:hover:not(:disabled) { opacity: 1; background: rgba(255,255,255,.14); }
.column h2 .icon-btn.on { opacity: 1; color: #9fbf5a; }
.column h2 .pick { accent-color: #9fbf5a; }
.column h2.grab { cursor: grab; }
.column.dragging-col { opacity: .45; }
.column.insert-before { box-shadow: -6px 0 0 -1px var(--accent); }
.column.insert-after { box-shadow: 6px 0 0 -1px var(--accent); }
.add-column { flex: 0 0 auto; display: flex; align-items: flex-start; }
.add-btn {
  width: 52px; min-height: 52px; font-size: 1.7rem; line-height: 1; border-radius: 12px;
  border: 2px dashed var(--border); background: transparent; color: var(--muted);
}
.add-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.add-column input { width: 260px; }
.add-column:has(.first) { flex-direction: column; gap: 8px; max-width: 280px; }
.add-btn.first { width: auto; padding: 10px 18px; font-size: 16px; font-weight: 600; border-radius: 10px; }
.add-hint { margin: 0; font-size: 14px; opacity: .75; line-height: 1.4; }
.cards { flex: 1; overflow-y: auto; padding: 0 .6rem .6rem; display: flex; flex-direction: column; gap: .5rem; }

.card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: .7rem .85rem; box-shadow: var(--shadow); cursor: pointer; user-select: none;
}
.card.open { border-color: var(--accent); }
.card.dragging { opacity: .4; }
.card .top { display: flex; align-items: baseline; gap: .4rem; }
.card .people { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .num, .card time { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.card .body {
  margin-top: .2rem; font-size: .875rem; color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card .subj { color: var(--text); }
.card .replied { width: 16px; height: 16px; vertical-align: -3px; margin-right: .2rem; fill: #2e9d4f; }
.card .clip { display: flex; align-items: center; gap: .2rem; margin-top: .3rem; color: var(--muted); font-size: .8rem; }
.card .clip svg { width: 14px; height: 14px; fill: currentColor; }
.card.unread .people, .card.unread .subj { font-weight: 700; }
.card.colored { border-left: 6px solid var(--card-color); }
.pick { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; accent-color: var(--accent); align-self: center; }
.card .pick { display: none; }
.card:hover .pick, .card:focus-within .pick, .board.selecting .card .pick { display: inline-block; }
.card.selected { background: var(--drop); border-color: var(--accent); }

.bulk {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 15;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  width: max-content; max-width: calc(100% - 32px); padding: .5rem .8rem;
  background: var(--panel); border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.bulk-info { font-weight: 600; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bulk select {
  font: inherit; min-height: 40px; padding: 0 .5rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.link-btn {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--accent);
  text-decoration: underline; font-weight: 600;
}

.color-pop {
  position: fixed; z-index: 30; display: flex; gap: .4rem; padding: .5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.swatch {
  width: 36px; min-height: 36px; padding: 0; border-radius: 50%;
  background: var(--swatch); border: 2px solid transparent;
}
.swatch:hover:not(:disabled) { border-color: var(--text); }
.swatch.current { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.swatch.none { background: var(--col); color: var(--muted); }
.color-btn { display: inline-flex; align-items: center; gap: .35rem; }
.color-btn svg { width: 18px; height: 18px; fill: var(--swatch, currentColor); }
.card-actions {
  position: absolute; top: .35rem; right: .35rem; display: none; gap: .15rem;
  background: var(--panel); padding-left: .4rem; border-radius: 8px;
}
.card:hover .card-actions, .card:focus-within .card-actions { display: flex; }
@media (hover: none) {
  .card-actions { position: static; display: flex; justify-content: flex-end; margin-top: .3rem; }
}
.icon-btn {
  width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center;
  background: transparent; border-color: transparent; color: var(--muted);
}
.icon-btn:hover:not(:disabled) { background: var(--col); border-color: transparent; color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; fill: currentColor; }

.center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1rem; width: 100%; max-width: 520px; margin: 0 auto; text-align: center;
}

.reader {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--reader-w, 760px), 100%); z-index: 10;
  background: var(--panel); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,.15);
  overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 1rem;
}
.reader-head { display: flex; gap: 1rem; align-items: flex-start; }
.reader-head h2 { flex: 1; margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions .label { color: var(--muted); font-size: .9rem; }
.actions button.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); opacity: 1; }
.message { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; }
.message summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; }
.message summary .snippet { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; }
.message[open] summary .snippet { display: none; }
.message time { color: var(--muted); font-size: .85rem; }
.addr { color: var(--muted); font-size: .85rem; margin: .5rem 0; overflow-wrap: anywhere; }
iframe.body { width: 100%; min-height: 60px; border: 0; border-radius: 6px; background: #fff; display: block; }
.files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.reply, .compose { display: flex; flex-direction: column; gap: .5rem; }
.row { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.check { display: flex; gap: .4rem; align-items: center; }
.check input { width: auto; }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 20;
  background: #222; color: #fff; padding: .7rem 1rem; border-radius: 10px;
  display: flex; gap: 1rem; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  max-width: calc(100% - 32px);
}
.toast button { background: transparent; color: #9cc0ff; border-color: #555; }

dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); width: min(520px, calc(100% - 32px)); }
dialog form { display: flex; flex-direction: column; gap: .9rem; }
dialog label { display: flex; flex-direction: column; gap: .3rem; }
dialog label.check { flex-direction: row; }
dialog .field { display: flex; flex-direction: column; gap: .4rem; }
.col-list { display: flex; flex-direction: column; gap: .4rem; }
.col-row { display: flex; gap: .25rem; align-items: center; }
.col-row input { flex: 1; min-width: 0; }
.col-row.inbox .hint { white-space: nowrap; padding: 0 .4rem; }
.add-col { align-self: flex-start; }
.error { color: #d33; margin: 0; }
.error:empty { display: none; }
dialog h2 { margin: 0; }

@media (max-width: 640px) {
  .board { scroll-snap-type: x mandatory; }
  .column { flex-basis: 85vw; scroll-snap-align: start; }
  .bar h1 { display: none; }
}

/* Column resizing: grab handles at each column's top corners set one width for all columns. */
.column { position: relative; }
body.cols-sized .column { flex: 0 0 var(--col-w); max-width: none; width: var(--col-w); }
.col-resize {
  position: absolute; top: 0; width: 12px; height: 46px; z-index: 2; cursor: ew-resize; touch-action: none;
  border-radius: 6px; opacity: 0; transition: opacity .15s;
}
.col-resize.left { left: -7px; }
.col-resize.right { right: -7px; }
.col-resize::after {
  content: ''; position: absolute; top: 12px; bottom: 12px; left: 4px; width: 4px; border-radius: 2px; background: var(--accent);
}
.column:hover .col-resize, .col-resize:active, body.col-resizing .col-resize { opacity: .8; }
body.col-resizing, body.col-resizing * { cursor: ew-resize !important; user-select: none; }

/* Opened-email panel: drag its left edge to widen it (or use the wider button in its header). */
.reader-resize {
  position: fixed; top: 0; bottom: 0; z-index: 11; width: 10px; cursor: ew-resize; touch-action: none;
  right: calc(min(var(--reader-w, 760px), 100%) - 5px);
}
.reader-resize::after {
  content: ''; position: absolute; top: 50%; left: 3px; width: 4px; height: 56px; margin-top: -28px;
  border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .15s;
}
.reader-resize:hover::after, body.reader-resizing .reader-resize::after { opacity: .8; }
.reader[hidden] + .reader-resize { display: none; }
body.reader-resizing, body.reader-resizing * { cursor: ew-resize !important; user-select: none; }

/* Opened email: title bar stays at the top while the email scrolls; ESC hint next to the close button. */
.reader-head {
  position: sticky; top: -1rem; z-index: 3; margin: -1rem -1.2rem 0; padding: 1rem 1.2rem .7rem;
  background: var(--panel); border-bottom: 1px solid var(--border); align-items: center;
}
.esc-hint {
  font: 600 .72rem/1 ui-monospace, monospace; color: var(--muted); letter-spacing: .05em;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: .3rem .45rem; flex: none;
}

/* Reply box: Reply all / Reply only, who it goes to, editor, Gmail-style controls at the bottom. */
.reply { border: 1px solid var(--border); border-radius: 10px; padding: .7rem; gap: .55rem; }
.reply-modes { display: flex; gap: .4rem; }
.reply-modes button.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.reply-who { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.reply-editor {
  min-height: 150px; max-height: 50vh; overflow-y: auto; padding: .6rem .7rem; outline: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); line-height: 1.45;
}
.reply-editor:focus { border-color: var(--accent); }
.reply-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.reply-editor a { color: var(--accent); }
.reply-files { display: flex; flex-wrap: wrap; gap: .4rem; }
.reply-files:empty { display: none; }
.reply-files .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem .2rem .6rem; border: 1px solid var(--border); border-radius: 14px; font-size: .85rem; }
.reply-files .chip button { width: 24px; min-height: 24px; padding: 0; border: none; background: transparent; color: var(--muted); }
.reply-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.reply-tools .tool { width: 36px; min-height: 36px; padding: 0; font-size: 1rem; }
.reply-tools .tool.b { font-weight: 700; } .reply-tools .tool.i { font-style: italic; } .reply-tools .tool.u { text-decoration: underline; }
.reply-tools .sep { width: 1px; height: 24px; background: var(--border); margin: 0 .25rem; }
.emoji-pop { display: grid; grid-template-columns: repeat(8, 36px); gap: .2rem; padding: .4rem; border: 1px solid var(--border); border-radius: 8px; width: max-content; }
.emoji-pop[hidden] { display: none; }
.emoji-pop .tool { width: 36px; min-height: 36px; padding: 0; font-size: 1.15rem; background: transparent; border-color: transparent; }
.compose .reply-editor { min-height: 280px; }

/* Hover an address in an opened email: a light red Copy button appears just above the pointer. */
.addr-item { cursor: default; border-radius: 3px; }
.addr-item:hover { color: var(--text); background: rgba(243, 165, 165, .18); }
#copy-float {
  position: fixed; z-index: 50; padding: .1rem .55rem; min-height: 0; font-size: .78rem; line-height: 1.5;
  border-radius: 6px; background: #fde2e2; border: 1px solid #f3a5a5; color: #8a1c1c; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#copy-float:hover { background: #fbcaca; }
#copy-float[hidden] { display: none; }

/* Title bar color (Settings): top bar and column headers. Text color is set to match (light or dark). */
:root { --bar-bg: #373a2b; --bar-text: #eef0e4; --bar-muted: #c3c7b2; }
.color-row { display: flex; align-items: center; gap: .6rem; }
.color-row input[type="color"] { width: 64px; height: 40px; padding: 2px 4px; cursor: pointer; }

/* The email (and new message) window's title bar uses the title bar color as well. */
.reader-head { background: var(--bar-bg); color: var(--bar-text); border-bottom-color: transparent; }
.reader-head button, .reader-head .icon-btn { color: var(--bar-text); background: transparent; border-color: transparent; }
.reader-head button:hover:not(:disabled) { background: rgba(127, 127, 127, .22); }
.reader-head .esc-hint { color: var(--bar-text); border-color: var(--bar-muted); opacity: .8; }

/* Snooze: when a snoozed email comes back (shown on its card), and the date & time picker. */
.card .snoozed { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: #b5651d; margin-top: .25rem; }
.card .snoozed svg { width: 14px; height: 14px; fill: currentColor; }
.snooze-pick { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); padding: 1rem 1.2rem; }
.snooze-pick h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.snooze-pick .row { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.snooze-pick::backdrop { background: rgba(0,0,0,.4); }

/* Search suggestions under the search box, like Gmail's. */
.search-box { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; width: max(100%, min(680px, 92vw)); z-index: 40; max-height: 75vh; overflow-y: auto;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.32); padding: .35rem 0;
}
.suggest[hidden] { display: none; }
.suggest-chips { display: flex; gap: .5rem; flex-wrap: wrap; padding: .5rem .9rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.suggest-chips .chip { border-radius: 8px; padding: .3rem .8rem; font-size: .9rem; background: transparent; }
.suggest-chips .chip:hover { background: var(--col); }
.suggest-sep { border-top: 1px solid var(--border); margin: .3rem 0; }
.suggest-item { display: flex; align-items: center; gap: .9rem; padding: .5rem .9rem; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--col); }
.suggest-icon { width: 20px; flex: none; display: grid; place-items: center; }
.suggest-icon svg { width: 18px; height: 18px; fill: var(--muted); }
.suggest-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suggest-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item > .suggest-label { flex: 1; }
.suggest-sub { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta { margin-left: auto; flex: none; display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
.suggest-meta svg { width: 15px; height: 15px; fill: currentColor; }
/* grey completion after the typed text (Tab accepts) */
.search-ghost { position: absolute; pointer-events: none; border-style: solid; border-color: transparent; box-sizing: border-box;
  white-space: pre; overflow: hidden; display: flex; align-items: center; }
.search-ghost .typed { color: transparent; }
.search-ghost .rest { color: var(--bar-muted); }
.search-ghost .tab-hint { margin-left: .5rem; font: 600 .68rem/1 ui-monospace, monospace; padding: .15rem .35rem; border: 1px solid var(--bar-muted); border-radius: 4px; color: var(--bar-muted); }

/* Empty search: "Did you mean" buttons (Gmail only matches whole words). */
.no-matches { padding: 0 .4rem; }
.did-you-mean { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.did-you-mean button { text-align: left; }

/* To field: contact suggestions under it. */
.to-wrap { position: relative; }
.to-wrap .suggest { width: 100%; }

/* Delete key: the first press marks the card; a second press trashes it. */
.card.delete-armed { outline: 2px solid #e05555; outline-offset: -2px; background: rgba(224, 85, 85, .12); }
.card .delete-hint { margin-top: .35rem; font-size: .8rem; font-weight: 600; color: #e05555; }

/* ---------- Phones: two-row top bar, one column per screen (swipe snaps), full-screen email ---------- */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; row-gap: .5rem; padding: .5rem .75rem; }
  .bar h1 { display: block; font-size: 1.05rem; }
  .bar .status, .bar .spacer { display: none; }
  .bar h1 { margin-right: auto; }
  .bar .search-box { order: 10; flex: 1 0 100%; }
  .bar .col-picker { color: var(--bar-text); }
  .bar .search-box input { width: 100%; }
  .suggest { width: calc(100vw - 1.5rem) !important; min-width: 0; }
  /* Compose / Refresh / Settings become small icon buttons */
  #btn-compose, #btn-refresh, #btn-settings { font-size: 0; width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
  #btn-compose[hidden], #btn-refresh[hidden] { display: none; }
  #btn-compose::before { content: '✏️'; font-size: 1.05rem; }
  #btn-refresh::before { content: '↻'; font-size: 1.3rem; }
  #btn-settings::before { content: '⚙'; font-size: 1.25rem; }
  .sidebar { top: var(--bar-h, 104px); }
  /* one column at a time, picked with the Columns button */
  html, body { overflow-x: hidden; }
  .col-picker { display: block; order: 11; flex: 1 0 100%; text-align: left; font-weight: 600; min-height: 42px; }
  .col-picker[hidden] { display: none; }
  .board { gap: 0; padding: .75rem; overflow-x: hidden; }
  .column, body.cols-sized .column { flex: 1 1 100% !important; width: 100%; max-width: none; }
  .column:not(.phone-shown), .add-column { display: none !important; }
  .col-resize, .reader-resize, .reader-widen { display: none !important; }
  .reader { width: 100% !important; padding: .75rem; }
  .reader-head { margin: -.75rem -.75rem 0; padding: .75rem; }
  .reader-head .esc-hint { display: none; }
  .actions { gap: .35rem; }
}

/* Columns picker: phones only */
.col-picker { display: none; }
@media (max-width: 640px) { .col-picker:not([hidden]) { display: block; } }

/* first open: which of your labels should be columns */
dialog.pick-labels { max-width: 520px; width: calc(100% - 32px); border-radius: 14px; padding: 20px 22px; }
dialog.pick-labels h2 { margin: 0 0 8px; font-size: 20px; }
.pick-list { outline: none; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 12px 0 6px; }
dialog.pick-labels .pick-row { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.pick-row:hover { background: rgba(127,127,127,.12); }
dialog.pick-labels .pick-row input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.pick-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pick-buttons button { padding: 10px 18px; font-size: 16px; }

/* yes/no for things that can't be undone */
dialog.ask { max-width: 460px; width: calc(100% - 32px); border-radius: 14px; padding: 20px 22px; }
dialog.ask p { margin: 0 0 10px; font-size: 17px; line-height: 1.45; }
dialog.ask p.hint { font-size: 15px; opacity: .8; }
.ask-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.ask-buttons button { padding: 10px 18px; font-size: 16px; }
button.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
button.danger:disabled { opacity: .45; cursor: default; }

/* Report issue */
.report-btn { font-weight: 600; }
dialog.report { max-width: 560px; width: calc(100% - 32px); border-radius: 14px; padding: 20px 22px; }
dialog.report h2 { margin: 0 0 14px; font-size: 20px; }
.big-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-choice { padding: 22px 12px; font-size: 18px; font-weight: 600; border-radius: 12px; }
dialog.report textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; resize: vertical; }
dialog.report details { margin-top: 10px; font-size: 14px; }
dialog.report pre { white-space: pre-wrap; font-size: 12px; max-height: 180px; overflow: auto; padding: 8px; border-radius: 8px;
  background: rgba(127,127,127,.12); }

/* each message in an open email shows its subject */
.message summary .msg-subject { font-weight: 700; font-size: 1.02em; margin: 2px 0 1px; }