/* DRAGON — Web shell (dragonos.app)
 * Applies the Dragon Design System v1 (see /design_handoff/README.md)
 * Brand: thin geometric DRAGON wordmark + particle trail; navy primary, cyan accent. */

:root {
  /* Navy scale — primary brand */
  --navy-950: #050d24;
  --navy-900: #0a1638;
  --navy-800: #0e1f4d;
  --navy-700: #18295e;
  --navy-600: #243a78;
  --navy-500: #3a519a;

  /* Slate neutrals */
  --slate-500: #4a5d87;
  --slate-400: #6b7da3;
  --slate-300: #93a1bf;
  --slate-200: #c5cee0;
  --slate-100: #e0e6f1;

  /* Surfaces */
  --bg-app:     #eef1f7;
  --bg-canvas:  #f6f8fc;
  --paper:      #ffffff;
  --paper-tint: #fbfcfe;
  --line:       #e4e8f2;
  --line-strong:#d1d8e8;

  /* Cyan accent — logo's gradient terminus */
  --cyan-300: #7dd6ff;
  --cyan-400: #1fa9ff;
  --cyan-500: #0d7fd6;
  --blue-500: #2e5bdb;
  --blue-600: #1f44b3;

  /* Status */
  --green-500: #14a36b;
  --amber-500: #d99a13;
  --red-500:   #d94d4d;

  /* Brand gradient — particle trail (navy → cyan) */
  --grad-trail: linear-gradient(90deg, #0e1f4d 0%, #18295e 35%, #2e5bdb 70%, #1fa9ff 100%);

  /* Shadows */
  --shadow-lg: 0 24px 60px rgba(14,31,77,0.18), 0 2px 4px rgba(14,31,77,0.05);
  --shadow-md: 0 4px 18px rgba(14,31,77,0.08);
  --shadow-sm: 0 1px 2px rgba(14,31,77,0.06);

  /* Legacy aliases — keep old tokens mapped to new to avoid breaking inline styles */
  --navy:        var(--navy-800);
  --navy-2:      var(--navy-700);
  --blue:        var(--blue-500);
  --blue-bright: var(--cyan-400);
  --bg:          var(--paper);
  --bg-shell:    var(--paper-tint);
  --bg-elev:     var(--paper);
  --text:        var(--navy-800);
  --text-sub:    var(--slate-500);
  --text-muted:  var(--slate-400);
  --success:     var(--green-500);
  --warn:        var(--amber-500);
  --danger:      var(--red-500);
  --accent-soft: rgba(31,169,255,0.10);
  --line-soft:   var(--line);
  --shadow-card: var(--shadow-md);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-app);
  color: var(--navy-800);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Display family helper */
.display { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: -0.01em; }
.mono    { font-family: 'JetBrains Mono', monospace; }

/* Subtle backdrop — radial light pools + dotted logo motif */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(31,169,255,0.06), transparent 70%),
    radial-gradient(900px 600px at 10% 90%, rgba(46,91,219,0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(14,31,77,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ===== Titlebar (44px, navy-900) — flush with tabbar below ===== */
.titlebar {
  height: 44px;
  background: var(--navy-900);
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 18px;
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}
.tl-dots { display: flex; gap: 8px; flex-shrink: 0; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; }
.tl-dot.r { background: #ff5f57; }
.tl-dot.y { background: #febc2e; }
.tl-dot.g { background: #28c840; }

.tl-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.tl-logo .word {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200; font-size: 14px;
  letter-spacing: 0.22em;
  color: #fff;
}
.tl-logo .trail {
  display: inline-block; line-height: 0;
  opacity: 0.85;
}
.tl-logo .version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.tl-center {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.tl-center .workspace-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.tl-center .workspace-pill:hover { background: rgba(255,255,255,0.10); }
.tl-center .ws-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-400);
}
.tl-center .ws-name { font-weight: 600; }
.tl-center .ws-sep { color: rgba(255,255,255,0.4); }
.tl-center .ws-branch {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
}
.tl-center .ws-chev { color: rgba(255,255,255,0.55); margin-left: 2px; }

.tl-right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.tl-icon-btn {
  width: 30px; height: 30px;
  border-radius: 7px; border: none;
  background: transparent;
  color: rgba(255,255,255,0.60);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.tl-icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.tl-right .connect-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.tl-right .connect-pill.online {
  background: rgba(20,163,107,0.20);
  color: #6df0b7;
}
.tl-right .connect-pill.offline {
  background: rgba(217,77,77,0.20);
  color: #ff9c9c;
}
.tl-right .connect-pill .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

/* Language picker */
.lang-picker { position: relative; }
.lang-picker .tl-icon-btn {
  width: auto; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.lang-current {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.lang-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--navy-800);
  text-align: left;
}
.lang-option:hover { background: var(--bg-canvas); }
.lang-option.active {
  background: rgba(31,169,255,0.10);
  color: var(--cyan-500);
}
.lang-option .lang-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slate-400);
  background: var(--bg-canvas);
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.lang-option.active .lang-code {
  background: var(--cyan-400);
  color: #fff;
}
.lang-option .lang-name { flex: 1; }

.tl-right .user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-trail);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12.5px;
}

/* ===== Tab bar (38px, paper-tint) — sits flush under titlebar ===== */
.tabbar {
  height: 38px;
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 99;
}
.tab-strip {
  display: flex; align-items: center;
  gap: 2px; flex: 1;
  padding: 0;
}
.tab-strip .tab-sep {
  width: 1px; height: 18px;
  background: var(--line);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ===== Legacy dragon-topbar kept as alias for setup.html ===== */
.dragon-topbar {
  height: 44px;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: stretch;
  padding: 0 16px;
  gap: 14px;
  position: sticky; top: 0; z-index: 100;
}
.shell-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  margin-right: 6px;
}
.shell-logo .word {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200; font-size: 14px;
  letter-spacing: 0.22em;
  color: #fff;
}
.shell-logo .trail {
  display: inline-block; line-height: 0;
}

.tab-strip {
  display: flex; align-items: stretch;
  gap: 4px; flex: 1;
  padding: 6px 0 0;
}
.tab {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--slate-500);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tab.tab-home { padding: 0 10px; font-weight: 600; }
.tab.tab-app  { padding: 0 4px 0 8px; }
.tab:hover { color: var(--navy-800); background: rgba(14,31,77,0.04); }
.tab.active {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--navy-800);
  box-shadow: 0 1px 3px rgba(14,31,77,0.04);
}
.tab.active .name { font-weight: 600; }
.tab .ic {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: currentColor;
}
.tab .ic svg { display: block; }
.tab .ic .ic-fill {
  display: block;
  width: 14px; height: 14px; border-radius: 4px;
}
.tab .name {
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab .close {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: currentColor; font-size: 13px;
  opacity: 0.55;
  flex-shrink: 0;
}
.tab .close:hover { opacity: 1; background: rgba(14,31,77,0.08); }
.tab-new {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
}
.tab-new:hover { color: var(--navy-800); background: rgba(14,31,77,0.04); }

.shell-right {
  display: flex; align-items: center; gap: 10px;
  padding: 0;
}
.workspace-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.85);
}
.workspace-pill .ic {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--grad-trail);
}
.connect-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.connect-pill.online {
  background: rgba(20,163,107,0.18);
  color: #6df0b7;
}
.connect-pill.offline {
  background: rgba(217,77,77,0.18);
  color: #ff9c9c;
}
.connect-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.shell-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px; border: none; background: transparent;
  color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.shell-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-trail);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 13px;
}

.app-body {
  background: var(--bg-canvas);
  min-height: calc(100vh - 44px);
  position: relative; z-index: 1;
}

/* ===== Connect-agent missing banner (Setup wizard only) ===== */
.connect-missing {
  position: sticky; top: 44px; z-index: 99;
  background: linear-gradient(90deg, rgba(217,154,19,0.10), rgba(217,154,19,0.06));
  border-bottom: 1px solid rgba(217,154,19,0.30);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
}
.connect-missing .icn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--amber-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.connect-missing .msg b { color: var(--navy-800); }
.connect-missing .msg .sub { color: var(--slate-500); font-size: 12px; margin-top: 2px; }
.connect-missing .actions {
  margin-left: auto; display: flex; gap: 8px;
}
.connect-missing .btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  border: none; cursor: pointer;
  background: var(--amber-500); color: white;
}
.connect-missing .btn.outline {
  background: white; color: var(--amber-500);
  border: 1px solid var(--amber-500);
}

/* ===== Tier badge ===== */
.tier-badge {
  display: inline-block;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 100px;
  font-weight: 600;
  vertical-align: 2px;
  cursor: help;
}
.tier-badge.verified {
  background: rgba(20,163,107,0.15);
  color: var(--green-500);
}
.tier-badge.inferred {
  background: rgba(217,154,19,0.18);
  color: var(--amber-500);
}

/* ===== You vs Required line ===== */
.req-line {
  margin-top: 4px;
  font-size: 11px;
  color: var(--slate-500);
  font-family: 'JetBrains Mono', monospace;
  display: flex; gap: 8px; align-items: center;
}
.req-line .you b { color: var(--navy-800); font-weight: 600; }
.req-line .req b { color: var(--navy-800); font-weight: 600; }
.req-line .sep { color: var(--slate-400); }

/* ===== Setup wizard aggregate bar ===== */
.agg-bar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--slate-500);
}
.agg-bar b { color: var(--navy-800); margin-right: 6px; }
.agg-bar code {
  background: var(--bg-canvas);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--navy-800);
}

/* ===== Setup wizard per-app block ===== */
.apps-block {
  margin-top: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  grid-column: 1 / -1;
}
.apps-block h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.app-row {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.app-row:first-child { border-top: none; padding-top: 0; }
.app-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.app-head .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: white;
  box-shadow: var(--shadow-sm);
}
.app-head .info { flex: 1; }
.app-head .title {
  font-size: 15px; font-weight: 700;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.app-head .sub {
  font-size: 12px; color: var(--slate-500);
  margin-top: 2px;
}
.app-status {
  font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
}
.app-status.running { background: rgba(20,163,107,0.12); color: var(--green-500); }
.app-status.ready { background: rgba(31,169,255,0.12); color: var(--cyan-500); }
.app-status.incomplete { background: rgba(217,154,19,0.12); color: var(--amber-500); }
.app-status.miss { background: rgba(217,77,77,0.12); color: var(--red-500); }

.checks {
  display: grid; grid-template-columns: 1fr;
  gap: 4px;
  padding-left: 54px;
  margin-top: 4px;
}
.check {
  display: grid;
  grid-template-columns: 18px 180px 1fr;
  align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--slate-500);
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.check:last-child { border-bottom: none; }
.check .mark { font-weight: 700; text-align: center; }
.check.ok .mark { color: var(--green-500); }
.check.fail .mark { color: var(--red-500); }
.check.info .mark { color: var(--slate-400); }
.check .name { font-weight: 600; color: var(--navy-800); }
.check .you-req {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-400);
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.check .you-req .you b { color: var(--navy-800); font-weight: 600; }
.check .you-req .sep { color: var(--slate-400); }
.check .you-req .req { color: var(--slate-500); }
.check.fail .you-req .you b { color: var(--red-500); }

.dep-detail {
  margin-top: 12px; margin-left: 54px;
  font-size: 12px;
}
.dep-detail summary {
  cursor: pointer;
  color: var(--cyan-500);
  user-select: none;
}
.dep-detail .dep-list {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border-radius: 8px;
  line-height: 1.8;
}
.dep-detail .dep-list code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--navy-800);
  margin: 2px 4px 2px 0;
  display: inline-block;
}
.dep-detail .dep-list code.missing {
  background: rgba(217,77,77,0.10);
  color: var(--red-500);
  font-weight: 600;
}
.dep-detail .dep-action {
  margin-top: 8px;
  color: var(--slate-500);
  font-size: 11px;
}
.dep-detail .dep-action code {
  background: var(--bg-canvas);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--navy-800);
}

/* ===== Install flow (when Connect offline on Launcher) ===== */
.install-flow {
  max-width: 720px;
  margin: 40px auto 56px;
  padding: 0 20px;
  position: relative; z-index: 2;
}
.install-hero {
  text-align: center;
  margin-bottom: 32px;
}
.install-hero .wordmark {
  display: inline-flex; flex-direction: column; align-items: stretch;
  margin-bottom: 18px;
  line-height: 1;
}
.install-hero .wordmark .word {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200; font-size: 32px;
  letter-spacing: 0.22em;
  color: var(--navy-800);
  white-space: nowrap;
  padding-right: 0.22em;
}
.install-hero h1 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 36px;
  color: var(--navy-800);
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  line-height: 1.1;
}
.install-hero p {
  color: var(--slate-500);
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}
.install-hero .tagline {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 13px;
  color: var(--cyan-500);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.install-steps-cards {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.step-card {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  opacity: 0.5;
  box-shadow: var(--shadow-sm);
  transition: opacity 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.step-card.active {
  opacity: 1;
  border-color: var(--cyan-400);
  box-shadow: 0 12px 36px rgba(31,169,255,0.15);
}
.step-card.hint { opacity: 0.85; }
.step-card.done {
  opacity: 1;
  border-color: var(--green-500);
  background: rgba(20,163,107,0.04);
}
.step-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  transition: background 280ms ease, color 280ms ease;
}
.step-card.active .step-num {
  background: var(--grad-trail);
  color: white;
}
.step-card.done .step-num {
  background: var(--green-500);
  color: white;
}
.step-card.done .step-num span { display: none; }
.step-card.done .step-num::before {
  content: "";
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.step-body { flex: 1; min-width: 0; }
.step-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400; font-size: 17px;
  color: var(--navy-800);
}
.step-desc {
  font-size: 13px; color: var(--slate-500);
  margin: 4px 0 14px;
  line-height: 1.6;
}
.step-desc code {
  background: var(--bg-canvas);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--navy-800);
}

/* Primary install button — uses brand gradient (--grad-trail) */
.copy-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--grad-trail);
  color: white; border: none; cursor: pointer;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  font-family: 'Inter', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 20px rgba(46,91,219,0.32);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 28px rgba(46,91,219,0.42); }
.copy-btn:active { transform: scale(0.97); }
.copy-btn.copied {
  background: linear-gradient(135deg, #0e8155, var(--green-500));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 20px rgba(20,163,107,0.32);
}
.copy-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.cmd-preview {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--navy-900);
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid rgba(31,169,255,0.20);
}
.cmd-preview code {
  color: var(--cyan-300);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
}

/* Download-hint row below step 2 */
.dl-hint {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(31,169,255,0.06);
  border: 1px dashed rgba(31,169,255,0.30);
  border-radius: 10px;
  font-size: 12px;
  color: var(--slate-500);
}
.dl-hint svg {
  width: 16px; height: 16px;
  stroke: var(--cyan-500);
  animation: bounce-y 1.5s ease infinite;
}
.dl-hint-text strong { color: var(--navy-800); font-weight: 600; }
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Keyboard chip recipe */
.keyboard-anim {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  flex-wrap: wrap;
}
.keyboard-anim .key {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy-800);
  box-shadow: 0 1px 0 var(--line-strong);
}
.keyboard-anim .key.wide { padding: 5px 14px; font-size: 11px; color: var(--slate-500); }
.keyboard-anim .plus, .keyboard-anim .arrow {
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 600;
}

.auto-detect {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  padding: 14px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 auto 14px;
  max-width: 520px;
  font-size: 13px;
  color: var(--slate-500);
  transition: all 300ms ease;
  box-shadow: var(--shadow-sm);
}
.auto-detect.success {
  background: rgba(20,163,107,0.08);
  border-color: rgba(20,163,107,0.30);
  color: var(--green-500);
  font-weight: 600;
}
.spinner-small {
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--cyan-400);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ===== Particle Trail Loader — signature brand motif ===== */
/* Reuses the logo's navy → cyan dots growing left → right, with a wave pulse */
.trail-loader {
  display: inline-flex; align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.trail-loader .td {
  border-radius: 50%;
  opacity: 0.35;
  animation: trailPulse 1.4s ease-in-out infinite;
}
.trail-loader.trail-sm { gap: 3px; }
.trail-loader.trail-sm .td { width: 3px; height: 3px; }
.trail-loader.trail-sm .td:nth-child(1) { width: 3px; }
.trail-loader.trail-sm .td:nth-child(2) { width: 4px; height: 4px; }
.trail-loader.trail-sm .td:nth-child(3) { width: 5px; height: 5px; }
.trail-loader.trail-sm .td:nth-child(4) { width: 6px; height: 6px; }
.trail-loader.trail-sm .td:nth-child(5) { width: 7px; height: 7px; }

.trail-loader.trail-md { gap: 5px; }
.trail-loader.trail-md .td:nth-child(1) { width: 4px; height: 4px; }
.trail-loader.trail-md .td:nth-child(2) { width: 5px; height: 5px; }
.trail-loader.trail-md .td:nth-child(3) { width: 7px; height: 7px; }
.trail-loader.trail-md .td:nth-child(4) { width: 9px; height: 9px; }
.trail-loader.trail-md .td:nth-child(5) { width: 11px; height: 11px; }

.trail-loader.trail-lg { gap: 7px; }
.trail-loader.trail-lg .td:nth-child(1) { width: 5px; height: 5px; }
.trail-loader.trail-lg .td:nth-child(2) { width: 7px; height: 7px; }
.trail-loader.trail-lg .td:nth-child(3) { width: 9px; height: 9px; }
.trail-loader.trail-lg .td:nth-child(4) { width: 12px; height: 12px; }
.trail-loader.trail-lg .td:nth-child(5) { width: 15px; height: 15px; }

/* Color per position (navy → cyan), all sizes */
.trail-loader .td:nth-child(1) { background: var(--navy-500); animation-delay: 0s; }
.trail-loader .td:nth-child(2) { background: var(--navy-500); animation-delay: 0.1s; }
.trail-loader .td:nth-child(3) { background: var(--blue-500); animation-delay: 0.2s; }
.trail-loader .td:nth-child(4) { background: var(--cyan-400); animation-delay: 0.3s; }
.trail-loader .td:nth-child(5) { background: var(--cyan-300); animation-delay: 0.4s; }

@keyframes trailPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  40%      { opacity: 1;    transform: scale(1);    }
}

/* On dark surfaces (e.g. inside .btn-accent), brighten the dots */
.btn-accent .trail-loader .td:nth-child(1),
.btn-accent .trail-loader .td:nth-child(2) { background: rgba(255,255,255,0.55); }
.btn-accent .trail-loader .td:nth-child(3) { background: var(--cyan-300); }
.btn-accent .trail-loader .td:nth-child(4),
.btn-accent .trail-loader .td:nth-child(5) { background: #fff; }
.celebrate {
  font-size: 18px;
  display: inline-block;
  animation: pop 700ms ease;
}
@keyframes pop {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* "Other ways to install" disclosure */
.install-flow .alt-install {
  max-width: 520px;
  margin: 0 auto;
}
.alt-install {
  width: 100%;
}
.alt-install summary {
  font-size: 12px;
  color: var(--slate-400);
  cursor: pointer;
  text-align: center;
  padding: 8px;
  user-select: none;
}
.alt-install summary:hover { color: var(--slate-500); }
.alt-install[open] summary { color: var(--navy-800); }
.alt-install-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
}
.alt-install-body a {
  color: var(--slate-500);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
}
.alt-install-body a:hover { color: var(--cyan-500); }

.alt-cmd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.alt-label { font-size: 12px; color: var(--slate-500); }
.alt-copy-btn {
  background: var(--paper);
  color: var(--navy-800);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.alt-copy-btn:hover { background: var(--bg-canvas); border-color: var(--slate-300); }
.alt-cmd {
  display: block;
  background: var(--navy-900);
  color: var(--cyan-300);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow-x: auto;
  margin-bottom: 10px;
}

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: white;
  padding: 12px 20px; border-radius: 100px;
  font-size: 13px; font-weight: 500; z-index: 1000;
  display: none;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.08);
}
.toast.show { display: block; }

/* ===== Fullscreen preference prompt (modal) ===== */
.fs-prompt {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 2000;
  animation: fs-prompt-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.fs-prompt-card {
  display: flex; align-items: flex-start; gap: 14px;
  width: 360px;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.fs-prompt-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--grad-trail);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(46,91,219,0.32);
}
.fs-prompt-body { flex: 1; min-width: 0; }
.fs-prompt-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400; font-size: 15px;
  color: var(--navy-800);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.fs-prompt-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.5;
  margin-bottom: 12px;
}
.fs-prompt-actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
}
.fs-prompt-actions .btn { padding: 6px 12px; font-size: 12px; }
.fs-btn-skip { color: var(--slate-500); }
.fs-prompt-close {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--slate-400);
  cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.fs-prompt-close:hover { color: var(--navy-800); background: var(--bg-canvas); }

@keyframes fs-prompt-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Resume-fullscreen banner (subtle, top) ===== */
.fs-resume {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  animation: fs-prompt-in 240ms ease;
  pointer-events: none;
}
.fs-resume-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(10,22,56,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: auto;
}
.fs-resume-icon { color: var(--cyan-300); display: flex; }
.fs-resume-text a {
  color: var(--cyan-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fs-resume-text a:hover { color: #fff; }

/* ===== Reusable particle-trail decorative SVG container ===== */
.particle-trail-decor {
  display: block;
  margin: 0 auto;
  opacity: 0.85;
}

/* ===== Setup wizard CTA card (kept) ===== */
.connect-cta {
  max-width: 600px;
  margin: 80px auto 40px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: var(--shadow-lg);
}
.connect-cta .icn { font-size: 48px; margin-bottom: 18px; }
.connect-cta h2 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 26px;
  color: var(--navy-800);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.connect-cta p {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.6;
  margin-bottom: 8px;
}
.connect-cta p code {
  background: var(--bg-canvas);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--navy-800);
}
.connect-cta .muted { color: var(--slate-400); font-size: 13px; }
.connect-cta-actions {
  margin-top: 28px;
  display: flex; gap: 16px; justify-content: center; align-items: center;
}
.connect-cta .btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--navy-800);
  color: white;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.connect-cta .btn-primary:hover { background: var(--navy-700); }

.btn-recheck {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  background: var(--paper);
  color: var(--navy-800);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms ease;
}
.btn-recheck:hover {
  background: var(--bg-canvas);
  border-color: var(--slate-300);
  color: var(--navy-800);
}
.btn-recheck:active { transform: scale(0.97); }
.btn-recheck svg { flex-shrink: 0; transition: transform 600ms ease; }
.btn-recheck:hover svg { transform: rotate(360deg); }

.btn-link {
  color: var(--slate-400);
  font-size: 13px;
  text-decoration: none;
  padding: 8px 12px;
  font-weight: 500;
}
.btn-link:hover { color: var(--navy-800); text-decoration: underline; }

/* keyboard hint */
kbd {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800);
  box-shadow: 0 1px 0 var(--line-strong);
}

.install-steps {
  text-align: left;
  max-width: 460px;
  margin: 8px auto 22px;
  padding-left: 22px;
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.7;
}
.install-steps li { padding: 3px 0; }
.install-steps li strong { color: var(--navy-800); font-weight: 600; }
.install-steps code {
  background: var(--bg-canvas);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--navy-800);
}

.btn-tertiary {
  font-size: 12px;
  color: var(--slate-400);
  text-decoration: none;
  padding: 12px 18px;
  font-weight: 500;
}
.btn-tertiary:hover { color: var(--navy-800); text-decoration: underline; }

/* =========================================================
   MY TODAY — subpage router, widgets, Friday chat/wizard/settings
   Added 2026-05-23 (case)
   ========================================================= */

/* ───── Subpage router ───── */
.home-subpages { display: contents; }
.home-subpage { display: none; }
.home-subpage.active { display: block; }

.subpage-coming-soon {
  padding: 90px 24px 60px;
  text-align: center;
  color: var(--slate-500);
}
.subpage-coming-soon h2 { color: var(--navy-800); margin-bottom: 10px; font-size: 28px; }
.subpage-coming-soon p { font-size: 14px; }

.today-loader {
  padding: 80px 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  color: var(--slate-500);
  font-size: 13px;
}

/* ───── Today hero ───── */
.today-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.today-hero-text { flex: 1; min-width: 320px; }
.today-hero-eyebrow { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--cyan-500); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 10px; }
.today-hero h1 { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 42px; letter-spacing: -0.005em; color: var(--navy-800); line-height: 1.05; }
.today-hero h1 .accent { color: var(--cyan-500); }
.today-hero-glance { margin-top: 12px; font-size: 13.5px; color: var(--slate-500); line-height: 1.55; }
.today-hero-glance strong { color: var(--navy-700); font-weight: 600; }
.today-hero-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--slate-400); letter-spacing: 0.04em; margin-top: 6px; }

/* ───── Grid ───── */
.today-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 24px; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.tw { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 150px; position: relative; }
.tw-eyebrow { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--slate-400); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tw-eyebrow .tw-action { font-size: 10.5px; font-weight: 600; color: var(--cyan-500); cursor: pointer; text-transform: none; letter-spacing: 0; }
.tw-eyebrow .tw-action:hover { color: var(--cyan-400); }

/* ───── Weather ───── */
.tw-weather-row { display: flex; align-items: flex-start; gap: 14px; }
.tw-weather-icon { color: var(--cyan-500); flex-shrink: 0; margin-top: 2px; }
.tw-weather-info { flex: 1; }
.tw-weather-temp { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 38px; color: var(--navy-800); line-height: 1; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 4px; }
.tw-weather-temp .deg { font-size: 24px; color: var(--slate-400); font-weight: 400; }
.tw-weather-cond { font-size: 13px; color: var(--navy-700); font-weight: 500; margin-top: 2px; }
.tw-weather-hilo { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--slate-500); margin-top: 4px; }
.tw-weather-loc { font-size: 11.5px; color: var(--slate-400); margin-top: 2px; }
.tw-weather-hours { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; overflow-x: auto; }
.tw-weather-hour { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.tw-weather-hour .hr-lbl { font-size: 9.5px; color: var(--slate-400); font-weight: 600; letter-spacing: 0.04em; }
.tw-weather-hour .hr-icon { color: var(--slate-500); }
.tw-weather-hour .hr-temp { color: var(--navy-700); font-weight: 600; font-size: 11px; }

/* ───── Next Up ───── */
.tw-nextup-countdown { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--cyan-500); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.tw-nextup-countdown .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-400); animation: nextupPulse 1.8s ease-in-out infinite; }
@keyframes nextupPulse { 50% { opacity: 0.4; transform: scale(0.85); } }
.tw-nextup-title { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 18px; color: var(--navy-800); margin-top: 6px; line-height: 1.3; }
.tw-nextup-time { font-size: 12.5px; color: var(--slate-500); margin-top: 4px; }
.tw-nextup-attendees { font-size: 11px; color: var(--slate-400); margin-top: 4px; }
.tw-nextup-actions { margin-top: auto; padding-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tw-nextup-empty { color: var(--slate-400); font-size: 13px; font-style: italic; margin-top: 8px; }
.tw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font: 600 12px 'Inter', sans-serif; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--navy-800); cursor: pointer; transition: all 0.12s; }
.tw-btn:hover { border-color: var(--slate-300); background: var(--paper-tint); }
.tw-btn.primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.tw-btn.primary:hover { background: var(--navy-700); }
.tw-btn.accent { background: var(--grad-trail); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 14px rgba(46,91,219,0.25); }
.tw-btn.accent:hover { filter: brightness(1.05); }

/* ───── Schedule timeline ───── */
.tw-schedule { min-height: 240px; padding-bottom: 12px; }
.tw-schedule-timeline { position: relative; margin-top: 10px; height: 180px; border-left: 1px solid var(--line); margin-left: 40px; }
.tw-schedule-tick { position: absolute; left: -38px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--slate-400); font-weight: 600; line-height: 1; }
.tw-schedule-tick::after { content: ''; position: absolute; left: 32px; top: 4px; width: 8px; height: 1px; background: var(--line); }
.tw-schedule-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--cyan-400); z-index: 3; }
.tw-schedule-now::before { content: 'NOW'; position: absolute; left: -2px; top: -7px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; color: var(--cyan-500); background: var(--paper); padding: 0 4px; letter-spacing: 0.06em; }
.tw-schedule-event { position: absolute; left: 6px; right: 8px; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: var(--navy-700); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 2; box-shadow: var(--shadow-sm); }
.tw-schedule-event .se-time { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--slate-500); margin-right: 6px; font-weight: 600; }
.tw-schedule-event.cyan  { background: rgba(31,169,255,0.10); border-left: 2px solid var(--cyan-400); }
.tw-schedule-event.navy  { background: rgba(36,58,120,0.08);  border-left: 2px solid var(--navy-600); }
.tw-schedule-event.amber { background: rgba(217,154,19,0.10); border-left: 2px solid var(--amber-500); }
.tw-schedule-event.green { background: rgba(20,163,107,0.10); border-left: 2px solid var(--green-500); }
.tw-schedule-event.gray  { background: var(--bg-canvas); border-left: 2px solid var(--slate-300); color: var(--slate-500); }

/* ───── Inbox Pulse ───── */
.tw-inbox-count { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 32px; color: var(--navy-800); line-height: 1; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 4px; }
.tw-inbox-count .unit { font-size: 14px; color: var(--slate-400); font-weight: 400; }
.tw-inbox-sub { font-size: 12px; color: var(--slate-500); margin-top: 4px; }
.tw-inbox-senders { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.tw-inbox-sender { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tw-inbox-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tw-inbox-sender .name { color: var(--navy-700); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-inbox-sender .ct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--slate-500); font-weight: 600; }

/* ───── AI Today ───── */
.tw-ai-big { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 32px; color: var(--navy-800); line-height: 1; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 4px; }
.tw-ai-big .unit { font-size: 14px; color: var(--slate-400); font-weight: 400; }
.tw-ai-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cyan-500); font-weight: 700; margin-top: 4px; }
.tw-ai-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: var(--bg-canvas); overflow: hidden; }
.tw-ai-bar-fill { display: block; height: 100%; background: var(--grad-trail); border-radius: 2px; transition: width 600ms ease; }
.tw-ai-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.tw-ai-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tw-ai-row .lbl { color: var(--slate-500); flex: 1; }
.tw-ai-row .val { color: var(--navy-700); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.tw-ai-row .val.green { color: var(--green-500); }

/* ───── Tasks ───── */
.tw-tasks { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.tw-task { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.tw-task:last-child { border-bottom: none; }
.tw-task-checkbox { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--slate-300); background: var(--paper); flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: all 0.12s; position: relative; }
.tw-task-checkbox:hover { border-color: var(--cyan-400); }
.tw-task.done .tw-task-checkbox { background: var(--cyan-500); border-color: var(--cyan-500); }
.tw-task.done .tw-task-checkbox::after { content: ''; position: absolute; left: 3px; top: 0px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.tw-task-text { flex: 1; color: var(--navy-700); line-height: 1.45; }
.tw-task.done .tw-task-text { color: var(--slate-400); text-decoration: line-through; }
.tw-task.overdue .tw-task-text { color: var(--red-500); }
.tw-task-due { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--slate-400); flex-shrink: 0; padding-top: 3px; }
.tw-task.overdue .tw-task-due { color: var(--red-500); font-weight: 700; }

/* ───── Focus ───── */
.tw-focus { min-height: 170px; }
.tw-focus-input { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--navy-800); font-family: 'Inter', sans-serif; outline: none; margin-top: 4px; transition: all 0.12s; }
.tw-focus-input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.10); }
.tw-focus-input::placeholder { color: var(--slate-400); }
.tw-focus-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tw-focus-timer { text-align: center; margin-top: auto; padding-top: 10px; }
.tw-focus-timer .time { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 500; color: var(--cyan-500); letter-spacing: 0.04em; line-height: 1; }
.tw-focus-timer .lbl { font-size: 10px; color: var(--slate-400); letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }

/* ───── Workspace Beat ───── */
.tw-beat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tw-beat-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.tw-beat-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: #fff; font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tw-beat-item .body { flex: 1; line-height: 1.45; color: var(--navy-700); }
.tw-beat-item .body strong { font-weight: 600; color: var(--navy-800); }
.tw-beat-ago { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--slate-400); flex-shrink: 0; padding-top: 2px; }

/* ───── Briefing ───── */
.tw-briefing-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.tw-briefing-item { font-size: 13px; color: var(--navy-700); line-height: 1.55; padding-left: 16px; position: relative; }
.tw-briefing-item::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-400); }
.tw-briefing-item strong { color: var(--navy-800); font-weight: 600; }
.tw-briefing-meta { font-size: 10.5px; color: var(--slate-400); margin-top: 4px; letter-spacing: 0.04em; font-family: 'JetBrains Mono', monospace; }

/* Responsive */
@media (max-width: 1180px) {
  .today-grid > .col-3, .today-grid > .col-4, .today-grid > .col-5,
  .today-grid > .col-7, .today-grid > .col-8 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .today-grid { grid-template-columns: 1fr; }
  .today-grid > * { grid-column: span 1 !important; }
  .today-hero h1 { font-size: 32px; }
}

/* =========================================================
   FRIDAY chat — floating bubble + modal
   ========================================================= */
.friday-bubble {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-trail);
  box-shadow: 0 10px 30px rgba(31,169,255,0.35), 0 2px 6px rgba(14,31,77,0.20), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 900;
  transition: transform 200ms ease, box-shadow 200ms ease;
  border: none;
}
.friday-bubble:hover { transform: scale(1.06); box-shadow: 0 14px 38px rgba(31,169,255,0.45), 0 2px 6px rgba(14,31,77,0.20), inset 0 1px 0 rgba(255,255,255,0.2); }
.friday-bubble svg { color: #fff; }
.friday-bubble.has-unread::after { content: ''; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--red-500); border: 2px solid #fff; }
.friday-bubble.hidden { display: none; }

.friday-modal {
  position: fixed; bottom: 92px; right: 24px;
  width: 420px; height: 640px; max-height: calc(100vh - 120px);
  background: var(--paper); border-radius: 18px;
  box-shadow: 0 28px 72px rgba(14,31,77,0.22), 0 4px 12px rgba(14,31,77,0.08), 0 0 0 1px rgba(14,31,77,0.06);
  display: none; flex-direction: column;
  z-index: 901; overflow: hidden;
  transform-origin: bottom right;
}
.friday-modal.open { display: flex; animation: fridayPop 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fridayPop { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.friday-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-tint); flex-shrink: 0; }
.friday-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-trail); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; }
.friday-avatar svg { color: #fff; }
.friday-header-text { flex: 1; cursor: pointer; }
.friday-header-name { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 15px; color: var(--navy-800); letter-spacing: -0.005em; }
.friday-header-sub { font-size: 10.5px; color: var(--slate-400); font-weight: 500; margin-top: 1px; }
.friday-header-actions { display: flex; gap: 2px; }
.friday-icon-btn { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--slate-400); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.friday-icon-btn:hover { background: rgba(14,31,77,0.06); color: var(--navy-700); }

.friday-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.friday-msg { max-width: 86%; }
.friday-msg.user { align-self: flex-end; }
.friday-msg.assistant { align-self: flex-start; }
.friday-msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--navy-800); word-wrap: break-word; }
.friday-msg.user .friday-msg-bubble { background: var(--navy-800); color: #fff; border-bottom-right-radius: 4px; }
.friday-msg.assistant .friday-msg-bubble { background: var(--bg-canvas); color: var(--navy-800); border-bottom-left-radius: 4px; }
.friday-msg-meta { font-size: 10px; color: var(--slate-400); margin-top: 4px; padding: 0 4px; }
.friday-msg.user .friday-msg-meta { text-align: right; }

.friday-typing { display: flex; gap: 4px; padding: 10px 14px; background: var(--bg-canvas); border-radius: 14px; border-bottom-left-radius: 4px; align-self: flex-start; }
.friday-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); animation: typingPulse 1.2s ease-in-out infinite; }
.friday-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.friday-typing-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingPulse { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.friday-empty { padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; justify-content: center; }
.friday-empty-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--grad-trail); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(31,169,255,0.30), inset 0 1px 0 rgba(255,255,255,0.2); }
.friday-empty-avatar svg { color: #fff; width: 28px; height: 28px; }
.friday-empty-greeting { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 22px; color: var(--navy-800); line-height: 1.3; }
.friday-empty-sub { font-size: 12.5px; color: var(--slate-500); max-width: 280px; line-height: 1.5; }
.friday-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; width: 100%; max-width: 320px; }
.friday-suggestion { background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; font-size: 12px; color: var(--navy-700); cursor: pointer; transition: all 0.12s; text-align: left; }
.friday-suggestion:hover { border-color: var(--cyan-400); background: rgba(31,169,255,0.04); color: var(--cyan-500); }

.friday-input-area { border-top: 1px solid var(--line); padding: 12px; flex-shrink: 0; background: var(--paper); }
.friday-input-wrap { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-canvas); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; transition: all 0.12s; }
.friday-input-wrap:focus-within { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.08); }
.friday-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--navy-800); resize: none; min-height: 20px; max-height: 120px; line-height: 1.4; }
.friday-input::placeholder { color: var(--slate-400); }
.friday-send { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--navy-800); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.friday-send:hover { background: var(--navy-700); }
.friday-send:disabled { background: var(--slate-300); cursor: not-allowed; }

@media (max-width: 720px) {
  .friday-modal { bottom: 16px; right: 16px; left: 16px; width: auto; height: calc(100vh - 100px); }
  .friday-bubble { bottom: 16px; right: 16px; }
}

/* ───── Friday wizard (first-run) ───── */
.friday-wizard-backdrop { position: fixed; inset: 0; background: rgba(5,13,36,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.friday-wizard-backdrop.open { opacity: 1; pointer-events: auto; }
.friday-wizard { background: var(--paper); border-radius: 18px; box-shadow: 0 32px 80px rgba(14,31,77,0.30), 0 0 0 1px rgba(14,31,77,0.08); width: 460px; max-width: calc(100vw - 32px); padding: 32px 32px 24px; transform: scale(0.96); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.friday-wizard-backdrop.open .friday-wizard { transform: scale(1); }
.friday-wizard-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--grad-trail); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(31,169,255,0.30), inset 0 1px 0 rgba(255,255,255,0.2); }
.friday-wizard-avatar svg { color: #fff; width: 32px; height: 32px; }
.friday-wizard-heading { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 26px; color: var(--navy-800); text-align: center; letter-spacing: -0.005em; margin-bottom: 4px; line-height: 1.3; }
.friday-wizard-sub { text-align: center; font-size: 12.5px; color: var(--slate-500); margin-bottom: 22px; }
.friday-wizard-field { margin-bottom: 16px; }
.friday-wizard-label { font-size: 11px; font-weight: 700; color: var(--slate-500); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.friday-wizard-input { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--navy-800); background: var(--paper); outline: none; transition: all 0.12s; }
.friday-wizard-input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.10); }
.friday-wizard-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.friday-wizard-chip { padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line-strong); background: var(--paper); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--navy-700); cursor: pointer; transition: all 0.12s; }
.friday-wizard-chip:hover { border-color: var(--slate-300); background: var(--paper-tint); }
.friday-wizard-chip.active { border-color: var(--cyan-500); background: var(--cyan-500); color: #fff; }
.friday-wizard-preview { background: var(--bg-canvas); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--slate-500); line-height: 1.55; margin-bottom: 18px; }
.friday-wizard-preview strong { color: var(--navy-800); font-weight: 600; }
.friday-wizard-actions { display: flex; justify-content: flex-end; gap: 8px; }
.friday-wizard-btn { padding: 10px 18px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.12s; border: 1px solid transparent; }
.friday-wizard-btn.skip { background: transparent; color: var(--slate-500); border-color: var(--line-strong); }
.friday-wizard-btn.skip:hover { background: var(--paper-tint); color: var(--navy-700); }
.friday-wizard-btn.save { background: var(--grad-trail); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(46,91,219,0.30), inset 0 1px 0 rgba(255,255,255,0.2); }
.friday-wizard-btn.save:hover { filter: brightness(1.05); }
.friday-wizard-btn.save:disabled { background: var(--slate-300); box-shadow: none; cursor: not-allowed; opacity: 0.7; }

/* ───── Friday settings panel ───── */
.friday-settings-backdrop { position: fixed; inset: 0; background: rgba(5,13,36,0.40); display: none; z-index: 1000; opacity: 0; transition: opacity 200ms ease; }
.friday-settings-backdrop.open { display: block; opacity: 1; }
.friday-settings-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background: var(--paper); box-shadow: -16px 0 40px rgba(14,31,77,0.18); z-index: 1001; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
.friday-settings-panel.open { transform: translateX(0); }
.friday-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.friday-settings-title { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 18px; color: var(--navy-800); }
.friday-settings-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.friday-settings-section { margin-bottom: 18px; }
.friday-settings-section .lbl { font-size: 10.5px; font-weight: 700; color: var(--slate-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.friday-settings-section input,
.friday-settings-section textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--navy-800); background: var(--paper); outline: none; transition: all 0.12s; }
.friday-settings-section input:focus,
.friday-settings-section textarea:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.08); }
.friday-settings-section textarea { min-height: 90px; resize: vertical; font-family: 'Inter', sans-serif; line-height: 1.5; }
.friday-settings-section .hint { font-size: 11px; color: var(--slate-400); margin-top: 6px; line-height: 1.5; }
.friday-settings-section .path { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--slate-500); background: var(--bg-canvas); padding: 6px 10px; border-radius: 6px; word-break: break-all; }
.friday-settings-footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }


/* ════════════════════════════════════════════════════════════════
   LLM SETUP WIZARD — v2 (Dragon design system aligned)
   Refactor 2026-05-23:
     • Removed `border-left` colored accent (spec Don't rule #2: "AI slop trope")
     • ProviderMark monogram (canonical brand.jsx ProviderMark, radius 5)
     • Inline meta line "v… · tier · path" (replaces dt/dd table grid)
     • Square 7px buttons (spec .btn radius: 7px), 100px pills only for status chips
     • Card radius 12px (spec .card), name weight 600 (spec AppCard)
     • Particle-trail signature motif in hero (brand DNA section 1)
     • Dotted divider-trail between cards (spec .divider-trail)
   ════════════════════════════════════════════════════════════════ */

/* Sidebar "LLM Setup" — sb-quick base + active state + badge */
.sb-quick.sb-quick-action { cursor: pointer; }
.sb-quick.sb-quick-action.active { background: var(--navy-800); color: #fff; }
.sb-quick.sb-quick-action.active .qico { box-shadow: 0 0 0 2px rgba(31,169,255,0.4); }
.sb-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  background: var(--amber-500); color: #fff;
  letter-spacing: 0.02em;
}
.sb-badge-danger { background: var(--red-500); }
.sb-badge-warn   { background: var(--amber-500); }

/* Subpage loader — same vibe as today loader */
.llm-setup-loader {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 80px 0;
  color: var(--slate-500); font-size: 13px;
}

/* Outer shell — centered single column, airy spacing */
.llm-setup-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 0 60px;
  display: flex; flex-direction: column;
  gap: 24px;
}

/* ─── Hero ─── */
.llm-hero {
  display: flex; flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  position: relative;
}
.llm-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--cyan-500);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.llm-hero-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 38px;
  color: var(--navy-800);
  line-height: 1.08;
  letter-spacing: 0.002em;
  margin: 0;
}
.llm-hero-accent {
  color: var(--cyan-500);
  font-weight: 300;
}
.llm-hero-lead {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.55;
  max-width: 580px;
  margin: 4px 0 0;
}
/* Particle-trail signature motif — brand DNA, displayed under title */
.llm-trail-decor {
  display: block;
  width: 220px; height: 14px;
  margin: 8px 0 2px;
  opacity: 0.9;
}

/* ─── Progress strip ─── */
.llm-progress {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.llm-progress-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.llm-progress-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--slate-400);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.llm-progress-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--navy-800);
  font-weight: 600;
}
.llm-progress-bar {
  height: 4px;
  background: var(--bg-canvas);
  border-radius: 100px;
  overflow: hidden;
}
.llm-progress-bar span {
  display: block; height: 100%;
  background: var(--grad-trail);
  border-radius: 100px;
  transition: width 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.llm-progress-bar span.done { background: var(--green-500); }

/* ─── Skip banner ─── */
.llm-skip-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(217,154,19,0.06);
  border: 1px dashed var(--amber-500);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--slate-500);
}

/* ─── Cards container — dotted divider between cards (spec divider-trail) ─── */
.llm-cards {
  display: flex; flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.llm-cards .llm-card + .llm-card {
  /* divider-trail motif from spec section 5 */
  border-top: none;
  background-image:
    radial-gradient(circle at 0 50%, var(--line) 0.5px, transparent 1px),
    radial-gradient(circle at 6px 50%, var(--line) 0.5px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: top center;
  padding-top: 19px;        /* +1 to absorb the 1px divider line */
}

/* ─── Single card — NO LEFT BORDER ACCENT (spec Don't rule #2) ─── */
.llm-card {
  background: transparent;          /* lives inside .llm-cards container */
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 200ms ease;
}
.llm-card-ready         { /* status conveyed via pill + meta, not edge */ }
.llm-card-auth-needed   { background: linear-gradient(180deg, rgba(217,154,19,0.025), transparent 50%); }
.llm-card-not-installed { background: linear-gradient(180deg, rgba(217,77,77,0.022),  transparent 50%); }
.llm-card-unknown       { opacity: 0.85; }

/* ─── Card header ─── */
.llm-card-head {
  display: flex; align-items: center;
  gap: 12px;
}

/* Brand logo tile — 36px square radius-5 with white inline SVG of official brand mark.
   Replaces ProviderMark monogram with the actual provider logo (Anthropic burst /
   OpenAI flower / Gemini spark). Monogram letter retained as `data-mark` fallback. */
.provider-mark {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Be Vietnam Pro', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(14,31,77,0.10), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
}
.provider-mark-logo {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #fff;
}
.provider-mark-logo svg {
  width: 100%; height: 100%;
  display: block;
}
/* Monogram fallback when the logo SVG span renders empty (e.g. CSP strip) */
.provider-mark:has(.provider-mark-logo:empty)::before,
.provider-mark:not(:has(.provider-mark-logo))::before {
  content: attr(data-mark);
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.llm-card-title { flex: 1; min-width: 0; }
.llm-card-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--navy-800);
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Optional badge — SOON-style mono pill */
.llm-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(31,169,255,0.10);
  color: var(--cyan-500);
  letter-spacing: 0.06em;
}
.llm-card-sub {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 3px;
  line-height: 1.45;
}

/* ─── Status pill — pill-family (spec section 5) ─── */
.llm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  background: var(--slate-100);
  color: var(--navy-700);
}
.llm-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-400);
}
.llm-pill-ok      { background: rgba(20,163,107,0.12);  color: var(--green-500); }
.llm-pill-ok .llm-pill-dot      { background: var(--green-500); box-shadow: 0 0 6px rgba(20,163,107,0.5); }
.llm-pill-warn    { background: rgba(217,154,19,0.13);  color: var(--amber-500); }
.llm-pill-warn .llm-pill-dot    { background: var(--amber-500); animation: llm-pulse 1.4s ease-in-out infinite; }
.llm-pill-danger  { background: rgba(217,77,77,0.10);   color: var(--red-500); }
.llm-pill-danger .llm-pill-dot  { background: var(--red-500); }
.llm-pill-idle    { background: rgba(31,169,255,0.12);  color: var(--cyan-500); }
.llm-pill-idle .llm-pill-dot    { background: var(--cyan-400); animation: llm-pulse 1.6s ease-in-out infinite; }
@keyframes llm-pulse { 50% { opacity: 0.4; } }

/* ─── Inline meta row — "v… · tier · path" ─── */
.llm-card-meta-line {
  font-size: 11.5px;
  color: var(--navy-700);
  line-height: 1.55;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.llm-card-meta-line .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.llm-card-meta-line .llm-meta-muted { color: var(--slate-400); font-weight: 400; }
.llm-dot {
  color: var(--slate-300);
  font-weight: 400;
  user-select: none;
}

/* Not-installed: show install command as code block */
.llm-card-cmd {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px;
}
.llm-card-cmd-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.llm-card-cmd code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--navy-800);
  background: var(--bg-canvas);
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── OAuth pending banner inside card ─── */
.llm-card-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(31,169,255,0.06);
  border: 1px solid rgba(31,169,255,0.20);
  border-radius: 7px;
  font-size: 11.5px;
  color: var(--navy-700);
  line-height: 1.45;
}

/* ─── Card footer — actions ─── */
.llm-card-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

/* Button — spec .btn family. 7px radius (square-feel), not pill. */
.llm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--navy-800);
  background: var(--navy-800);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 180ms ease;
  letter-spacing: 0.005em;
}
.llm-btn:hover  { background: var(--navy-700); border-color: var(--navy-700); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(14,31,77,0.18); }
.llm-btn:active { transform: scale(0.98); }
.llm-btn:disabled { opacity: 0.7; cursor: wait; transform: none; box-shadow: none; }
.llm-btn svg { stroke: currentColor; }
.llm-btn .trail-loader .td { background: rgba(255,255,255,0.85) !important; }

.llm-btn-primary { /* Same as .llm-btn default — navy primary CTA */ }

/* Ghost — secondary action like Re-login when ready */
.llm-btn-ghost {
  background: var(--paper);
  color: var(--navy-800);
  border-color: var(--line-strong);
}
.llm-btn-ghost:hover {
  background: var(--paper-tint);
  border-color: var(--slate-300);
  transform: translateY(-1px);
}

/* Tertiary text link */
.llm-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 4px;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease;
}
.llm-link:hover { color: var(--cyan-500); }
.llm-link svg { stroke: currentColor; }
.llm-link-muted { color: var(--slate-400); }

/* ─── Empty state — Connect offline ─── */
.llm-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 70px 24px 50px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.llm-empty-icon {
  width: 52px; height: 52px;
  border-radius: 11px;
  background: var(--bg-canvas);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
}
.llm-empty h3 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 22px; font-weight: 300;
  color: var(--navy-800);
  margin: 0;
}
.llm-empty p {
  font-size: 13px; color: var(--slate-500);
  max-width: 420px;
  line-height: 1.55;
  margin: 0;
}

/* ─── Footer — diagnostic + skip ─── */
.llm-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

/* ─── Today widget nudge — cross-link from My Today subpage ─── */
.llm-today-nudge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin: 14px 0;
  transition: border-color 160ms ease, box-shadow 180ms ease;
  cursor: pointer;
}
.llm-today-nudge:hover { border-color: var(--cyan-400); box-shadow: 0 10px 20px rgba(31,169,255,0.10); }
.llm-today-nudge-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-400);
}
.llm-today-nudge-body { flex: 1; min-width: 0; }
.llm-today-nudge-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--navy-800);
  letter-spacing: -0.003em;
  line-height: 1.3;
}
.llm-today-nudge-desc {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 2px;
  line-height: 1.45;
}
.llm-today-nudge-cta {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--navy-800);
  color: #fff;
  border: 1px solid var(--navy-800);
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.llm-today-nudge-cta:hover { background: var(--navy-700); }
.llm-today-nudge.done .llm-today-nudge-icon { background: var(--green-500); color: #fff; }
.llm-today-nudge.done { border-color: rgba(20,163,107,0.25); }

/* ─── Responsive — narrow viewport ─── */
@media (max-width: 720px) {
  .llm-setup-shell { padding-left: 16px; padding-right: 16px; }
  .llm-hero-title { font-size: 30px; }
  .llm-trail-decor { width: 180px; }
  .llm-card-meta-line { font-size: 11px; }
  .llm-today-nudge { flex-direction: column; align-items: flex-start; }
  .llm-today-nudge-cta { width: 100%; padding: 10px 16px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY TODAY v2 — card-less hero + agenda list + emotional copy
   Added 2026-05-23 (case) per Eric feedback: "cảm xúc hơn, đỡ đau đầu nhiều bảng"
   Compliance: design_handoff/README.md Don't rules — no border-left accents,
                no uppercase widget eyebrows, cards-as-container pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero zone (card-less, soft radial backdrop, particle motif) ─── */
.today-v2-hero {
  position: relative;
  padding: 32px 32px 28px 28px;
  margin: 0 0 24px 0;
  background:
    radial-gradient(900px 320px at 85% -20%, rgba(31,169,255,0.10), transparent 70%),
    radial-gradient(600px 280px at 5% 110%, rgba(46,91,219,0.07), transparent 70%);
  border-radius: 18px;
  overflow: hidden;
}
.today-v2-particles {
  position: absolute;
  top: 24px; right: 28px;
  pointer-events: none;
  opacity: 0.9;
}
.today-v2-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.today-v2-hero-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200;
  font-size: 44px;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 720px;
}
.today-v2-hero-glance {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--slate-500);
  line-height: 1.55;
  max-width: 620px;
  margin-bottom: 22px;
}
.today-v2-hero-weather {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  border: 1px solid rgba(14,31,77,0.06);
}
.today-v2-hero-weather .hw-icon { color: var(--cyan-500); display: inline-flex; }
.today-v2-hero-weather .hw-temp {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 24px;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.today-v2-hero-weather .hw-meta {
  font-size: 12.5px; color: var(--slate-500);
  font-weight: 500;
}

/* ─── Row containers ─── */
.today-v2-row {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
.today-v2-row.two-col { grid-template-columns: 1fr 1fr; }

/* ─── Card base (used by Next/Inbox/Agenda/Intention/AI/Briefing) ─── */
.today-v2-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
}
.today-v2-card + .today-v2-card { /* never adjacent within same row, but guard */ }

.v2-card-lbl {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0;
  margin-bottom: 14px;
  text-transform: lowercase;
  display: flex; align-items: center; justify-content: space-between;
}
.v2-card-lbl > span:first-child { letter-spacing: 0; }

/* ─── Generic atoms ─── */
.v2-soft { color: var(--slate-400); font-size: 12.5px; }
.v2-good { color: var(--green-500); font-weight: 600; }
.v2-bignum {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 30px;
  color: var(--navy-800);
  line-height: 1; letter-spacing: -0.01em;
}
.v2-bignum-unit { font-size: 16px; color: var(--slate-400); font-weight: 400; margin-left: 2px; }
.v2-bignum-lbl {
  font-size: 11px; color: var(--slate-400); font-weight: 500;
  margin-top: 4px; letter-spacing: 0.02em;
}
.v2-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  background: var(--slate-100); color: var(--navy-700);
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
  margin-left: 6px;
}
.v2-tag-live {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(31,169,255,0.14);
  color: var(--cyan-500);
  border-radius: 100px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.v2-link {
  font-size: 12px; font-weight: 600;
  color: var(--cyan-500);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.v2-link:hover { color: var(--cyan-400); }
.v2-divider {
  height: 1px;
  background-image: radial-gradient(circle, var(--slate-300) 0.6px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: center;
  margin: 16px 0;
}
.v2-sub-lbl {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px; font-weight: 500;
  color: var(--slate-400);
  margin-bottom: 8px;
}

/* ─── Buttons ─── */
.v2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font: 600 12.5px 'Inter', sans-serif;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--navy-800);
  cursor: pointer;
  transition: all 0.12s;
}
.v2-btn:hover { border-color: var(--slate-300); background: var(--paper-tint); }
.v2-btn.primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.v2-btn.primary:hover { background: var(--navy-700); }
.v2-btn.accent {
  background: var(--grad-trail);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 10px rgba(46,91,219,0.22);
}
.v2-btn.accent:hover { filter: brightness(1.06); }
.v2-btn.small { padding: 4px 9px; font-size: 11px; }

/* ─── Zone 2: NEXT UP ─── */
.v2-next-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--cyan-500);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.v2-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-400);
  animation: v2pulse 1.6s ease-in-out infinite;
}
@keyframes v2pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
.v2-next-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400; font-size: 20px;
  color: var(--navy-800);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.v2-next-meta {
  font-size: 13px;
  color: var(--slate-500);
  margin-bottom: 14px;
}
.v2-next-actions { display: flex; gap: 6px; margin-top: auto; }
.v2-empty-msg { color: var(--slate-400); font-size: 14px; font-style: italic; }

/* ─── Zone 3: INBOX ─── */
.v2-inbox-row { display: flex; align-items: flex-start; gap: 18px; }
.v2-inbox-stat { flex-shrink: 0; padding-top: 2px; min-width: 76px; }
.v2-sender-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.v2-sender { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.v2-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-sender-name { color: var(--navy-700); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-sender-ct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--slate-500); font-weight: 600; }
.v2-inbox-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* ─── Zone 4: AGENDA (flat list — replaces broken timeline) ─── */
.v2-agenda-list { list-style: none; padding: 0; margin: 0; }
.v2-agenda-row {
  display: grid;
  grid-template-columns: 14px 100px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.v2-agenda-row:last-child { border-bottom: none; }
.v2-agenda-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-400);
  text-align: center;
}
.v2-agenda-row.active .v2-agenda-marker { color: var(--cyan-500); font-size: 14px; }
.v2-agenda-row.past .v2-agenda-marker { color: var(--slate-200); }
.v2-agenda-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--slate-500);
}
.v2-agenda-row.active .v2-agenda-time { color: var(--navy-800); font-weight: 600; }
.v2-agenda-row.past .v2-agenda-time { color: var(--slate-400); }
.v2-agenda-title {
  color: var(--navy-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-agenda-row.active .v2-agenda-title { color: var(--navy-800); font-weight: 600; }
.v2-agenda-row.past .v2-agenda-title { color: var(--slate-400); text-decoration: line-through; text-decoration-color: rgba(74,93,135,0.25); }
.v2-agenda-att {
  font-size: 11.5px;
  color: var(--slate-400);
  white-space: nowrap;
}
.v2-agenda-row.past .v2-agenda-att { color: var(--slate-300); }

/* ─── Zone 5: INTENTION (Focus + Tasks merged) ─── */
.v2-focus-row {
  display: flex; align-items: center; gap: 8px;
}
.v2-focus-spark {
  width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31,169,255,0.12);
  color: var(--cyan-500);
  flex-shrink: 0;
}
.v2-focus-input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 9px 14px;
  font: 500 14px 'Inter', sans-serif;
  color: var(--navy-800);
  outline: none;
  transition: all 0.12s;
  min-width: 0;
}
.v2-focus-input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.08); }
.v2-focus-input::placeholder { color: var(--slate-400); font-style: italic; }
.v2-focus-timer {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.v2-focus-timer .time { font-size: 22px; font-weight: 500; color: var(--cyan-500); letter-spacing: 0.04em; }
.v2-focus-timer .lbl { font-size: 10.5px; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; }

.v2-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-task {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
  cursor: pointer;
}
.v2-task:last-child { border-bottom: none; }
.v2-task-checkbox {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--slate-300);
  background: var(--paper);
  transition: all 0.12s;
  position: relative;
}
.v2-task:hover .v2-task-checkbox { border-color: var(--cyan-400); }
.v2-task.done .v2-task-checkbox { background: var(--cyan-500); border-color: var(--cyan-500); }
.v2-task.done .v2-task-checkbox::after {
  content: ''; position: absolute; left: 3px; top: 0;
  width: 4px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.v2-task-text { color: var(--navy-700); line-height: 1.45; }
.v2-task.done .v2-task-text { color: var(--slate-400); text-decoration: line-through; }
.v2-task.overdue .v2-task-text { color: var(--red-500); }
.v2-task-due {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--slate-400);
}
.v2-task.overdue .v2-task-due { color: var(--red-500); font-weight: 700; }
.v2-task-done-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--slate-400);
  font-style: italic;
}

/* ─── Zone 6: AI TODAY (inline) ─── */
.v2-ai-line {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.v2-ai-bar {
  height: 4px; border-radius: 2px;
  background: var(--bg-canvas);
  overflow: hidden;
  margin-bottom: 14px;
}
.v2-ai-bar-fill {
  display: block; height: 100%;
  background: var(--grad-trail);
  border-radius: 2px;
  transition: width 600ms ease;
}
.v2-ai-rows { display: flex; flex-direction: column; gap: 6px; }
.v2-ai-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px;
}
.v2-ai-row span { color: var(--slate-500); }
.v2-ai-row b { color: var(--navy-700); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

/* ─── Zone 6: BRIEFING (inline, conversational paragraph) ─── */
.v2-briefing-body {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--navy-700);
  line-height: 1.6;
  margin-bottom: 14px;
}
.v2-briefing-body strong { font-weight: 600; color: var(--navy-800); }
.v2-briefing-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .today-v2-row.two-col { grid-template-columns: 1fr; }
  .today-v2-hero-title { font-size: 36px; }
}
@media (max-width: 720px) {
  .today-v2-hero { padding: 24px 20px; }
  .today-v2-hero-title { font-size: 28px; }
  .v2-agenda-row { grid-template-columns: 14px 76px 1fr; gap: 8px; }
  .v2-agenda-att, .v2-tag-live { display: none; }
  .v2-focus-row { flex-wrap: wrap; }
  .v2-focus-input { width: 100%; flex: none; order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY TODAY v3 — Editorial magazine layout with climate system
   Added 2026-05-23 (case) — port from design_handoff_dragon 2/today.jsx
   Per-day hue tints whole page via --hue-* CSS vars set inline on root.
   Outfit replaces Be Vietnam Pro inside this subpage only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bring Outfit (display) for Today subpage */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap");

/* Reset launcher padding when v3 active so hero is full-bleed */
.launcher:has(.v3-today.active) { padding: 0 !important; }
.v3-today.home-subpage { display: none; }
.v3-today.home-subpage.active { display: block; }

/* Today root sets climate */
.v3-today {
  /* defaults; JS overrides on render */
  --hue-accent: #2a8a8a;
  --hue-paper:  #eef7f6;
  --hue-ink:    #0d2424;
  --hue-muted:  #7d9b9b;
  --hue-whisper: #c4dedb;
  background: var(--hue-paper);
  color: var(--hue-ink);
  font-family: 'Outfit', sans-serif;
  min-height: 100%;
}

/* When inside .launcher (which has padding 36px 44px 36px 252px), neutralise */
.launcher > .home-subpage.v3-today {
  margin: -36px -44px -36px -252px;
  padding-left: 252px;
}
/* When sidebar collapsed (responsive), reset */
@media (max-width: 920px) {
  .launcher > .home-subpage.v3-today {
    margin-left: -44px;
    padding-left: 44px;
  }
}

/* ─── HERO ─── */
.v3-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.v3-hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}
.v3-hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 30%, transparent 60%, var(--hue-paper) 100%);
}
.v3-hero-inner {
  position: absolute;
  left: 0; right: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex; justify-content: space-between;
}
.v3-hero-top    { top: 28px; align-items: flex-start; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.v3-hero-bottom { bottom: 32px; align-items: flex-end; color: var(--hue-ink); }
.v3-hero-greet {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  opacity: 0.92;
}
.v3-hero-day {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 86px;
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.v3-hero-clock { text-align: right; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.v3-hero-clock-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 64px;
  line-height: 1; letter-spacing: 0.01em;
}
.v3-hero-clock-time .sep { opacity: 0.6; }
.v3-hero-clock-tz {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  opacity: 0.85; margin-top: 6px;
}
.v3-hero-meta {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  letter-spacing: 0.01em;
}
.v3-hero-meta .sep { opacity: 0.5; }
.v3-hue-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}
.v3-hue-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--hue-accent);
  box-shadow: 0 0 0 2px var(--hue-paper), 0 0 0 3px var(--hue-whisper);
}
.v3-hue-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 12.5px;
  color: var(--hue-ink);
  letter-spacing: 0.04em;
}
.v3-hue-label em { font-style: italic; }

/* ─── STAGE — wrapper with consistent left margin ─── */
.v3-stage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── FOCUS ENVELOPE — overlap hero by -52px ─── */
.v3-focus-envelope {
  position: relative;
  margin-top: -52px;
  z-index: 2;
  background: #fff;
  border-radius: 14px;
  padding: 22px 28px;
  display: flex; align-items: center; gap: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10), 0 1px 0 rgba(0,0,0,0.04);
  background-image: linear-gradient(135deg, var(--hue-whisper) 0 28px, transparent 28px);
  background-repeat: no-repeat;
}
.v3-focus-spine {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 14px;
  font-style: italic; color: var(--hue-muted);
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 8px 0 8px 14px;
  border-left: 1px dashed var(--hue-whisper);
}
.v3-focus-body { flex: 1; }
.v3-focus-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hue-accent);
}
.v3-focus-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 30px;
  color: var(--hue-ink);
  letter-spacing: 0.002em;
  margin-top: 4px;
  line-height: 1.15;
}
.v3-focus-title em { font-weight: 400; }
.v3-focus-meta {
  font-size: 12px; color: var(--hue-muted);
  margin-top: 6px;
}
.v3-focus-meta b { color: var(--hue-accent); font-weight: 600; }
.v3-btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--hue-ink);
  color: #fff;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.20);
  transition: filter 0.12s;
}
.v3-btn-dark:hover { filter: brightness(1.1); }
.v3-focus-running { text-align: right; }
.v3-focus-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 40px;
  color: var(--hue-ink); line-height: 1;
}
.v3-focus-time .sep { opacity: 0.5; }
.v3-focus-letgo {
  margin-top: 6px; padding: 3px 10px;
  background: transparent; border: none;
  color: var(--hue-muted); font-size: 11px;
  font-style: italic; cursor: pointer;
}
.v3-focus-letgo:hover { color: var(--hue-ink); }

/* ─── LLM nudge (inline) ─── */
.v3-llm-nudge {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed var(--hue-whisper);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.v3-llm-nudge:hover { background: rgba(255,255,255,0.85); }
.v3-llm-nudge-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 13.5px;
  color: var(--hue-ink);
}
.v3-llm-nudge-cta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hue-accent);
}

/* ─── WEATHER RIBBON ─── */
.v3-weather {
  display: flex; align-items: stretch;
  border-top: 1px dashed var(--hue-whisper);
  border-bottom: 1px dashed var(--hue-whisper);
  padding: 14px 0;
  margin-top: 32px;
}
.v3-weather-lead {
  min-width: 200px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--hue-whisper);
  padding-right: 14px;
}
.v3-weather-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  color: var(--hue-ink);
  margin-top: 2px;
  line-height: 1.1;
}
.v3-weather-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--hue-muted);
  margin-top: 6px;
  line-height: 1.3;
  opacity: 0.85;
}
.v3-weather-hours {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-left: 18px;
}
.v3-w-hr {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 4px 6px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
}
.v3-w-hr.now { background: var(--hue-whisper); }
.v3-w-h {
  font-size: 9.5px; font-weight: 600;
  color: var(--hue-muted);
  letter-spacing: 0.06em;
}
.v3-w-hr.now .v3-w-h { color: var(--hue-accent); }
.v3-w-g {
  font-size: 18px;
  color: var(--hue-ink);
  line-height: 1;
}
.v3-w-hr.now .v3-w-g { color: var(--hue-accent); }
.v3-w-t {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 13px;
  color: var(--hue-ink);
}
.v3-w-d {
  font-size: 8.5px;
  color: var(--hue-accent);
  letter-spacing: 0.04em;
}

/* ─── BODY 2-COL ASYMMETRIC ─── */
.v3-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  padding: 44px 0 56px 0;
}
.v3-body-right {
  display: flex; flex-direction: column; gap: 32px;
}

/* ─── Section primitive ─── */
.v3-section { margin-bottom: 48px; }
.v3-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--hue-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.v3-eyebrow-bar {
  width: 18px; height: 1px;
  background: var(--hue-accent);
  display: inline-block;
}
.v3-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 38px;
  color: var(--hue-ink);
  margin: 0 0 22px;
  line-height: 1.1;
  letter-spacing: 0.002em;
}

/* ─── DAY POEM ─── */
.v3-poem {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 21px;
  line-height: 1.7;
  color: var(--hue-ink);
  letter-spacing: 0.005em;
}
.v3-poem-bridge {
  color: var(--hue-muted);
  font-style: italic;
}
.v3-poem-event {
  color: var(--hue-ink);
  font-weight: 300;
}
.v3-poem-event.now {
  color: var(--hue-accent);
  font-weight: 500;
  border-bottom: 2px solid var(--hue-accent);
  padding-bottom: 1px;
}
.v3-poem-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--hue-muted);
  letter-spacing: 0.05em;
}

/* ─── DESK LIST ─── */
.v3-desk { display: flex; flex-direction: column; gap: 0; }
.v3-desk-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 14px 0;
}
.v3-desk-item.has-divider { border-bottom: 1px solid var(--hue-whisper); }
.v3-desk-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 36px;
  color: var(--hue-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 50px;
}
.v3-desk-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 19px;
  color: var(--hue-ink);
  line-height: 1.3;
}
.v3-desk-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-style: italic;
  font-size: 13px;
  color: var(--hue-muted);
  margin-top: 4px;
}

/* ─── Dragon-native tasks (2026-05-26) — checkbox + add input ─── */
.v3-desk-row { align-items: center; gap: 14px; }
.v3-desk-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hue-muted, #7b8aa3);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  color: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.v3-desk-check:hover { border-color: var(--hue-accent, #2a8a8a); }
.v3-desk-check.on {
  background: var(--hue-accent, #2a8a8a);
  border-color: var(--hue-accent, #2a8a8a);
  color: #fff;
}
.v3-desk-row.done .v3-desk-title { text-decoration: line-through; color: var(--hue-muted, rgba(0,0,0,0.45)); }
.v3-desk-row.done .v3-desk-num { opacity: 0.35; }
.v3-desk-body { flex: 1; min-width: 0; }
.v3-desk-x {
  flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--hue-muted, rgba(0,0,0,0.30));
  font-size: 18px; padding: 0 6px;
  opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.v3-desk-row:hover .v3-desk-x { opacity: 1; }
.v3-desk-x:hover { color: #a52d2d; }

.v3-desk-empty {
  padding: 18px 0 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--hue-muted);
  font-style: italic;
}

.v3-desk-add {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 6px;
  margin-top: 4px;
  border-top: 1px solid var(--hue-whisper, rgba(0,0,0,0.06));
}
.v3-desk-add-plus {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 28px;
  color: var(--hue-muted, #7b8aa3);
  line-height: 1;
  min-width: 20px;
  text-align: center;
}
.v3-desk-add-input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 18px;
  color: var(--hue-ink);
  padding: 4px 0;
}
.v3-desk-add-input::placeholder { color: var(--hue-muted, rgba(0,0,0,0.40)); font-style: italic; }
.v3-desk-add-input:focus { border-bottom: 1px solid var(--hue-accent, #2a8a8a); margin-bottom: -1px; }

/* ─── Smart Alerts widget (2026-05-26, replaces Orbit) ─── */
.v3-alerts { display: flex; flex-direction: column; gap: 0; }
.v3-alert {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
}
.v3-alert.has-divider { border-bottom: 1px solid var(--hue-whisper, rgba(0,0,0,0.06)); }
.v3-alert-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: var(--hue-whisper, rgba(0,0,0,0.05));
  color: var(--hue-ink, #0e1f4d);
  margin-top: 2px;
}
.v3-alert.urgent .v3-alert-icon { background: rgba(165,45,45,0.10); color: #a52d2d; }
.v3-alert.high   .v3-alert-icon { background: rgba(214,166,32,0.14); color: #7a5b04; }
.v3-alert-body { flex: 1; min-width: 0; }
.v3-alert-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.v3-alert-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500; font-size: 16px;
  color: var(--hue-ink, #0e1f4d);
  letter-spacing: -0.005em;
  line-height: 1.3;
  flex: 1;
}
.v3-alert-priority {
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v3-alert-priority.urgent { background: rgba(165,45,45,0.12); color: #a52d2d; }
.v3-alert-priority.high   { background: rgba(214,166,32,0.16); color: #7a5b04; }
.v3-alert-priority.normal { background: rgba(14,31,77,0.06);  color: var(--hue-muted, rgba(14,31,77,0.55)); }
.v3-alert-why {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 13.5px;
  font-style: italic;
  color: var(--hue-muted, rgba(0,0,0,0.62));
  line-height: 1.4;
  margin-bottom: 4px;
}
.v3-alert-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--hue-muted, rgba(0,0,0,0.45));
  letter-spacing: 0.02em;
}
.v3-alert-actor { font-weight: 500; }
.v3-alert-dot { margin: 0 6px; opacity: 0.4; }

/* ─── ORBIT ─── */
.v3-orbit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.v3-orbit-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.v3-orbit-item.has-divider { border-bottom: 1px solid var(--hue-whisper); }
.v3-orbit-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 17px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  position: relative;
}
.v3-orbit-avatar.near {
  background: var(--hue-accent);
  color: #fff;
}
.v3-orbit-avatar.remote {
  background: var(--hue-whisper);
  color: var(--hue-ink);
}
.v3-orbit-presence {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #5e8a5e;
  border: 2px solid var(--hue-paper);
}
.v3-orbit-body { flex: 1; min-width: 0; }
.v3-orbit-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500; font-size: 14px;
  color: var(--hue-ink);
}
.v3-orbit-role {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-style: italic;
  font-size: 11.5px;
  color: var(--hue-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-orbit-at {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--hue-accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ─── MEMORY (polaroids + prose + stats) ─── */
.v3-memory {
  display: flex; gap: 28px; align-items: stretch;
}
.v3-mem-polaroids {
  position: relative;
  width: 200px; height: 220px;
  flex-shrink: 0;
}
.v3-polaroid {
  position: absolute;
  background: #fff;
  padding: 10px 10px 32px;
}
.v3-polaroid-back {
  top: 14px; left: 24px;
  transform: rotate(4deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.v3-polaroid-front {
  top: 0; left: 0;
  transform: rotate(-3deg);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12), 0 1px 0 rgba(0,0,0,0.04);
  padding-bottom: 36px;
}
.v3-polaroid-photo {
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-style: italic;
  font-size: 14px;
  color: var(--hue-muted);
}
.v3-polaroid-back .v3-polaroid-photo {
  width: 140px; height: 140px;
  background: linear-gradient(135deg, var(--hue-accent), var(--hue-ink));
  opacity: 0.7;
}
.v3-polaroid-front .v3-polaroid-photo {
  background: linear-gradient(135deg, var(--hue-whisper), var(--hue-paper));
}
.v3-polaroid-cap {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 10px;
  color: var(--hue-muted);
  letter-spacing: 0.08em;
}
.v3-polaroid-back .v3-polaroid-cap { font-weight: 300; font-style: italic; font-size: 10px; }
.v3-mem-text {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.v3-mem-prose {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  color: var(--hue-ink);
  line-height: 1.4;
  letter-spacing: 0.005em;
}
.v3-mem-prose em { font-weight: 400; }
.v3-mem-coda {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-weight: 300; font-size: 13px;
  color: var(--hue-muted);
  margin-top: 14px;
}
.v3-mem-stats {
  display: flex; gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--hue-whisper);
}
.v3-mem-stat {}
.v3-mem-stat-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 26px;
  color: var(--hue-accent);
  line-height: 1;
}
.v3-mem-stat-lbl {
  font-size: 10.5px;
  color: var(--hue-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.v3-mem-vline {
  width: 1px;
  background: var(--hue-whisper);
}

/* ─── HABIT DOTS ─── */
.v3-habits {}
.v3-habit-header {
  display: grid;
  grid-template-columns: 1fr repeat(7, 18px);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.v3-habit-daylbl {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: var(--hue-muted);
}
.v3-habit-daylbl.today { font-weight: 600; color: var(--hue-accent); }
.v3-habit-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 18px);
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--hue-whisper);
}
.v3-habit-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 13px;
  color: var(--hue-ink);
}
.v3-habit-dot {
  width: 12px; height: 12px; border-radius: 50%;
  margin: 0 auto;
  border: 1px solid var(--hue-whisper);
  background: transparent;
}
.v3-habit-dot.on {
  background: var(--hue-accent);
  border: none;
}
.v3-habit-dot.today {
  box-shadow: 0 0 0 3px var(--hue-whisper);
}
.v3-habit-streak {
  margin-top: 12px;
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-weight: 300; font-size: 12px;
  color: var(--hue-muted);
  text-align: right;
}

/* ─── MOOD TUNER ─── */
.v3-mood {}
.v3-mood-row {
  display: flex; align-items: center; gap: 12px;
}
.v3-mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.v3-mood-dot {
  display: inline-block;
  border-radius: 50%;
  background: var(--hue-whisper);
  border: 1px solid var(--hue-whisper);
  transition: all 0.15s;
}
.v3-mood-btn.active .v3-mood-dot {
  background: var(--hue-accent);
  border: none;
  box-shadow: 0 0 0 4px var(--hue-whisper);
}
.v3-mood-lbl {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 11.5px;
  color: var(--hue-muted);
  letter-spacing: 0.02em;
}
.v3-mood-btn.active .v3-mood-lbl {
  font-weight: 500;
  font-style: normal;
  color: var(--hue-ink);
}

/* ─── STICKY QUOTE ─── */
.v3-sticky {
  background: var(--hue-whisper);
  padding: 26px 24px 22px;
  transform: rotate(-1.2deg);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
  position: relative;
}
.v3-sticky-tape {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 80px; height: 18px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.v3-sticky-q {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 18px;
  color: var(--hue-ink);
  line-height: 1.45;
  font-style: italic;
  letter-spacing: 0.005em;
}
.v3-sticky-a {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--hue-accent);
  text-transform: uppercase;
}

/* ─── CALM CARD ─── */
.v3-calm-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  color: var(--hue-ink);
  margin: 0 0 14px;
  line-height: 1.2;
}
.v3-calm-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0;
}
.v3-calm-item.has-top { border-top: 1px solid var(--hue-whisper); }
.v3-calm-glyph {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  color: var(--hue-accent);
  line-height: 1; margin-top: 2px;
}
.v3-calm-t {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 14px;
  color: var(--hue-ink);
}
.v3-calm-s {
  font-family: 'Outfit', sans-serif;
  font-style: italic; font-weight: 300;
  font-size: 12px;
  color: var(--hue-muted);
  margin-top: 2px;
}

/* ─── READING SHELF ─── */
.v3-shelf-row {
  display: flex; gap: 14px; align-items: stretch;
  margin-top: 4px;
}
.v3-spine {
  width: 54px;
  min-height: 96px;
  background: linear-gradient(180deg, var(--hue-accent), var(--hue-ink));
  border-radius: 2px 4px 4px 2px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.18), inset -2px 0 0 rgba(255,255,255,0.08);
  padding: 10px 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  flex-shrink: 0;
}
.v3-spine-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.12em;
  align-self: center;
}
.v3-spine-author {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 8.5px;
  opacity: 0.7; letter-spacing: 0.06em;
  text-align: center;
}
.v3-shelf-body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.v3-shelf-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400; font-size: 14.5px;
  color: var(--hue-ink);
  line-height: 1.3;
}
.v3-shelf-meta {
  font-family: 'Outfit', sans-serif;
  font-style: italic; font-weight: 300;
  font-size: 12px;
  color: var(--hue-muted);
  margin-top: 2px;
}
.v3-shelf-bar {
  margin-top: 10px;
  height: 2px;
  background: var(--hue-whisper);
  overflow: hidden;
  border-radius: 1px;
}
.v3-shelf-bar span {
  display: block;
  height: 100%;
  background: var(--hue-accent);
}
.v3-shelf-excerpt {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--hue-muted);
  font-style: italic;
  line-height: 1.4;
}

/* ─── AI PULSE ─── */
.v3-aipulse {
  padding: 20px 0;
  border-top: 1px solid var(--hue-whisper);
  border-bottom: 1px solid var(--hue-whisper);
}
.v3-aipulse-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.v3-aipulse-link {
  background: none; border: none;
  font-size: 11px;
  color: var(--hue-muted);
  font-style: italic;
  cursor: pointer;
  text-decoration: none;
}
.v3-aipulse-link:hover { color: var(--hue-ink); }
.v3-aipulse-row {
  display: flex; align-items: baseline; gap: 6px;
}
.v3-aipulse-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 42px;
  color: var(--hue-ink);
  line-height: 1;
}
.v3-aipulse-sub {
  font-size: 12px;
  color: var(--hue-muted);
  font-style: italic;
}
.v3-aipulse-bar {
  margin-top: 12px;
  height: 2px;
  background: var(--hue-whisper);
  overflow: hidden;
}
.v3-aipulse-bar span {
  display: block; height: 100%;
  background: var(--hue-accent);
}
.v3-aipulse-foot {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--hue-muted);
}
.v3-aipulse-saved {
  color: var(--hue-accent);
  font-weight: 600;
}
/* ─── AI Pulse v2 — today vs yesterday + sparkline (Eric 2026-05-26) ─── */
.v3-aipulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 6px 0 14px;
}
.v3-aipulse-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0;
}
.v3-aipulse-cell .v3-aipulse-num {
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.v3-aipulse-cell-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--hue-muted);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v3-aipulse-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.v3-aipulse-delta.up   { background: rgba(42,138,138,0.14);  color: #1e5959; }
.v3-aipulse-delta.down { background: rgba(165,45,45,0.10);   color: #a52d2d; }
.v3-aipulse-delta.flat { background: rgba(14,31,77,0.06);    color: rgba(14,31,77,0.55); }
.v3-aipulse-sparkrow {
  display: flex; align-items: center; gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(14,31,77,0.06);
}
.v3-aipulse-sparklabel {
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--hue-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.v3-aipulse-yesterday {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hue-muted);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.v3-aipulse-empty {
  padding: 18px 4px 6px;
  display: flex; flex-direction: column; gap: 4px;
}

/* ─── AI Pulse explainer popup (Eric 2026-05-26) ─── */
.v3-aipulse-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 8px;
  padding: 0;
  border: none; background: transparent;
  color: var(--hue-muted, rgba(0,0,0,0.35));
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
  border-radius: 50%;
  font-family: 'Inter', system-ui, sans-serif;
}
.v3-aipulse-info:hover { color: var(--hue-accent, #2a8a8a); }
.v3-aipulse-explainer {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid rgba(14,31,77,0.10);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(14,31,77,0.18);
  padding: 18px 20px 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--navy-800, #0e1f4d);
  animation: v3-aipulse-exp-in 0.18s ease-out;
}
.v3-aipulse-explainer[hidden] { display: none; }
@keyframes v3-aipulse-exp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v3-aipulse-exp-arrow {
  position: absolute;
  top: -7px; left: 28px;
  width: 12px; height: 12px;
  background: #fff;
  border-top: 1px solid rgba(14,31,77,0.10);
  border-left: 1px solid rgba(14,31,77,0.10);
  transform: rotate(45deg);
}
.v3-aipulse-exp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 6px;
}
.v3-aipulse-exp-title {
  font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  color: var(--navy-800, #0e1f4d);
}
.v3-aipulse-exp-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
  color: var(--hue-muted, rgba(0,0,0,0.4));
}
.v3-aipulse-exp-close:hover { color: var(--navy-800, #0e1f4d); }
.v3-aipulse-exp-lead {
  font-size: 13px; font-weight: 300;
  color: var(--hue-muted, rgba(0,0,0,0.65));
  line-height: 1.5;
  margin-bottom: 14px;
}
.v3-aipulse-exp-breakdown {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0;
  border-top: 1px solid rgba(14,31,77,0.06);
  border-bottom: 1px solid rgba(14,31,77,0.06);
}
.v3-aipulse-exp-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
}
.v3-aipulse-exp-prov {
  font-weight: 600;
  color: var(--navy-800, #0e1f4d);
}
.v3-aipulse-exp-bar {
  display: block;
  height: 6px;
  background: rgba(14,31,77,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.v3-aipulse-exp-bar span {
  display: block;
  height: 100%;
  background: var(--hue-accent, #2a8a8a);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.v3-aipulse-exp-num {
  font-variant-numeric: tabular-nums;
  color: var(--hue-muted, rgba(0,0,0,0.6));
  white-space: nowrap;
}
.v3-aipulse-exp-lists {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 12px 0;
}
.v3-aipulse-exp-list-head {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.v3-aipulse-exp-list-head.good  { color: #1e5959; }
.v3-aipulse-exp-list-head.muted { color: var(--hue-muted, rgba(0,0,0,0.45)); }
.v3-aipulse-exp-list ul {
  list-style: none; padding: 0; margin: 0;
}
.v3-aipulse-exp-list li {
  font-size: 12px; line-height: 1.45;
  color: var(--hue-muted, rgba(0,0,0,0.62));
  padding: 2px 0;
}
/* ─── News briefing cards (Eric 2026-05-26 "AI briefing tin tức") ─── */
.v3-briefs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3-brief-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(14,31,77,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.v3-brief-card:hover {
  background: #fff;
  border-color: rgba(14,31,77,0.20);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(14,31,77,0.10);
}
.v3-brief-thumb {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--hue-whisper, rgba(14,31,77,0.06));
  background-repeat: no-repeat;
}
.v3-brief-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 36px;
  color: var(--hue-accent, #2a8a8a);
  line-height: 1;
  background: linear-gradient(135deg, var(--hue-whisper, #f0f4f8), rgba(42,138,138,0.10));
}
.v3-brief-thumb-fallback span { opacity: 0.85; }
.v3-brief-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.v3-brief-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  color: var(--hue-muted, rgba(0,0,0,0.50));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
}
.v3-brief-src {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-brief-arrow {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--hue-muted, rgba(0,0,0,0.30));
  transition: color 0.15s ease, transform 0.15s ease;
}
.v3-brief-card:hover .v3-brief-arrow {
  color: var(--hue-accent, #2a8a8a);
  transform: translate(2px, -2px);
}
.v3-brief-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--hue-ink, #0e1f4d);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-brief-excerpt {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hue-muted, rgba(0,0,0,0.60));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
/* Customize button — small, subtle, lower-right of news widget */
.v3-news-customize-row {
  display: flex; justify-content: flex-end;
  margin-top: 10px;
}
.v3-news-customize {
  background: transparent;
  border: 1px solid rgba(14,31,77,0.10);
  color: var(--hue-muted, rgba(0,0,0,0.55));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.v3-news-customize:hover {
  background: var(--hue-ink, #0e1f4d);
  color: #fff;
  border-color: var(--hue-ink, #0e1f4d);
}

/* News category picker modal */
.v3-news-picker-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', system-ui, sans-serif;
  animation: v3-fade-in 0.18s ease;
}
.v3-news-picker-backdrop {
  position: absolute; inset: 0;
  background: rgba(14,31,77,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v3-news-picker-sheet {
  position: relative;
  width: min(540px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(14,31,77,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: v3-slide-up 0.24s cubic-bezier(0.2,0.8,0.2,1);
}
.v3-news-picker-head {
  padding: 22px 26px 14px;
  border-bottom: 1px solid rgba(14,31,77,0.06);
}
.v3-news-picker-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--navy-800, #0e1f4d);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.v3-news-picker-sub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0,0,0,0.55);
  line-height: 1.45;
}
.v3-news-picker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.v3-news-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1.5px solid rgba(14,31,77,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: 'Outfit', sans-serif;
}
.v3-news-cat:hover { background: #f4f6fa; border-color: rgba(14,31,77,0.18); }
.v3-news-cat.on {
  background: rgba(42,138,138,0.08);
  border-color: rgba(42,138,138,0.45);
}
.v3-news-cat input[type="checkbox"] { display: none; }
.v3-news-cat-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,31,77,0.05);
  border-radius: 8px;
  font-size: 14px;
  color: var(--navy-800, #0e1f4d);
}
.v3-news-cat.on .v3-news-cat-icon {
  background: rgba(42,138,138,0.18);
  color: #1e5959;
}
.v3-news-cat-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-800, #0e1f4d);
}
.v3-news-cat-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--hue-muted, rgba(0,0,0,0.45));
  letter-spacing: 0.02em;
}
.v3-news-picker-foot {
  padding: 16px 26px 20px;
  border-top: 1px solid rgba(14,31,77,0.06);
  display: flex; justify-content: flex-end; gap: 10px;
}
.v3-news-picker-btn {
  padding: 9px 22px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.v3-news-picker-btn.ghost {
  background: transparent;
  color: rgba(14,31,77,0.55);
  border-color: rgba(14,31,77,0.15);
}
.v3-news-picker-btn.ghost:hover { background: rgba(14,31,77,0.06); color: var(--navy-800, #0e1f4d); }
.v3-news-picker-btn.primary {
  background: var(--navy-800, #0e1f4d);
  color: #fff;
}
.v3-news-picker-btn.primary:hover { background: #1e5959; transform: translateY(-1px); }

.v3-aipulse-exp-tip {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(42,138,138,0.06);
  border-left: 2px solid var(--hue-accent, #2a8a8a);
  border-radius: 4px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--hue-muted, rgba(0,0,0,0.68));
}

/* ─── TONIGHT ─── */
.v3-tonight {
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--hue-ink) 0%, color-mix(in oklab, var(--hue-ink) 70%, var(--hue-accent)) 100%);
  color: var(--hue-paper);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.v3-tonight-moon {
  position: absolute;
  top: 16px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, color-mix(in oklab, var(--hue-accent) 30%, #fff) 70%);
  box-shadow: 0 0 24px rgba(255,255,255,0.18);
  opacity: 0.92;
}
.v3-tonight-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.20em;
  opacity: 0.65;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.v3-tonight-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 200; font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.002em;
}
.v3-tonight-title b { font-weight: 400; }
.v3-tonight-sub {
  font-family: 'Outfit', sans-serif;
  font-style: italic; font-weight: 300;
  font-size: 12.5px;
  opacity: 0.75;
  margin-top: 8px;
  line-height: 1.5;
  max-width: 240px;
}

/* ─── HEADLINES ─── */
.v3-wires {}
.v3-wire-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.v3-wire-row {
  display: flex; gap: 10px;
}
.v3-wire-src {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hue-accent);
  text-transform: uppercase;
  min-width: 64px;
  border-right: 1px dashed var(--hue-whisper);
  padding-right: 8px;
  padding-top: 3px;
}
.v3-wire-t {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 13.5px;
  color: var(--hue-ink);
  line-height: 1.45;
  flex: 1;
}

/* ─── FOOTER ─── */
.v3-footer {
  border-top: 1px dashed var(--hue-whisper);
  margin-top: 24px;
  padding: 20px 0 32px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  color: var(--hue-muted);
  letter-spacing: 0.04em;
}

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .v3-body { grid-template-columns: 1fr; gap: 32px; }
  .v3-hero { height: 380px; }
  .v3-hero-day { font-size: 64px; }
  .v3-hero-clock-time { font-size: 48px; }
  .v3-focus-envelope { padding: 18px 20px; gap: 16px; }
  .v3-focus-title { font-size: 24px; }
  .v3-section-title { font-size: 32px; }
}
@media (max-width: 720px) {
  .v3-stage { padding: 0 18px; }
  .v3-hero-inner { padding: 0 18px; }
  .v3-hero { height: 320px; }
  .v3-hero-day { font-size: 48px; }
  .v3-hero-clock-time { font-size: 36px; }
  .v3-hero-meta { font-size: 16px; }
  .v3-focus-envelope { flex-wrap: wrap; }
  .v3-focus-spine { display: none; }
  .v3-weather { flex-direction: column; }
  .v3-weather-lead { border-right: none; border-bottom: 1px solid var(--hue-whisper); padding: 0 0 10px; margin-bottom: 10px; }
  .v3-weather-hours { padding: 0; }
  .v3-orbit { grid-template-columns: 1fr; }
  .v3-memory { flex-direction: column; }
  .v3-mem-polaroids { margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 fixes 2026-05-23 (case) — Eric feedback:
   1. Hero bottom row bị focus envelope đè → tăng hero height + move row up
   2. "Chúc ngủ ngon, Eric" center & highlight rõ hơn → grid center + bigger
   3. Sidebar di chuyển theo scroll → position: fixed (viewport-anchored)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix #3: Sticky sidebar — anchor to viewport, hide when home tab inactive */
.home-sidebar {
  position: fixed !important;
  left: 24px !important;
  top: 118px !important;          /* titlebar 44 + tabbar 38 + 36 breathing */
  z-index: 50;
}
/* Hide when not on Home tab (parent .tab-content not active means display:none, descendant fixed
   element won't paint per spec — but explicit safeguard) */
.tab-content:not(.active) .home-sidebar { display: none !important; }

/* Fix #1 + #2 — Hero adjustments for v3 */
.v3-hero {
  height: 480px;                  /* was 420 — give room for bottom row + envelope */
}

/* Fix #2: center greeting + day name, with clock anchored top-right */
.v3-hero-top {
  display: block !important;       /* override flex space-between */
  position: relative;
  top: 36px;                       /* was 28 — slightly lower for breathing */
}
.v3-hero-greet-block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 720px;
  width: 100%;
}
.v3-hero-clock {
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
}
/* Greeting now bigger + clearer */
.v3-hero-greet {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  opacity: 1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25);
  margin-bottom: 12px;
}
/* Day name slightly larger to balance the centered layout */
.v3-hero-day {
  font-size: 96px !important;
  letter-spacing: -0.012em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.20);
}

/* Fix #1: bottom row sits ABOVE envelope's overlap zone */
.v3-hero-bottom {
  bottom: 110px !important;        /* was 32 — clear focus envelope (envelope ~110 tall at -52) */
}

/* Stronger contrast on bottom-row meta text */
.v3-hero-meta {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 100px;
  display: inline-block;
}

/* Responsive — adjust for smaller viewports */
@media (max-width: 1080px) {
  .v3-hero { height: 440px; }
  .v3-hero-day { font-size: 72px !important; }
  .v3-hero-bottom { bottom: 96px !important; }
}
@media (max-width: 720px) {
  .home-sidebar { display: none !important; }   /* hide sidebar; tabbar still works */
  .v3-hero { height: 360px; }
  .v3-hero-day { font-size: 56px !important; }
  .v3-hero-greet { font-size: 12px !important; }
  .v3-hero-bottom { bottom: 80px !important; }
  .v3-hero-clock-time { font-size: 36px !important; }
  .v3-hero-meta { font-size: 14px; padding: 6px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 hero — Momentum-style center stage
   Added 2026-05-23 (case) — Eric reference Momentum dashboard:
   full-viewport photo, huge clock + greeting + goal input center,
   corner stats (hue + focused/weather + tasks), bottom-center quote.
   FocusEnvelope removed; quote moved from right column to hero bottom.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override v3 hero — now full-viewport stage */
.v3-hero {
  height: auto !important;
  min-height: calc(100vh - 82px) !important;  /* viewport minus titlebar+tabbar */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove the old vignette aggressive bottom-paper fade so center text shines */
.v3-hero-vignette {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.45) 100%) !important;
}

/* Disable old top/bottom row positioning — replaced by corners */
.v3-hero-top, .v3-hero-bottom { display: none !important; }

/* Corner stat slots */
.v3-hero-corner {
  position: absolute;
  z-index: 3;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
.v3-hero-corner.top-left      { top: 24px;    left: 264px; }   /* offset by sidebar width */
.v3-hero-corner.top-right     { top: 24px;    right: 32px; display: flex; gap: 28px; }
.v3-hero-corner.bottom-left   { bottom: 24px; left: 264px; }
.v3-hero-corner.bottom-right  { bottom: 24px; right: 32px; }

/* When sidebar hidden (mobile), reset left offsets */
@media (max-width: 920px) {
  .v3-hero-corner.top-left,
  .v3-hero-corner.bottom-left { left: 24px; }
}

/* Corner stat — icon + value + label, like Momentum's "0m Focused Today" */
.v3-hero-stat {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.v3-hero-stat-icon {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,0.85);
}
.v3-hero-stat-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.v3-hero-stat-lbl {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}

/* Hue chip rebrand in dark mode for corner */
.v3-hero-corner.top-left .v3-hue-chip {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 6px 14px 6px 6px;
}
.v3-hero-corner.top-left .v3-hue-label {
  color: #fff;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* Photo credit subtle */
.v3-hero-credit {
  font-size: 11.5px;
  color: rgba(255,255,255,0.80);
  font-style: italic;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* ─── CENTER STAGE ─── */
.v3-hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 720px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v3-hero-dayname {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
  margin-bottom: 18px;
  color: rgba(255,255,255,0.95);
}
.v3-hero-dayname .sep { opacity: 0.55; margin: 0 4px; }
.v3-hero-clock-huge {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 180px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.20);
  color: #fff;
}
.v3-hero-clock-huge .sep {
  opacity: 0.6;
}
.v3-hero-greet-mom {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 36px;
  letter-spacing: 0.002em;
  line-height: 1.2;
  text-shadow: 0 3px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.20);
  margin-top: 18px;
  color: #fff;
}
.v3-hero-goal {
  margin-top: 36px;
  width: 100%;
  max-width: 640px;
}
.v3-hero-goal-prompt {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
  margin-bottom: 14px;
}
.v3-hero-goal-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  padding: 8px 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #fff;
  text-align: center;
  outline: none;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.30);
  transition: border-color 0.15s;
}
.v3-hero-goal-input::placeholder {
  color: rgba(255,255,255,0.55);
  font-style: italic;
  font-weight: 300;
}
.v3-hero-goal-input:focus {
  border-bottom-color: rgba(255,255,255,0.95);
}

/* ─── Bottom-center daily quote ─── */
.v3-hero-quote {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
  max-width: 720px;
  padding: 0 24px;
}
.v3-hero-quote-q {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  display: block;
}
.v3-hero-quote-a {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  display: block;
  margin-top: 8px;
}

/* Stage starts after hero — pull up margin so first section breathes */
.v3-stage {
  position: relative;
  z-index: 1;
  padding-top: 32px !important;
}

/* Mobile */
@media (max-width: 720px) {
  .v3-hero { min-height: calc(100vh - 82px); }
  .v3-hero-clock-huge { font-size: 96px; }
  .v3-hero-greet-mom { font-size: 24px; margin-top: 10px; }
  .v3-hero-goal { margin-top: 24px; }
  .v3-hero-goal-prompt { font-size: 15px; }
  .v3-hero-goal-input { font-size: 16px; }
  .v3-hero-dayname { font-size: 10.5px; }
  .v3-hero-corner.top-left,
  .v3-hero-corner.bottom-left,
  .v3-hero-corner.top-right,
  .v3-hero-corner.bottom-right { left: 16px; right: 16px; top: 16px; bottom: 16px; }
  .v3-hero-corner.top-right { display: none; }   /* save space */
  .v3-hero-quote { display: none; }              /* hide quote on mobile */
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3 — sticky parallax hero + photo-driven palette
   Added 2026-05-23 (case) — Eric: "30% cover khi scroll + parallax + palette
   nhảy theo ảnh"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero pins to top when scrolling — shrinks gradually */
.v3-today .v3-hero {
  position: sticky;
  top: 0;
  z-index: 5;
  transition: min-height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Photo subtle transform (set by JS during scroll for parallax/zoom) */
.v3-hero-photo {
  will-change: transform;
  transition: transform 0.08s linear;
}

/* COLLAPSED state — when user has scrolled past threshold */
.v3-today.scrolled .v3-hero {
  min-height: 220px !important;
  height: 28vh !important;
}
.v3-today.scrolled .v3-hero-vignette {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.55) 100%) !important;
}

/* Center stage fades when collapsed */
.v3-hero-center,
.v3-hero-quote {
  transition: opacity 0.4s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-today.scrolled .v3-hero-center {
  opacity: 0;
  transform: translateY(-50px) scale(0.92);
  pointer-events: none;
}
.v3-today.scrolled .v3-hero-quote {
  opacity: 0;
  transform: translate(-50%, 20px);
}

/* Mini-header info shows when collapsed — small clock + day inline */
.v3-hero-mini {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 3;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.v3-today.scrolled .v3-hero-mini {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.v3-hero-mini-row {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.v3-hero-mini-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 40px;
  letter-spacing: 0.005em;
  line-height: 1;
}
.v3-hero-mini-time .sep { opacity: 0.6; }
.v3-hero-mini-day {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Corner stats stay but shrink subtly */
.v3-hero-corner {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}
.v3-today.scrolled .v3-hero-corner.top-right .v3-hero-stat-lbl,
.v3-today.scrolled .v3-hero-corner.bottom-right .v3-hero-stat-lbl,
.v3-today.scrolled .v3-hero-corner.bottom-left { opacity: 0.7; }
.v3-today.scrolled .v3-hero-corner.top-left .v3-hue-chip { padding: 4px 10px 4px 4px; }
.v3-today.scrolled .v3-hero-corner.top-left .v3-hue-dot { width: 18px; height: 18px; }

/* Smooth photo crossfade when palette extracts */
.v3-hero-photo { transition: opacity 0.4s ease, transform 0.08s linear; }

/* Bottom corner credits fade on scroll (less critical when in compact mode) */
.v3-today.scrolled .v3-hero-corner.bottom-left,
.v3-today.scrolled .v3-hero-corner.bottom-right {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* Stage content needs negative margin so it scrolls up under the sticky hero
   (creates the "cover stays" effect — content scrolls behind hero's lower edge) */
.v3-today .v3-stage {
  position: relative;
  z-index: 1;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .v3-today .v3-hero,
  .v3-hero-center, .v3-hero-quote, .v3-hero-mini,
  .v3-hero-photo { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   LLM SETUP WIZARD — automation UI (preflight banner / install-log
   drawer / Codex multi-step handhold). Added in automation pass.
   ════════════════════════════════════════════════════════════════ */

/* Preflight banner — shown above cards when pre-install checks find issues */
.llm-preflight {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.llm-preflight-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--amber-500);
  margin-bottom: 8px;
}
.llm-preflight-head svg { stroke: currentColor; flex-shrink: 0; }
.llm-preflight-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.llm-preflight-item {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--navy-700);
  border-top: 1px dashed var(--line);
}
.llm-preflight-item:first-child { border-top: none; }
.llm-preflight-detail {
  flex: 1; min-width: 0;
  line-height: 1.45;
}
.llm-preflight-block .llm-preflight-detail { color: var(--red-500); }
.llm-preflight-warn .llm-preflight-detail  { color: var(--navy-700); }
.llm-preflight-item .llm-link {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--navy-800);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
.llm-preflight-item .llm-link:hover { background: var(--navy-700); color: #fff; }

/* Install log drawer — appears inside card while SSE stream is running */
.llm-install-log {
  background: var(--navy-950);
  color: #c5cee0;
  border-radius: 7px;
  border: 1px solid var(--navy-700);
  max-height: 180px;
  overflow: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
}
.llm-install-log-head {
  position: sticky; top: 0;
  background: var(--navy-900);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--navy-700);
  color: #93a1bf;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  z-index: 1;
}
.llm-install-log-head .trail-loader .td { background: var(--cyan-400) !important; }
.llm-install-log-body {
  padding: 8px 12px;
}
.llm-install-log-line {
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.llm-install-log-empty { color: var(--slate-300); font-style: italic; }

/* Codex multi-step handhold flow — appears inside Codex card while flow active */
.llm-codex-flow {
  background: rgba(31,169,255,0.04);
  border: 1px solid rgba(31,169,255,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.llm-codex-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.llm-codex-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate-400);
  padding: 4px 0;
}
.llm-codex-step-active { color: var(--navy-800); font-weight: 500; }
.llm-codex-step-done   { color: var(--green-500); }
.llm-codex-step-pending .llm-codex-step-label,
.llm-codex-step-pending .llm-codex-step-dot { opacity: 0.55; }
.llm-codex-step-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--slate-300);
  flex-shrink: 0;
  margin-top: 1px;
}
.llm-codex-step-check {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green-500);
  flex-shrink: 0;
  margin-top: 1px;
}
.llm-codex-step .trail-loader { margin-top: 4px; flex-shrink: 0; }
.llm-codex-step-label { flex: 1; }
.llm-codex-cancel {
  display: flex; justify-content: flex-end;
  border-top: 1px dashed rgba(31,169,255,0.20);
  padding-top: 6px;
}



/* v3.3.1 — Prevent scroll anchoring jank (CLEAN — no contain, no GPU forcing) */
.launcher { overflow-anchor: none; }
.v3-hero { overflow-anchor: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3.2 — Replace shrinking-sticky with separate strip (zero flicker)
   Hero: position relative, scrolls away naturally.
   Strip: sits after hero in DOM, position sticky top:0, 30vh tall.
   ═══════════════════════════════════════════════════════════════════════════ */

/* RESET v3.3 sticky/collapse on hero — back to plain relative */
.v3-today .v3-hero {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: calc(100vh - 82px) !important;
  z-index: 1 !important;
  transition: none !important;
  clip-path: none !important;
}
.v3-today.scrolled .v3-hero {
  min-height: calc(100vh - 82px) !important;
  height: auto !important;
  clip-path: none !important;
}

/* Force center stage + quote + corners always visible on hero (no collapse fade) */
.v3-today.scrolled .v3-hero-center,
.v3-today.scrolled .v3-hero-quote,
.v3-today.scrolled .v3-hero-corner.bottom-left,
.v3-today.scrolled .v3-hero-corner.bottom-right {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.v3-today.scrolled .v3-hero-mini { opacity: 0 !important; }  /* mini-header obsolete */

/* ─── The strip — separate sticky element ─── */
.v3-hero-strip {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 30vh;
  min-height: 180px;
  overflow: hidden;
  background: var(--hue-ink, #0d2424);
  margin: 0;
  /* Negative margin pulls strip UP so it overlaps with the hero above.
     Result: strip is in flow at hero's bottom edge, but starts displaying
     from the top edge of hero, so visually the strip "becomes" the hero
     when the hero scrolls past. */
}
.v3-hero-strip-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.92);
}
.v3-hero-strip-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.40) 60%,
    rgba(0,0,0,0.55) 100%);
}
.v3-hero-strip-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0 264px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.40);
}
.v3-hero-strip-left {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.v3-hero-strip-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.005em;
}
.v3-hero-strip-time .sep { opacity: 0.6; }
.v3-hero-strip-day {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.v3-hero-strip-right {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.90);
}

@media (max-width: 920px) {
  .v3-hero-strip-inner { padding: 0 24px; }
}
@media (max-width: 720px) {
  .v3-hero-strip { height: 26vh; min-height: 140px; }
  .v3-hero-strip-time { font-size: 44px; }
  .v3-hero-strip-day { font-size: 11px; letter-spacing: 0.16em; }
  .v3-hero-strip-right { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3.3 — Strip is FIXED + slides in only when hero scrolled past
   Eric: "quá là lỗi luôn" — strip + hero both visible = duplicate photo jarring.
   Fix: strip starts hidden (translateY -100%), slides in when root has .past-hero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override sticky → fixed, hidden by default */
.v3-hero-strip {
  position: fixed !important;
  top: 82px !important;          /* below titlebar (44) + tabbar (38) */
  left: 252px !important;         /* offset to avoid sidebar overlap */
  right: 0 !important;
  height: 30vh !important;
  min-height: 180px !important;
  z-index: 10;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.30s ease;
  margin: 0 !important;
}
.v3-today.past-hero .v3-hero-strip {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile — strip full width when sidebar hidden */
@media (max-width: 920px) {
  .v3-hero-strip { left: 0 !important; }
}
@media (max-width: 720px) {
  .v3-hero-strip { height: 26vh !important; min-height: 140px !important; }
}

/* ════════════════════════════════════════════════════════════════
   EXPERTS PAGE — Chuyên gia (replaces old Marketplace subpage)
   17 AP personas roster with composer-first IA + persona-targeted chat modal
   ════════════════════════════════════════════════════════════════ */

.experts-loader {
  padding: 60px 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; color: var(--slate-500); font-size: 13px;
}

/* ── Hero composer ── */
.experts-hero {
  margin-bottom: 24px;
}
.experts-hero .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--cyan-500);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.experts-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 38px;
  letter-spacing: 0.005em;
  color: var(--navy-800);
  line-height: 1.08;
  margin: 0;
}
.experts-title .accent { color: var(--cyan-500); font-weight: 300; }
.experts-lead {
  font-size: 14px; color: var(--slate-500);
  margin: 12px 0 22px;
  max-width: 640px; line-height: 1.55;
}

.experts-composer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.experts-composer:focus-within {
  border-color: var(--cyan-400);
  box-shadow: 0 6px 24px rgba(31,169,255,0.10);
}
.experts-composer-input {
  width: 100%;
  border: none; outline: none;
  resize: none;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px; line-height: 1.55;
  color: var(--navy-800);
  background: transparent;
  min-height: 44px; max-height: 120px;
}
.experts-composer-input::placeholder {
  color: var(--slate-400);
}
.experts-composer-actions {
  display: flex; align-items: center; gap: 10px;
  min-height: 24px;
  margin-top: 6px;
}
.experts-suggest {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.experts-suggest-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.experts-suggest-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  border-radius: 100px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--navy-700);
  transition: all 120ms ease;
}
.experts-suggest-chip:hover {
  border-color: var(--cyan-400);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.experts-suggest-mono {
  width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 9.5px;
  color: #fff;
  letter-spacing: 0.04em;
}

/* ── Filter chips ── */
.experts-filter {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 4px;
}
.experts-chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 120ms ease;
}
.experts-chip:hover {
  color: var(--navy-800);
  border-color: var(--slate-300);
}
.experts-chip.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

/* ── Persona grid ── */
.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1380px) {
  .experts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .experts-grid { grid-template-columns: repeat(2, 1fr); }
}

.experts-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex; flex-direction: column;
  min-height: 200px;
}
.experts-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan-400);
  box-shadow: 0 12px 28px rgba(31,169,255,0.12);
}
.experts-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.experts-card-avatar {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.experts-card-monogram {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 22px;
  color: #fff;
  letter-spacing: 0.06em;
}
.experts-card-flagship {
  font-size: 14px;
  color: var(--amber-500);
  font-weight: 700;
  line-height: 1;
}
.experts-card-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 17px; font-weight: 500;
  color: var(--navy-800);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.experts-card-role {
  font-size: 11.5px;
  color: var(--slate-500);
  font-weight: 500;
  margin-bottom: 8px;
}
.experts-card-voice {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.experts-card-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: auto;
}
.experts-card-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--bg-canvas);
  color: var(--slate-500);
  border-radius: 100px;
  letter-spacing: 0.02em;
}

.experts-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--slate-500);
  font-size: 13px;
}

.experts-error {
  text-align: center;
  padding: 60px 20px;
  max-width: 500px;
  margin: 0 auto;
}
.experts-error-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 22px;
  color: var(--navy-800);
  margin: 0 0 8px;
}
.experts-error-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 10px;
}

/* ── Chat modal LEGACY removed — replaced by slide-in panel v2 at end of file ── */
/* Old fade/pop animations retained for Council modal which still uses them. */
@keyframes experts-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes experts-pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   LLM SETUP WIZARD — Standalone /llm community utility mode
   (added for Connect-offline static fallback + Install Dragon banner)
   ════════════════════════════════════════════════════════════════ */

/* Install Dragon Connect banner — only shown in standalone offline mode */
.llm-install-dragon-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--grad-trail);
  border-radius: 12px;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.llm-install-dragon-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.llm-install-dragon-body { flex: 1; min-width: 0; }
.llm-install-dragon-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 500;
  color: #fff;
  letter-spacing: -0.003em;
  line-height: 1.3;
}
.llm-install-dragon-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
  line-height: 1.45;
}
.llm-install-dragon-cta .llm-btn {
  background: #fff;
  border-color: #fff;
  color: var(--navy-800);
  flex-shrink: 0;
  text-decoration: none;
}
.llm-install-dragon-cta .llm-btn:hover {
  background: var(--paper-tint);
  border-color: var(--paper-tint);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Static card — same skeleton as live card but no status pill / no meta line */
.llm-card-static .llm-card-head {
  align-items: center;
}
.llm-card-static .llm-card-cmd code {
  flex: 1 1 auto;
  max-width: 100%;
}

@media (max-width: 720px) {
  .llm-install-dragon-cta { flex-direction: column; align-items: flex-start; }
  .llm-install-dragon-cta .llm-btn { width: 100%; justify-content: center; }
}

/* Streaming cursor + cost annotation */
.experts-msg-streaming .experts-msg-bubble::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--cyan-400);
  animation: experts-blink 1s steps(2) infinite;
  font-weight: 300;
}
@keyframes experts-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.experts-msg-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 4px;
  margin-left: 14px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3.6 — smooth parallax, glass sidebar on Today, ensure cover always shows
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smoother parallax: GPU layer + will-change ── */
.v3-hero-photo {
  will-change: transform;
  transform: translateZ(0);   /* promote to compositor layer */
  backface-visibility: hidden;
  /* Remove transition on transform — JS sets transform every rAF frame already.
     Transition was making each scroll-step animate, causing perceived stutter. */
  transition: opacity 0.4s ease !important;
}

/* ── Sidebar GLASS on Today subpage (transparent + blur to blend with photo) ── */
.v3-today .home-sidebar,
.v3-today.v3-today + .home-sidebar,
.tab-content .home-sidebar {
  /* Only apply when Today is active subpage */
}
/* Use :has() — modern browsers. Sidebar glasses up when Today is active subpage */
.launcher:has(.v3-today.active) .home-sidebar {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-title,
.launcher:has(.v3-today.active) .home-sidebar .sb-section-label {
  color: rgba(255,255,255,0.78) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item {
  color: rgba(255,255,255,0.92) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item:hover {
  background: rgba(255,255,255,0.10) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item.active {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item svg,
.launcher:has(.v3-today.active) .home-sidebar .sb-item:not(.active) svg {
  color: rgba(255,255,255,0.75) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-quick {
  color: rgba(255,255,255,0.92) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-quick:hover {
  background: rgba(255,255,255,0.10) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-divider {
  background-image: radial-gradient(circle, rgba(255,255,255,0.30) 0.6px, transparent 1px) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-header {
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-header .sb-dot {
  background: rgba(255,255,255,0.85) !important;
}

/* When user scrolls PAST hero (strip visible), sidebar reverts to default
   light style because it's now over editorial paper bg, not photo */
.launcher:has(.v3-today.active.past-hero) .home-sidebar {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-title,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-section-label {
  color: var(--slate-400) !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item {
  color: var(--navy-700) !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item.active {
  background: var(--navy-800) !important;
  color: #fff !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item:hover {
  background: rgba(14,31,77,0.04) !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-quick {
  color: var(--navy-800) !important;
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-divider {
  background-image: radial-gradient(circle, var(--slate-300) 0.6px, transparent 1px) !important;
}

/* ── Council Mode (Phase 3) ── */
.experts-composer-tools {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.experts-council-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: var(--navy-700);
  cursor: pointer;
  transition: all 120ms ease;
}
.experts-council-btn:hover {
  border-color: var(--cyan-400);
  color: var(--navy-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.experts-council-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1100;
  align-items: center; justify-content: center;
}
.experts-council-modal.open { display: flex; }
.experts-council-modal:focus { outline: none; }

/* Pick-only modal layout (Eric directive 2026-05-25 — compact picker) */
.experts-council-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
/* Keep chips as inline-flex wrap (design system pill pattern, not grid) */
.experts-council-section:last-of-type { border-bottom: none; }
.experts-council-section-label {
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-400, #94a3b8);
  margin-bottom: 10px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.experts-council-section-label > span:first-child {
  white-space: nowrap;
}
.experts-council-pickhint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--slate-400, #94a3b8);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.experts-council-pickmethod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.experts-council-pickmethod-opt {
  position: relative;
  display: flex; flex-direction: column;
  gap: 3px;
  padding: 12px 14px 12px 38px;
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 9px;
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--bg-canvas, #f8fafc);
}
.experts-council-pickmethod-opt:hover {
  border-color: var(--navy-500, #475d8e);
  background: white;
}
.experts-council-pickmethod-opt input[type="radio"] {
  position: absolute; left: 13px; top: 16px;
  accent-color: var(--navy-700, #1e2d52);
}
.experts-council-pickmethod-opt:has(input:checked) {
  border-color: var(--navy-700, #1e2d52);
  background: linear-gradient(135deg, #e8effa 0%, #f4f7fc 100%);
}
.experts-council-pickmethod-title {
  font-size: 13px; font-weight: 600;
  color: var(--navy-800, #0e1f4d);
}
.experts-council-pickmethod-sub {
  font-size: 11.5px;
  color: var(--slate-500, #64748b);
}

.experts-council-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-canvas, #f8fafc);
}
.experts-council-cancel {
  appearance: none; background: var(--paper);
  border: 1px solid var(--line-strong, #d0d5dd);
  color: var(--navy-800, #0e1f4d);
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
}
.experts-council-cancel:hover { border-color: var(--slate-300, #cbd5e1); background: var(--paper-tint, #f8fafc); }
.experts-council-start {
  appearance: none;
  background: var(--navy-800, #0e1f4d);
  color: white;
  border: 1px solid var(--navy-800, #0e1f4d);
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.12s;
}
.experts-council-start:hover { background: var(--navy-700, #1e2d52); }
.experts-council-start:disabled { opacity: 0.4; cursor: not-allowed; }
.experts-council-start-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 8px;
}

/* Council mode in chat-slide — avatar stack + per-member tagged messages */
.experts-chat-council-stack {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.experts-chat-council-mono {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  border: 2px solid var(--paper, white);
  box-shadow: 0 1px 3px rgba(14,31,77,0.15);
}
.experts-msg-council-member { margin-top: 12px; }
.experts-msg-council-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  padding-left: 4px;
}
.experts-msg-council-mono {
  width: 22px; height: 22px;
  border-radius: 6px;
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
}
.experts-msg-council-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--navy-800, #0e1f4d);
}
.experts-msg-council-role {
  font-size: 11px;
  color: var(--slate-500, #64748b);
  margin-left: auto;
}
.experts-council-backdrop {
  position: absolute; inset: 0;
  background: rgba(14,31,77,0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: experts-fade-in 200ms ease both;
}
.experts-council-panel {
  position: relative;
  /* Compact picker-only modal (Eric 2026-05-25 — manual pick, no chat inline) */
  width: 720px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(14,31,77,0.40), 0 0 0 1px rgba(14,31,77,0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: experts-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.experts-council-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.experts-council-header-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 500; font-size: 16px;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.experts-council-header-sub {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
  line-height: 1.5;
}
.experts-council-header .experts-chat-close {
  position: absolute; top: 12px; right: 12px;
}
.experts-council-pinrow {
  padding: 12px 24px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.experts-council-pinrow-label,
.experts-council-pickrow-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
  flex-shrink: 0;
}
.experts-council-pinslots {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
.experts-council-empty-hint {
  font-size: 12px;
  color: var(--slate-400);
  font-style: italic;
}
.experts-council-pin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  border-radius: 100px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--navy-700);
  transition: all 120ms ease;
}
.experts-council-pin:hover { border-color: var(--red-500); background: rgba(217,77,77,0.04); }
.experts-council-pin:hover .experts-council-pin-x { color: var(--red-500); }
.experts-council-pin-avatar {
  width: 22px !important; height: 22px !important; border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.experts-council-pin-x {
  font-size: 13px; line-height: 1; color: var(--slate-400);
  margin-left: 4px;
}
.experts-council-mode {
  display: flex; gap: 12px;
  font-size: 11.5px; color: var(--navy-700); font-weight: 500;
  margin-left: auto;
}
.experts-council-mode label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.experts-council-pickrow {
  padding: 10px 24px;
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.experts-council-picker {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.experts-council-pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--slate-500);
  transition: all 120ms ease;
  text-align: left;
  min-width: 0;
}
.experts-council-pick-body {
  display: inline-flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.experts-council-pick-title {
  font-size: 10px;
  font-weight: 400;
  color: var(--slate-400, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1.2;
}
.experts-council-pick.pinned .experts-council-pick-title { color: var(--cyan-500); opacity: 0.7; }
.experts-council-pick-locked .experts-council-pick-title { color: var(--navy-700, #1e2d52); opacity: 0.7; }
.experts-council-pick-mono {
  width: 26px !important; height: 26px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  flex-shrink: 0;
}
.experts-council-pick:hover { border-color: var(--slate-300); color: var(--navy-800); }
.experts-council-pick.pinned {
  border-color: var(--cyan-400);
  background: rgba(31,169,255,0.06);
  color: var(--cyan-500);
  font-weight: 600;
}
/* Will (coordinator) — always pinned, locked. Visually emphasized. */
.experts-council-pick-locked {
  border-color: var(--navy-700, #1e2d52) !important;
  background: rgba(46,91,219,0.08) !important;
  color: var(--navy-800, #0e1f4d) !important;
  cursor: default !important;
  font-weight: 600;
}
.experts-council-pick-locked:hover {
  border-color: var(--navy-700, #1e2d52);
  background: rgba(46,91,219,0.08);
}
.experts-council-pick-lock {
  font-size: 9px;
  color: var(--amber-500, #d99a13);
  margin-left: 2px;
}
.experts-council-pick-mono {
  width: 18px; height: 18px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 9px;
  color: #fff;
}
.experts-council-room {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 14px 24px 18px;
}
.experts-council-prompt-row {
  display: flex; gap: 8px;
  margin-bottom: 12px;
}
.experts-council-send {
  align-self: flex-start;
}
.experts-council-results {
  flex: 1;
  overflow-y: auto;
}
.experts-council-cols {
  display: grid;
  gap: 12px;
}
.experts-council-col {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  min-height: 200px;
}
.experts-council-col-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.experts-council-col-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--navy-800);
}
.experts-council-col-role {
  font-size: 10.5px;
  color: var(--slate-500);
}
.experts-council-col-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy-700);
  flex: 1;
}
.experts-council-col-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 8px;
  text-align: right;
}
.experts-council-summary {
  margin-top: 14px;
  text-align: center;
}
.experts-council-summary-pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-canvas);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3.7 — strip full-width, sidebar overlays via glass blur
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-hero-strip {
  left: 0 !important;           /* extend to viewport's left edge */
  right: 0 !important;
}
.v3-hero-strip-inner {
  padding-left: 264px !important;   /* leave room visually for sidebar */
}
/* Sidebar z-index higher than strip so glass overlays strip's photo */
.launcher:has(.v3-today.active) .home-sidebar {
  z-index: 11 !important;            /* strip z=10 */
}
/* When strip is visible (past-hero), sidebar over strip's PHOTO area
   should remain glass — keep adaptive behaviour: glass over photo (top of strip),
   solid over editorial (below strip). */
.launcher:has(.v3-today.active.past-hero) .home-sidebar {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.20) 28vh,
    rgba(255,255,255,0.92) calc(28vh + 24px),
    rgba(255,255,255,0.92) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}
/* Items keep dark colors (so visible on solid bottom portion) — glass top portion
   has dark text visible because strip photo is dark/saturated underneath. */
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-quick {
  color: var(--navy-700) !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.4);  /* slight halo for legibility on photo */
}
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item.active {
  background: var(--navy-800) !important;
  color: #fff !important;
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.3.8 — hero fades out when past-hero (prevents double-clock overlap with strip)
   Sentinel at 50% means strip can slide in while hero is still in flow.
   We fade the hero to avoid 2 clocks visible simultaneously.
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-today .v3-hero {
  transition: opacity 0.35s ease;
}
.v3-today.past-hero .v3-hero {
  opacity: 0;
  pointer-events: none;
}
.v3-today.past-hero .v3-hero-photo {
  /* freeze parallax transform while invisible */
  transition: opacity 0.35s ease !important;
}

/* ════════════════════════════════════════════════════════════════
   LLM SETUP WIZARD — Inline self-contained install guide
   Replaces the 3-button footer when user clicks "Cài đặt" on a static
   card. 5-step hand-held tutorial keeps the user oriented at every step.
   ════════════════════════════════════════════════════════════════ */

.llm-card-guide-active {
  background: linear-gradient(180deg, rgba(31,169,255,0.03), transparent 50%);
}

.llm-guide {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.llm-guide-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.llm-guide-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--cyan-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.llm-guide-head .llm-link {
  font-size: 16px; font-weight: 400;
  color: var(--slate-400);
  padding: 2px 8px;
}
.llm-guide-head .llm-link:hover { color: var(--red-500); }

.llm-guide-steps {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.llm-guide-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.llm-guide-step:first-child { border-top: none; }

.llm-guide-step-mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  margin-top: 1px;
  transition: all 200ms ease;
}
.llm-guide-step-mark-pending {
  background: var(--bg-canvas);
  color: var(--slate-300);
  border: 1px solid var(--line);
}
.llm-guide-step-mark-active {
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(31,169,255,0.20);
}
.llm-guide-step-mark-done {
  background: var(--green-500);
  color: #fff;
}
.llm-guide-step-mark-done svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.6; }

.llm-guide-step-body {
  flex: 1; min-width: 0;
}
.llm-guide-step-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.35;
}
.llm-guide-step-pending .llm-guide-step-title { color: var(--slate-400); font-weight: 500; }
.llm-guide-step-done .llm-guide-step-title    { color: var(--green-500); text-decoration: line-through; text-decoration-color: rgba(20,163,107,0.40); }

.llm-guide-step-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.55;
  margin-top: 3px;
}
.llm-guide-step-desc code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-canvas);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--navy-800);
}
.llm-guide-step-pending .llm-guide-step-desc { opacity: 0.55; }
.llm-guide-step-done    .llm-guide-step-desc { opacity: 0.55; }

.llm-guide-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.llm-guide-foot-spacer { flex: 1; }
.llm-guide-foot .llm-btn { font-size: 12px; padding: 6px 11px; }

.llm-guide-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--green-500);
  font-weight: 600;
  padding: 6px 4px;
}
.llm-guide-hint svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; }

/* Success state (post step-5) */
.llm-guide-success {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
}
.llm-guide-success-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-500);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin-bottom: 4px;
}
.llm-guide-success-icon svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; }
.llm-guide-success-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 16px; font-weight: 500;
  color: var(--navy-800);
}
.llm-guide-success-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.5;
  max-width: 360px;
}
.llm-guide-success-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 8px;
  flex-wrap: wrap; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.4 — PAGE PEEL pattern (final clean approach)
   2026-05-23 (case)
   Hero: position sticky top:0 height:100vh — pinned at top, full size, never shrinks
   Stage: z-index 2 above hero, paper bg, rounded top corners, soft shadow
   → Stage scrolls UP over hero like a page peel
   → Zero JS, CSS-only, smooth, no flicker, no overlap, no race conditions
   ═══════════════════════════════════════════════════════════════════════════ */

/* HARD OVERRIDE prior rules */
.v3-today .v3-hero {
  position: sticky !important;
  top: 0 !important;
  height: calc(100vh - 82px) !important;
  min-height: calc(100vh - 82px) !important;
  max-height: calc(100vh - 82px) !important;
  z-index: 1 !important;
  opacity: 1 !important;          /* never fade */
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* STAGE — scrolls UP over hero */
.v3-today .v3-stage {
  position: relative !important;
  z-index: 2 !important;
  background: var(--hue-paper, #eef7f6) !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.15), 0 -1px 0 rgba(255,255,255,0.4) inset !important;
  margin-top: 0 !important;        /* sits right after hero in flow */
  padding-top: 36px !important;
  min-height: 100vh;               /* enough content to fully scroll over hero */
}

/* HIDE strip element entirely (deprecated) */
.v3-hero-strip { display: none !important; }

/* RESET past-hero state — no longer needed */
.v3-today.past-hero .v3-hero { opacity: 1 !important; pointer-events: auto !important; }
.v3-today.past-hero .v3-hero-strip { display: none !important; opacity: 0 !important; }

/* SIDEBAR — glass transparent style on Today (v3.5: hero stays visible behind sidebar) */
.launcher:has(.v3-today.active) .home-sidebar,
.launcher:has(.v3-today.active.past-hero) .home-sidebar {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.15) inset !important;
  z-index: 50 !important;          /* above stage z=2 */
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item {
  color: var(--navy-800) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
  font-weight: 500 !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-item.active,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-item.active {
  background: var(--navy-800) !important;
  color: #fff !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-title,
.launcher:has(.v3-today.active) .home-sidebar .sb-section-label,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-title,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-section-label {
  color: var(--slate-400) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-quick,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-quick {
  color: var(--navy-800) !important;
}
.launcher:has(.v3-today.active) .home-sidebar .sb-divider,
.launcher:has(.v3-today.active.past-hero) .home-sidebar .sb-divider {
  background-image: radial-gradient(circle, var(--slate-300) 0.6px, transparent 1px) !important;
}

/* ════════════════════════════════════════════════════════════════
   v3.5.1 — KILL LEGACY PARALLAX. Page Peel = pure CSS sticky.
   Force hero photo to fill its container with no transform/transition.
   Overrides every prior .v3-hero-photo declaration.
   ════════════════════════════════════════════════════════════════ */
.v3-today .v3-hero-photo {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
.v3-today .v3-hero-sentinel { display: none !important; }
.v3-today .v3-hero-strip { display: none !important; }
.v3-today.past-hero .v3-hero,
.v3-today.past-hero .v3-hero-photo {
  /* nuke any past-hero state that might have leaked */
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ════════════════════════════════════════════════════════════════
   EXPERTS CHAT v2 — Slide-in LEFT panel (ForeSee port)
   Markdown · attachments · typing · resize · suggestion chips
   ════════════════════════════════════════════════════════════════ */

.experts-chat-panel-root {
  position: fixed; inset: 0;
  z-index: 1100;
  pointer-events: none;
  display: block;
}
.experts-chat-panel-root .experts-chat-backdrop {
  position: absolute; inset: 0;
  background: rgba(14,31,77,0.18);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.experts-chat-panel-root.open { pointer-events: auto; }
.experts-chat-panel-root.open .experts-chat-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.experts-chat-slide {
  position: absolute;
  /* Right-anchored slide-in (Eric directive 2026-05-25 fix #1 — revert center).
     Bigger default than original 460px — feels spacious without dominating screen.
     Resizable via left + bottom handles. */
  top: 6vh;
  right: 24px;
  height: 88vh;
  width: min(840px, 70vw);
  background: var(--paper);
  border-radius: 16px;
  box-shadow: -24px 0 80px rgba(14,31,77,0.22), 0 0 0 1px rgba(14,31,77,0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.experts-chat-panel-root.open .experts-chat-slide {
  transform: translateX(0);
}
/* WIDTH resize handle — left edge */
.experts-chat-resize {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background 150ms ease;
}
.experts-chat-resize:hover { background: rgba(31,169,255,0.18); }

/* HEIGHT resize handle — top edge (ForeSee pattern, Eric feedback) */
.experts-chat-resize-v {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 11;
  background: transparent;
  transition: background 150ms ease;
}
.experts-chat-resize-v:hover { background: rgba(31,169,255,0.18); }
.experts-chat-resize-v::after {
  content: '';
  position: absolute; top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.experts-chat-resize-v:hover::after { opacity: 1; }

.experts-chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}
.experts-chat-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.experts-chat-monogram {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 16px;
  color: #fff;
  letter-spacing: 0.06em;
}
.experts-chat-header-text { flex: 1; min-width: 0; }
.experts-chat-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 500;
  color: var(--navy-800);
}
.experts-chat-role {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 1px;
}
.experts-chat-header-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.experts-chat-iconbtn {
  background: transparent;
  border: none;
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
  cursor: pointer;
  transition: all 120ms ease;
}
.experts-chat-iconbtn:hover {
  background: var(--bg-canvas);
  color: var(--navy-800);
}

.experts-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  background: var(--bg-canvas);
}

/* Intro panel (empty state) */
.experts-chat-intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 30px 18px;
}
.experts-chat-intro-avatar {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(14,31,77,0.18);
  margin-bottom: 16px;
}
.experts-chat-intro-mono {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; font-size: 26px;
  color: #fff;
  letter-spacing: 0.06em;
}
.experts-chat-intro-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 22px; font-weight: 400;
  color: var(--navy-800);
  margin-bottom: 4px;
}
.experts-chat-intro-role {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
  margin-bottom: 14px;
}
.experts-chat-intro-voice {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.55;
  font-style: italic;
  max-width: 320px;
  margin-bottom: 22px;
}
.experts-chat-intro-chips {
  display: flex; flex-direction: column; gap: 7px;
  align-items: stretch;
  width: 100%;
  max-width: 340px;
}
.experts-chat-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--navy-700);
  text-align: left;
  cursor: pointer;
  transition: all 120ms ease;
}
.experts-chat-chip:hover {
  border-color: var(--cyan-400);
  background: var(--paper-tint);
  transform: translateY(-1px);
}

/* Message bubble */
.experts-msg {
  display: flex;
}
.experts-msg-user { justify-content: flex-end; }
.experts-msg-assistant, .experts-msg-system { justify-content: flex-start; }
.experts-msg-bubble {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
}
.experts-msg-user .experts-msg-bubble {
  background: var(--navy-800);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.experts-msg-assistant .experts-msg-bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--navy-800);
  border-bottom-left-radius: 4px;
}

.experts-msg-error {
  color: var(--red-500);
  font-style: italic;
}

/* User attachment chips inside user message */
.experts-msg-atts {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.experts-msg-att {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  background: rgba(255,255,255,0.15);
  padding: 2px 7px;
  border-radius: 100px;
}
.experts-msg-att-name { font-weight: 500; }

/* Cost annotation */
.experts-msg-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 3px;
  margin-left: 13px;
  letter-spacing: 0.02em;
}

/* Markdown rendering inside assistant bubble */
.experts-md p { margin: 0; }
.experts-md p + p { margin-top: 0.65em; }
.experts-md ul, .experts-md ol { margin: 0.5em 0; padding-left: 1.4em; }
.experts-md li { margin: 0.15em 0; }
.experts-md strong { font-weight: 600; color: var(--navy-800); }
.experts-md em { font-style: italic; }
.experts-md h1, .experts-md h2, .experts-md h3, .experts-md h4 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  margin: 0.8em 0 0.3em;
  line-height: 1.3;
  color: var(--navy-800);
}
.experts-md h1 { font-size: 18px; }
.experts-md h2 { font-size: 16px; }
.experts-md h3 { font-size: 14.5px; }
.experts-md h4 { font-size: 13.5px; }
.experts-md hr {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 0.8em 0;
}
.experts-md a {
  color: var(--cyan-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.experts-md a:hover { color: var(--blue-500); }
.experts-md blockquote {
  margin: 0.6em 0;
  padding: 0.4em 0.8em;
  background: var(--bg-canvas);
  border-radius: 6px;
  color: var(--slate-500);
  font-style: italic;
}
.experts-md code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: var(--bg-canvas);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--navy-800);
}
.experts-md pre {
  margin: 0.6em 0;
  padding: 12px 14px;
  background: #1a2540;
  color: #f1f5fc;          /* near white — high contrast (Eric feedback) */
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid rgba(31,169,255,0.18);
}
.experts-md pre code,
.experts-md pre code[class*="language-"] {
  background: transparent !important;
  padding: 0 !important;
  color: #f1f5fc !important;     /* high-contrast body text */
  font-size: inherit !important;
  text-shadow: none !important;
}
/* Prism token colors — readable on dark navy background */
.experts-md pre .token.comment,
.experts-md pre .token.prolog,
.experts-md pre .token.doctype,
.experts-md pre .token.cdata { color: #8aa2c8; font-style: italic; }
.experts-md pre .token.punctuation { color: #c5cee0; }
.experts-md pre .token.keyword,
.experts-md pre .token.atrule,
.experts-md pre .token.tag,
.experts-md pre .token.selector { color: #82c0ff; font-weight: 600; }
.experts-md pre .token.function,
.experts-md pre .token.class-name,
.experts-md pre .token.method { color: #ffd47e; }
.experts-md pre .token.string,
.experts-md pre .token.attr-value,
.experts-md pre .token.regex { color: #a5e9b3; }
.experts-md pre .token.number,
.experts-md pre .token.boolean,
.experts-md pre .token.constant { color: #ffb178; }
.experts-md pre .token.operator,
.experts-md pre .token.entity,
.experts-md pre .token.url { color: #f0aaff; }
.experts-md pre .token.variable,
.experts-md pre .token.property { color: #f1f5fc; }
.experts-md pre .token.deleted { color: #ff7a7a; }
.experts-md pre .token.inserted { color: #a5e9b3; }
.experts-md table {
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 12.5px;
  width: 100%;
}
.experts-md th, .experts-md td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.experts-md th {
  background: var(--paper-tint);
  font-weight: 600;
  color: var(--navy-800);
}
.experts-md tr:nth-child(even) td { background: rgba(244, 247, 251, 0.5); }

/* Typing indicator */
.experts-typing {
  display: inline-flex; gap: 4px;
  padding: 11px 14px !important;
  align-items: center;
}
.experts-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  animation: experts-typing-bounce 1.2s infinite ease-in-out;
}
.experts-typing-dot:nth-child(1) { animation-delay: 0s; }
.experts-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.experts-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes experts-typing-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Streaming cursor for assistant bubble */
.experts-msg-streaming .experts-msg-bubble:not(:empty)::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--cyan-400);
  animation: experts-blink 0.9s steps(2) infinite;
  font-weight: 300;
}

/* Input area */
.experts-chat-input-area {
  position: relative;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.experts-chat-input-area.drag-active::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(31,169,255,0.10);
  border: 2px dashed var(--cyan-400);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.experts-chat-input-area.drag-active .experts-chat-drag-overlay {
  display: flex;
}
.experts-chat-drag-overlay {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.experts-chat-drag-msg {
  background: var(--paper);
  color: var(--cyan-500);
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 500;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
}

/* Attachments preview row */
.experts-chat-atts {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.experts-chat-att {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 6px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px;
  max-width: 100%;
}
.experts-chat-att-ico {
  font-size: 11px;
  line-height: 1;
}
.experts-chat-att-thumb {
  width: 20px; height: 20px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.experts-chat-att-name {
  font-weight: 500;
  color: var(--navy-700);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.experts-chat-att-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--slate-400);
}
.experts-chat-att-x {
  background: transparent;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 5px;
  border-radius: 50%;
  transition: all 120ms ease;
}
.experts-chat-att-x:hover {
  background: rgba(217,77,77,0.12);
  color: var(--red-500);
}

.experts-chat-input-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
}
.experts-chat-input-wrap:focus-within {
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(31,169,255,0.08);
}
.experts-chat-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: none;
  padding: 10px 12px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy-800);
  background: transparent;
  min-height: 42px;
  max-height: 160px;
}
.experts-chat-input::placeholder {
  color: var(--slate-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 6px;
  border-top: 1px solid transparent;
}
.experts-chat-attach { color: var(--slate-400); }
.experts-chat-attach:hover { color: var(--cyan-500); }
.experts-chat-hint {
  flex: 1;
  font-size: 10.5px;
  color: var(--slate-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-chat-send {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--grad-trail);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.experts-chat-send:hover:not(:disabled) { transform: scale(1.05); }
.experts-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile responsive — slide fills viewport */
@media (max-width: 720px) {
  .experts-chat-slide {
    width: 100% !important;
  }
}

/* v3.5.2: REMOVED 48vh cap — hero must be full viewport for Page Peel cover effect.
   Hero size is now controlled exclusively by the v3.4 Page Peel block at line ~4990
   (calc(100vh - 82px)). DO NOT add another .v3-today .v3-hero rule below this line. */

/* ════════════════════════════════════════════════════════════════
   v3.6.1 — Momentum-style BOLD hero typography
   Clock + greeting need heavy weight for visual impact AND for clean
   Vietnamese diacritics (thin weights 200-300 break VN tone marks).
   ════════════════════════════════════════════════════════════════ */
.v3-today .v3-hero-dayname {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  opacity: 0.78 !important;
  margin-bottom: 6px !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45) !important;
}
.v3-today .v3-hero-clock-huge {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(140px, 18vw, 220px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.30) !important;
  color: #fff !important;
}
.v3-today .v3-hero-clock-huge .sep { opacity: 0.65 !important; }
.v3-today .v3-hero-greet-mom {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 4.2vw, 56px) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.15 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 1px 6px rgba(0,0,0,0.25) !important;
  margin-top: 14px !important;
  color: #fff !important;
}
.v3-today .v3-hero-goal {
  margin-top: 56px !important;
  width: 100% !important;
  max-width: 540px !important;
  text-align: center !important;
}
.v3-today .v3-hero-goal-prompt {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: -0.005em !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}
.v3-today .v3-hero-goal-input {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.65) !important;
  padding: 6px 4px 8px !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: 0.005em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.40) !important;
}
.v3-today .v3-hero-goal-input::placeholder {
  color: rgba(255,255,255,0.55) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.v3-today .v3-hero-goal-input:focus {
  outline: none !important;
  border-bottom-color: rgba(255,255,255,0.95) !important;
}
@media (max-width: 720px) {
  .v3-today .v3-hero-clock-huge { font-size: 96px !important; letter-spacing: -0.035em !important; }
  .v3-today .v3-hero-greet-mom { font-size: 28px !important; margin-top: 8px !important; }
  .v3-today .v3-hero-goal { margin-top: 28px !important; max-width: 88vw !important; }
  .v3-today .v3-hero-goal-prompt { font-size: 16px !important; }
  .v3-today .v3-hero-goal-input { font-size: 16px !important; }
  .v3-today .v3-hero-dayname { font-size: 10px !important; letter-spacing: 0.28em !important; }
}

/* ════════════════════════════════════════════════════════════════
   v3.6 — Empty state component for unconnected widgets
   ════════════════════════════════════════════════════════════════ */
.v3-today .v3-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 0 16px;
  border-top: 1px dashed rgba(0,0,0,0.10);
}
.v3-today .v3-empty-icon {
  font-size: 36px;
  line-height: 1;
  color: var(--hue-accent, #2a8a8a);
  opacity: 0.55;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.v3-today .v3-empty-msg {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.45;
  color: var(--hue-ink, #1a1a1a);
  max-width: 38em;
  letter-spacing: -0.005em;
}
.v3-today .v3-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--hue-ink, #1a1a1a);
  color: var(--hue-paper, #fff);
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.v3-today .v3-empty-cta:hover {
  transform: translateY(-1px);
  background: var(--hue-accent, #2a8a8a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Focus envelope — empty/manual-input variant */
.v3-today .v3-focus-empty .v3-focus-title-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--hue-ink, #1a1a1a);
  letter-spacing: -0.01em;
  padding: 6px 0 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
  margin: 4px 0 8px;
}
.v3-today .v3-focus-empty .v3-focus-title-input::placeholder {
  color: rgba(0,0,0,0.30);
  font-style: italic;
}
.v3-today .v3-focus-empty .v3-focus-title-input:focus {
  border-bottom-color: var(--hue-accent, #2a8a8a);
}
.v3-today .v3-focus-empty .v3-focus-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(0,0,0,0.55);
}
.v3-today .v3-focus-empty .v3-focus-meta a {
  color: var(--hue-accent, #2a8a8a);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.v3-today .v3-focus-title[contenteditable] { outline: none; }
.v3-today .v3-focus-title[contenteditable]:focus { background: rgba(0,0,0,0.02); border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }

/* Weather + tonight loading/error states */
.v3-today .v3-weather-loading .v3-weather-title,
.v3-today .v3-weather-error .v3-weather-title,
.v3-today .v3-tonight-loading .v3-tonight-title,
.v3-today .v3-tonight-error .v3-tonight-title {
  opacity: 0.55;
  font-style: italic;
}

/* Pending state — connected but data not yet fetched */
.v3-today .v3-pending {
  border-top-style: solid;
  border-top-color: var(--hue-accent, #2a8a8a);
  border-top-width: 2px;
  padding-top: 22px;
}
.v3-today .v3-pending-icon {
  color: var(--hue-accent, #2a8a8a) !important;
  opacity: 0.85 !important;
  animation: v3-pending-spin 2.4s linear infinite;
  display: inline-block;
}
.v3-today .v3-pending-sub {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.005em;
  margin-top: -4px;
}
@keyframes v3-pending-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.v3-today .v3-pending .v3-empty-msg b {
  font-weight: 600;
  color: var(--hue-accent, #2a8a8a);
}

/* ════════════════════════════════════════════════════════════════
   v3.6.2 — Connections settings modal (Eric toggles which he has)
   ════════════════════════════════════════════════════════════════ */
.v3-conn-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', system-ui, sans-serif;
}
.v3-conn-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 24, 32, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: v3-fade-in 0.2s ease;
}
.v3-conn-sheet {
  position: relative;
  width: min(540px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: v3-slide-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes v3-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.v3-conn-head { padding: 24px 28px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.v3-conn-title { font-weight: 600; font-size: 22px; letter-spacing: -0.012em; color: #111; margin-bottom: 4px; }
.v3-conn-sub { font-weight: 400; font-size: 14px; color: rgba(0,0,0,0.55); line-height: 1.4; }
.v3-conn-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.v3-conn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; cursor: pointer; transition: background 0.15s ease;
}
.v3-conn-row:hover { background: rgba(0,0,0,0.025); }
.v3-conn-row.focused {
  background: rgba(42, 138, 138, 0.06);
  box-shadow: inset 3px 0 0 #2a8a8a;
}
.v3-conn-text { flex: 1; min-width: 0; }
.v3-conn-label { font-weight: 500; font-size: 15px; color: #111; margin-bottom: 2px; }
.v3-conn-desc { font-weight: 400; font-size: 13px; color: rgba(0,0,0,0.55); line-height: 1.3; }
.v3-conn-switch {
  flex-shrink: 0; width: 44px; height: 26px; border-radius: 13px;
  background: rgba(0,0,0,0.18); position: relative; transition: background 0.2s ease;
  cursor: pointer;
}
.v3-conn-switch::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease;
}
.v3-conn-switch.on { background: #2a8a8a; }
.v3-conn-switch.on::after { transform: translateX(18px); }
.v3-conn-foot {
  padding: 16px 28px 20px; border-top: 1px solid rgba(0,0,0,0.06);
  display: flex; justify-content: flex-end;
}
.v3-conn-done {
  padding: 10px 24px; background: #111; color: #fff; border: none; border-radius: 999px;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 500; font-size: 14px;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.v3-conn-done:hover { transform: translateY(-1px); background: #2a8a8a; }

/* Full-page Connect subpage (replaces modal — wired to sidebar "Kết nối" item) */
#subpage-connect { padding: 0; }
.v3-conn-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  font-family: 'Outfit', system-ui, sans-serif;
}
.v3-conn-page-head { margin-bottom: 36px; }
.v3-conn-page-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate-400, #7b8aa3);
  margin-bottom: 10px;
}
.v3-conn-page-title {
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.018em;
  color: var(--navy-800, #0e1f4d);
  margin: 0 0 10px;
  line-height: 1.15;
}
.v3-conn-page-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0,0,0,0.55);
  margin: 0;
  max-width: 540px;
}
.v3-conn-page-list {
  margin-top: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.v3-conn-page-list .v3-conn-row {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.v3-conn-page-list .v3-conn-row:last-child { border-bottom: none; }

/* Hero top-left "Connections" trigger button */
.v3-today .v3-conn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 6px 12px 6px 10px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  color: #fff;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.v3-today .v3-conn-trigger:hover {
  background: rgba(255,255,255,0.30);
  transform: translateY(-1px);
}
.v3-today .v3-conn-trigger svg { opacity: 0.92; }

/* ── Card skills (top 3 actionable) — appended 2026-05-24 ── */
.experts-card-skills {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column;
  gap: 6px;
}
.experts-card-skills-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.experts-card-skills-list {
  display: flex; flex-direction: column;
  gap: 3px;
}
.experts-card-skill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px 4px 6px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--navy-700);
  cursor: pointer;
  text-align: left;
  transition: all 120ms ease;
  width: fit-content;
  max-width: 100%;
}
.experts-card-skill:hover {
  border-color: var(--cyan-400);
  background: var(--paper);
  color: var(--navy-800);
  transform: translateX(2px);
}
.experts-card-skill-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cyan-500);
  font-weight: 600;
  flex-shrink: 0;
}
.experts-card-skill-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chat header: name row + CLI badge ── */
.experts-chat-name-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.experts-chat-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 500;
  color: var(--navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-chat-cli-badge {
  display: none;
  align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--slate-500);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.experts-chat-cli-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(20,163,107,0.5);
}
.experts-chat-cli-name { font-weight: 600; color: var(--navy-700); }
.experts-chat-cli-sep { color: var(--slate-300); }
.experts-chat-cli-model { color: var(--cyan-500); font-weight: 500; }

/* ── Token strip (live during stream) ── */
.experts-chat-tokenstrip {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-500);
  flex-shrink: 0;
}
.experts-token-cell {
  display: inline-flex; gap: 4px; align-items: baseline;
}
.experts-token-lbl {
  font-size: 8.5px;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.experts-token-cache .experts-token-lbl,
.experts-token-cache { color: var(--cyan-500); }
.experts-token-cost { margin-left: auto; color: var(--navy-700); font-weight: 600; }

/* ── Thinking block (collapsible) ── */
.experts-msg-thinking {
  justify-content: flex-start;
}
.experts-thinking-block {
  background: var(--bg-canvas);
  border-left: 2px solid var(--cyan-300);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  max-width: 86%;
  font-size: 12px;
  color: var(--slate-500);
  font-style: italic;
}
.experts-thinking-summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-500);
  font-style: normal;
}
.experts-thinking-summary::-webkit-details-marker { display: none; }
.experts-thinking-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 150ms ease;
}
.experts-thinking-block[open] .experts-thinking-summary::before { transform: rotate(90deg); }
.experts-thinking-spinner {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan-400);
  animation: experts-pulse-dot 1s ease-in-out infinite;
}
/* Chat history modal — inline drawer over chat panel */
.experts-chat-history-modal {
  position: absolute;
  top: 56px; left: 16px; right: 16px;
  max-height: calc(100% - 80px);
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(14,31,77,0.20);
  z-index: 50;
  display: flex; flex-direction: column;
  animation: fadeIn 150ms ease;
}
.experts-chat-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--slate-200);
  font-weight: 600; font-size: 13px; color: var(--navy-800);
}
.experts-chat-history-close {
  appearance: none; background: transparent; border: none;
  font-size: 18px; color: var(--slate-400); cursor: pointer; padding: 0 4px;
}
.experts-chat-history-close:hover { color: var(--navy-700); }
.experts-chat-history-list { overflow-y: auto; padding: 6px; }
.experts-chat-history-empty {
  padding: 30px 18px; text-align: center;
  color: var(--slate-400); font-size: 12.5px; font-style: italic;
}
.experts-chat-history-item {
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms;
}
.experts-chat-history-item:hover { background: var(--bg-canvas); }
.experts-chat-history-title {
  font-size: 12.5px; font-weight: 500; color: var(--navy-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.experts-chat-history-meta {
  font-size: 10.5px; color: var(--slate-500); margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* Stop pulse + dim color once response is done — signals "completed". */
.experts-thinking-spinner.experts-thinking-spinner-done {
  animation: none;
  background: var(--slate-400);
  opacity: 0.5;
}
.experts-msg-thinking-done .experts-thinking-summary {
  color: var(--slate-500);
}
@keyframes experts-pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
.experts-thinking-body {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Name setup modal ── */
.experts-name-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1200;
  align-items: center; justify-content: center;
}
.experts-name-modal.open { display: flex; }
.experts-name-backdrop {
  position: absolute; inset: 0;
  background: rgba(14,31,77,0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.experts-name-card {
  position: relative;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--paper);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(14,31,77,0.32), 0 0 0 1px rgba(14,31,77,0.06);
  animation: experts-pop-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-align: center;
}
.experts-name-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--grad-trail);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 12px 28px rgba(46,91,219,0.32);
}
.experts-name-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 19px; font-weight: 500;
  color: var(--navy-800);
  margin-bottom: 4px;
}
.experts-name-sub {
  font-size: 12.5px;
  color: var(--slate-500);
  margin-bottom: 18px;
}
.experts-name-form { display: flex; flex-direction: column; gap: 14px; }
.experts-name-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--navy-800);
  outline: none;
  text-align: center;
  transition: border-color 120ms ease;
}
.experts-name-input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(31,169,255,0.08); }
.experts-name-pronoun-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
  text-align: left;
  margin-bottom: -6px;
}
.experts-name-pronouns {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.experts-name-pronoun {
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 120ms ease;
}
.experts-name-pronoun:hover { border-color: var(--slate-300); color: var(--navy-800); }
.experts-name-pronoun.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
  font-weight: 600;
}
.experts-name-actions {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 4px;
}
.experts-name-skip {
  padding: 8px 16px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  color: var(--slate-500);
  cursor: pointer;
  border-radius: 8px;
}
.experts-name-skip:hover { color: var(--navy-800); background: var(--bg-canvas); }
.experts-name-save {
  padding: 8px 20px;
  background: var(--grad-trail);
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}
.experts-name-save:hover:not(:disabled) { transform: translateY(-1px); }
.experts-name-save:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Tool-use badge (when persona calls MCP tool) ── */
.experts-msg-tool {
  justify-content: flex-start;
}
.experts-tool-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px;
  background: rgba(31,169,255,0.10);
  border: 1px solid var(--cyan-300);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--cyan-500);
  font-weight: 600;
}
.experts-tool-spinner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan-400);
  animation: experts-pulse-dot 1s ease-in-out infinite;
}
.experts-tool-spinner-done {
  animation: none;
  background: var(--green-500);
}
.experts-tool-label { letter-spacing: 0.02em; }

/* ── AskQuestion widget (chip sheet) ── */
.experts-msg-ask {
  justify-content: flex-start;
  width: 100%;
}
.experts-ask-card {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--cyan-300);
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow: 0 4px 18px rgba(31,169,255,0.10);
}
.experts-ask-header {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.experts-ask-questions {
  display: flex; flex-direction: column;
  gap: 16px;
}
.experts-ask-q {
  display: flex; flex-direction: column;
  gap: 8px;
}
.experts-ask-q-header {
  display: flex; align-items: flex-start; gap: 8px;
}
.experts-ask-q-chip {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: var(--navy-800);
  color: #fff;
  border-radius: 5px;
  margin-top: 1px;
}
.experts-ask-q-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy-800);
  font-weight: 500;
}
.experts-ask-options {
  display: flex; flex-direction: column;
  gap: 5px;
  padding-left: 4px;
}
.experts-ask-option {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 12px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--navy-700);
  text-align: left;
  transition: all 120ms ease;
}
.experts-ask-option:hover {
  border-color: var(--cyan-400);
  background: var(--paper);
}
.experts-ask-option:disabled {
  cursor: default;
  opacity: 0.6;
}
.experts-ask-option.selected {
  background: rgba(31,169,255,0.08);
  border-color: var(--cyan-500);
  color: var(--navy-800);
}
.experts-ask-radio {
  width: 14px; height: 14px;
  border: 1.5px solid var(--slate-300);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 150ms ease;
  position: relative;
}
.experts-ask-options[data-multi="true"] .experts-ask-radio {
  border-radius: 4px;
}
.experts-ask-option.selected .experts-ask-radio {
  border-color: var(--cyan-500);
  background: var(--cyan-500);
}
.experts-ask-option.selected .experts-ask-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}
.experts-ask-options[data-multi="true"] .experts-ask-option.selected .experts-ask-radio::after {
  content: '✓';
  inset: 0;
  background: transparent;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
}
.experts-ask-opt-label {
  flex: 1;
  font-weight: 500;
}
.experts-ask-opt-desc {
  display: block;
  width: 100%;
  margin-top: 3px;
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 400;
  font-style: italic;
}
.experts-ask-actions {
  display: flex; justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.experts-ask-submit {
  padding: 7px 18px;
  background: var(--grad-trail);
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}
.experts-ask-submit:hover:not(:disabled) { transform: translateY(-1px); }
.experts-ask-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.experts-ask-submitted {
  margin-top: 10px;
  padding: 6px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--green-500);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   ARTIFACT PANEL — slide-out LEFT of chat (Claude.ai / ForeSee pattern)
   ════════════════════════════════════════════════════════════════ */

/* Artifact card INSIDE chat bubble — collapsed preview, click → open slide */
.experts-artifact-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--cyan-300);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
  box-shadow: 0 2px 8px rgba(31,169,255,0.08);
}
.experts-artifact-card:hover {
  border-color: var(--cyan-500);
  background: rgba(31,169,255,0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31,169,255,0.16);
}
.experts-artifact-card-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: var(--cyan-500);
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,169,255,0.10);
  border-radius: 8px;
}
.experts-artifact-card-text {
  flex: 1; min-width: 0;
}
.experts-artifact-card-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: var(--navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-artifact-card-sub {
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-artifact-card-open {
  flex-shrink: 0;
  padding: 5px 11px;
  background: var(--grad-trail);
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

/* Slide panel — sits LEFT of chat panel. Matches chat panel height/top. */
.experts-artifact-slide {
  position: absolute;
  top: 15vh;
  right: calc(460px + 24px + 12px);  /* chat width + viewport gap + 12px gap between */
  height: 70vh;
  width: 620px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: -16px 0 60px rgba(14,31,77,0.18), 0 0 0 1px rgba(14,31,77,0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 240ms ease;
  z-index: 1;
}
.experts-chat-panel-root.artifact-open .experts-artifact-slide {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.experts-artifact-resize {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 12;
  background: transparent;
  transition: background 150ms ease;
}
.experts-artifact-resize:hover { background: rgba(31,169,255,0.18); }

.experts-artifact-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper-tint);
}
.experts-artifact-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--cyan-500);
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.experts-artifact-header-text {
  flex: 1; min-width: 0;
}
.experts-artifact-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 14.5px; font-weight: 500;
  color: var(--navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.experts-artifact-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--slate-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.experts-artifact-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.6;
}
/* When artifact body uses .experts-md, the md styles apply — but increase code-block size */
.experts-artifact-body pre {
  font-size: 12.5px;
  padding: 14px 16px;
}
.experts-artifact-body h1, .experts-artifact-body h2, .experts-artifact-body h3 {
  margin: 0.8em 0 0.4em;
}
.experts-artifact-body h1 { font-size: 22px; }
.experts-artifact-body h2 { font-size: 18px; }
.experts-artifact-body h3 { font-size: 16px; }
.experts-artifact-body p { font-size: 14px; line-height: 1.65; }
.experts-artifact-body table { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   BRAND HEARTBEAT v3 — smaller + aligned + anatomical lub-dub
   (Eric feedback 2026-05-24: "hơi to, cho thẳng hàng, nhỏ hơn xíu, refine tinh tế")
   ────────────────────────────────────────────────────────────────
   Design:
   - 5 dots UNIFORM size 4.5px (flat aligned baseline, monoline)
   - Subtle 1px outer ring (idle state) → cleaner contour
   - Period 0.95s ≈ 63 bpm (natural calm resting heart)
   - Anatomical lub-dub: S1 strong peak at 6% → diastole 12% → S2 softer at 22% → long pause
   - Halo bloom max 1.35× (was 1.6×) — less aggressive
   - Wave bead 12px (was 18px) — proportional to smaller dots
   - Color crossfade 700ms cubic on status change
   ════════════════════════════════════════════════════════════════ */
/* v4: Each dot lives in a fixed 12px SLOT (invisible container). Core stays
   small (4.5px) and centered inside. Halo blooms ONLY within slot bounds
   (max ≈ 11px diameter) → never spills onto adjacent dots. Dots stay
   pixel-aligned regardless of pulse state. */
.trail-heartbeat {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 2px;                  /* tight gap — slots themselves provide spacing */
  margin-left: 10px;
  height: 12px;
  padding: 0;
  isolation: isolate;
  --hb-c1: #6b7da3;
  --hb-c2: #6b7da3;
  --hb-c3: #6b7da3;
  --hb-glow: rgba(107,125,163,0.30);
  --hb-ring: rgba(107,125,163,0.20);
  --hb-period: 0.95s;
}

/* Connecting line — runs only between visible core centers */
.hb-line {
  position: absolute;
  left: 6px; right: 6px;          /* skips first/last slot half-width */
  top: 50%; height: 1px;
  background-image: radial-gradient(circle, currentColor 0.4px, transparent 0.7px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: center;
  color: var(--hb-c2);
  opacity: 0.18;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 700ms ease;
}

/* Wave bead now constrained to slot height — smaller and subtler */
.hb-wave {
  position: absolute;
  left: 6px; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--hb-glow) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: hb-wave-sweep var(--hb-period) cubic-bezier(0.36, 0.07, 0.4, 0.95) infinite;
  transition: background 700ms ease;
}
@keyframes hb-wave-sweep {
  0%   { left: 6px;             opacity: 0;    }
  6%   {                        opacity: 0.75; }
  100% { left: calc(100% - 6px); opacity: 0;    }
}

/* SLOT — fixed 12×12px box, invisible container. Inline-flex keeps horizontal layout. */
.hb-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: 12px;
  min-width: 12px;
  height: 12px;
  z-index: 1;
}
.hb-dot-1, .hb-dot-2, .hb-dot-3, .hb-dot-4, .hb-dot-5 {
  width: 12px; min-width: 12px; height: 12px;
}

/* Halo — fills slot at max (11px), never escapes */
.hb-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 11px;       /* fixed max size — fits slot exactly */
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hb-glow) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.5);
  transition: background 700ms ease;
  animation: hb-halo-pulse var(--hb-period) cubic-bezier(0.36, 0.07, 0.4, 0.95) infinite;
  pointer-events: none;
}

/* Core — fixed 4.5px centered. Scale up to 1.4× = 6.3px (still inside slot). */
.hb-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 4.5px; height: 4.5px;
  margin: -2.25px 0 0 -2.25px;
  border-radius: 50%;
  background: var(--hb-c2);
  box-shadow: inset 0 0 0 0.5px var(--hb-ring);
  transition: background 700ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 700ms ease;
  animation: hb-core-pulse var(--hb-period) cubic-bezier(0.36, 0.07, 0.4, 0.95) infinite;
}

/* Staggered 60ms — wave sweeps L→R */
.hb-dot-1 .hb-halo, .hb-dot-1 .hb-core { animation-delay: 0s;    }
.hb-dot-2 .hb-halo, .hb-dot-2 .hb-core { animation-delay: 0.06s; }
.hb-dot-3 .hb-halo, .hb-dot-3 .hb-core { animation-delay: 0.12s; }
.hb-dot-4 .hb-halo, .hb-dot-4 .hb-core { animation-delay: 0.18s; }
.hb-dot-5 .hb-halo, .hb-dot-5 .hb-core { animation-delay: 0.24s; }

/* Anatomical lub-dub — halo max 1.0 (fills slot exactly, no overflow) */
@keyframes hb-halo-pulse {
  0%, 50%, 100% { opacity: 0;    transform: scale(0.5); }
  6%            { opacity: 0.85; transform: scale(1.0); }   /* S1 — fits slot */
  12%           { opacity: 0.30; transform: scale(0.75); }
  22%           { opacity: 0.50; transform: scale(0.9); }   /* S2 softer */
  34%           { opacity: 0;    transform: scale(0.5); }
}
@keyframes hb-core-pulse {
  0%, 50%, 100% { transform: scale(0.85); filter: brightness(0.78); }
  6%            { transform: scale(1.40); filter: brightness(1.20); }  /* S1 → 6.3px */
  12%           { transform: scale(0.95); filter: brightness(0.90); }
  22%           { transform: scale(1.20); filter: brightness(1.05); }  /* S2 → 5.4px */
}

/* ── Status: OK (cool minimal — navy/cyan with mint accent) ── */
.trail-heartbeat.status-ok {
  --hb-c1: #2e5bdb;
  --hb-c2: #1fa9ff;
  --hb-c3: #14a36b;
  --hb-glow: rgba(31,169,255,0.50);
  --hb-ring: rgba(31,169,255,0.32);
}
.trail-heartbeat.status-ok .hb-dot-1 .hb-core { background: #243a78; }
.trail-heartbeat.status-ok .hb-dot-2 .hb-core { background: #2e5bdb; }
.trail-heartbeat.status-ok .hb-dot-3 .hb-core { background: #1fa9ff; }
.trail-heartbeat.status-ok .hb-dot-4 .hb-core { background: #14a36b; }
.trail-heartbeat.status-ok .hb-dot-5 .hb-core {
  background: #7dd6ff;
  box-shadow: inset 0 0 0 0.5px rgba(20,163,107,0.45), 0 0 4px rgba(125,214,255,0.45);
}

/* ── Status: WARN (muted amber, slower) ── */
.trail-heartbeat.status-warn {
  --hb-c1: #b8800f;
  --hb-c2: #d99a13;
  --hb-c3: #f0b03a;
  --hb-glow: rgba(240,176,58,0.45);
  --hb-ring: rgba(217,154,19,0.32);
  --hb-period: 1.15s;
}
.trail-heartbeat.status-warn .hb-dot-1 .hb-core { background: #8a6020; }
.trail-heartbeat.status-warn .hb-dot-2 .hb-core { background: #b8800f; }
.trail-heartbeat.status-warn .hb-dot-3 .hb-core { background: #d99a13; }
.trail-heartbeat.status-warn .hb-dot-4 .hb-core { background: #e8aa28; }
.trail-heartbeat.status-warn .hb-dot-5 .hb-core { background: #f0b03a; }

/* ── Status: DOWN (slow weak red, only S1 peak — no S2 echo) ── */
.trail-heartbeat.status-down {
  --hb-c1: #6b3030;
  --hb-c2: #d94d4d;
  --hb-c3: #ff6b6b;
  --hb-glow: rgba(255,107,107,0.40);
  --hb-ring: rgba(217,77,77,0.32);
  --hb-period: 2.0s;
}
.trail-heartbeat.status-down .hb-dot-1 .hb-core { background: #6b3030; }
.trail-heartbeat.status-down .hb-dot-2 .hb-core { background: #a73a3a; }
.trail-heartbeat.status-down .hb-dot-3 .hb-core { background: #d94d4d; }
.trail-heartbeat.status-down .hb-dot-4 .hb-core { background: #ff6b6b; }
.trail-heartbeat.status-down .hb-dot-5 .hb-core { background: #ff8888; }
/* Weak beat — only S1, no S2 echo */
.trail-heartbeat.status-down .hb-core { animation-name: hb-down-core; }
.trail-heartbeat.status-down .hb-halo { animation-name: hb-down-halo; }
@keyframes hb-down-core {
  0%, 40%, 100% { transform: scale(0.82); filter: brightness(0.62); }
  8%            { transform: scale(1.04); filter: brightness(0.92); }
}
@keyframes hb-down-halo {
  0%, 45%, 100% { opacity: 0;    transform: scale(0.5); }
  8%            { opacity: 0.55; transform: scale(1.0); }   /* fills slot, no overflow */
}

/* ── Status: CHECKING (neutral slow pulse) ── */
.trail-heartbeat.status-checking {
  --hb-c1: #93a1bf;
  --hb-c2: #6b7da3;
  --hb-c3: #93a1bf;
  --hb-glow: rgba(107,125,163,0.28);
  --hb-ring: rgba(107,125,163,0.30);
  --hb-period: 1.6s;
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hb-halo, .hb-core, .hb-wave { animation: none !important; }
  .hb-halo { opacity: 0.35; }
}

/* ════════════════════════════════════════════════════════════════
   CABINET DARK SCOPE — Experts page only
   Per CABINET_DESIGN_GUIDE.md. All tokens live under .cabinet-scope.
   Fonts kept from global (Be Vietnam Pro / Inter / JetBrains Mono).
   ════════════════════════════════════════════════════════════════ */
.cabinet-scope {
  --cab-bg:         #0a1230;
  --cab-bgSoft:     #0e1a3e;
  --cab-surface:    #15224a;
  --cab-surfaceHi:  #1c2a5a;
  --cab-line:       rgba(255,255,255,0.07);
  --cab-lineHi:     rgba(255,255,255,0.14);
  --cab-ink:        #eef1f7;
  --cab-inkDim:     rgba(238,241,247,0.66);
  --cab-inkMuted:   rgba(238,241,247,0.42);
  --cab-accent:     #7dd6ff;
  --cab-accentSoft: rgba(125,214,255,0.10);
  --cab-green:      #5fd095;
  --cab-amber:      #e5b35c;

  position: relative;
  min-height: 100%;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(125,214,255,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(46,91,219,0.10), transparent 60%),
    var(--cab-bg);
  color: var(--cab-ink);
  /* Match mockup: ~8vw side padding (was 98px at 1290 viewport in mockup) */
  padding: 32px clamp(40px, 8vw, 140px) 56px;
}

/* ── Hero ── */
.cab-hero {
  margin-bottom: 20px;
}
/* Compact hero (Eric directive 2026-05-25 fix #2) — eyebrow + title in one block */
.cab-hero-compact {
  margin-bottom: 14px;
  padding-top: 26px;
}

/* ─── Hero V4 (Eric UX redesign 2026-05-25) ───
   - Avatar stack: show team is real, ready
   - Question headline: invite, don't possess
   - Quick-start chips: lower friction for first-timers
   - Will coordinator promise: humanize the experience */
.cab-hero-v4 {
  padding: 32px 0 18px;
  margin-bottom: 14px;
}
.cab-hero-meet {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0 18px;
}
.cab-hero-stack {
  display: inline-flex; align-items: center;
}
.cab-hero-stack-item {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 2px solid #0a1230;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 200ms ease;
}
.cab-hero-stack-item:hover { transform: translateY(-2px); z-index: 20 !important; }
.cab-hero-stack-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cab-hero-stack-mono {
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cab-hero-stack-caption {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: rgba(238,241,247,0.65);
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 13px;
}
.cab-hero-stack-count {
  color: #eef1f7;
  font-weight: 600;
  font-size: 15px;
}

.cab-h1-v4 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #eef1f7;
  margin: 0;
}

/* Composer v4 — bigger, more breathing room, primary action */
.cab-prompt-v4 {
  margin-top: 4px;
  margin-bottom: 18px;
}
.cab-prompt-v4 .cab-prompt-input {
  font-size: 15px;
  line-height: 1.55;
  min-height: 72px;
}
.cab-prompt-council-primary {
  background: linear-gradient(135deg, #7dd6ff 0%, #6694ff 100%) !important;
  color: #0a1230 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(125,214,255,0.20);
}
.cab-prompt-council-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(125,214,255,0.30);
}

/* Quick-start chips — lower the "blank page" friction */
.cab-quickstart {
  margin: 4px 0 22px;
}
.cab-quickstart-label {
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(238,241,247,0.45);
  margin-bottom: 8px;
}
.cab-quickstart-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cab-quickstart-chip {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(238,241,247,0.80);
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 150ms ease;
}
.cab-quickstart-chip:hover {
  background: rgba(125,214,255,0.10);
  border-color: rgba(125,214,255,0.30);
  color: #7dd6ff;
  transform: translateY(-1px);
}

/* Composer v4 — attachments + drag-drop visual feedback */
.cab-prompt-v4 { position: relative; }
.cab-prompt-atts {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px 0;
}
.cab-prompt-att {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(125,214,255,0.10);
  border: 1px solid rgba(125,214,255,0.25);
  border-radius: 100px;
  padding: 4px 6px 4px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(238,241,247,0.85);
  max-width: 240px;
}
.cab-prompt-att-thumb {
  width: 22px; height: 22px;
  border-radius: 4px;
  object-fit: cover;
}
.cab-prompt-att-ico {
  font-size: 13px;
}
.cab-prompt-att-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
  font-weight: 500;
}
.cab-prompt-att-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(238,241,247,0.45);
}
.cab-prompt-att-x {
  appearance: none;
  background: transparent; border: none;
  color: rgba(238,241,247,0.55);
  font-size: 14px; line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.cab-prompt-att-x:hover { color: var(--red-500, #f43f5e); }

/* Attach button + hint inline in toolbar */
.cab-prompt-attach {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(238,241,247,0.55);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  transition: all 120ms;
}
.cab-prompt-attach:hover {
  background: rgba(255,255,255,0.05);
  color: #7dd6ff;
}
.cab-prompt-attach-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(238,241,247,0.35);
  margin-right: 8px;
}

/* Drop overlay — appears when user drags file over composer */
.cab-prompt-drop-overlay {
  position: absolute; inset: 0;
  background: rgba(125,214,255,0.10);
  border: 2px dashed rgba(125,214,255,0.50);
  border-radius: 12px;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 10;
  animation: fadeIn 120ms ease;
}
.cab-prompt-v4.drag-active .cab-prompt-drop-overlay {
  display: flex;
}
.cab-prompt-drop-msg {
  background: rgba(10,18,48,0.92);
  color: #7dd6ff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(125,214,255,0.30);
}

/* Council history dropdown (composer toolbar) */
.cab-council-history-pop {
  position: fixed;
  background: #0e1a3e;
  border: 1px solid rgba(125,214,255,0.18);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 1000;
  max-height: 420px;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: fadeIn 150ms ease;
}
.cab-council-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cab-council-history-head-title {
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(238,241,247,0.55);
}
.cab-council-history-head-clear {
  appearance: none; background: transparent; border: none;
  color: rgba(238,241,247,0.45);
  font-family: 'Inter', sans-serif; font-size: 11px;
  cursor: pointer;
  transition: color 120ms;
}
.cab-council-history-head-clear:hover { color: var(--red-500, #f43f5e); }
.cab-council-history-list { overflow-y: auto; padding: 4px; }
.cab-council-history-empty {
  padding: 28px 16px; text-align: center;
  color: rgba(238,241,247,0.35);
  font-size: 12.5px; font-style: italic;
}
.cab-council-history-item {
  appearance: none; background: transparent; border: none;
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms;
  color: inherit;
  font-family: inherit;
}
.cab-council-history-item:hover { background: rgba(125,214,255,0.06); }
.cab-council-history-stack {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.cab-council-history-mono {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  margin-left: -6px;
  border: 1.5px solid #0e1a3e;
}
.cab-council-history-mono:first-child { margin-left: 0; }
.cab-council-history-body { min-width: 0; flex: 1; }
.cab-council-history-title {
  font-size: 12.5px; font-weight: 500;
  color: rgba(238,241,247,0.90);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.cab-council-history-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(238,241,247,0.40);
}

/* User message attachment chips in chat-slide */
.experts-msg-user-atts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.experts-msg-user-att {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(125,214,255,0.12);
  border: 1px solid rgba(125,214,255,0.25);
  border-radius: 100px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--navy-700, #1e2d52);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coordinator-promise line — humanize the wait */
.cab-coord-line {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(125,214,255,0.30);
  border-radius: 0 8px 8px 0;
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 12.5px;
  color: rgba(238,241,247,0.70);
  line-height: 1.4;
}
.cab-coord-line b { color: #eef1f7; font-weight: 600; }
.cab-coord-mono {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.cab-eyebrow-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  color: rgba(238,241,247,0.55);
  letter-spacing: 0.01em;
}
.cab-eyebrow-dot {
  color: #7dd6ff;
  font-size: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(125,214,255,0.5));
}
.cab-h1-compact {
  font-size: 28px;
  font-weight: 200;
  line-height: 1.15;
  margin: 0;
}
.cab-prompt-compact {
  margin-top: 4px;
}
.cab-h1 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200;
  font-size: 34px;
  letter-spacing: 0.005em;
  color: var(--cab-ink);
  line-height: 1.1;
  margin: 0;
}
.cab-h1 .cab-h1-em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #7dd6ff 0%, #6694ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cab-h1-tagline {
  margin: 10px 0 0 0;
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--cab-inkSoft, rgba(255,255,255,0.55));
  line-height: 1.45;
}
.cab-lead { display: none; }

/* ── Mode toggle (Cabinet AI / Người thật) ── */
.cab-mode-toggle {
  position: absolute;
  top: 28px; right: 36px;
  display: inline-flex;
  background: var(--cab-bgSoft);
  border: 1px solid var(--cab-line);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.cab-mode-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cab-inkDim);
  cursor: pointer;
  transition: all 200ms ease;
}
.cab-mode-btn:hover { color: var(--cab-ink); }
.cab-mode-btn.active {
  background: rgba(125,214,255,0.18);
  color: var(--cab-accent);
}
.cab-mode-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  color: var(--cab-ink);
}
.cab-mode-btn.active .cab-mode-count {
  background: rgba(125,214,255,0.30);
  color: var(--cab-ink);
}

/* ── Prompt bar ── */
.cab-prompt {
  background: var(--cab-bgSoft);
  border: 1px solid var(--cab-lineHi);
  border-radius: 12px;
  padding: 10px 14px 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: border-color 200ms ease;
}
.cab-prompt:focus-within {
  border-color: var(--cab-accent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), 0 0 0 3px rgba(125,214,255,0.10);
}
.cab-prompt-input {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: none; outline: none;
  resize: none;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cab-ink);
  min-height: 44px;
  max-height: 180px;
}
.cab-prompt-input::placeholder { color: var(--cab-inkMuted); }
.cab-prompt-divider {
  height: 1px;
  background-image: radial-gradient(circle, var(--cab-inkMuted) 0.4px, transparent 0.7px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: center;
  margin: 6px 0 8px;
  opacity: 0.5;
}
.cab-prompt-toolbar {
  display: flex; align-items: center; gap: 10px;
}
.cab-prompt-tool {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--cab-inkMuted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 150ms ease;
}
.cab-prompt-tool:hover { color: var(--cab-ink); }
.cab-prompt-tool .cab-prompt-tool-ico {
  font-size: 12px;
  color: var(--cab-accent);
  opacity: 0.7;
}
.cab-prompt-actions {
  display: inline-flex; gap: 10px;
  margin-left: auto;
  align-items: center;
}
.cab-prompt-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(238,241,247,0.45);
  letter-spacing: 0.02em;
}
.cab-prompt-council {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--cab-surface);
  border: 1px solid var(--cab-lineHi);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--cab-inkDim);
  cursor: pointer;
  transition: all 150ms ease;
}
.cab-prompt-council:hover { color: var(--cab-ink); border-color: var(--cab-accent); }
.cab-prompt-council-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cab-accent);
  font-weight: 600;
}
.cab-smart {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #7dd6ff 0%, #2e5bdb 100%);
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cab-bg);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.cab-smart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(125,214,255,0.32);
}

/* ── Section heading ── */
.cab-section-h {
  margin: 28px 0 12px;
  display: flex; align-items: baseline; gap: 10px;
}
.cab-section-h-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--cab-ink);
  letter-spacing: 0.005em;
}
.cab-section-h-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--cab-inkMuted);
}
.cab-section-divider {
  height: 1px;
  background-image: radial-gradient(circle, var(--cab-inkMuted) 0.4px, transparent 0.7px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.35;
  margin-bottom: 16px;
}

/* ── Featured row (5 across, magazine cover) ── */
.cab-featured-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cab-featured {
  position: relative;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cab-surface);
  cursor: pointer;
  border: 1px solid var(--cab-line);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.cab-featured:hover {
  transform: translateY(-2px);
  border-color: rgba(125,214,255,0.40);
  box-shadow: 0 16px 32px rgba(0,0,0,0.45);
}
.cab-featured-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  filter: grayscale(0.50) contrast(0.95);
  transition: filter 250ms ease;
}
.cab-featured:hover .cab-featured-photo {
  filter: grayscale(0.20) contrast(1.0);
}
.cab-featured-abstract {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(125,214,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(46,91,219,0.20) 0%, transparent 55%),
    linear-gradient(135deg, var(--cab-bgSoft) 0%, var(--cab-surface) 100%);
  font-size: 84px;
  color: var(--cab-accent);
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.85;
}
.cab-featured-sessions {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 4px 9px;
  background: rgba(10,18,48,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--cab-ink);
  letter-spacing: 0.04em;
}
.cab-featured-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,18,48,0.20) 0%,
    rgba(10,18,48,0) 35%,
    rgba(10,18,48,0.85) 78%,
    rgba(10,18,48,0.98) 100%);
}
.cab-featured-body {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 4px;
}
.cab-featured-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--cab-ink);
  letter-spacing: -0.005em;
}
.cab-featured-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--cab-inkDim);
  font-weight: 500;
  margin-bottom: 6px;
}
.cab-featured-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cab-featured-sig {
  display: inline-flex; align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--cab-ink);
  font-weight: 500;
}
.cab-featured-sig .cab-slash {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--cab-accent);
  margin-right: 4px;
}

/* ── Category chips ── */
.cab-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.cab-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  background: transparent;
  border: 1px solid var(--cab-line);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--cab-inkDim);
  cursor: pointer;
  transition: all 150ms ease;
}
.cab-chip:hover {
  color: var(--cab-ink);
  border-color: var(--cab-lineHi);
}
.cab-chip.active {
  background: rgba(125,214,255,0.10);
  border-color: rgba(125,214,255,0.40);
  color: var(--cab-accent);
}
.cab-chip-ico {
  font-size: 11px;
  opacity: 0.7;
}

/* ── Persona grid (3-col, full card) ── */
.cab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .cab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .cab-grid { grid-template-columns: 1fr; } }

.cab-card {
  position: relative;
  background: var(--cab-bgSoft);
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.cab-card::before {
  content: '';
  position: absolute; left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cab-accent), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
.cab-card:hover {
  transform: translateY(-2px);
  border-color: rgba(125,214,255,0.40);
  box-shadow: 0 16px 32px rgba(0,0,0,0.45);
}
.cab-card:hover::before { opacity: 0.9; }

/* Header row: portrait + identity */
.cab-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 64px;
}
.cab-portrait {
  width: 56px; height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center top;
  filter: grayscale(0.35) contrast(0.95);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  transition: filter 250ms ease;
}
.cab-card:hover .cab-portrait { filter: grayscale(0) contrast(1.0); }
.cab-portrait-abstract {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(125,214,255,0.20) 0%, transparent 60%),
    var(--cab-surface);
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  color: var(--cab-accent);
  filter: none;
}
.cab-card-identity {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cab-card-name {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--cab-ink);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.cab-card-star {
  color: var(--cab-accent);
  font-size: 12px;
}
.cab-card-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--cab-inkDim);
  min-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.cab-card-loc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--cab-inkMuted);
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cab-card-loc::before {
  content: '◯';
  font-size: 7px;
  opacity: 0.7;
}

/* Voice quote — italic, 2 line clamp */
.cab-card-voice {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: var(--cab-inkDim);
  line-height: 1.5;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Signature move callout */
.cab-sig {
  background: rgba(125,214,255,0.05);
  border: 1px dashed rgba(125,214,255,0.18);
  border-radius: 8px;
  padding: 8px 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.cab-sig-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cab-inkMuted);
}
.cab-sig-value {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--cab-ink);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.cab-sig-slash {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--cab-accent);
}

/* Footer: LLM chip + sessions */
.cab-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--cab-line);
  gap: 8px;
}
.cab-llm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--cab-inkDim);
}
.cab-llm-mark {
  width: 14px; height: 14px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cab-llm-mark.claude { background: #D97757; }
.cab-llm-mark.openai { background: #10A37F; }
.cab-llm-mark.gemini { background: #4285F4; }
.cab-llm-mark.council {
  background: linear-gradient(135deg, #D97757 0%, #10A37F 50%, #4285F4 100%);
}
.cab-llm-marks-stack {
  display: inline-flex;
}
.cab-llm-marks-stack .cab-llm-mark { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--cab-bgSoft); }
.cab-llm-marks-stack .cab-llm-mark:first-child { margin-left: 0; }
.cab-llm-sessions {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cab-inkMuted);
  letter-spacing: 0.02em;
}

/* Council teaser (bottom of grid) */
.cab-teaser {
  margin-top: 28px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--cab-bgSoft) 0%, var(--cab-surface) 100%);
  border: 1px solid var(--cab-lineHi);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 20px;
}
.cab-teaser::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(125,214,255,0.10) 0.5px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}
.cab-teaser-body { flex: 1; z-index: 1; }
.cab-teaser-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cab-accent);
  margin-bottom: 8px;
}
.cab-teaser-title {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200;
  font-size: 26px;
  color: var(--cab-ink);
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.cab-teaser-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--cab-accent);
}
.cab-teaser-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--cab-inkDim);
  line-height: 1.6;
  max-width: 540px;
}
.cab-teaser-avatars {
  display: inline-flex;
  z-index: 1;
}
.cab-teaser-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cab-surface);
  border: 2px solid var(--cab-bgSoft);
  margin-left: -10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--cab-inkDim);
}
.cab-teaser-avatar:first-child { margin-left: 0; }
.cab-teaser-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #7dd6ff 0%, #2e5bdb 100%);
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cab-bg);
  cursor: pointer;
  z-index: 1;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.cab-teaser-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(125,214,255,0.32);
}

/* Cabinet — photo avatars (Codex-gen). Fits same container size as mono. */
.cab-portrait.cab-portrait-photo {
  overflow: hidden;
  background: var(--cab-surface);
}
.cab-portrait.cab-portrait-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cab-featured-photo {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--cab-surface);
}
.cab-featured-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}

/* Cabinet — monogram avatars (fallback when photo missing) */
.cab-portrait.cab-portrait-mono {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(125,214,255,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--cab-surface) 0%, var(--cab-surfaceHi) 100%);
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--cab-ink);
  filter: none;
}
.cab-featured-mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(125,214,255,0.16) 0%, transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(46,91,219,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--cab-bgSoft) 0%, var(--cab-surface) 100%);
}
.cab-featured-mono-text {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 200;
  font-size: 72px;
  letter-spacing: 0.08em;
  color: var(--cab-ink);
  opacity: 0.92;
}

/* ============================================================
   TOOLS (Công cụ) subpage — Sprint Tools 2026-05-26
   Design system: navy/cyan + paper · cards-as-container with dotted
   dividers (matches Library + LLM page Dragon canonical patterns).
   Don't: border-left color accents (AI slop trope, lesson 2026-05-23).
   ============================================================ */

.tools-shell {
  max-width: 1180px; margin: 0 auto; padding: 28px 40px 80px;
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
}
.tools-head { margin-bottom: 30px; }
.tools-head h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 300; font-size: 36px; letter-spacing: -0.01em;
  color: var(--ink, #0E1F4D); margin: 0 0 6px;
}
.tools-head p {
  font-size: 14px; line-height: 1.55; color: var(--slate-500);
  margin: 0; max-width: 720px;
}

/* ─── Section header ─── */
.tools-section { margin-bottom: 44px; }
.tools-section-head h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500; font-size: 14.5px; letter-spacing: 0;
  color: var(--ink, #0E1F4D); margin: 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tools-section-sub {
  font-weight: 400; font-size: 12.5px; text-transform: none;
  letter-spacing: 0; color: var(--slate-400); margin-left: 10px;
}

/* ─── Grid ─── */
.tools-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tools-grid-studios { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ─── Tile (shared) — cards-as-container with dotted divider ─── */
.tools-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--paper, #fff);
  border: 1px solid var(--slate-100, #e0e6f1);
  border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.tools-tile:hover {
  border-color: var(--slate-200, #c5cee0);
  background: var(--paper-tint, #fbfcfe);
}
.tools-tile.is-enabled { border-color: rgba(31, 169, 255, 0.28); }
.tools-tile.is-running { border-color: rgba(31, 169, 255, 0.28); }
.tools-tile.is-unavailable { opacity: 0.72; }

/* Icon block */
.tools-tile-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 22px;
  background: linear-gradient(135deg, #0E1F4D, #1FA9FF);
  color: #fff; flex-shrink: 0;
}
.tools-tile-icon-cap {
  background: linear-gradient(135deg, #2A3F66, #5B7BB8);
}
.tools-tile-icon-conn {
  background: linear-gradient(135deg, #1FA9FF, #0D7FD6);
}

/* Body */
.tools-tile-body { flex: 1; min-width: 0; }
.tools-tile-name {
  font-size: 14.5px; font-weight: 600; color: var(--ink, #0E1F4D);
  letter-spacing: -0.005em; line-height: 1.2;
}
.tools-tile-desc {
  font-size: 12.5px; color: var(--slate-500); margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tools-tile-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--slate-400);
  margin-top: 6px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.tools-tile-meta-text { display: inline-flex; gap: 6px; align-items: center; }
.tools-tile-via { color: var(--slate-500); }
.tools-tile-mode { color: var(--slate-400); }
.tools-tile-warn { color: #B45309; }

/* Status dot */
.tools-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.tools-dot-active   { box-shadow: 0 0 0 2.5px rgba(31, 169, 255, 0.18); }
.tools-dot-inactive { background: var(--slate-300, #93a1bf); }

/* Buttons */
.tools-tile-cta {
  flex-shrink: 0; padding: 7px 14px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 12.5px; font-weight: 500;
  border-radius: 7px; border: 1px solid var(--slate-200);
  background: var(--paper); color: var(--ink);
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.tools-tile-cta:hover {
  background: var(--paper-tint); border-color: var(--slate-300);
}
.tools-tile-cta-install {
  background: linear-gradient(135deg, #0E1F4D, #1FA9FF);
  color: #fff; border-color: transparent;
}
.tools-tile-cta-install:hover {
  background: linear-gradient(135deg, #1FA9FF, #0D7FD6);
}
.tools-tile-cta-conn {
  background: transparent; color: var(--slate-500);
  border: 1px solid var(--slate-100);
}
.tools-tile-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* Toggle switch — Dragon-styled */
.tools-tile-toggle {
  display: inline-flex; align-items: center;
  cursor: pointer; flex-shrink: 0;
}
.tools-tile-toggle input { display: none; }
.tools-toggle-track {
  position: relative;
  width: 38px; height: 22px;
  background: var(--slate-200, #c5cee0);
  border-radius: 11px;
  transition: background 180ms ease;
}
.tools-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: left 180ms cubic-bezier(.4,.6,.2,1);
}
.tools-tile-toggle input:checked + .tools-toggle-track {
  background: linear-gradient(135deg, #0E1F4D, #1FA9FF);
}
.tools-tile-toggle input:checked + .tools-toggle-track .tools-toggle-thumb {
  left: 18px;
}

/* Empty state */
.tools-empty {
  font-size: 13px; color: var(--slate-400);
  padding: 20px; text-align: center;
  font-style: italic;
}

/* Responsive — at narrow widths stack actions below name */
@media (max-width: 720px) {
  .tools-shell { padding: 20px 16px 60px; }
  .tools-head h2 { font-size: 28px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-tile { flex-wrap: wrap; }
  .tools-tile-cta, .tools-tile-toggle { margin-left: auto; }
}

/* ============================================================
   TOOLS v2 — Dragon-built only (Sprint Tools v2 2026-05-26 PM)
   Reframed: Studios (ready only) + Công cụ Dragon (MCP/plugin)
   ============================================================ */
.tools-tile-name-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tools-badge {
  display: inline-flex; align-items: center; padding: 2px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  text-transform: uppercase; border-radius: 4px;
}
.tools-badge-active {
  background: rgba(31, 169, 255, 0.13);
  color: #0D7FD6;
}
.tools-badge-preview {
  background: rgba(245, 158, 11, 0.13);
  color: #B45309;
}
.tools-badge-planned {
  background: rgba(148, 163, 184, 0.13);
  color: var(--slate-500, #4a5d87);
}
.tools-tile-status-preview { opacity: 0.88; }
.tools-tile-status-planned { opacity: 0.7; }
.tools-tile-runs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--slate-500);
}
.tools-tile-installable {
  font-size: 11px; color: var(--slate-400); margin-left: 4px;
}
.tools-pill {
  display: inline-block; padding: 1px 7px; margin-left: 4px;
  background: var(--paper-tint, #fbfcfe);
  border: 1px solid var(--slate-100, #e0e6f1);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--slate-500);
}
.tools-tile-icon-dragon {
  background: linear-gradient(135deg, #0E1F4D, #2A3F66) !important;
}
.tools-tile-cta-soon {
  background: var(--paper-tint, #fbfcfe);
  color: var(--slate-400);
  cursor: not-allowed;
  border-color: var(--slate-100);
}
.tools-grid-dragon {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}