@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg: #0a0a0f;
  --bg-2: #13131b;
  --bg-3: #1c1c28;
  --bg-4: #252535;
  --border: #2a2a3a;
  --border-hi: #3a3a4e;
  --text: #e8e8f0;
  --text-dim: #8a8aa0;
  --text-mute: #5a5a70;
  --accent: #d4ff3a;
  --claude: #da7756;
  --openai: #10a37f;
  --gemini: #4285f4;
  --perplexity: #20b8cd;
  --council: #d4ff3a;
  --danger: #ff5570;
  --ok: #4ade80;
  --warn: #ffb347;

  --level-0: #6a6a80;
  --level-1: #d4d600;
  --level-2: #ff9500;
  --level-3: #ff3030;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; position: relative; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.04; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.screen { display: none; flex-direction: column; flex: 1; height: 100%; position: relative; overflow: hidden; }
.screen.active { display: flex; }

header { padding: calc(var(--safe-top) + 14px) 16px 14px; background: rgba(10,10,15,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; z-index: 10; position: relative; }
.back-btn { background: transparent; border: none; color: var(--text-dim); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.back-btn:active { background: var(--bg-3); }
.header-title { flex: 1; min-width: 0; overflow: hidden; }
.header-title .main { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-title .sub { font-family: var(--mono); font-size: 10px; color: var(--text-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-dot { display: inline-block; width: 10px; height: 10px; min-width: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(116,49,143,.10); animation: pulse 2s ease-in-out infinite; margin: 0 6px 0 1px; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.header-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.header-btn:active { transform: scale(0.94); }
.header-btn.ghost { border: none; }

/* LIST */
.chat-list { flex: 1; overflow-y: auto; padding: 8px 0 120px; }
.chat-list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 30px; text-align: center; color: var(--text-mute); min-height: 60vh; }
.chat-list-empty .icon-wrap { width: 90px; height: 90px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 20px; filter: drop-shadow(0 0 20px rgba(212,255,58,0.2)); }
.chat-list-empty .icon-wrap svg { width: 42px; height: 42px; }
.chat-list-empty h2 { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--text); margin-bottom: 8px; font-weight: 400; }
.chat-list-empty p { font-size: 14px; max-width: 260px; line-height: 1.6; }

.chat-item { border-bottom: 1px solid var(--border); cursor: pointer; position: relative; overflow: hidden; transition: background 0.12s; }
.chat-item:active .chat-item-inner { background: var(--bg-2); }
.chat-avatars { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.chat-avatars.single .avatar.pos-1 { width: 44px; height: 44px; top: 0; left: 0; }
.avatar { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-3); border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; color: var(--color); filter: drop-shadow(0 0 4px var(--color)); }
.avatar svg { width: 60%; height: 60%; }
.avatar.pos-1 { top: 0; left: 0; }
.avatar.pos-2 { top: 0; right: 0; }
.avatar.pos-3 { bottom: 0; left: 0; }
.avatar.pos-4 { bottom: 0; right: 0; }
.chat-meta { flex: 1; min-width: 0; }
.chat-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.chat-preview { font-size: 12px; color: var(--text-mute); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.chat-mode-badge { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; background: var(--bg-3); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; flex-shrink: 0; }
.chat-mode-badge.council { background: rgba(212,255,58,0.1); color: var(--accent); }
.chat-time { font-family: var(--mono); font-size: 10px; color: var(--text-mute); flex-shrink: 0; margin-left: 10px; }

.fab { position: fixed; bottom: calc(24px + var(--safe-bot)); right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #000; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(212,255,58,0.45); cursor: pointer; z-index: 20; }
.fab:active { transform: scale(0.94); }

/* NEW CHAT */
.new-chat-body { flex: 1; overflow-y: auto; padding: 20px 16px 140px; }
.section-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-mute); margin-bottom: 12px; margin-top: 4px; }
.section-label.spaced { margin-top: 28px; }
.mt-16 { margin-top: 18px; }
.chat-name-input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-family: var(--serif); font-style: italic; font-size: 20px; padding: 14px 16px; border-radius: 12px; outline: none; }
.chat-name-input:focus { border-color: var(--border-hi); }
.chat-name-input::placeholder { color: var(--text-mute); font-style: italic; }

.ai-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; transition: all 0.15s; }
.ai-card.selected { border-color: var(--ai-color); background: linear-gradient(135deg, color-mix(in srgb, var(--ai-color) 8%, transparent), transparent); }
.ai-card.disabled { opacity: 0.5; }
.ai-card-head { display: flex; align-items: center; gap: 10px; }
.ai-logo { width: 34px; height: 34px; color: var(--ai-color); background: var(--bg-3); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; filter: drop-shadow(0 0 8px var(--ai-color)); }
.ai-logo svg { width: 62%; height: 62%; }
.ai-card-name { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.ai-card-name .missing { font-family: var(--mono); font-size: 9px; color: var(--danger); margin-left: 6px; text-transform: uppercase; padding: 2px 5px; border: 1px solid var(--danger); border-radius: 3px; }
.toggle { width: 44px; height: 24px; background: var(--bg-3); border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border: 1px solid rgba(116,49,143,.25); border-radius: 50%; top: 2px; left: 3px; transition: all 0.2s; box-shadow: 0 2px 8px rgba(44,32,52,.12); }
.ai-card.selected .toggle { background: var(--ai-color); }
.ai-card.selected .toggle::after { left: 23px; background: #fff; }

.level-slider-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.level-slider-label { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); margin-bottom: 10px; }
.level-slider-label .level-name { color: var(--level-color); font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, var(--level-color) 15%, transparent); border: 1px solid var(--level-color); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--level-0) 0%, var(--level-1) 33%, var(--level-2) 66%, var(--level-3) 100%); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--level-color); border: 2px solid #fff; box-shadow: 0 0 0 3px var(--bg-2), 0 0 10px var(--level-color); cursor: pointer; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--level-color); border: 2px solid #fff; box-shadow: 0 0 0 3px var(--bg-2), 0 0 10px var(--level-color); cursor: pointer; }
.ai-card:not(.selected) .level-slider-wrap { opacity: 0.4; pointer-events: none; }
.price-hint { font-family: var(--mono); font-size: 10px; color: var(--text-mute); margin-top: 6px; text-align: right; }

.mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-option { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; cursor: pointer; text-align: left; transition: all 0.15s; }
.mode-option.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(212,255,58,0.1), rgba(212,255,58,0.02)); }
.mode-option .mode-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mode-option .mode-desc { font-family: var(--mono); font-size: 10px; color: var(--text-mute); line-height: 1.4; text-transform: none; letter-spacing: 0; }

.rounds-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.round-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 12px 0; font-family: var(--mono); font-size: 14px; font-weight: 700; cursor: pointer; }
.round-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.hint-text { font-size: 11px; color: var(--text-mute); margin-top: 8px; font-family: var(--mono); }

.extras { display: flex; flex-direction: column; gap: 8px; }
.extra-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.extra-info { flex: 1; }
.extra-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.extra-desc { font-size: 11px; color: var(--text-mute); line-height: 1.4; }
.checkbox { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--border-hi); border-radius: 5px; background: var(--bg); cursor: pointer; position: relative; flex-shrink: 0; }
.checkbox:checked { background: var(--accent); border-color: var(--accent); }
.checkbox:checked::after { content: ''; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.cost-estimate { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.cost-main { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--accent); margin-bottom: 4px; font-weight: 400; }
.cost-main.warn { color: var(--warn); }
.cost-main.danger { color: var(--danger); }
.cost-detail { font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.6; }

.create-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 14px 16px calc(14px + var(--safe-bot)); background: linear-gradient(to top, var(--bg) 60%, transparent); z-index: 10; }
.create-btn { width: 100%; padding: 16px; background: var(--accent); color: #000; border: none; border-radius: 12px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.create-btn:disabled { background: var(--bg-3); color: var(--text-mute); cursor: not-allowed; }

/* CHAT */
.chat-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.chat-bg .watermark { position: absolute; opacity: 0.035; }
main { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; }
.messages { padding: 20px 14px 40px; display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: var(--text-mute); min-height: 50vh; }
.chat-empty h2 { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--text); margin-bottom: 10px; font-weight: 400; }
.chat-empty p { font-size: 13px; max-width: 280px; line-height: 1.6; }

.msg { max-width: 100%; display: flex; flex-direction: column; gap: 6px; animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); flex-wrap: wrap; }
.msg-head .msg-logo { width: 14px; height: 14px; color: var(--msg-color); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 3px var(--msg-color)); }
.msg-head .msg-logo svg { width: 100%; height: 100%; }
.msg-head .author { color: var(--msg-color); font-weight: 600; }
.msg-head .time { color: var(--text-mute); margin-left: auto; }
.msg-head .model-tag { font-size: 9px; color: var(--level-color); padding: 1px 5px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.85; }
.msg-head .round-tag { font-size: 9px; color: var(--accent); padding: 1px 5px; border: 1px solid var(--accent); border-radius: 3px; opacity: 0.85; }

.msg-body { padding: 14px 16px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); word-wrap: break-word; overflow-wrap: break-word; font-size: 15px; line-height: 1.6; }
.msg.user .msg-body { background: var(--bg-3); border-color: var(--border-hi); }
.msg.council-synth .msg-body { background: linear-gradient(135deg, rgba(212,255,58,0.08), rgba(212,255,58,0.01)); border-color: rgba(212,255,58,0.35); box-shadow: 0 0 30px rgba(212,255,58,0.05); }
.msg.compact .msg-body { font-size: 13px; padding: 10px 12px; }
.msg-body p { margin-bottom: 10px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body pre { background: var(--bg); border: 1px solid var(--border); padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-family: var(--mono); font-size: 13px; }
.msg-body code { background: var(--bg); padding: 2px 5px; border-radius: 3px; font-family: var(--mono); font-size: 13px; }
.msg-body pre code { background: transparent; padding: 0; }
.msg-body strong { color: var(--text); font-weight: 600; }
.msg-body em { color: var(--text-dim); }
.msg-body ul, .msg-body ol { margin: 8px 0 8px 20px; }
.msg-body li { margin-bottom: 4px; }
.msg-body h1, .msg-body h2, .msg-body h3 { font-family: var(--serif); font-style: italic; font-weight: 400; margin: 14px 0 8px; color: var(--text); }
.msg-body h1 { font-size: 22px; } .msg-body h2 { font-size: 19px; } .msg-body h3 { font-size: 17px; }

.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-attachment { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.msg-attachment img { max-width: 120px; max-height: 120px; border-radius: 4px; }

.thinking { display: flex; gap: 4px; padding: 4px 0; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--msg-color, var(--text-dim)); animation: bounce 1.4s ease-in-out infinite; }
.thinking span:nth-child(2) { animation-delay: 0.2s; }
.thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
.thinking-label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-left: 8px; }

.error-msg { color: var(--danger); font-family: var(--mono); font-size: 13px; padding: 10px 12px; background: rgba(255,85,112,0.06); border: 1px solid rgba(255,85,112,0.3); border-radius: 6px; }

.round-sep { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; margin: 14px 0 4px; }
.round-sep::before, .round-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Attachments preview */
.attachments-preview { display: none; flex-wrap: wrap; gap: 6px; padding: 8px 14px 4px; background: rgba(10,10,15,0.95); position: relative; z-index: 5; border-top: 1px solid var(--border); }
.attachments-preview.show { display: flex; }
.attach-chip { background: var(--bg-2); border: 1px solid var(--border-hi); border-radius: 8px; padding: 4px 4px 4px 10px; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--text); max-width: 180px; }
.attach-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; }
.attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .chip-remove { background: transparent; border: none; color: var(--text-dim); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; }
.attach-chip .chip-remove:active { background: var(--bg-3); }

/* Composer */
.composer { padding: 10px 12px calc(12px + var(--safe-bot)); background: rgba(10,10,15,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: flex-end; flex-shrink: 0; position: relative; z-index: 5; }
.attach-btn { width: 42px; height: 42px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attach-btn:active { transform: scale(0.94); }
.opg-btn { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, rgba(212,255,58,0.18), rgba(66,133,244,0.10)); border: 1px solid rgba(212,255,58,0.45); color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; box-shadow: 0 0 14px rgba(212,255,58,0.08); }
.opg-btn:active { transform: scale(0.94); }
.attach-btn.has-files { color: var(--accent); border-color: var(--accent); }
.input-wrap { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; transition: border-color 0.15s; min-width: 0; }
.input-wrap:focus-within { border-color: var(--border-hi); }
.input { width: 100%; background: transparent; border: none; color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.4; resize: none; outline: none; max-height: 140px; min-height: 22px; }
.input::placeholder { color: var(--text-mute); }
.send-btn { width: 42px; height: 42px; border-radius: 10px; background: var(--accent); border: none; color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn:disabled { background: var(--bg-3); color: var(--text-mute); cursor: not-allowed; }
.send-btn:not(:disabled):active { transform: scale(0.94); }

/* Overlays */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: none; align-items: flex-end; animation: fadeIn 0.2s ease; }
.overlay.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: 100%; max-height: 92dvh; background: var(--bg); border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 20px; padding-bottom: calc(20px + var(--safe-bot)); overflow-y: auto; animation: slideUp 0.3s cubic-bezier(.2,.8,.2,1); }
@keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }
.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.sheet-header h2 { font-family: var(--serif); font-style: italic; font-size: 26px; font-weight: 400; }

.menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; color: var(--text); border-bottom: 1px solid var(--border); }
.menu-item:active { background: var(--bg-2); }
.menu-item:last-child { border-bottom: none; }
.menu-item svg { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg { color: var(--danger); }

.settings-section { margin-bottom: 24px; }
.settings-section h3 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-mute); margin-bottom: 12px; }
.api-row { margin-bottom: 18px; }
.api-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.api-label .logo-mini { width: 22px; height: 22px; color: var(--color); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 5px var(--color)); }
.api-label .logo-mini svg { width: 100%; height: 100%; }
.api-label .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.api-label .status-dot.active { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.api-label .name { font-weight: 600; }
.api-input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 10px 12px; border-radius: 8px; outline: none; }
.api-input:focus { border-color: var(--border-hi); }
.api-hint { font-size: 11px; color: var(--text-mute); margin-top: 4px; font-family: var(--mono); }
.api-links { display: flex; gap: 8px; margin-top: 8px; }
.api-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--link-color, var(--text-dim));
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.15s;
}
.api-link:active { transform: scale(0.97); background: var(--bg-3); }
.api-link svg { flex-shrink: 0; }
.settings-btn { width: 100%; padding: 12px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; margin-bottom: 8px; }
.settings-btn.danger { color: var(--danger); border-color: rgba(255,85,112,0.3); }
.settings-btn.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

.contact-card { background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07)); }
.contact-brand { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--text); margin-bottom: 4px; }
.contact-name { font-weight: 700; font-size: 15px; color: var(--text); }
.contact-role, .contact-address, .contact-note { color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.contact-links { display: grid; gap: 8px; margin: 14px 0; }
.contact-links a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.42); color: var(--text); text-decoration: none; font-size: 13px; }
.contact-links a:active { transform: scale(.98); background: var(--bg-3); }
.contact-note { margin-top: 8px; font-size: 11px; color: var(--text-mute); }
body.theme-dark .contact-links a { background: rgba(255,255,255,.05); }

.camera-sheet { max-width: 760px; margin: 0 auto; }
.camera-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07)); }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.camera-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; background: rgba(0,0,0,.72); font-size: 14px; line-height: 1.4; }
.camera-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.camera-actions .settings-btn { margin-bottom: 0; }
@media (max-width: 520px) { .camera-actions { grid-template-columns: 1fr; } }
.info-text { font-size: 12px; color: var(--text-dim); line-height: 1.6; background: var(--bg-2); padding: 12px; border-radius: 8px; border-left: 2px solid var(--accent); }

.info-block { padding: 14px; background: var(--bg-2); border-radius: 10px; margin-bottom: 10px; }
.info-block .info-label { font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.info-block .info-value { font-size: 14px; }

.install-banner { display: none; position: fixed; bottom: calc(90px + var(--safe-bot)); left: 14px; right: 14px; background: var(--bg-3); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; font-size: 13px; z-index: 50; animation: slideIn 0.3s ease; }
.install-banner.show { display: block; }
.install-banner .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.install-banner button { background: var(--accent); color: #000; border: none; padding: 6px 12px; border-radius: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; }
.install-banner .close { background: transparent; color: var(--text-dim); }

.flash { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; padding: 10px 18px; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; z-index: 999; animation: slideIn 0.25s ease; }
.flash.err { background: var(--danger); color: #fff; }

/* Memory UI */
.memory-label { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; margin-bottom: 6px; }
.memory-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.memory-textarea:focus { outline: none; border-color: var(--accent); }
.memory-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: #000;
  border-radius: 11px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
}
.settings-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fact-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fact-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.fact-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 16px;
}
.fact-delete:active { background: var(--bg-3); color: var(--danger); }
.fact-empty { text-align: center; color: var(--text-mute); font-style: italic; padding: 20px 0; }

/* Message action button (save to memory, copy) */
.msg-actions { display: flex; gap: 6px; margin-top: 8px; }
.msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.msg-action-btn:active { background: var(--bg-3); color: var(--text); }

/* ==================== v4.0 STYLES ==================== */

/* Chat search bar */
.chat-search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-search-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.chat-search-input:focus {
  border-color: var(--accent);
}
.chat-search-clear {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
}

/* Selection mode bar */
.selection-bar {
  position: sticky;
  top: 50px;
  z-index: 4;
  background: var(--accent);
  color: #000;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.selection-count {
  font-weight: 600;
  font-size: 14px;
}
.selection-actions {
  display: flex;
  gap: 8px;
}
.selection-btn {
  background: rgba(0,0,0,0.2);
  border: none;
  color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.selection-btn.danger {
  background: #ff4444;
  color: #fff;
}
.selection-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Selection checkbox in chat item */
.selection-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-dim);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.selection-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.selection-checkbox.checked::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 3px;
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
.chat-item.selected {
  background: rgba(232, 247, 61, 0.08);
}

/* Swipe actions */
.chat-item {
  position: relative;
  overflow: hidden;
}
.chat-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg);
  transition: transform 0.2s;
  position: relative;
  z-index: 2;
  min-height: 72px;
  width: 100%;
  box-sizing: border-box;
}
.swipe-actions-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 140px;
  display: flex;
  z-index: 1;
}
.swipe-action {
  flex: 1;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swipe-delete { background: #cc3333; }
.swipe-archive { background: #666; }
.swipe-unarchive { background: #4a7b4a; }

/* Archive section */
.archive-section {
  margin-top: 12px;
  opacity: 0.75;
}
.archive-header {
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chat-item.archived .chat-item-inner {
  background: var(--bg-2);
}

/* Session cost pill in chat header */
.session-cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 6px;
}

/* Level change menu (tap model tag) */
.level-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  display: none;
  align-items: flex-end;
}
.level-menu-overlay.open { display: flex; }
.level-menu-sheet {
  background: var(--bg-2);
  width: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
}
.level-menu-title {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 14px;
}
.level-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--bg);
}
.level-option.current {
  border-color: var(--accent);
  background: rgba(232, 247, 61, 0.05);
}
.level-option-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}
.level-option-info { flex: 1; }
.level-option-name { font-weight: 600; font-size: 13px; }
.level-option-model { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }

/* Contribution block (пункт 12) */
.contribution-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.contribution-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.contribution-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.contribution-ai {
  min-width: 90px;
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.contribution-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.contribution-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}
.contribution-count {
  min-width: 26px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-dim);
  text-align: right;
}

/* Confidence indicator (пункт 4) */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.confidence-high { background: rgba(74, 189, 74, 0.15); color: #6fd86f; }
.confidence-medium { background: rgba(230, 180, 60, 0.15); color: #e6b43c; }
.confidence-low { background: rgba(230, 74, 74, 0.15); color: #ff6b6b; }

/* TL;DR button */
.tldr-btn {
  background: rgba(232, 247, 61, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  font-family: var(--mono);
}
.tldr-btn:active { background: rgba(232, 247, 61, 0.2); }
.tldr-content {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(232, 247, 61, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* Templates grid (стоматологічні) */
.templates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.template-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.template-card:active { background: var(--bg-2); }
.template-icon { font-size: 20px; margin-bottom: 6px; }
.template-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.template-desc { font-size: 11px; color: var(--text-dim); line-height: 1.3; }

/* Czech context toggles */
.czech-block {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  gap: 10px;
}
.czech-block-info { flex: 1; }
.czech-block-name { font-weight: 600; font-size: 13px; }
.czech-block-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.czech-toggle {
  width: 40px;
  height: 22px;
  background: var(--bg-2);
  border-radius: 11px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.czech-toggle.on { background: var(--accent); }
.czech-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.czech-toggle.on::after { left: 20px; }

/* Stats page */
.stats-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.stats-ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.stats-ai-row:last-child { border-bottom: none; }
.stats-ai-name { flex: 1; font-weight: 600; font-size: 13px; }
.stats-ai-value { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

/* Version indicator */
.version-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.version-footer {
  text-align: center;
  padding: 16px 12px 8px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--border);
  opacity: 0.6;
}

/* v4.5: Template card selected state */
.template-card.selected {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.08);
}
.template-card.selected .template-name {
  color: var(--accent);
}

/* v5.0: Author line under header */
.author-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--accent);
  opacity: 0.7;
  margin-top: 3px;
  letter-spacing: 0.03em;
}

/* v5.0: Changelog */
.changelog-entry {
  border-left: 2px solid var(--border);
  padding: 10px 0 10px 14px;
  margin-bottom: 16px;
  position: relative;
}
.changelog-entry.current {
  border-left-color: var(--accent);
  background: rgba(212, 255, 58, 0.03);
  padding-left: 14px;
  padding-right: 12px;
  border-radius: 0 8px 8px 0;
}
.changelog-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.changelog-version {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.changelog-entry.current .changelog-version {
  color: var(--accent);
}
.changelog-current-badge {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 8px;
  background: var(--accent);
  color: #000;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.changelog-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  margin-left: auto;
}
.changelog-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}
.changelog-highlights li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 0;
  line-height: 1.5;
}
.changelog-entry.current .changelog-highlights li {
  color: var(--text);
}

/* ==================== v6.0 i18n language picker ==================== */
.language-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.language-option {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 10px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.language-option.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(212,255,58,0.18);
}
.language-option:active { transform: scale(0.97); }

/* ==================== v6.0.3 API error UX ==================== */
.error-card {
  width: 100%;
  text-align: left;
  color: var(--danger);
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 14px;
  background: rgba(255,85,112,0.06);
  border: 1px solid rgba(255,85,112,0.3);
  border-radius: 10px;
  cursor: pointer;
}
.error-card:active { transform: scale(0.99); background: rgba(255,85,112,0.10); }
.error-card-main { font-weight: 700; line-height: 1.45; }
.error-card-action { margin-top: 6px; color: var(--text-dim); line-height: 1.45; font-family: var(--sans); font-size: 13px; }
.error-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.error-pill { color: var(--danger); border: 1px solid rgba(255,85,112,0.35); background: rgba(255,85,112,0.08); padding: 2px 6px; border-radius: 999px; font-size: 10px; }
.error-details-hint { color: var(--text-mute); margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.api-error-summary { color: var(--danger); font-weight: 700; font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.api-error-action { background: rgba(212,255,58,0.08); border-left: 2px solid var(--accent); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.api-error-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.api-error-grid > div { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.api-error-grid strong { display: block; color: var(--text-mute); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.api-error-grid span { display: block; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.api-error-section { margin: 12px 0; }
.api-error-label { font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.api-error-section pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text-dim); font-family: var(--mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.api-error-link { color: var(--accent); overflow-wrap: anywhere; font-size: 12px; }
.api-error-muted { color: var(--text-mute); }
@media (max-width: 420px) { .api-error-grid { grid-template-columns: 1fr; } }


/* v6.0.6 OPG priority lines */
.opg-btn svg { width: 22px; height: 22px; display: block; }
.template-icon svg { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.finding-line { padding: 6px 8px; margin: 4px 0; border-radius: 8px; font-weight: 500; border: 1px solid transparent; }
.finding-red { color: #ff5570; background: rgba(255,85,112,0.08); border-color: rgba(255,85,112,0.25); }
.finding-yellow { color: #ffb347; background: rgba(255,179,71,0.08); border-color: rgba(255,179,71,0.25); }
.finding-neutral { color: var(--text-dim); background: rgba(138,138,160,0.06); border-color: rgba(138,138,160,0.18); }


/* ================================================================
   v6.1 ProfiDentist UI Refresh
   Brand direction: violet + white + concrete screed, calmer clinical UI
   ================================================================ */
:root {
  --bg: #ede9e3;
  --bg-2: #fffefd;
  --bg-3: #f7f4ef;
  --bg-4: #ebe5dd;
  --border: rgba(74, 60, 86, 0.14);
  --border-hi: rgba(111, 55, 150, 0.36);
  --text: #241a2f;
  --text-dim: #6e6477;
  --text-mute: #9a8fa1;
  --accent: #74318f;
  --accent-2: #9b63b7;
  --accent-soft: rgba(116, 49, 143, 0.10);
  --concrete: #d8d1c7;
  --council: #74318f;
  --danger: #d63f68;
  --ok: #218f68;
  --warn: #b47a13;
  --shadow-sm: 0 6px 18px rgba(46, 36, 55, 0.08);
  --shadow-md: 0 14px 36px rgba(46, 36, 55, 0.13);
  --shadow-purple: 0 14px 34px rgba(116, 49, 143, 0.22);
}

html, body {
  background:
    radial-gradient(circle at 18% 10%, rgba(116,49,143,0.12), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(255,255,255,0.90), transparent 24%),
    linear-gradient(135deg, #f4f0ea 0%, #ded7cd 48%, #f8f6f2 100%);
  color: var(--text);
}
body::before {
  opacity: 0.13;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(80,70,80,0.10) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,0.40) 0 1px, transparent 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.62'/></svg>");
}

header {
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(116,49,143,0.14);
  box-shadow: 0 10px 30px rgba(44,32,52,0.07);
}
.header-title .main {
  font-family: var(--sans);
  font-style: normal;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.03em;
}
.header-title .sub,
.section-label,
.cost-detail,
.chat-preview,
.price-hint,
.hint-text {
  letter-spacing: 0.06em;
}
.brand-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(116,49,143,0.12);
  animation: none;
}
.version-pill {
  color: var(--accent);
  background: rgba(116,49,143,0.08);
  border: 1px solid rgba(116,49,143,0.18);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
}
.author-line { color: var(--text-mute); font-size: 10px; margin-top: 2px; }
.header-btn,
.back-btn,
.attach-btn,
.opg-btn {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(116,49,143,0.16);
  color: var(--accent);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(44,32,52,0.05);
}
.header-btn.ghost { background: transparent; box-shadow: none; }
.header-btn:active,
.back-btn:active,
.attach-btn:active,
.opg-btn:active,
.send-btn:not(:disabled):active,
.fab:active,
.create-btn:active,
.settings-btn:active,
.msg-action-btn:active,
.tldr-btn:active { transform: translateY(1px) scale(0.98); }

.chat-list { padding: 12px 10px 120px; }
.chat-item {
  border-bottom: none;
  border-radius: 20px;
  margin: 8px 2px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chat-item-inner {
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(116,49,143,0.12);
  border-radius: 20px;
  min-height: 76px;
}
.chat-item:active .chat-item-inner { background: #fff; }
.chat-item.selected .chat-item-inner,
.chat-item.archived .chat-item-inner { background: rgba(255,255,255,0.72); }
.avatar {
  background: #fff;
  border: 2px solid rgba(255,255,255,0.86);
  filter: none;
  box-shadow: 0 4px 12px rgba(44,32,52,0.10);
}
.chat-mode-badge {
  border-radius: 999px;
  background: rgba(116,49,143,0.08);
  color: var(--accent);
}
.chat-mode-badge.council {
  background: rgba(116,49,143,0.12);
  color: var(--accent);
  border: 1px solid rgba(116,49,143,0.16);
}
.fab {
  background: linear-gradient(135deg, var(--accent), #9b63b7);
  color: #fff;
  box-shadow: var(--shadow-purple);
}

.new-chat-body,
.messages,
.sheet {
  scrollbar-color: rgba(116,49,143,0.30) transparent;
}
.chat-name-input,
.ai-card,
.mode-option,
.extra-row,
.cost-estimate,
.api-input,
.memory-textarea,
.info-block,
.fact-item,
.template-card,
.czech-block,
.case-form,
.changelog-entry,
.error-detail-card {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(116,49,143,0.13);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.ai-card.selected,
.mode-option.active,
.template-card.selected {
  border-color: rgba(116,49,143,0.42);
  background: linear-gradient(135deg, rgba(116,49,143,0.11), rgba(255,255,255,0.88));
  box-shadow: 0 10px 28px rgba(116,49,143,0.13);
}
.ai-logo,
.api-label .logo-mini {
  background: rgba(255,255,255,0.85);
  filter: none;
  box-shadow: 0 6px 16px rgba(44,32,52,0.08);
}
.toggle { background: #eee7ef; border: 1px solid rgba(116,49,143,.22); }
.ai-card.selected .toggle { background: var(--accent); }
.slider::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 7px 18px rgba(44,32,52,0.20); }
.slider::-moz-range-thumb { box-shadow: 0 0 0 4px #fff, 0 7px 18px rgba(44,32,52,0.20); }
.cost-main { color: var(--accent); font-family: var(--sans); font-style: normal; font-weight: 780; letter-spacing: -0.04em; }
.create-bar,
.composer,
.attachments-preview {
  background: linear-gradient(to top, rgba(238,233,226,0.98) 72%, rgba(238,233,226,0));
  border-top: 1px solid rgba(116,49,143,0.13);
}
.create-btn,
.send-btn,
.settings-btn.primary {
  background: linear-gradient(135deg, var(--accent), #9b63b7);
  color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-purple);
}
.create-btn:disabled,
.send-btn:disabled {
  background: #ded7cf;
  color: #9b919f;
  box-shadow: none;
}

.messages { padding: 18px 12px 40px; gap: 14px; }
.msg {
  gap: 8px;
}
.msg-head {
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(116,49,143,0.10);
  border-radius: 999px;
  padding: 7px 10px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(44,32,52,0.05);
}
.msg-head .msg-logo { filter: none; width: 16px; height: 16px; }
.msg-head .author { font-weight: 760; color: var(--msg-color); }
.msg-head .time { margin-left: 4px; }
.msg-head .model-tag,
.msg-head .round-tag {
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.72);
}
.msg-body {
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(116,49,143,0.13);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  font-size: 15px;
  line-height: 1.68;
}
.msg.user .msg-head { margin-left: auto; }
.msg.user .msg-body {
  background: linear-gradient(135deg, #74318f, #9b63b7);
  border-color: rgba(255,255,255,0.20);
  color: #fff;
  box-shadow: var(--shadow-purple);
}
.msg.user .msg-body strong,
.msg.user .msg-body h1,
.msg.user .msg-body h2,
.msg.user .msg-body h3 { color: #fff; }
.msg.council-synth .msg-body {
  background: linear-gradient(135deg, rgba(116,49,143,0.12), rgba(255,255,255,0.94) 42%, rgba(255,255,255,0.88));
  border: 1px solid rgba(116,49,143,0.28);
  box-shadow: 0 18px 46px rgba(116,49,143,0.16);
}
.msg-body h1,
.msg-body h2,
.msg-body h3 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--text);
}
.msg-body pre,
.msg-body code,
.msg-attachment,
.attach-chip {
  background: rgba(244,240,235,0.92);
  border-color: rgba(116,49,143,0.14);
  color: var(--text);
}
.msg-actions {
  flex-wrap: wrap;
  gap: 7px;
}
.msg-action-btn,
.tldr-btn {
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(116,49,143,0.18);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 11px;
  box-shadow: 0 5px 14px rgba(44,32,52,0.05);
}
.tldr-content {
  background: rgba(116,49,143,0.08);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 8px;
}
.confidence-badge { border-radius: 999px; }
.contribution-block {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(116,49,143,0.16);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.contribution-bar { background: rgba(116,49,143,0.10); }
.contribution-bar-fill { background: linear-gradient(90deg, var(--accent), #9b63b7); }

.input-wrap {
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(116,49,143,0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 6px 18px rgba(44,32,52,0.06);
}
.input-wrap:focus-within {
  border-color: rgba(116,49,143,0.46);
  box-shadow: 0 0 0 4px rgba(116,49,143,0.10);
}
.opg-btn {
  background: linear-gradient(135deg, rgba(116,49,143,0.12), rgba(255,255,255,0.88));
  border-color: rgba(116,49,143,0.28);
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(116,49,143,0.12);
}
.attach-btn.has-files { color: var(--accent); border-color: rgba(116,49,143,0.42); }

.overlay { background: rgba(36, 26, 47, 0.36); }
.sheet {
  background:
    radial-gradient(circle at 20% 0%, rgba(116,49,143,0.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,240,235,0.96));
  border-top: 1px solid rgba(116,49,143,0.18);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 60px rgba(44,32,52,0.24);
}
.sheet-header h2 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 780;
  letter-spacing: -0.03em;
}
.info-text {
  background: rgba(116,49,143,0.07);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
}
.settings-btn {
  background: rgba(255,255,255,0.76);
  border-color: rgba(116,49,143,0.16);
  color: var(--text);
  border-radius: 15px;
}
.settings-btn.danger { color: var(--danger); border-color: rgba(214,63,104,0.28); }
.menu-item {
  border-bottom: 1px solid rgba(116,49,143,0.10);
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
}
.menu-item:active { background: rgba(116,49,143,0.08); }

.chat-search-wrap,
.selection-bar {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(116,49,143,0.14);
  border-radius: 18px;
  margin: 0 0 10px;
  box-shadow: var(--shadow-sm);
}
.chat-search-input {
  background: rgba(244,240,235,0.84);
  border-color: rgba(116,49,143,0.12);
  border-radius: 14px;
}
.selection-bar {
  color: var(--text);
  background: rgba(116,49,143,0.10);
}
.selection-btn { border-radius: 999px; }
.flash {
  background: linear-gradient(135deg, var(--accent), #9b63b7);
  color: #fff;
  box-shadow: var(--shadow-purple);
  border-radius: 999px;
}
.flash.err { background: var(--danger); }

@media (min-width: 820px) {
  .screen { max-width: 860px; margin: 0 auto; width: 100%; border-left: 1px solid rgba(116,49,143,0.10); border-right: 1px solid rgba(116,49,143,0.10); }
  .composer, .create-bar { left: 50%; transform: translateX(-50%); max-width: 860px; }
  .fab { right: calc((100vw - 860px) / 2 + 24px); }
}


/* v6.5 Daily UX */
.app-brand-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 14px; margin-right: 10px; box-shadow: 0 8px 24px rgba(67,30,82,.12); background: rgba(255,255,255,.72); }
.compact-row { padding: 10px 0; }
.msg-actions { flex-wrap: wrap; }
.msg-action-btn[data-action="speak"] { color: var(--accent, #4b1e64); }
.msg-action-btn[data-action="obsidian"] { color: #6f3c88; }
@media (max-width: 520px) { .app-brand-logo { width: 40px; height: 40px; border-radius: 12px; } }

/* v6.5.1 storage monitor */
.storage-status-card {
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 12px;
}
.storage-status-card.ok { border-color: rgba(34, 197, 94, 0.25); }
.storage-status-card.warning { border-color: rgba(245, 158, 11, 0.35); }
.storage-status-card.danger { border-color: rgba(239, 68, 68, 0.40); }
.storage-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: var(--text-dim);
}
.storage-status-row strong {
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}
.storage-status-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.storage-status-note.ok { color: var(--success); }
.storage-status-note.warning { color: var(--warning); }
.storage-status-note.danger { color: var(--danger); }


/* v6.5.2 Header polish */
#screenList > header {
  align-items: center;
  gap: 14px;
}
.app-brand-logo {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  border-radius: 0 !important;
  margin-right: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.version-pill {
  cursor: pointer;
  user-select: none;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  background: rgba(116,49,143,0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(116,49,143,0.22) !important;
}
.version-pill:hover, .version-pill:focus-visible {
  outline: none;
  background: rgba(116,49,143,0.14) !important;
  box-shadow: 0 0 0 3px rgba(116,49,143,0.10);
}
@media (max-width: 520px) {
  #screenList > header { padding-left: 14px; padding-right: 14px; gap: 12px; }
  .app-brand-logo { width: 64px !important; height: 64px !important; }
  #screenList .header-title .main { font-size: 26px; line-height: 1; }
  #screenList .header-title .sub { font-size: 12px; gap: 8px; flex-wrap: wrap; white-space: normal; }
  #screenList .author-line { font-size: 15px; margin-top: 2px; }
}
@media (max-width: 380px) {
  .app-brand-logo { width: 56px !important; height: 56px !important; }
  #screenList .header-title .main { font-size: 23px; }
  #screenList .author-line { font-size: 13px; }
}

/* ==================== v6.6 Controlled Build: Settings Hub, Routing, Splash ==================== */
.settings-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}
.settings-hub-card {
  border: 1px solid rgba(91, 45, 130, .14);
  background: rgba(255,255,255,.72);
  border-radius: 18px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 750;
  font-size: 13px;
  box-shadow: 0 8px 26px rgba(47,22,66,.06);
  cursor: pointer;
}
.settings-hub-card.danger { color: #a72645; }
.settings-section { scroll-margin-top: 18px; }
.settings-section:target { outline: 2px solid rgba(123, 67, 161, .24); }
.routing-picker { display: grid; gap: 12px; }
.routing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.routing-card {
  border: 1px solid rgba(91,45,130,.14);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 10px 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
}
.routing-card.active { border-color: rgba(91,45,130,.55); box-shadow: 0 0 0 2px rgba(91,45,130,.12); }
.routing-icon { font-size: 18px; }
.routing-title { font-weight: 800; font-size: 13px; }
.routing-desc { font-size: 10px; color: var(--text-dim); line-height: 1.25; }
.routing-synth { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px; }
.settings-select {
  min-height: 38px;
  border: 1px solid rgba(91,45,130,.16);
  border-radius: 12px;
  padding: 0 10px;
  background: rgba(255,255,255,.88);
  color: var(--text);
  font-weight: 650;
}
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(91,45,130,.12), transparent 44%), #f7f3f8;
  transition: opacity 360ms ease, visibility 360ms ease;
}
.app-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash-card { display:flex; flex-direction:column; align-items:center; animation: splashEnter 880ms cubic-bezier(.2,.9,.2,1) both; max-width: min(82vw, 360px); padding: 10px; overflow: visible; }
.app-splash-logo { width:min(46vw,188px); max-height: 38dvh; height:auto; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(78,29,105,.16)); }
.app-splash-title { margin-top:18px; font-size:34px; font-weight:850; letter-spacing:-.04em; color:#271632; }
.app-splash-subtitle { margin-top:4px; font-family: var(--serif, serif); font-size:20px; color:rgba(39,22,50,.58); }
@keyframes splashEnter { 0% { opacity:0; transform:translateY(10px) scale(.94); filter:blur(6px); } 55% { opacity:1; transform:translateY(0) scale(1.015); filter:blur(0); } 100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@media (prefers-reduced-motion: reduce) { .app-splash-card { animation: none; } .app-splash { transition: opacity 120ms ease; } }
@media (max-width: 480px) { .routing-grid { grid-template-columns: 1fr; } .routing-synth { grid-template-columns: 1fr; } }


/* ==================== v6.7 Completion: Settings panels, roles, FDI table, derived blocks ==================== */
.settings-back-btn { border: 0; background: rgba(91,45,130,.10); color: var(--accent); border-radius: 999px; padding: 8px 12px; font-weight: 800; margin: 0 0 12px; cursor: pointer; }
.settings-active-panel { animation: panelIn .18s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.role-card { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(91,45,130,.14); background: rgba(255,255,255,.72); color: var(--text); border-radius: 16px; padding: 10px 9px; font-weight: 750; cursor: pointer; text-align: left; }
.role-card.active { border-color: rgba(91,45,130,.55); box-shadow: 0 0 0 2px rgba(91,45,130,.12); background: rgba(91,45,130,.08); }
.role-icon { font-size: 18px; }
.role-title { font-size: 12px; line-height: 1.25; }
.fdi-table-block { margin-top: 10px; border: 1px solid rgba(91,45,130,.14); border-radius: 16px; background: rgba(255,255,255,.66); overflow: hidden; }
.fdi-table-block summary { cursor: pointer; padding: 10px 12px; font-weight: 850; color: var(--accent); }
.fdi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fdi-table td { padding: 8px 9px; border-top: 1px solid rgba(91,45,130,.10); vertical-align: top; }
.fdi-table td:first-child { width: 50px; font-family: var(--mono); font-weight: 900; color: var(--accent); }
.fdi-table td:nth-child(2) { width: 24px; }
.fdi-red { background: rgba(255, 92, 122, .10); }
.fdi-yellow { background: rgba(255, 193, 77, .12); }
.fdi-neutral { background: rgba(91,45,130,.035); }
.derived-block { margin-top: 10px; padding: 12px; border-radius: 16px; border: 1px solid rgba(91,45,130,.14); background: rgba(91,45,130,.055); }
.derived-title { font-weight: 900; color: var(--accent); margin-bottom: 6px; }
@media (max-width: 480px) { .roles-grid { grid-template-columns: 1fr; } }

/* v6.7.1 hotfix */
.language-picker { margin-bottom: 18px; }
.settings-panel-save { margin-top: 18px; }
.help-text, .routing-help, .roles-help {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  background: rgba(116,49,143,.055);
  border-left: 3px solid rgba(116,49,143,.45);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
}
.web-badge {
  border: 1px solid rgba(116,49,143,.18);
  background: rgba(255,255,255,.72);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 7px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.web-badge.on { color: #167f8d; border-color: rgba(32,184,205,.35); background: rgba(32,184,205,.08); }
.web-badge.off { opacity: .55; }
button.web-badge { cursor: pointer; }
.role-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.role-desc { font-size: 10px; line-height: 1.25; color: var(--text-dim); font-weight: 500; }
.role-check { margin-left:auto; color: var(--accent); font-weight: 900; }
.debate-rounds-inline { padding: 12px; border: 1px solid rgba(116,49,143,.14); border-radius: 18px; background: rgba(255,255,255,.58); }
.hidden-legacy-web[hidden] { display: none !important; }
#settingsDangerSection .settings-panel-save { display: none; }
.chat-sub-level { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.czech-toggle { background: #eee7ef !important; border: 1px solid rgba(116,49,143,.22); }
.czech-toggle.on { background: var(--accent) !important; }
.chat-item-inner { will-change: transform; transition: transform .18s cubic-bezier(.2,.8,.2,1); }

/* ==================== v6.7.2 bugfix 1-19 ==================== */
.brand-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  aspect-ratio: 1 / 1;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 7px 0 2px !important;
  box-shadow: 0 0 0 4px rgba(116,49,143,.10) !important;
  overflow: visible !important;
}
.template-card { position: relative; padding: 11px 10px 12px; }
.template-icon { font-size: 16px !important; margin-bottom: 5px !important; }
.template-icon svg { width: 20px !important; height: 20px !important; }
.template-info-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(116,49,143,.18);
  background: rgba(255,255,255,.72);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  z-index: 2;
}
.settings-subtitle {
  margin: 18px 0 8px;
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
}
.appearance-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.msg-action-btn.disabled,
.msg-action-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.2);
}
.thinking {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 82px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  word-break: normal !important;
}
.thinking > span:not(.thinking-label) {
  flex: 0 0 auto;
}
.thinking-label {
  display: inline-block !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.chat-item-inner {
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* Dark mode */
body.theme-dark {
  --bg: #0d0b12;
  --bg-2: #17131f;
  --bg-3: #211a2b;
  --bg-4: #2b2138;
  --border: rgba(221, 208, 230, 0.13);
  --border-hi: rgba(185, 119, 220, 0.35);
  --text: #f2edf6;
  --text-dim: #b9adc2;
  --text-mute: #887a92;
  --accent: #c989e9;
  --accent-2: #d8a5f0;
  --accent-soft: rgba(201, 137, 233, 0.12);
  --danger: #ff6b8d;
  --ok: #47d18c;
  --warn: #ffc46a;
  background:
    radial-gradient(circle at 20% 0%, rgba(116,49,143,0.26), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(201,137,233,0.12), transparent 28%),
    linear-gradient(135deg, #09070d 0%, #15111d 52%, #0f0c14 100%);
}
body.theme-dark header,
body.theme-dark .sheet,
body.theme-dark .chat-item-inner,
body.theme-dark .msg-body,
body.theme-dark .cost-estimate,
body.theme-dark .template-card,
body.theme-dark .mode-option,
body.theme-dark .routing-card,
body.theme-dark .role-card,
body.theme-dark .extra-row {
  background-color: var(--bg-2);
}
body.theme-dark .app-splash { background: #0f0c14; }
body.theme-dark .web-badge,
body.theme-dark .template-info-btn { background: rgba(33,26,43,.86); }

/* ==================== v6.9.0-beta: UI polish + safer mobile UX ==================== */
/* Header logo: app-icon squircle instead of harsh white square */
.app-brand-logo {
  border-radius: 28% !important;
  padding: 4px !important;
  background: color-mix(in srgb, var(--bg-2) 72%, white 28%) !important;
  box-shadow: 0 10px 28px rgba(67,30,82,.12), inset 0 0 0 1px rgba(116,49,143,.10) !important;
  object-fit: contain !important;
  overflow: hidden !important;
}
body.theme-dark .app-brand-logo {
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

/* Header status dot: stable circle, no clipping/oval */
.header-title .sub { overflow: visible !important; line-height: 1.35; }
.brand-dot {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  background: rgba(116,49,143,.10) !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.brand-dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(116,49,143,.15), 0 0 12px rgba(116,49,143,.22);
}
body.theme-dark .brand-dot { background: rgba(201,137,233,.12) !important; }
body.theme-dark .brand-dot::after { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(201,137,233,.35); }

/* Dark settings contrast: avoid pale text on pale sheet */
body.theme-dark .overlay.open { background: rgba(2,1,5,.56); }
body.theme-dark .sheet {
  background: linear-gradient(180deg, rgba(25,20,32,.98), rgba(16,13,22,.98)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -18px 60px rgba(0,0,0,.48);
}
body.theme-dark .sheet-header h2,
body.theme-dark .settings-hub-card,
body.theme-dark .settings-hub-card span,
body.theme-dark .settings-section h3,
body.theme-dark .settings-btn,
body.theme-dark .language-option,
body.theme-dark .extra-name,
body.theme-dark .memory-label,
body.theme-dark .info-value { color: var(--text) !important; }
body.theme-dark .settings-hub-card,
body.theme-dark .settings-btn,
body.theme-dark .language-option,
body.theme-dark .chat-name-input,
body.theme-dark .memory-textarea,
body.theme-dark .info-block,
body.theme-dark .storage-status-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body.theme-dark .info-text,
body.theme-dark .help-text,
body.theme-dark .extra-desc,
body.theme-dark .settings-subtitle,
body.theme-dark .info-label { color: var(--text-dim) !important; }
body.theme-dark .settings-hub-card.danger { color: var(--danger) !important; background: rgba(255,107,141,.08) !important; }

/* Lightweight in-app popovers instead of browser alert() */
.info-popover {
  position: fixed;
  z-index: 10000;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  color: #211728;
  border: 1px solid rgba(116,49,143,.16);
  box-shadow: 0 18px 50px rgba(44,32,52,.20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.info-popover.open { opacity: 1; transform: translateY(0) scale(1); }
.info-popover-title { font-weight: 750; font-size: 15px; margin-bottom: 6px; letter-spacing: -.01em; }
.info-popover-text { font-size: 13px; line-height: 1.45; color: rgba(33,23,40,.78); }
body.theme-dark .info-popover {
  background: rgba(30,24,39,.96);
  color: var(--text);
  border-color: rgba(201,137,233,.24);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
}
body.theme-dark .info-popover-text { color: var(--text-dim); }

/* Loading bubble: never break provider label vertically */
.thinking { min-width: 132px; display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap !important; }
.thinking-label { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; min-width: auto !important; width: auto !important; }

/* Swipe cards: no partial-open visual after scroll/tap/re-render */
.chat-item { touch-action: pan-y; }
.chat-item-inner { transform: translate3d(0,0,0); transition: transform .20s cubic-bezier(.2,.8,.2,1) !important; }
.chat-item:not(.is-swiped):not(.is-swiping) .swipe-actions-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
}
.chat-item.is-swiped .swipe-actions-wrap,
.chat-item.is-swiping .swipe-actions-wrap {
  opacity: 1;
  transform: translateX(0);
}

/* ==================== v6.9.1-beta: request cancel state ==================== */
.send-btn.cancel-mode {
  background: var(--danger, #ff5c5c);
  color: #fff;
}
.send-btn.cancel-mode:active {
  transform: scale(0.94);
}


/* ==================== v6.10 Patient Visual Library ==================== */
.visuals-entry-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(116,49,143,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(246,240,248,.78));
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07));
  margin: 0 0 18px;
  cursor: pointer;
}
.visuals-entry-icon { width: 46px; height: 46px; border-radius: 16px; background: rgba(116,49,143,.10); display:flex; align-items:center; justify-content:center; font-size: 24px; flex: 0 0 auto; }
.visuals-entry-title { font-weight: 820; font-size: 15px; margin-bottom: 3px; }
.visuals-entry-desc { color: var(--text-dim); font-size: 12px; line-height: 1.35; }
.visuals-body { flex: 1; overflow-y: auto; padding: 18px 16px 120px; }
.visuals-hero { display: flex; gap: 12px; align-items: center; padding: 14px; margin-bottom: 12px; border-radius: 24px; background: rgba(255,255,255,.80); border: 1px solid rgba(116,49,143,.14); box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07)); }
.visuals-hero-icon { width: 52px; height: 52px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(116,49,143,.14), rgba(255,255,255,.86)); font-size: 26px; }
.visuals-hero-title { font-weight: 860; letter-spacing: -0.02em; }
.visuals-hero-desc { color: var(--text-dim); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.visuals-search { width: 100%; background: rgba(255,255,255,.88); border: 1px solid rgba(116,49,143,.16); color: var(--text); border-radius: 18px; padding: 14px 16px; outline: none; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.visuals-search:focus { border-color: rgba(116,49,143,.42); box-shadow: 0 0 0 4px rgba(116,49,143,.10); }
.visuals-audience-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.visuals-tab, .visual-chip, .visual-mini-btn { border: 1px solid rgba(116,49,143,.16); background: rgba(255,255,255,.72); color: var(--text); border-radius: 999px; padding: 9px 10px; font-weight: 780; font-size: 12px; cursor: pointer; }
.visuals-tab.active, .visual-chip.active, .visual-mini-btn.primary { background: linear-gradient(135deg, var(--accent), #9b63b7); color: #fff; border-color: transparent; box-shadow: var(--shadow-purple, 0 8px 20px rgba(116,49,143,.25)); }
.visual-category-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 2px; }
.visual-chip { white-space: nowrap; flex: 0 0 auto; }
.visuals-grid, .visuals-suggestion-list { display: grid; gap: 12px; }
.visual-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; border-radius: 24px; background: rgba(255,255,255,.86); border: 1px solid rgba(116,49,143,.14); box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07)); overflow: hidden; cursor: pointer; }
.visual-card-thumb { position: relative; min-height: 132px; background: rgba(116,49,143,.06); display:flex; align-items:center; justify-content:center; }
.visual-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; }
.visual-type-badge { position: absolute; top: 8px; left: 8px; border-radius: 999px; padding: 4px 7px; background: rgba(255,255,255,.82); color: var(--accent); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.visual-card-body { padding: 13px 12px 12px 0; min-width: 0; }
.visual-card-kicker, .visual-detail-kicker { color: var(--accent); font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.visual-card h3 { font-size: 15px; line-height: 1.16; margin-bottom: 5px; letter-spacing: -0.02em; }
.visual-card p { color: var(--text-dim); font-size: 12px; line-height: 1.35; margin-bottom: 9px; }
.visual-card-actions { display:flex; gap: 6px; flex-wrap: wrap; }
.visual-mini-btn { padding: 7px 9px; font-size: 11px; }
.visuals-empty { padding: 24px; border-radius: 22px; background: rgba(255,255,255,.74); border: 1px dashed rgba(116,49,143,.20); color: var(--text-dim); text-align: center; }
.visual-detail-sheet { max-height: 94dvh; }
.visual-detail { display: grid; gap: 14px; }
.visual-detail-image { border-radius: 24px; overflow: hidden; border: 1px solid rgba(116,49,143,.14); background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm, 0 8px 22px rgba(44,32,52,.07)); }
.visual-detail-image img { width: 100%; display: block; }
.visual-detail-desc { color: var(--text-dim); margin-bottom: 10px; }
.visual-patient-text { font-size: 16px; line-height: 1.65; padding: 14px; border-radius: 18px; background: rgba(116,49,143,.07); border-left: 4px solid var(--accent); }
.visual-tags { display:flex; flex-wrap:wrap; gap: 6px; margin: 12px 0; }
.visual-tags span { font: 700 10px var(--mono); color: var(--text-dim); background: rgba(116,49,143,.08); border-radius: 999px; padding: 5px 8px; }
.visual-detail-actions { display: grid; gap: 8px; }
.visual-suggestions-note { color: var(--text-dim); margin-bottom: 12px; background: rgba(116,49,143,.07); border-left: 4px solid var(--accent); border-radius: 16px; padding: 12px; }
.visual-patient-overlay { align-items: stretch; background: rgba(17,8,24,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.visual-patient-shell { position: relative; width: 100%; min-height: 100dvh; padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bot) + 18px); display:flex; flex-direction:column; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.08), transparent 42%), #f8f3f8; color: #25172d; }
.visual-patient-close { position: fixed; top: calc(var(--safe-top) + 12px); right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(116,49,143,.18); background: rgba(255,255,255,.86); color: #74318f; font-size: 34px; line-height: 1; box-shadow: 0 12px 30px rgba(44,32,52,.16); z-index: 2; }
.visual-patient-title { text-align: center; font-size: clamp(24px, 6vw, 44px); font-weight: 880; line-height: 1.05; margin: 0 52px 18px; letter-spacing: -0.04em; }
.visual-patient-image { width: min(100%, 860px); border-radius: 32px; overflow: hidden; box-shadow: 0 18px 60px rgba(44,32,52,.20); border: 1px solid rgba(116,49,143,.14); background: #fff; }
.visual-patient-image img { width: 100%; display:block; }
.visual-patient-copy { width: min(100%, 860px); margin-top: 18px; text-align: center; font-size: clamp(18px, 4vw, 30px); line-height: 1.45; font-weight: 680; }
.visual-patient-footer { margin-top: 18px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(37,23,45,.45); }
body.theme-dark .visuals-entry-card,
body.theme-dark .visuals-hero,
body.theme-dark .visuals-search,
body.theme-dark .visual-card,
body.theme-dark .visuals-empty,
body.theme-dark .visual-detail-image { background: rgba(28,24,34,.92); border-color: rgba(255,255,255,.12); }
body.theme-dark .visuals-entry-desc,
body.theme-dark .visuals-hero-desc,
body.theme-dark .visual-card p,
body.theme-dark .visual-detail-desc,
body.theme-dark .visuals-empty { color: var(--text-dim); }
body.theme-dark .visuals-tab,
body.theme-dark .visual-chip,
body.theme-dark .visual-mini-btn { background: rgba(35,30,43,.88); border-color: rgba(255,255,255,.12); color: var(--text); }
@media (min-width: 680px) { .visuals-grid, .visuals-suggestion-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .visual-detail { grid-template-columns: 1.1fr .9fr; align-items:start; } }
@media (max-width: 380px) { .visual-card { grid-template-columns: 96px minmax(0,1fr); } .visual-card-thumb { min-height: 124px; } .visual-card h3 { font-size: 14px; } .visuals-audience-tabs { gap: 5px; } .visuals-tab { padding: 8px 6px; font-size: 11px; } }

/* ==================== v6.10.1 UI/TTS polish hotfix ==================== */
.version-footer {
  opacity: 1 !important;
  color: rgba(39,22,50,.62) !important;
  font-weight: 700;
}
body.theme-dark .version-footer { color: rgba(232,232,240,.62) !important; }
.header-title .sub { color: rgba(39,22,50,.58); }
body.theme-dark .header-title .sub { color: rgba(232,232,240,.62); }
.changelog-current-badge { white-space: nowrap; font-size: 8.5px; padding: 2px 7px; }
.changelog-highlights li { line-height: 1.45; }

/* Make swipe cards less visually aggressive and avoid stuck partial-open look. */
.chat-item { background: transparent !important; }
.swipe-actions-wrap {
  width: 128px !important;
  right: 0;
  border-radius: 18px;
  overflow: hidden;
  margin: 2px 0;
  transition: opacity .14s ease, transform .20s cubic-bezier(.2,.8,.2,1);
}
.swipe-action { font-size: 16px; }
.swipe-delete { background: linear-gradient(135deg, #c83b52, #8f1e34) !important; }
.swipe-archive { background: linear-gradient(135deg, #716677, #50475a) !important; }
.swipe-unarchive { background: linear-gradient(135deg, #4d9561, #2f6f43) !important; }
.chat-time { max-width: 92px; text-align: right; }
.chat-preview { min-width: 0; }

/* Floating TTS player */
.tts-player[hidden] { display: none !important; }
.tts-player {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(78px + var(--safe-bot));
  z-index: 90;
  background: rgba(255,255,255,.96);
  color: var(--text);
  border: 1px solid rgba(116,49,143,.18);
  box-shadow: 0 18px 50px rgba(44,32,52,.22);
  border-radius: 22px;
  padding: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.tts-player.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tts-player-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tts-player-title { font-weight: 900; color: var(--accent); letter-spacing: -.02em; }
.tts-player-sub { font-size: 11px; color: var(--text-dim); font-family: var(--mono); margin-top: 1px; }
.tts-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(116,49,143,.18);
  background: rgba(116,49,143,.07);
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tts-player-text {
  max-height: 92px;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid rgba(116,49,143,.12);
  background: rgba(116,49,143,.045);
  padding: 10px 11px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.tts-word { border-radius: 7px; padding: 1px 2px; transition: background .08s ease, color .08s ease; }
.tts-word.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(116,49,143,.10);
}
.tts-player-controls { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px; }
.tts-control-btn {
  border: 1px solid rgba(116,49,143,.16);
  background: rgba(255,255,255,.72);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 850;
  font-size: 12px;
  cursor: pointer;
}
.tts-control-btn.primary { background: linear-gradient(135deg, var(--accent), #9b63b7); color:#fff; border:0; }
.tts-control-btn.danger { color:#a72645; background: rgba(255,107,141,.08); border-color: rgba(255,107,141,.22); }
.tts-rate-label { margin-left:auto; display:flex; align-items:center; gap:6px; color: var(--text-dim); font-size: 11px; font-family: var(--mono); }
.tts-rate-select { border:1px solid rgba(116,49,143,.16); border-radius:999px; padding:7px 8px; background:#fff; color:var(--text); font-weight:800; }
body.theme-dark .tts-player {
  background: rgba(22,18,29,.96);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
body.theme-dark .tts-player-text { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
body.theme-dark .tts-control-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); color: var(--text); }
body.theme-dark .tts-rate-select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: var(--text); }
body.theme-dark .tts-word.active { color: #24102d; }
@media (max-width: 430px) {
  .tts-player { left: 8px; right: 8px; bottom: calc(74px + var(--safe-bot)); border-radius: 20px; }
  .tts-control-btn { padding: 8px 9px; }
  .tts-rate-label { width: 100%; margin-left: 0; justify-content: flex-end; }
}