.inbox-conversation-actions,
.inbox-conversation-meta { display: flex; align-items: center; }
.inbox-workbench {
  --top-h: 52px;
  --label-h: 36px;
  grid-column: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: 348px minmax(0, 1fr);
  overflow: hidden;
}
.inbox-thread-list {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
/* Only the scroll area stretches. */
.inbox-thread-list > * { flex: none; }
.inbox-thread-list > .inbox-thread-scroll { flex: 1 1 0; }
.inbox-info-popover summary::-webkit-details-marker,
.inbox-category-menu summary::-webkit-details-marker,
.inbox-mode-menu summary::-webkit-details-marker { display: none; }
/* One top line, as tall as the thread header line: search, tabs, Empty Trash. It never changes while rows are selected. */
.inbox-list-top {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--top-h);
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
}
.inbox-list-top svg,
.inbox-bulk-bar svg,
.inbox-row-acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-searchbar {
  flex: 1;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}
.inbox-searchbar:focus-within { border-color: #5b6170; }
.inbox-searchbar svg { flex: none; }
.app-shell .inbox-searchbar input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 13px; }
.inbox-searchbar input::placeholder { color: var(--muted); }
.inbox-icon-btn { position: relative; flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); }
.inbox-icon-btn:hover { color: var(--text); }
.inbox-icon-btn.is-danger:hover { color: var(--danger); }
.inbox-pip { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.inbox-tabs { flex: none; display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--panel); }
.inbox-tabs button { padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.inbox-tabs button[aria-pressed="true"] { background: var(--selection); color: var(--text); }
.inbox-text-btn { height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.inbox-text-btn:hover { color: var(--text); }
.inbox-text-btn.is-danger,
.inbox-empty-trash { color: var(--danger); }
.inbox-text-btn svg { display: none; }
.inbox-empty-trash { height: 30px; margin-left: auto; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); }
/* The generic button hover adds an inset ring; these controls are borderless. */
.app-shell :is(.inbox-list-top, .inbox-bulk-bar, .inbox-chips, .inbox-filter-panel, .inbox-row-acts, .inbox-more) button:hover:not(:disabled) { box-shadow: none; }
.app-shell .inbox-tabs button:hover:not(:disabled) { background-color: transparent; color: var(--text); }
.app-shell .inbox-tabs button[aria-pressed="true"]:hover:not(:disabled) { background-color: var(--selection); }
/* The selection bar covers the first section label line (same height, so rows do not move) and stays at the top of the list.
   Its container query sizes the buttons against the bar itself. Other and Trash have no label: .is-flat keeps a blank line. */
.inbox-bulk-bar { container-type: inline-size; position: sticky; top: 0; z-index: 3; box-sizing: border-box; height: var(--label-h); margin-bottom: calc(-1 * var(--label-h)); display: flex; align-items: center; gap: 2px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.inbox-thread-scroll.is-flat [data-inbox-target="threadList"]:has(.inbox-thread-row-shell) { padding-top: var(--label-h); }
.inbox-thread-scroll:has(.is-selecting) { scroll-padding-top: var(--label-h); }
.inbox-bulk-bar input { flex: none; width: 14px; height: 14px; margin: 0 4px 0 0; accent-color: var(--accent); }
.inbox-bulk-count { flex: none; }
.inbox-bulk-divider { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--border-strong); }
.inbox-bulk-actions { min-width: 0; display: flex; align-items: center; gap: 2px; }
/* On the narrowest list the icons shrink so the bar never overflows. */
.inbox-bulk-bar .inbox-icon-btn { flex: 0 1 28px; min-width: 18px; }
.inbox-bulk-clear { margin-left: auto; }
.inbox-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.inbox-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 10px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-secondary); font-size: 12px; }
.inbox-chip button { padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; }
.app-shell .inbox-chip button:hover:not(:disabled) { background-color: transparent; color: var(--text); }
.inbox-filter-panel { inset: auto; margin: 0; width: 300px; max-width: calc(100vw - 16px); padding: 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--popover); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.inbox-filter-panel:popover-open { position: fixed; display: grid; gap: 12px; }
.inbox-filter-panel h3 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.inbox-filter-panel :is(label, .inbox-filter-row) { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.inbox-filter-panel label.is-check { display: flex; gap: 8px; }
.inbox-filter-row .inbox-tabs { justify-self: start; }
.inbox-filter-panel input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
.inbox-filter-panel select { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 13px; }
.inbox-filter-panel hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); }
.inbox-filter-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.inbox-filter-foot button { padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: 12px; text-decoration: underline; }
/* A narrow list drops the word "selected" and shows the text buttons as icons. */
@container (max-width: 419px) {
  .inbox-bulk-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .inbox-text-btn { width: 28px; padding: 0; }
  .inbox-empty-trash { width: 30px; }
  .inbox-text-btn svg { display: block; }
  .inbox-text-btn span { display: none; }
}
.inbox-thread-scroll,
.inbox-message-stream { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.inbox-more { padding: 14px 18px 24px; text-align: center; }
.inbox-more button { height: 30px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 12px; font-weight: 600; }
.inbox-more small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
/* Unsent text: a chip per thread with a reply or note typed and not sent, bottom right of the list (controllers/inbox/unsent_dock.js). */
.inbox-dock { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 3; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-items: center; gap: 6px; pointer-events: none; }
.inbox-dock-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 300px; height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); color: var(--text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.inbox-dock-chip:hover { border-color: var(--agent-border); }
.inbox-dock-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-dock-chip small { flex: none; color: var(--muted); font-size: 12px; }
.inbox-dock-chip span, .inbox-dock-chip svg { flex: none; width: 13px; height: 13px; }
.inbox-dock-ic { display: inline-flex; color: var(--text-secondary); }
.inbox-dock-chip.is-more { color: var(--muted); }
/* Thread pane of a one-pane layout: above the composer, with its side padding so the chips align with its right edge. */
.inbox-dock.is-detail { position: static; padding: 0 max(28px, calc(100% - 948px)) 8px 28px; }
@media (max-width: 639px) {
.inbox-dock.is-detail { padding: 0 10px 8px; }
}
.inbox-shortcut-help {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 35%, transparent);
}
.inbox-shortcut-help[hidden] { display: none; }
.inbox-shortcut-help-card {
  width: min(360px, calc(100vw - 28px));
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--popover);
  box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
  padding: 14px 16px;
}
.inbox-shortcut-help-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inbox-shortcut-help-card h2 { font-size: 15px; }
.inbox-shortcut-help-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin-top: 12px; font-size: 12px; }
.inbox-shortcut-help-card dt { color: var(--text-secondary); font-weight: 800; }
.inbox-shortcut-help-card dd { color: var(--muted); }
.inbox-section-label { box-sizing: border-box; height: var(--label-h); padding: 14px 18px 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
/* The shell carries the row background; the hover buttons sit over the time and fade into it. */
.inbox-thread-row-shell { --rowbg: var(--bg); position: relative; background: var(--rowbg); }
.inbox-thread-row-shell:hover { --rowbg: var(--surface-hover); }
.inbox-thread-row-shell:has(.is-unread) { --rowbg: var(--unread); }
.inbox-thread-row-shell:has(.is-active, .inbox-thread-select:checked) { --rowbg: var(--selection); }
.inbox-thread-row {
  width: 100%;
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr) auto;
  gap: 3px 8px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  background: none;
  color: var(--text);
  padding: 9px 16px 9px 12px;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}
.app-shell .inbox-thread-row:hover:not(:disabled) { border-color: var(--divider); background: none; box-shadow: none; }
.inbox-thread-select { position: absolute; left: 12px; top: 12px; z-index: 2; width: 14px; height: 14px; margin: 0; opacity: 0; accent-color: var(--accent); }
.inbox-thread-row-shell:hover .inbox-thread-select,
.inbox-thread-select:focus-visible,
.is-selecting .inbox-thread-select { opacity: 1; }
.inbox-thread-row-shell:hover .inbox-row-dot,
.is-selecting .inbox-row-dot { display: none; }
.inbox-row-dot { grid-row: 1; grid-column: 1; width: 8px; height: 8px; margin-top: 5px; }
.inbox-thread-row.is-done .inbox-row-dot { width: 12px; height: 12px; }
.inbox-thread-row.is-done .inbox-row-dot::before { content: "✓"; font-size: 12px; line-height: 1; }
.inbox-row-name { grid-row: 1; grid-column: 2 / 4; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; color: var(--text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; }
.inbox-row-nm,
.inbox-row-company { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-company { flex-shrink: 100; color: var(--muted); font-size: 12px; font-weight: 500; }
/* Out of office automation: amber when follow-ups stopped (needs a person), green when a step will resume. "Disqualified" is the same pill, amber. */
.inbox-row-ooo,
.inbox-row-dq { flex: none; padding: 0 6px; border: 1px solid var(--positive-border); border-radius: 9px; color: var(--accent); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.inbox-row-ooo.is-hold,
.inbox-row-dq { border-color: var(--warning-border); color: var(--warning); }
.inbox-row-ch { display: inline-block; width: 13px; height: 13px; margin: 0 6px -1px 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
/* The company name shrinks first; "In talks:" and "+N" stay, the colleague name gives way last. */
.inbox-row-talks { display: inline-flex; gap: 4px; flex: 0 1 auto; min-width: 8em; overflow: hidden; color: var(--accent); font-size: 12px; font-weight: 600; }
.inbox-row-talks > span { flex: none; }
.inbox-row-talks > .inbox-row-talks-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-draft { flex: none; padding: 0 6px; border: 1px solid var(--agent-border); border-radius: 9px; color: var(--agent); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.inbox-row-fail { margin-left: 8px; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-thread-row time { grid-row: 1; grid-column: 4; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inbox-row-cat { grid-row: 2; grid-column: 2; color: var(--text-secondary); font-size: 12px; line-height: 18px; white-space: nowrap; }
.inbox-row-cat::before { content: "● "; }
.inbox-row-cat[data-category="positive"],
.inbox-row-cat[data-category="meeting_request"] { color: var(--accent); }
.inbox-row-cat[data-category="identity_mismatch"] { color: var(--pending); }
.inbox-thread-subject { grid-row: 2; grid-column: 3 / 5; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
/* Unread needs you; a done row steps back whether or not it was read. */
.inbox-thread-row.is-unread .inbox-row-name { color: var(--text); font-weight: 800; }
.inbox-thread-row.is-unread .inbox-row-company { color: var(--text-secondary); }
.inbox-thread-row.is-unread .inbox-thread-subject,
.inbox-thread-row.is-unread time { color: var(--text); font-weight: 700; }
.inbox-thread-row.is-done:not(.is-unread) :is(.inbox-row-name, .inbox-thread-subject, time, .inbox-row-cat, .inbox-row-dot) { color: var(--muted); font-weight: 400; }
.inbox-thread-row.is-done .inbox-row-cat::before { visibility: hidden; }
/* Hidden by opacity, not display, so Tab can still reach the buttons. */
.inbox-row-acts { position: absolute; top: 0; right: 0; bottom: 1px; display: flex; align-items: center; gap: 2px; padding: 0 10px 0 8px; background: var(--rowbg); opacity: 0; pointer-events: none; }
.inbox-thread-row-shell:hover .inbox-row-acts,
.inbox-thread-row-shell:has(:focus-visible) .inbox-row-acts { opacity: 1; pointer-events: auto; }
.inbox-thread-row-shell:is(:hover, :has(:focus-visible)) time { visibility: hidden; }
.inbox-thread-row.is-done ~ .inbox-row-acts [data-row-action="done"],
.inbox-thread-row:not(.is-done) ~ .inbox-row-acts [data-row-action="reopen"] { display: none; }
.inbox-thread-row.is-unread ~ .inbox-row-acts [data-row-action="unread"],
.inbox-thread-row:not(.is-unread) ~ .inbox-row-acts [data-row-action="read"] { display: none; }
/* Thread pane. Empty: one centered hint. Open: header (one line with actions, then the subject), message compartments. */
.inbox-conversation-shell { min-width: 0; min-height: 0; background: var(--bg); }
.inbox-conversation { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.inbox-empty-pane { display: none; }
.inbox-conversation[data-empty] .inbox-empty-pane { grid-row: 1 / -1; display: grid; place-content: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.inbox-empty-pane b { color: var(--text-secondary); font-size: 15px; font-weight: 600; }
.inbox-conversation[data-empty] > :is(.inbox-thread-head, .inbox-message-stream) { display: none; }
.inbox-empty-back { display: none; justify-self: center; margin-top: 8px; }
.app-shell.is-mobile-detail .inbox-empty-back { display: inline-flex; }
/* Thread header navigation: Back in the one-pane layouts, plus previous / next and the position in Rows. */
.inbox-thread-nav { display: none; flex: none; align-items: center; gap: 2px; margin: 0 2px 0 -14px; padding-right: 8px; border-right: 1px solid var(--border); }
.app-shell[data-layout="rows"] .inbox-thread-nav { display: flex; }
.inbox-thread-pos { margin: 0 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.app-shell .inbox-thread-nav .inbox-icon-btn:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); color: var(--text); }
.inbox-thread-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--top-h) auto; background: var(--bg); }
.inbox-thread-sub { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 8px 0 28px; border-bottom: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.inbox-thread-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 14px; font-weight: 700; }
.inbox-channel-tag::before,
.inbox-company::before { content: "·"; margin-right: 10px; color: var(--muted); }
.inbox-company { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); text-decoration: none; }
.inbox-company[href]:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.inbox-company i { margin-left: 3px; color: var(--muted); font-style: normal; font-size: 12px; }
.inbox-conversation-meta { flex: none; gap: 10px; }
.inbox-dq-slot { display: contents; }
.inbox-conversation-actions { grid-row: 1; grid-column: 2; gap: 6px; padding: 0 14px 0 8px; border-bottom: 1px solid var(--border-strong); }
.inbox-conversation-actions .ui-button { height: 30px; min-height: 30px; gap: 8px; padding: 0 10px; border-color: var(--border-strong); border-radius: 8px; background: var(--panel); font-weight: 600; white-space: nowrap; }
.inbox-conversation-actions .ui-button > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-conversation-actions .ui-button > svg[hidden] { display: none; }
.inbox-conversation-actions .ui-button-danger { color: var(--danger); }
.app-shell .inbox-conversation-actions .ui-button-danger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.inbox-state-button.is-pending { opacity: .6; }
.inbox-thread-head h2 { grid-row: 2; grid-column: 1 / -1; max-width: 900px; padding: 14px 28px 6px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.inbox-thread-sub .inbox-icon-btn { flex: none; width: 26px; height: 26px; margin-left: -4px; color: var(--muted); list-style: none; }
.inbox-thread-sub .inbox-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-info-popover,
.inbox-category-menu { position: relative; }
.inbox-info-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  width: 340px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--popover);
  box-shadow: var(--shadow);
  padding: 12px;
}
.inbox-info-panel { right: auto; left: 0; width: min(440px, calc(100vw - 20px)); border-radius: 10px; padding: 14px; }
.inbox-info-panel dl { display: grid; gap: 8px; margin: 0; font-size: 13px; }
.inbox-info-panel dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.inbox-info-panel dt { color: var(--muted); }
.inbox-info-panel dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.inbox-info-panel a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); }
.inbox-cat-btn { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-secondary); font-size: 12px; font-weight: 600; list-style: none; white-space: nowrap; }
.inbox-cat-btn.is-positive { border-color: var(--positive-border); color: var(--accent); }
.inbox-category-options { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; gap: 2px; min-width: 200px; max-height: 70vh; overflow-y: auto; padding: 4px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-raised); box-shadow: var(--shadow); }
.inbox-category-options button { padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 13px; text-align: left; }
.app-shell .inbox-category-options button:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); }
.inbox-category-options button.is-current { background: var(--surface-hover); }
.inbox-category-control { display: flex; align-items: center; gap: 6px; }
.inbox-cat-readonly { height: 24px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.inbox-cat-readonly.is-warn { border-style: solid; border-color: var(--warning-border); color: var(--warning); }
.inbox-cat-readonly.is-ok { border-style: solid; border-color: var(--positive-border); color: var(--accent); }
/* The stream scrolls itself; the right padding keeps the messages at most 844px wide. */
.inbox-message-stream { padding: 6px max(28px, calc(100% - 872px)) 24px 28px; }
.inbox-expand-all { display: grid; margin: 0 0 8px auto; }
.inbox-notice { display: grid; gap: 4px; margin: 8px 0 14px; padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); color: var(--text-secondary); font-size: 13px; }
.inbox-notice b { color: var(--warning); font-weight: 700; }
/* Other people of the company who replied or have a meeting: one Open button each. */
/* One grid for all rows (subgrid): a row with no Open button or a shorter time keeps the columns of the others. */
/* No frame: a title, a line under it, and a line under each row (the Infrastructure style). */
.inbox-talks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; margin: 8px 0 18px; }
.inbox-talks > b { grid-column: 1 / -1; display: block; padding: 6px 0 8px; border-bottom: 1px solid var(--border-strong); font-size: 13px; font-weight: 700; }
.inbox-talks-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.inbox-talks-name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; }
.inbox-talks-what { min-width: 0; }
.inbox-talks-what small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.inbox-talks-at { color: var(--muted); font-size: 12px; white-space: nowrap; }
.inbox-talks-row .ui-button { height: 30px; padding: 0 14px; font-size: 12px; }
@media (max-width: 640px) {
  .inbox-talks { display: block; }
  .inbox-talks-row { grid-template-columns: minmax(7em, 1fr) minmax(0, 1.4fr); }
  .inbox-talks-what { text-align: right; }
  .inbox-talks-row .ui-button { justify-self: end; flex: none; }
}
/* Link to lead (Other threads): suggestions, search, one click. */
.inbox-link { margin: 0 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); overflow: hidden; }
.inbox-link-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.inbox-link-head b { font-size: 13px; font-weight: 700; }
.inbox-link-head span { color: var(--muted); font-size: 12px; }
.inbox-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.inbox-link-row:hover { background: var(--surface-hover); }
.inbox-link-row .ui-button { height: 30px; padding: 0 14px; font-size: 12px; }
.inbox-link-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.inbox-link-mail { color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.inbox-link-co { color: var(--muted); font-size: 12px; }
.inbox-link-under { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.inbox-link-status { font-weight: 600; }
.inbox-link-status.is-active { color: var(--accent); }
.inbox-link-status.is-paused { color: var(--warning); }
.inbox-link-why { color: var(--text-secondary); }
.inbox-link-state { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; }
.inbox-link-search { padding: 10px 14px; }
.inbox-link-search .inbox-searchbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-link [data-inbox-target="linkResults"]:not(:empty) { border-top: 1px solid var(--border); }
.inbox-link [data-inbox-target="linkResults"] > :last-child { border-bottom: 0; }
.inbox-link-dialog { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-raised); color: var(--text); box-shadow: 0 20px 48px rgba(0, 0, 0, .55); }
.inbox-link-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.inbox-link-dialog h3 { margin: 0 0 8px; font-size: 16px; }
.inbox-link-dialog p { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.inbox-link-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* OOO colleague email (controllers/inbox/ooo_colleagues.js): the "Named" strip under an Out of office reply and one composer for the first email to the people picked. */
.inbox-row-named { flex: none; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.inbox-row-named.is-done { color: var(--faint); font-weight: 500; }
.inbox-ooo { display: grid; gap: 10px; margin: 8px 0 14px; }
.inbox-ooo-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--positive-border); border-radius: 10px; }
.inbox-ooo-label { margin-right: 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.inbox-ooo-chip { display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.inbox-ooo-chip:hover:not(:disabled) { background: var(--surface-hover); }
.inbox-ooo-chip small { color: var(--muted); font-size: 12px; font-weight: 500; }
.inbox-ooo-box { display: grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 4px; color: #05231a; font-size: 10px; line-height: 1; }
.inbox-ooo-chip[aria-pressed="true"] { border-color: var(--positive-border); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.inbox-ooo-chip[aria-pressed="true"] .inbox-ooo-box { border-color: var(--accent); background: var(--accent); }
.inbox-ooo-chip[aria-pressed="true"] .inbox-ooo-box::after,
.inbox-ooo-chip.is-sent .inbox-ooo-box::after { content: "✓"; font-weight: 800; }
.inbox-ooo-chip:disabled { cursor: default; }
.inbox-ooo-chip:disabled:not(.is-sent) { border-style: dashed; background: none; color: var(--faint); }
.inbox-ooo-chip:disabled:not(.is-sent) .inbox-ooo-box { border-color: var(--faint); }
.inbox-ooo-chip.is-sent { border-color: var(--positive-border); background: none; color: var(--accent); }
.inbox-ooo-chip.is-sent .inbox-ooo-box { border: 0; color: var(--accent); }
.inbox-ooo-chip.is-failed small { color: var(--warning); font-weight: 600; }
.inbox-ooo-skip { color: var(--faint); font-size: 12px; }
.inbox-ooo-go { margin-left: auto; }
.inbox-ooo-go[hidden] { display: none; }
.inbox-ooo-composer { display: grid; min-width: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel); }
.inbox-ooo-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.inbox-ooo-add { flex: 1 1 160px; min-width: 120px; padding: 2px 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; }
.inbox-ooo-add.is-bad { color: var(--danger); }
.inbox-ooo-composer .inbox-ooo-add:focus { outline: 0; }
.inbox-ooo-hint { flex: 1 1 100%; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-ooo-none { color: var(--faint); font-size: 12px; }
.inbox-ooo-lab { flex: none; width: 52px; color: var(--faint); font-size: 12px; font-weight: 600; }
.inbox-ooo-to { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); font-size: 13px; }
.inbox-ooo-to.is-cur { border-color: var(--positive-border); }
.inbox-ooo-to input { min-width: 3ch; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-weight: 700; }
.inbox-ooo-to input:hover,
.inbox-ooo-to input:focus { background: var(--bg); }
.inbox-ooo-em { color: var(--muted); font-size: 12px; }
.inbox-ooo-x { padding: 0 6px; border: 0; background: none; color: var(--faint); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.inbox-ooo-x:hover { color: var(--text); }
.inbox-ooo-subject { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; }
.inbox-ooo-body { display: grid; padding: 10px 14px 4px; }
.inbox-ooo-greet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-secondary); line-height: 1.55; }
.inbox-ooo-g { color: var(--text); font-weight: 600; }
.inbox-ooo-seg-l { margin-left: auto; color: var(--faint); font-size: 12px; }
.inbox-ooo-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; }
.inbox-ooo-seg button { padding: 2px 9px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.inbox-ooo-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); }
.inbox-ooo-composer textarea { width: 100%; padding: 6px 0; border: 0; background: none; color: var(--text-secondary); font: inherit; line-height: 1.55; resize: none; overflow: hidden; }
.inbox-ooo-composer :is(input, textarea):focus { outline: none; }
.inbox-ooo-composer :is(input, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.inbox-ooo-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 14px 10px; border-top: 1px solid var(--border); }
.inbox-ooo-note { flex: 1 1 260px; min-width: 0; color: var(--faint); font-size: 12px; }
.inbox-ooo-note b { color: var(--muted); font-weight: 600; }
.inbox-ooo-error { flex: 1 1 100%; order: 2; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-ooo-ghost { border-color: transparent; background: none; color: var(--muted); }
.inbox-ooo kbd { margin-left: 6px; font: inherit; font-size: 11px; opacity: .75; }
/* Agent proposals (controllers/inbox/agent_proposals.js), the row of the validated mockup: Halo on the row that waits for Safouan (a still gradient edge and a soft glow), a reason is a plain row. */
.inbox-agent-items { display: grid; gap: 10px; margin: 0 0 14px; }
.inbox-agent-items:empty { display: none; }
.inbox-agent-row,
.inbox-agent-reason { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); }
.inbox-agent-row { --halo-1: var(--agent); --halo-2: #7cc4ff; --halo-3: #ff9ecf; border-color: transparent; background: linear-gradient(160deg, color-mix(in srgb, var(--agent) 20%, var(--panel)), color-mix(in srgb, var(--panel) 92%, var(--halo-2)) 70%) padding-box, linear-gradient(135deg, var(--halo-1), color-mix(in srgb, var(--halo-2) 70%, transparent) 45%, color-mix(in srgb, var(--halo-3) 60%, transparent)) border-box; box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--halo-1) 75%, transparent), 0 0 22px -6px color-mix(in srgb, var(--halo-2) 45%, transparent); }
.inbox-agent-ic { display: inline-flex; color: var(--agent); }
.inbox-agent-reason .inbox-agent-ic { color: var(--muted); }
.inbox-agent-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-agent-what { grid-column: 2; margin: 0; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
button.inbox-agent-what { cursor: pointer; }
button.inbox-agent-what:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.inbox-agent-what b { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--agent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.inbox-agent-answers { grid-column: 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inbox-agent-answers .ui-button { height: 30px; padding: 0 14px; font-size: 12px; }
.inbox-agent-why { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.inbox-agent-why b,
.inbox-agent-reason b { color: var(--text-secondary); font-weight: 600; }
.inbox-agent-body { grid-column: 2 / -1; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-agent-error { grid-column: 2 / -1; margin: 0; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-agent-reason > p:first-of-type { grid-column: 2; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.inbox-agent-reason .inbox-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .inbox-agent-row { grid-template-columns: auto minmax(0, 1fr); }
  .inbox-agent-answers { grid-column: 2; }
}
/* Agent panel (controllers/inbox/agent_panel.js): the aside overlays the right side of the workbench, 360 px; full width at 639 px and below. */
.inbox-workbench:has(> .inbox-agent-panel) { position: relative; }
.inbox-agent-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; width: 360px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); border-left: 1px solid var(--border-strong); border-radius: 0 14px 14px 0; background: var(--panel); box-shadow: -12px 0 28px rgba(0, 0, 0, .35); }
@media (max-width: 639px) { .inbox-agent-panel { left: 0; width: auto; border-radius: 0; } }
.inbox-agent-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 28px; padding: 0 6px; color: var(--agent); }
.inbox-agent-toggle[aria-expanded="true"] { background: var(--agent-soft); }
/* Agents off: the word "Off" as a badge on the icon's corner, so the button keeps its size. */
.inbox-agent-off { position: absolute; right: -3px; bottom: -3px; padding: 0 3px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; line-height: 12px; letter-spacing: .04em; pointer-events: none; }
.inbox-agent-off[hidden] { display: none; }
.inbox-agent-head { display: flex; align-items: center; gap: 8px; height: var(--top-h); padding: 0 8px 0 14px; border-bottom: 1px solid var(--border-strong); }
.inbox-agent-head h2 { flex: 1; font-size: 14px; }
.inbox-agent-control { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.inbox-agent-switch { display: flex; align-items: center; gap: 10px; }
.inbox-agent-switch b { color: var(--text-secondary); font-weight: 600; }
.inbox-agent-sw { position: relative; width: 38px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface-raised); }
.inbox-agent-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left .12s; }
.inbox-agent-sw[aria-checked="true"] { border-color: var(--accent); background: var(--accent); }
.inbox-agent-sw[aria-checked="true"]::after { left: 18px; background: var(--bg); }
.inbox-agent-offline,
.inbox-agent-panel-error { margin: 0; font-size: 12px; line-height: 1.5; }
.inbox-agent-offline { color: var(--danger); }
.inbox-agent-panel-error { color: var(--danger); font-weight: 600; }
.inbox-agent-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.inbox-agent-fbtn { border: 1px solid transparent; border-radius: 12px; background: none; padding: 2px 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.inbox-agent-fbtn[aria-pressed="true"] { border-color: var(--border-strong); background: var(--surface-raised); color: var(--text); }
.inbox-agent-list { min-height: 0; overflow: auto; }
.inbox-agent-sec-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.inbox-agent-clear { margin-left: auto; border: 1px solid var(--border-strong); border-radius: 12px; background: none; padding: 2px 10px; color: var(--text); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none; cursor: pointer; }
.inbox-agent-sec > .inbox-agent-panel-error { padding: 8px 14px 0; }
.inbox-agent-empty { margin: 0; padding: 10px 14px; color: var(--muted); font-size: 13px; }
.inbox-agent-item { display: grid; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: inherit; font-size: 13px; text-decoration: none; }
.inbox-agent-item:hover { background: var(--surface-hover); }
.inbox-agent-item .i-top { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.inbox-agent-item .i-ref { min-width: 0; overflow: hidden; color: var(--link); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.inbox-agent-item time { flex: none; margin-left: auto; color: var(--faint); }
.inbox-agent-item .i-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inbox-agent-item .i-text b { color: var(--text); font-weight: 700; }
.inbox-agent-item .i-x { flex: none; border: 0; background: none; padding: 0 2px; color: var(--muted); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }

/* Disqualify company popup: no padding on the dialog itself, so a click on the dialog element is a click on the backdrop. */
.inbox-dq-dialog { width: min(460px, calc(100vw - 32px)); margin: auto; padding: 0; border: 1px solid var(--warning-border); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.inbox-dq-dialog::backdrop { background: rgba(5, 6, 8, .62); }
.inbox-dq-card { display: grid; gap: 12px; padding: 16px 18px; }
.inbox-dq-card h2 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.inbox-dq-card h2 span { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; font-weight: 500; }
.inbox-dq-card ul { display: grid; gap: 6px; margin: 0; padding: 0 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.inbox-dq-card li b { color: var(--text); font-weight: 600; }
.inbox-dq-form { display: grid; gap: 12px; }
.inbox-dq-form input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.inbox-dq-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.inbox-dq-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.inbox-dq-error { margin-right: auto; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-dq-actions .ui-button { height: 30px; min-height: 30px; padding: 0 12px; border-radius: 8px; }
.inbox-dq-go { border-color: var(--warning); background: var(--warning); color: #2a1d00; }
.app-shell .inbox-dq-go:hover:not(:disabled) { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 86%, #000000); }
.inbox-dq-go:disabled { opacity: .45; cursor: default; }
.inbox-dq-ghost { border-color: transparent; background: none; color: var(--muted); }
.inbox-dq-actions kbd { margin-left: 6px; font: inherit; font-size: 11px; opacity: .75; }
/* Referral origin: the row tag (the muted company style), the origin line over the messages, the dashed "emailed, no reply" chips of the company strip. */
.inbox-row-via { flex-shrink: 10; }
.inbox-origin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-secondary); font-size: 13px; }
.inbox-origin-icon { color: var(--muted); }
.inbox-origin b { color: var(--text); font-weight: 700; }
.inbox-origin-meta { color: var(--muted); overflow-wrap: anywhere; }
.inbox-origin-open { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
.inbox-origin-open:hover { text-decoration: underline; }
.inbox-emailed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 14px; font-size: 12px; }
.inbox-emailed-label { color: var(--faint); font-weight: 600; }
.inbox-emailed-chip { display: inline-flex; gap: 6px; align-items: center; height: 26px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: 13px; background: none; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; }
.inbox-emailed-chip small { color: var(--muted); font-size: inherit; font-weight: 500; }
.inbox-emailed-chip:hover { background: var(--surface-hover); }
/* "Our emails to <company>" popup: a fixed height that fits one email; the people list is on the left (stacked above the emails on a phone), the emails scroll. */
.inbox-sent-dialog { width: min(780px, calc(100vw - 32px)); height: min(460px, calc(100vh - 32px)); margin: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden; }
.inbox-sent-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.inbox-sent-dialog::backdrop { background: rgba(5, 6, 8, .62); }
.inbox-sent-head { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.inbox-sent-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.inbox-sent-close { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.inbox-sent-close:hover { background: var(--surface-hover); }
.inbox-sent-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.inbox-sent-people { display: grid; align-content: start; gap: 2px; padding: 6px; overflow: auto; border-right: 1px solid var(--border); }
.inbox-sent-person { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; }
.inbox-sent-person:hover { background: var(--surface-hover); }
.inbox-sent-person[aria-pressed="true"] { background: var(--selection); color: var(--text); }
.inbox-sent-person b { font-weight: 700; }
.inbox-sent-person span { color: var(--muted); font-size: 12px; }
.inbox-sent-emails { display: grid; align-content: start; padding: 0 12px 12px; overflow: auto; }
.inbox-sent-mail { min-width: 0; border-bottom: 1px solid var(--border); }
.inbox-sent-mail-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 9px 14px; font-size: 13px; }
.inbox-sent-mail-head span { color: var(--muted); }
.inbox-sent-mail-head time { margin-left: auto; color: var(--faint); white-space: nowrap; }
.inbox-sent-mail-body { padding: 0 14px 12px; white-space: pre-wrap; line-height: 1.55; color: var(--text-secondary); font-size: 14px; overflow-wrap: anywhere; }
.inbox-sent-state { padding: 24px 16px; color: var(--muted); font-size: 13px; }
@media (max-width: 620px) {
  .inbox-sent-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .inbox-sent-people { grid-auto-flow: column; grid-auto-columns: max-content; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
}
.inbox-message-tag { flex: none; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.inbox-message-replied { margin: -2px 0 10px; color: var(--muted); font-size: 12px; }
.inbox-message-replied b { color: var(--text-secondary); font-weight: 600; overflow-wrap: anywhere; }
/* No frames: a line between messages. Received messages have a light band (they come forward); yours have none. */
.inbox-message { border-bottom: 1px solid var(--border); overflow: hidden; }
.inbox-message.is-inbound { background: var(--surface-raised); }
.inbox-message-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.inbox-message.is-open .inbox-message-head { padding-block: 12px; }
/* The whole head toggles the message: an empty button under the head content, which does not take clicks. */
.inbox-message-toggle { position: absolute; inset: 0; border: 0; border-radius: 0; background: none; }
.app-shell .inbox-message-toggle:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: transparent; }
.inbox-message-head > :not(.inbox-message-toggle) { position: relative; pointer-events: none; }
.inbox-message-head > .inbox-message-dir { pointer-events: auto; }
.inbox-message-avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; }
.inbox-message.is-inbound .inbox-message-avatar { background: #3a3d45; color: var(--text); }
.inbox-message.is-outbound .inbox-message-avatar { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--muted); }
.inbox-message-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.inbox-message.is-outbound .inbox-message-who { color: var(--text-secondary); font-weight: 600; }
.inbox-message-dir { flex: none; padding: 1px 6px; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 13px; }
.app-shell .inbox-message-dir:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); color: var(--text-secondary); }
.inbox-message-snip { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.inbox-message.is-open .inbox-message-snip { display: none; }
.inbox-message-head time { flex: none; margin-left: auto; color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.inbox-message.failed .inbox-message-head time { color: var(--danger); }
.inbox-message-content { display: none; padding: 14px 18px 16px 56px; border-top: 1px solid var(--border); }
.inbox-message.is-open .inbox-message-content { display: block; }
.inbox-message-addresses { display: none; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; margin: -2px 0 12px; color: var(--text-secondary); font-size: 12px; }
.inbox-message.show-addresses .inbox-message-addresses { display: grid; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.inbox-message-addresses dt { color: var(--muted); }
.inbox-message-addresses dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.inbox-message-body { max-width: 70ch; color: var(--text); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-message.is-outbound .inbox-message-body { color: var(--text-secondary); }
.inbox-message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.inbox-message-attachments a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.inbox-message-attachments a:hover { background: var(--surface-hover); }
.inbox-message-attachments a::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--file-icon) center / contain no-repeat; mask: var(--file-icon) center / contain no-repeat; --file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7zM14 3v4h4'/%3E%3C/svg%3E"); }
.inbox-message-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px -18px -16px -56px; padding: 9px 18px 9px 56px; border-top: 1px solid var(--border); background: rgba(0, 0, 0, .14); }
.inbox-message-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.inbox-message-status.delivered { color: var(--muted); font-weight: 500; }
.inbox-message-status.sent { color: var(--text-secondary); font-weight: 600; }
.inbox-message-status.queued,
.inbox-message-status.retry { color: var(--warning); }
.inbox-message-status.failed { color: var(--danger); }
.inbox-message-reason { color: var(--muted); font-size: 12px; }
.inbox-message-status-spinner { width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: inbox-status-spin .8s linear infinite; }
@keyframes inbox-status-spin { to { transform: rotate(360deg); } }
.inbox-quoted-thread { margin-top: 12px; color: var(--muted); }
.inbox-quoted-thread summary { width: fit-content; border: 1px solid var(--border); border-radius: 11px; padding: 3px 8px; cursor: pointer; font-size: 10px; font-weight: 700; list-style: none; }
.inbox-quoted-thread summary::-webkit-details-marker { display: none; }
.inbox-quoted-thread[open] summary { margin-bottom: 8px; }
.inbox-quoted-thread > div { border-left: 2px solid var(--border); padding-left: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Composer: a closed line ("Reply to <lead>…", or the kept draft), the card, or a dashed line when replies are off. */
.inbox-composer { padding: 12px max(28px, calc(100% - 888px)) 16px 28px; background: var(--bg); }
.inbox-composer-disabled,
.inbox-c-closed { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 10px; }
.inbox-composer-disabled { border: 1px dashed var(--border-strong); color: var(--muted); font-size: 13px; }
.inbox-c-closed { width: 100%; justify-content: space-between; border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted); font-size: 14px; text-align: left; cursor: text; }
.app-shell .inbox-c-closed:hover:not(:disabled) { border-color: var(--border-strong); background-color: var(--panel); box-shadow: none; }
.inbox-c-closed-text { min-width: 0; margin-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-c-closed.has-draft { color: var(--text-secondary); }
.inbox-c-closed.has-draft b { margin-right: 8px; color: var(--warning); font-weight: 700; }
.inbox-kbd { flex: none; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.inbox-kbd.is-dark { border-color: rgba(0, 0, 0, .25); color: inherit; opacity: .7; }
.inbox-c-card { position: relative; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
/* The agent's draft is in the composer: a purple card and a bar on top (controllers/inbox/composer.js). */
.inbox-c-card:has(.inbox-agentbar:not([hidden])) { border-color: var(--agent); }
.inbox-agentbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--agent-soft); color: var(--text-secondary); font-size: 12px; }
.inbox-agentbar b { color: var(--agent); }
.inbox-c-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-bottom: 1px solid var(--border); }
.inbox-c-lbl { width: 52px; color: var(--muted); font-size: 13px; }
.inbox-c-row input { flex: 1; min-width: 80px; border: 0; background: none; color: var(--text); font-size: 13px; }
.app-shell .inbox-c-card :is(input, textarea):focus { outline: 0; }
.inbox-mode-menu { position: relative; flex: none; }
.inbox-c-mode { height: 26px; min-width: 76px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); font-size: 12px; font-weight: 600; list-style: none; white-space: nowrap; }
.app-shell .inbox-c-mode:hover { border-color: var(--border-strong); background-color: var(--surface-hover); box-shadow: none; }
.inbox-mode-options { position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 0; display: grid; gap: 2px; min-width: 240px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-raised); box-shadow: var(--shadow); }
.inbox-mode-options button { display: grid; gap: 1px; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 13px; text-align: left; }
.inbox-mode-options small { color: var(--muted); font-size: 12px; }
.app-shell .inbox-mode-options button:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); }
.inbox-mode-options button.is-current { background: var(--surface-hover); }
.inbox-c-chan { color: var(--muted); font-size: 12px; font-weight: 600; }
.inbox-c-to { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
.inbox-c-to .inbox-c-lbl { width: auto; }
.inbox-c-forward { display: flex; flex: 1; min-width: 120px; }
.inbox-c-forward:not([hidden]) ~ .inbox-c-chip { display: none; }
.inbox-c-chip { display: inline-flex; align-items: center; max-width: 100%; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--surface-raised); color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-c-chips { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.inbox-c-chips .inbox-c-chip { gap: 4px; padding-right: 4px; }
.inbox-c-chips .inbox-c-chip:not(:has(button)) { padding-right: 9px; }
.inbox-c-chips button.inbox-c-chip { border: 1px dashed var(--border-strong); background: none; color: var(--muted); cursor: pointer; }
.app-shell .inbox-c-chips button.inbox-c-chip:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: none; background-color: var(--surface-hover); color: var(--text); }
/* Narrow composer: the chips take their own line under the mode, links, and minimize. */
.inbox-composer { container-type: inline-size; }
@container (max-width: 720px) {
  .inbox-c-row:has(.inbox-c-chips:not([hidden])) { flex-wrap: wrap; }
  .inbox-c-row:has(.inbox-c-chips:not([hidden])) .inbox-c-to { order: 3; flex: 1 1 100%; }
}
.inbox-c-add { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
.inbox-c-added { display: contents; }
.inbox-c-added .inbox-c-chip { gap: 4px; padding-right: 4px; }
.inbox-c-add-input.is-bad { color: var(--danger); }
.inbox-c-add-hint { flex: 1 1 100%; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-c-chip-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inbox-c-chip small { flex: none; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.inbox-c-chip button { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 14px; line-height: 1; }
.app-shell .inbox-c-chip button:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); color: var(--text); }
.inbox-c-links { display: inline-flex; flex: none; }
.inbox-c-link { padding: 2px 4px; border: 0; background: none; color: var(--muted); font-size: 13px; }
.app-shell .inbox-c-link:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: transparent; color: var(--text); }
.inbox-c-card:has(.inbox-c-cc:not([hidden])) .inbox-c-link-cc,
.inbox-c-card:has(.inbox-c-bcc:not([hidden])) .inbox-c-link-bcc { display: none; }
.inbox-composer[data-channel="linkedin"] .inbox-c-email-only,
.inbox-composer:not([data-channel="linkedin"]) .inbox-c-li-only { display: none; }
.app-shell .inbox-composer .inbox-icon-btn:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); }
.inbox-c-min { width: 26px; height: 26px; margin-left: 2px; }
.inbox-c-min svg,
.inbox-c-bar .inbox-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-c-x { width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; }
.app-shell .inbox-c-x:hover:not(:disabled) { border-color: transparent; box-shadow: none; background-color: var(--surface-hover); color: var(--text); }
.inbox-c-field { display: block; }
.app-shell .inbox-c-card textarea { display: block; width: 100%; min-height: 96px; max-height: 40vh; padding: 12px 14px 4px; border: 0; border-radius: 0; background: none; color: var(--text); font-size: 15px; line-height: 1.6; resize: vertical; }
.inbox-c-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.inbox-c-ai > input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font-size: 13px; }
.inbox-c-ai .ui-button { height: 28px; min-height: 28px; }
/* The AI button keeps one box (principles.md, state changes): it fits "Draft reply + 99 times", wider than "Generating...". */
.inbox-c-ai [data-inbox-target~="aiGenerateButton"] { min-width: 156px; justify-content: center; }
/* Add times (meeting_times.js): the instruction, the times block, then the buttons, each on its own row. */
.inbox-c-ai.has-times > input { flex: 1 1 100%; }
.inbox-c-ai.has-times > .inbox-times { flex: 1 1 100%; order: 1; }
.inbox-c-ai.has-times > button { order: 2; }
.inbox-times { display: grid; gap: 10px; min-width: 0; }
.inbox-times .inbox-ai-error { margin: 0; }
.inbox-times-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.inbox-times-lab,
.inbox-times-src { color: var(--faint); font-size: 12px; }
.inbox-times-lab { font-weight: 600; }
.inbox-times-check { display: inline-flex; gap: 6px; align-items: center; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.inbox-times-check input { accent-color: var(--accent); }
.app-shell .inbox-times select { height: 28px; border-color: var(--border-strong); border-radius: 8px; font-size: 13px; }
.inbox-times-step { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px; }
.app-shell .inbox-times-step-btn { padding: 4px 10px; border: 0; border-radius: 0; background: none; color: var(--text); font-size: 14px; }
.inbox-times-count { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.inbox-times-rest { display: contents; }
.inbox-times-pair { display: inline-flex; gap: 6px; align-items: center; }
.inbox-times-help { flex: 1 1 14em; min-width: 0; }
/* The grid: the day label, then a column per start time (cells narrow to fit, no scroll). Under about 24px a cell drops its minutes: its color still shows the state. */
.inbox-times-grid { display: grid; grid-template-columns: max-content repeat(var(--cols), minmax(0, 1fr)); gap: 3px; align-items: center; }
.inbox-times-corner,
.inbox-times-dlab { padding-right: 8px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.inbox-times-hour { min-width: 0; overflow: hidden; padding-left: 4px; border-left: 1px solid var(--border); color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inbox-times-hour.is-you,
.inbox-times-corner.is-you { color: var(--text-secondary); }
.inbox-times-shift { margin-left: 2px; font-size: 9px; vertical-align: super; }
.inbox-times-cell,
.inbox-times-slot { box-sizing: border-box; height: 26px; min-width: 0; border-radius: 6px; }
.inbox-times-cell { border: 1px dashed var(--border); }
.inbox-times-slot { container-type: inline-size; padding: 0; border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.app-shell .inbox-times-slot[aria-pressed="true"],
.app-shell .inbox-times-slot[aria-pressed="true"]:hover:not(:disabled) { border-color: transparent; background: var(--accent); box-shadow: none; color: #05231a; }
@container (max-width: 21px) { .inbox-times-min { display: none; } }
.inbox-times-empty { color: var(--warning); font-size: 12px; }
.inbox-ai-error { margin: 0 12px 10px; padding: 8px 10px; border: 1px solid var(--danger); border-radius: 6px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.inbox-composer .ui-button { flex: none; gap: 8px; padding: 0 14px; border-color: var(--border-strong); border-radius: 8px; background: var(--panel); font-size: 13px; font-weight: 600; white-space: nowrap; }
.inbox-composer .ui-button-primary { border-color: transparent; background: var(--accent); color: #05231a; }
.app-shell .inbox-composer .ui-button:hover:not(:disabled) { box-shadow: none; }
.app-shell .inbox-composer .ui-button-primary:hover:not(:disabled) { border-color: transparent; }
.inbox-c-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 12px; }
.inbox-c-bar .ui-button > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-c-undo { white-space: nowrap; }
.inbox-c-undo .inbox-c-link { color: var(--text-secondary); font-size: 12px; text-decoration: underline; }
.inbox-c-fill { flex: 1; }
.inbox-c-saved { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* Note to the agent (controllers/inbox/agent_notes.js): beside the closed reply field, or in the open card above the bar. */
.inbox-c-quick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.inbox-c-quick > * { flex: 1 1 240px; min-height: 48px; }
.inbox-c-quick .inbox-c-closed { width: auto; }
.inbox-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--agent-border); border-radius: 10px; background: var(--panel); color: var(--agent); }
.inbox-note:focus-within { border-color: var(--agent); }
.inbox-note-spark { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell .inbox-note textarea.inbox-note-input { display: block; width: 100%; min-height: 22px; max-height: 120px; padding: 2px 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text); font-size: 14px; line-height: 1.5; resize: none; }
.inbox-note-input::placeholder { color: color-mix(in srgb, var(--agent) 65%, var(--muted)); }
.inbox-note-end { display: flex; align-items: center; gap: 8px; }
.inbox-note .inbox-kbd { display: none; }
.inbox-c-quick .inbox-note:has(textarea:placeholder-shown) .inbox-kbd { display: inline; }
.app-shell .inbox-note .inbox-note-go { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: var(--agent); color: #17122e; }
.app-shell .inbox-note .inbox-note-go:hover:not(:disabled) { border: 0; background-color: var(--agent); box-shadow: none; filter: brightness(1.12); }
.inbox-note-go svg { width: 14px; height: 14px; fill: currentColor; }
.inbox-note-error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 12px; font-weight: 600; }
.inbox-c-card .inbox-note { margin: 0 14px 6px; border-radius: 19px; background: color-mix(in srgb, var(--agent) 9%, transparent); }
/* "Agent working…" and "Agent rewriting…": the Halo colors flow through the text and a white glint passes (the mockup's shim.live). */
.inbox-agent-live,
.inbox-c-rewriting { font-weight: 800; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(90deg, #7cc4ff, var(--agent), #ff9ecf, var(--agent), #7cc4ff); background-size: 300% 100%, 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: inbox-agent-live 2.4s linear infinite; }
@keyframes inbox-agent-live { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, -200% 0; } }
@media (prefers-reduced-motion: reduce) { .inbox-agent-live, .inbox-c-rewriting { animation: none; background: none; color: var(--agent); } }
.inbox-c-rewriting { width: fit-content; margin: 0; padding: 14px 14px 18px; font-size: 15px; line-height: 1.6; }
/* One comet runs around the border of the card or the working row (agent_notes.js beam()). */
.inbox-agent-row { position: relative; }
.inbox-agent-beam { position: absolute; inset: -1px; z-index: 1; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 2px var(--agent)) drop-shadow(0 0 4px color-mix(in srgb, #ff9ecf 55%, transparent)); }
.inbox-agent-beam rect { fill: none; stroke-linecap: round; }
.inbox-send-status { margin-top: 6px; color: var(--warning); font-size: 12px; }
.inbox-send-status:empty { display: none; }
.inbox-empty-state { height: 100%; min-height: 0; padding: 16px; font-size: 12px; }
.inbox-empty-state a { color: var(--link); text-decoration: underline; }
.inbox-thread-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Appearance background: the panels show the image through --work (app_shell.css). The top line and the selection bar blur it; the composer fades in. */
html.has-bg :is(.inbox-thread-list, .inbox-conversation-shell) { background: none; }
html.has-bg :is(.inbox-list-top, .inbox-bulk-bar, .inbox-thread-head) { background: var(--work); backdrop-filter: blur(18px); }
html.has-bg .inbox-thread-head { z-index: 1; }
html.has-bg .inbox-composer { background: linear-gradient(transparent, var(--work) 22%); }
/* Touch has no hover: the select box stays visible and the check mark gives way to it. */
@media (hover: none) {
.inbox-thread-select { opacity: 1; }
.inbox-row-dot { display: none; }
}
/* The row content ends where the hover buttons start (1 button: 46px, with Trash: 76px), so the subject truncates before them. */
@media (min-width: 640px) {
.inbox-thread-row-shell:is(:hover, :has(:focus-visible)) .inbox-thread-row { padding-right: 46px; }
.inbox-thread-row-shell:is(:hover, :has(:focus-visible)):has(.is-danger) .inbox-thread-row { padding-right: 76px; }
}
@media (max-width: 1100px) {
.inbox-workbench { grid-template-columns: 310px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
.inbox-workbench { grid-column: 1; grid-row: 2; grid-template-columns: 300px minmax(0, 1fr); }
}
/* Header actions are icons only; the label is the tooltip (title) and aria-label. */
.inbox-conversation-actions :is([data-inbox-target~="doneLabel"], .inbox-action-text) { display: none; }
@media (max-width: 639px) {
.inbox-workbench { grid-template-columns: minmax(0, 1fr); }
.inbox-thread-list { border-right: 0; }
.inbox-row-acts { display: none !important; }
.inbox-thread-row time { visibility: visible !important; }
.inbox-conversation-shell { display: none; }
.app-shell.is-mobile-detail .inbox-thread-list { display: none; }
.app-shell.is-mobile-detail .inbox-conversation-shell { display: block; }
.inbox-thread-nav { display: flex; margin-left: -4px; }
.inbox-thread-nav :is([data-inbox-target~="previousButton"], [data-inbox-target~="nextButton"], .inbox-thread-pos) { display: none; }
.inbox-thread-sub { gap: 8px; padding-left: 10px; }
.inbox-thread-sub > .inbox-company,
.inbox-thread-sub > .inbox-channel-tag { display: none; }
.inbox-conversation-actions { padding-right: 10px; }
.inbox-thread-head h2 { padding-inline: 14px; }
.inbox-info-popover { position: static; }
.inbox-info-panel { top: var(--top-h); left: 10px; right: 10px; width: auto; }
.inbox-message-stream { padding: 6px 14px 10px; }
.inbox-message:not(.is-open) .inbox-message-snip { display: none; }
.inbox-message-content { padding: 4px 14px 16px; }
.inbox-message-foot { margin-inline: -14px; padding-inline: 14px; }
.inbox-link-row { gap: 8px; padding: 10px 12px; }
.inbox-link-head, .inbox-link-state, .inbox-link-search { padding-inline: 12px; }
.inbox-composer { padding: 8px 10px 10px; }
.inbox-c-closed .inbox-kbd { display: none; }
.inbox-c-row:first-child { flex-wrap: wrap; }
.inbox-c-bar { flex-wrap: wrap; }
}
/* Rows: the list across the page; a thread replaces it. The same one-pane switch as Split under 640px. */
.app-shell[data-layout="rows"] .inbox-workbench { grid-template-columns: minmax(0, 1fr); }
.app-shell[data-layout="rows"] .inbox-thread-list { border-right: 0; }
.app-shell[data-layout="rows"] .inbox-conversation-shell { display: none; }
.app-shell[data-layout="rows"].is-mobile-detail .inbox-thread-list { display: none; }
.app-shell[data-layout="rows"].is-mobile-detail .inbox-conversation-shell { display: block; }
.app-shell[data-layout="rows"] .is-split-only { display: none; }
.app-shell[data-layout="rows"] .inbox-searchbar { max-width: 620px; }
.inbox-row-campaign,
.inbox-name-handle { display: none; }
@media (min-width: 640px) {
/* One line per row: dot, name and company, category, subject, time. The name column is --inbox-name-col wide (set by dragging the handle,
   inbox/name_column.js), at most what the other columns leave. */
.app-shell[data-layout="rows"] .inbox-thread-row-shell .inbox-thread-row { grid-template-columns: 14px minmax(0, var(--inbox-name-col, 330px)) 124px minmax(0, 1fr) 84px; gap: 0 14px; align-items: center; height: 42px; padding: 0 18px 0 16px; }
.app-shell[data-layout="rows"] .inbox-thread-select { left: 16px; top: 14px; }
.app-shell[data-layout="rows"] .inbox-row-dot { grid-column: 1; margin-top: 0; }
.app-shell[data-layout="rows"] .inbox-row-name { grid-column: 2; }
.app-shell[data-layout="rows"] .inbox-row-nm { flex: 0 0 clamp(140px, calc(var(--inbox-name-col, 330px) * .4), 260px); }
/* The handle is one line over the rows, sticky at the top of the scroll area and as tall as it (cqh), with no height in the flow. It sits
   in the gap after the name column: row padding 16 + dot 14 + gap 14 = 44px before the column; the other columns and gaps take 312px. The
   bulk bar (z-index 3) covers it. */
.app-shell[data-layout="rows"] .inbox-thread-scroll { container-type: size; }
.app-shell[data-layout="rows"] .inbox-name-handle { display: block; position: sticky; top: 0; z-index: 2; width: 11px; height: 100cqh; margin: 0 0 -100cqh calc(46px + min(var(--inbox-name-col, 330px), 100% - 312px)); outline: 0; cursor: col-resize; touch-action: none; user-select: none; }
.inbox-name-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: var(--border-strong); opacity: .35; }
.inbox-name-handle:is(:hover, :focus-visible, .is-dragging)::after { left: 4px; width: 2px; background: var(--focus); opacity: 1; }
.app-shell[data-layout="rows"] .inbox-row-cat { grid-row: 1; grid-column: 3; overflow: hidden; text-overflow: ellipsis; }
.app-shell[data-layout="rows"] .inbox-thread-subject { grid-row: 1; grid-column: 4; }
.app-shell[data-layout="rows"] .inbox-thread-row time { grid-column: 5; text-align: right; }
.app-shell[data-layout="rows"] .inbox-message-stream { padding-right: max(28px, calc(100% - 932px)); }
.app-shell[data-layout="rows"] .inbox-thread-head h2 { max-width: 960px; }
.app-shell[data-layout="rows"] .inbox-composer { padding-right: max(28px, calc(100% - 948px)); }
/* Split with three lines: name and time, subject, then category and campaign. */
.app-shell[data-layout="split"][data-lines="3"] .inbox-thread-row { grid-template-columns: 14px auto minmax(0, 1fr) auto; }
.app-shell[data-layout="split"][data-lines="3"] .inbox-thread-subject { grid-row: 2; grid-column: 2 / 5; }
.app-shell[data-layout="split"][data-lines="3"] .inbox-row-cat { grid-row: 3; }
.app-shell[data-layout="split"][data-lines="3"] .inbox-row-campaign { grid-row: 3; grid-column: 3 / 5; display: block; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
}
/* The toast sits at the bottom of the window, so it shows in the list as well as beside a thread. */
.app-shell > .ui-toast { position: fixed; z-index: 30; bottom: 22px; left: 50%; margin: 0; transform: translateX(-50%); gap: 14px; padding: 10px 12px 10px 16px; border-color: var(--border-strong); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.app-shell > .ui-toast [data-toast-target="undo"]:not([data-plain])::after { content: "⌘Z"; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }