/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg: #08060F;
  --bg2: #0D0A1A;
  --bg3: #171331;
  --bg4: #221B45;
  --border: #2A2350;
  --text: #F5EFE6;
  --text2: #A39FCB;
  --text3: #8581B8;
  --accent: #C8A040;
  --accent-hover: #E0B75A;
  --accent-light: rgba(200,160,64, 0.15);
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, sans-serif;
  --gold: #C8A040;
  --gold-2: #E0B75A;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; overflow-y: auto; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; outline: none; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 14px;
  transition: color .2s, border-color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text3); }
.btn-xl { padding: 13px 28px; font-size: 16px; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-danger { background: rgba(239,68,68,.15); color: var(--red); }
.btn-danger:hover { background: rgba(239,68,68,.25); }

/* ─── Logo ────────────────────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--text); }
/* The K mark with its violet/cyan ring — the same sign as the favicon and the landing. */
.brand-mark { width: 22px; height: 22px; flex-shrink: 0; display: inline-block; border-radius: 6px;
              background: url(/icons/mark.svg) center / contain no-repeat; }

/* ─── Landing ─────────────────────────────────────────────────────────────── */
html, body { overflow: auto; }
.landing { min-height: 100vh; background: var(--bg); }
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(15,15,15,.9);
  backdrop-filter: blur(12px); z-index: 100;
}
.nav-links { display: flex; gap: 10px; align-items: center; }

.hero {
  text-align: center;
  padding: 100px 40px 80px;
  max-width: 800px;
  margin: 0 auto;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-light); color: var(--accent);
  border: 1px solid rgba(200,160,64,.3);
  border-radius: 20px; padding: 6px 16px; font-size: 13px;
  margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 60px); font-weight: 800;
  line-height: 1.15; margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 0%, var(--text2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { font-size: 18px; color: var(--text2); max-width: 520px; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.features { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
.features h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.feature-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  transition: border-color .2s, transform .2s;
}
.feature-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature-icon { font-size: 28px; margin-bottom: 14px; }
.feature-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text2); line-height: 1.6; }

/* ─── Pricing (landing) ───────────────────────────────────────────────────── */
.pricing-section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
.pricing-section h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.pricing-grid-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pricing-card-home {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px; position: relative;
}
.pricing-card-home.featured-home {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--bg2), rgba(200,160,64,.08));
}
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 14px; border-radius: 20px;
}
.plan-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.plan-price-home { font-size: 36px; font-weight: 800; margin-bottom: 20px; }
.plan-price-home span { font-size: 16px; font-weight: 400; color: var(--text2); }
.pricing-card-home ul { list-style: none; font-size: 14px; color: var(--text2); }
.pricing-card-home li { padding: 5px 0; }
.pricing-card-home li:not(:last-child) { border-bottom: 1px solid var(--border); }

/* ─── App Shell ───────────────────────────────────────────────────────────── */
/* Чат-режим: фиксируем высоту viewport, чтобы скроллился ТОЛЬКО .messages-wrap.
   Sidebar (слева) + toolbar (сверху) + input-area (снизу) остаются статичными. */
html.app-mode, body.app-mode {
  overflow: hidden;
  height: 100vh; height: 100dvh; /* dvh даёт корректные 100% на мобиле с динамической URL-баром */
}
.app-shell {
  display: flex;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  height: 100%;
}
.sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }
.btn-new-chat {
  width: 100%; margin-top: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: 14px; text-align: left;
  transition: background .2s, color .2s;
}
.btn-new-chat:hover { background: var(--bg4); color: var(--text); }

/* Mode selector */
.mode-selector { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; }
.mode-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text2); width: 100%; text-align: left;
  transition: background .15s, color .15s; position: relative;
  border: 1px solid transparent;
}
.mode-btn:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
.mode-btn.active { background: var(--accent-light); color: var(--accent); border-color: rgba(200,160,64,.3); }
.mode-btn.locked { opacity: .5; cursor: not-allowed; }
.mode-icon { font-size: 14px; width: 20px; text-align: center; }
.mode-label { flex: 1; }
.lock-badge {
  font-size: 10px; background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 10px; margin-left: auto;
}

.chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-list::-webkit-scrollbar { width: 4px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }

.chat-item {
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 2px;
  transition: background .15s;
}
.chat-item:hover { background: var(--bg3); }
.chat-item.active { background: var(--bg3); }
.chat-item-title { flex: 1; font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.active .chat-item-title { color: var(--text); }
.chat-item-delete { color: var(--text3); font-size: 12px; opacity: 0; transition: opacity .15s; padding: 2px 5px; border-radius: 4px; }
.chat-item:hover .chat-item-delete { opacity: 1; }
.chat-item-delete:hover { background: rgba(239,68,68,.15); color: var(--red); }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); }
.user-badge { display: flex; align-items: center; gap: 10px; padding: 8px 0; margin-bottom: 8px; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #E0B75A 50%, #22d3ee 100%);
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 0 12px rgba(139,92,246,.35);
  text-transform: uppercase;
  line-height: 1;
}
.user-info { min-width: 0; }
.user-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-tier-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.model-tag { font-size: 10px; background: var(--bg4); color: var(--text3); padding: 1px 6px; border-radius: 8px; border: 1px solid var(--border); font-family: var(--font-mono); }

/* Memory Panel */
.memory-panel { margin-bottom: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.memory-header { padding: 8px 10px; font-size: 12px; color: var(--text2); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background .15s; }
.memory-header:hover { background: var(--bg4); }
.memory-toggle { font-size: 10px; color: var(--text3); }
.memory-body { padding: 8px 10px 10px; border-top: 1px solid var(--border); }
.memory-textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px; font-size: 12px; resize: vertical; line-height: 1.5; transition: border-color .2s; }
.memory-textarea:focus { border-color: var(--accent); }
.memory-textarea::placeholder { color: var(--text3); }
.memory-actions { display: flex; gap: 6px; margin-top: 6px; }
.btn-memory-save { flex: 1; background: var(--accent); color: #fff; padding: 5px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: background .15s; }
.btn-memory-save:hover { background: var(--accent-hover); }
.btn-memory-clear { background: var(--bg4); color: var(--text3); padding: 5px 10px; border-radius: 6px; font-size: 12px; border: 1px solid var(--border); transition: color .15s; }
.btn-memory-clear:hover { color: var(--red); }
.memory-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }
.user-tier { font-size: 11px; color: var(--text3); }
.tier-free { color: var(--text3); }
.tier-pro { color: #a78bfa; }
.tier-business { color: var(--yellow); }

.lang-switcher { display: flex; gap: 6px; margin-bottom: 8px; }
.lang-btn { font-size: 12px; color: var(--text3); padding: 4px 10px; border-radius: 20px; transition: background .15s, color .15s; border: 1px solid transparent; }
.lang-btn:hover { color: var(--text2); }
.lang-btn.active { background: var(--bg3); color: var(--text); border-color: var(--border); }

.sidebar-actions { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link { display: block; padding: 7px 10px; font-size: 13px; color: var(--text2); border-radius: var(--radius-sm); transition: background .15s, color .15s; text-align: left; }
.sidebar-link:hover, .sidebar-link.active { background: var(--bg3); color: var(--text); }
.btn-upgrade { display: block; padding: 7px 10px; font-size: 13px; color: var(--accent); background: var(--accent-light); border: 1px solid rgba(200,160,64,.3); border-radius: var(--radius-sm); margin-bottom: 4px; transition: background .15s; }
.btn-upgrade:hover { background: rgba(200,160,64,.2); }

/* ─── Main Chat Area ──────────────────────────────────────────────────────── */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 0; height: 100%; }
.toolbar { padding: 8px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; flex-shrink: 0; }
.btn-pptx { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; transition: background .15s, color .15s; }
.btn-pptx:hover { background: var(--bg4); color: var(--text); }

.messages-wrap { flex: 1; overflow-y: auto; }
.messages-wrap::-webkit-scrollbar { width: 4px; }
.messages-wrap::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
.messages-inner { max-width: 760px; margin: 0 auto; padding: 24px 20px 16px; }

.empty-state { text-align: center; padding: 80px 20px; }
.empty-logo { font-size: 42px; font-weight: 800; background: linear-gradient(135deg, #fff, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
.empty-sub { font-size: 16px; color: var(--text2); }

/* Messages */
.msg { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.msg:last-child { border-bottom: none; }
.msg-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.msg.user .msg-icon { background: var(--accent); color: #fff; }
.msg.assistant .msg-icon { background: var(--bg3); color: var(--accent); border: 1px solid var(--border); }
.msg-body { flex: 1; min-width: 0; }
.msg-name { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.msg.user .msg-name { color: #a78bfa; }
.msg-content { font-size: 15px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.msg-content.markdown { white-space: normal; }
.msg.msg-failed .msg-content { color: var(--red); white-space: pre-wrap; }

/* Markdown styles */
.msg-content h1, .msg-content h2, .msg-content h3 { margin: 16px 0 8px; font-weight: 600; }
.msg-content h1 { font-size: 22px; }
.msg-content h2 { font-size: 18px; }
.msg-content h3 { font-size: 16px; }
.msg-content p { margin: 8px 0; }
.msg-content ul, .msg-content ol { padding-left: 20px; margin: 8px 0; }
.msg-content li { margin: 4px 0; }
.msg-content code {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 13px; color: #a78bfa;
}
.msg-content pre {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; margin: 12px 0;
}
.msg-content pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 13px; }
.msg-content blockquote { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--text2); margin: 8px 0; }
.msg-content table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.msg-content th, .msg-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 14px; }
.msg-content th { background: var(--bg3); }
.msg-content strong { font-weight: 700; }
.msg-content em { font-style: italic; color: var(--text2); }
.msg-content a { color: var(--accent); text-decoration: underline; }

/* Feedback buttons */
.msg-feedback { display: flex; gap: 6px; margin-top: 10px; }
.fb-btn {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 14px;
  transition: background .15s, border-color .15s; color: var(--text2);
}
.fb-btn:hover { background: var(--bg4); }
.fb-btn.active { background: var(--accent-light); border-color: rgba(200,160,64,.4); }

/* Streaming cursor */
.cursor { display: inline-block; width: 2px; height: 16px; background: var(--accent); animation: blink .8s infinite; margin-left: 1px; vertical-align: middle; }

/* ─── Sidebar: компактнее ─────────────────────────────────────────────────── */
.sidebar-header { padding: 12px 12px 10px; }
.sidebar-footer { padding: 8px; }
.btn-new-chat   { padding: 8px 12px; margin-top: 8px; }
.mode-selector  { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.mode-btn       { padding: 7px 10px; font-size: 13px; }
.conv-search-wrap { margin-top: 8px; }
.chat-list { padding: 6px; }
.chat-item { padding: 7px 9px; }

/* ─── Logo in chat-msg avatar ─────────────────────────────────────────────── */
.kl-msg-logo { width: 100%; height: 100%; display: block; }
.msg-icon-logo {
  background: rgba(20,20,32,0.85) !important;
  padding: 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(139,92,246,.35), inset 0 0 0 1px rgba(167,139,250,.25);
}

/* ─── Mode tools dropdown ─────────────────────────────────────────────────── */
.mode-tools-wrap { position: relative; }
.mode-tools-toggle { width: 100%; justify-content: flex-start; }
.mode-tools-caret { margin-left: auto; transition: transform .2s; font-size: 10px; opacity: .6; }
.mode-tools-wrap.is-open .mode-tools-caret { transform: rotate(180deg); }
.mode-tools-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 0 0 14px; padding-left: 6px;
  border-left: 1px solid var(--border);
}
.mode-tools-menu[hidden] { display: none; }
.mode-tools-wrap.is-open .mode-tools-menu { display: flex; }

/* ─── Sidebar user-badge button (clickable) ──────────────────────────────── */
.user-badge-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; transition: background .15s, border-color .15s;
  text-align: left;
}
.user-badge-btn:hover { background: var(--bg4); border-color: var(--border2, var(--border)); }
.user-badge-btn .user-info { flex: 1; min-width: 0; }
.user-badge-btn .user-name { font-weight: 600; color: var(--text); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-badge-btn .user-tier-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; }
.user-tokens-mini { color: var(--text3); font-variant-numeric: tabular-nums; }
.user-gear {
  color: var(--text2); font-size: 22px; line-height: 1;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background .15s, color .15s, transform .25s;
  flex-shrink: 0;
}
.user-badge-btn:hover .user-gear { color: var(--text); background: rgba(255,255,255,0.06); transform: rotate(30deg); }

/* ─── Profile modal — широкая модалка с секциями ─────────────────────────── */
.modal-card.modal-card-wide,
.modal-card-wide {
  width: min(620px, 92vw); max-width: min(620px, 92vw);
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-card-wide .modal-header { flex-shrink: 0; }
.modal-card-wide .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.modal-card-wide .modal-body::-webkit-scrollbar { width: 6px; }
.modal-card-wide .modal-body::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
.profile-body { display: flex; flex-direction: column; gap: 14px; }
.profile-section {
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg3); border: 1px solid var(--border);
}
.profile-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3); margin-bottom: 10px; }
.profile-row { display: flex; align-items: center; gap: 12px; }
.profile-name { font-weight: 600; color: var(--text); font-size: 15px; }
.profile-email { font-size: 12px; color: var(--text3); }
.profile-spacer { flex: 1; }
.user-avatar-lg { width: 44px; height: 44px; font-size: 18px; }
.profile-row-actions { display: flex; gap: 8px; margin-top: 8px; }
.profile-links { display: flex; flex-direction: column; gap: 6px; }
.profile-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text2); background: transparent;
  border: 1px solid var(--border); font-size: 14px;
}
.profile-link:hover { background: var(--bg4); color: var(--text); }
.profile-section-danger { background: transparent; border: none; padding: 4px 0 0; }
.btn-logout {
  width: 100%; padding: 10px 14px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); font-size: 14px; text-align: left;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.btn-logout:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.4); color: #ef4444; }
.token-widget-lg { background: transparent; border: none; padding: 0; font-size: 14px; }
.token-widget-lg .token-bar { height: 8px; }
.token-used-big { font-size: 22px; font-weight: 700; color: var(--text); }

/* ─── Token usage widget (sidebar) ───────────────────────────────────────── */
.token-widget {
  padding: 10px 12px; margin: 8px 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg3); font-size: 12px; color: var(--text2);
}
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.token-label { font-weight: 600; color: var(--text); }
.token-count { font-variant-numeric: tabular-nums; color: var(--text2); }
.token-sep { color: var(--text3); margin: 0 3px; }
.token-bar {
  width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden; position: relative;
}
.token-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  transition: width .8s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px rgba(167,139,250,.4);
}
.token-bar-fill.high { background: linear-gradient(90deg, #fbbf24, #f97316); }
.token-bar-fill.critical { background: linear-gradient(90deg, #ef4444, #f97316); }
.token-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text3); }
.token-last-used {
  color: #22d3ee; font-weight: 600;
  animation: kal-token-pop .8s ease-out;
}
@keyframes kal-token-pop {
  0%   { transform: translateY(6px); opacity: 0; }
  20%  { transform: translateY(0);   opacity: 1; }
  100% { opacity: 1; }
}

/* ─── AI Thinking indicator (показывается до первого токена) ─────────────── */
.ai-thinking {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 0; font-size: 14px; color: var(--text2);
}
.ai-thinking-dots { display: inline-flex; gap: 4px; align-items: center; }
.ai-thinking-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: kal-dot-pulse 1.4s ease-in-out infinite;
}
.ai-thinking-dots .dot:nth-child(2) { animation-delay: .18s; }
.ai-thinking-dots .dot:nth-child(3) { animation-delay: .36s; }
.ai-thinking-text {
  font-weight: 500; letter-spacing: .01em;
  background: linear-gradient(90deg, #a78bfa, #22d3ee, #a78bfa);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: kal-shimmer 2.8s linear infinite;
  transition: opacity .18s ease;
}
@keyframes kal-dot-pulse {
  0%, 80%, 100% { opacity: .25; transform: scale(.75); }
  40%           { opacity: 1;   transform: scale(1.15); }
}
@keyframes kal-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }

/* ─── Input Area ──────────────────────────────────────────────────────────── */
.input-area { padding: 16px 20px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.input-area .messages-inner-wrap { max-width: 760px; margin: 0 auto; }
.input-wrap {
  max-width: 760px; margin: 0 auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px;
  transition: border-color .2s;
}
.input-wrap:focus-within { border-color: var(--accent); }
.chat-textarea {
  flex: 1; background: none; color: var(--text); font-size: 15px;
  border: none; resize: none; max-height: 200px; line-height: 1.6;
  scrollbar-width: thin;
}
.chat-textarea::placeholder { color: var(--text3); }
.send-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--accent); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; margin-bottom: 1px;
}
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.send-btn:disabled { background: var(--bg4); color: var(--text3); cursor: not-allowed; }
.input-hint { text-align: center; font-size: 12px; color: var(--text3); margin-top: 8px; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ─── Auth ────────────────────────────────────────────────────────────────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 24px; text-align: center; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; font-weight: 500; }
.form-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 15px; transition: border-color .2s;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text3); }
.btn-submit { width: 100%; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 11px; font-size: 15px; font-weight: 600; transition: background .2s; }
.btn-submit:hover { background: var(--accent-hover); }
.auth-link { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text2); }
.auth-link a { color: var(--accent); font-weight: 500; }
.alert-err { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 16px; font-size: 14px; }

/* ─── Pricing Page ────────────────────────────────────────────────────────── */
.pricing-page { min-height: 100vh; background: var(--bg); padding: 40px 20px; }
.pricing-header { text-align: center; margin-bottom: 48px; }
.pricing-header h1 { font-size: 40px; font-weight: 800; margin: 16px 0 8px; }
.pricing-header p { color: var(--text2); font-size: 16px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; }
.pricing-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px; position: relative;
  transition: border-color .2s;
}
.pricing-card.featured { border-color: var(--accent); background: linear-gradient(160deg, var(--bg2), rgba(200,160,64,.06)); }
.pricing-card.current { border-color: var(--green); }
.plan-name { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.plan-price { font-size: 40px; font-weight: 800; margin-bottom: 24px; }
.plan-price span { font-size: 16px; font-weight: 400; color: var(--text2); }
.plan-features { list-style: none; font-size: 14px; color: var(--text2); margin-bottom: 28px; }
.plan-features li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.plan-features li:last-child { border: none; }
.plan-current-badge { text-align: center; color: var(--green); font-size: 14px; font-weight: 600; padding: 10px; border: 1px solid rgba(34,197,94,.3); border-radius: var(--radius-sm); }
.btn-plan-accent { width: 100%; background: var(--accent); color: #fff; padding: 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; transition: background .2s; display: block; text-align: center; }
.btn-plan-accent:hover { background: var(--accent-hover); }
.btn-plan-ghost { width: 100%; background: transparent; color: var(--text2); border: 1px solid var(--border); padding: 12px; border-radius: var(--radius-sm); font-size: 15px; display: block; text-align: center; transition: border-color .2s, color .2s; }
.btn-plan-ghost:hover { border-color: var(--text2); color: var(--text); }
.pricing-footer { text-align: center; margin-top: 40px; }
.pricing-footer a { color: var(--text2); font-size: 14px; }
.pricing-footer a:hover { color: var(--text); }

/* ─── Success Page ────────────────────────────────────────────────────────── */
.success-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.success-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 48px; text-align: center; max-width: 480px; }
.success-icon { font-size: 56px; margin-bottom: 16px; }
.success-card h1 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.success-card p { color: var(--text2); margin-bottom: 24px; }
.success-tier { display: inline-block; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; padding: 4px 20px; border-radius: 20px; margin-bottom: 28px; }

/* ─── Image Generation ────────────────────────────────────────────────────── */
.image-area { background: var(--bg); overflow-y: auto; padding: 0; }
.image-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--border); }
.image-header h2 { font-size: 22px; font-weight: 700; }
.image-usage { font-size: 13px; color: var(--text2); background: var(--bg3); padding: 4px 14px; border-radius: 20px; border: 1px solid var(--border); }

.image-generator { max-width: 720px; margin: 40px auto; padding: 0 20px; }
.image-prompt-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 16px;
  font-size: 15px; resize: none; transition: border-color .2s;
}
.image-prompt-input:focus { border-color: var(--accent); }
.image-prompt-input::placeholder { color: var(--text3); }
.btn-generate {
  margin-top: 12px; background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); padding: 12px 28px; font-size: 15px; font-weight: 600;
  transition: background .2s; width: 100%;
}
.btn-generate:hover { background: var(--accent-hover); }
.btn-generate:disabled { background: var(--bg4); color: var(--text3); }

.image-result { margin-top: 28px; }
.image-loading { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text2); }
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.image-output { text-align: center; }
.image-output img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.image-actions { margin-top: 16px; }

.image-history { max-width: 1100px; margin: 40px auto; padding: 0 20px 40px; }
.image-history h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--text2); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.image-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg2); border: 1px solid var(--border); }
.image-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.image-card-prompt { padding: 8px 10px; font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-card-dl { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; opacity: 0; transition: opacity .2s; }
.image-card:hover .image-card-dl { opacity: 1; }

/* ─── Admin ───────────────────────────────────────────────────────────────── */
.admin-page { min-height: 100vh; background: var(--bg); overflow-y: auto; }
.admin-header { display: flex; align-items: center; gap: 20px; padding: 20px 32px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.admin-header h1 { font-size: 24px; font-weight: 700; flex: 1; }
.admin-content { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 40px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-value, .stat-num { font-size: 36px; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 14px; color: var(--text2); margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--text3); margin-top: 4px; }
.admin-section { margin-bottom: 40px; }
.admin-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
/* position: relative — иначе .sr-only внутри таблицы (position:absolute) вылезает за прокрутку и расширяет страницу на телефоне */
.admin-table-wrap { overflow-x: auto; position: relative; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; padding: 10px 14px; background: var(--bg3); color: var(--text2); font-weight: 600; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.admin-table tr:hover td { background: rgba(255,255,255,.02); }
.tier-badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.tier-badge.tier-free { background: var(--bg4); color: var(--text2); }  /* text3 на bg4 — 4.45:1, ниже AA (axe, 02.10) */
.tier-badge.tier-pro { background: rgba(167,139,250,.2); color: #a78bfa; }
.tier-badge.tier-business { background: rgba(234,179,8,.15); color: var(--yellow); }
.mode-tag { font-size: 11px; background: var(--bg3); color: var(--text2); padding: 2px 10px; border-radius: 10px; }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Боковая панель на телефоне — выдвижная (ниже, «Mobile responsive»). Здесь до 07.10 жило правило
     старой нижней панели: flex-direction:row раскладывал выдвижную панель в ряд — список чатов
     пропадал, карточка пользователя уезжала вправо, а под полем ввода висели пустые 60px. */
  .landing-nav { padding: 16px 20px; }
  .hero { padding: 60px 20px; }
  .features { padding: 40px 20px; }
  .pricing-section { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KALORAD V8 — New UI Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar enhancements ────────────────────────────────────────────────── */
.sidebar-logo-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sidebar-close { display:none; background:none; color:var(--text3); font-size:16px; padding:4px 6px; border-radius:6px; }
.sidebar-close:hover { color:var(--text); background:var(--bg3); }
.chat-section-label { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px 4px; }

/* Sidebar search */
.conv-search-wrap { margin:8px 0 0; }
.conv-search {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm); padding:7px 10px;
  font-size:13px; transition:border-color .2s;
}
.conv-search:focus { border-color:var(--accent); outline:none; }
.conv-search::placeholder { color:var(--text3); }

/* Mobile sidebar toggle */
.sidebar-toggle {
  display:none; position:fixed; top:14px; left:14px; z-index:101;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
  border-radius:var(--radius-sm); padding:7px; cursor:pointer;
  transition:background .15s, color .15s;
}
.sidebar-toggle:hover { background:var(--bg3); color:var(--text); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:99; backdrop-filter:blur(2px);
}
.sidebar-overlay.visible { display:block; }

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; border-bottom:1px solid var(--border); gap:10px; flex-shrink:0; }
.toolbar-left { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.conv-mode-badge { font-size:14px; flex-shrink:0; }
.conv-title {
  font-size:14px; font-weight:600; color:var(--text); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; cursor:text;
  padding:3px 6px; border-radius:5px; transition:background .15s;
}
.conv-title:hover { background:var(--bg3); }
.conv-title-input {
  font-size:14px; font-weight:600; color:var(--text); background:var(--bg3);
  border:1px solid var(--accent); border-radius:5px; padding:3px 8px;
  outline:none; min-width:120px; max-width:300px;
}
.toolbar-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.toolbar-btn {
  background:none; color:var(--text2); border:1px solid transparent;
  border-radius:var(--radius-sm); padding:5px 9px; font-size:13px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.toolbar-btn:hover { background:var(--bg3); color:var(--text); border-color:var(--border); }
.toolbar-btn.active { background:var(--accent-light); color:var(--accent); border-color:rgba(200,160,64,.3); }
.toolbar-btn[download] { text-decoration:none; display:inline-flex; align-items:center; }

/* ─── Input area enhancements ─────────────────────────────────────────────── */
.input-icon-btn {
  width:32px; height:32px; border-radius:7px; flex-shrink:0; color:var(--text3);
  display:flex; align-items:center; justify-content:center; transition:color .15s, background .15s;
  background:none;
}
.input-icon-btn:hover { color:var(--text2); background:var(--bg3); }

/* Voice recording state */
.voice-btn.recording { color:var(--red); background:rgba(239,68,68,.1); animation:pulse-ring 1.2s infinite; }
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
  70%  { box-shadow:0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* File attachment preview */
.attach-preview { display:flex; gap:8px; padding:6px 0 0; max-width:760px; margin:0 auto; flex-wrap:wrap; }
.attach-chip {
  display:inline-flex; align-items:center; gap:6px; background:var(--bg3);
  border:1px solid var(--border); border-radius:20px; padding:4px 10px;
  font-size:12px; color:var(--text2);
}
.attach-remove {
  color:var(--text3); font-size:11px; line-height:1; padding:1px 3px;
  border-radius:3px; transition:color .1s;
}
.attach-remove:hover { color:var(--red); }

/* ─── Artifact Panel ──────────────────────────────────────────────────────── */
.artifact-panel {
  width: 480px; flex-shrink:0;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
  /* Hide by default via width trick for smooth animation */
  width:0; transition:width .25s cubic-bezier(.4,0,.2,1);
}
.artifact-panel.open { width:480px; }
.artifact-panel.fullscreen {
  position:fixed; inset:0; z-index:200; width:100% !important;
  border:none;
}

.artifact-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border);
  background:var(--bg2); flex-shrink:0; gap:8px;
}
.artifact-header-left { display:flex; align-items:center; gap:8px; min-width:0; }
.artifact-type-badge {
  font-size:11px; font-weight:600; background:var(--accent-light);
  color:var(--accent); border:1px solid rgba(200,160,64,.25);
  padding:2px 8px; border-radius:10px; white-space:nowrap;
}
.artifact-title-text {
  font-size:13px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.artifact-header-actions { display:flex; gap:4px; flex-shrink:0; }
.artifact-action-btn {
  background:none; color:var(--text3); border:none; padding:4px 7px;
  border-radius:5px; font-size:14px; cursor:pointer; transition:color .15s, background .15s;
}
.artifact-action-btn:hover { color:var(--text); background:var(--bg3); }

.artifact-content { flex:1; overflow:hidden; background:var(--bg); }
.artifact-content iframe { width:100%; height:100%; border:none; }

/* Artifact inline button in message */
.artifact-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text); border-radius:8px; padding:6px 12px;
  font-size:13px; cursor:pointer; margin:4px 0;
  transition:background .15s, border-color .15s;
}
.artifact-btn:hover { background:var(--bg3); border-color:var(--accent); }
.artifact-btn small { color:var(--accent); font-size:12px; }

/* ─── «Файл поруч із чатом» (C5, 09.10): Google Doc / Sheet / Slides + edits by «Так» ── */
.file-panel [hidden] { display:none !important; }
.file-panel .file-body { flex:1; overflow:auto; padding:16px 18px; background:var(--bg); }
.file-text { white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.65; color:var(--text); }
.file-grid { border-collapse:collapse; font-size:13px; }
.file-grid th, .file-grid td { border:1px solid var(--border); padding:4px 8px; text-align:left; white-space:nowrap;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.file-grid th { background:var(--bg2); color:var(--text2); font-weight:600; position:sticky; top:0; }
.file-grid tr th:first-child { position:sticky; left:0; }
.file-edit { border-top:1px solid var(--border); background:var(--bg2); padding:12px 14px; display:flex; flex-direction:column;
  gap:10px; max-height:55%; overflow:auto; flex-shrink:0; }
.file-edits { display:flex; flex-direction:column; gap:8px; }
.file-edits:empty { display:none; }
.fedit { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--bg); display:flex; flex-direction:column; gap:8px; }
.fedit.yes { border-color:rgba(34,197,94,.55); }
.fedit.no { opacity:.55; }
.fedit-diff { font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.fedit-diff del { color:var(--red); background:rgba(239,68,68,.08); }
.fedit-diff ins { color:var(--green); background:rgba(34,197,94,.08); text-decoration:none; }
.fedit-btns { display:flex; gap:6px; }
.fedit-btns button { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:4px 10px; border-radius:6px;
  border:1px solid var(--border); color:var(--text2); }
.fedit-btns .fedit-yes[aria-pressed="true"] { border-color:var(--green); color:var(--green); background:rgba(34,197,94,.1); }
.fedit-btns .fedit-no[aria-pressed="true"] { border-color:var(--red); color:var(--red); background:rgba(239,68,68,.1); }
.file-status { font-size:12.5px; color:var(--text2); white-space:pre-line; }
.file-status:empty { display:none; }
.file-status.bad { color:var(--red); }
.file-ask { width:100%; resize:vertical; min-height:44px; background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; font-size:14px; }
.file-ask:focus { border-color:var(--accent); }
.file-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.file-actions button:disabled { opacity:.5; cursor:not-allowed; }
.file-panel.busy .file-body { opacity:.7; }
.gfile-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.gfile-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:5px 10px; font-size:12.5px; transition:border-color .15s, background .15s; }
.gfile-chip:hover { border-color:var(--accent); background:var(--bg3); }

/* ─── Thinking blocks ─────────────────────────────────────────────────────── */
.thinking-block {
  background:rgba(200,160,64,.05); border:1px solid rgba(200,160,64,.15);
  border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden;
}
.thinking-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; cursor:pointer; user-select:none;
  font-size:12px; color:var(--text2); font-weight:600;
  transition:background .15s;
}
.thinking-header:hover { background:rgba(200,160,64,.08); }
.thinking-toggle { color:var(--accent); font-size:11px; transition:transform .2s; }
.thinking-block.collapsed .thinking-toggle { transform:rotate(-90deg); }
.thinking-content {
  padding:10px 12px; font-size:12px; color:var(--text2);
  line-height:1.65; border-top:1px solid rgba(200,160,64,.1);
}
.thinking-block.collapsed .thinking-content { display:none; }

/* ─── Code blocks with copy/run ─────────────────────────────────────────── */
.msg-content pre { position:relative; }
.code-action-btn {
  position:absolute; top:8px; right:8px;
  background:var(--bg4); color:var(--text2); border:1px solid var(--border);
  border-radius:5px; padding:3px 9px; font-size:11px; cursor:pointer;
  font-family:var(--font); transition:background .15s, color .15s;
  opacity:0; transition:opacity .15s, background .15s, color .15s;
}
.run-btn { right:72px; color:var(--green); border-color:rgba(34,197,94,.3); }
.run-btn:hover { background:rgba(34,197,94,.1); }
.msg-content pre:hover .code-action-btn { opacity:1; }
.code-action-btn:hover { background:var(--bg3); color:var(--text); }

/* Language badge */
.msg-content pre { padding-top:32px !important; }
.msg-content pre code.language-python::before { content:'Python'; }
.msg-content pre code.language-javascript::before { content:'JavaScript'; }
.msg-content pre code.language-typescript::before { content:'TypeScript'; }
.msg-content pre code.language-html::before { content:'HTML'; }
.msg-content pre code.language-css::before { content:'CSS'; }
.msg-content pre code.language-bash::before, .msg-content pre code.language-shell::before { content:'Shell'; }
.msg-content pre code.language-python::before,
.msg-content pre code.language-javascript::before,
.msg-content pre code.language-typescript::before,
.msg-content pre code.language-html::before,
.msg-content pre code.language-css::before,
.msg-content pre code.language-bash::before {
  position:absolute; top:8px; left:12px;
  font-size:10px; color:var(--text3); font-weight:600; letter-spacing:.05em;
  font-family:var(--font); text-transform:uppercase;
}

/* ─── Quick prompts (empty state) ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px 40px; max-width:700px; margin:0 auto; }
.empty-hero { margin-bottom:40px; }
.empty-logo-mark {
  width:56px; height:56px; border-radius:14px; display:block; margin:0 auto 16px;
  animation:float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.empty-title { font-size:clamp(22px,3vw,32px); font-weight:800; margin-bottom:10px;
  background:linear-gradient(135deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.empty-sub { font-size:15px; color:var(--text2); margin-bottom:0; }

.quick-prompts { margin-top:28px; }
.qp-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.qp-btn {
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text2); border-radius:10px; padding:12px 14px;
  font-size:13px; text-align:left; cursor:pointer; line-height:1.4;
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.qp-btn:hover { background:var(--bg3); border-color:var(--accent); color:var(--text); transform:translateY(-1px); }

.empty-state-mini { text-align:center; padding:60px 20px; color:var(--text2); font-size:15px; }

/* ─── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:300; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); padding:20px;
}
.modal-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:0; width:100%; max-width:520px;
  box-shadow:var(--shadow); overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:16px; font-weight:700; }
.modal-header button { color:var(--text3); font-size:16px; padding:4px 6px; border-radius:5px; transition:color .15s, background .15s; }
.modal-header button:hover { color:var(--text); background:var(--bg3); }
.modal-body { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
.modal-label { display:block; font-size:12px; color:var(--text2); font-weight:600; margin-bottom:6px; }
.modal-textarea {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13px; resize:vertical; line-height:1.6; transition:border-color .2s;
}
.modal-textarea:focus { border-color:var(--accent); outline:none; }
.modal-textarea::placeholder { color:var(--text3); }

/* Keyboard shortcuts table */
.shortcuts-table { width:100%; font-size:13px; border-collapse:collapse; }
.shortcuts-table tr { border-bottom:1px solid var(--border); }
.shortcuts-table tr:last-child { border:none; }
.shortcuts-table td { padding:9px 4px; }
.shortcuts-table td:first-child { width:140px; }
kbd {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:5px; padding:2px 7px; font-family:var(--font-mono);
  font-size:12px; color:var(--text); white-space:nowrap;
}

/* ─── Toast ────────────────────────────────────────────────────────────────── */
.kalorad-toast {
  position:fixed; bottom:24px; right:24px; z-index:999;
  padding:10px 18px; border-radius:10px; font-size:13px; color:var(--text);
  font-family:var(--font); pointer-events:none; opacity:0;
  transition:opacity .25s, transform .25s; transform:translateY(8px);
  background:var(--bg2); border:1px solid var(--border);
}
.kalorad-toast.visible { opacity:1; transform:translateY(0); }
.kalorad-toast.toast-success { background:#0d2a1a; border-color:#1a4a2a; color:#86efac; }
.kalorad-toast.toast-error   { background:#2a0d0d; border-color:#3a1010; color:#fca5a5; }

/* ─── Feedback copy button ────────────────────────────────────────────────── */
.fb-btn-copy {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:3px 10px; font-size:13px;
  cursor:pointer; color:var(--text2); transition:background .15s;
  margin-left:4px;
}
.fb-btn-copy:hover { background:var(--bg4); }

/* ─── Error message in chat ──────────────────────────────────────────────── */
.error-msg { color:var(--red); font-size:14px; }

/* ─── Artifact open — shrink chat on large screens ───────────────────────── */
@media (max-width:1200px) {
  .artifact-panel.open { width:420px; }
}

/* ─── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width:768px) {
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; z-index:102;   /* выше кнопки ☰ (101): открытая панель её закрывает */
    width:280px; transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:flex; }
  .sidebar-close { display:block; }
  .main-area { padding-top:0; }
  .toolbar { padding-left:52px; }
  .messages-inner { padding:16px 14px; }
  .input-area { padding:10px 14px; }
  .input-wrap { padding:10px 12px; }

  .artifact-panel.open {
    position:fixed; inset:0; width:100% !important;
    z-index:150;
  }
  .qp-row { grid-template-columns:1fr; }
}

/* ─── Input wrap focused state ──────────────────────────────────────────── */
.input-wrap.focused { border-color:var(--accent); }

/* ─── Edit user message + per-span feedback (2026-06-24) ─────────────────── */
.msg-user-actions { display:flex; gap:6px; margin-top:6px; opacity:0; transition:opacity .15s; }
.msg.user:hover .msg-user-actions { opacity:1; }
.msg-edit-btn {
  background:transparent; border:1px solid rgba(255,255,255,.12); color:#A39FCB;
  font-size:11.5px; padding:3px 9px; border-radius:6px; cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.msg-edit-btn:hover { border-color:#a78bfa; color:#F5EFE6; background:rgba(167,139,250,.08); }
.msg-edited-tag { margin-left:6px; font-size:11px; color:#8581B8; font-weight:400; }

.msg-edit-textarea {
  width:100%; box-sizing:border-box; resize:vertical;
  background:rgba(255,255,255,.04); border:1px solid rgba(167,139,250,.35);
  border-radius:10px; padding:10px 12px; color:#F5EFE6;
  font-family:inherit; font-size:14px; line-height:1.55; min-height:64px;
  margin-top:6px;
}
.msg-edit-textarea:focus { outline:none; border-color:#22d3ee; }
.msg-edit-bar { display:flex; gap:8px; margin-top:8px; }
.msg-edit-save, .msg-edit-cancel {
  font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:8px; cursor:pointer;
  border:1px solid transparent;
}
.msg-edit-save { background:linear-gradient(120deg,#a78bfa,#22d3ee); color:#0a0a12; }
.msg-edit-save:hover { transform:translateY(-1px); }
.msg-edit-save:disabled { opacity:.6; cursor:wait; transform:none; }
.msg-edit-cancel { background:transparent; color:#A39FCB; border-color:rgba(255,255,255,.12); }
.msg-edit-cancel:hover { color:#F5EFE6; border-color:rgba(255,255,255,.24); }

.msg-rate-hint {
  font-size:11px; color:#8581B8; margin-left:8px; align-self:center;
  user-select:none; pointer-events:none;
}

/* Floating popup above selected AI text */
.part-fb-popup {
  position:absolute; z-index:9999;
  display:flex; gap:2px; padding:4px;
  background:#0c0c14; border:1px solid #221B45; border-radius:10px;
  box-shadow:0 12px 38px -10px rgba(139,92,246,.55), 0 0 0 1px rgba(255,255,255,.04);
  animation:partFbIn .14s ease-out;
}
@keyframes partFbIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.part-fb-btn {
  background:transparent; border:none; color:#F5EFE6;
  font-size:17px; line-height:1; padding:6px 9px; border-radius:7px;
  cursor:pointer; transition:background .12s;
}
.part-fb-btn:hover { background:rgba(255,255,255,.07); }
.part-fb-btn:disabled { opacity:.55; cursor:default; }
.part-fb-ok  { color:#34d399; font-size:12.5px; font-weight:600; padding:6px 10px; }
.part-fb-err { color:#f87171; font-size:12.5px; font-weight:600; padding:6px 10px; }

/* ── Inline widgets: map + chart (§11.5 AI Trends) ─────────────────────── */
.k-widget {
  margin: 14px 0;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.k-widget-title {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid rgba(139,92,246,.18);
  background: rgba(139,92,246,.08);
}
.k-map-canvas   { height: 320px; width: 100%; background:#171331; }
.k-chart-canvas { height: 300px; width: 100%; padding: 14px; position: relative; }
.k-widget .leaflet-container { font: inherit; }
.k-widget .leaflet-popup-content { font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .k-map-canvas   { height: 240px; }
  .k-chart-canvas { height: 240px; }
}

/* ── Tone presets (instructions modal) ──────────────────────────────────── */
.tone-presets { display:flex; flex-wrap:wrap; gap:8px; }
.tone-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139,92,246,.35);
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tone-btn:hover  { background: rgba(139,92,246,.12); }
.tone-btn.active { background: rgba(139,92,246,.28); border-color:#E0B75A; font-weight:600; }

/* ── Weather widget ─────────────────────────────────────────────────────── */
.k-weather-body { padding: 14px 16px; }
.k-weather-now  { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.k-weather-icon { font-size: 38px; line-height:1; }
.k-weather-temp { font-size: 32px; font-weight: 700; }
.k-weather-meta { font-size: 12.5px; opacity:.75; line-height:1.5; }
.k-weather-days { display:flex; gap:8px; flex-wrap:wrap; }
.k-weather-day {
  flex:1; min-width:64px; text-align:center;
  padding:8px 6px; border-radius:10px;
  background: rgba(139,92,246,.07);
  border: 1px solid rgba(139,92,246,.14);
}
.k-weather-dow      { font-size:11.5px; text-transform:capitalize; opacity:.7; margin-bottom:2px; }
.k-weather-day-icon { font-size:22px; line-height:1.3; }
.k-weather-minmax   { font-size:12.5px; font-weight:600; margin-top:2px; }
.k-weather-precip   { font-size:11px; opacity:.75; min-height:14px; }
.k-weather-error    { opacity:.6; font-size:13px; }

/* ── Kalorad Router UI ──────────────────────────────────────────────────── */
.route-badge {
  display:inline-block; margin-left:8px; padding:2px 9px;
  border-radius:999px; font-size:11px; font-weight:600; vertical-align:middle;
}
.route-deliberate {
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.45);
  color: #E8CF8A;
}
.ai-escalate .ai-thinking-text { color:#a78bfa; }
.route-upsell {
  margin-top:10px; padding:8px 12px; border-radius:10px;
  font-size:12.5px; opacity:.85;
  background: rgba(139,92,246,.08);
  border: 1px dashed rgba(139,92,246,.35);
}
.route-upsell a { color:#a78bfa; font-weight:600; }
.route-deeper-btn {
  margin-top:8px; padding:5px 12px; border-radius:999px;
  font-size:12px; cursor:pointer; color:inherit;
  background: transparent; border: 1px solid rgba(139,92,246,.35);
  transition: background .15s;
}
.route-deeper-btn:hover:not(:disabled) { background: rgba(139,92,246,.12); }
.route-deeper-btn:disabled { opacity:.45; cursor:default; }


/* ── Synapse palette (2026-09-19): gold accent needs dark text on accent backgrounds ── */
.btn-accent,
.plan-badge,
.lock-badge,
.btn-memory-save,
.msg.user .msg-icon,
.cursor,
.ai-thinking-dots .dot,
.send-btn,
.btn-submit,
.btn-plan-accent,
.success-tier,
.btn-generate { color: #1A1405; }
h1, h2, .kl-h1 { font-family: var(--font-display); letter-spacing: -.02em; }

/* Account settings → Privacy (training opt-out) */
.profile-toggle { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.profile-toggle input { margin-top: .25rem; flex-shrink: 0; }
.profile-hint { font-size: .8rem; opacity: .7; margin-top: .35rem; min-height: 1em; }

/* Текст только для экранных читалок (29.09) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ключи API в профиле (29.09) */
.modal-input { width:100%; min-width:0; background:var(--bg3); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; transition:border-color .2s; }
.modal-input:focus { border-color:var(--accent); outline:none; }
.modal-input::placeholder { color:var(--text3); }
#api-keys .profile-hint { opacity:1; color:var(--text2); line-height:1.6; }
.api-base { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:var(--bg3);
  border:1px solid var(--border); border-radius:6px; padding:1px 6px; overflow-wrap:anywhere; }
.api-docs { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.api-key-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.api-key-list:empty { display:none; }
.api-key-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg3); font-size:13px; }
.api-key-item .k-main { flex:1; min-width:0; }
.api-key-item .k-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-key-item .k-meta { color:var(--text2); font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-key-item.revoked { opacity:.55; }
.api-key-new, .api-key-once-row { display:flex; gap:8px; margin-top:10px; }
.api-key-new .btn-accent, .api-key-once-row .btn-ghost { flex:none; white-space:nowrap; }
.api-key-once { margin-top:10px; padding:10px; border:1px dashed var(--accent); border-radius:var(--radius-sm); }
#apiKeyRaw { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (max-width:480px) { .api-key-new { flex-direction:column; } }

/* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16px: вёрстка «уезжает», а в
   приложении кнопка ⚙ заезжает на строку состояния. На телефонах поля — не меньше 16px (29.09). */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]), textarea, select,
  .form-input, .chat-textarea, .modal-textarea, .modal-input, .memory-textarea { font-size: 16px !important; }
}

/* Нумерованные списки в ответах модели: номер внутри блока — длинный номер («19600.») не вылезает за край (30.09) */
.markdown ol { list-style-position: inside; padding-left: 0; }

/* ── Agent: skills, tools, «Так / Ні» (docs/PLAN_2026-10-07_agent_platform.md) ─────────────── */
.agent-trace { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
.agent-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:12px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-skill { border-color:rgba(232,207,138,.45); color:#E8CF8A; background:rgba(232,207,138,.08); }
.agent-tool.running { animation: agentPulse 1.2s ease-in-out infinite; }
.agent-tool.ok { border-color:rgba(74,222,128,.35); }
.agent-tool.fail, .agent-decision.fail { border-color:rgba(248,113,113,.45); color:#fca5a5; }
.agent-decision.ok { border-color:rgba(74,222,128,.35); color:#86efac; }
@keyframes agentPulse { 50% { opacity:.55; } }
.agent-approval { margin-top:10px; padding:12px 14px; border-radius:12px; background:rgba(139,92,246,.07);
  border:1px solid rgba(139,92,246,.35); font-size:13.5px; }
.agent-approval-head { line-height:1.5; }
.agent-risk { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; background:var(--bg3); color:var(--text2); }
.agent-risk-external, .agent-risk-destructive { background:rgba(248,113,113,.12); color:#fca5a5; }
.agent-args { margin:8px 0 2px; display:grid; gap:4px; }
.agent-arg { display:grid; grid-template-columns:minmax(70px,auto) 1fr; gap:10px; font-size:12.5px; }
.agent-arg-key { color:var(--text3); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-arg-val { white-space:pre-wrap; word-break:break-word; color:var(--text); }
.agent-why { margin-top:8px; font-size:12.5px; color:#fcd34d; }
.agent-approval-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:13px; color:var(--text2); }
.agent-btn { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); cursor:pointer; font-size:13px; }
.agent-btn:hover { background:var(--bg2); }
.agent-yes { background:#C9A646; border-color:#C9A646; color:#1a1406; font-weight:600; }
.agent-yes:hover { background:#d6b453; }
.slash-menu { max-width:760px; margin:0 auto 6px; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.35); max-height:280px; overflow:auto; }
.slash-item { display:grid; grid-template-columns:auto 1fr; column-gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; }
.slash-item.active, .slash-item:hover { background:var(--bg3); }
.slash-key { color:#E8CF8A; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.slash-name { color:var(--text); font-size:13px; }
.slash-desc { grid-column:1 / -1; color:var(--text3); font-size:12px; margin-top:2px; }
.tools-btn.on { color:#E8CF8A; background:rgba(232,207,138,.10); }

/* ── Share chat modal ─────────────────────────────────────────────────────── */
.share-modal { max-width: 520px; width: calc(100% - 32px); }
.share-modal .modal-body { display: grid; gap: 12px; }
.share-note { color: var(--text2); font-size: 13.5px; line-height: 1.5; }
.share-link { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Model picker (LMK 1 / LMK 2) ─────────────────────────────────────────── */
.model-picker { position: relative; margin-left: 10px; flex: none; }
.model-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.model-btn:hover { border-color: rgba(200,160,64,.45); }
.model-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 260px; padding: 4px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.4); display: grid; gap: 2px; }
.model-menu[hidden], .model-opt[hidden], .model-section[hidden] { display: none; }   /* .model-opt is a grid — [hidden] alone lost */
.model-opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: none; border: 0; color: var(--text); cursor: pointer; }
.model-opt:hover, .model-opt.on { background: var(--bg3); }
.model-opt.on .model-name::after { content: ' ✓'; color: #E8CF8A; }
.model-opt[data-state="soon"] { opacity: .55; cursor: default; }
.model-name { font-weight: 650; font-size: 13.5px; }
.model-desc { grid-column: 1; color: var(--text3); font-size: 12px; }
.model-opt .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text2); }

/* ── Search over chats ────────────────────────────────────────────────────── */
.search-results { padding: 4px 8px 12px; overflow-y: auto; flex: 1; }
.search-hit { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.search-hit:hover { background: var(--bg3); }
.search-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-snippet { font-size: 12px; color: var(--text3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-results mark { background: rgba(232,207,138,.25); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 10px; color: var(--text3); font-size: 13px; }
.model-section { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.model-section:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; }
/* Проєкти (C5): sidebar block, chip in the toolbar, move menu */
.proj-nav { display: grid; gap: 1px; margin-bottom: 8px; }
.proj-nav-head { display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.proj-nav-head:hover { color: var(--text); }
.proj-nav-item { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text2); font-size: 14px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-nav-item:hover, .proj-nav-item.active { background: var(--bg3); color: var(--text); }
.proj-nav-new { color: var(--text3); }
.proj-chip { margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text2); font-size: 13px;
  text-decoration: none; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; flex: none; }
.proj-chip:hover { border-color: rgba(200,160,64,.45); color: var(--text); }
.proj-picker { margin-left: 0; }
.proj-picker .model-menu { left: auto; right: 0; }
a.model-opt { text-decoration: none; color: inherit; }
@media (max-width: 640px) { .proj-chip { display: none; } }
/* ⏰ Задачі за розкладом (C6) */
#scheduleModal .modal-body { display: grid; gap: 8px; }
.sched-list { display: grid; gap: 6px; }
.sched-list:not(:empty) { margin-bottom: 8px; }
.sched-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); }
.sched-item.off { opacity: .6; }
.sched-main { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13px; color: var(--text2); }
.sched-main b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sched-when label { display: grid; min-width: 0; }
.sched-when select:disabled { opacity: .5; }
.sched-tg { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); margin-top: 4px; }
.sched-hint { font-size: 12.5px; color: var(--text3); }
@media (max-width: 480px) { .sched-when { grid-template-columns: 1fr 1fr; } .sched-when label:last-child { grid-column: 1 / -1; } }
/* Phone toolbar (07.10): one row — title, model and «⋯»; pin, share, schedule, project, export and instructions live
   in «⋯» (tb-narrow), the wide toolbar keeps them as icons (tb-wide). A second row of seven icons looked cheap. */
.tb-narrow { display: none !important; }
@media (max-width: 640px) {
  .toolbar-actions .tb-wide { display: none !important; }
  .model-opt.tb-narrow { display: grid !important; }
  .more-picker.tb-narrow { display: block !important; }
  .toolbar-left { min-width: 0; flex: 1 1 auto; }
}

/* ═══ Calm — дизайн 07.10 (вариант B + линейные значки) ════════════════════════════════════════════════════
   Как Claude/ChatGPT: панели без обводок, отделены тоном; больше воздуха; золото — только «Надіслати» и активное.
   Значки — один линейный набор (Icons.I в Razor, icon() в JS, спрайт wwwroot/icons/lucide.svg); эмодзи в интерфейсе нет.
   Правила ниже переопределяют старые выше — при чистке их можно слить. */
:root { --bg: #0B0912; --bg2: #100D18; --bg3: #191524; --bg4: #231E31; --border: #241F33; --text3: #807BAA; }

.ic { width: 1.125em; height: 1.125em; display: inline-block; vertical-align: -0.18em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 1em; height: 1em; vertical-align: -0.14em; }

/* Боковая панель */
.sidebar { background: var(--bg2); border-right: none; }
.sidebar-header { border-bottom: none; padding: 14px 10px 8px; }
.sidebar-close { display: none; align-items: center; justify-content: center; color: var(--text3); padding: 6px; border-radius: 8px; }
.btn-new-chat { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: transparent; border: none;
  color: var(--text); font-weight: 500; padding: 8px 10px; }
.btn-new-chat:hover { background: var(--bg3); color: var(--text); }
.btn-new-chat .ic { color: var(--text2); }
.conv-search-wrap { position: relative; margin-top: 4px; }
.conv-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.conv-search { width: 100%; padding-left: 34px !important; background: var(--bg3); border: 1px solid transparent; }
.conv-search:focus { border-color: var(--border); }
.chat-list { padding: 4px 10px 10px; }
.mode-selector { margin: 4px 0 2px; gap: 1px; }
.mode-btn { gap: 10px; border: none; padding: 7px 10px; }
.mode-btn.active { background: var(--bg3); color: var(--text); border-color: transparent; }
.mode-icon { width: auto; display: inline-flex; color: var(--text3); font-size: 15px; }
.mode-btn.active .mode-icon, .mode-btn:hover .mode-icon { color: var(--text2); }
.mode-tools-caret { display: inline-flex; color: var(--text3); }
.lock-badge { background: transparent; color: var(--text3); border: 1px solid var(--border); }
/* «Чат | Код» (08.10, docs/PLAN_2026-10-08_nav_simple.md N1) — like Claude's switch: the list shows one space */
.space-switch { display: flex; gap: 2px; padding: 3px; margin: 6px 0 2px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 11px; }
.space-switch a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 32px; border-radius: 8px;
  color: var(--text3); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.space-switch a:hover { color: var(--text); }
.space-switch a.on { background: var(--bg4); color: var(--text); }
.space-switch .lock-badge { margin-left: 2px; }
.side-nav { display: grid; gap: 1px; margin: 0 0 14px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text2); font-size: 13px; text-decoration: none; }
.side-link .ic { color: var(--text3); font-size: 15px; }
.side-link:hover { background: var(--bg3); color: var(--text); }
.side-link:hover .ic { color: var(--text2); }
.chat-section-label { padding: 10px 10px 4px; letter-spacing: .08em; }
.proj-nav-head { gap: 4px; }
.chat-item { padding: 7px 10px; margin-bottom: 1px; }
.chat-item-delete { display: inline-flex; padding: 3px; }
.sidebar-footer { border-top: none; padding: 8px 10px 10px; }
.user-badge-btn { background: transparent; border-color: transparent; }
.user-badge-btn:hover { background: var(--bg3); border-color: transparent; }
.user-gear { display: inline-flex; }
.user-tokens-mini .ic { color: var(--text3); }

/* Верхняя панель */
.toolbar { border-bottom: none; padding: 10px 20px; }
.toolbar-actions { gap: 2px; }
.toolbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text3);
  padding: 7px; font-size: 15px; border: none; }
.toolbar-btn:hover { color: var(--text); background: var(--bg3); }
.toolbar-btn.active { color: var(--gold-2); background: transparent; }
.conv-mode-badge { display: inline-flex; color: var(--text3); }
.model-btn { border: none; background: transparent; color: var(--text2); gap: 6px; }
.model-btn:hover { background: var(--bg3); color: var(--text); }
.proj-chip { border: none; background: var(--bg3); display: inline-flex; align-items: center; gap: 6px; }
.model-menu { background: var(--bg3); border-color: var(--border); }
.model-opt:hover, .model-opt.on { background: var(--bg4); }
.model-name { display: inline-flex; align-items: center; gap: 8px; }
.more-picker { margin-left: 0; }
.more-picker .model-menu { left: auto; right: 0; min-width: 280px; }

/* Сообщения */
.msg { border-bottom: none; padding: 14px 0; }
.msg.user .msg-icon { background: var(--bg4); color: var(--text2); }
.msg-name { color: var(--text3); }
.msg.user .msg-name { color: var(--text2); }
.msg-feedback { gap: 2px; margin-top: 6px; align-items: center; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-feedback, .msg:last-child .msg-feedback, .msg-feedback:focus-within { opacity: 1; }
@media (hover: none) { .msg-feedback { opacity: 1; } .msg-rate-hint { display: none; } }
/* 08.10: «Enter — надіслати · Shift+Enter…» means nothing on a phone and took two lines */
@media (hover: none), (max-width: 640px) { .input-hint { display: none; } }
.fb-btn, .fb-btn-copy { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none;
  color: var(--text3); padding: 6px; border-radius: 8px; font-size: 15px; }
.fb-btn:hover, .fb-btn-copy:hover { background: var(--bg3); color: var(--text); }
.fb-btn.active { background: transparent; color: var(--gold-2); border: none; }
.msg-rate-hint { margin-left: 6px; }
.msg-edit-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; }
.msg-edit-btn:hover { background: var(--bg3); }
.thinking-header span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.thinking-toggle { display: inline-flex; font-size: 13px; }
.thinking-toggle .ic { transition: transform .2s; }
.thinking-block.collapsed .thinking-toggle { transform: none; }
.thinking-block.collapsed .thinking-toggle .ic { transform: rotate(-90deg); }
.artifact-btn { display: inline-flex; align-items: center; gap: 8px; }
.route-badge, .route-deeper-btn, .route-upsell { display: inline-flex; align-items: center; gap: 5px; }
.agent-chip { display: inline-flex; align-items: center; gap: 5px; }

/* Пустой чат */
.qp-btn { display: flex; align-items: center; gap: 10px; border-color: transparent; background: var(--bg2); text-align: left; }
.qp-btn .ic { color: var(--text3); font-size: 16px; }
.qp-btn:hover { border-color: transparent; background: var(--bg3); transform: none; }
.qp-btn:hover .ic { color: var(--gold-2); }

/* Поле ввода: золото — только кнопка «Надіслати» */
.input-area { border-top: none; background: transparent; padding: 6px 20px 14px; }
.input-wrap { background: var(--bg3); border: 1px solid transparent; border-radius: 18px; }
.input-wrap:focus-within, .input-wrap.focused { border-color: var(--border); }
.input-icon-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text3); font-size: 17px; }
.send-btn { display: inline-flex; align-items: center; justify-content: center; color: #16110a; font-size: 17px; }
.input-hint { font-size: 11.5px; opacity: .8; }
@media (hover: none), (max-width: 640px) { .input-hint { display: none; } }
.attach-chip, .attach-remove { display: inline-flex; align-items: center; gap: 6px; }

/* Окна и профиль */
.modal-header h3 { display: flex; align-items: center; gap: 8px; }
.modal-header h3 .ic { color: var(--text3); }
.modal-header button { display: inline-flex; align-items: center; justify-content: center; }
.profile-section-title { display: flex; align-items: center; gap: 6px; }
.profile-link, .btn-upgrade, .btn-logout { display: flex; align-items: center; gap: 8px; }
.profile-link .ic { color: var(--text3); }
.artifact-action-btn { display: inline-flex; align-items: center; justify-content: center; }
.wheel-fab-icon, .wheel-toast-icon { display: inline-flex; color: var(--gold-2); }
.wheel-fab-icon .ic { width: 26px; height: 26px; }
.wheel-toast-icon .ic { width: 22px; height: 22px; }

@media (max-width: 768px) { .sidebar-close { display: inline-flex; } }
@media (max-width: 640px) {
  .proj-chip { display: none; }                                     /* the calm rule above re-showed it on phones */
  .conv-title { min-width: 0; flex: 1 1 auto; }
}
/* Аватар в цветах сайта (владелец, 07.10): тёмно-фиолетовый круг, золотая буква, тонкое золотое кольцо — без радуги */
.user-avatar, .msg.user .msg-icon {
  background: radial-gradient(120% 120% at 30% 20%, #2C2546 0%, #1B1629 70%);
  color: var(--gold-2) !important; box-shadow: inset 0 0 0 1px rgba(224,183,90,.38); font-weight: 600;
}
.msg-source { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--text3); }
/* Status dots (instead of ●/○), a spinning loader, aspect-ratio shapes, the wheel's hub icon */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.dot.on { background: currentColor; }
.ic-spin { animation: ic-spin 1s linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
.dim-icon { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; margin-right: 6px; vertical-align: -2px; opacity: .8; }
.dim-1x1 { width: 12px; height: 12px; } .dim-3x4 { width: 10px; height: 13px; } .dim-4x3 { width: 14px; height: 10px; } .dim-9x16 { width: 8px; height: 14px; }
.wheel-hub-ic { color: #E0B75A; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ Тарифы — calm (07.10, владелец: «разбавить»): подпись тарифа, возможности со значками, таблица, вопросы ═══ */
.pricing-page { padding: 32px 20px 48px; }
.pricing-note { max-width: 780px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 12px; background: var(--bg3); color: var(--text2);
  font-size: 14px; display: flex; gap: 8px; align-items: center; }
.pricing-header { margin-bottom: 36px; }
.pricing-header h1 { font-family: var(--font-display); letter-spacing: -.02em; }
.pricing-header p { max-width: 560px; margin: 0 auto; }
.pricing-grid { max-width: 1040px; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid transparent;
  border-radius: 18px; padding: 26px 24px 22px; }
.pricing-card.featured { border-color: rgba(224,183,90,.55); background: var(--bg2); box-shadow: 0 0 0 1px rgba(224,183,90,.12), 0 18px 50px rgba(0,0,0,.35); }
.pricing-card.current { border-color: var(--border); }
.pricing-card.featured.current { border-color: rgba(224,183,90,.55); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--gold-2); color: #16110a;
  font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.plan-name { font-size: 20px; margin-bottom: 2px; }
.plan-tagline { color: var(--text3); font-size: 13.5px; margin-bottom: 14px; }
.plan-price { font-family: var(--font-display); font-size: 42px; margin-bottom: 18px; letter-spacing: -.02em; }
.plan-points { list-style: none; display: grid; gap: 10px; margin: 0 0 22px; font-size: 14px; color: var(--text); }
.plan-points li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.plan-points li .ic { color: var(--gold-2); margin-top: 2px; }
.plan-points .plan-inherit { color: var(--text3); font-size: 13px; }
.plan-points .plan-inherit .ic { color: var(--text3); }
.plan-cta { margin-top: auto; }
.plan-current-badge { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text2);
  border: 1px solid var(--border); background: transparent; }
.btn-plan-accent { color: #16110a; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-plan-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--border); }

.pricing-compare, .pricing-faq { max-width: 1040px; margin: 56px auto 0; }
.pricing-compare h2, .pricing-faq h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.compare-wrap { overflow-x: auto; border-radius: 16px; background: var(--bg2); }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.compare th, .compare td { padding: 11px 16px; text-align: center; border-bottom: 1px solid var(--bg3); }
.compare thead th { font-size: 13px; color: var(--text2); font-weight: 600; padding-top: 16px; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--text); }
.compare .feat { display: flex; align-items: center; gap: 10px; }
.compare th[scope=row], .compare thead th:first-child { position: sticky; left: 0; background: var(--bg2); z-index: 1; }
@media (max-width: 640px) {
  .compare { min-width: 520px; font-size: 13px; }
  .compare th, .compare td { padding: 10px 10px; }
  .compare th[scope=row] { min-width: 150px; max-width: 170px; }
}
.compare tbody th .ic { color: var(--text3); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare .col-pro { background: rgba(224,183,90,.05); }
.compare thead .col-pro { color: var(--gold-2); }
.compare .yes { color: var(--gold-2); display: inline-flex; }
.compare .no { color: var(--text3); }
.compare td { color: var(--text2); }
.compare-note { color: var(--text3); font-size: 12.5px; margin-top: 10px; text-align: center; }
.pricing-faq details { background: var(--bg2); border-radius: 14px; padding: 14px 18px; margin-bottom: 8px; }
.pricing-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::after { content: ""; width: 7px; height: 7px; margin-top: 6px; flex: none; border-right: 1.5px solid var(--text3);
  border-bottom: 1.5px solid var(--text3); transform: rotate(45deg); transition: transform .15s; }
.pricing-faq details[open] summary::after { transform: rotate(-135deg); }
.pricing-faq p { color: var(--text2); margin-top: 10px; font-size: 14px; line-height: 1.6; }
.pricing-extras { max-width: 1040px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pricing-extra { background: var(--bg2); border-radius: 16px; padding: 22px; }
.extra-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.extra-text { color: var(--text2); font-size: .85rem; margin: 6px 0 14px; }
.pricing-footer a { display: inline-flex; align-items: center; gap: 6px; }
.period-switch { display: flex; gap: 4px; width: max-content; margin: -16px auto 28px; padding: 4px; border-radius: 999px; background: var(--bg2); }
.period-switch button { padding: 8px 18px; border-radius: 999px; color: var(--text2); font-size: 14px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.period-switch button.on { background: var(--bg4); color: var(--text); }
.period-switch .save { font-size: 11.5px; font-weight: 700; color: #16110a; background: var(--gold-2); padding: 1px 7px; border-radius: 999px; }
.plan-yearly-note { color: var(--text3); font-size: 13px; margin: -12px 0 16px; }

/* ask_user (08.10): questions with ready answers, one at a time — steps on top, numbered answers, «Інше» */
.agent-questions { margin-top:10px; padding:12px 14px 12px; border-radius:12px; background:rgba(139,92,246,.07);
  border:1px solid rgba(139,92,246,.35); font-size:13.5px; display:grid; gap:10px; max-width:560px; }
.agent-questions:focus { outline:none; }
.aq-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.aq-title { display:inline-flex; align-items:center; gap:6px; color:var(--text2); font-size:12.5px; }
.aq-count { font-size:12px; color:var(--text3); font-variant-numeric:tabular-nums; }
.aq-steps { display:flex; flex-wrap:wrap; gap:6px; }
.aq-steps[hidden] { display:none; }
.aq-step { padding:2px 10px; border-radius:999px; font-size:11.5px; background:var(--bg3); border:1px solid var(--border);
  color:var(--text3); cursor:pointer; font:inherit; font-size:11.5px; }
.aq-step.current { color:var(--text); border-color:rgba(201,166,70,.6); background:rgba(201,166,70,.10); }
.aq-step.done { color:#86efac; border-color:rgba(74,222,128,.35); }
.aq-body { display:grid; gap:8px; animation: aqIn .18s ease-out; }
@keyframes aqIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.aq-q { font-weight:600; font-size:14.5px; line-height:1.45; color:var(--text); }
.aq-multi { font-size:11.5px; color:var(--text3); margin-top:-4px; }
.aq-opts { display:grid; gap:6px; }
.aq-opt { display:flex; align-items:flex-start; gap:10px; text-align:left; padding:8px 11px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg3); color:var(--text); cursor:pointer; font:inherit; line-height:1.35; }
.aq-opt:hover { background:var(--bg2); }
.aq-opt.selected { border-color:#C9A646; background:rgba(201,166,70,.12); }
.aq-opt:focus { outline:none; }
.aq-opt:focus-visible { outline:2px solid rgba(201,166,70,.55); outline-offset:1px; }
.aq-key { flex:none; width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text3); border:1px solid var(--border); margin-top:1px; font-variant-numeric:tabular-nums; }
.aq-opt.selected .aq-key { color:#1a1406; background:#C9A646; border-color:#C9A646; }
.aq-text { display:grid; gap:2px; }
.aq-label { font-size:13.5px; }
.aq-desc { font-size:11.5px; color:var(--text3); }
.aq-other { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font:inherit; font-size:13px; }
.aq-other:focus { outline:none; border-color:rgba(139,92,246,.6); }
.aq-actions { display:flex; align-items:center; gap:8px; }
.aq-gap { flex:1; }
.aq-back[hidden] { display:none; }
.aq-back { display:inline-flex; align-items:center; gap:4px; }
.aq-next:disabled { opacity:.45; cursor:default; }
@media (max-width: 640px) { .agent-questions { max-width:none; } }

/* self-check chip (08.10): checked / fixed / notes */
.agent-verify.ok { border-color:rgba(74,222,128,.30); color:#86efac; }
.agent-verify.fixed { border-color:rgba(201,166,70,.55); color:#E8CF8A; background:rgba(201,166,70,.08); }
.agent-verify.warn { border-color:rgba(251,191,36,.45); color:#fcd34d; }
.agent-verify.running { animation: agentPulse 1.2s ease-in-out infinite; }
.agent-verify[title] { cursor:help; }
a.agent-verify { text-decoration:none; }
a.agent-verify:hover { filter:brightness(1.15); }

/* ── «+» in the input (08.10, docs/PLAN_2026-10-08_nav_simple.md N2) ─────────────────────────────────────────
   One menu instead of a row of buttons: files, skills (built-in and mine), connectors, schedule, media. */
.plus-wrap { position: relative; flex: none; }
.plus-btn { color: var(--text2); background: var(--bg3); }
.plus-btn[aria-expanded="true"] { color: var(--gold-2); background: var(--bg4); }
.plus-menu { top: auto; bottom: calc(100% + 12px); left: -4px; min-width: 250px; }
.plus-menu .model-opt { grid-template-columns: 1fr auto; align-items: center; }
.plus-menu .model-name { font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.plus-menu .model-name .ic-sm { color: var(--text2); }
.plus-sub { position: relative; }
.plus-sub > .model-opt { width: 100%; }
.plus-caret { color: var(--text3); }
.plus-submenu { position: absolute; left: calc(100% + 8px); bottom: -6px; min-width: 240px; padding: 4px; border-radius: 12px; display: grid; gap: 2px;
  background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 51; }
.plus-submenu[hidden] { display: none; }
.plus-submenu .model-section:first-child { border-top: 0; margin-top: 0; }
.plus-sep { height: 1px; background: var(--border); margin: 4px 8px; }
.plus-toggle { width: 30px; height: 18px; border-radius: 999px; background: var(--bg4); position: relative; transition: background .15s; }
.plus-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text3); transition: left .15s, background .15s; }
.plus-menu [data-plus="tools"].on { background: none; }
.plus-menu [data-plus="tools"].on:hover { background: var(--bg3); }
.plus-menu [data-plus="tools"].on .model-name::after { content: none; }
.plus-menu [data-plus="tools"].on .plus-toggle { background: var(--gold); }
.plus-menu [data-plus="tools"].on .plus-toggle::after { left: 15px; background: #140f05; }
.plus-menu .model-opt:disabled { opacity: .5; cursor: not-allowed; }
#fileBtn { display: none; }                                  /* «Додати файли» in «+» clicks the same input */
.tools-btn[aria-pressed="false"] { display: none; }         /* 🔌 shows only while tools are on — a quick way off */
@media (max-width: 640px) {
  .plus-submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }
  .plus-menu { min-width: min(300px, calc(100vw - 32px)); }
}

/* ── account pages (08.10, docs/PLAN_2026-10-08_account_security.md): confirm, reset, 2FA ─────────────────── */
/* «Продовжити з Google / Apple / Microsoft / GitHub» (08.10) */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--text2); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-external { display: grid; gap: 0; }
.btn-external { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; font-size: 14px; font-weight: 500; transition: border-color .2s; }
.btn-external:hover { border-color: var(--accent); }
.btn-external svg { flex: none; }
.auth-card .alert-ok { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.30); color: #86efac; border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 16px; font-size: 14px; }
.auth-text { color: var(--text2); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; text-align: center; }
.auth-text strong { color: var(--text); word-break: break-all; }
.auth-muted { color: var(--text3); font-size: 13px; }
.auth-check { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.auth-check label { font-size: 13px; color: var(--text2); cursor: pointer; }
.auth-resend { text-align: center; margin: -6px 0 14px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: underline; }
.auth-card form + form, .auth-card .btn-submit { margin-top: 8px; }