/* Outbox TUI — ratatui / xterm surface */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--sz);
  line-height: 1.35;
  overflow: hidden;
}
body { height: 100dvh; min-height: 100dvh; }
button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}
button { cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
ul, ol, h1, h2, h3, p, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--sel-bg); color: var(--sel-fg); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
}

/* ── scanlines (sugar 11) ──────────────────────────────── */
.tui {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 100dvh;
  padding: 6px 6px 2px;
  position: relative;
  isolation: isolate;
}
.tui::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.018) 2px,
    rgba(255,255,255,0.018) 3px
  );
}
@media (prefers-reduced-motion: reduce) {
  .tui::after { display: none; }
}

/* ── status line ───────────────────────────────────────── */
.statusline {
  grid-row: 1;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  min-height: 24px;
  background: var(--bg);
}
.status-cell {
  display: flex;
  align-items: center;
  padding: 2px 10px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  color: var(--dim);
  font-size: var(--sz-sm);
  gap: 6px;
}
.status-cell:last-child { border-right: none; }
.rail-action { padding: 2px 10px; border-right: 1px solid var(--line); color: var(--cursor); white-space: nowrap; font-size: var(--sz-sm); }
.rail-action[hidden] { display: none; }
.rail-action:hover { background: var(--sel-bg); }
.message-menu { position: relative; color: var(--cursor); z-index: 45; border-right: 1px solid var(--line); }
.message-menu summary { padding: 2px 9px; cursor: pointer; list-style: none; }
.message-menu summary::-webkit-details-marker { display: none; }
.message-menu-items { position: absolute; top: 100%; right: 0; min-width: 150px; padding: 4px; background: var(--bg); border: 1px solid var(--line-strong); }
.message-menu-items button { display: block; width: 100%; padding: 8px 10px; text-align: left; white-space: nowrap; }
.message-menu-items button:hover { background: var(--sel-bg); }
.message-menu-items .tag { display: block; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.status-cell.mode {
  background: var(--sel-bg);
  color: var(--sel-fg);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.status-cell.grow {
  flex: 1;
  min-width: 8ch;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-cell.right {
  margin-left: auto;
  border-left: 1px solid var(--line);
  border-right: none;
}
#authCell { min-width: 0; max-width: 100%; }
#accountIdentity { color: var(--cursor); white-space: normal; overflow-wrap: anywhere; text-align: right; }
.status-cell[data-tone="signal"] { color: var(--cursor); }
.status-cell[data-tone="agent"]  { color: var(--agent); }
.status-cell[data-tone="alert"]  { color: var(--alert); }
.status-cell[data-tone="err"]    { color: var(--err); }

/* folder tabs (option B — no side rail) */
.tab {
  padding: 2px 10px;
  color: var(--dim);
  font-size: var(--sz-sm);
  border-right: 1px solid var(--line);
  text-transform: lowercase;
}
.tab:hover { background: var(--line); color: var(--fg); }
.tab[aria-current="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
}
.tab .n { margin-left: 4px; color: var(--alert); }
.tab[aria-current="true"] .n { color: var(--sel-fg); }
.tab .n[data-flash="true"] { animation: unread-nudge 420ms steps(2, end); }
@keyframes unread-nudge {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.15; background: var(--alert); color: var(--bg); }
}

/* LIVE LED (sugar 7) */
.led {
  width: 7px; height: 7px;
  background: var(--cursor);
  flex-shrink: 0;
}
.led[data-state="live"] { animation: led-pulse 2s ease-in-out infinite; }
.led[data-state="wait"] { background: var(--alert); animation: led-pulse 0.8s ease-in-out infinite; }
.led[data-state="down"] { background: var(--err); animation: none; }
.led[data-state="off"]  { background: var(--faint); animation: none; }
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .led { animation: none !important; }
}

.clock { font-variant-numeric: tabular-nums; color: var(--faint); }

/* ── panes ─────────────────────────────────────────────── */
.panes {
  grid-row: 2;
  display: grid;
  grid-template-columns: 22.666667% minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom: none;
}
.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.pane:last-child { border-right: none; }
.pane-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.pane-body::-webkit-scrollbar { width: 4px; height: 4px; }
.pane-body::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* Continue alternating rows through unused list space. Empty rows are decoration. */
#listBody { display: flex; flex-direction: column; --row-a: #0c0e0d; --row-b: #141816; --thread-row-height: 30px; }
#msgList { flex: 0 0 auto; }
#msgList > li:nth-child(odd) { background: var(--row-a); }
#msgList > li:nth-child(even) { background: var(--row-b); }
#listBody::after {
  content: "";
  flex: 1 0 0;
  background: repeating-linear-gradient(to bottom,
    var(--row-a) 0 29px, var(--line) 29px 30px,
    var(--row-b) 30px 59px, var(--line) 59px 60px);
}
#listBody[data-odd="true"]::after { background-position-y: -30px; }

/* ── thread list ───────────────────────────────────────── */
.thread {
  display: flex;
  width: 100%;
  height: var(--thread-row-height);
  padding: 6px 10px;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-align: left;
  white-space: nowrap;
  align-items: center;
  position: relative;
}
.thread .sel { color: var(--sel-fg); font-weight: 700; }
.thread .seq { color: var(--faint); font-variant-numeric: tabular-nums; }
.thread .mark { flex-shrink: 0; color: var(--dim); font-size: 8px; }
.thread[data-unread="true"] .mark { color: var(--alert); }
.thread[data-agency="true"] .mark { color: var(--agent); }
.thread[data-unread="true"][data-agency="true"] .mark { color: var(--alert); }
.thread .subj {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  color: var(--fg);
}
.thread[data-unread="true"] .subj { color: var(--fg); font-weight: 600; }
.reply-footer { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--sz-sm); line-height: 1.6; overflow-wrap: anywhere; }
.thread:hover:not([aria-selected="true"]) { background: var(--line); }

/* reverse-video selection — no left color bar */
/* dark phosphor selection — not white reverse video */
.thread[aria-selected="true"],
.thread[aria-selected="true"] .sel,
.thread[aria-selected="true"] .seq,
.thread[aria-selected="true"] .mark,
.thread[aria-selected="true"] .subj {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

/* sugar 14: row wipe on j/k */
.thread[data-wipe="down"] { animation: wipe-down 140ms steps(4, end); }
.thread[data-wipe="up"] { animation: wipe-up 140ms steps(4, end); }
@keyframes wipe-down {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-up {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* sugar 4: landing snap */
.thread[data-land="true"] { animation: land-snap 320ms steps(3, end); }
@keyframes land-snap {
  0%, 35% { background: var(--sel-bg); color: var(--sel-fg); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .thread[data-wipe], .thread[data-land] { animation: none !important; }
}

/* ── message pane ──────────────────────────────────────── */
.msg-wrap {
  display: none;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.msg-wrap[data-show="true"] { display: flex; }
.msg-empty {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.msg-empty[data-show="true"] { display: flex; }
.msg-empty .strong { color: var(--cursor); }
.msg-empty h1 { color: var(--fg); font-size: clamp(20px, 3vw, 32px); line-height: 1.2; font-weight: 600; margin-bottom: 20px; }
.msg-empty p { max-width: 56ch; margin-bottom: 18px; white-space: normal; }
.welcome-detail { color: var(--dim); font-size: var(--sz-sm); line-height: 1.6; }
.email-compose { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 290px; }
.compose-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--fg); border-bottom: 1px solid var(--line); }
#mailMode { color: var(--cursor); }
#mailMode option { background: var(--bg); }
.compose-row { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.compose-fields label, .compose-label { color: var(--dim); }
.compose-fields input { width: 100%; min-width: 0; outline: none; caret-color: var(--cursor); }
.compose-fields input:focus { box-shadow: 0 1px var(--cursor); }
.compose-fields input::placeholder { color: var(--faint); }
#composeFrom { overflow-wrap: anywhere; }
#emailBody { flex: 1; min-height: 140px; width: 100%; resize: none; outline: none; padding: 18px 16px; line-height: 1.7; caret-color: var(--cursor); }
#emailBody::placeholder { color: var(--faint); }
.compose-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); }
.compose-actions .file-chip { margin-right: auto; }
.compose-actions button { color: var(--cursor); padding: 6px 10px; white-space: nowrap; }
#emailSend { border: 1px solid var(--line); padding: 6px 12px; }

.msg-actions .tag {
  padding: 2px 10px;
  color: var(--agent);
}

.msg-head {
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--line);
  font-size: var(--sz-sm);
  line-height: 1.55;
}
.msg-head .kicker { color: var(--faint); margin-bottom: 4px; }
.msg-head .subject {
  font-size: var(--sz-lg);
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 6px;
  word-break: break-word;
  white-space: normal;
}
.msg-head .meta {
  display: grid;
  grid-template-columns: 5ch 1fr;
  gap: 0 1ch;
}
.msg-head .meta dt { color: var(--faint); }
.msg-head .meta dd { word-break: break-all; }

.msg-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 16px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.msg-body::-webkit-scrollbar { width: 4px; }
.msg-body::-webkit-scrollbar-thumb { background: var(--line-strong); }

.prose {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 78ch;
  line-height: 1.55;
}
.prose .h {
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1em 0 0.35em;
}
.prose p + p { margin-top: 0.85em; }
.prose .li { padding-left: 2ch; }
.prose .li::before { content: "· "; color: var(--faint); }
.prose .ol { padding-left: 3ch; }
.prose .quote {
  border-left: 2px solid var(--line-strong);
  padding-left: 1ch;
  color: var(--dim);
  margin: 0.85em 0;
}
.prose .sig {
  margin-top: 1.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
  color: var(--faint);
}
.prose .summary {
  border: 1px solid var(--line);
  padding: 6px 10px;
  margin: 0 0 1em;
}
.prose .summary .lbl {
  color: var(--agent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--sz-sm);
  margin-bottom: 4px;
}
.prose .attach {
  color: var(--dim);
  margin-top: 0.8em;
}

/* sugar 5: decode reveal */
.prose[data-decode="true"] {
  border-right: 1px solid var(--cursor);
}

/* ── agent prompt (bottom row) ─────────────────────────── */
.agent-wrap {
  grid-row: 3;
  justify-self: center;
  width: 56px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: width 240ms cubic-bezier(.2, .8, .2, 1);
}
.agent-wrap[data-expanded="true"] { width: 66.666667vw; }
.agent-wrap[data-expanded="false"] .agent-field { padding: 0 7px; }
.agent-wrap[data-expanded="false"] .agent-input { overflow: hidden; height: 30px !important; }
.agent-wrap[data-expanded="false"] .agent-input::placeholder { color: var(--dim); }
.agent-wrap:focus-within { border-color: var(--cursor); }
.agent-wrap[data-unauth="true"] {
  border-color: var(--cursor);
}
.agent-wrap[data-unauth="true"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--cursor);
  opacity: 0.35;
  animation: ignite 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ignite {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-wrap { transition: none; }
  .agent-wrap[data-unauth="true"]::before { animation: none; opacity: 0.4; }
}

.agentline {
  display: flex;
  align-items: center;
  min-height: 34px;
}
.agent-tools { display: flex; align-items: center; flex-shrink: 0; }
.agent-tools[hidden], .agent-tools [hidden], #agentPs1[hidden] { display: none; }
.dialog-actions button, .verify-link { padding: 5px 8px; border: 1px solid var(--line); color: var(--cursor); }
.email-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--cursor); padding: 22px; }
.email-dialog::backdrop { background: #000b; }
.email-dialog h2 { font-size: 18px; margin-bottom: 14px; }
.email-dialog p { margin: 12px 0; line-height: 1.55; }
.email-dialog label { display: block; color: var(--dim); margin-top: 12px; }
.email-dialog input, .email-dialog textarea { display: block; width: 100%; border: 1px solid var(--line); padding: 8px; resize: none; margin: 5px 0 14px; }
.verify-link { display: inline-block; text-decoration: none; }
.dialog-actions { display: flex; gap: 10px; margin-top: 14px; }
.agent-field {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 2px;
  position: relative;
}
.agent-ps1 {
  padding: 5px 8px 5px 10px;
  color: var(--cursor);
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}
.agent-ps1 .host { color: var(--dim); font-weight: 400; }
.agent-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  resize: none;
  outline: none;
  padding: 5px 0;
  color: var(--fg);
  background: transparent;
  max-height: 72px;
  overflow-y: auto;
  line-height: 1.35;
  caret-color: var(--cursor);
}
.agent-input::placeholder { color: var(--faint); }
.file-chip {
  flex-shrink: 0;
  max-width: min(28ch, 25vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--agent);
  font-size: var(--sz-sm);
  padding: 0 6px;
  border-left: 1px solid var(--line);
}
.file-chip[hidden] { display: none; }
.art-link {
  margin-right: 1ch;
  color: var(--cursor);
  font-family: inherit;
  font-size: inherit;
}
.art-link:hover { text-decoration: underline; }
.agent-submit {
  padding: 5px 12px;
  color: var(--dim);
  font-size: var(--sz-sm);
  white-space: nowrap;
  border-left: 1px solid var(--line);
}
.agent-submit:hover:not(:disabled) {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

/* sugar 13: command modal */
.cmd-modal {
  display: none;
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(52ch, calc(100% - 24px));
  border: 1px solid var(--line-strong);
  background: var(--bg);
}
.cmd-modal[data-open="true"] { display: block; }
.cmd-modal .cmd-title {
  border-bottom: 1px solid var(--line);
  padding: 2px 10px;
  color: var(--dim);
  font-size: var(--sz-sm);
}
.cmd-modal .cmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.cmd-modal .cmd-prefix { color: var(--cursor); }
.cmd-modal input {
  flex: 1;
  outline: none;
  color: var(--fg);
  background: transparent;
  caret-color: var(--cursor);
}
.cmd-modal .cmd-help {
  border-top: 1px solid var(--line);
  padding: 4px 10px;
  color: var(--faint);
  font-size: var(--sz-sm);
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .tui { padding: 4px 4px 2px; }
  .agent-wrap, .agent-wrap[data-expanded="true"] { width: calc(100vw - 4px); transition: none; }
  .panes {
    grid-template-columns: 1fr;
  }
  .pane-threads[data-mobile-hidden="true"],
  .pane-msg[data-mobile-hidden="true"] {
    display: none;
  }
  .status-cell.mode, .new-message-label { display: none; }
  .tab, .status-cell, .rail-action { padding-left: 6px; padding-right: 6px; }
  #authCell { flex: 1; justify-content: flex-end; }
  #accountIdentity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status-cell.hide-sm { display: none; }
  .status-cell.hide-sm[data-tone="err"] { display: flex; order: 10; flex-basis: 100%; padding: 7px 8px; white-space: normal; border-top: 1px solid var(--line); }
  .agent-ps1 .host { display: none; }
  .agent-ps1 { padding-left: 6px; padding-right: 6px; }
  .agent-submit { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 1000px) {
  #listMeta { display: none; }
}
@media (max-width: 800px) {
  .status-cell.clock { display: none; }
}
@media (max-width: 360px) {
  :root { --sz: 11px; --sz-sm: 10px; --sz-lg: 12px; }
}