/* ── Reset ──────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0A0A0A;
  --surface: #111111;
  --surface2: #1A1A1A;
  --border: #2A2A2A;
  --accent: #00D4AA;
  --accent-hover: #00B894;
  --danger: #FF4757;
  --warning: #FFA502;
  --text: #FFFFFF;
  --text-dim: #AAAAAA;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --border-active: #3A3A3A;
  --text-tertiary: #555555;
  --accent-muted: rgba(0,212,170,0.1);
  --accent-border: rgba(0,212,170,0.2);
  --transition: 0.2s ease;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  height: 100vh; height: 100dvh;
  display: flex; overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: 240px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}
.sidebar-header { padding: 16px 16px; height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.sidebar-header h1 {
  /* Natural Inter 700 kerning so the teal K sits flush against VORUM.
     Previously letter-spacing:0.15em + flex gap:6px pushed the K visibly
     further from V than V is from the rest of the word (flex gap applies
     between flex items, letter-spacing applies within a text run). */
  font-size: 18px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text); display: flex; align-items: center;
}
.sidebar-header h1 .logo-k { color: var(--accent); }
.online-dot-header { width: 8px; height: 8px; background: #00D4AA; border-radius: 50%; display: inline-block; margin-left: 8px; }

.room-selector { display: none; }

.nav-section { padding: 8px 16px; }
.nav-section h3 {
  font-size: 11px; text-transform: uppercase; color: var(--text-dim);
  letter-spacing: 1px; margin-bottom: 10px; font-weight: 500;
}
.nav-item {
  padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 400;
  color: #AAAAAA; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item:hover { background: var(--surface2); }
.nav-item.active {
  background: rgba(0, 212, 170, 0.08);
  color: #00D4AA; font-weight: 400;
  border-left: 2px solid #00D4AA;
  border-radius: 0;
  padding-left: 14px;
}
.nav-item:not(.active) {
  border-left: 2px solid transparent;
  padding-left: 14px;
}

/* ── Team list ─────────────────────────────────────────────── */
.team-section { padding: 4px 16px; flex: 1; overflow-y: auto; }
.team-section h3 {
  font-size: 11px; font-weight: 500; color: #555555;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 8px 0 4px 0;
}
.team-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.team-member {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  border-radius: var(--radius); cursor: pointer; margin-bottom: 0; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 40px;
  position: relative;
}
.team-member .avatar {
  width: 32px; height: 32px; font-size: 11px; font-weight: 600;
}
.team-member .online-dot {
  width: 8px; height: 8px; background: #00D4AA; border-radius: 50%;
  border: 2px solid #111111; position: absolute; left: 38px; bottom: 10px;
}
.team-member:hover { background: var(--surface2); }
.team-member.selected { background: rgba(0,212,170,0.12); border: 1px solid var(--accent); }
.team-member.dimmed { opacity: 0.5; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px;
  font-weight: 700; color: white; flex-shrink: 0;
}
.avatar.small { width: 28px; height: 28px; font-size: 10px; }
.avatar.online { border: 2px solid var(--accent); }

.member-info { flex: 1; min-width: 0; }
.member-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-role { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── Main ──────────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Top bar ───────────────────────────────────────────────── */
.topbar {
  height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-topic { font-size: 14px; font-weight: 600; color: #00D4AA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
.topbar-topic.inactive { color: #AAAAAA; }
.round-badge {
  background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: 4px;
  font-size: 11px; color: #AAAAAA; padding: 2px 8px;
}
.participant-count { font-size: 12px; color: #AAAAAA; }
.mode-badge {
  display: none;
}
.superpower-badge {
  background: var(--accent); color: #000; padding: 4px 12px;
  border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.superpower-badge.off { background: var(--surface2); color: var(--text-dim); }
.superpower-badge.gated { background: var(--surface2); color: #555; cursor: pointer; opacity: 0.6; }
.export-btn {
  background: transparent; border: 1px solid #2A2A2A; border-radius: 6px;
  color: #AAAAAA; font-size: 13px; font-weight: 500; padding: 5px 12px;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  transition: all 0.15s ease; font-family: inherit;
}
.export-btn:hover { border-color: #00D4AA; color: #00D4AA; }

/* ── Export Modal ──────────────────────────────────────────── */
.export-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.export-modal {
  background: #111111; border: 1px solid #2A2A2A; border-radius: 12px;
  padding: 24px; max-width: 400px; width: 90%; position: relative;
}
.export-modal h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.export-modal-close {
  position: absolute; top: 12px; right: 16px; background: none;
  border: none; color: #AAA; font-size: 20px; cursor: pointer;
}
.export-modal-close:hover { color: #fff; }
.export-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  font-size: 14px; color: #ccc; cursor: pointer;
}
.export-option input[type="checkbox"] { accent-color: #00D4AA; }
.export-radio {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 24px;
  font-size: 13px; color: #AAA; cursor: pointer;
}
.export-radio input[type="radio"] { accent-color: #00D4AA; }
.export-logo-upload { padding-left: 24px; }
.meeting-export-btn {
  background: transparent; border: 1px solid #2A2A2A; border-radius: 6px;
  color: #AAA; font-size: 11px; padding: 3px 8px; cursor: pointer;
  font-family: inherit;
}
.meeting-export-btn:hover { border-color: #00D4AA; color: #00D4AA; }
.participants-bar { display: flex; gap: 4px; }
.participants-bar .avatar { border: 2px solid var(--surface); margin-right: -8px; }

/* ── Chat area ─────────────────────────────────────────────── */
.chat-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; position: relative; min-width: 0; }
.chat-area::before {
  content: '';
  position: fixed;
  top: 50%;
  left: calc(50% + 130px);
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background-image: url('/static/favicon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.message { display: flex; gap: 12px; margin-bottom: 20px; max-width: 85%; }
.message.system { max-width: 100%; justify-content: center; }
.message.system .msg-content {
  background: transparent; color: var(--text-dim); font-size: 13px;
  text-align: center; border: 1px dashed var(--border); padding: 10px 16px;
  border-radius: var(--radius); border-left: none;
}

.msg-content {
  background: var(--surface2); padding: 14px 18px; border-radius: 0 8px 8px 8px;
  line-height: 1.6; font-size: 15px; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
.message.user-message {
  margin-left: auto;
  flex-direction: row-reverse;
}
.user-message .msg-content {
  background: #1A1A1A;
  border: 1px solid rgba(0, 212, 170, 0.2);
  border-radius: 8px 0 8px 8px;
  padding: 12px 16px;
}

.msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.msg-name { font-weight: 600; font-size: 13px; }
.msg-role { font-size: 11px; color: var(--text-dim); }
.msg-time { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.msg-content p { margin-bottom: 8px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content.collapsed { max-height: 60px; overflow: hidden; position: relative; }
.msg-content.collapsed::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(transparent, var(--surface2));
}
.show-more-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 13px; padding: 4px 0; text-decoration: underline;
}
.msg-content strong { font-weight: 700; }
.msg-content ul, .msg-content ol { padding-left: 1.5em; margin-bottom: 8px; }
.msg-content li { margin-bottom: 4px; }
.msg-content code {
  background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px;
  font-size: 13px; direction: ltr;
}
.msg-content pre {
  background: rgba(255,255,255,0.05); padding: 12px; border-radius: var(--radius);
  overflow-x: auto; margin: 8px 0; direction: ltr; text-align: left;
  max-width: 100%; white-space: pre-wrap; word-break: break-word;
}
.msg-content img, .msg-content table, .msg-content svg { max-width: 100%; }
.msg-content a { overflow-wrap: anywhere; word-break: break-word; }
.message > div { min-width: 0; }

/* Cookie consent banner */
#kvorum-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111111;
  border-top: 1px solid #2A2A2A;
  padding: 16px 24px;
  z-index: 9999;
}
#kvorum-cookie-banner .kvorum-cc-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
}
#kvorum-cookie-banner .kvorum-cc-text {
  color: #E0E0E0;
  font-size: 14px;
  line-height: 1.5;
  flex: 1 1 320px;
  min-width: 240px;
}
#kvorum-cookie-banner .kvorum-cc-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#kvorum-cookie-banner .kvorum-cc-accept {
  background: #00D4AA;
  color: #0A0A0A;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
#kvorum-cookie-banner .kvorum-cc-accept:hover { background: #00BC96; }
#kvorum-cookie-banner .kvorum-cc-decline {
  background: transparent;
  color: #AAAAAA;
  border: 1px solid #2A2A2A;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
#kvorum-cookie-banner .kvorum-cc-decline:hover { color: #FFFFFF; border-color: #AAAAAA; }
@media (max-width: 640px) {
  #kvorum-cookie-banner { padding: 12px 16px; }
  #kvorum-cookie-banner .kvorum-cc-inner { gap: 12px; }
  #kvorum-cookie-banner .kvorum-cc-text { font-size: 13px; flex-basis: 100%; }
  #kvorum-cookie-banner .kvorum-cc-actions { width: 100%; justify-content: flex-end; }
}

/* Mode usage bar (in-chat credit indicator) */
.mode-usage-bar {
  padding: 10px 24px 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.mode-usage-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.mode-usage-tooltip {
  color: var(--text-dim);
  opacity: 0.6;
  cursor: help;
  font-size: 11px;
}
.mode-usage-tooltip::before {
  content: "?";
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border: 1px solid var(--text-dim);
  border-radius: 50%;
  font-size: 10px;
  opacity: 0.6;
}
.mode-usage-track {
  width: 100%;
  height: 4px;
  background: #2A2A2A;
  border-radius: 2px;
  overflow: hidden;
}
.mode-usage-fill {
  height: 100%;
  width: 0%;
  background: #00D4AA;
  transition: width 0.3s ease, background 0.3s ease;
}
.mode-usage-fill.warn { background: #FFA502; }
.mode-usage-fill.over { background: #FF4757; }
.mode-usage-nudge {
  margin-top: 6px;
  font-size: 12px;
  color: #FFA502;
}
.mode-usage-nudge.over { color: #FF4757; }

/* Inactivity pause banner */
.inactivity-banner {
  margin: 16px auto;
  max-width: 560px;
  padding: 14px 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid #FFB020;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inactivity-banner-text {
  color: var(--text);
  font-size: 14px;
}
.inactivity-banner-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.inactivity-resume-btn {
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.inactivity-end-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}
.inactivity-end-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* Agent intro card (Agent Chat welcome) */
.agent-intro-card .msg-content {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.intro-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 8px;
}
.intro-best-for {
  margin: 0 0 0 0;
  padding-left: 1.2em;
}
.intro-best-for li {
  margin-bottom: 4px;
  color: var(--text);
}
.intro-try-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intro-try-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.intro-try-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* TLDR messages */
.tldr-message .msg-content {
  background: var(--surface2); border-left: 3px solid var(--accent);
}
.tldr-badge { display: inline-block; }
.expand-btn {
  background: transparent;
  border: 1px solid #2A2A2A;
  border-radius: 6px;
  color: #AAAAAA;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: 0.2s ease;
  font-family: 'Inter', sans-serif;
}
.expand-btn:hover { border-color: #3A3A3A; color: #FFFFFF; }
.expand-btn:disabled { opacity: 0.5; cursor: wait !important; }

/* TLDR treatment */
.msg-tldr {
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 8px;
}
.msg-body {
  font-size: 15px;
  color: #DDDDDD;
  line-height: 1.6;
}

/* Message max-width */
.message > div:last-child {
  max-width: 700px;
}

/* Error state */
.error-state {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid rgba(255,71,87,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: #FF4757;
  font-size: 13px;
  margin-bottom: 16px;
}
.error-icon {
  width: 20px;
  height: 20px;
  border: 1px solid #FF4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.error-body { flex: 1; }
.error-title { font-weight: 600; margin-bottom: 2px; }
.error-message { color: #AAAAAA; }
.retry-btn {
  background: transparent;
  border: 1px solid rgba(255,71,87,0.3);
  border-radius: 6px;
  color: #FF4757;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.retry-btn:hover { border-color: #FF4757; }

/* Feature button labels */
.input-feature-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.input-feature-btn:hover { background: #1A1A1A; }
.feature-label {
  font-size: 10px;
  color: #555555;
  font-weight: 500;
}
.input-feature-btn:hover .feature-label { color: #AAAAAA; }

/* ── Rich tooltips ────────────────────────────────────────── */
.rich-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: #AAAAAA;
  /* Keep the card wide enough to read as a paragraph, without a min-width
     the card compressed to one-word-per-line near screen edges. */
  min-width: 220px;
  max-width: 260px;
  text-align: left;
  z-index: 100;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: normal;
}
.rich-tooltip.visible { opacity: 1; }
.rich-tooltip-title {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.input-feature-btn { position: relative; }

/* Meeting toolbar ghost/danger buttons */
.ghost-btn {
  background: transparent; border: 1px solid #2A2A2A; color: #FFFFFF;
  border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--transition);
}
.ghost-btn:hover { background: #1A1A1A; }
.danger-btn {
  background: transparent; border: 1px solid #FF475733; color: #FF4757;
  border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--transition);
}
.danger-btn:hover { background: #FF47570D; }

/* Invite banner */
.invite-banner {
  background: var(--surface2); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 16px; display: flex; align-items: center;
  gap: 10px; font-size: 13px; max-width: 85%;
}

/* ── Typing indicator ──────────────────────────────────────── */
.typing {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  color: var(--text-dim); font-size: 13px;
}
.typing-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim); animation: blink 1.4s infinite; margin: 0 2px;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

/* ── Input area ────────────────────────────────────────────── */
.input-area {
  padding: 12px 16px; border-top: 1px solid #2A2A2A;
  background: #0A0A0A; flex-shrink: 0;
}
.input-wrapper { display: flex; gap: 8px; align-items: center; }
.input-wrapper textarea {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; border-radius: 6px; font-size: 14px; direction: ltr;
  font-family: inherit; resize: none; overflow-y: auto;
  min-height: 44px; max-height: 120px;
  line-height: 1.5;
}
.input-wrapper textarea:focus { outline: none; border-color: var(--accent); }
.input-wrapper textarea::placeholder { color: var(--text-tertiary); }

.send-btn {
  background: var(--accent); color: #000; border: none; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  transition: background var(--transition);
}
.send-btn:hover { background: var(--accent-hover); }

.control-btn {
  background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--transition);
}
.control-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.control-btn.active {
  background: var(--danger); color: white; animation: pulse-stop 1s infinite;
  width: auto; height: 40px; font-size: 14px; padding: 0 16px; border-radius: var(--radius);
  border-color: var(--danger);
}
.stop-btn, button.stop-btn, #stop-btn {
  background: transparent !important;
  border: 1px solid #2A2A2A !important;
  color: #AAAAAA !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stop-btn:hover, .stop-btn.active {
  border-color: #3A3A3A !important;
  color: #FFFFFF !important;
  background: transparent !important;
}
@keyframes pulse-stop { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── System status pill (superpower toggle, etc.) ──────────── */
.system-status-pill {
  text-align: center;
  font-size: 12px;
  color: #555555;
  padding: 6px 0;
  font-style: italic;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; color: var(--text-dim); gap: 12px; text-align: center; padding: 40px;
}
.empty-state h3 { font-size: 18px; color: var(--text); font-weight: 600; }

/* ── Participant picker overlay ────────────────────────────── */
.picker-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); display: flex; align-items: center;
  justify-content: center; z-index: 200;
}
.picker-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 24px; width: 400px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
}
.picker-modal h3 { margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.picker-btn {
  display: block; width: 100%; padding: 10px 16px; margin-top: 12px;
  background: var(--accent); color: #000; border: none; border-radius: var(--radius);
  font-size: 14px; cursor: pointer; font-weight: 600;
  transition: background var(--transition);
}
.picker-btn:hover { background: var(--accent-hover); }
.picker-btn.secondary { background: var(--surface2); color: var(--text); }

/* ── Meeting title bar ─────────────────────────────────────── */
.meeting-bar {
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.meeting-bar-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.meeting-bar-topic { font-weight: 700; font-size: 14px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-bar-meta { font-size: 12px; color: var(--text-dim); }

/* ── Search bar ────────────────────────────────────────────── */
.search-bar {
  padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-bar input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 14px; border-radius: var(--radius); font-size: 14px; direction: ltr;
  font-family: inherit;
}
.search-bar input:focus { outline: none; border-color: var(--accent); }

/* ── Topbar actions ────────────────────────────────────────── */
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ── SVG avatar ────────────────────────────────────────────── */
.avatar-svg { border-radius: 50%; flex-shrink: 0; }

/* ── Nav badge (unread) ────────────────────────────────────── */
.nav-badge {
  background: var(--accent); color: #000; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; margin-right: auto;
}

/* ── Feedback buttons ──────────────────────────────────────── */
.feedback-btns { display: flex; gap: 4px; margin-top: 6px; }
.feedback-btn {
  background: transparent; border: 1px solid #2A2A2A; color: #555555;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.feedback-btn:hover { border-color: #3A3A3A; color: #AAAAAA; }
.feedback-btn.selected { border-color: rgba(0,212,170,0.3); color: #00D4AA; }

/* ── Pin star ──────────────────────────────────────────────── */
.pin-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 16px; flex-shrink: 0;
}
.pin-btn.pinned { color: var(--accent); }

/* ── Export button ─────────────────────────────────────────── */
#export-btn { font-size: 14px; }

/* ── Questions panel, inline in chat area ─────────────────── */
.questions-panel {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); max-height: 250px; overflow-y: auto;
  margin-bottom: 20px; max-width: 85%;
}
.questions-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--accent); font-weight: 600;
  position: sticky; top: 0; background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 1;
}
.questions-toggle {
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px;
}
.questions-list { padding: 8px 16px; }
.question-card {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 6px; cursor: pointer; font-size: 13px; direction: ltr;
  transition: border-color var(--transition);
}
.question-card:hover { border-color: var(--accent); }
.question-card.answered { opacity: 0.4; border-color: var(--accent); }
.question-agent { color: var(--accent); font-weight: 600; white-space: nowrap; min-width: 50px; }
.question-text { flex: 1; line-height: 1.4; }
.question-card.answered-pending { border-color: var(--accent); background: rgba(0,212,170,0.05); }
.suggestion-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 4px 12px; border-radius: 16px; cursor: pointer; font-size: 12px;
  white-space: nowrap; transition: all 0.15s;
}
.suggestion-chip:hover { border-color: var(--accent); color: var(--accent); }
.suggestion-chip.selected { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.free-text-chip { border-style: dashed; color: var(--text-dim); }

/* ── File attachment ───────────────────────────────────────── */
.file-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 12px; font-size: 12px; color: var(--text-dim);
  margin-bottom: 8px;
}
.file-badge .remove-file {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 14px; padding: 0 2px;
}
.file-badge .remove-file:hover { color: var(--danger); }

/* ── Login screen ──────────────────────────────────────────── */
.login-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; z-index: 500;
}
.login-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px; text-align: center;
  width: 400px; max-width: 90vw;
}
.login-box .login-logo {
  /* Matches the nav wordmark kerning, natural Inter 700, no wide tracking. */
  font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text); margin-bottom: 24px;
}
.login-box .login-logo .logo-k { color: var(--accent); }
.login-box .login-headline {
  font-size: 24px; font-weight: 300; color: var(--text); margin-bottom: 8px;
}
.login-box .login-subhead {
  color: var(--text-dim); font-size: 14px; margin-bottom: 24px;
}
.login-box h1 { color: var(--text); font-size: 24px; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.15em; }
.login-box input {
  font-family: inherit;
}
.login-box input:focus { outline: none; border-color: var(--accent); }

.login-email-input {
  width: 100%; max-width: 320px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface2); color: var(--text); font-size: 14px;
  margin-bottom: 8px; box-sizing: border-box; font-family: inherit;
  transition: border-color var(--transition);
}
.login-email-input:focus { outline: none; border-color: var(--accent); }

.login-email-btn {
  width: 100%; max-width: 320px; padding: 10px;
  background: var(--accent); color: #000; border: none;
  border-radius: var(--radius); font-size: 14px; cursor: pointer;
  font-weight: 600; font-family: inherit;
  transition: background var(--transition);
}
.login-email-btn:hover { background: var(--accent-hover); }

.login-new-link {
  color: var(--accent); font-size: 13px; cursor: pointer;
  text-decoration: none; font-weight: 500;
  transition: color var(--transition);
}
.login-new-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── User badge in topbar ──────────────────────────────────── */
.user-badge {
  font-size: 12px; color: var(--text-dim); background: var(--surface2);
  padding: 4px 10px; border-radius: 12px;
}

/* ── Hamburger ─────────────────────────────────────────────── */
.hamburger {
  display: none; background: none; border: none; color: var(--text);
  font-size: 24px; cursor: pointer; padding: 8px;
}

/* ── Sidebar backdrop (for mobile/tablet overlay) ──────────── */
.sidebar-backdrop {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 99; opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.visible { display: block; opacity: 1; }

/* ── Mobile bottom nav ─────────────────────────────────────── */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  z-index: 50; justify-content: space-around; align-items: center;
  padding: 6px 0; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  min-height: 56px;
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--text-dim); cursor: pointer;
  padding: 6px 8px; min-width: 56px; min-height: 44px; flex: 1 1 0;
  justify-content: center; position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item.active::after {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%;
  height: 3px; background: var(--accent); border-radius: 0 0 3px 3px;
}
.mobile-nav-item .nav-icon { font-size: 20px; line-height: 1; }
.mobile-nav-item:active { transform: scale(0.92); }

/* ── Mobile overflow menu (hidden on desktop) ─────────────── */
.mobile-overflow-btn {
  display: none; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim); width: 36px; height: 36px; border-radius: 6px;
  cursor: pointer; font-size: 18px; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.mobile-overflow-menu {
  display: none; position: absolute; bottom: 44px; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 0; min-width: 140px; z-index: 50;
}
.mobile-overflow-menu.open { display: block; }
.mobile-overflow-menu button {
  display: block; width: 100%; padding: 10px 16px; background: none; border: none;
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  text-align: left;
}
.mobile-overflow-menu button:hover { background: var(--surface2); }

/* ── Mobile (<640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  .sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100; width: 280px;
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  .sidebar.open { display: flex; transform: translateX(0); }
  .hamburger { display: block; }
  .topbar { padding: 0 12px; height: 48px; }
  .topbar h2 { font-size: 14px; }
  .topbar-right { gap: 8px; }
  .superpower-badge { font-size: 11px; padding: 3px 8px; }
  .chat-area { padding: 12px; }
  .message { max-width: 95%; }
  .msg-content { padding: 10px 14px; font-size: 14px; min-width: 0; }
  .avatar { width: 28px; height: 28px; font-size: 10px; }
  .avatar-svg { width: 28px; height: 28px; }
  .message { gap: 8px; }
  .input-area {
    padding: 10px 12px;
    padding-bottom: calc(10px + 56px + env(safe-area-inset-bottom, 0px));
  }
  .input-wrapper textarea { padding: 10px 12px; font-size: 14px; min-height: 40px; max-height: 80px; }
  .control-btn { width: 36px; height: 36px; font-size: 14px; min-width: 36px; min-height: 36px; }
  .send-btn { width: 36px; height: 36px; font-size: 16px; }
  .mobile-nav { display: flex; }
  .meeting-bar { padding: 8px 12px; flex-wrap: wrap; gap: 4px; }
  .meeting-bar-topic { font-size: 13px; }
  .picker-overlay { align-items: flex-end; }
  .picker-modal {
    width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh; padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .questions-panel { max-width: 95%; max-height: 200px; }
  /* Collapse action buttons into overflow menu on mobile */
  .export-btn, #share-btn, #clear-btn { display: none; }
  .mobile-overflow-btn { display: flex; }
  .topbar-actions { gap: 4px; }
  #new-chat-btn { width: 32px; height: 32px; font-size: 18px; }

  /* Minimum font-size enforcement */
  body { font-size: 14px; }

  /* Execution UI mobile */
  .execution-proposal { padding: 10px 12px; }
  .proposal-actions { flex-direction: column; }
  .proposal-actions button { width: 100%; }
  .integrations-section { display: none; }

  /* Mode usage bar, tighter padding on phones */
  .mode-usage-bar { padding: 8px 12px 10px; }
  .mode-usage-label { font-size: 11px; }

  /* Settings screen, fit 375px without horizontal scroll */
  .settings-screen { padding: 16px 12px !important; max-width: 100% !important; }
  .settings-screen h2 { font-size: 18px !important; }
  .settings-screen h3 { font-size: 10px !important; }

  /* Agent intro card, fit narrow viewports */
  .agent-intro-card .msg-content { padding: 12px 14px; }
  .intro-try-btn { font-size: 12px; padding: 8px 10px; }

  /* Inactivity banner, full-width on phones */
  .inactivity-banner { max-width: 100%; margin: 12px 0; }
}

/* ── Small mobile (<480px) ────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: 13px; }
  h1, h2 { font-size: 15px; }
  .avatar { width: 24px; height: 24px; font-size: 9px; }
  .avatar-svg { width: 24px; height: 24px; }
  .msg-content { padding: 8px 10px; }
  .chat-area { padding: 8px; }
  .questions-panel { max-width: 100%; }
}

/* ── Ultra-narrow guard (<320px) ──────────────────────────── */
@media (max-width: 320px) {
  .export-modal, .picker-modal { min-width: 280px; }
  .msg-content { min-width: 0; }
  .questions-panel { min-width: 280px; }
}

/* ── Tablet (641-900px) ────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100; width: 280px;
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  .sidebar.open { display: flex; transform: translateX(0); }
  .hamburger { display: block; }
  .mobile-nav { display: flex; }
  .input-area {
    padding-bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px));
  }
  .picker-modal { width: 500px; }
  .control-btn { min-width: 40px; min-height: 40px; }
}

/* ── Desktop (>900px) ──────────────────────────────────────── */
@media (min-width: 901px) {
  .sidebar { display: flex; position: relative; transform: none; }
  .sidebar-backdrop { display: none !important; }
  .mobile-nav { display: none !important; }
  .hamburger { display: none; }
}

/* ── History list ──────────────────────────────────────────── */
.history-item {
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; background: var(--surface2);
  transition: border-color var(--transition);
}
.history-item:hover { border-color: var(--accent); }
.history-item h4 { font-size: 14px; margin-bottom: 4px; font-weight: 600; }
.history-item .meta { font-size: 12px; color: var(--text-dim); }

/* ── Onboarding Wizard ─────────────────────────────────────── */
.onboarding-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 600;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.onboarding-container {
  width: 520px; max-width: 92vw; padding: 32px 0;
}
.onboarding-cta {
  color: var(--accent); background: none; border: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; padding: 0;
  transition: color var(--transition);
}
.onboarding-cta:hover { color: var(--accent-hover); text-decoration: underline; }

/* Progress */
.onboarding-progress {
  display: flex; justify-content: space-between; margin-bottom: 32px;
  padding: 0 4px;
}
.progress-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); flex: 1;
  position: relative;
}
.progress-step span {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; transition: all var(--transition);
}
.progress-step.active span { background: var(--accent); border-color: var(--accent); color: #000; }
.progress-step.done span { background: var(--accent); border-color: var(--accent); color: #000; }

/* Steps */
.onboarding-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 32px;
}
.onboarding-step h2 { font-size: 20px; margin-bottom: 8px; font-weight: 600; }
.ob-subtitle { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.ob-field { margin-bottom: 20px; }
.ob-field label {
  display: block; font-size: 13px; color: var(--text-dim);
  margin-bottom: 6px; font-weight: 600;
}
.ob-field input, .ob-field select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; font-family: inherit; direction: ltr;
  transition: border-color var(--transition);
}
.ob-field input:focus, .ob-field select:focus { outline: none; border-color: var(--accent); }

.ob-next-btn {
  display: block; width: 100%; padding: 14px; margin-top: 8px;
  background: var(--accent); color: #000; border: none;
  border-radius: var(--radius); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background var(--transition);
  font-family: inherit;
}
.ob-next-btn:hover { background: var(--accent-hover); }
.ob-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ob-back-btn {
  display: block; width: 100%; padding: 12px; margin-top: 8px;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 14px; cursor: pointer;
  font-family: inherit; transition: all var(--transition);
}
.ob-back-btn:hover { color: var(--text); border-color: var(--text-dim); }

/* Agent cards */
.ob-agents { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.ob-agent-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
}
.ob-agent-card:hover { border-color: var(--text-dim); }
.ob-agent-card.selected { border-color: var(--accent); background: rgba(0,212,170,0.08); }
.ob-agent-card .ob-agent-check {
  width: 22px; height: 22px; border-radius: 4px;
  border: 2px solid var(--border); display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--transition); font-size: 14px;
}
.ob-agent-card.selected .ob-agent-check { background: var(--accent); border-color: var(--accent); color: #000; }
.ob-agent-info { flex: 1; }
.ob-agent-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.ob-agent-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.ob-agent-count { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; text-align: center; }

/* Preset cards */
.ob-presets { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.ob-preset-card {
  padding: 16px 18px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
}
.ob-preset-card:hover { border-color: var(--text-dim); }
.ob-preset-card.selected { border-color: var(--accent); background: rgba(0,212,170,0.08); }
.ob-preset-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ob-preset-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* Upload area */
.ob-upload-area {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 32px; text-align: center; color: var(--text-dim);
  cursor: pointer; transition: all var(--transition); margin-bottom: 12px;
}
.ob-upload-area:hover { border-color: var(--accent); color: var(--text); }
.ob-upload-area.dragover { border-color: var(--accent); background: rgba(0,212,170,0.05); }
.ob-file-list { margin-bottom: 12px; }
.ob-file-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--surface2); border-radius: var(--radius);
  margin-bottom: 6px; font-size: 13px;
}
.ob-file-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }
.ob-skip {
  text-align: center; color: var(--text-dim); font-size: 13px;
  cursor: pointer; margin-top: 12px; text-decoration: underline;
}
.ob-skip:hover { color: var(--text); }

/* Step 4, Brief your team */
.ob-step4-explainer {
  color: #AAAAAA; font-size: 14px; line-height: 1.7;
  max-width: 480px; margin: 0 auto 24px; text-align: center;
}
.ob-upload-formats {
  color: #555555; font-size: 12px; margin-top: 8px;
}
.ob-upload-hints {
  color: #555555; font-size: 13px; line-height: 1.8;
  max-width: 480px; margin: 0 auto 16px; text-align: left;
}
.ob-security-note {
  color: #555555; font-size: 12px; text-align: center;
  margin-bottom: 16px;
}
.ob-security-note a { color: var(--accent); text-decoration: none; }
.ob-security-note a:hover { text-decoration: underline; }

/* Ready step */
.ob-prompt-box {
  background: var(--surface2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 20px;
  font-size: 15px; line-height: 1.6; margin-bottom: 12px;
  color: var(--text); direction: ltr;
}
.ob-prompt-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; text-align: center; }
.ob-launch-btn {
  display: block; width: 100%; padding: 16px;
  background: var(--accent); color: #000; border: none;
  border-radius: var(--radius); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background var(--transition);
  font-family: inherit;
}
.ob-launch-btn:hover { background: var(--accent-hover); }

/* Loading */
.ob-loading { text-align: center; padding: 40px 0; }
.ob-spinner {
  width: 40px; height: 40px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: ob-spin 0.8s linear infinite; margin: 0 auto 20px;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* Mobile onboarding */
@media (max-width: 640px) {
  .onboarding-container { padding: 16px 0; }
  .onboarding-step { padding: 24px 18px; }
  .onboarding-step h2 { font-size: 18px; }
  .onboarding-progress { margin-bottom: 20px; }
  .progress-step { font-size: 10px; }
  .progress-step span { width: 28px; height: 28px; font-size: 12px; }
  .ob-agents { grid-template-columns: 1fr; }
  .ob-presets { grid-template-columns: 1fr; }
}

/* ── Upgrade Modal ─────────────────────────────────────────── */
.upgrade-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.upgrade-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px; max-width: 720px;
  width: 90%; position: relative; max-height: 90vh; overflow-y: auto;
}
.upgrade-close {
  position: absolute; top: 12px; right: 16px; background: none;
  border: none; color: var(--text-dim); font-size: 24px; cursor: pointer;
}
.upgrade-close:hover { color: var(--text); }
.upgrade-modal h2 { font-size: 24px; margin-bottom: 4px; font-weight: 600; }
.upgrade-plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.upgrade-plan {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center;
  position: relative;
}
.upgrade-plan.featured { border: 2px solid var(--accent); }
.upgrade-plan .plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #000; padding: 3px 12px;
  border-radius: 20px; font-size: 11px; font-weight: 700;
}
.upgrade-plan h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; }
.upgrade-price { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.upgrade-price span { font-size: 14px; font-weight: 400; color: var(--text-dim); }
.upgrade-plan ul {
  list-style: none; text-align: left; margin-bottom: 20px;
}
.upgrade-plan ul li {
  padding: 6px 0; font-size: 13px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.upgrade-plan ul li::before { content: "\2713\00a0"; color: var(--accent); font-weight: 700; }
.upgrade-plan .plan-btn {
  display: block; width: 100%; padding: 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  transition: background var(--transition); font-family: inherit;
}
.upgrade-plan .plan-btn.primary { background: var(--accent); color: #000; }
.upgrade-plan .plan-btn.primary:hover { background: var(--accent-hover); }
.upgrade-plan .plan-btn.secondary {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
}
.upgrade-plan .plan-btn.secondary:hover { border-color: var(--text-dim); }
.upgrade-banner {
  background: var(--surface2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; margin: 8px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-dim);
}
.upgrade-banner button {
  background: var(--accent); color: #000; border: none; padding: 6px 14px;
  border-radius: var(--radius); font-weight: 600; font-size: 12px; cursor: pointer;
}
@media (max-width: 640px) {
  .upgrade-plans { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
  .upgrade-modal { padding: 24px 16px; }
}

/* ── Welcome Tour Modal ───────────────────────────────────── */
.welcome-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 10000;
}
.welcome-modal {
  background: #111111; border: 1px solid #2A2A2A; border-radius: 12px;
  padding: 32px; max-width: 520px; width: 90%; max-height: 90vh; overflow-y: auto;
}
.welcome-modal h2 { font-size: 22px; font-weight: 600; margin-bottom: 16px; color: #FFFFFF; }
.welcome-body { font-size: 14px; color: #AAAAAA; line-height: 1.7; margin-bottom: 12px; }
.welcome-avatars { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.welcome-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.welcome-avatar-item .avatar { width: 40px; height: 40px; font-size: 14px; }
.welcome-avatar-item span { font-size: 11px; color: #AAAAAA; }
.welcome-sections { margin: 16px 0; }
.welcome-section { display: flex; gap: 10px; margin-bottom: 14px; font-size: 13px; color: #AAAAAA; line-height: 1.6; }
.welcome-section strong { color: #FFFFFF; font-weight: 600; }
.ws-icon { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; }
.welcome-dots { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; }
.welcome-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #2A2A2A; }
.welcome-dots .dot.active { background: #00D4AA; }
.welcome-cta {
  display: block; width: 100%; padding: 12px; background: var(--accent); color: #0A0A0A;
  border: none; border-radius: var(--radius); font-weight: 600; font-size: 14px;
  cursor: pointer; text-align: center;
}
.welcome-back {
  background: transparent; border: 1px solid #2A2A2A; color: #AAAAAA;
  padding: 10px 16px; border-radius: var(--radius); cursor: pointer; font-size: 13px;
}
.welcome-back:hover { border-color: #3A3A3A; color: #FFFFFF; }
.welcome-nav { display: flex; gap: 12px; justify-content: space-between; }
.welcome-nav .welcome-cta { flex: 1; }
.welcome-skip { text-align: center; color: #555555; font-size: 13px; cursor: pointer; margin-top: 12px; }
.welcome-skip:hover { color: #AAAAAA; }

/* ── Contextual Empty States ──────────────────────────────── */
.empty-state-ctx { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 40px; text-align: center; }
.empty-state-ctx .es-title { font-size: 16px; font-weight: 500; color: #FFFFFF; margin-bottom: 8px; }
.empty-state-ctx .es-body { font-size: 14px; color: #AAAAAA; line-height: 1.7; max-width: 400px; }
.empty-state-ctx .es-example { font-size: 13px; color: #555555; font-style: italic; border-left: 2px solid #2A2A2A; padding-left: 12px; margin-top: 12px; text-align: left; max-width: 400px; }
.empty-state-ctx .es-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.empty-state-ctx .es-link:hover { text-decoration: underline; }

/* ── First-meeting prompt suggestion cards ─────────────────── */
/* Clicking a card pre-populates the input, does NOT auto-send. */
.prompt-suggestions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-top: 28px; width: 100%; max-width: 720px;
}
.prompt-suggestion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; cursor: pointer;
  text-align: left; font-family: inherit; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.prompt-suggestion:hover { border-color: var(--accent); background: var(--surface2); }
.prompt-suggestion:active { transform: scale(0.98); }
.prompt-suggestion-label {
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.prompt-suggestion-preview {
  font-size: 12px; color: var(--text-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .prompt-suggestions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── Sync Knowledge Screen ────────────────────────────────── */
.sync-knowledge-screen { max-width: 520px; margin: 0 auto; padding: 24px 0; }
.sync-safety-block {
  background: rgba(0,212,170,0.04); border: 1px solid rgba(0,212,170,0.15);
  border-radius: 8px; padding: 16px; margin-top: 20px;
}
.sync-safety-title { font-size: 14px; font-weight: 600; color: #FFFFFF; margin-bottom: 12px; }
.sync-safety-section { font-size: 13px; color: #AAA; line-height: 1.6; padding: 8px 0; }
.sync-safety-section strong { color: #FFFFFF; }
.sync-safety-divider { border-top: 1px solid #2A2A2A; }

/* ── Execution UI ─────────────────────────────────────────── */
.execute-row { margin-top: 6px; }
.execute-btn {
  background: transparent; border: 1px solid #2A2A2A; border-radius: 6px;
  color: #555555; font-size: 12px; padding: 4px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; transition: all 0.15s ease;
}
.execute-btn:hover { border-color: rgba(0,212,170,0.3); color: #00D4AA; }
.execution-proposal {
  background: #111111; border: 1px solid rgba(0,212,170,0.2);
  border-radius: 8px; padding: 14px 16px; margin-top: 8px;
}
.proposal-header { display: flex; justify-content: space-between; align-items: center; }
.proposal-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.08em; }
.proposal-output { font-size: 10px; color: #00D4AA; }
.proposal-title { font-size: 14px; font-weight: 600; color: #fff; margin: 6px 0 4px; }
.proposal-description { font-size: 13px; color: #AAA; line-height: 1.6; }
.proposal-actions { display: flex; gap: 8px; margin-top: 12px; }
.approve-btn {
  background: #00D4AA; color: #0A0A0A; border: none; border-radius: 6px;
  padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.approve-btn:hover { background: #00B894; }
.cancel-btn {
  background: transparent; border: 1px solid #2A2A2A; border-radius: 6px;
  color: #AAA; padding: 6px 16px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.cancel-btn:hover { border-color: #3A3A3A; color: #fff; }
.execution-running { display: flex; align-items: center; gap: 8px; color: #AAA; font-size: 13px; }
.execution-spinner { width: 16px; height: 16px; border: 2px solid #2A2A2A; border-top-color: #00D4AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.execution-result { display: flex; align-items: center; gap: 12px; }
.result-icon { width: 24px; height: 24px; background: #00D4AA; color: #0A0A0A; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.result-title { font-size: 13px; font-weight: 500; color: #fff; }
.result-link { color: #00D4AA; font-size: 12px; text-decoration: underline; }
.integration-required { background: #111; border: 1px solid #2A2A2A; border-radius: 8px; padding: 14px 16px; margin-top: 8px; }
.integration-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.integration-body { font-size: 13px; color: #AAA; line-height: 1.6; margin-bottom: 12px; }
.connect-btn { display: inline-block; background: #00D4AA; color: #0A0A0A; padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; }
.connect-btn:hover { background: #00B894; text-decoration: none; }

/* ── Toast notifications ──────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #111111; border: 1px solid #2A2A2A; border-radius: 6px;
  padding: 12px 16px; font-size: 13px; color: #FFFFFF; z-index: 10000;
  animation: fadeIn 0.2s ease;
}
.toast-success { border-color: rgba(0,212,170,0.4); }
.toast-error { border-color: rgba(255,71,87,0.4); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }