/* Prototype tiện ích Chrome etg.vn. Chỉ dùng biến từ ../theme/tokens.css. */

body { min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
svg { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--color-brand); }

/* ---------- Thanh sân khấu ---------- */
.stage-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.stage-brand { display: flex; align-items: center; gap: var(--space-3); }
.stage-title { font-size: var(--text-sm); color: var(--color-text-muted); }
.scene-tabs { display: flex; gap: 2px; margin-inline: auto; overflow-x: auto; max-width: 100%; }
.scene-tabs button {
  border: 0; background: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.scene-tabs button:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.scene-tabs button[aria-selected="true"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-brand); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.stage-controls { display: flex; align-items: center; gap: var(--space-2); }

.seg { display: inline-flex; padding: 2px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.seg button {
  border: 0; background: none; padding: 4px var(--space-3); border-radius: 4px; cursor: pointer;
  font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap;
}
.seg button[aria-checked="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: 0 0 0 1px var(--color-border); }
.seg-block { display: flex; width: 100%; }
.seg-block button { flex: 1; padding-inline: var(--space-1); }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer;
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.icon-btn-sm { width: 26px; height: 26px; border-color: transparent; background: none; }
.icon-btn-sm svg { width: 14px; height: 14px; }

#stage { max-width: 1180px; margin: 0 auto; padding: var(--space-6); }
.scene-note { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); max-width: 72ch; }
.scene-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.scene-head .scene-note { margin: 0; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.check input { accent-color: var(--color-brand); width: 16px; height: 16px; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.btn svg { width: 15px; height: 15px; }
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn-brand { background: var(--color-brand); color: var(--color-on-brand); }
.btn-brand:hover { background: var(--color-brand-hover); }
.btn-ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
.btn-danger { color: var(--status-bounced); }
.btn-danger-solid { background: var(--status-bounced); color: #fff; }
.btn:disabled { opacity: .7; cursor: progress; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: var(--weight-medium); background: var(--color-surface-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border);
  white-space: nowrap;
}
.tag-overdue { background: var(--status-bounced-soft); color: var(--status-bounced); border-color: transparent; }

/* ---------- Dấu ETG trạng thái ---------- */
.mark-wrap { position: relative; display: inline-flex; width: var(--mark-size); height: var(--mark-size); flex: none; }
.mark-wrap .etg-mark { --mark-size: inherit; width: 100%; height: 100%; }
.mark-wrap .etg-mark[data-state="hot"] { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--status-hot) 70%, transparent)); }
.mark-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; border-radius: 50%; }
.badge-dot { width: 8px; height: 8px; top: -3px; right: -3px; bottom: auto; box-shadow: 0 0 0 2px var(--color-surface); }
.badge-hot { background: var(--status-hot); }
.badge-partial { background: var(--status-partial-bounce); }
.badge-clock, .badge-alert { width: 12px; height: 12px; background: var(--color-surface); }
.badge-clock { color: var(--status-scheduled); }
.badge-alert { color: var(--status-bounced); border-radius: 2px; }
.mark-badge svg { width: 11px; height: 11px; stroke-width: 2.6; }

/* ---------- Cảnh 1: Gmail mô phỏng ---------- */
.gmail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.gmail-top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.gmail-name { font-weight: var(--weight-semibold); font-size: var(--text-md); min-width: 150px; color: var(--color-text-muted); }
.gmail-search { flex: 1; max-width: 560px; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text-subtle); font-size: var(--text-sm); border: 1px solid var(--color-border); }
.gmail-account { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-700); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.gmail-body { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; }
.gmail-rail { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-right: 1px solid var(--color-border); font-size: var(--text-sm); }
.gmail-rail a { padding: 6px 12px; border-radius: 0 var(--radius-full) var(--radius-full) 0; color: var(--color-text-muted); display: flex; justify-content: space-between; }
.gmail-rail a.active { background: var(--color-surface-sunken); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--ink-500); }
.gmail-compose { margin-bottom: var(--space-3); padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: var(--weight-semibold); cursor: pointer; text-align: left; }
.gmail-compose:hover { border-color: var(--color-border-strong); }

.g-row {
  display: grid; grid-template-columns: 18px minmax(120px, 190px) 46px 1fr auto; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4); height: 44px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm);
}
.g-row:hover { background: var(--color-surface-sunken); box-shadow: inset 0 -1px 0 var(--color-border-strong); }
.g-check { width: 14px; height: 14px; border: 1.5px solid var(--color-border-strong); border-radius: 2px; }
.g-to { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-mark { display: flex; align-items: center; gap: 4px; }
.mark-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; padding: 0; }
.mark-btn:hover { background: var(--color-brand-soft); }
.g-muted { color: var(--color-text-subtle); display: inline-flex; }
.g-muted svg { width: 13px; height: 13px; }
.g-subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.g-subj b { font-weight: var(--weight-semibold); }
.g-snip { color: var(--color-text-subtle); }
.g-time { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-none { color: var(--color-text-subtle); }

/* ---------- Popover ---------- */
.popover {
  position: fixed; z-index: 40; width: 380px; max-height: min(560px, calc(100vh - 24px)); overflow: auto;
  background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  font-size: var(--text-sm); animation: pop-in var(--duration-base) var(--ease-out);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.popover.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 80vh; }
.pop-head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.pop-head-text { flex: 1; min-width: 0; }
.pop-status { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.tone-opened { color: var(--status-opened); }
.tone-unopened { color: var(--color-text-muted); }
.tone-hot { color: var(--status-hot); }
.tone-partial { color: var(--status-partial-bounce); }
.tone-bounced { color: var(--status-bounced); }
.tone-scheduled { color: var(--status-scheduled); }
.pop-subj { margin: 2px 0; font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-size: var(--text-md); }
.pop-to { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.pop-body { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
.pop-h { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.pop-empty { margin: 0; color: var(--color-text-muted); }

.note { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.45; }
.note > svg, .note > .mark-wrap { margin-top: 2px; }
.note-sub { display: block; margin-top: 2px; opacity: .85; }
.note-scheduled { background: var(--status-scheduled-soft); color: var(--color-text); }
.note-scheduled > svg { color: var(--status-scheduled); }
.note-bounced { background: var(--status-bounced-soft); color: var(--color-text); }
.note-bounced > svg { color: var(--status-bounced); }
.note-partial { background: var(--status-partial-bounce-soft); color: var(--color-text); }
.note-partial > svg { color: var(--status-partial-bounce); }
.note-hot { background: var(--status-hot-soft); color: var(--color-text); }
.note-group { background: var(--color-surface-sunken); border: 1px solid var(--color-border); color: var(--color-text); }

.op-list { list-style: none; margin: 0; padding: 0; }
.op-list li { display: grid; grid-template-columns: 96px 1fr; gap: 0 var(--space-3); padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.op-list li:last-child { border-bottom: 0; }
.op-time { grid-row: span 2; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.op-dev { color: var(--color-text); }
.op-city { color: var(--color-text-muted); font-size: var(--text-xs); }

.paywall { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.blurred { filter: blur(var(--paywall-blur)); user-select: none; pointer-events: none; }
.paywall-msg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); text-align: center; background: color-mix(in srgb, var(--color-surface-raised) 55%, transparent);
}
.paywall-msg p { margin: 0; font-size: var(--text-xs); max-width: 30ch; }
.paywall-msg > svg { color: var(--color-brand); }
.paywall-sm .paywall-msg { flex-direction: row; justify-content: flex-start; text-align: left; }

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.link-list li { display: flex; align-items: center; gap: var(--space-2); }
.link-list svg { color: var(--color-text-subtle); width: 14px; height: 14px; }
.ln-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-count { color: var(--color-text-muted); font-size: var(--text-xs); }
.geo-src { margin: 0; font-size: 11px; color: var(--color-text-subtle); }
.geo-src a { color: inherit; }
.reminded { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--status-done); font-weight: var(--weight-medium); }
.reminded svg { width: 14px; height: 14px; }
.remind-pick .pop-h { margin-bottom: var(--space-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  padding: 5px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-xs); cursor: pointer;
}
.chip-btn:hover { border-color: var(--color-border-strong); }
.chip-btn[aria-checked="true"] { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-press); font-weight: var(--weight-semibold); }
.pop-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface-sunken); }
.pop-foot .btn-danger { margin-left: auto; }

/* ---------- Dialog ---------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-4); background: rgba(23, 20, 21, .45); }
.dialog {
  width: min(420px, 100%); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-raised);
  box-shadow: var(--shadow-dialog); animation: pop-in var(--duration-base) var(--ease-out);
}
.dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-tight); }
.dialog p { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.dialog .dlg-sub { font-size: var(--text-xs); }
.dlg-mark { margin-bottom: var(--space-3); }
.dlg-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 6px; font-size: var(--text-sm); }
.dlg-list li { display: flex; gap: var(--space-2); align-items: center; }
.dlg-list svg { color: var(--status-done); }
.dialog .dlg-price { color: var(--color-text); }
.dlg-price b { font-size: var(--text-lg); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- Cảnh 2: Compose ---------- */
.compose {
  position: relative; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-pop);
}
.compose-title { display: flex; justify-content: space-between; padding: 10px var(--space-4); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.compose-title-actions { color: var(--color-text-subtle); letter-spacing: 6px; }
.compose-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.compose-label { color: var(--color-text-muted); }
.chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border); font-size: var(--text-xs); }
.chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--color-text-muted); }
.chip button:hover { background: var(--color-border); }
.chip button svg { width: 12px; height: 12px; }
.chip-input, .subject { flex: 1; min-width: 160px; border: 0; background: none; padding: 6px 0; outline-offset: 0; }
.compose-editor { min-height: 230px; padding: var(--space-4); font-size: var(--text-sm); line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.compose-editor:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); }
.tpl-var { display: inline-block; padding: 0 4px; border-radius: var(--radius-xs); background: var(--status-partial-bounce-soft); color: var(--color-text); outline: 1px dashed var(--status-partial-bounce); font-size: .95em; }

.etg-sig { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: 4px 8px 4px 0; color: var(--color-text-muted); font-size: var(--text-xs); user-select: none; }
.sig-content { display: inline-flex; align-items: center; gap: 6px; }
.sig-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.sig-x:hover { color: var(--color-brand); border-color: var(--color-brand); }
.sig-x svg { width: 11px; height: 11px; }

.link-warn { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; margin: 0 var(--space-4) var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--status-partial-bounce-soft); font-size: var(--text-xs); }
.link-warn > svg { color: var(--status-partial-bounce); margin-top: 1px; }
.link-warn p { flex: 1; min-width: 200px; margin: 0; overflow-wrap: anywhere; }
.lw-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-left: 24px; }

.etg-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-xs);
}
.tb-brand { display: inline-flex; padding-right: var(--space-1); }
.tb-sep { width: 1px; height: 20px; background: var(--color-border); }
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: var(--weight-medium); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; width: 28px; height: 16px; border-radius: var(--radius-full); background: var(--color-border-strong); transition: background var(--duration-fast); }
.switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform var(--duration-base) var(--ease-out); }
.switch input:checked + .switch-ui { background: var(--color-brand); }
.switch input:checked + .switch-ui::after { transform: translateX(12px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch.is-locked { cursor: not-allowed; color: var(--color-text-muted); }
.switch.is-locked input:checked + .switch-ui { background: var(--ink-500); }
.switch svg { width: 13px; height: 13px; }

.tb-menu-wrap { position: relative; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.tb-btn:hover, .tb-btn[aria-expanded="true"] { background: var(--color-surface); border-color: var(--color-border); }
.tb-btn svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.tb-btn.is-set { background: var(--status-done-soft); color: var(--status-done); }
.tb-btn.is-set svg { color: currentColor; }
.tb-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 290px; padding: var(--space-2);
  background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  animation: pop-in var(--duration-base) var(--ease-out);
}
.tb-menu-wide { width: 340px; padding: var(--space-3); }
.tb-menu-h { margin: var(--space-1) var(--space-2) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.tb-menu-wide .tb-menu-h { margin-inline: 0; }
.tpl-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; font-size: var(--text-sm); }
.tpl-item:hover, .tpl-item:focus-visible { background: var(--color-surface-sunken); }
.tpl-item[aria-disabled="true"] { color: var(--color-text-subtle); }
.tpl-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-brand); }
.tpl-lock svg { width: 12px; height: 12px; }
.tb-menu-foot { margin: var(--space-2) var(--space-2) var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-text-subtle); line-height: 1.45; }
.tb-menu-wide .tb-menu-foot { margin-inline: 0; }
.fu-modes { border: 0; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 4px; }
.fu-modes label { display: flex; gap: var(--space-2); padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.fu-modes label:hover { background: var(--color-surface-sunken); }
.fu-modes label:has(input:checked) { background: var(--color-brand-soft); }
.fu-modes input { accent-color: var(--color-brand); margin-top: 2px; }
.fu-modes b { display: block; color: var(--color-text); font-size: var(--text-sm); }
.fu-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.tb-group { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 8px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: var(--weight-medium); white-space: nowrap; }
.tb-group svg { width: 14px; height: 14px; color: var(--color-text-muted); }

.compose-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.gmail-send { padding: 9px 22px; border-radius: var(--radius-full); border: 0; background: var(--ink-800); color: #fff; font-weight: var(--weight-semibold); cursor: pointer; }
:root[data-theme="dark"] .gmail-send { background: var(--ink-200); color: var(--ink-900); }
.gmail-send:hover { opacity: .9; }
.compose-foot-hint { font-size: 11px; color: var(--color-text-subtle); }

.compose.is-sent > *:not(.compose-title) { display: none; }
.compose.is-sent::after { content: "Thư đã gửi. Khung soạn sẽ mở lại sau vài giây để bạn thử tiếp."; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

.snackbar {
  position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: 50; display: flex; align-items: center; gap: var(--space-4);
  max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--ink-900); color: var(--ink-50); font-size: var(--text-sm); box-shadow: var(--shadow-dialog);
  animation: pop-in var(--duration-base) var(--ease-out);
}
:root[data-theme="dark"] .snackbar { background: var(--ink-100); color: var(--ink-900); }
.snack-act { border: 0; background: none; color: var(--red-300); font-weight: var(--weight-semibold); cursor: pointer; padding: 4px; white-space: nowrap; }
:root[data-theme="dark"] .snack-act { color: var(--red-600); }

/* ---------- Cảnh 3: Popup ---------- */
.popup-stage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-8); align-items: start; }
.state-list { display: grid; gap: 6px; max-width: 320px; }
.state-list button {
  text-align: left; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-sm); cursor: pointer;
}
.state-list button[aria-checked="true"] { border-color: var(--color-brand); box-shadow: inset 3px 0 0 var(--color-brand); font-weight: var(--weight-semibold); }

.popup {
  position: relative; width: 380px; max-width: 100%; height: 560px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
.pp-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.pp-ws { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
.pp-ws-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.2; }
.pp-ws-sub { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-badge { padding: 2px 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: var(--weight-semibold); }
.plan-free { background: var(--color-surface-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.plan-business { background: var(--ink-900); color: #fff; }
:root[data-theme="dark"] .plan-business { background: var(--ink-100); color: var(--ink-900); }

.pp-banner { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); line-height: 1.45; }
.pp-banner > svg { margin-top: 1px; }
.pp-banner .btn { display: flex; margin-top: var(--space-2); }
.pp-banner-warn { background: var(--status-partial-bounce-soft); }
.pp-banner-warn > svg { color: var(--status-partial-bounce); }
.pp-banner-dnd { background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); }

.pp-tabs { display: flex; padding: 0 var(--space-2); border-bottom: 1px solid var(--color-border); }
.pp-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border: 0; background: none; cursor: pointer;
  font-size: var(--text-sm); color: var(--color-text-muted); box-shadow: inset 0 -2px 0 transparent;
}
.pp-tabs button[aria-selected="true"] { color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: inset 0 -2px 0 var(--color-brand); }
.count { min-width: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-brand); color: var(--color-on-brand); font-size: 11px; line-height: 18px; }
.pp-panel { flex: 1; overflow-y: auto; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-3); padding: 10px var(--space-4); border-bottom: 1px solid var(--color-border); }
.feed-item .mark-wrap { margin-top: 2px; }
.feed-text { min-width: 0; font-size: var(--text-sm); }
.feed-text p { margin: 0; line-height: 1.4; }
.feed-subj { color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-meta { color: var(--color-text-subtle); font-size: 11px; }
.feed-ago { font-size: 11px; color: var(--color-text-subtle); white-space: nowrap; }
.feed-item.is-locked .feed-text .blurred { filter: blur(4px); }
.feed-lock { display: flex; align-items: center; gap: 4px; margin-top: 2px !important; font-size: 11px; color: var(--color-brand); font-weight: var(--weight-medium); }
.feed-lock svg { width: 12px; height: 12px; }
.pp-more { display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; }
.pp-more svg { width: 13px; height: 13px; }

.rem-list { list-style: none; margin: 0; padding: 0; }
.rem-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-out); }
.rem-item.is-leaving { opacity: 0; transform: translateX(24px); }
.rem-top { display: flex; align-items: center; gap: var(--space-2); }
.rem-mode { font-size: 11px; color: var(--color-text-subtle); }
.rem-subj { margin: 6px 0 2px; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.35; }
.rem-meta { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.rem-actions { display: flex; gap: var(--space-2); }

.ctl { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.ctl-h { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ctl-sub { margin: 2px 0 var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.ctl .seg button { font-size: var(--text-xs); }
.ctl-status { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ctl-status svg { width: 14px; height: 14px; }
.gm-card { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.gm-card .ctl-sub { margin-bottom: var(--space-2); }
.gm-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--status-done); flex: none; }
.gm-dot.is-off { background: var(--status-partial-bounce); }
.pp-fine { margin: var(--space-2) 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.45; }
.pp-ver { padding: var(--space-3) var(--space-4); margin: 0; }
.pp-small { font-size: var(--text-xs); color: var(--color-text-muted); }
.pp-empty { display: grid; justify-items: center; gap: 4px; padding: var(--space-12) var(--space-6); text-align: center; }
.pp-empty > svg { width: 28px; height: 28px; color: var(--status-done); }
.pp-empty p { margin: 0; }

.pp-signed-out { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); height: 100%; padding: var(--space-8) var(--space-6); }
.pp-signed-out h2 { margin: var(--space-4) 0 0; font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.pp-signed-out p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pp-signed-out .pp-fine { margin-top: auto; }

.pp-toast { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--ink-900); color: var(--ink-50); font-size: var(--text-xs); box-shadow: var(--shadow-pop); animation: pop-in var(--duration-base) var(--ease-out); }
.pp-toast button { border: 0; background: none; color: var(--red-300); font-weight: var(--weight-semibold); cursor: pointer; }
:root[data-theme="dark"] .pp-toast { background: var(--ink-100); color: var(--ink-900); }
:root[data-theme="dark"] .pp-toast button { color: var(--red-600); }

/* ---------- Cảnh 4: Thông báo desktop ---------- */
.notify-triggers { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.desktop {
  position: relative; min-height: 460px; border-radius: var(--radius-md); overflow: hidden;
  background-color: var(--ink-200);
  background-image: radial-gradient(var(--ink-300) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--color-border);
}
:root[data-theme="dark"] .desktop { background-color: #0f0d0d; background-image: radial-gradient(#2a2526 1px, transparent 1px); }
.desktop-dnd { position: absolute; top: var(--space-4); left: var(--space-4); max-width: 360px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-xs); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.desktop-dnd.pulse { animation: pulse 600ms var(--ease-out); }
@keyframes pulse { 30% { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); } }
.toast-stack { position: absolute; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: min(364px, calc(100% - 32px)); }
.os-toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: var(--shadow-pop); animation: slide-in var(--duration-slow) var(--ease-out); }
@keyframes slide-in { from { opacity: 0; transform: translateX(32px); } }
.os-toast-head { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--color-text-muted); }
.os-app { font-weight: var(--weight-semibold); color: var(--color-text); }
.os-src { flex: 1; }
.os-title { margin: var(--space-2) 0 2px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.os-body { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.os-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.os-actions button { flex: 1; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; }
.os-actions button:hover { border-color: var(--color-border-strong); }
.os-done { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--status-done); font-weight: var(--weight-semibold); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .popup-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .popup-states { justify-self: stretch; }
  .state-list { max-width: none; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
  .stage-bar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .stage-title { display: none; }
  .scene-tabs { order: 3; width: 100%; margin: 0; }
  .stage-controls { margin-left: auto; }
  #stage { padding: var(--space-4); }
  .gmail-body { grid-template-columns: 1fr; }
  .gmail-rail { display: none; }
  .gmail-name { min-width: 0; }
  .gmail-search { display: none; }
  .g-row { grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; height: auto; padding: 10px var(--space-3); gap: 2px var(--space-2); }
  .g-check { display: none; }
  .g-mark { grid-column: 1; grid-row: 1 / 3; }
  .g-to { grid-column: 2; grid-row: 1; font-weight: var(--weight-semibold); }
  .g-subj { grid-column: 2 / 4; }
  .g-snip { display: none; }
  .g-time { grid-column: 3; grid-row: 1; }
  .compose-foot-hint { display: none; }
  .tb-sep { display: none; }
  .tb-group { margin-left: 0; }
  .tb-menu, .tb-menu-wide { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; max-height: 70vh; overflow: auto; }
  .snackbar { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .popup { height: 540px; }
}