/* ═══════════════════════════════════════════════════════════════════════════
   Omid Assistant — UI (neutral gray theme, clean)
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn.woff2') format('woff2-variations'), url('fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
  --fs: 15px;

  /* dark theme (default) — charcoal / neutral gray */
  --bg: #0e0f11;
  --bg2: #15161a;
  --panel: rgba(28, 29, 33, .86);
  --panel-solid: #1b1c20;
  --card: #1c1e22;
  --glass: rgba(255, 255, 255, .045);
  --glass2: rgba(255, 255, 255, .085);
  --border: rgba(255, 255, 255, .085);
  --border2: rgba(255, 255, 255, .15);
  --text: #ecedef;
  --text2: #adb1b8;
  --text3: #71767e;
  --accent: #c3c7cd;          /* neutral light gray accent */
  --accent2: #9aa0a8;
  --rocket: #f0a54a; --rocket2: #e2633f;
  --accent-solid: #26282d;
  --btn: #e6e8eb;             /* filled control on dark */
  --btn-text: #17181b;
  --btn-hover: #f1f2f4;
  --danger: #e07c6e;
  --warn: #d3a24c;
  --ok: #7fbd90;
  --user-bubble: #26272c;
  --user-border: rgba(255, 255, 255, .16);
  --code-bg: #17181c;
  --shadow: 0 16px 44px rgba(0, 0, 0, .5);
  --ring: rgba(255, 255, 255, .14);
  --radius: 16px;
  --sb-w: 300px;
  --panel-w: 480px;
  --scroll: rgba(255, 255, 255, .16);
}
html[data-theme="light"] {
  --bg: #edeef0;
  --bg2: #e4e6e9;
  --panel: rgba(255, 255, 255, .85);
  --panel-solid: #ffffff;
  --card: #ffffff;
  --glass: rgba(20, 22, 26, .035);
  --glass2: rgba(20, 22, 26, .07);
  --border: rgba(20, 22, 26, .1);
  --border2: rgba(20, 22, 26, .2);
  --text: #1a1b1f;
  --text2: #4d5158;
  --text3: #868b93;
  --accent: #54585f;
  --accent2: #7b8089;
  --rocket: #e88f2e; --rocket2: #d9532f;
  --accent-solid: #ececf0;
  --btn: #202226;
  --btn-text: #ffffff;
  --btn-hover: #2e3136;
  --danger: #b33a2e;
  --warn: #94600f;
  --ok: #2c7a4b;
  --user-bubble: #e0e2e6;
  --user-border: rgba(20, 22, 26, .14);
  --code-bg: #16181c;
  --shadow: 0 16px 44px rgba(40, 45, 55, .16);
  --ring: rgba(20, 22, 26, .18);
  --scroll: rgba(20, 22, 26, .24);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow: hidden; line-height: 1.7;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
::selection { background: rgba(140, 145, 152, .35); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
.muted { color: var(--text3); }
kbd { font: 11px var(--mono); background: var(--glass2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text2); direction: ltr; }

/* plain background — no decorative blobs */
.bg-orbs { display: none; }

/* ── icons (inline svg) ───────────────────────────────────────────────── */
svg.ico { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
i[data-icon] { width: 18px; height: 18px; flex: 0 0 auto; }
.icon-btn svg.ico { width: 18px; height: 18px; }
.msg-meta svg.ico, .sources svg.ico, .badge svg.ico { width: 13px; height: 13px; }
.sg-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent); flex: 0 0 auto; }
.sg-ic svg.ico { width: 20px; height: 20px; }

.logo { width: 30px; height: 30px; display: inline-block; border-radius: 9px; background: var(--accent-solid); border: 1px solid var(--border2); position: relative; flex: 0 0 auto; color: var(--text); }
.logo::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bdc3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Ccircle cx='19' cy='19' r='1.6'/%3E%3C/svg%3E") center/56% no-repeat; }
html[data-theme="light"] .logo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4e54' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Ccircle cx='19' cy='19' r='1.6'/%3E%3C/svg%3E"); }
.logo.big { width: 56px; height: 56px; border-radius: 17px; }

/* ── layout ───────────────────────────────────────────────────────────── */
.app { position: relative; z-index: 1; display: flex; height: 100%; }

.sidebar {
  width: var(--sb-w); flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px;
  background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-inline-end: 1px solid var(--border); transition: margin .28s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
.app.collapsed .sidebar { margin-inline-start: calc(-1 * var(--sb-w)); opacity: 0; pointer-events: none; }
.icon-btn.only-collapsed { display: none; }
.app.collapsed .icon-btn.only-collapsed { display: inline-flex; }

.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { display: block; font-weight: 750; font-size: 15px; letter-spacing: .1px; }
.brand small { color: var(--text3); font-size: 11px; }

.icon-btn { width: 36px; height: 36px; border-radius: 10px; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .1s; }
.icon-btn:hover { background: var(--glass2); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
/* v6.1: quiet dot on ⋯ when the sheet holds failed-attempt details */
.icon-btn.dot { position: relative; }
.icon-btn.dot::after { content: ''; position: absolute; top: 4px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn, #f0a35e); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn.sm svg { width: 15px; height: 15px; }

.new-chat {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 13px;
  background: var(--btn); color: var(--btn-text); font-weight: 650;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .12s, background .2s;
}
.new-chat:hover { background: var(--btn-hover); transform: translateY(-1px); }
.new-chat span { flex: 1; text-align: start; }
.new-chat kbd { background: rgba(127, 130, 135, .22); border-color: transparent; color: inherit; opacity: .8; font-size: 10px; }

.search-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 11px; background: var(--glass); border: 1px solid var(--border); color: var(--text3); }
.search-box:focus-within { border-color: var(--accent); color: var(--text); }
.search-box input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); min-width: 0; }
.search-box input::placeholder { color: var(--text3); }

.conv-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; margin: 0 -2px; }
.conv-group { font-size: 11px; color: var(--text3); font-weight: 600; padding: 12px 10px 4px; letter-spacing: .3px; }
.conv-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; color: var(--text2); transition: background .12s; position: relative; cursor: pointer; }
.conv-item:hover { background: var(--glass); color: var(--text); }
.conv-item.active { background: var(--glass2); color: var(--text); }
.conv-item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 22%; height: 56%; width: 3px; border-radius: 3px; background: var(--accent); }
.conv-item .ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.conv-item .pin { color: var(--warn); }
.conv-item .acts { display: none; gap: 2px; }
.conv-item:hover .acts, .conv-item.active .acts { display: inline-flex; }
.conv-item .acts .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.conv-item .acts svg { width: 14px; height: 14px; }
.conv-empty { padding: 30px 10px; text-align: center; color: var(--text3); font-size: 13px; }

.sb-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.sb-tool { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; color: var(--text2); font-size: 13px; transition: background .12s; }
.sb-tool:hover { background: var(--glass2); color: var(--text); }
.sb-tool em { font-style: normal; font-size: 11px; background: var(--glass2); border-radius: 20px; padding: 0 7px; color: var(--text3); margin-inline-start: auto; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(10px); }
.title-wrap { flex: 1; min-width: 0; }
.conv-title { width: 100%; background: none; border: 0; outline: 0; font-weight: 650; font-size: 15px; padding: 4px 8px; border-radius: 8px; color: var(--text); }
.conv-title:hover, .conv-title:focus { background: var(--glass); }
.conv-title::placeholder { color: var(--text3); }
.title-meta { font-size: 11.5px; color: var(--text3); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; gap: 4px; }

/* ── chat area ────────────────────────────────────────────────────────── */
.chat { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior: contain; }
.messages { max-width: 860px; margin: 0 auto; padding: 24px 20px 30px; display: flex; flex-direction: column; gap: 22px; }

.welcome { max-width: 760px; margin: 0 auto; padding: 8vh 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 30px; animation: fadeUp .45s ease both; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero h1 { margin: 8px 0 0; font-size: 31px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.hero p { margin: 0; color: var(--text2); max-width: 540px; font-size: 14.5px; }
.hero .badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero .badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; }
.suggest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.suggest button { text-align: start; padding: 14px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--border); color: var(--text2); transition: all .14s; display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.suggest button:hover { background: var(--glass2); border-color: var(--border2); color: var(--text); transform: translateY(-1px); }
.suggest button b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.suggest button span { font-size: 12.5px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.msg { display: flex; gap: 12px; animation: fadeUp .28s ease both; max-width: 100%; }
.msg.user { flex-direction: row-reverse; }
.avatar { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-size: 14px; font-weight: 700; margin-top: 2px; }
.msg.user .avatar { background: var(--glass2); border: 1px solid var(--border); color: var(--text2); }
.msg.model .avatar { background: var(--accent-solid); border: 1px solid var(--border2); color: var(--accent); position: relative; overflow: hidden; }
.msg.model .avatar::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bdc3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") center/52% no-repeat; }
html[data-theme="light"] .msg.model .avatar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5e64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E"); }
.msg.model.streaming .avatar::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--text3); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.bubble-wrap { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
.msg.user .bubble-wrap { max-width: min(78%, 680px); align-items: flex-end; }
.msg.model .bubble-wrap { flex: 1; }
.bubble { padding: 12px 16px; border-radius: var(--radius); position: relative; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.user .bubble { background: var(--user-bubble); border: 1px solid var(--user-border); border-start-end-radius: 6px; white-space: pre-wrap; }
.msg.model .bubble { background: var(--glass); border: 1px solid var(--border); border-start-start-radius: 6px; padding: 14px 18px; }
.bubble[dir="ltr"] { text-align: left; }
.bubble[dir="rtl"] { text-align: right; }

.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-attachments a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--glass2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text2); }
.msg-attachments img { max-width: 260px; max-height: 220px; border-radius: 12px; border: 1px solid var(--border); display: block; }

.msg-tools { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; flex-wrap: wrap; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
.msg-tools .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.msg-tools .icon-btn svg { width: 15px; height: 15px; }
.msg-meta { font-size: 11.5px; color: var(--text3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 0 4px; }
.msg-meta .tag { display: inline-flex; align-items: center; gap: 4px; }
.msg-meta .tag.model { color: var(--accent); font-weight: 600; }
.msg-meta .tag.err { color: var(--danger); }
.msg-meta .tag.warn { color: var(--warn); }

.thoughts { font-size: 13px; color: var(--text2); }
.thoughts summary { cursor: pointer; color: var(--text3); display: flex; align-items: center; gap: 8px; list-style: none; }
.thoughts summary::-webkit-details-marker { display: none; }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.sources { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.sources a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 18px; background: var(--glass2); border: 1px solid var(--border); font-size: 12px; color: var(--text2); max-width: 280px; transition: all .12s; }
.sources a:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.sources a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sources .q { font-size: 11.5px; color: var(--text3); width: 100%; }
.sources .q b { color: var(--text2); font-weight: 500; }

.stream-cursor::after { content: ''; display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; margin-inline-start: 3px; border-radius: 2px; background: var(--accent); animation: pulse .9s infinite; }
.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.error-box { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); border-radius: 12px; padding: 10px 14px; color: var(--danger); font-size: 13.5px; white-space: pre-wrap; display: flex; gap: 10px; align-items: flex-start; }
.error-box button { margin-inline-start: auto; color: var(--text); background: var(--glass2); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }
.switch-note { font-size: 12px; color: var(--text2); background: var(--glass); border: 1px dashed var(--border2); border-radius: 10px; padding: 6px 10px; }

/* ── markdown ─────────────────────────────────────────────────────────── */
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .5em 0 .8em; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.2em 0 .5em; line-height: 1.4; font-weight: 700; }
.md h1 { font-size: 1.45em; } .md h2 { font-size: 1.28em; } .md h3 { font-size: 1.12em; } .md h4 { font-size: 1em; }
.md ul, .md ol { padding-inline-start: 1.5em; margin: .4em 0 .9em; }
.md li { margin: .25em 0; } .md li > p { margin: .2em 0; }
.md blockquote { margin: .8em 0; padding: 6px 14px; border-inline-start: 3px solid var(--accent); background: var(--glass); border-radius: 8px; color: var(--text2); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }
.md img { max-width: 100%; border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .93em; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 7px 11px; text-align: start; }
.md th { background: var(--glass2); font-weight: 600; }
.md tr:nth-child(even) td { background: var(--glass); }
.md code { font-family: var(--mono); font-size: .88em; background: var(--glass2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; direction: ltr; unicode-bidi: embed; }
.md pre { position: relative; margin: .9em 0; border-radius: 13px; background: var(--code-bg); border: 1px solid var(--border); overflow: hidden; direction: ltr; text-align: left; }
.md pre code { display: block; padding: 40px 16px 16px; overflow-x: auto; background: none; border: 0; border-radius: 0; font-size: 13px; line-height: 1.65; color: #e3e6ea; }
.md pre .code-head { position: absolute; top: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 14px; font: 11.5px var(--mono); color: #9aa0a8; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.md pre .code-head button { color: #9aa0a8; font: 11.5px var(--font); display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; border-radius: 6px; }
.md pre .code-head button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.md pre .code-head button svg { width: 13px; height: 13px; }
.md a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2px; }
.md input[type=checkbox] { margin-inline-end: 6px; }
.md .cite { font-size: .7em; vertical-align: super; color: var(--accent); }

/* ── composer ─────────────────────────────────────────────────────────── */
.composer-wrap { padding: 6px 16px 10px; background: linear-gradient(to top, var(--bg) 35%, transparent); }
.status-line { max-width: 860px; margin: 0 auto 8px; font-size: 12.5px; color: var(--text2); display: flex; gap: 8px; align-items: center; padding: 0 8px; animation: fadeUp .2s; }
.status-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); animation: pulse 1s infinite; }
.composer { max-width: 860px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border2); border-radius: 18px; padding: 10px 12px 8px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring), var(--shadow); }
.composer textarea { width: 100%; background: none; border: 0; outline: 0; resize: none; max-height: 40vh; padding: 6px 8px; line-height: 1.65; color: var(--text); }
.composer textarea::placeholder { color: var(--text3); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.cb-left, .cb-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; color: var(--text2); font-size: 13px; transition: all .12s; border: 1px solid transparent; }
.chip-btn:hover { background: var(--glass2); color: var(--text); }
.chip-btn.toggle.on { background: var(--glass2); color: var(--text); border-color: var(--border2); }
.chip-btn.on.voice-on { background: var(--btn); color: var(--btn-text); }
.chip-btn svg { width: 17px; height: 17px; }
.counter { font-size: 11px; color: var(--text3); font-family: var(--mono); direction: ltr; }
.send { width: 40px; height: 40px; border-radius: 12px; background: var(--btn); color: var(--btn-text); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: transform .12s, background .15s, opacity .15s; }
.send:hover { background: var(--btn-hover); }
.send:disabled { opacity: .4; box-shadow: none; transform: none; }
.send.stop { background: var(--danger); color: #fff; }
.send svg { width: 19px; height: 19px; }
.foot-note { max-width: 860px; margin: 6px auto 0; text-align: center; font-size: 11px; color: var(--text3); }

.attach-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 6px 8px; }
.att { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 11px; background: var(--glass2); border: 1px solid var(--border); font-size: 12.5px; max-width: 260px; position: relative; }
.att img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; }
.att .ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--glass2); font-size: 11px; font-weight: 700; color: var(--text2); font-family: var(--mono); }
.att .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att small { display: block; color: var(--text3); font-size: 11px; }
.att .rm { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--text3); }
.att .rm:hover { background: var(--danger); color: #fff; }
.att.err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--glass2)); }
.att.err .ic { color: var(--danger); }
.att-bar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--glass2); overflow: hidden; }
.att-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .18s ease; }
.att-pct { font-size: 10px; color: var(--accent); font-weight: 700; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.att-retry { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--danger); flex: none; }
.att-retry:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }
/* photos the model "sends back" — slightly larger cards under the reply */
.model-atts { margin: 2px 0 4px; }
.model-atts .att-img { width: 132px; height: 100px; border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--border); background: var(--glass2); }
.model-atts .att-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.model-atts .att-img:hover img { transform: scale(1.06); }
.model-atts .att-img .zoom { position: absolute; bottom: 6px; inset-inline-start: 6px; width: 24px; height: 24px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; }
.model-atts .att-img:hover .zoom { opacity: 1; }
/* full-window dropzone */
.dropzone { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.dropzone.show { opacity: 1; }
.dz-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 38px 56px; border-radius: 24px; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid)); box-shadow: 0 24px 80px rgba(0,0,0,.35); transform: translateY(6px); transition: transform .15s ease; }
.dropzone.show .dz-inner { transform: translateY(0); }
.dz-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.dz-ic svg { width: 28px; height: 28px; }
.dz-inner b { font-size: 16px; }
.dz-inner small { color: var(--text3); font-size: 12px; }
@keyframes slide { to { background-position: 32px 0; } }

.scroll-down { position: absolute; bottom: 150px; inset-inline-end: 24px; width: 38px; height: 38px; border-radius: 50%; background: var(--panel-solid); border: 1px solid var(--border2); color: var(--text2); display: grid; place-items: center; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; z-index: 2; }
.scroll-down.hide { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* dropdowns */
.dropdown { position: relative; }
.dd-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; min-width: 300px; max-height: 60vh; overflow-y: auto; background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); display: none; z-index: 20; animation: fadeUp .15s; }
.dd-menu.compact { min-width: 190px; }
.dropdown.open .dd-menu { display: block; }
.dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; text-align: start; color: var(--text2); transition: background .1s; }
.dd-item:hover { background: var(--glass2); color: var(--text); }
.dd-item.sel { color: var(--text); background: var(--glass); }
.dd-item.sel::after { content: '✓'; color: var(--accent); margin-inline-start: auto; font-weight: 700; }
.dd-item .nm { display: block; font-size: 13.5px; font-weight: 600; }
.dd-item .ds { display: block; font-size: 11.5px; color: var(--text3); }
.dd-item .av { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dd-item .av.off { background: var(--danger); box-shadow: none; }
.dd-item .av.warn { background: var(--warn); box-shadow: none; }
.dd-item.disabled { opacity: .5; }
.dd-head { font-size: 11px; color: var(--text3); padding: 8px 12px 4px; font-weight: 600; }

/* ── side panel ───────────────────────────────────────────────────────── */
.panel-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 30; }
.panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(var(--panel-w), 100vw); background: var(--panel-solid); border-inline-start: 1px solid var(--border2); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); z-index: 31; display: flex; flex-direction: column; box-shadow: var(--shadow); }
html[dir="rtl"] .panel { transform: translateX(-100%); }
html[dir="ltr"] .panel { transform: translateX(100%); }
.app.panel-open .panel { transform: none !important; }
.app.panel-open .panel-backdrop { opacity: 1; pointer-events: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 14px; }
.panel h3 { margin: 10px 0 4px; font-size: 13px; color: var(--text3); font-weight: 650; letter-spacing: .3px; text-transform: uppercase; }
.card { background: var(--glass); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.card.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.card.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.card .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .row .grow { flex: 1; min-width: 0; }
.card .ttl { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card .sub { font-size: 12px; color: var(--text3); font-family: var(--mono); direction: ltr; text-align: start; }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 20px; background: var(--glass2); color: var(--text2); border: 1px solid var(--border); }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.badge.paid { color: var(--accent); border-color: var(--border2); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; color: var(--text2); display: flex; justify-content: space-between; }
.field label small { color: var(--text3); }
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea, .field select {
  background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; outline: 0; color: var(--text); width: 100%; transition: border-color .12s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 70px; line-height: 1.6; }
.field select option { background: var(--panel-solid); color: var(--text); }
.field.inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field input.mono { font-family: var(--mono); direction: ltr; }
.field .help { font-size: 11.5px; color: var(--text3); line-height: 1.55; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--glass2); border: 1px solid var(--border2); border-radius: 24px; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 18px; height: 18px; inset-inline-start: 2px; top: 2px; border-radius: 50%; background: var(--text3); transition: .2s; }
.switch input:checked + span { background: var(--btn); border-color: transparent; }
.switch input:checked + span::before { background: var(--btn-text); transform: translateX(-18px); }
html[dir="ltr"] .switch input:checked + span::before { transform: translateX(18px); }

button.primary { background: var(--btn); color: var(--btn-text); padding: 9px 16px; border-radius: 10px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; justify-content: center; transition: background .15s, transform .1s; }
button.primary:hover { background: var(--btn-hover); }
button.primary:active { transform: scale(.98); }
button.ghost { background: var(--glass); border: 1px solid var(--border); color: var(--text2); padding: 8px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
button.ghost:hover { background: var(--glass2); color: var(--text); }
button.ghost.sm, button.primary.sm, button.danger.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
button.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); padding: 8px 14px; border-radius: 10px; }
button.danger:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }

.key-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.km { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text3); padding: 3px 6px; border-radius: 7px; background: var(--glass); }
.km .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.km.locked .dot { background: var(--danger); }
.km.locked { color: var(--text2); }
.km .n { margin-inline-start: auto; font-family: var(--mono); font-size: 10.5px; }
.km .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card.mem-item { flex-direction: row; gap: 12px; align-items: flex-start; padding: 10px 12px; }
.mem-item .side { display: flex; flex-direction: column; gap: 6px; align-items: center; flex: 0 0 auto; }
.mem-item .cat { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--glass2); color: var(--text2); white-space: nowrap; cursor: pointer; }
.mem-item .txt { flex: 1; min-width: 0; line-height: 1.6; font-size: 13.5px; }
.mem-item .txt[contenteditable]:focus { outline: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; }
.mem-item.off .txt { opacity: .45; text-decoration: line-through; }
.mem-item .imp { display: inline-flex; gap: 2px; cursor: pointer; }
.mem-item .imp b { width: 5px; height: 12px; border-radius: 2px; background: var(--glass2); display: inline-block; }
.mem-item .imp b.on { background: var(--accent); }
.mem-item .acts { display: flex; flex-direction: column; gap: 2px; opacity: .35; transition: opacity .15s; flex: 0 0 auto; }
.mem-item:hover .acts { opacity: 1; }

.usage-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.usage-table th, .usage-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: start; white-space: nowrap; }
.usage-table th { color: var(--text3); font-weight: 600; font-size: 11.5px; }
.usage-table td.num { font-family: var(--mono); direction: ltr; text-align: end; }
.usage-table .err { color: var(--danger); }
.bar { height: 6px; border-radius: 6px; background: var(--glass2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--btn); border-radius: 6px; }

/* ── voice (live talk) ─────────────────────────────────────────────────── */
.voice-ui { position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%); width: min(620px, 94vw); z-index: 45; }
.voice-panel { background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: fadeUp .2s ease both; }
.voice-head { display: flex; align-items: center; justify-content: space-between; }
.voice-head .vh-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; }
.vdot { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); transition: background .2s; flex: 0 0 auto; }
.vdot.live { background: var(--danger); animation: pulse 1.2s infinite; }
.vdot.busy { background: var(--ok); }
.voice-trans { min-height: 58px; max-height: 150px; overflow-y: auto; background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; font-size: 14.5px; line-height: 1.8; white-space: pre-wrap; }
.voice-trans .ph { color: var(--text3); font-size: 13px; }
.voice-trans .interim { color: var(--text2); }
.voice-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-mic { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; background: var(--btn); color: var(--btn-text); font-weight: 700; transition: background .15s, transform .1s; }
.voice-mic:hover { background: var(--btn-hover); }
.voice-mic.listening { background: var(--danger); color: #fff; animation: pulse 1.4s infinite; }
.voice-mic svg { width: 19px; height: 19px; }
.v-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); cursor: pointer; user-select: none; }
.v-opt input { accent-color: var(--btn-text); }
.voice-controls select.v-lang { background: var(--glass); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none; }
.voice-controls select.v-lang:focus { border-color: var(--ring); }
.v-say { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); }
.v-say .eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.v-say .eq i { width: 3px; border-radius: 2px; background: var(--accent); animation: eqb .8s infinite ease-in-out; }
.v-say .eq i:nth-child(1){height:8px} .v-say .eq i:nth-child(2){height:13px;animation-delay:.15s} .v-say .eq i:nth-child(3){height:10px;animation-delay:.3s}
@keyframes eqb { 0%,100%{transform:scaleY(.5);opacity:.5} 50%{transform:scaleY(1);opacity:1} }
.v-voice-note { font-size: 11.5px; color: var(--text3); line-height: 1.6; }

/* ── login / fatal / toasts / modal ───────────────────────────────────── */
.fatal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.fatal-card { width: min(400px, 100%); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; box-shadow: var(--shadow); }
/* ── v6.0 lock screen — mesh glow + floating orbs + glass card ───────────── */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overflow: hidden;
  background:
    radial-gradient(600px 380px at 50% -80px, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(500px 420px at 88% 108%, rgba(240,165,74,.08), transparent 70%),
    radial-gradient(520px 440px at 8% 100%, rgba(150,160,175,.08), transparent 70%),
    var(--bg); }
html[data-theme="light"] .login {
  background:
    radial-gradient(600px 380px at 50% -80px, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(500px 420px at 88% 108%, rgba(232,143,46,.12), transparent 70%),
    radial-gradient(520px 440px at 8% 100%, rgba(90,100,115,.1), transparent 70%),
    var(--bg); }
.login-orbs { position: absolute; inset: 0; pointer-events: none; }
.login-orbs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: orbFloat 11s ease-in-out infinite; }
.login-orbs i:nth-child(1) { width: 260px; height: 260px; top: 8%; inset-inline-start: 6%; background: rgba(240,165,74,.22); }
.login-orbs i:nth-child(2) { width: 300px; height: 300px; bottom: 4%; inset-inline-end: 4%; background: rgba(150,160,180,.2); animation-delay: -4s; }
.login-orbs i:nth-child(3) { width: 170px; height: 170px; top: 60%; inset-inline-start: 12%; background: rgba(226,99,63,.14); animation-delay: -7s; }
@keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.06); } }
.fatal-card { width: min(620px, 100%); align-items: flex-start; text-align: start; }
.fatal-card h1 { margin: 0; font-size: 20px; }
.fatal-card code { font-family: var(--mono); background: var(--glass2); padding: 1px 6px; border-radius: 6px; direction: ltr; unicode-bidi: embed; }
.login-card { position: relative; width: min(380px, 100%); background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border2); border-radius: 24px; padding: 34px 30px 26px; display: flex; flex-direction: column; gap: 12px;
  align-items: center; text-align: center; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 0 rgba(255,255,255,.08) inset;
  animation: fadeUp .35s ease both; }
.login-card::before { content: ''; position: absolute; top: 0; inset-inline: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent2), transparent); opacity: .7; }
.login-card .logo.big.ring { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35); }
.login-card h2 { margin: 2px 0 0; font-size: 26px; letter-spacing: -.5px; }
.login-card .tagline { margin: 0; font-size: 13px; color: var(--text3); }
.login-clock { display: flex; flex-direction: column; line-height: 1.4; margin: 2px 0 4px; }
.login-clock b { font-size: 34px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.login-clock span { font-size: 12.5px; color: var(--text3); }
.pw-wrap { position: relative; width: 100%; }
.login-card input { width: 100%; background: var(--glass); border: 1px solid var(--border2); border-radius: 13px; padding: 12px 44px 12px 14px; outline: 0; text-align: center; font-size: 16px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
[dir="ltr"] .login-card input { padding: 12px 14px 12px 44px; }
.login-card input:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px var(--ring); }
.pw-eye { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--text3); }
.pw-eye:hover { color: var(--text); background: var(--glass2); }
.pw-eye svg.ico { width: 19px; height: 19px; }
.pw-eye.off { opacity: .45; }
.login-card .primary { width: 100%; padding: 12px 16px; border-radius: 13px; font-size: 15px; }
.login-card .primary:disabled { opacity: .55; cursor: wait; }
.login-card .err { color: var(--danger); font-size: 13px; min-height: 1.2em; }
.login-card .err:empty { min-height: 0; }
.login-caps { font-size: 12px; color: var(--warn); }
.login-fails { font-size: 12px; color: var(--text3); }
.login-foot { margin-top: 4px; font-size: 11.5px; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.login-foot svg.ico { width: 13px; height: 13px; }
.login-card.shake { animation: loginShake .4s ease; }
@keyframes loginShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
@media (max-width: 480px) {
  .login { padding: 14px; }
  .login-card { padding: 28px 22px 22px; border-radius: 20px; }
  .login-orbs i { filter: blur(56px); opacity: .4; }
}

.toasts { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: none; background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 13px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13.5px; max-width: 380px; animation: fadeUp .25s; display: flex; gap: 10px; align-items: flex-start; }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); } .toast.err { border-color: color-mix(in srgb, var(--danger) 60%, transparent); } .toast.warn { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.toast i { font-style: normal; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 70; display: grid; place-items: center; padding: 20px; animation: fadeUp .15s; }
.modal { width: min(420px, 100%); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.modal h3 { margin: 0 0 8px; } .modal p { margin: 0 0 18px; color: var(--text2); white-space: pre-wrap; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.empty { text-align: center; color: var(--text3); padding: 30px 10px; font-size: 13.5px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sb-w: 280px; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 25; box-shadow: var(--shadow); }
  .app:not(.collapsed) .sidebar + .main::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 24; }
  .icon-btn.only-collapsed { display: inline-flex; }
  .messages { padding: 16px 12px 20px; }
  .msg.user .bubble-wrap { max-width: 90%; }
  .suggest { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
  .composer-wrap { padding: 4px 8px 8px; }
  .composer .chip-btn span { display: none; }
  .foot-note { display: none; }
  .new-chat kbd { display: none; }
  .voice-ui { bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.3 — motion, splash, live-voice orb, responsive polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* keyframes library */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.92); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
@keyframes msgIn    { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rise     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slideL   { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes slideR   { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes pulse    { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes blink    { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes floaty   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shimmer  { from { background-position: -180% 0; } to { background-position: 180% 0; } }
@keyframes ripple   { 0% { transform: scale(.6); opacity: .55; } 80% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes orbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes eq1 { 0%,100%{ transform: scaleY(.35);} 50%{ transform: scaleY(1);} }
@keyframes wobble  { 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }

/* focus visibility (a11y + polish) */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* ambient background: calm neutral vignette, no gimmick colors */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(900px 460px at 0% 110%, rgba(255,255,255,.03), transparent 60%);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(30,34,40,.05), transparent 60%),
    radial-gradient(900px 460px at 0% 110%, rgba(30,34,40,.035), transparent 60%);
}
.app, .login { position: relative; z-index: 1; }

/* ── splash ─────────────────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; background: var(--bg); transition: opacity .3s ease;
}
.splash.off { opacity: 0; pointer-events: none; }
.splash b { font-size: 20px; letter-spacing: -.2px; animation: fadeIn .6s .1s both; }
.splash small { color: var(--text3); font-size: 12.5px; animation: fadeIn .6s .25s both; }
.splash-orb { position: relative; width: 120px; height: 120px; display: grid; place-items: center; animation: fadeIn .4s both; }
.splash-orb .s-logo { position: relative; z-index: 2; animation: orbPulse 1.8s ease-in-out infinite; }
.splash-orb .logo.big { width: 62px; height: 62px; border-radius: 19px; }
.splash-orb .sr { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border2); }
.splash-orb .sr.r1 { animation: ripple 2.6s ease-out infinite; }
.splash-orb .sr.r2 { animation: ripple 2.6s ease-out 1.3s infinite; }
.splash-orb .sr.r3 { animation: pulse 2.4s ease-in-out infinite; border-style: dashed; }

/* ── micro-motion: messages & lists ────────────────────────────────────── */
.msg { animation: msgIn .32s cubic-bezier(.2,.7,.3,1) both; }
.welcome { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
.welcome .hero > * { animation: fadeUp .5s ease both; }
.welcome .hero > *:nth-child(1) { animation-delay: .05s; }
.welcome .hero > *:nth-child(2) { animation-delay: .13s; }
.welcome .hero > *:nth-child(3) { animation-delay: .21s; }
.welcome .hero > *:nth-child(4) { animation-delay: .29s; }
.suggest button { animation: fadeUp .42s ease both; }
.suggest button:nth-child(1) { animation-delay: .16s; } .suggest button:nth-child(2) { animation-delay: .22s; }
.suggest button:nth-child(3) { animation-delay: .28s; } .suggest button:nth-child(4) { animation-delay: .34s; }
.conv-item { animation: slideL .22s ease both; }
.dd-menu { animation: popIn .14s ease both; transform-origin: bottom; }
.panel { transition: transform .32s cubic-bezier(.2,.75,.25,1); }
.panel-body > * { animation: fadeUp .26s ease both; }
.toast { animation: rise .28s cubic-bezier(.2,.7,.3,1) both; }
.empty { animation: fadeIn .3s both; }

/* subtle control motion */
.icon-btn, .chip-btn, .send, .primary, .ghost, .danger, .new-chat { transition: transform .12s ease, background .18s ease, border-color .18s, color .18s, box-shadow .18s; }
.icon-btn:active, .chip-btn:active { transform: scale(.9); }
.msg:hover { transition: background .15s; }
.msg.user .bubble, .msg.model .bubble { transition: box-shadow .2s; }
.msg.user .bubble:hover, .msg.model .bubble:hover { box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.avatar { transition: transform .2s ease; }
.msg:hover .avatar { transform: scale(1.06); }
.typing i { animation: bounce 1.2s infinite; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

/* streaming dot in the send button */
.send.working::after { content: ''; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid var(--text3); border-top-color: transparent; animation: spin .9s linear infinite; }
.send { position: relative; }
.send:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.send:active { transform: scale(.94); }

/* welcome hero logo gentle float */
.hero .logo.big { animation: floaty 4.5s ease-in-out infinite; }
.badges span svg.ico { width: 13px; height: 13px; color: var(--text3); }

/* status pill */
.status-line { transition: opacity .2s; }

/* ── live voice overlay (orb) ───────────────────────────────────────────── */
.voice-live {
  position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  animation: fadeIn .22s ease both;
}
.vl-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.vl-brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 15px; }
.logo.sml { width: 26px; height: 26px; border-radius: 8px; }
.vl-opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.v-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); cursor: pointer; user-select: none; padding: 5px 10px; border-radius: 20px; background: var(--glass); border: 1px solid var(--border); transition: background .15s, border-color .15s; }
.v-opt:hover { border-color: var(--border2); background: var(--glass2); }
.v-opt input { accent-color: var(--btn-text); margin: 0; }
.v-opt svg.ico { width: 14px; height: 14px; color: var(--text3); }
select.v-lang { background: var(--glass); color: var(--text); border: 1px solid var(--border); border-radius: 20px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer; outline: none; }
select.v-lang:focus { border-color: var(--accent); }
select.v-lang option { background: var(--panel-solid); }
.v-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 2px; }
.v-seg button { border: 0; background: transparent; color: var(--text2); font: inherit; font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 16px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.v-seg button:hover { color: var(--text); }
.v-seg button.on { background: var(--accent); color: var(--btn-text); font-weight: 700; }

.vl-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2.6vh, 26px); padding: 18px 20px 30px; min-height: 0; position: relative;
}

/* the orb */
.vl-orb { --d: clamp(148px, 30vmin, 196px); position: relative; width: var(--d); height: var(--d); display: grid; place-items: center; }
.vl-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vl-orb .rl { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--border2); opacity: 0; }
.vl-stage[data-state="listen"] .vl-orb .rl.r1 { animation: ripple 1.7s ease-out infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r2 { animation: ripple 1.7s ease-out .34s infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r3 { animation: ripple 1.7s ease-out .68s infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r4 { animation: ripple 1.7s ease-out 1.02s infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r5 { animation: ripple 1.7s ease-out 1.36s infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl { opacity: .55; }
.vl-core {
  position: relative; width: calc(var(--d) * .66); height: calc(var(--d) * .66); border-radius: 50%;
  display: grid; place-items: center; z-index: 2; overflow: hidden;
  background: linear-gradient(160deg, var(--accent-solid), var(--panel-solid));
  border: 1px solid var(--border2);
  box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 0 26px rgba(255,255,255,.04);
  transition: box-shadow .3s, background .3s;
}
.vl-core svg.ico { width: clamp(30px, 6vmin, 40px); height: clamp(30px, 6vmin, 40px); stroke-width: 1.7; }
.vl-core .vl-c-eq { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.vl-core .vl-c-eq i { width: 5px; border-radius: 4px; background: var(--accent); height: 46%; animation: eq1 .7s ease-in-out infinite; transform-origin: center; }
.vl-core .vl-c-eq i:nth-child(2) { animation-delay: .12s; } .vl-core .vl-c-eq i:nth-child(3) { animation-delay: .24s; } .vl-core .vl-c-eq i:nth-child(4) { animation-delay: .36s; }

.vl-stage[data-state="listen"] .vl-orb .rl { opacity: .5; }
.vl-stage[data-state="listen"] .vl-orb .rl.r1 { animation: ripple 2.4s ease-out infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r2 { animation: ripple 2.4s ease-out .8s infinite; }
.vl-stage[data-state="listen"] .vl-orb .rl.r3 { animation: ripple 2.4s ease-out 1.6s infinite; }
.vl-stage[data-state="listen"] .vl-core { animation: orbPulse 1.15s ease-in-out infinite; box-shadow: 0 0 0 10px color-mix(in srgb, var(--text3) 10%, transparent), 0 14px 40px rgba(0,0,0,.4); }
.vl-stage[data-state="busy"] .vl-core { border-color: var(--warn); animation: orbPulse 1.3s ease-in-out infinite; }
.vl-stage[data-state="busy"] .vl-orb .rl.r3 { border-color: var(--warn); animation: pulse 1.1s infinite; opacity: .7; }
.vl-stage[data-state="speak"] .vl-core { border-color: var(--ok); box-shadow: 0 0 0 12px color-mix(in srgb, var(--ok) 12%, transparent), 0 14px 40px rgba(0,0,0,.4); }
.vl-stage[data-state="speak"] .vl-orb .rl { border-color: color-mix(in srgb, var(--ok) 55%, transparent); animation: ripple 1.5s ease-out infinite; opacity: .7; }
.vl-stage[data-state="speak"] .vl-orb .rl.r1 { animation-delay: 0s; }
.vl-stage[data-state="speak"] .vl-orb .rl.r2 { animation-delay: .3s; }
.vl-stage[data-state="speak"] .vl-orb .rl.r3 { animation-delay: .6s; }
.vl-stage[data-state="speak"] .vl-orb .rl.r4 { animation-delay: .9s; }
.vl-stage[data-state="speak"] .vl-orb .rl.r5 { animation-delay: 1.2s; }
.vl-orb.speaking { animation: orbPulse 1.5s ease-in-out infinite; }
.vl-orb.vl-live { cursor: pointer; }
.vl-orb.vl-live:active .vl-core { transform: scale(.97); }
.vl-orb.vl-mic-hot .vl-core { box-shadow: 0 0 0 15px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 40px rgba(0,0,0,.42); }
.vl-orb.vl-hot .vl-core { border-color: var(--ok); box-shadow: 0 0 0 16px color-mix(in srgb, var(--ok) 20%, transparent), 0 0 38px color-mix(in srgb, var(--ok) 32%, transparent), 0 14px 40px rgba(0,0,0,.42); }
.vl-orb.vl-hot { animation: orbPulse 1.2s ease-in-out infinite; }
/* live caller is speaking → the orb visibly reacts the instant voice is heard */
.vl-orb.vl-hear .vl-core { border-color: var(--accent); box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 46px color-mix(in srgb, var(--accent) 42%, transparent), 0 14px 40px rgba(0,0,0,.42); }
.vl-orb.vl-hear { animation: orbPulse .8s ease-in-out infinite; }
.vl-stage[data-state="listen"] .vl-orb.vl-hear .rl { animation-duration: .8s; opacity: .95; border-color: color-mix(in srgb, var(--accent) 62%, transparent); }

.vl-state { font-size: clamp(15px, 2.4vmin, 18px); font-weight: 750; color: var(--text); animation: fadeUp .25s ease both; }
.vl-trans {
  width: min(680px, 96vw); min-height: 62px; max-height: 168px; overflow-y: auto;
  background: var(--glass); border: 1px solid var(--border); border-radius: 18px;
  padding: 14px 18px; font-size: clamp(15px, 2.3vmin, 17px); line-height: 1.85;
  white-space: pre-wrap; text-align: center; scrollbar-width: thin;
}
.vl-trans .ph { color: var(--text3); font-size: 13.5px; }
.vl-trans .interim { color: var(--text2); }
.vl-trans .final { color: var(--text); }
.vl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vl-mic {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px;
  background: var(--btn); color: var(--btn-text); font-weight: 750; font-size: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s, background .18s, box-shadow .2s;
  animation: popIn .3s ease both;
}
.vl-mic:hover { transform: translateY(-2px); background: var(--btn-hover); }
.vl-mic:active { transform: scale(.95); }
.vl-mic svg.ico { width: 22px; height: 22px; }
.vl-mic.on { background: var(--danger); color: #fff; box-shadow: 0 0 0 9px color-mix(in srgb, var(--danger) 18%, transparent), 0 8px 24px rgba(0,0,0,.3); animation: orbPulse 1.2s infinite; }
.vl-hint { font-size: 12px; color: var(--text3); text-align: center; max-width: 560px; line-height: 1.7; margin: 0; animation: fadeIn .5s .15s both; }
.vl-clear { }

/* tiny inline code look inside panels */
code.p { font-family: var(--mono); direction: ltr; unicode-bidi: embed; font-size: .92em; }

/* search sources chips entrance */
.sources a { animation: popIn .2s ease both; }
.sources a:nth-child(1) { animation-delay: .02s; } .sources a:nth-child(2) { animation-delay: .05s; } .sources a:nth-child(3) { animation-delay: .08s; }

/* ── responsive: phones & tablets ───────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --panel-w: 100vw; }
  .messages { padding: 14px 10px 22px; gap: 18px; }
  .msg { gap: 8px; }
  .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .msg.user .bubble-wrap { max-width: 96%; }
  .msg.model .bubble { padding: 11px 13px; }
  .hero h1 { font-size: 21px; }
  .hero p { font-size: 13px; }
  .welcome { padding-top: 3vh; gap: 22px; }
  .topbar { padding: 8px 8px; }
  .conv-title { font-size: 13.5px; }
  .composer-wrap { padding: 2px 6px 6px; }
  .composer { border-radius: 16px; padding: 8px 8px 6px; }
  .cb-left .chip-btn, .cb-left .dropdown { flex: 0 0 auto; }
  .dd-menu { position: fixed; inset-inline-start: 10px; right: 10px; bottom: 96px; min-width: 0; width: calc(100vw - 20px); max-height: 52vh; }
  .status-line { font-size: 12px; }
  .msg-tools { opacity: 1; }
  .scroll-down { bottom: 128px; inset-inline-end: 12px; }
  .panel { width: 100vw; }
  .grid2 { grid-template-columns: 1fr; }
  .suggest { gap: 8px; }
  .key-models { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .code-head { font-size: 11px; }
}

/* keyboard-visible phones / short screens: keep composer reachable, orb compact */
@media (max-width: 480px) {
  .vl-head { padding: 10px 12px; gap: 6px; }
  .vl-brand b { font-size: 13.5px; }
  .vl-opts .v-opt { padding: 3px 8px; font-size: 11.5px; }
  .vl-stage { gap: 10px; padding: 8px 10px 20px; }
  .vl-trans { min-height: 54px; max-height: 110px; }
  .vl-mic { padding: 11px 18px; font-size: 13.5px; }
  .logo.big { width: 44px; height: 44px; border-radius: 13px; }
  .msg-meta { gap: 6px; font-size: 10.5px; }
  .badges span { font-size: 10.5px; padding: 3px 9px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .vl-stage { flex-direction: row; flex-wrap: wrap; overflow-y: auto; }
  .vl-orb { --d: 110px; }
  .vl-core svg.ico { width: 26px; height: 26px; }
}

/* reduced motion: keep a calm pulse-free experience */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.0.0 — UI refinement: no text focus ring, phosphor highlight, charts,
   premium toasts, chat decluttering, compact attachments, lightbox.
   ═══════════════════════════════════════════════════════════════════════════ */

/* highlight colour — phosphor green (AI-controlled via ==…==) */
:root {
  --hi: #c6ff3d;                          /* vivid phosphor */
  --hi-soft: color-mix(in srgb, #c6ff3d 16%, transparent);
  --hl-ink: #0c1202;                      /* text on highlight (dark theme) */
  --hl-marker: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 58%), #a6e21a;
}
html[data-theme="light"] {
  --hi: #5d9000;
  --hi-soft: color-mix(in srgb, #8fce00 16%, transparent);
  --hl-ink: #071000;
  --hl-marker: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 58%), #84bf0c;
}

/* kill the small white focus ring on the composer textarea + form fields.
   The composer still gets one subtle border change so focus is visible. */
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
textarea:focus-visible, input:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: none !important; box-shadow: none !important; }
.composer:focus-within { border-color: var(--border2); box-shadow: var(--shadow); }
.composer textarea:focus, .composer textarea:focus-visible { outline: none !important; border: 0 !important; box-shadow: none !important; }
.conv-title:focus-visible, .search-box input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .vl-trans:focus-visible, textarea.bubble:focus-visible { outline: none !important; box-shadow: none !important; }

/* ── premium toasts ─────────────────────────────────────────────────────── */
.toasts { gap: 10px; bottom: 22px; inset-inline-start: 22px; }
.toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px;
  min-width: 250px; max-width: min(430px, calc(100vw - 40px));
  background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 14px;
  padding: 11px 12px 11px 10px; box-shadow: 0 14px 40px rgba(0,0,0,.4);
  animation: rise .32s cubic-bezier(.2,.7,.3,1) both; backdrop-filter: blur(10px);
}
.toast .t-ic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  color: var(--text3); background: var(--glass2); border: 1px solid var(--border);
}
.toast .t-ic svg.ico { width: 16px; height: 16px; }
.toast .t-msg { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.6; word-break: break-word; }
.toast .t-x { pointer-events: auto; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; color: var(--text3); display: grid; place-items: center; }
.toast .t-x:hover { background: var(--glass2); color: var(--text); }
.toast .t-x svg.ico { width: 13px; height: 13px; }
.toast .t-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--border); transform-origin: 100% 50%; animation: tshrink linear both; opacity: .9; }
html[data-theme="light"] .toast .t-bar { background: var(--border2); }
@keyframes tshrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); } .toast.ok .t-ic { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } .toast.ok .t-bar { background: var(--ok); }
.toast.err { border-color: color-mix(in srgb, var(--danger) 60%, transparent); } .toast.err .t-ic { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); } .toast.err .t-bar { background: var(--danger); }
.toast.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); } .toast.warn .t-ic { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } .toast.warn .t-bar { background: var(--warn); }
.toast.info { border-color: var(--border2); }

/* ── important-phrase highlight (==…==) — plain green text only ────────── */
.md mark.hl {
  color: var(--hi);
  background: none; border-radius: 0; padding: 0; margin: 0;
  font-weight: inherit; font-style: inherit;
  box-shadow: none; text-shadow: none;
}
/* ── tables & quotes & lists — prettier, less crowded ─────────────────── */
.md table { border-collapse: separate; border-spacing: 0; margin: 1em 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: .93em; }
.md thead th { background: var(--glass2); font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border2); }
.md th, .md td { border: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; }
.md tbody tr:last-child td { border-bottom: 0; }
.md tr:nth-child(even) td { background: color-mix(in srgb, var(--glass) 60%, transparent); }
.md tbody tr:hover td { background: var(--glass2); }
.md blockquote { border-inline-start: 3px solid var(--hi); background: var(--glass); border-radius: 10px; color: var(--text2); }
.md li::marker { color: var(--text3); }
.md hr { border: 0; height: 1px; background: linear-gradient(to left, transparent, var(--border2), transparent); margin: 1.3em 0; }

/* simple bar charts (fenced ```chart) */
.chart { display: flex; flex-direction: column; gap: 8px; margin: .8em 0; padding: 14px; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; }
.chart-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.chart-row .cl { font-size: 12.5px; color: var(--text2); min-width: 70px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-row .cv { font-size: 12px; color: var(--text3); font-family: var(--mono); direction: ltr; min-width: 64px; text-align: start; }
.chart-row .track { height: 18px; border-radius: 9px; background: var(--glass2); overflow: hidden; position: relative; }
.chart-row .track i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(to left, var(--hi), color-mix(in srgb, var(--hi) 55%, var(--accent))); animation: growX .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes growX { from { width: 0 !important; } }

/* code blocks — richer header */
.md pre { border-radius: 15px; }
.md pre .code-head { background: color-mix(in srgb, var(--code-bg) 55%, #000 45%); }

/* ── chat declutter ─────────────────────────────────────────────────────── */
.msg.user .avatar { display: none; }
.msg { gap: 12px; align-items: flex-start; }
.msg.user .bubble-wrap { max-width: min(80%, 680px); }
.msg.model { gap: 11px; }
.msg.model .avatar { width: 30px; height: 30px; border-radius: 10px; margin-top: 6px; }
.msg.model .bubble-wrap { max-width: calc(100% - 44px); }
.bubble-wrap { gap: 8px; }
.msg.model .bubble { padding: 13px 18px; }
.msg-meta { font-size: 11px; gap: 12px; opacity: .75; padding: 0 6px; flex-wrap: wrap; }
.msg-meta .tag { display: inline-flex; align-items: center; gap: 5px; color: var(--text3); }
.msg-meta .tag.model { color: var(--text2); font-weight: 650; }
.msg-meta svg.ico, .sources svg.ico { width: 12px; height: 12px; }
.msg-tools { opacity: 0; transform: translateY(2px); transition: opacity .18s, transform .18s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; transform: none; }
.msg-tools .icon-btn { color: var(--text3); }
.msg-tools .icon-btn:hover { background: var(--glass2); color: var(--text); }
.switch-note { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; }
.switch-note svg.ico { width: 13px; height: 13px; color: var(--warn); }

/* thoughts card — live-thinking feed (smooth, calm auto-follow) */
.thoughts {
  position: relative; border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--glass) 50%, transparent);
  overflow: clip; font-size: 13px; color: var(--text2);
  transition: border-color .2s;
}
.thoughts[open] { border-color: color-mix(in srgb, var(--border2) 60%, transparent); }
.thoughts summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 9px 12px; color: var(--text2); font-size: 12.5px; font-weight: 700; letter-spacing: .1px;
  transition: background .18s; user-select: none; -webkit-user-select: none;
}
.thoughts summary::-webkit-details-marker { display: none; }
.thoughts summary:hover { background: color-mix(in srgb, var(--glass) 70%, transparent); }
.thoughts summary .th-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--glass2); border: 1px solid var(--border); font-size: 11px; color: var(--text3); font-weight: 650;
}
.thoughts summary .th-chip svg.ico { width: 12px; height: 12px; color: var(--accent); }
.thoughts.live summary .th-chip {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
}
.thoughts.live summary .th-label::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-inline-start: 8px; vertical-align: 1px; background: var(--accent); animation: pulse 1.1s ease-in-out infinite;
}
.thoughts summary .th-caret {
  margin-inline-start: auto; width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--text3); border-radius: 7px; transition: transform .26s cubic-bezier(.2,.7,.3,1), background .18s, color .18s;
}
.thoughts summary .th-caret svg.ico { width: 14px; height: 14px; }
.thoughts summary:hover .th-caret { background: var(--glass2); color: var(--text); }
.thoughts[open] summary .th-caret { transform: rotate(90deg); }
.thoughts[open] summary { border-bottom: 1px dashed var(--border); }
.thoughts.live[open] summary { border-bottom-color: transparent; }
/* contents of a closed <details> are hidden natively — add a soft rise-in
   when the card opens, plus a gentle top scrim under the header */
.thoughts .th-body { display: block; }
.thoughts[open] .th-inner { animation: thOpen .22s cubic-bezier(.2,.7,.3,1) both; transform-origin: top; }
@keyframes thOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the scrolling feed (lives inside the clipped inner wrapper) */
.thoughts .th-feed {
  margin: 0; padding: 6px 15px 12px;
  max-height: min(300px, 40vh); overflow-y: auto; overscroll-behavior: contain;
  font-size: 12.5px; line-height: 1.95; word-break: break-word;
  color: var(--text2); scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
  -webkit-overflow-scrolling: touch;
}
.thoughts .th-feed::-webkit-scrollbar { width: 6px; }
.thoughts .th-feed::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; }
.thoughts .th-feed .th-line { display: block; }
.thoughts.live .th-feed .th-line { animation: thIn .3s cubic-bezier(.2,.7,.3,1) both; }
.thoughts .th-feed .th-line b { color: var(--text); font-weight: 700; }
.thoughts .th-feed .th-line.muted { opacity: .55; }
/* live cursor tail */
.thoughts.live[open] .th-feed::after {
  content: ''; display: inline-block; width: 8px; height: 13px; margin-inline-start: 3px;
  border-radius: 2px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2, start) infinite;
}
@keyframes thIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* v7.3 (F2): quiet thinking — fixed height, flat, misty. No blur, no glow,
   no shadow: the box never grows, thoughts rise from the bottom and dissolve
   under the top mist while the feed auto-follows. (B8 trail/cap motion kept.) */
.thoughts.live {
  background: var(--glass);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--border);
  box-shadow: none;
}
.thoughts[open] .th-feed {
  height: 132px; max-height: 132px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 46px);
  mask-image: linear-gradient(to bottom, transparent, #000 46px);
  scrollbar-width: none;
}
.thoughts .th-feed::-webkit-scrollbar { display: none; }
.thoughts.live[open] .th-feed::after { background: var(--text3); width: 6px; height: 11px; }
.thoughts.live .th-feed .th-line.done:not(.st) { opacity: .6; }
.thoughts .th-feed .th-line.st { color: var(--text); font-weight: 600; }
.thoughts .th-feed .th-line.st::before {
  content: '◈'; color: var(--accent); margin-inline-end: 7px; font-size: 10px; vertical-align: 1px;
}
.thoughts.live .th-feed .th-line.out { animation: thOut .34s ease-in both; }
@keyframes thOut { to { opacity: 0; transform: translateY(-10px); } }
/* v7.3 (F1): minimal live-action line — the glass pill is gone. A slim flat
   whisper above the composer: small footprint, still visible. */
.status-line {
  width: fit-content; max-width: min(860px, 94%); margin: 0 auto;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 3px 14px 5px;
  font-size: 11px; line-height: 1.5; color: var(--text3);
  white-space: nowrap;
}
.status-line[hidden] { display: none; }
.status-line .dot { width: 5px; height: 5px; opacity: .65; animation-duration: 1.6s; }
#statusText { overflow: hidden; text-overflow: ellipsis; min-width: 0; }


/* search sources — source line */
.sources .q { display: inline-flex; align-items: center; gap: 6px; color: var(--text3); font-size: 11.5px; margin-bottom: 2px; }
.sources .q svg.ico { width: 12px; height: 12px; color: var(--text3); }
.sources a { position: relative; background: var(--glass); }
.sources a img { width: 15px; height: 15px; border-radius: 4px; }

/* ── compact attachments & lightbox ────────────────────────────────────── */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.att-img {
  position: relative; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
  width: 118px; height: 88px; flex: 0 0 auto; border: 1px solid var(--border2);
  background: var(--glass); transition: transform .16s ease, box-shadow .16s ease;
}
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-img:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.att-img .zoom { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: rgba(0,0,0,.35); color: #fff; transition: opacity .15s; }
.att-img:hover .zoom { opacity: 1; }
.att-img .zoom svg.ico { width: 20px; height: 20px; }
.att-file {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--border); font-size: 12.5px; color: var(--text2);
  max-width: 260px; transition: border-color .15s, background .15s;
}
.att-file:hover { border-color: var(--accent); color: var(--text); text-decoration: none; background: var(--glass2); }
.att-file .fi { width: 30px; height: 30px; border-radius: 9px; background: var(--glass2); display: grid; place-items: center; flex: 0 0 auto; }
.att-file .fi svg.ico { width: 15px; height: 15px; }
.att-file span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file small { color: var(--text3); font-size: 11px; }

/* ── lightbox 2.0 ─────────────────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0,0,0,.82); backdrop-filter: blur(8px); animation: fadeIn .18s both; }
.lb-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.lb-img { max-width: min(1000px, 92vw); max-height: 88vh; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.6); animation: popIn .22s ease both; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; }
.lb-img.zoomed { cursor: grab; }
.lb-img.zoomed:active { cursor: grabbing; }
.lb-load { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lb-cap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: min(70vw, 560px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8e8ec; font-size: 12.5px; text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }
.lb-count { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #cfd0d6; font-size: 12px; font-weight: 600; background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 999px; pointer-events: none; }
.lb-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(20,20,24,.72); border: 1px solid rgba(255,255,255,.14); color: #e8e8ec; display: grid; place-items: center; backdrop-filter: blur(6px); }
.lb-x:hover { background: rgba(60,60,66,.85); color: #fff; }
.lb-z, .lb-dl { position: absolute; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(20,20,24,.72); border: 1px solid rgba(255,255,255,.14); color: #e8e8ec; display: grid; place-items: center; backdrop-filter: blur(6px); }
.lb-z:hover, .lb-dl:hover { background: rgba(60,60,66,.85); color: #fff; }
.lb-in { top: 64px; }
.lb-out { top: 110px; }
.lb-dl { top: 156px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(20,20,24,.6); border: 1px solid rgba(255,255,255,.12); color: #e8e8ec; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .15s ease, transform .15s ease; }
.lb-nav:hover { background: rgba(60,60,66,.9); color: #fff; transform: translateY(-50%) scale(1.08); }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { inset-inline-start: 16px; }
.lb-next { inset-inline-end: 16px; }
@media (max-width: 640px) {
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { inset-inline-start: 8px; }
  .lb-next { inset-inline-end: 8px; }
  .lb-cap { bottom: 12px; font-size: 11.5px; }
}

/* modal for versions */
.modal.wide { width: min(640px, 100%); }
.modal.wide h3 { display: flex; align-items: center; gap: 8px; }
.modal.wide h3 svg.ico { width: 18px; height: 18px; color: var(--accent); }
.ver-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; margin: 4px 0 14px; }
.ver-item { border: 1px solid var(--border); background: var(--glass); border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ver-item .vrow { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ver-item .vrow b { color: var(--accent); font-weight: 650; }
.ver-item .date { color: var(--text3); }
.ver-item p { margin: 0; font-size: 12.5px; color: var(--text2); line-height: 1.7; max-height: 84px; overflow: hidden; }
.ver-item .va { display: flex; gap: 8px; flex-wrap: wrap; }
.ver-item .ver-full { border-top: 1px dashed var(--border2); padding-top: 8px; }

/* key status check/x icons */
.grow.stt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); }
.grow.stt svg.ico { width: 14px; height: 14px; }
.km .n svg.ico { width: 11px; height: 11px; vertical-align: -1px; color: var(--danger); }
.km .n b { font-weight: 600; font-size: 10.5px; }

/* composer subtle focus, no flash */
.chip-btn { transition: background .16s ease, color .16s, border-color .16s, transform .1s; }
.composer { transition: border-color .2s ease, box-shadow .2s ease, background .2s; }

/* welcome tweaks */
.suggest button { border-radius: 16px; padding: 15px 16px; }
.suggest .sg-ic { border-radius: 13px; }

/* extra entrance niceties */
.bubble-wrap .thoughts { animation: fadeUp .25s ease both; }
.bubble-wrap .sources { animation: fadeUp .25s .05s ease both; }
.msg.user .bubble, .msg.model .bubble { animation: msgIn .3s cubic-bezier(.2,.7,.3,1) both; }

@media (max-width: 700px) {
  .att-img { width: 92px; height: 70px; border-radius: 10px; }
  .msg.user .bubble-wrap { max-width: 100%; }
  .msg.model .bubble-wrap { max-width: calc(100% - 38px); }
  .msg.model .avatar { width: 28px; height: 28px; margin-top: 5px; }
  .toasts { bottom: 12px; inset-inline-start: 10px; }
  .toast { max-width: calc(100vw - 20px); }
  .md table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── mobile ergonomics v2 (safe areas, dvh, touch) ──────────────────────── */
@supports (height: 100dvh) {
  .app, .login { height: 100dvh; }
}
.composer-wrap { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.toasts { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.voice-live { height: 100%; height: 100dvh; }
button { -webkit-tap-highlight-color: transparent; }
@media (max-width:700px){
  .composer-wrap { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .composer textarea { padding-bottom: 4px; }
}

/* ── live-voice typing fallback & hearing cue (v2.0.1) ─────────────────── */
.vl-trans .hear { color:var(--accent); font-size:14.5px; animation:hearPulse 1.1s ease-in-out infinite; display:inline-block; }
@keyframes hearPulse { 0%,100%{opacity:1} 50%{opacity:.55} }


/* ── voice call: phone-like dial & timer (v2.0.1) ───────────────────────── */
.vl-orb { cursor: pointer; }
.vl-mic.off { background: var(--accent-solid); color: #0d0f10; box-shadow: 0 6px 20px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.12); }
.vl-mic.off:hover { background: color-mix(in srgb, var(--accent-solid) 88%, #fff); }
.vl-mic svg.ico { width: 21px; height: 21px; }
.vl-mic.on svg.ico { color: #fff; }
.vl-sub { font-variant-numeric: tabular-nums; direction: ltr; font-size: 12.5px; color: var(--text3);
  background: var(--glass); border: 1px solid var(--border); padding: 4px 14px; border-radius: 999px; letter-spacing: .4px; }
.vl-cut { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2);
  background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; }
.vl-cut:hover { color: var(--text); border-color: var(--border2); background: var(--glass2); }
.vl-cut svg.ico { width: 15px; height: 15px; }
.vl-actions { position: relative; z-index: 3; }
.vl-hint { animation: none; }

/* ── per-message read-aloud («صدای روان و طبیعی») ─────────────────────────── */
.read-row { display: flex; align-items: center; padding: 0 4px; margin-top: -2px; }
.msg.user .read-row { justify-content: flex-start; }
.read-row .tts-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11.5px; line-height: 1;
  color: var(--text2); background: var(--glass);
  border: 1px solid var(--glass2); border-radius: 999px;
  padding: 5px 10px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.read-row .tts-btn svg { width: 13px; height: 13px; }
.read-row .tts-btn:hover { color: var(--text); border-color: var(--accent); background: var(--glass2); }
.read-row .tts-btn:active { transform: scale(.95); }
.read-row .tts-btn.speaking {
  color: #fff; background: var(--accent-solid); border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: ttsPulse 1.6s ease-in-out infinite;
}
@keyframes ttsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .read-row .tts-btn.speaking { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.0.0 — app mode.
   The whole app is pinned to the *visible* viewport (--app-h is kept in sync
   with window.visualViewport by app.js) so the composer can never hide behind
   the keyboard or URL bar; plus PWA/install polish, bottom-sheet panels,
   a compacting topbar and smoother micro-interactions. Same theme, same calm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── visible-viewport height chain ───────────────────────────────────────── */
:root { --app-h: 100vh; }
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }
html.kbd-open, html.kbd-open body { height: 100% !important; }
.app, .login { height: var(--app-h); }
.voice-live { height: var(--app-h); }

/* keyboard is up / browser chrome collapsed — a touch more air & stability */
html.kbd-open .chat { overscroll-behavior: contain; }
html.kbd-open .messages { padding-bottom: 6px; }
html.kbd-open .scroll-down { bottom: calc(env(safe-area-inset-bottom, 0px) + 118px); }

/* ── topbar: app bar look, safe-area aware, compacts while you scroll ────── */
.topbar {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
  transition: padding .18s ease, background .3s ease;
}
.topbar.compact { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
.topbar.compact .title-meta { opacity: 0; }
.title-meta { transition: opacity .18s ease; }
.sidebar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* quick “new chat” for phones where the drawer is closed */
.icon-btn.only-mobile { display: none; }
@media (max-width: 700px) {
  .icon-btn.only-mobile { display: inline-flex; }
}

/* ── composer chip row: wraps freely on desktop; on small phones it turns
      into a horizontally scrollable strip. The row must never clip the
      dropdown menus that open upward from it (overflow:visible above 700px). ── */
.cb-left {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
  overflow: visible;
}
.cb-left .chip-btn, .cb-left .dropdown { flex: 0 0 auto; }
@media (max-width: 700px) {
  .cb-left {
    overflow-x: auto; flex-wrap: nowrap; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cb-left::-webkit-scrollbar { display: none; }
}
.composer-bar { gap: 6px; }
.composer textarea { -webkit-user-select: text; user-select: text; }
button { touch-action: manipulation; }
.chip-btn:active, .send:active { transform: scale(.93); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* small phones: drop the one-line disclaimer under the composer for a clean dock */
@media (max-width: 520px) { .foot-note { display: none; } }

/* ── side panel behaves like a bottom sheet on phones ────────────────────── */
@media (max-width: 620px) {
  .panel {
    top: auto; bottom: 0; inset-inline: 0; width: 100%;
    max-height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top, 0px) - 24px);
    border-inline-start: 0; border-top: 1px solid var(--border2);
    border-radius: 22px 22px 0 0; overflow: hidden;
    transform: translateY(102%) !important;
    transition: transform .32s cubic-bezier(.25, .8, .25, 1);
  }
  .panel-head { position: relative; padding-top: 26px; }
  .panel-head::before {
    content: ''; position: absolute; top: 9px; inset-inline-start: 50%;
    transform: translateX(-50%); width: 44px; height: 4px; border-radius: 4px;
    background: var(--border2);
  }
  .app.panel-open .panel { transform: translateY(0) !important; }
  .panel-body { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* ── dropdowns & menus on phones: slide up like native pickers ───────────── */
@media (max-width: 700px) {
  .dd-menu {
    animation: sheetUp .18s cubic-bezier(.2, .8, .25, 1) both;
    border-radius: 16px 16px 12px 12px;
  }
}
@keyframes sheetUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── toasts: keep them clear of the composer on phones ───────────────────── */
@media (max-width: 700px) {
  .toasts {
    top: calc(env(safe-area-inset-top, 0px) + 58px); bottom: auto;
    inset-inline-start: 10px; inset-inline-end: 10px;
    align-items: flex-start;
  }
  .toast { max-width: 100%; }
}

/* ── gentle entrance choreography for lists/bubbles (respects reduced motion) */
.avatar { animation: popIn .25s ease both; }
.conv-item { animation: fadeUp .2s ease both; }

/* assistant “typing” lives in the live bubble already; give streamed code a
   soft highlight the moment it lands */
.md pre { transition: border-color .25s ease; }
.md pre:hover { border-color: var(--border2); }

/* subtle idle pulse on the app-bar action that matters while streaming */
.status-line .dot { background: var(--accent); }
html.kbd-open .voice-live { position: fixed; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.2 — install in Settings · plain green highlight · menu/toast fixes  ══════ */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.panel-body > h3:first-child { margin-top: 0; }
.panel h3.sec {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 2px;
  text-transform: none; letter-spacing: 0; color: var(--text2); font-size: 13px; font-weight: 700;
}
.panel h3.sec svg.ico { width: 17px; height: 17px; color: var(--text3); }
.panel h3.sec .n { margin-inline-start: auto; font-size: 11px; font-weight: 500; color: var(--text3); text-transform: none; letter-spacing: 0; }

.install-card { padding: 0; overflow: hidden; gap: 0; }
.ins-hero { display: flex; align-items: center; gap: 12px; padding: 13px 14px 8px; }
.ins-ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(160deg, #3c3f46, #212328); border: 1px solid var(--border2); color: #e9ebee;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), var(--shadow);
}
.ins-ico svg.ico { width: 23px; height: 23px; }
.ins-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-txt b { font-size: 14.5px; color: var(--text); }
.ins-txt small { color: var(--text3); font-size: 11.5px; line-height: 1.5; }
.ins-actions { padding: 2px 14px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-actions button { white-space: nowrap; }
.ins-diag { padding: 0 14px 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.ins-diag:empty { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--glass2); border: 1px solid var(--border); color: var(--text2);
}
.pill svg.ico { width: 12px; height: 12px; }
.pill .dot { width: 7px; height: 7px; }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill.ok .dot { background: var(--ok); }
.pill.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.pill.bad .dot { background: var(--danger); }
.pill.warn2 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill.warn2 .dot { background: var(--warn); }
.ins-msg { padding: 8px 14px 12px; font-size: 12.5px; color: var(--text2); line-height: 1.85; }
.ins-msg.err { color: var(--danger); }
.ins-msg.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); border-top: 1px dashed color-mix(in srgb, var(--warn) 30%, transparent); }
.ins-msg.ok { color: var(--ok); }
.ins-msg .step { display: flex; gap: 9px; align-items: flex-start; padding: 3px 0; }
.ins-msg .step b {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center;
  background: var(--glass2); border: 1px solid var(--border); font-size: 11px; color: var(--text2); margin-top: 2px;
}
.ins-msg code {
  font-family: var(--mono); direction: ltr; unicode-bidi: embed; background: var(--glass2);
  border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--text2);
}
.ins-msg svg.ico { width: 13px; height: 13px; color: var(--text3); vertical-align: -2px; }
.ins-bul { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; }
.ins-bul svg.ico { margin-top: 3px; }
.install-card .ins-actions .primary {
  flex: 1 1 260px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; font-size: 14.5px; font-weight: 700;
}
.install-card .ins-actions .ghost { min-height: 40px; }
.ins-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
  cursor: pointer; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
.ins-link svg.ico { width: 14px; height: 14px; }

/* dropdown menus — above the composer, but NEVER above panels/sheets/modals.
   (v3.13.2: the old z-index:90 on .dropdown created a stacking context that
   floated the model / thinking chips over the open settings panel on phones) */
.dropdown { z-index: auto; }
.dd-menu { z-index: 22; }
.app.panel-open .composer, .app.panel-open .dropdown { z-index: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.2 — attach source picker (camera / gallery / files) · install hover
   ═══════════════════════════════════════════════════════════════════════════ */
.attach-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s; }
.attach-backdrop.show { opacity: 1; }
.attach-sheet { position: fixed; z-index: 96; }
@media (max-width: 700px) {
  .attach-sheet {
    inset-inline: 0; bottom: 0; border-radius: 22px 22px 0 0;
    background: var(--panel-solid); border-top: 1px solid var(--border2);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px rgba(0,0,0,.45);
    transform: translateY(104%); transition: transform .28s cubic-bezier(.22,.9,.26,1);
    max-height: 84vh; overflow-y: auto;
  }
  .attach-sheet.show { transform: none; }
  .attach-sheet .sheet-handle { display: block; }
}
@media (min-width: 701px) {
  .attach-sheet {
    bottom: 96px; inset-inline-start: 24px;
    width: 360px; background: var(--panel-solid); border: 1px solid var(--border2);
    border-radius: 18px; padding: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.5);
    transform: translateY(12px) scale(.97); opacity: 0;
    transition: transform .16s ease, opacity .16s ease;
    transform-origin: bottom center;
  }
  .attach-sheet.show { transform: none; opacity: 1; }
  .attach-sheet .sheet-handle { display: none; }
}
.attach-sheet .sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--border2); margin: 2px auto 10px; }
.attach-sheet h4 { margin: 0 2px 10px; font-size: 15px; color: var(--text); display: flex; align-items: center; justify-content: space-between; }
.attach-sheet h4 small { color: var(--text3); font-size: 11.5px; font-weight: 500; }
/* v6.8.4: 2×2 tiles — camera / gallery photo / gallery video / files */
.as-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.as-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px 11px; border-radius: 16px; background: var(--glass);
  border: 1px solid var(--border); color: var(--text2);
  transition: background .12s, transform .1s, border-color .12s;
}
.as-opt:hover { background: var(--glass2); color: var(--text); border-color: var(--border2); }
.as-opt:active { transform: scale(.96); }
.as-opt .ao-ic {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.22);
}
.as-opt .ao-ic svg.ico { width: 22px; height: 22px; }
.as-opt b { font-size: 13px; color: var(--text); }
.as-opt small { font-size: 10.5px; color: var(--text3); text-align: center; line-height: 1.45; }
.as-opt[data-src="camera"] .ao-ic { background: linear-gradient(155deg, #6ea8ff, #4c6fff); }
.as-opt[data-src="photo"] .ao-ic { background: linear-gradient(155deg, #ff9b6e, #f4624f); }
.as-opt[data-src="video"] .ao-ic { background: linear-gradient(155deg, #c58bff, #7b3ff2); }
.as-opt[data-src="files"] .ao-ic { background: linear-gradient(155deg, #7ee0b0, #1fb07c); }
.as-cancel { width: 100%; margin-top: 10px; padding: 10px; border-radius: 13px; background: var(--glass2); color: var(--text2); font-size: 13px; }
.as-cancel:hover { color: var(--text); background: var(--glass); }
.ins-actions .primary { cursor: pointer; }
.ins-actions button { cursor: pointer; }
.att-img { border: 0; padding: 0; background: none; cursor: zoom-in; }
.att-heic { outline: 1px dashed var(--border2); outline-offset: 1px; }

/* ── v3.5 — memory panel: stats · tabs · gallery · graph ─────────────────── */
.mem-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mem-stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--glass); }
.mem-stat b { font-size: 17px; }
.mem-stat small { color: var(--text3); font-size: 11px; }
.mem-tabs { display: flex; gap: 6px; background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.mem-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 9px; color: var(--text2); font-size: 13px; transition: background .15s, color .15s; }
.mem-tabs button:hover { background: var(--glass2); }
.mem-tabs button.on { background: var(--accent-solid); color: var(--text); }
.mem-tabs button em { font-style: normal; font-size: 11px; background: var(--glass2); border-radius: 8px; padding: 1px 7px; color: var(--text2); }
.mem-tabs button.on em { background: var(--glass); }
.mem-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mem-img { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.mem-img img { width: 100%; height: 150px; object-fit: cover; cursor: zoom-in; background: var(--code-bg); }
.mi-noimg { height: 150px; display: grid; place-items: center; background: var(--code-bg); color: var(--text3); }
.mi-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mi-body p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text2); }
.mi-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mem-img .acts { display: flex; gap: 4px; padding: 6px 10px 10px; margin-top: auto; }
.mem-graph { display: block; }
.mg-node circle { cursor: default; transition: opacity .15s; }
.mg-node:hover circle { opacity: 1; stroke: var(--text); stroke-width: 1.5; }
.mg-lbl { fill: var(--text2); font-size: 12.5px; font-family: var(--font); }
.mg-rel { fill: var(--text3); font-size: 10.5px; font-family: var(--font); }
@media (max-width: 560px) { .mem-gallery { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .mem-stat { min-width: 54px; } }


/* ══ v3.8 ═══════════════════════════════════════════════════════════════ */
/* ── upload chips: state-driven progress (ring over thumb + bottom bar) ── */
.att { --p: 0; overflow: hidden; padding: 6px 8px 6px 10px; gap: 9px; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.att .th { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--glass2); }
.att .th img, .att .th video { width: 38px; height: 38px; object-fit: cover; display: block; transition: filter .25s ease, transform .25s ease; }
.att .th .ic { width: 38px; height: 38px; font-size: 10.5px; }
.att .th .ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.att .th .ring svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.att .th .ring .r-bg { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 3; }
.att .th .ring .r-fg { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: calc(97.4 * (1 - var(--p))); transition: stroke-dashoffset .18s linear; }
.att .th .okmark { position: absolute; inset: auto 2px 2px auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.att .th .okmark svg.ico { width: 10px; height: 10px; stroke-width: 3; }
.att .nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.att .nm .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.att .nm .sub { display: block; color: var(--text3); font-size: 11px; font-variant-numeric: tabular-nums; }
.att .att-bar { left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 0; background: transparent; opacity: 0; transition: opacity .2s ease; }
.att .att-bar i { width: 100%; transform-origin: 100% 50%; transform: scaleX(var(--p)); transition: transform .18s linear; }
html[dir="ltr"] .att .att-bar i { transform-origin: 0 50%; }
.att.st-wait .th img, .att.st-uploading .th img { filter: saturate(.6) brightness(.85); }
.att.st-wait .th .ring, .att.st-uploading .th .ring, .att.st-wait .att-bar, .att.st-uploading .att-bar { opacity: 1; }
.att.st-wait .th .ring .r-fg { stroke-dasharray: 20 77.4; stroke-dashoffset: 0; animation: ringspin 1.1s linear infinite; }
@keyframes ringspin { to { stroke-dashoffset: -97.4; } }
.att.st-wait .att-bar i { transform: none; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: barslide 1.2s linear infinite; opacity: .7; }
@keyframes barslide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.att.st-uploading .sub { color: var(--accent); }
.att.st-done .th .okmark { transform: scale(1); }
.att.st-done { animation: attdone .45s ease both; }
@keyframes attdone { 0% { transform: translateY(2px); } 50% { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); } 100% { transform: none; } }
.att.st-err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--glass2)); }
.att.st-err .th .ic, .att.st-err .sub { color: var(--danger); }
.att.st-err .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.att .att-pct { display: none; }

/* ── toasts v2 ─────────────────────────────────────────────────────────── */
.toasts { gap: 8px; bottom: 18px; inset-inline-start: 18px; max-width: min(400px, calc(100vw - 32px)); }
.toast {
  min-width: 0; max-width: 100%; padding: 9px 10px 9px 8px; gap: 9px; border-radius: 13px;
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.04) inset;
  animation: trise .28s cubic-bezier(.2,.8,.25,1) both; will-change: transform, opacity;
}
html[data-theme="light"] .toast { box-shadow: 0 10px 28px rgba(0,0,0,.12); }
@keyframes trise { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.toast.out { animation: tfall .24s ease both; pointer-events: none; }
@keyframes tfall { to { opacity: 0; transform: translateY(8px) scale(.97); max-height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; } }
.toast.bump { animation: tbump .3s ease; }
@keyframes tbump { 40% { transform: scale(1.03); } }
.toast .t-ic { width: 26px; height: 26px; border-radius: 8px; }
.toast .t-ic svg.ico { width: 14px; height: 14px; }
.toast .t-msg { font-size: 13px; line-height: 1.55; }
.toast .t-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text2); background: var(--glass2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.toast .t-bar { height: 2px; opacity: .8; transform: scaleX(1); animation: none; }
.toast.info .t-bar { background: var(--accent); }
@media (max-width: 900px) {
  .toasts { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 10px); inset-inline: 12px; max-width: none; align-items: stretch; }
  .toast { animation-name: tdrop; }
  @keyframes tdrop { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
  .toast.out { animation-name: tup; }
  @keyframes tup { to { opacity: 0; transform: translateY(-8px); max-height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; } }
}
@media (prefers-reduced-motion: reduce) { .toast, .toast.out, .att.st-done { animation: none; } }

/* ── action receipts (the model operated the app) ──────────────────────── */
.act-receipt { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; align-items: flex-start; }
.act-receipt .act { max-width: 100%; }
.act-receipt .act > :not(i) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-receipt > .media-card, .act-receipt > .map-card, .act-receipt > .doc-card, .act-receipt > .dl-card, .act-receipt > .conv-card, .act-receipt > .act-tool, .act-receipt > .act-confirm, .act-receipt > .conv-result { flex: 1 1 100%; }
.act-receipt .act { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass2); color: var(--text2); }
.act-receipt .act i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; }
.act-receipt .act i svg.ico { width: 10px; height: 10px; stroke-width: 3; }
.act-receipt .act.ok i { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.act-receipt .act.bad { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.act-receipt .act.bad i { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

/* ══ v3.9 — panels, graph, previews, send button ═════════════════════════ */
/* ── panel chrome ── */
.panel { background: color-mix(in srgb, var(--panel-solid) 96%, var(--accent) 4%); }
.panel-head { padding: 16px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent); }
.panel-head h2 { font-size: 16.5px; letter-spacing: -.2px; }
.panel-body { padding: 14px 18px 60px; gap: 12px; scrollbar-width: thin; }
.panel h3.sec { margin: 14px 0 2px; padding: 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--text3); text-transform: none; display: flex; align-items: center; gap: 8px; }
.panel h3.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.panel h3.sec .n { margin-inline-start: 0; }
.card { border-radius: 16px; padding: 14px 16px; gap: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 100%, transparent), color-mix(in srgb, var(--glass) 60%, transparent)); box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 18px rgba(0,0,0,.08); transition: border-color .2s ease; }
.card:hover { border-color: var(--border2); }
.card.tbl { padding: 4px 6px; overflow: auto; scrollbar-width: thin; }
.card .ttl { font-size: 13.5px; align-items: baseline; justify-content: space-between; }
.card .ttl svg.ico { width: 15px; height: 15px; color: var(--text3); }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text2); align-items: center; }
.field label output { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 8px; border-radius: 999px; }
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea, .field select { border-radius: 11px; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important; }
.field.inline { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.field.inline:last-child { border-bottom: 0; padding-bottom: 0; }
.field.inline > div label { font-weight: 600; color: var(--text); font-size: 13px; }
.switch { width: 44px; height: 25px; }
.switch span { background: var(--glass2); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.switch span::before { width: 19px; height: 19px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.switch input:checked + span { background: linear-gradient(135deg, var(--accent), var(--accent2, var(--accent))); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.switch input:checked + span::before { transform: translateX(-19px); background: #fff; }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
/* range sliders */
input.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent))) no-repeat, var(--glass2); background-size: 0 100%; border: 1px solid var(--border); }
input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .12s ease; }
input.range:active::-webkit-slider-thumb { transform: scale(1.15); }
input.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--glass2); border: 1px solid var(--border); }
input.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
input.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
/* segmented control */
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--border); }
.seg-b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--text2); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.seg-b svg.ico { width: 15px; height: 15px; }
.seg-b:hover { color: var(--text); }
.seg-b.on { background: var(--panel-solid); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.savebar { position: sticky; bottom: -60px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--panel-solid) 88%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.savebar .primary { min-width: 120px; }

/* ── memory panel ── */
.mem-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: stretch; }
.mem-stats .grow { display: none; }
.mem-stats .chip-btn { grid-column: 1 / -1; justify-content: center; }
.mem-stat { flex-direction: row; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, var(--glass), transparent); }
.mem-stat i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex: 0 0 auto; }
.mem-stat i svg.ico { width: 15px; height: 15px; }
.mem-stat b { font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mem-stat small { display: block; font-size: 10.5px; margin-top: 2px; }
.mem-tabs { border-radius: 14px; padding: 4px; }
.mem-tabs button { border-radius: 10px; font-weight: 600; }
.mem-tabs button.on { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.card.mem-item { border-radius: 14px; padding: 11px 12px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.card.mem-item:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.mem-item .cat { border-radius: 999px; padding: 3px 9px; font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--glass2)); color: var(--text2); }
.mem-item .imp b { width: 6px; height: 13px; border-radius: 3px; transition: background .15s ease; }
.mem-item .imp b.on { background: linear-gradient(180deg, var(--accent), var(--accent2, var(--accent))); }
.mem-gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mem-img { border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.mem-img:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.mem-img img { height: 140px; transition: transform .35s ease; }
.mem-img:hover img { transform: scale(1.04); }
.mi-body b { font-size: 12.5px; }
.mi-body p { font-size: 12.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mi-tags .cat { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--glass2); }

/* ── knowledge graph v2 ── */
.kg-empty { align-items: center; text-align: center; padding: 34px 20px; gap: 8px; }
.kg-empty p { margin: 0; color: var(--text3); font-size: 12.5px; max-width: 320px; line-height: 1.7; }
.kg-orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent) 45%, transparent 72%); filter: blur(.3px); animation: orb 3s ease-in-out infinite; margin-bottom: 6px; }
@keyframes orb { 50% { transform: scale(1.08); opacity: .8; } }

/* ── usage panel v2 ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.kpi { border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; background: linear-gradient(180deg, var(--glass), transparent); display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); opacity: .7; }
.kpi.good::before { background: var(--ok); } .kpi.warn::before { background: var(--warn); } .kpi.bad::before { background: var(--danger); }
.kpi b { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; line-height: 1.1; }
.kpi small { font-size: 11px; color: var(--text3); }
.kpi em { font-style: normal; font-size: 10.5px; color: var(--text3); margin-top: 3px; }
.usparks .ub { fill: color-mix(in srgb, var(--accent) 75%, transparent); transition: fill .15s ease; }
.usparks g:hover .ub { fill: var(--accent); }
.usparks .ub.rl { fill: var(--danger); }
.usparks .ux { font-size: 9.5px; fill: var(--text3); font-family: var(--font); }
.spark .ttl { font-size: 13px; }
.ubar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.ubar .ul { font-family: var(--mono); font-size: 11.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut { display: block; height: 8px; border-radius: 8px; background: var(--glass2); overflow: hidden; }
.ut i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent))); transition: width .4s ease; }
.ut i.w { background: var(--warn); } .ut i.b { background: var(--danger); }
.ut.sm { height: 6px; min-width: 70px; }
.ubar .un { font-family: var(--mono); font-size: 11.5px; color: var(--text2); }
.usage-table th { position: sticky; top: 0; background: var(--panel-solid); z-index: 1; padding: 8px 10px; }
.usage-table td { padding: 7px 10px; }
.usage-table tbody tr { transition: background .12s ease; }
.usage-table tbody tr:hover { background: var(--glass2); }
.usage-table td.mono { font-family: var(--mono); font-size: 11.5px; direction: ltr; text-align: start; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-family: var(--mono); }
.pill.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pill.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* ── chat image previews v2 ── */
.msg-attachments { gap: 6px; }
.att-img { width: 200px; height: 150px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(110deg, var(--glass) 30%, var(--glass2) 50%, var(--glass) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease; }
@keyframes shimmer { to { background-position: -200% 0; } }
.att-img.ld { animation: none; background: var(--glass2); }
.att-img img { opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.att-img.ld img { opacity: 1; }
.att-img:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 30px rgba(0,0,0,.28); border-color: var(--border2); }
.att-img:hover img { transform: scale(1.05); }
.att-img.wide { width: 240px; height: 150px; }
.att-img.tall { width: 150px; height: 200px; }
.att-img.n1.wide { width: min(320px, 78vw); height: 200px; }
.att-img.n1.tall { width: 180px; height: 250px; }
.att-img.n1.sq { width: 230px; height: 230px; }
.att-img.n2 { width: 168px; height: 168px; } .att-img.n3, .att-img.n4 { width: 124px; height: 124px; }
.att-img .zoom { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); align-items: flex-end; justify-content: flex-end; padding: 8px; display: flex; }
.att-img .zoom svg.ico { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.att-img .att-nm { position: absolute; inset-inline-start: 8px; bottom: 7px; max-width: calc(100% - 40px); font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.att-img:hover .att-nm { opacity: 1; }
.model-atts .att-img { width: 168px; height: 126px; border-radius: 16px; }
.model-atts .att-img.n1.wide { width: min(300px, 76vw); height: 190px; }
.model-atts .att-img.n1.tall { width: 170px; height: 236px; }
@media (max-width: 640px) {
  .att-img, .att-img.wide, .att-img.n2 { width: 140px; height: 110px; }
  .att-img.tall { width: 110px; height: 150px; }
  .att-img.n1.wide, .model-atts .att-img.n1.wide { width: min(280px, 78vw); height: 176px; }
  .att-img.n3, .att-img.n4 { width: 100px; height: 100px; }
}
/* lightbox: caption card + filmstrip */
.lightbox { background: rgba(6,7,10,.86); backdrop-filter: blur(14px) saturate(1.1); }
.lb-img { border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.lb-cap { bottom: 86px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(12,13,18,.62); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); white-space: normal; text-align: center; max-width: min(80vw, 620px); }
.lb-cap b { font-size: 12.5px; font-weight: 600; direction: ltr; }
.lb-cap small { font-size: 11px; color: #b9bcc6; line-height: 1.5; }
.lb-cap:empty { display: none; }
.lb-strip { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(12,13,18,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); max-width: 92vw; overflow-x: auto; scrollbar-width: none; }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-th { width: 52px; height: 40px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; opacity: .55; border: 2px solid transparent; transition: opacity .15s ease, border-color .15s ease, transform .15s ease; padding: 0; }
.lb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-th:hover { opacity: .9; }
.lb-th.on { opacity: 1; border-color: #fff; transform: scale(1.06); }
.lb-count { top: 18px; font-family: var(--mono); letter-spacing: .5px; }
@media (max-width: 640px) { .lb-cap { bottom: 74px; font-size: 11px; } .lb-th { width: 44px; height: 34px; } }

/* ── fun send button: rocket ── */
.send { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, var(--rocket), var(--rocket2)); color: #fff; overflow: visible; box-shadow: 0 4px 14px color-mix(in srgb, var(--rocket2) 40%, transparent); }
html[data-theme="light"] .send { color: #fff; }
.send:hover { background: linear-gradient(145deg, var(--rocket2), var(--rocket)); transform: translateY(-1px) rotate(-6deg); }
.send svg { width: 20px; height: 20px; transform: rotate(0deg); transition: transform .25s cubic-bezier(.2,.8,.3,1.3); }
.send:hover svg { transform: translate(1px, -1px) scale(1.08); }
.send::before { content: ''; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 12px; border-radius: 50% 50% 60% 60%; background: radial-gradient(circle at 50% 20%, #fff5b0, #ffb347 55%, transparent 75%); transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; opacity: 0; filter: blur(.4px); pointer-events: none; }
.send:hover::before { opacity: .9; transform: translateX(-50%) rotate(45deg) translate(-9px, 9px) scaleY(1); animation: flame .35s ease-in-out infinite alternate; }
@keyframes flame { to { transform: translateX(-50%) rotate(45deg) translate(-9px, 10px) scaleY(1.35) scaleX(.8); } }
.send.launch svg { animation: launch .65s cubic-bezier(.4,0,.2,1) both; }
@keyframes launch { 0% { transform: none; } 45% { transform: translate(22px, -22px) scale(.7); opacity: 0; } 46% { transform: translate(-16px, 16px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.send.launch::after { content: ''; position: absolute; inset: -6px; border-radius: 18px; border: 2px solid var(--rocket); animation: ring .6s ease-out both; pointer-events: none; }
@keyframes ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.send.stop { background: var(--danger); box-shadow: 0 4px 14px color-mix(in srgb, var(--danger) 35%, transparent); }
.send.stop:hover { transform: none; } .send.stop::before { display: none; }
.send:disabled { background: var(--btn); color: var(--btn-text); box-shadow: none; }
.send:disabled::before { display: none; }
.send.working::after { border-radius: 17px; }
@media (prefers-reduced-motion: reduce) { .send::before, .send.launch svg, .send.launch::after, .att-img, .kg-orb { animation: none !important; } }

.kg-n { font-style: normal; font-size: 10.5px; background: var(--glass2); border-radius: 999px; padding: 0 6px; margin-inline-start: 4px; }
.mem-stats .chip-btn { grid-column: 1 / -1; }
/* model image cards: neutralise the old fixed strip */
.model-atts .att-img img { width: 100%; height: 100%; }
.model-atts { gap: 6px; }
.msg-attachments .att-img img, .model-atts .att-img img { max-width: none; max-height: none; width: 100%; height: 100%; border: 0; border-radius: 0; }
/* panel children must never be squeezed by the column flex */
.panel-body > * { flex: 0 0 auto; }
.card.tbl { display: block; padding: 0; }
.card.tbl table { min-width: 100%; }
.kpis { grid-template-columns: repeat(3, 1fr); }
.ubar .ut, .ut.sm { direction: ltr; }
.ubar { direction: rtl; }
.ubar .ul { direction: ltr; text-align: end; }
.usparks .ub { min-height: 2px; }

/* keys panel v3.9 */
.keys-kpis { grid-template-columns: repeat(4, 1fr); }
.keys-kpis .kpi:nth-child(4) { grid-column: auto; }
.kpi.ok::before { background: var(--ok); } .kpi.warn::before { background: var(--warn); } .kpi.err::before { background: var(--danger); }
.key-card { position: relative; border-inline-start: 3px solid var(--border); }
.key-card.st-ok { border-inline-start-color: var(--ok); } .key-card.st-warn { border-inline-start-color: var(--warn); } .key-card.st-err { border-inline-start-color: var(--danger); } .key-card.st-off { opacity: .7; }
.key-av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: .3px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); flex: none; text-transform: uppercase; }
.key-card .sub { font-family: var(--mono); direction: ltr; text-align: end; font-size: 12px; letter-spacing: .4px; background: var(--glass2); border-radius: 8px; padding: 4px 8px; display: inline-block; }
.key-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.key-models .km { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--glass2); border: 1px solid transparent; font-size: 11.5px; }
.key-models .km .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.key-models .km.locked { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.key-models .km.locked .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.key-models .km .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; }
.key-models .km .n { font-variant-numeric: tabular-nums; color: var(--text2); display: inline-flex; align-items: center; gap: 3px; }
.grid2 select, .grid2 input { min-width: 0; }
.keys-kpis { grid-template-columns: repeat(2, 1fr); }
.keys-kpis .kpi b { font-size: 22px; }


/* ═══════════ v3.10 — knowledge graph pro ═══════════ */
.kg-card { padding: 0; overflow: hidden; gap: 0; flex: 0 0 auto; }
.kg-wrap { position: relative; height: clamp(360px, 58vh, 620px); background:
  radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 92%, #000), var(--panel-solid)); }
[data-theme=light] .kg-wrap { background: radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), linear-gradient(180deg, #f5f7fb, #eef1f6); }
.mem-graph.kg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; direction: ltr; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mem-graph.kg.panning { cursor: grabbing; }
.kg-dotp { fill: color-mix(in srgb, var(--text3) 28%, transparent); }
.kg-bg { pointer-events: none; }
.kg-edge { fill: none; stroke: color-mix(in srgb, var(--text3) 42%, transparent); stroke-linecap: round; transition: stroke .15s ease, opacity .2s ease; }
.kg-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.kg-arrow { fill: color-mix(in srgb, var(--text3) 55%, transparent); }
.kg-edge.on { stroke: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
.kg-rel { font-size: 10.5px; fill: var(--text3); font-family: var(--font); pointer-events: none; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; stroke-linejoin: round; transition: opacity .2s ease; }
.kg.far .kg-rel { opacity: 0; }
.kg-rel.on { fill: var(--text); opacity: 1 !important; font-weight: 700; }
.kg-node { cursor: grab; transition: opacity .2s ease; outline: none; }
.kg-node.drag { cursor: grabbing; }
.kg-node .halo { opacity: 0; transition: opacity .2s ease; filter: blur(6px); }
.kg-node .ring { fill: none; stroke-width: 1.5; opacity: 0; transition: opacity .15s ease; }
.kg-node .dot { stroke: rgba(0,0,0,.28); stroke-width: 1; transition: stroke .15s ease, r .2s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.kg-node:hover .dot, .kg-node.on .dot, .kg-node:focus-visible .dot { stroke: #fff; stroke-width: 1.8; }
.kg-node:hover .halo, .kg-node.on .halo { opacity: .55; }
.kg-node.on .ring, .kg-node:focus-visible .ring { opacity: 1; stroke-dasharray: 4 3; animation: kgSpin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kgSpin { to { transform: rotate(360deg); } }
.kg-node.nb .halo { opacity: .3; }
.kg-ini { font-size: 12px; font-weight: 800; fill: rgba(0,0,0,.6); font-family: var(--font); pointer-events: none; }
.kg-lbl { font-size: 12.5px; font-weight: 600; fill: var(--text); font-family: var(--font); pointer-events: none; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3.5px; stroke-linejoin: round; transition: opacity .2s ease; }
.kg.far .kg-node:not(.on):not(.nb):not(.hit) .kg-lbl { opacity: 0; }
.kg.has-focus .kg-node:not(.on):not(.nb) { opacity: .16; }
.kg.has-focus .kg-edge:not(.on) { opacity: .1; }
.kg.has-focus .kg-rel:not(.on) { opacity: .06; }
.kg.has-q .kg-node:not(.hit) { opacity: .15; }
.kg-node.hit .halo { opacity: .7; } .kg-node.hit .dot { stroke: #fff; stroke-width: 2; }
.kg-node.hid, .kg-edge.hid, .kg-edge-hit.hid, .kg-rel.hid { display: none; }
/* overlays */
.kg-top { position: absolute; top: 10px; inset-inline: 10px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.kg-top > * { pointer-events: auto; }
.kg-search { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 240px; height: 34px; padding: 0 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text3); }
.kg-search svg.ico { width: 14px; height: 14px; flex: none; }
.kg-q { flex: 1; min-width: 0; background: none; border: 0; padding: 0; height: 100%; font-size: 12.5px; color: var(--text); box-shadow: none !important; }
.kg-q:focus { outline: none; }
.kg-tools { margin-inline-start: auto; display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kg-tb { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--text2); background: transparent; }
.kg-tb:hover { background: var(--glass2); color: var(--text); }
.kg-tb svg.ico { width: 15px; height: 15px; }
.kg-hint { position: absolute; bottom: 8px; inset-inline-start: 12px; font-size: 11px; color: var(--text3); pointer-events: none; }
.kg-hint span { opacity: .8; }
.kg-focus { padding: 12px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--panel-solid) 94%, var(--accent)); display: flex; flex-direction: column; gap: 8px; animation: fadeUp .18s ease both; }
.kg-card.full .kg-focus { position: absolute; inset-inline-end: 12px; bottom: 12px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 70px); overflow: auto; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--panel-solid) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0,0,0,.28); z-index: 2; }
.kg-fh { display: flex; align-items: center; gap: 10px; }
.kg-fh b { display: block; font-size: 14px; line-height: 1.2; }
.kg-fh small { color: var(--text3); font-size: 11px; }
.kg-av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: rgba(0,0,0,.7); background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); flex: none; }
.kg-fs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kg-fs3 span { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 10px; background: var(--glass2); font-size: 10.5px; color: var(--text3); }
.kg-fs3 b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.kg-rl { display: flex; flex-wrap: wrap; gap: 4px; }
.kg-rl small { width: 100%; }
.kg-rl button { text-align: start; font-size: 11.5px; color: var(--text2); padding: 4px 9px; border-radius: 999px; background: var(--glass2); border: 1px solid transparent; }
.kg-rl button:hover { border-color: var(--accent); color: var(--text); }
.kg-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; font-size: 12px; color: var(--text2); border-top: 1px solid var(--border); }
.kg-lg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass); color: var(--text2); font-size: 12px; transition: all .15s ease; }
.kg-lg i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.kg-lg em { font-style: normal; font-size: 10.5px; color: var(--text3); }
.kg-lg:hover { border-color: var(--c); }
.kg-lg.off { opacity: .45; text-decoration: line-through; }
/* fullscreen */
.kg-card.full { position: fixed; inset: 0; z-index: 130; border-radius: 0; border: 0; display: flex; flex-direction: column; background: var(--panel-solid); }
.kg-card.full .kg-wrap { flex: 1; height: auto; min-height: 0; }
.kg-card.full .kg-search { max-width: 340px; }
body.kg-full { overflow: hidden; }
.kg-empty { align-items: center; text-align: center; padding: 34px 20px; gap: 8px; }
@media (max-width: 700px) {
  .kg-wrap { height: clamp(320px, 62vh, 560px); }
  .kg-search { max-width: none; }
  .kg-card.full .kg-focus { inset-inline: 8px; bottom: 8px; width: auto; max-height: 55%; }
  .kg-hint span { display: none; }
  .kg-lbl { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .kg-node.on .ring { animation: none; } .kg-focus { animation: none; } }

/* ═══════════ v3.10 — chat polish: sources strip, tables, charts ═══════════ */
.sources { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; flex-wrap: nowrap; }
.src-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sources .src-head .q { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--text3); width: auto; flex: 1; margin: 0; }
.sources .q > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources .q b { color: var(--text2); font-weight: 500; }
.sources .q i { font-style: normal; margin: 0 5px; opacity: .6; }
.src-n { font-size: 10.5px; color: var(--text3); background: var(--glass2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; flex: none; }
.src-rail { position: relative; min-width: 0; }
.src-strip { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; mask-image: linear-gradient(to left, transparent, #000 18px, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to left, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.src-rail.at-start .src-strip { mask-image: linear-gradient(to left, transparent, #000 18px); -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); }
.src-rail.at-end .src-strip { mask-image: linear-gradient(to right, transparent, #000 18px); -webkit-mask-image: linear-gradient(to right, transparent, #000 18px); }
.src-rail.at-start.at-end .src-strip { mask-image: none; -webkit-mask-image: none; }
.src-strip::-webkit-scrollbar { display: none; }
.sources a.src { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border-radius: 12px; background: var(--glass); border: 1px solid var(--border); color: var(--text2); max-width: 190px; min-width: 0; text-decoration: none; transition: border-color .12s, transform .12s, background .12s; animation: none; }
.sources a.src:hover { border-color: var(--accent); background: var(--glass2); transform: translateY(-1px); color: var(--text); box-shadow: 0 8px 20px -10px rgba(0,0,0,.55); }
.sources a.src img, .sources a.src .fv { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; color: var(--text3); background: var(--glass2); }
.sources a.src img { object-fit: cover; background: #fff; }
.sources a.src .fv svg.ico { width: 12px; height: 12px; }
.src-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.src-t b { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-t small { font-size: 10px; color: var(--text3); direction: ltr; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a.src.pg { border-style: dashed; } .sources a.src.dim { opacity: .55; }
.src-nav { position: absolute; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-solid); border: 1px solid var(--border); color: var(--text2); box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .15s; z-index: 1; }
.src-nav.l { left: -4px; } .src-nav.r { right: -4px; }
.src-rail:hover .src-nav { opacity: 1; }
.src-rail.at-start .src-nav.r { opacity: 0 !important; pointer-events: none; }  /* rtl: start = right edge */
.src-rail.at-end .src-nav.l { opacity: 0 !important; pointer-events: none; }
.src-nav svg.ico { width: 14px; height: 14px; }
.search-entry-wrap { margin-top: 2px; }
.search-entry-wrap summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text3); cursor: pointer; padding: 3px 8px; border-radius: 8px; }
.search-entry-wrap summary::-webkit-details-marker { display: none; }
.search-entry-wrap summary:hover { background: var(--glass2); color: var(--text2); }
.search-entry-wrap summary svg.ico { width: 12px; height: 12px; }
.search-entry-wrap[open] summary { margin-bottom: 6px; }
@media (hover: none) { .src-nav { display: none; } }

/* tables — wrapped in .tbl-wrap for horizontal scroll, sticky header, better mobile */
.md .tbl-wrap { margin: .9em 0; border: 1px solid var(--border); border-radius: 14px; overflow: auto; max-width: 100%; background: color-mix(in srgb, var(--glass) 40%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.md .tbl-wrap table { display: table; width: 100%; min-width: max-content; margin: 0; border: 0; border-radius: 0; font-size: .92em; border-collapse: separate; border-spacing: 0; }
.md .tbl-wrap.wide table { min-width: 100%; }
.md .tbl-wrap thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--panel-solid) 85%, var(--accent) 6%); backdrop-filter: blur(6px); font-size: .9em; letter-spacing: .1px; white-space: nowrap; }
.md .tbl-wrap th, .md .tbl-wrap td { padding: 9px 13px; vertical-align: top; max-width: 320px; }
.md .tbl-wrap td { line-height: 1.55; }
.md .tbl-wrap td:first-child, .md .tbl-wrap th:first-child { font-weight: 600; }
.md .tbl-wrap tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.md .tbl-wrap td code { font-size: .88em; word-break: break-all; }
.md .tbl-wrap::-webkit-scrollbar { height: 6px; } .md .tbl-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* bar charts */
.chart { gap: 9px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 90%, transparent), transparent); }
.chart-row { grid-template-columns: minmax(64px, 120px) 1fr 56px; gap: 10px; }
.chart-row .cl { font-size: 12.5px; min-width: 0; max-width: none; }
.chart-row .track { height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--text3) 14%, transparent); }
.chart-row .track i { border-radius: 8px; background: linear-gradient(to left, var(--accent), var(--accent2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.chart-row:hover .track i { filter: brightness(1.12); }
.chart-row .cv { min-width: 0; font-size: 12px; font-weight: 600; color: var(--text2); }

/* usage panel tables — mobile: keep readable */
.usage-table th, .usage-table td { padding: 8px 10px; }
.usage-table thead th { position: sticky; top: 0; background: var(--panel-solid); z-index: 1; }
.card.tbl { overflow: auto; max-height: 360px; scrollbar-width: thin; }

/* ═══════════ v3.10 — mobile polish ═══════════ */
@media (max-width: 700px) {
  .messages { padding: 12px 8px 20px; gap: 16px; }
  .msg.model .bubble { padding: 10px 12px; font-size: 14.5px; }
  .msg.model .bubble-wrap { max-width: calc(100% - 34px); }
  .msg.user .bubble { padding: 9px 12px; }
  .md .tbl-wrap { margin: .7em -4px; border-radius: 12px; }
  .md .tbl-wrap th, .md .tbl-wrap td { padding: 7px 10px; font-size: 13px; max-width: 220px; }
  .md pre { margin-inline: -4px; border-radius: 12px; }
  .chart { padding: 12px; }
  .chart-row { grid-template-columns: minmax(56px, 92px) 1fr 44px; gap: 8px; }
  .chart-row .cl { font-size: 12px; }
  .sources a.src { height: 34px; max-width: 160px; }
  .src-t b { font-size: 11.5px; }
  .msg-meta { gap: 5px 8px; font-size: 10.5px; }
  .msg-meta .tag { padding: 2px 7px; }
  .read-row { margin-top: 2px; }
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .kpi { padding: 10px 12px; } .kpi b { font-size: 20px; }
  .keys-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .card { padding: 12px; border-radius: 14px; }
  .panel-body { padding: 10px; gap: 10px; }
  .usage-table { font-size: 12px; }
  .usage-table th, .usage-table td { padding: 7px 8px; }
  .card.tbl { max-height: 300px; margin-inline: -2px; }
  .ubar .ul { font-size: 11px; }
  .mem-stats { gap: 6px; }
  .mem-stat { padding: 8px 6px; }
  .composer { border-radius: 18px; }
  .send { width: 42px; height: 42px; }
  .suggest .chip-btn { font-size: 12.5px; }
  .topbar .conv-title { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .code-head { padding: 5px 9px; }
  .md pre code { font-size: 12.5px; }
}
@media (max-width: 420px) {
  .msg.model .avatar { display: none; }
  .msg.model .bubble-wrap { max-width: 100%; }
  .md .tbl-wrap th, .md .tbl-wrap td { font-size: 12.5px; padding: 6px 8px; }
}
.chart-row .track i { position: absolute; inset-block: 0; inset-inline-start: 0; }

/* v3.10 fixes */
.kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.md .tbl-wrap th, .md .tbl-wrap td { min-width: 92px; }
.md .tbl-wrap td:first-child, .md .tbl-wrap th:first-child { position: sticky; inset-inline-start: 0; background: color-mix(in srgb, var(--panel-solid) 92%, transparent); z-index: 1; }
.md .tbl-wrap thead th:first-child { z-index: 2; }
@media (max-width: 700px) {
  .md .tbl-wrap th, .md .tbl-wrap td { min-width: 108px; white-space: normal; }
  .md .tbl-wrap td:first-child, .md .tbl-wrap th:first-child { min-width: 88px; max-width: 120px; }
  .kpis, .keys-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .kg-wrap { height: clamp(300px, 52vh, 480px); }
}

/* v3.10.1 — non-renderable images (HEIC on non-Apple browsers) */
.att-img.noimg { aspect-ratio: 4 / 3; width: min(220px, 100%); background: linear-gradient(135deg, var(--glass2), var(--glass)); display: grid; place-items: center; }
.att-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text3); font-size: 11px; }
.att-ph svg.ico { width: 26px; height: 26px; opacity: .7; }
.att-ph b { font-size: 10px; letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; background: var(--glass2); border: 1px solid var(--border); }

/* v3.11 — confirmation card for sensitive actions */
.act-confirm { flex: 1 1 100%; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--glass2)); border-radius: 12px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.act-confirm-title { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.act-confirm-title i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); font-style: normal; }
.act-confirm-title i svg.ico { width: 11px; height: 11px; stroke-width: 3; }
.act-confirm-preview { font-size: 12px; color: var(--text2); white-space: pre-wrap; max-height: 160px; overflow: auto; border-inline-start: 2px solid var(--border); padding-inline-start: 8px; }
.act-confirm-preview .pv + .pv { margin-top: 4px; }
.act-confirm-btns { display: flex; gap: 8px; }
.act-confirm-btns button { padding: 6px 14px; border-radius: 9px; font-size: 13px; }
.act-confirm-btns .act-no { border: 1px solid var(--border); background: transparent; color: var(--text2); }
.act-confirm-btns .act-no:hover { color: var(--text); }
.act-confirm.rejected { opacity: .65; border-style: dashed; }
.act-confirm.confirmed { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 6%, var(--glass2)); }
.act-confirm-done { font-size: 12px; color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════
   v3.11.1 — polish pass: exact hover boxes, calmer new-chat, graph upgrades,
   and a lighter render path for weak phones
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) every icon-only button is a tight, centred box — the hover/active
      background hugs the icon instead of floating somewhere next to it */
button.danger, button.danger.sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
button.danger.sm:not(:has(span)):not(:has(b)) { padding: 0; width: 32px; height: 32px; border-radius: 9px; }
.icon-btn, .kg-tb, .lb-x, .lb-z, .lb-dl, .lb-nav, .t-x, .src-nav, .msg-tools .icon-btn, .conv-item .acts .icon-btn { padding: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; }
.icon-btn > i, .icon-btn > span:only-child { display: inline-flex; line-height: 0; }
.icon-btn svg.ico, .kg-tb svg.ico { display: block; }
.chip-btn { line-height: 1; box-sizing: border-box; }
.chip-btn:not(:has(span)):not(:has(b)):not(:has(em)) { min-width: 34px; padding: 0 8px; justify-content: center; }
.chip-btn svg.ico { display: inline-block; flex: 0 0 auto; }
.sb-tool { box-sizing: border-box; }
.sb-tool i[data-icon] { display: inline-flex; line-height: 0; }
/* hover visuals stay inside the button box */
.icon-btn:hover, .chip-btn:hover, .kg-tb:hover, .sb-tool:hover, .conv-item:hover { transform: none; }
.icon-btn:active, .chip-btn:active, .kg-tb:active { transform: scale(.92); }
.icon-btn:focus-visible, .chip-btn:focus-visible, .kg-tb:focus-visible { outline-offset: 0; }
/* message tools: no vertical shimmy that made the hover look misaligned */
.msg-tools { transform: none; }
.msg:hover .avatar { transform: none; }

/* 2) new-chat screen — quiet, centred, nothing to click */
.welcome { justify-content: center; min-height: calc(100% - 40px); padding: 6vh 20px 12vh; gap: 0; }
.hero { gap: 12px; }
.hero .logo.big { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 6px; }
.hero h1 { font-size: 30px; margin: 0; }
.hero p { font-size: 15px; color: var(--text3); }
@media (max-width: 720px) { .hero h1 { font-size: 24px; } .hero p { font-size: 14px; } .welcome { padding-top: 12vh; } }

/* 3) knowledge graph — the user's own node is the star, nodes expose facts */
.kg-node.self .dot { fill: #f0b74a !important; stroke: #fff; stroke-width: 2.5; }
.kg-node.self .halo { fill: #f0b74a !important; }
.kg-node.self .ring { stroke: #f0b74a !important; opacity: 1; stroke-width: 1.2; stroke-dasharray: 0; }
.kg-node.self .kg-ini { font-size: 15px; fill: rgba(0,0,0,.7); }
.kg-node.self .kg-lbl { font-weight: 800; font-size: 13px; }
.kg-node.self .halo { opacity: .28; }
.kg-desc { margin: 0; font-size: 12px; color: var(--text2); line-height: 1.6; }
.kg-facts { margin: 0; padding: 0 0 0 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.kg-facts li { font-size: 12px; line-height: 1.6; color: var(--text2); padding: 5px 9px; border-radius: 9px; background: var(--glass2); border-inline-start: 2px solid var(--accent); }
.kg-actions { flex: 0 0 auto; }
.kg-actions .primary.sm { align-self: flex-start; }
/* lite mode: no blur filters / shadows / dashed spin — GPU-cheap on phones */
.kg.lite .kg-node .halo { display: none; }
.kg.lite .kg-node .dot { filter: none; }
.kg.lite .kg-edge.on { filter: none; }
.kg.lite .kg-node.on .ring { animation: none; }
.kg.lite .kg-bg { display: none; }
.kg.lite .kg-node, .kg.lite .kg-edge, .kg.lite .kg-rel, .kg.lite .kg-node .halo, .kg.lite .kg-node .ring, .kg.lite .kg-node .dot { transition: none; }

/* 4) performance on weak phones — same look, cheaper to paint */
@media (max-width: 720px), (pointer: coarse) {
  .sidebar, .topbar, .composer, .lightbox, .panel, .dropzone { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar, .panel { background: var(--panel-solid); }
  .topbar, .composer { background: var(--panel-solid); }
  .msg { animation: none; }
  .msg.user .bubble:hover, .msg.model .bubble:hover { box-shadow: none; }
  .card.mem-item:hover, .mem-img:hover { transform: none; box-shadow: none; }
  .hero .logo.big { animation: none; }
  .send:hover::before { animation: none; display: none; }
  .att-img, .att-img img { transition: none; }
}
.conv-list { contain: content; }

/* memory panel header: the tidy button must not wrap into two lines */
.mem-stats .chip-btn { white-space: nowrap; flex: 0 0 auto; }
.mem-stats { flex-wrap: wrap; }

/* ── v3.12 connectors ─────────────────────────────────────────────────── */
.conn-card { gap: 12px; }
.conn-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--glass2); }
.conn-head { display: flex; align-items: center; gap: 8px; }
.conn-head b { font-size: 14px; }
.conn-state { margin-inline-start: auto; font-size: 11.5px; color: var(--text3); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.conn-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.conn-dot.warn { background: var(--warn); }
.conn-row .row { flex-wrap: wrap; gap: 6px; }
.conn-row input { flex: 1; min-width: 140px; }
.conn-row .help code { font-family: var(--mono); font-size: 11.5px; background: var(--glass); padding: 1px 5px; border-radius: 5px; }
.conn-hist { font-size: 12px; color: var(--text2); }
.conn-hist summary { cursor: pointer; color: var(--text2); }
.conn-h { padding: 3px 0; font-family: var(--mono); font-size: 11px; direction: ltr; text-align: left; color: var(--text3); }
.act-tool { flex: 1 1 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--glass2); font-size: 12px; }
.act-tool summary { cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 6px; color: var(--text2); list-style: none; }
.act-tool summary i { display: inline-flex; width: 14px; height: 14px; }
.act-tool summary i svg.ico { width: 12px; height: 12px; }
.act-tool summary small { color: var(--text3); }
.act-tool pre { margin: 0; padding: 8px 10px; max-height: 260px; overflow: auto; font: 11px/1.5 var(--mono); border-top: 1px solid var(--border); white-space: pre-wrap; }

/* ── v3.13 QR login, tasks, bell ───────────────────────────────────────── */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.qr-box { width: 220px; height: 220px; background: #fff; border-radius: 14px; padding: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.qr-box svg { width: 100%; height: 100%; }
.help.steps { padding-inline-start: 18px; margin: 4px 0; }
.help.steps li { margin: 3px 0; }
.help.warn { color: var(--warn); }
.tasks-card { gap: 10px; }
.task-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--glass2); display: flex; flex-direction: column; gap: 6px; }
.task-row.st-done, .task-row.st-error { opacity: .7; }
.task-head { display: flex; align-items: center; gap: 8px; }
.task-head b { font-size: 13.5px; flex: 1; }
.task-row .row { gap: 6px; }
.note-row { padding: 6px 0; border-top: 1px solid var(--border); }
.note-row.unseen b::before { content: '● '; color: var(--ok); }
.note-row b { font-size: 12.5px; }
.note-row .help { white-space: pre-wrap; }
.bell-wrap { position: relative; display: inline-flex; }
.bell-n { position: absolute; top: -2px; inset-inline-end: -2px; pointer-events: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ok); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.icon-btn.bell.has svg { color: var(--ok); }

/* ── v3.13.2 tidy panels (accordion groups) + mobile perf ─────────────── */
.pnav { position: sticky; top: -16px; z-index: 2; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 6px; margin: -8px 0 -4px; background: var(--panel-solid); scrollbar-width: none; }
.pnav::-webkit-scrollbar { display: none; }
.pnav .chip-btn { flex: 0 0 auto; white-space: nowrap; }
.pgroup { border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--glass) 60%, transparent); overflow: hidden; }
.pgroup-h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--text); user-select: none; }
.pgroup-h::-webkit-details-marker { display: none; }
.pgroup-h svg.ico { width: 17px; height: 17px; color: var(--text3); }
.pgroup-h .n { margin-inline-start: auto; font-size: 11px; font-weight: 500; color: var(--text3); }
.pgroup-h .chev { margin-inline-start: auto; display: inline-flex; transition: transform .2s; color: var(--text3); }
.pgroup-h .n + .chev { margin-inline-start: 8px; }
.pgroup[open] > .pgroup-h .chev { transform: rotate(-90deg); }
.pgroup-b { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 12px; }
.pgroup-b > .card { margin: 0; }
.panel-body > .pgroup { animation: none; }
@media (max-width: 900px) {
  .panel-body { padding: 12px 12px 90px; gap: 10px; }
  .panel .card { padding: 12px; border-radius: 12px; }
  .panel .field label { font-size: 12px; }
  .panel .help { font-size: 11.5px; line-height: 1.6; }
  .panel .row { flex-wrap: wrap; }
  .panel .row > input, .panel .row > select { min-width: 0; flex: 1 1 140px; }
  /* cheaper compositing on phones: no heavy blur behind the composer / panels */
  .composer, .panel, .savebar, .dd-menu { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .composer { background: var(--panel-solid); }
  .panel-body > * { animation: none; }
  .msg .bubble { contain: content; }
}
.pgroup-b > details, .panel-body > details.pgroup > .pgroup-b > .card { margin: 0; }
@media (max-width: 900px) {
  .mem-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mem-stats .grow { display: none; }
  .mem-stats > button { grid-column: 1 / -1; justify-self: center; }
  .mem-stat, .mem-stats > .stat { padding: 8px 6px; }
  .mem-stat b, .mem-stats > .stat b { font-size: 16px; }
}
.note-body { white-space: pre-wrap; }
.note-img { display: inline-block; vertical-align: middle; margin: 4px 2px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--glass2); width: 72px; height: 72px; cursor: zoom-in; }
.note-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── v3.14 mobile performance ─────────────────────────────────────────── */
.messages.hist .msg { animation: none !important; }
@media (max-width: 900px) {
  body::before { display: none; }                       /* two fixed radial gradients = constant GPU cost on phones */
  .msg { animation: none; }
  .bubble, .card, .composer, .topbar, .sidebar { box-shadow: none; }
  .conv-list .conv, .sb-tool { transition: none; }
  .splash { transition: none; }
  * { text-shadow: none !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .msg.model .bubble.stream-cursor::after { animation-duration: 1.2s; }
}
.lb-img.lb-lowres { filter: blur(6px) saturate(1.05); transform-origin: center; }
.lb-img { transition: filter .25s ease; touch-action: none; }
.lightbox { transition: opacity .12s linear; }
#settingsSavebar { position: sticky; bottom: -40px; margin: 8px -18px -40px; }
.pgroup .savebar { display: none; }
@media (max-width: 900px) { #settingsSavebar { margin: 8px -12px -90px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }
/* phones: helper texts are clamped to one line and expand on tap */
@media (max-width: 900px) {
  .panel .help.hint { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .panel .help.hint.open { -webkit-line-clamp: unset; }
  .panel .field.inline { align-items: center; padding: 8px 0; }
  .panel .field.inline > div:first-child { min-width: 0; }
  .panel .field.inline label:first-child { font-size: 13.5px; }
}
@media (max-width: 900px) {
  .msg-tools .icon-btn { width: 34px; height: 34px; }
  .msg-tools .icon-btn svg { width: 17px; height: 17px; }
  .bubble pre { font-size: 12.5px; }
  .bubble table { display: block; overflow-x: auto; max-width: 100%; }
}
/* every text-ish input inside a panel/card looks the same (no bare white system inputs) */
.panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.range), .panel select, .panel textarea, .modal input:not([type=checkbox]), .modal select, .modal textarea {
  background: var(--glass); color: var(--text); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 14px; outline: none; min-width: 0;
}
.panel select option, .modal select option { background: var(--panel-solid); color: var(--text); }
.panel input:focus, .panel select:focus, .panel textarea:focus { border-color: var(--accent); }
.panel .search-box input, .panel .search-box input:focus { background: none; border: 0; padding: 0; border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.15 — visual cleanup: flat surfaces, no glow/halo, consistent controls,
   hovers that stay inside their element, compact sidebar & header.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── surfaces: flat, no gradients / inset glows ─────────────────────────── */
.panel { background: var(--panel-solid); }
.panel-head { padding: 14px 18px; background: none; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.panel-body { padding: 14px 16px 60px; gap: 10px; }
.card { background: var(--glass); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; gap: 10px; box-shadow: none; }
.card:hover { border-color: var(--border); }
.card.warn { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.pgroup { background: none; border: 1px solid var(--border); border-radius: 14px; }
.pgroup-h { padding: 11px 14px; font-size: 13.5px; font-weight: 650; }
.pgroup-h svg.ico { width: 16px; height: 16px; }
.pgroup-b { padding: 0 10px 10px; gap: 8px; }
.pgroup-b > .card { background: none; border: 0; padding: 4px 4px 0; }
.pgroup-b > .card + .card { border-top: 1px solid var(--border); padding-top: 10px; }
.panel h3.sec::after { background: var(--border); }
.panel h3.sec { font-size: 12px; font-weight: 650; }

/* ── text ─────────────────────────────────────────────────────────────────── */
.panel .help, .field .help { font-size: 12px; line-height: 1.6; color: var(--text3); }
.panel .help.hint { color: var(--text3); }
.note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text3); }
.note.center { text-align: center; padding-top: 6px; }
.status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.status-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid3 input { min-width: 0; }

/* ── fields / switches ────────────────────────────────────────────────────── */
.field label { font-weight: 600; font-size: 12.5px; color: var(--text2); }
.field label output { background: none; padding: 0; color: var(--text2); font-weight: 600; }
.field.inline { padding: 9px 0; border-bottom: 1px solid var(--border); gap: 14px; }
.field.inline:first-child { padding-top: 2px; }
.field.inline:last-child { border-bottom: 0; padding-bottom: 2px; }
.field.inline > div { min-width: 0; }
.field.inline > div label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.field.inline > div .help { margin-top: 2px; }
.field input:focus, .field textarea:focus, .field select:focus,
.panel input:focus, .panel select:focus, .panel textarea:focus { box-shadow: none !important; border-color: var(--border2) !important; }
.switch { width: 40px; height: 24px; }
.switch span { background: var(--glass2); border: 1px solid var(--border2); box-shadow: none; }
.switch span::before { width: 18px; height: 18px; inset-inline-start: 2px; top: 2px; box-shadow: none; background: var(--text3); }
.switch input:checked + span { background: var(--btn); border-color: var(--btn); box-shadow: none; }
.switch input:checked + span::before { transform: translateX(-16px); background: var(--btn-text); }
html[dir="ltr"] .switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 2px var(--border2); }
input.range::-webkit-slider-runnable-track { background: var(--glass2); border: 1px solid var(--border); }
input.range::-webkit-slider-thumb { background: var(--btn); border: 0; box-shadow: none; width: 16px; height: 16px; margin-top: -6px; }
input.range:active::-webkit-slider-thumb { transform: none; }
input.range::-moz-range-thumb { background: var(--btn); border: 0; }
input.range::-moz-range-progress { background: var(--glass2); }
.seg { border-radius: 10px; padding: 2px; gap: 2px; }
.seg-b { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; }
.seg-b.on { box-shadow: none; border: 1px solid var(--border); }
.seg-b svg.ico { width: 14px; height: 14px; }

/* ── buttons: fixed height, text never overflows ──────────────────────────── */
button.primary, button.ghost, button.danger, .chip-btn {
  white-space: nowrap; box-sizing: border-box; line-height: 1; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 10px; max-width: 100%;
}
button.primary.sm, button.ghost.sm, button.danger.sm, .chip-btn.sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
button.primary svg.ico, button.ghost svg.ico, button.danger svg.ico, .chip-btn svg.ico { width: 15px; height: 15px; flex: 0 0 auto; }
button.primary > span, button.ghost > span, button.danger > span, .chip-btn > span { overflow: hidden; text-overflow: ellipsis; }
button.primary:active, button.ghost:active, button.danger:active { transform: none; opacity: .85; }
button.danger.sm:not(:has(span)):not(:has(b)) { padding: 0 12px; width: auto; height: auto; }
button:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card .row { gap: 8px; }
.savebar { background: var(--panel-solid); border-top: 1px solid var(--border); box-shadow: none; backdrop-filter: none; }
.savebar .muted { font-size: 12px; color: var(--text3); }

/* ── attachment chips: remove button hover exactly on the button ──────────── */
.att { padding: 5px 6px 5px 8px; gap: 8px; border-radius: 10px; }
.att .rm { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; line-height: 0; border-radius: 50%; flex: 0 0 auto; color: var(--text3); background: transparent; transform: none; }
.att .rm svg { width: 14px; height: 14px; display: block; }
.att .rm:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.att .rm:active { transform: none; }

/* ── composer / send: no rocket flame, no lift ─────────────────────────────── */
.send { width: 40px; height: 40px; border-radius: 12px; background: var(--btn); color: var(--btn-text); box-shadow: none; overflow: hidden; }
.send:hover { background: var(--btn-hover); transform: none; }
.send:hover svg { transform: none; }
.send::before, .send:hover::before { display: none; animation: none; }
.send.stop { background: var(--danger); color: #fff; }
.composer { box-shadow: none; }
.composer:focus-within { border-color: var(--border2); box-shadow: none; }
.chip-btn.toggle.on { background: var(--glass2); border-color: var(--border2); }

/* ── sidebar ──────────────────────────────────────────────────────────────── */
.new-chat { padding: 9px 12px; border-radius: 11px; gap: 8px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
.new-chat:hover { transform: none; }
.new-chat kbd { display: none; }
.search-box { height: 36px; border-radius: 10px; }
.conv-group { padding: 10px 8px 3px; font-size: 10.5px; }
.conv-item { padding: 7px 8px; border-radius: 9px; gap: 6px; min-height: 36px; }
.conv-item .ttl { font-size: 13px; }
.conv-item.active::before { display: none; }
.conv-item.active { background: var(--glass2); font-weight: 600; }
.conv-item .acts .icon-btn { width: 26px; height: 26px; border-radius: 6px; }
.conv-item .acts svg { width: 13px; height: 13px; }
.sb-foot { gap: 4px; padding-top: 8px; }
.sb-tool { padding: 8px 9px; border-radius: 9px; font-size: 12.5px; gap: 7px; min-height: 36px; }
.sb-tool em { font-size: 10.5px; padding: 0 6px; }
.brand b { font-size: 14.5px; }

/* ── header ───────────────────────────────────────────────────────────────── */
.topbar { padding: 8px 12px; gap: 6px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
.top-actions { gap: 2px; align-items: center; }
.conv-title { font-size: 14.5px; }

/* ── generic hovers: never move the element ───────────────────────────────── */
.suggest button:hover, .vl-mic:hover, .card.mem-item:hover, .mem-img:hover, .att-img:hover, .sources a.src:hover { transform: none; box-shadow: none; }
.icon-btn:hover { background: var(--glass2); }
.mem-item .acts { opacity: 1; }
.mem-item .acts .icon-btn { color: var(--text3); }
.mem-item .acts .icon-btn:hover { color: var(--text); }

/* ── connectors / tasks / install ─────────────────────────────────────────── */
.conn-row, .task-row { background: none; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; gap: 8px; }
.conn-head b { font-size: 13.5px; }
.conn-state { font-size: 11.5px; color: var(--text3); margin-inline-start: auto; }
.conn-dot.on { box-shadow: none; }
.conn-hist summary { font-size: 12px; color: var(--text3); cursor: pointer; }
.ins-hero { padding: 2px 0 6px; gap: 10px; }
.ins-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--glass2); box-shadow: none; display: grid; place-items: center; }
.ins-ico svg.ico { width: 20px; height: 20px; }
.ins-txt b { font-size: 13.5px; }
.ins-actions, .ins-diag, .ins-msg { padding-inline: 0; }
.ins-msg { padding-block: 6px 2px; font-size: 12.5px; line-height: 1.7; }
.ins-msg.warn { background: none; border-top: 0; }
.install-card .pill { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 11px; padding: 3px 9px; border: 1px solid var(--border); background: none; }
.key-card .sub { background: none; padding: 0; }
.key-foot { font-size: 12px; color: var(--text3); align-items: center; gap: 6px; }
.key-foot .grow { flex: 1 1 100%; line-height: 1.7; }
.key-foot button { flex: 1 1 auto; }

/* ── phones: nothing translucent / blurred / glowing (GPU-cheap, no halos) ── */
@media (max-width: 900px) {
  .topbar, .composer, .sidebar, .panel, .panel-head, .savebar, .pnav, .modal, .lightbox, .toast, .voice-live, .dropzone, .md .tbl-wrap thead th { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .composer { background: var(--panel-solid); box-shadow: none; }
  .sidebar { background: var(--panel-solid); }
  .toast { background: var(--panel-solid); }
  .voice-live { background: var(--bg); }
  .card, .pgroup, .conn-row, .task-row, .msg .bubble, .icon-btn, .chip-btn, .new-chat, .send, .seg-b, .switch span, .switch span::before, .modal, .toast { box-shadow: none !important; }
  .panel-body { padding: 12px 12px 90px; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .seg-b { padding: 6px 10px; }
  .field.inline > div label { font-size: 13px; }
  .btn-row > button, .card .row > button { flex: 1 1 auto; min-width: 0; }
  .card .row > input { flex: 1 1 100%; }
  .conn-row .row { display: flex; }
  .conn-row .row > .chip-btn, .conn-row .row > button { flex: 1 1 auto; }
  .panel .help.hint { -webkit-line-clamp: 2; cursor: default; }
  .conv-item { min-height: 40px; }
  .sb-tool { min-height: 40px; }
}
/* secondary buttons inside panels look like real buttons (bordered), not bare text chips */
.panel .card .chip-btn, .panel .conn-row .chip-btn, .panel .task-row .chip-btn, .pgroup-b .chip-btn { background: var(--glass); border: 1px solid var(--border); color: var(--text2); }
.panel .card .chip-btn:hover, .pgroup-b .chip-btn:hover { background: var(--glass2); color: var(--text); }
.pnav .chip-btn { background: none; border: 0; }
.pnav .chip-btn.on { background: var(--text); color: var(--bg); }
.panel-body > details.pgroup > .pgroup-b { animation: fadeUp .2s ease both; }
/* search boxes: the inner input is always bare (the generic .panel input rule must not paint a second box) */
.search-box input, .panel .search-box input:not([type=checkbox]), .panel .search-box input:focus, .sidebar .search-box input, .kg-search input, .panel .kg-search input:not([type=checkbox]) {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; font-size: 13.5px;
}
.search-box:focus-within, .kg-search:focus-within { border-color: var(--border2); color: var(--text); }
/* desktop: panels take the whole screen, content in a comfortable centred column */
@media (min-width: 901px) {
  :root { --panel-w: 100vw; }
  .panel { width: 100vw; border-inline-start: 0; }
  .panel-head { padding: 14px max(20px, calc((100vw - 960px) / 2)); }
  .panel-head h2 { font-size: 18px; }
  .panel-body { padding: 18px max(20px, calc((100vw - 960px) / 2)) 80px; gap: 12px; }
  #settingsSavebar, .savebar { margin-inline: calc(-1 * max(20px, (100vw - 960px) / 2)); padding-inline: max(20px, calc((100vw - 960px) / 2)); }
  .panel-body > details.pgroup { border: 0; border-radius: 0; border-top: 1px solid var(--border); }
  .panel-body > details.pgroup:first-of-type { border-top: 0; }
  .panel-body > details.pgroup > .pgroup-h { padding: 14px 4px; font-size: 14.5px; }
  .panel-body > details.pgroup > .pgroup-b { padding: 0 4px 18px; }
  .panel-body > details.pgroup > .pgroup-b > .card { padding: 4px 0 0; }
  .mem-gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .app.panel-open .panel-backdrop { opacity: 0; pointer-events: none; }
}

/* v3.17 — brand: Kalim logo tile */
.logo { background: url("../icons/logo-256.png") center / cover no-repeat; border: 0; border-radius: 8px; }
.logo::after, html[data-theme="light"] .logo::after { display: none; }
.logo.big { border-radius: 15px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.18 — unified palette. One surface colour for sidebar / header / composer /
   panels, the chat canvas one step apart, hairline borders — no odd contrast
   jumps between the menu and the chat.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #131416;            /* chat canvas */
  --bg2: #17181b;
  --surface: #0f1012;       /* sidebar, header, composer, panels */
  --panel: var(--surface);
  --panel-solid: var(--surface);
  --card: #17181b;
  --glass: rgba(255, 255, 255, .04);
  --glass2: rgba(255, 255, 255, .075);
  --border: rgba(255, 255, 255, .07);
  --border2: rgba(255, 255, 255, .13);
  --text: #eceef0;
  --text2: #a9adb4;
  --text3: #6f747c;
  --user-bubble: #1f2124;
  --user-border: rgba(255, 255, 255, .09);
  --code-bg: #0f1012;
  --accent-solid: #1f2124;
}
html[data-theme="light"] {
  --bg: #f4f5f7;            /* chat canvas */
  --bg2: #eef0f2;
  --surface: #ffffff;       /* sidebar, header, composer, panels */
  --panel: var(--surface);
  --panel-solid: var(--surface);
  --card: #ffffff;
  --glass: rgba(20, 22, 26, .04);
  --glass2: rgba(20, 22, 26, .075);
  --border: rgba(20, 22, 26, .08);
  --border2: rgba(20, 22, 26, .16);
  --text: #191a1d;
  --text2: #4b4f56;
  --text3: #858a92;
  --user-bubble: #e6e8eb;
  --user-border: rgba(20, 22, 26, .08);
  --code-bg: #1a1b1f;
  --accent-solid: #eef0f2;
}
body::before { display: none; }                              /* no radial washes anywhere */
.sidebar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-inline-end: 1px solid var(--border); gap: 8px; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.main { background: var(--bg); }
.composer-wrap { background: linear-gradient(to top, var(--bg) 60%, transparent); }
.composer { background: var(--surface); border: 1px solid var(--border2); box-shadow: 0 6px 24px rgba(0, 0, 0, .10); }
html[data-theme="light"] .composer { box-shadow: 0 6px 24px rgba(30, 34, 40, .06); }
.composer:focus-within { border-color: var(--border2); }
.panel, .panel-head, .savebar, .pnav { background: var(--surface); }
.card { background: var(--card); border-color: var(--border); }
.pgroup-b > .card { background: none; }

/* chat bubbles: model text sits on the canvas; user gets a soft tile */
.msg.model .bubble { background: transparent; border: 0; padding: 4px 2px; }
.msg.model .bubble:hover, .msg.user .bubble:hover { box-shadow: none; }
.msg.user .bubble { background: var(--user-bubble); border: 1px solid var(--user-border); }
.bubble pre, .md pre { background: var(--code-bg); border: 1px solid var(--border); }

/* sidebar controls follow the same surface language */
.new-chat { background: var(--btn); color: var(--btn-text); }
.search-box { background: var(--glass); border-color: var(--border); }
.conv-item:hover { background: var(--glass); }
.conv-item.active { background: var(--glass2); }
.sb-foot { border-top-color: var(--border); }
.sb-tool:hover { background: var(--glass); }
.sb-tool em { background: var(--glass2); }

/* header */
.conv-title:hover, .conv-title:focus { background: var(--glass); }
.icon-btn:hover { background: var(--glass2); }

/* mobile sheet/drawer follow the surface too */
@media (max-width: 900px) {
  .sidebar, .panel, .panel-head, .composer, .topbar { background: var(--surface) !important; }
}

/* ───────── v3.18 — activity screen (tasks + timeline) ───────── */
.act-wrap { display: flex; flex-direction: column; gap: 8px; }
.act-h { display: flex; align-items: center; gap: 8px; padding: 14px 4px 4px; font-size: 12.5px; font-weight: 650; color: var(--text2); letter-spacing: .1px; }
.act-h:first-child { padding-top: 2px; }
.act-h .act-n { font-size: 11px; font-weight: 600; color: var(--text3); background: var(--glass2); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.act-h .chip-btn { margin-inline-start: auto; }
.act-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel-solid); }
.trow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 11px 12px; border-top: 1px solid var(--border); }
.trow:first-child { border-top: 0; }
.trow-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--glass2); color: var(--text2); }
.trow-ic svg.ico { width: 17px; height: 17px; }
.trow-ic.k-agent { color: var(--accent-solid); background: color-mix(in srgb, var(--accent-solid) 12%, transparent); }
.trow-ic.k-watch { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.trow-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.trow-t b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-k { font-size: 11px; color: var(--text3); flex: 0 0 auto; }
.trow-s { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.st-dot.st-active { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.st-dot.st-paused { background: var(--warn); }
.st-dot.st-error { background: var(--danger); }
.trow-d { font-size: 12px; color: var(--text3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trow-a { display: flex; gap: 2px; margin-top: -3px; }
.trow-a .icon-btn { width: 30px; height: 30px; border-radius: 8px; color: var(--text3); }
.trow-a .icon-btn:hover { color: var(--text); background: var(--glass2); }
.trow-a .icon-btn svg.ico { width: 15px; height: 15px; }
.trow.st-done, .trow.st-error { opacity: .75; }
.trow.st-done .trow-ic { color: var(--text3); background: var(--glass2); }
.act-empty { display: flex; gap: 12px; align-items: center; padding: 16px 14px; border: 1px dashed var(--border2); border-radius: 14px; color: var(--text2); }
.act-empty > span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--glass2); color: var(--text3); flex: 0 0 auto; }
.act-empty > span svg.ico { width: 18px; height: 18px; }
.act-empty b { font-size: 13px; display: block; margin-bottom: 2px; }
.act-empty .help { margin: 0; font-size: 12px; }
.act-past > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; font-size: 12.5px; font-weight: 650; color: var(--text2); }
.act-past > summary::-webkit-details-marker { display: none; }
.act-past > summary .chev { margin-inline-start: auto; display: inline-flex; color: var(--text3); transition: transform .2s; }
.act-past[open] > summary .chev { transform: rotate(-90deg); }
.act-past .act-list { margin-top: 4px; }
/* timeline */
.tl { display: flex; flex-direction: column; position: relative; padding: 2px 0 6px; }
.tl-day { font-size: 11px; font-weight: 600; color: var(--text3); padding: 8px 4px 6px; }
.tl-day:not(:first-child) { margin-top: 4px; }
.tl-it { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 8px 4px; position: relative; }
.tl-it::before { content: ''; position: absolute; inset-inline-start: 16px; top: 34px; bottom: -8px; width: 1px; background: var(--border); }
.tl-it:last-child::before, .tl-it:has(+ .tl-day)::before { display: none; }
.tl-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--glass2); color: var(--text2); border: 1px solid var(--border); position: relative; z-index: 1; }
.tl-ic svg.ico { width: 13px; height: 13px; }
.tl-it.t-ok .tl-ic { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--panel-solid)); }
.tl-it.t-bad .tl-ic { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--panel-solid)); }
.tl-it.t-ask .tl-ic { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--panel-solid)); }
.tl-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-t { display: flex; align-items: baseline; gap: 8px; }
.tl-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl-t time { margin-inline-start: auto; font-size: 11px; color: var(--text3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tl-it .note-body { font-size: 12.5px; color: var(--text2); line-height: 1.6; white-space: pre-wrap; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tl-it.unseen .tl-t b::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); margin-inline-start: 6px; vertical-align: middle; }
.link-btn { align-self: flex-start; font-size: 12px; color: var(--accent-solid); padding: 2px 0; background: none; border: 0; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.row.between { justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
/* toasts: quieter, single-line by default, no accent border wash */
.toast { border-radius: 12px; padding: 9px 12px; font-size: 13px; max-width: min(380px, calc(100vw - 32px)); box-shadow: 0 8px 28px rgba(0,0,0,.28); background: var(--surface); }
.toast.ok, .toast.err, .toast.warn, .toast.info { border-color: var(--border2); }
.toast .t-ic { width: 22px; height: 22px; border-radius: 7px; border: 0 !important; background: var(--glass2) !important; }
.toast .t-ic svg.ico { width: 14px; height: 14px; }
.toast .t-msg { font-size: 13px; line-height: 1.5; }
.toast .t-bar { height: 2px; opacity: .6; }
@media (max-width: 900px) {
  .toasts { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 10px); inset-inline: 12px; align-items: stretch; }
  .toast { max-width: none; }
  .trow { grid-template-columns: 32px 1fr auto; padding: 10px; }
  .act-list { border-radius: 12px; }
}
.act-wrap { max-width: 720px; margin: 0 auto; width: 100%; }
.link-btn { color: var(--text2); font-weight: 600; }
.link-btn:hover { color: var(--text); text-decoration: none; }
.tl-it::before { top: 36px; bottom: -6px; opacity: .8; }
.tl-it { padding: 9px 4px; }
.trow-ic.k-agent { color: var(--text); background: var(--glass2); }
/* v3.18 — in-app notification card */
.ntoast { pointer-events: auto; cursor: pointer; display: grid; grid-template-columns: 30px 1fr 22px; gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--border2); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: min(400px, calc(100vw - 24px)); animation: rise .28s cubic-bezier(.2,.7,.3,1) both; }
.ntoast.out { animation: fadeOut .22s both; }
.ntoast .nt-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--glass2); color: var(--text2); }
.ntoast .nt-ic svg.ico { width: 15px; height: 15px; }
.ntoast.t-ok .nt-ic { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.ntoast.t-bad .nt-ic { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ntoast.t-ask .nt-ic { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.ntoast .nt-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntoast .nt-main b { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntoast .nt-main span { font-size: 12.5px; color: var(--text2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntoast .t-x { width: 22px; height: 22px; border-radius: 7px; color: var(--text3); display: grid; place-items: center; }
.ntoast .t-x svg.ico { width: 13px; height: 13px; }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 900px) { .ntoast { max-width: none; } }

/* ── v3.20: quiet footer under model answers + ⋯ sheet ─────────────────── */
.msg-foot { display: flex; align-items: center; gap: 8px; padding: 0 2px; min-height: 26px; }
.msg-foot .msg-tools { opacity: .55; transform: none; gap: 2px; }
.msg-foot .msg-tools .icon-btn { width: 26px; height: 26px; }
.msg-foot .msg-tools .icon-btn svg { width: 14px; height: 14px; }
.msg:hover .msg-foot .msg-tools, .msg:focus-within .msg-foot .msg-tools { opacity: 1; }
.msg-foot .msg-meta.mini { gap: 8px; padding: 0; opacity: .7; font-size: 11px; margin-inline-start: auto; }
.mm-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.28); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s; }
.mm-back.on { opacity: 1; }
.mm-sheet { width: min(100%, 520px); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 18px 18px 0 0; padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); transform: translateY(14px); transition: transform .2s ease; }
.mm-back.on .mm-sheet { transform: none; }
.mm-sheet .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 0 auto 8px; }
.mm-acts { display: flex; flex-direction: column; }
.mm-read { padding: 6px 8px 4px; }
.mm-read .read-row { padding: 0; margin: 0; }
.mm-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; border-radius: 12px; cursor: pointer; text-align: start; }
.mm-it:hover, .mm-it:active { background: var(--glass2); }
.mm-it i { display: grid; place-items: center; width: 22px; color: var(--text2); }
.mm-it i svg.ico { width: 17px; height: 17px; }
.mm-it.is-danger { color: var(--danger); border: 0; background: none; } .mm-it.is-danger i { color: var(--danger); }
.mm-det { margin-top: 6px; border-top: 1px solid var(--border); padding: 8px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.mm-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text3); }
.mm-kv b { font-weight: 500; color: var(--text2); text-align: end; overflow-wrap: anywhere; }
.mm-kv.warn b { color: var(--warn); }
@media (min-width: 901px) {
  .mm-back { align-items: center; }
  .mm-sheet { border-radius: 16px; width: min(92vw, 420px); }
  .mm-sheet .sheet-handle { display: none; }
}
/* ── v3.20: live auto-chat strip above the composer ──────────────────────── */
.live-wrap { max-width: 860px; margin: 0 auto 8px; display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.live-wrap[hidden] { display: none; }
.live-card { background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; animation: fadeUp .18s; }
.live-h { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; user-select: none; }
.live-h b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); animation: pulse 1.6s infinite; flex: 0 0 auto; }
.live-n { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.live-x { margin-inline-start: auto; width: 24px; height: 24px; border-radius: 7px; border: 0; background: none; color: var(--text3); display: grid; place-items: center; cursor: pointer; }
.live-x svg.ico { width: 13px; height: 13px; }
.live-x:hover { background: var(--glass2); color: var(--text); }
.live-b { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 8px; cursor: pointer; }
.live-l { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text2); min-width: 0; }
.live-l .live-w { flex: 0 0 auto; font-weight: 600; color: var(--text3); font-size: 11.5px; }
.live-l.d-out .live-w { color: var(--accent-solid); }
.live-l .live-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.live-l.d-err { color: var(--danger); } .live-l.d-sys { color: var(--text3); font-style: italic; }
.live-l:last-child .live-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-card.folded .live-h { padding: 6px 10px; }
.tl-chat { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.tl-chat .live-l .live-t { white-space: normal; }
.tl-it.t-chat .tl-ic { color: var(--text); border-color: var(--border2); }

/* ── v3.22 media cards (song / video / app) ─────────────────────────────── */

/* ── v3.22 image viewer 3.0 (overrides every older .lb-* rule above) ───────── */
html.lb-open, html.lb-open body { overflow: hidden; overscroll-behavior: none; }
.lightbox { --dim: 1; position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; place-items: initial; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; animation: fadeIn .14s both; transition: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.lightbox::before { content: ''; position: absolute; inset: 0; background: #0a0b0d; opacity: var(--dim); z-index: 0; transition: opacity .1s linear; }
.lightbox > * { position: relative; z-index: 1; }
.lightbox.out { animation: none; opacity: 0; transition: opacity .13s linear; }
.lb-top, .lb-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; z-index: 2; transition: opacity .18s ease, transform .18s ease; }
.lb-bottom { flex-direction: column; align-items: stretch; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
.lb-tl, .lb-tr { display: flex; align-items: center; gap: 6px; }
.lightbox.chrome-off .lb-top { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.lightbox.chrome-off .lb-bottom { opacity: 0; transform: translateY(8px); pointer-events: none; }
.lb-btn { position: static; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #ecedef; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .12s ease; top: auto; inset-inline: auto; backdrop-filter: none; }
.lb-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.lb-btn svg { width: 19px; height: 19px; }
.lb-count { font-family: var(--mono); font-size: 12px; color: #cfd0d6; background: none; padding: 0 4px; position: static; transform: none; letter-spacing: .3px; }
.lb-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: auto; height: auto; background: transparent; }
.lb-top, .lb-bottom { flex: 0 0 auto; }
.lb-img { position: static; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: transparent; border-radius: 0; box-shadow: none; animation: none; cursor: zoom-in; touch-action: none; transform-origin: center center; will-change: transform; transition: none; filter: none; }
.lb-img.lowres { filter: none; }
.lb-img.anim { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.lb-img.slide-l { animation: lbSlideL .22s cubic-bezier(.2,.8,.3,1) both; }
.lb-img.slide-r { animation: lbSlideR .22s cubic-bezier(.2,.8,.3,1) both; }
@keyframes lbSlideL { from { opacity: .4; transform: translate3d(-28px,0,0); } to { opacity: 1; transform: none; } }
@keyframes lbSlideR { from { opacity: .4; transform: translate3d(28px,0,0); } to { opacity: 1; transform: none; } }
.lightbox.zoomed .lb-img { cursor: grab; }
.lightbox.zoomed .lb-stage:active .lb-img { cursor: grabbing; }
.lb-load { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; animation: spin .8s linear infinite; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.14); }
.lb-nav:hover { background: rgba(0,0,0,.7); transform: translateY(-50%); }
.lb-prev { inset-inline-start: 14px; } .lb-next { inset-inline-end: 14px; }
.lightbox.zoomed .lb-nav { opacity: 0; pointer-events: none; }
.lb-cap { position: static; transform: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: 0; max-width: none; white-space: normal; text-align: center; color: #e8e8ec; font-size: 12.5px; pointer-events: none; text-shadow: none; }
.lb-cap b { font-size: 12.5px; font-weight: 600; direction: ltr; max-width: min(92vw, 640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cap small { font-size: 11px; color: #b9bcc6; line-height: 1.5; max-width: min(92vw, 640px); }
.lb-cap:empty { display: none; }
.lb-strip { position: static; transform: none; display: flex; justify-content: center; gap: 6px; padding: 4px 2px; border-radius: 0; background: none; border: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; backdrop-filter: none; }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-th { width: 48px; height: 36px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; opacity: .5; border: 2px solid transparent; padding: 0; background: rgba(255,255,255,.06); transition: opacity .15s ease, border-color .15s ease; transform: none; }
.lb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-th:hover { opacity: .85; }
.lb-th.on { opacity: 1; border-color: #fff; transform: none; }
@media (max-width: 640px) {
  .lb-btn { width: 40px; height: 40px; }
  .lb-th { width: 42px; height: 32px; }
  .lb-cap { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .lb-img.slide-l, .lb-img.slide-r, .lightbox { animation: none; } }

/* ── v3.22 offline 2.0 ────────────────────────────────────────────────────── */
.netbar { position: relative; flex: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; height: 0; overflow: hidden; background: var(--panel-solid); border-bottom: 1px solid transparent; color: var(--text2); font-size: 11.5px; transition: height .22s ease, border-color .22s; }
.netbar.in { height: 30px; border-bottom-color: var(--border); }
.netbar[hidden] { display: none; }
.netbar i { display: inline-flex; color: #e0a640; }
.netbar i svg { width: 15px; height: 15px; }
.netbar .nb-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.netbar .nb-btn { flex: 0 0 auto; font: inherit; font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border2); background: var(--glass2); color: var(--text); cursor: pointer; }
.msg.user.queued .bubble { opacity: .75; border-style: dashed; }
.queued-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); margin: 3px 4px 0; }
.queued-tag svg { width: 13px; height: 13px; }
html.is-offline #btnSend { opacity: .8; }



/* ── v3.25 media cards ─────────────────────────────────────────────── */
.media-card { margin: 8px 0 2px; width: 100%; max-width: 440px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; box-sizing: border-box; }
.media-card + .media-card { margin-top: 6px; }
.mc-head { display: flex; gap: 11px; align-items: center; padding: 10px 10px 8px; }
.mc-art { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--glass2); padding: 0; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; }
.k-video .mc-art { width: 92px; height: 56px; }
.mc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-ic { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.26); transition: opacity .18s; }
.mc-ic svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.mc-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 14px; background: rgba(0,0,0,.4); }
.mc-eq i { width: 3px; height: 8px; background: #fff; border-radius: 2px; animation: mcEq .9s ease-in-out infinite; }
.mc-eq i:nth-child(2) { animation-delay: .2s; } .mc-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes mcEq { 0%, 100% { height: 6px; } 50% { height: 16px; } }
.media-card.now-playing .mc-eq { display: flex; } .media-card.now-playing .mc-ic { opacity: 0; }
.media-card.now { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mc-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.mc-txt b { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-sub { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-meta { display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--text3); }
.mc-link { color: var(--text3); text-decoration: none; border-bottom: 1px dotted currentColor; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 10px; }
.mc-acts { display: flex; gap: 6px; align-items: center; min-width: 0; }
.mc-acts .primary.sm, .mc-acts .chip-btn.sm { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; height: 32px; white-space: nowrap; }
.mc-acts .primary.sm { min-width: 84px; justify-content: center; }
.mc-acts .primary.sm .spinner { width: 13px; height: 13px; border-width: 2px; }
.mc-acts svg { width: 14px; height: 14px; }
.mc-nav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.mc-nav .cat { font-size: 11px; color: var(--text3); min-width: 28px; text-align: center; }
.mc-nav .icon-btn { width: 28px; height: 28px; }
.vid-box { position: relative; aspect-ratio: 16 / 9; background: #000; border-top: 1px solid var(--border); }
.vid-box video, .vid-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vid-ld { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #ddd; font-size: 12px; }
.vid-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; z-index: 2; }
.vid-x svg { width: 14px; height: 14px; }
.vid-open { position: absolute; top: 9px; inset-inline-start: 8px; font-size: 10.5px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 999px; text-decoration: none; z-index: 2; opacity: .8; }
.vid-box video::-webkit-media-controls-panel { background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* player dock (sits directly above the composer, inside .composer-wrap) */
.pdock { max-width: 860px; margin: 0 auto 6px; background: var(--panel); border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transform: translateY(8px); opacity: 0; transition: transform .26s cubic-bezier(.2,.75,.25,1), opacity .22s; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.pdock.on { transform: none; opacity: 1; }
.pd-bar { height: 3px; background: var(--glass2); cursor: pointer; position: relative; }
.pd-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.pdock.loading .pd-bar i { width: 30% !important; animation: pdInd 1.1s ease-in-out infinite; }
@keyframes pdInd { 0% { margin-inline-start: -30%; } 100% { margin-inline-start: 100%; } }
.pd-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; }
.pd-art { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--glass2); flex: 0 0 auto; }
.pd-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.pd-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-txt span { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.pdock.err .pd-txt span { color: var(--danger); }
.pd-ctl { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.pd-ctl .icon-btn { width: 32px; height: 32px; }
.pd-play { width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); border: 0; display: grid; place-items: center; margin: 0 2px; }
.pd-play svg { width: 16px; height: 16px; }
.pd-play .spinner { width: 14px; height: 14px; border-width: 2px; border-color: var(--bg) transparent var(--bg) var(--bg); }
.pdock:not(.has-list) .pd-prev, .pdock:not(.has-list) .pd-next { display: none; }
@media (max-width: 600px) { .pd-txt span { font-size: 10.5px; } .pd-row { padding: 6px 6px 6px 9px; gap: 8px; } }

/* ── v3.25 playlist panel ── */
.pl-search { padding: 8px; gap: 0; }
.pl-search .search-box { width: 100%; }
.pl-res { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pl-ld { display: grid; place-items: center; padding: 14px; }
.pl-empty { font-size: 12.5px; color: var(--text3); padding: 14px 8px; text-align: center; line-height: 1.8; }
.pl-card { padding: 0; gap: 0; overflow: hidden; }
.pl-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); }
.pl-cover { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, var(--glass2), color-mix(in srgb, var(--accent) 30%, transparent)); display: grid; place-items: center; color: var(--text); flex: 0 0 auto; }
.pl-cover svg { width: 24px; height: 24px; }
.pl-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.pl-txt b { font-size: 15px; } .pl-n { font-size: 11.5px; color: var(--text2); }
.pl-playall { display: inline-flex; align-items: center; gap: 5px; }
.pl-playall svg { width: 14px; height: 14px; }
.pl-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; border-radius: 10px; position: relative; transition: background .12s; background: transparent; }
.pl-row:hover { background: var(--glass2); }
.pl-row.now { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pl-row.drag { z-index: 3; background: var(--panel-solid); box-shadow: var(--shadow); opacity: .96; }
.pl-ph { border-radius: 10px; border: 1px dashed var(--border2); }
.pl-grip { width: 22px; height: 30px; display: grid; place-items: center; color: var(--text3); cursor: grab; touch-action: none; flex: 0 0 auto; }
.pl-grip svg { width: 14px; height: 14px; }
.pl-row.add .pl-grip { display: none; }
.pl-art { position: relative; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--glass2); border: 0; padding: 0; flex: 0 0 auto; color: #fff; display: grid; place-items: center; }
.pl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-ic { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .15s; }
.pl-ic svg { width: 16px; height: 16px; } .pl-ic .spinner { width: 14px; height: 14px; border-width: 2px; }
.pl-row:hover .pl-ic, .pl-row.now .pl-ic, .pl-row.add .pl-ic { opacity: 1; }
.pl-row.now-playing .pl-ic { opacity: 0; } .pl-row.now-playing .mc-eq { display: flex; padding-bottom: 10px; }
.pl-row .mc-eq { position: absolute; inset: 0; }
.pl-t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pl-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pl-t span { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rm, .pl-add { width: 30px; height: 30px; flex: 0 0 auto; color: var(--text3); }
.pl-rm:hover { color: var(--danger); }

/* ── v3.25 voice message: composer button, recorder sheet, chat bubble ── */
#btnVoice { width: 34px; padding: 0; justify-content: center; }
#btnVoice svg { width: 17px; height: 17px; }
.vn-back { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.vn-back.on { opacity: 1; }
.vn-sheet { width: min(520px, 100%); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 22px 22px 0 0; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; transform: translateY(24px); transition: transform .28s cubic-bezier(.2,.75,.25,1); box-shadow: 0 -12px 40px rgba(0,0,0,.25); }
.vn-back.on .vn-sheet { transform: none; }
@media (min-width: 700px) { .vn-back { align-items: center; } .vn-sheet { border-radius: 22px; padding-bottom: 16px; } .vn-back.on .vn-sheet { transform: none; } .vn-sheet { transform: translateY(12px) scale(.98); } }
.vn-top { display: flex; align-items: center; gap: 10px; }
.vn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); animation: vnPulse 1.3s ease-out infinite; }
@keyframes vnPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.vn-back[data-state="review"] .vn-dot, .vn-back[data-state="sending"] .vn-dot { background: var(--ok); animation: none; }
.vn-back[data-state="prep"] .vn-dot { background: var(--text3); animation: none; }
.vn-title { font-size: 14px; flex: 1 1 auto; }
.vn-time { font-family: var(--mono); font-size: 14px; color: var(--text2); direction: ltr; font-variant-numeric: tabular-nums; }
.vn-wave { width: 100%; height: 72px; display: block; color: var(--text); border-radius: 12px; background: var(--glass2); }
.vn-back[data-state="review"] .vn-wave { color: var(--text2); }
.vn-hint { font-size: 12px; color: var(--text3); text-align: center; min-height: 16px; }
.vn-review { display: none; align-items: center; gap: 10px; }
.vn-back[data-state="review"] .vn-review { display: flex; }
.vn-pp { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; flex: 0 0 auto; }
.vn-pp svg { width: 17px; height: 17px; }
.vn-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--glass2); overflow: hidden; cursor: pointer; }
.vn-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; }
.vn-rt { font-family: var(--mono); font-size: 12px; color: var(--text2); direction: ltr; min-width: 40px; text-align: end; }
.vn-acts { display: flex; align-items: center; justify-content: center; gap: 10px; }
.vn-btn { height: 42px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; border: 1px solid var(--border2); background: var(--glass); color: var(--text); transition: transform .12s, background .15s; }
.vn-btn:active { transform: scale(.96); }
.vn-btn svg { width: 16px; height: 16px; }
.vn-btn.primary { background: var(--text); color: var(--bg); border-color: transparent; }
.vn-btn.stop { background: var(--danger); color: #fff; border-color: transparent; padding: 0 22px; height: 48px; }
.vn-btn.stop i { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.vn-back[data-state="rec"] .vn-redo, .vn-back[data-state="rec"] .vn-send, .vn-back[data-state="prep"] .vn-redo, .vn-back[data-state="prep"] .vn-send, .vn-back[data-state="prep"] .vn-stop { display: none; }
.vn-back[data-state="review"] .vn-stop, .vn-back[data-state="sending"] .vn-stop { display: none; }
.att.voice .th .ic { color: var(--text); display: grid; place-items: center; }
.att.voice .th .ic svg { width: 16px; height: 16px; }
/* bubble */
.vmsg { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 320px; padding: 8px 10px 8px 12px; border-radius: 16px; border-start-end-radius: 6px; background: var(--user-bubble); border: 1px solid var(--user-border); }
.vm-pp { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; flex: 0 0 auto; }
.vm-pp svg { width: 15px; height: 15px; }
.vm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vm-bar { --p: 0; position: relative; height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; direction: ltr; }
.vm-bar s { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 28%, transparent); text-decoration: none; display: block; }
.vm-bar i { position: absolute; inset: 0; width: calc(var(--p) * 100%); overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0); background: transparent; border-inline-end: 2px solid var(--accent); transition: width .2s linear; }
.vmsg.playing .vm-bar s { background: color-mix(in srgb, var(--text) 42%, transparent); }
.vm-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); }
.vm-meta svg { width: 12px; height: 12px; } .vm-t { font-family: var(--mono); direction: ltr; }

/* ── v3.26 voice call ─────────────────────────────────────────────── */
.sb-call { color: var(--text); }
.sb-call i svg { color: var(--ok); }
.call { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); color: var(--text); opacity: 0; pointer-events: none; transition: opacity .28s; overflow: hidden; }
.call.on { opacity: 1; pointer-events: auto; }
.call-bg { position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 38%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%); pointer-events: none; }
.call-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; position: relative; }
.call-ib { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text2); display: grid; place-items: center; }
.call-ib svg { width: 18px; height: 18px; }
.call.cap .call-ib.cap-btn { color: var(--bg); background: var(--text); border-color: transparent; }
.call .ico { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-title { flex: 1 1 auto; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.call-title b { font-size: 16px; }
.call-sub { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; direction: ltr; }
.call-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; padding: 0 16px; min-height: 0; }
.call-orb { position: relative; width: min(62vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.call-wave { position: absolute; inset: -20%; width: 140%; height: 140%; color: var(--text); }
.call-core { position: relative; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.call-core svg { width: 42%; height: 42%; stroke-width: 1.6; }
.call[data-state="listen"] .call-core { transform: scale(.94); }
.call[data-state="speak"] .call-core { transform: scale(1.06); }
.call.hear .call-core { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 25%, transparent), 0 10px 40px rgba(0,0,0,.25); }
.call[data-state="think"] .call-core svg { animation: callSpin 1.6s linear infinite; }
@keyframes callSpin { to { transform: rotate(360deg); } }
.call-status { font-size: 13px; color: var(--text2); min-height: 18px; text-align: center; }
.call-cards { width: min(100%, 420px); display: none; }
.call-cards.on { display: block; animation: fadeUp .3s both; }
.call-cards .media-card { margin: 0 auto; }
.call-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }
.call-cap { display: none; max-height: 30vh; overflow-y: auto; padding: 0 16px 8px; mask-image: linear-gradient(transparent, #000 18%); }
.call.cap .call-cap { display: block; }
.call-cap-in { display: flex; flex-direction: column; gap: 6px; max-width: 620px; margin: 0 auto; }
.cc { font-size: 14px; line-height: 1.75; padding: 8px 12px; border-radius: 14px; max-width: 92%; }
.cc.me { align-self: flex-end; background: var(--user-bubble); border: 1px solid var(--user-border); border-start-end-radius: 6px; }
.cc.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-start-start-radius: 6px; }
.call-bar { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 16px calc(26px + env(safe-area-inset-bottom, 0px)); position: relative; }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; color: var(--text2); font-size: 11.5px; }
.call-btn i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--glass2); border: 1px solid var(--border); color: var(--text); transition: transform .12s, background .15s; }
.call-btn:active i { transform: scale(.94); }
.call-btn i svg { width: 24px; height: 24px; }
.call-btn i svg + svg { display: none; }
.call-btn.end i { width: 70px; height: 70px; background: #e5484d; color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(229, 72, 77, .38); }
.call-btn.end i svg { width: 32px; height: 32px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.call.muted .call-btn.mute i, .call.nospk .call-btn.spk i { background: var(--text); color: var(--bg); border-color: transparent; }
.call.muted .call-btn.mute i svg:first-child, .call.nospk .call-btn.spk i svg:first-child { display: none; }
.call.muted .call-btn.mute i svg + svg, .call.nospk .call-btn.spk i svg + svg { display: block; }
.call.muted .call-btn.mute span, .call.nospk .call-btn.spk span { color: var(--text); }
.call[data-state="ended"] .call-stage, .call[data-state="ended"] .call-bar { opacity: .35; pointer-events: none; }
/* minimized pill while the user does other things */
.call-mini { display: none; }
.call.min { inset: calc(8px + env(safe-area-inset-top, 0px)) 12px auto 12px; height: 46px; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--border2); box-shadow: var(--shadow); }
.call.min > *:not(.call-mini) { display: none !important; }
.call.min .call-mini { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 8px 0 14px; cursor: pointer; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: vnPulse 1.4s ease-out infinite; }
.call-mini b { font-size: 13px; flex: 1 1 auto; }
.cm-t { font-family: var(--mono); font-size: 12px; color: var(--text2); direction: ltr; }
.cm-end { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; display: grid; place-items: center; }
.cm-end svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.2; }
@media (min-width: 900px) { .call { inset: 0; } .call-orb { width: 300px; } .call-bar { gap: 40px; } .call.min { inset: auto 24px 24px auto; width: 300px; } }
@media (prefers-reduced-motion: reduce) { .call-core, .call-core svg { animation: none !important; transition: none !important; } }

/* ══ v4.0 — cleaner chat, copy boxes, file cards, two task lanes ═══════════ */
/* chat rhythm: a little more air between turns, tighter inside a turn */
.messages { gap: 26px; padding-top: 28px; }
.bubble-wrap { gap: 8px; }
.msg.model .bubble { line-height: 1.75; }
.msg.user .bubble { line-height: 1.7; border-radius: 18px; border-start-end-radius: 6px; padding: 11px 15px; }
.msg.model .bubble .md > p:last-child { margin-bottom: 0; }
.msg.model .avatar { width: 30px; height: 30px; border-radius: 10px; margin-top: 4px; }
.msg.user .avatar { display: none; }
.msg.user { flex-direction: row; justify-content: flex-start; }   /* no avatar → user turn hugs the start edge (right in RTL) */
.msg.user .bubble-wrap { max-width: min(84%, 680px); align-items: flex-start; }
.msg.user .bubble { border-radius: 18px; border-start-start-radius: 6px; border-start-end-radius: 18px; }
.msg-meta { padding-top: 2px; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.1em 0; }
.md blockquote { border-inline-start: 3px solid var(--border2); background: var(--glass); border-radius: 10px; padding: 8px 14px; margin: .7em 0; color: var(--text2); }
.md ul, .md ol { padding-inline-start: 1.35em; }
.md li + li { margin-top: .22em; }

/* copy box — a quiet card whose whole text is copied with one tap */
.copybox { position: relative; margin: .7em 0; border: 1px solid var(--border2); border-radius: 14px; background: var(--card); overflow: hidden; }
.copybox::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--text3); opacity: .55; }
.copybox-text { padding: 13px 16px 12px; padding-inline-start: 18px; white-space: pre-wrap; word-break: break-word; line-height: 1.8; font-size: .97em; color: var(--text); user-select: all; -webkit-user-select: all; }
.copybox-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 10px; margin-inline-start: 18px; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border2); background: var(--glass2); color: var(--text2); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.copybox-btn:hover { color: var(--text); background: var(--btn); color: var(--btn-text); border-color: transparent; }
.copybox-btn.done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.copybox-btn svg.ico { width: 14px; height: 14px; }
@media (max-width: 640px) { .copybox-text { padding: 12px 14px 10px; padding-inline-start: 16px; } .copybox-btn { margin-inline-start: 16px; } }

/* file card (zip / apk / video / pdf …) — for user uploads and files the model hands back */
.att-file { display: grid; grid-template-columns: 40px 1fr 26px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; max-width: 320px; min-width: 200px; background: var(--card); border: 1px solid var(--border2); color: var(--text); font-size: 13px; }
.att-file .fi { width: 40px; height: 40px; border-radius: 11px; background: var(--glass2); display: grid; place-items: center; }
.att-file .fi b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--text2); }
.att-file.k-zip .fi { background: color-mix(in srgb, var(--warn) 16%, transparent); } .att-file.k-zip .fi b { color: var(--warn); }
.att-file.k-video .fi { background: color-mix(in srgb, var(--danger) 14%, transparent); } .att-file.k-video .fi b { color: var(--danger); }
.att-file.k-apk .fi { background: color-mix(in srgb, var(--ok) 16%, transparent); } .att-file.k-apk .fi b { color: var(--ok); }
.att-file.k-pdf .fi { background: color-mix(in srgb, #e07c6e 12%, transparent); }
.att-file .fmeta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-file .fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file small { color: var(--text3); font-size: 11.5px; }
.att-file .fdl { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text3); }
.att-file .fdl svg.ico { width: 15px; height: 15px; }
.att-file:hover { text-decoration: none; border-color: var(--text3); } .att-file:hover .fdl { color: var(--text); background: var(--glass2); }
.model-files { margin-top: 2px; }
.msg-attachments a.att-file { padding: 8px 10px; background: var(--card); }

/* tasks: two lanes + who / what */
.act-tools { margin-inline-start: auto; display: flex; gap: 6px; }
.act-h .act-tools .chip-btn { margin-inline-start: 0; }
.chip-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text3); }
.chip-btn.ghost:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.trow-who { display: inline-flex; align-items: center; padding: 0 7px; height: 18px; border-radius: 999px; background: var(--glass2); color: var(--text2); font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-ic.k-once { color: var(--text2); background: var(--glass2); }
.trow-ic.k-every { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.trow.k-agent .st-dot.st-active { animation: pulse 1.6s infinite; }
.trow-t b { font-size: 13px; }
.trow-d { -webkit-line-clamp: 1; }

/* notification toasts: calmer */
.ntoast { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
html[data-theme="light"] .ntoast { box-shadow: 0 8px 24px rgba(30,34,40,.10); }
.ntoast .nt-main b { font-size: 12.5px; }
.ntoast .nt-main span { font-size: 12px; }

/* ══ v4.1 — documents, maps, alarm ═══════════════════════════════════════ */
.doc-card, .map-card { display: grid; grid-template-columns: 42px 1fr; gap: 10px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border2); border-radius: 16px; background: var(--card); max-width: 460px; }
.doc-ic, .map-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--glass2); color: var(--text2); }
.doc-ic b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text2); }
.map-ic svg.ico { width: 20px; height: 20px; }
.doc-main, .map-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-t, .map-main b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-main small, .map-main small { color: var(--text3); font-size: 11.5px; }
.doc-acts, .map-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.doc-acts .chip-btn, .map-acts .chip-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.map-acts .chip-btn.primary { background: var(--btn); color: var(--btn-text); border-color: transparent; }
.alarm-sheet { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeUp .25s ease both; }
.alarm-card { width: min(360px, 88vw); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 24px; padding: 28px 22px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow); }
.alarm-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); animation: alarmShake 1s infinite; }
.alarm-ic svg.ico { width: 30px; height: 30px; }
@keyframes alarmShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.alarm-time { font-size: 40px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.alarm-title { font-size: 16px; }
.alarm-body { font-size: 13px; color: var(--text2); }
.alarm-acts { display: flex; gap: 10px; margin-top: 14px; width: 100%; }
.alarm-acts button { flex: 1; min-height: 44px; border-radius: 14px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .alarm-ic { animation: none; } }

/* ═══ v4.2 ═══ */
/* settings › model picker (was the composer dropdown) */
.dd-menu.inline-list { position: static; display: block; min-width: 0; max-height: none; box-shadow: none; animation: none; padding: 4px; margin-top: 6px; }
.dd-menu.inline-list .dd-head { display: none; }
.seg.wrap { flex-wrap: wrap; margin-top: 6px; }
.seg.wrap .seg-b { padding: 6px 12px; }
.seg-b.on { background: var(--panel-solid); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* conversion result card */
.conv-card { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass2); max-width: 420px; }
.conv-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; cursor: zoom-in; background: var(--glass); }
.conv-card .doc-ic { flex: none; }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-main small { color: var(--text3); font-size: 11.5px; direction: ltr; text-align: end; }
.conv-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (max-width: 480px) { .conv-card { flex-wrap: wrap; } .conv-acts { flex-direction: row; width: 100%; justify-content: flex-end; } }
/* alarm ringtone picker */
.ring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 6px 0 8px; }
.ring-b { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass2); color: var(--text2); font-size: 12.5px; text-align: start; transition: background .15s, color .15s, border-color .15s; }
.ring-b svg.ico { width: 14px; height: 14px; flex: none; }
.ring-b.on { background: var(--panel-solid); color: var(--text); border-color: var(--text3); box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.ring-b.custom { display: inline-flex; }
.row.gap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* download finder */
.dl-card { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass2); max-width: 560px; }
.dl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dl-head svg.ico { width: 16px; height: 16px; color: var(--text2); }
.dl-head b { font-size: 13.5px; }
.dl-head small { color: var(--text3); font-size: 11.5px; }
.dl-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-head .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-src { font-size: 11.5px; color: var(--text3); margin: 8px 0 3px; letter-spacing: .3px; }
.dl-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); margin-bottom: 4px; }
.dl-item:hover { border-color: var(--text3); }
.dl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-main b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.dl-main small { font-size: 11px; color: var(--text3); text-align: start; }
.dl-go svg.ico { width: 14px; height: 14px; color: var(--text3); }
.dl-grp { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--panel-solid); }
.dl-grp summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.dl-grp summary::-webkit-details-marker { display: none; }
.dl-grp summary b { flex: 1; font-size: 13px; }
.dl-grp summary small { color: var(--text3); font-size: 11.5px; }
.dl-files { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; }
.dl-file { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 12px; color: var(--text2); text-decoration: none; }
.dl-file:hover { background: var(--glass2); color: var(--text); }
.dl-file .n { min-width: 22px; color: var(--text3); font-variant-numeric: tabular-nums; font-size: 11px; }
.dl-file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.dl-mag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* ═══ v4.2 music player ═══ */
.pdock .pd-seek { height: 14px; padding: 6px 0; background: none; cursor: pointer; position: relative; touch-action: none; }
.pdock .pd-seek::before { content: ''; position: absolute; inset: 6px 0; background: var(--glass2); border-radius: 2px; }
.pdock .pd-seek i { position: absolute; top: 6px; bottom: 6px; inset-inline-start: 0; height: auto; width: 0; background: var(--text); border-radius: 2px; transition: none; }
.pdock .pd-seek .knob { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; margin-inline-start: -5px; border-radius: 50%; background: var(--text); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.pdock:hover .pd-seek .knob, .pdock .pd-seek:active .knob { opacity: 1; transform: none; }
.pdock.loading .pd-seek i { width: 30% !important; animation: pdInd 1.1s ease-in-out infinite; }
.pd-artb { position: relative; width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; padding: 0; border: 0; background: var(--glass2); }
.pd-artb .pd-art { width: 100%; height: 100%; border-radius: 0; display: block; }
.pd-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 8px; background: rgba(0,0,0,.28); }
.pd-eq b { width: 3px; height: 6px; background: #fff; border-radius: 1px; animation: eqb 1s ease-in-out infinite; }
.pd-eq b:nth-child(2) { animation-delay: .2s; } .pd-eq b:nth-child(3) { animation-delay: .4s; }
.pdock.playing .pd-eq { display: flex; }
@keyframes eqb { 0%, 100% { height: 5px; } 50% { height: 14px; } }
.pd-txt { cursor: pointer; }
/* now-playing sheet */
.np-sheet { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.75,.25,1); overflow: hidden; }
.np-sheet.on { transform: none; }
.np-top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.np-top .icon-btn svg { width: 20px; height: 20px; }
.np-src { font-size: 11.5px; color: var(--text3); letter-spacing: .3px; }
.np-artwrap { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; padding: 10px 0; }
.np-art { width: min(78vw, 42vh, 380px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--glass2); box-shadow: 0 18px 50px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.2,.75,.25,1); transform: scale(.92); }
.np-sheet.playing .np-art { transform: none; }
.np-artwrap { position: relative; }
.np-artph { position: absolute; width: min(78vw, 42vh, 380px); aspect-ratio: 1; border-radius: 18px; background: var(--glass2); display: grid; place-items: center; color: var(--text3); }
.np-artph svg { width: 64px; height: 64px; opacity: .55; }
.np-art { position: relative; z-index: 1; }
.np-art.none { visibility: hidden; }
.np-meta { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px; }
.np-title { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-seekwrap { padding: 6px 0 2px; }
.np-seek { position: relative; height: 26px; touch-action: none; cursor: pointer; }
.np-seek::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--glass2); }
.np-seek i { position: absolute; inset-inline-start: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--text); width: 0; }
.np-seek .knob { position: absolute; top: 13px; width: 14px; height: 14px; margin-top: -7px; margin-inline-start: -7px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.np-sheet.loading .np-seek i { width: 30% !important; animation: pdInd 1.1s ease-in-out infinite; }
.np-times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; direction: ltr; }
.np-ctl { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; }
.np-ctl .icon-btn { width: 42px; height: 42px; color: var(--text2); }
.np-ctl .icon-btn svg { width: 22px; height: 22px; }
.np-ctl .icon-btn.on { color: var(--text); background: var(--glass2); }
.np-rep { position: relative; }
.np-rep[data-one="۱"]::after { content: attr(data-one); position: absolute; top: 4px; inset-inline-end: 6px; font-size: 9px; font-weight: 700; }
.np-play { width: 64px; height: 64px; border-radius: 50%; background: var(--text); color: var(--bg); border: 0; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.np-play svg { width: 26px; height: 26px; }
.np-play .spinner { width: 20px; height: 20px; border-width: 2.5px; border-color: var(--bg) transparent var(--bg) var(--bg); }
.np-foot { display: flex; justify-content: center; gap: 8px; padding-top: 10px; }
.np-rate { min-width: 48px; justify-content: center; font-variant-numeric: tabular-nums; }
.np-queue { position: absolute; inset: 56px 0 0; background: var(--bg); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.75,.25,1); display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.np-sheet.show-q .np-queue { transform: none; }
.np-qh { padding: 12px 18px 8px; font-size: 13px; font-weight: 600; color: var(--text2); }
.np-qlist { overflow-y: auto; padding: 0 10px 20px; }
.np-qi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 10px; text-align: start; color: var(--text); }
.np-qi .n { min-width: 20px; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.np-qi .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-qi b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-qi small { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-qi .d { direction: ltr; }
.np-qi.cur { background: var(--glass2); }
.np-qi.cur b { font-weight: 700; }
@media (min-width: 720px) { .np-sheet { inset: auto 0 0 0; max-width: 480px; margin: 0 auto; height: min(92vh, 760px); border-radius: 22px 22px 0 0; border: 1px solid var(--border2); border-bottom: 0; box-shadow: var(--shadow); } }
/* song card: larger artwork, cleaner hierarchy; app card: wrap the store buttons */
.media-card.k-song .mc-art { width: 68px; height: 68px; border-radius: 12px; }
.media-card.k-song .mc-txt b { font-size: 14px; }
.media-card.k-app .mc-acts { flex-wrap: wrap; row-gap: 6px; }
.media-card.k-app .mc-foot { flex-wrap: wrap; }
.media-card.k-app .mc-art { border-radius: 14px; }

/* ── v4.3 auto-chat transcript bubbles (activities panel + live strip) ── */
.cl { display: flex; min-width: 0; }
.cl-them { justify-content: flex-start; }
.cl-me { justify-content: flex-end; }
.cl-b { position: relative; max-width: 86%; padding: 6px 10px 5px; border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text); background: var(--glass2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.cl-them .cl-b { border-start-start-radius: 4px; }
.cl-me .cl-b { border-start-end-radius: 4px; background: color-mix(in srgb, var(--text) 9%, var(--panel-solid)); border-color: color-mix(in srgb, var(--text) 22%, var(--border)); }
.cl-them .cl-b { background: var(--panel-solid); }
.cl-b time { display: inline-block; margin-inline-start: 8px; font-size: 10px; color: var(--text3); font-variant-numeric: tabular-nums; vertical-align: bottom; float: inline-end; margin-top: 4px; }
.cl-media { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--glass2); border: 1px solid var(--border); font-size: 11px; color: var(--text2); vertical-align: middle; margin: 0 2px; }
.cl-media svg.ico { width: 11px; height: 11px; }
.cl-sys, .cl-err { justify-content: center; gap: 5px; align-items: center; font-size: 11.5px; color: var(--text3); padding: 2px 8px; text-align: center; }
.cl-sys svg.ico, .cl-err svg.ico { width: 12px; height: 12px; flex: 0 0 auto; }
.cl-err { color: var(--danger); }
.tl-chat { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid) 60%, transparent); }
.tl-cnt { display: inline-flex; gap: 8px; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.tl-t .st-dot { width: 6px; height: 6px; }
.tl-it.t-chat .link-btn { align-self: flex-start; margin-top: 2px; }
.live-b { gap: 4px; padding: 2px 10px 10px; }
.live-b .cl-b { max-width: 92%; font-size: 12px; padding: 5px 9px 4px; }
.trow-live { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text3); }
.trow-stat { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.trow-last { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.trow-ago { flex: 0 0 auto; }
@media (max-width: 480px) { .trow-live .trow-last { display: none; } }

/* v4.3 streaming: cursor sits at the end of the last tail block, not under the bubble */
.bubble.stream-cursor:has(> .md-tail)::after { display: none; }
.bubble.stream-cursor .md-tail > :last-child::after, .bubble.stream-cursor .md-tail:empty::after { content: ''; display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; margin-inline-start: 3px; border-radius: 2px; background: var(--accent); animation: pulse .9s infinite; }
.bubble.stream-cursor .md-tail > pre:last-child::after, .bubble.stream-cursor .md-tail > table:last-child::after { display: none; }
.md-stable > :last-child { margin-bottom: 0.6em; }
.md-tail > :first-child { margin-top: 0; }

/* ── v4.3 files / storage panel ── */
.fs-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; width: 100%; }
.fs-top { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--glass); display: flex; flex-direction: column; gap: 10px; }
.fs-total { display: flex; align-items: baseline; gap: 8px; }
.fs-total b { font-size: 22px; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fs-total small { color: var(--text3); font-size: 12px; }
.fs-total .chip-btn { margin-inline-start: auto; align-self: center; }
.fs-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--glass2); gap: 2px; }
.fs-bar .seg { display: block; min-width: 3px; }
.s-files { background: var(--text); } .s-db { background: color-mix(in srgb, var(--text) 62%, transparent); } .s-backups { background: color-mix(in srgb, var(--text) 42%, transparent); }
.s-deriv { background: color-mix(in srgb, var(--warn) 70%, transparent); } .s-tts { background: color-mix(in srgb, var(--warn) 45%, transparent); } .s-orphans { background: color-mix(in srgb, var(--danger) 55%, transparent); }
.fs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text2); }
.fs-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fs-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fs-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fs-search { margin: 0; }
.fs-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fs-filters::-webkit-scrollbar { display: none; }
.fs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.fs-chip em { font-style: normal; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.fs-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.fs-chip.on em { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.fs-selbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--border2); font-size: 12.5px; position: sticky; top: 0; z-index: 2; }
.fs-selbar[hidden] { display: none; }
.fs-selbar span { flex: 1; }
.chip-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.fs-list { display: flex; flex-direction: column; }
.fs-day { font-size: 11px; font-weight: 600; color: var(--text3); padding: 10px 4px 4px; }
.fs-row { display: grid; grid-template-columns: 22px 44px 1fr 32px; gap: 10px; align-items: center; padding: 7px 6px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.fs-row:hover { background: var(--glass2); }
.fs-row.sel { background: color-mix(in srgb, var(--text) 7%, transparent); }
.fs-cb { display: grid; place-items: center; }
.fs-cb input { width: 16px; height: 16px; accent-color: var(--text); cursor: pointer; margin: 0; }
.fs-th { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--glass2); color: var(--text2); border: 1px solid var(--border); }
.fs-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-th svg.ico { width: 18px; height: 18px; }
.fs-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fs-n b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-align: start; unicode-bidi: plaintext; display: block; }
.fs-vault { display: inline-flex; color: var(--text3); flex: 0 0 auto; }
.fs-vault svg.ico { width: 11px; height: 11px; }
.fs-s { display: flex; align-items: center; gap: 8px; justify-content: flex-start; font-size: 11.5px; color: var(--text3); min-width: 0; font-variant-numeric: tabular-nums; }
.fs-conv { background: none; border: 0; padding: 0; color: var(--text3); font-size: 11.5px; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fs-conv:hover { color: var(--text); }
.fs-dl { width: 32px; height: 32px; border-radius: 9px; color: var(--text3); display: grid; place-items: center; }
.fs-dl:hover { color: var(--text); background: var(--glass2); }
.fs-dl svg.ico { width: 15px; height: 15px; }

/* ═══════════ v4.3 visual polish — same brand (grey/white), more depth & finish, cheap to paint ═══════════ */
/* canvas: a faint top-light so the chat area is not a flat slab (one static gradient, no blur) */
.chat { background:
  radial-gradient(900px 420px at 50% -120px, color-mix(in srgb, var(--text) 4.5%, transparent), transparent 70%),
  var(--bg); }
html[data-theme="light"] .chat { background:
  radial-gradient(900px 420px at 50% -120px, rgba(20, 22, 26, .035), transparent 70%), var(--bg); }
/* welcome hero */
.welcome { padding-top: clamp(40px, 14vh, 120px); gap: 24px; }
.hero .logo.big { width: 64px; height: 64px; border-radius: 19px; box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px var(--border2) inset; }
html[data-theme="light"] .hero .logo.big { box-shadow: 0 10px 28px rgba(20,22,26,.16), 0 0 0 1px var(--border2) inset; }
.hero h1 { font-size: clamp(22px, 5.6vw, 30px); letter-spacing: -.02em; line-height: 1.35; }
.hero p { font-size: 14px; color: var(--text3); }
/* sidebar: crisper hierarchy */
.new-chat { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.14); }
html[data-theme="light"] .new-chat { box-shadow: 0 1px 0 rgba(20,22,26,.04), 0 6px 18px rgba(20,22,26,.10); }
.conv-item { transition: background .14s, color .14s, transform .14s; }
.conv-item:active { transform: scale(.985); }
.conv-item.active::before { background: var(--text); opacity: .8; }
.sb-tool { border-radius: 11px; }
.sb-tool:active { transform: scale(.985); }
/* topbar: hairline + soft shadow when content scrolls beneath */
.topbar { box-shadow: 0 1px 0 var(--border), 0 8px 20px -14px rgba(0,0,0,.5); }
/* messages */
.msg.user .bubble { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px -8px rgba(0,0,0,.35); }
html[data-theme="light"] .msg.user .bubble { box-shadow: 0 1px 0 rgba(20,22,26,.03), 0 4px 14px -8px rgba(20,22,26,.18); }
.msg.model .bubble pre, .msg.model .bubble table { box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 18px -12px rgba(0,0,0,.5); border-radius: 12px; }
.msg.model .bubble table { overflow: hidden; }
/* composer: floats above the canvas */
.composer { box-shadow: 0 -1px 0 var(--border) inset, 0 14px 34px -18px rgba(0,0,0,.6), 0 2px 8px -4px rgba(0,0,0,.3); }
html[data-theme="light"] .composer { box-shadow: 0 14px 34px -18px rgba(20,22,26,.28), 0 2px 8px -4px rgba(20,22,26,.12); }
.composer:focus-within { border-color: color-mix(in srgb, var(--text) 24%, var(--border2)); }
.send { transition: transform .12s, background .15s, box-shadow .15s; }
.send:active { transform: scale(.94); }
/* panels: sheet header hairline + consistent cards */
.panel-head { box-shadow: 0 1px 0 var(--border); }
.act-list, .fs-top, .tl-chat, .live-card { box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 24px -16px rgba(0,0,0,.5); }
html[data-theme="light"] .act-list, html[data-theme="light"] .fs-top, html[data-theme="light"] .tl-chat, html[data-theme="light"] .live-card { box-shadow: 0 1px 0 rgba(20,22,26,.03), 0 8px 24px -16px rgba(20,22,26,.2); }
.act-h { letter-spacing: .01em; text-transform: none; color: var(--text2); }
.act-h .act-n { min-width: 20px; text-align: center; }
/* buttons / chips: unified press feedback */
.chip-btn, .icon-btn, .fs-chip { transition: background .14s, color .14s, transform .1s, border-color .14s; }
.chip-btn:active, .icon-btn:active, .fs-chip:active { transform: scale(.96); }
/* scrollbars: thin & quiet everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; }
/* selection colour on-brand */
::selection { background: color-mix(in srgb, var(--text) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .conv-item:active, .sb-tool:active, .send:active, .chip-btn:active, .icon-btn:active, .fs-chip:active { transform: none; } }
@media (max-width: 900px) {
  .chat { background: var(--bg); }              /* weak phones: no gradient paint on scroll */
  .msg.model .bubble pre, .msg.model .bubble table, .msg.user .bubble { box-shadow: none; }
  .composer { box-shadow: 0 -6px 24px -18px rgba(0,0,0,.6); }
}
.act-receipt .act.wait { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.act-receipt .act.wait i { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.act-receipt .act.wait i svg.ico { animation: pulse 1.4s infinite; }

/* ── v4.3.1 places card ── */
.map-card.places { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.pc-head { display: grid; grid-template-columns: 42px 1fr; gap: 10px 12px; align-items: center; }
.pc-seg { align-self: flex-start; }
.pc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel-solid); }
.pc-it { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.pc-it:first-child { border-top: 0; }
.pc-it:hover { background: var(--glass2); }
.pc-it:active { background: var(--glass2); transform: scale(.995); }
.pc-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--glass2); font-size: 11.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.pc-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-main b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-main small { font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-d { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-d i { display: inline-flex; color: var(--text3); transform: scaleX(-1); }
.pc-d i svg.ico { width: 14px; height: 14px; }

/* ── v4.3.1 layout: my messages on the LEFT, Kalim on the RIGHT (user request) ── */
.msg.user { flex-direction: row; justify-content: flex-end; }
.msg.user .bubble-wrap { align-items: flex-end; }
.msg.user .bubble { border-radius: 18px; border-start-end-radius: 6px; border-start-start-radius: 18px; }
.msg.user .msg-foot { flex-direction: row-reverse; }
.msg.user .msg-foot .msg-meta.mini { margin-inline-start: 0; margin-inline-end: auto; }
.msg.model { flex-direction: row; justify-content: flex-start; }

/* v4.3.1 perf: off-screen turns are skipped by layout/paint until scrolled into view */
.chat { overflow-anchor: auto; }
.messages > .msg.hist-row { content-visibility: auto; contain-intrinsic-size: auto 160px; }
/* v4.3.1 perf: closed groups & long lists do not pay layout until shown */
.pgroup-b { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.fs-row, .trow, .tl-it, .mem-item, .kp-row { content-visibility: auto; contain-intrinsic-size: auto 60px; }
/* v4.3.1 bidi: every block decides its own direction from its first strong character (Persian ↔ English mixed
   answers never collide); inline code/URLs/numbers stay LTR islands inside RTL lines */
.msg.model .bubble > p, .msg.model .bubble li, .msg.model .bubble h1, .msg.model .bubble h2, .msg.model .bubble h3, .msg.model .bubble h4, .msg.model .bubble blockquote, .msg.model .bubble td, .msg.model .bubble th,
.md-stable > p, .md-tail > p { unicode-bidi: plaintext; text-align: start; }
.msg.user .bubble { unicode-bidi: plaintext; text-align: start; }
.md a { unicode-bidi: isolate; }
.md pre, .md pre code { direction: ltr; text-align: left; unicode-bidi: isolate; }
.md table { direction: rtl; }
.md td, .md th { unicode-bidi: plaintext; }
.msg.user .read-row { justify-content: flex-end; }

/* ══ v4.4 Quick Capture overlay (assistant gesture / Alt+K / icon shortcut) ═══════════════════ */
.qk-back { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .22s; }
.qk-back.on { opacity: 1; }
.qk-bg { position: absolute; inset: 0; background: rgba(8,9,11,.62); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.qk-card { position: relative; width: min(440px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 28px 28px 0 0; box-shadow: 0 30px 90px -18px rgba(0,0,0,.55), 0 4px 20px rgba(0,0,0,.22); transform: translateY(24px); transition: transform .26s cubic-bezier(.2,.7,.3,1); overflow: hidden; }
.qk-back.on .qk-card { transform: none; }
@media (min-width: 700px) { .qk-back { align-items: center; } .qk-card { border-radius: 28px; max-height: 80vh; } }
.qk-card::after { content: ''; position: absolute; top: 0; inset-inline: 44px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--qk-a, #6b7cff) 70%, transparent), transparent); pointer-events: none; }
.qk-head { display: flex; align-items: center; gap: 10px; }
.qk-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.qk-logo { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-weight: 800; font-size: 14px; box-shadow: 0 3px 10px color-mix(in srgb, var(--text) 30%, transparent); }
.qk-status { margin-inline-start: auto; font-size: 11.5px; color: var(--text2); background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.qk-status:empty { visibility: hidden; }
.qk-close { width: 30px; height: 30px; }
/* transcript of the note, under the orb (v4.4.1) */
.qk-heard { font-size: 12.5px; line-height: 1.7; color: var(--text2); text-align: center; padding: 7px 14px; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qk-heard:empty { display: none; }
.qk-heard .who { color: var(--text3); font-weight: 600; }
/* window exists only to host this card (?quick=1 / Alt+K popup): no app chrome behind it */
html.qk-solo, html.qk-solo body { background: #0b0c0e; }
html.qk-solo #splash, html.qk-solo #app, html.qk-solo #login { visibility: hidden; }
html.qk-solo .qk-back { visibility: visible; }
.qk-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 6px; }
.qk-hint { font-size: 12.5px; color: var(--text2); min-height: 18px; }
.qk-orb { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 38%, var(--qk-a, #6b7cff)), var(--qk-a, #6b7cff) 62%); box-shadow: 0 12px 38px color-mix(in srgb, var(--qk-a, #6b7cff) 50%, transparent), inset 0 2px 6px rgba(255,255,255,.35), inset 0 -6px 14px rgba(0,0,0,.28); transition: transform .15s; }
.qk-orb:active { transform: scale(.95); }
.qk-orb svg.ico { width: 36px; height: 36px; stroke-width: 2.2; position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.qk-halo { position: absolute; inset: -16px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 8%, color-mix(in srgb, var(--qk-a, #6b7cff) 55%, transparent), transparent 42%, color-mix(in srgb, var(--qk-a, #6b7cff) 35%, transparent) 60%, transparent 85%); filter: blur(10px); opacity: 0; transition: opacity .4s; pointer-events: none; }
.qk-back[data-state="thinking"] .qk-halo, .qk-back[data-state="sending"] .qk-halo { opacity: 1; animation: qkSpin 5s linear infinite; }
@keyframes qkSpin { to { transform: rotate(360deg); } }
.qk-wave { display: flex; align-items: center; gap: 3px; height: 30px; opacity: 0; transition: opacity .25s; }
.qk-wave i { width: 3px; height: 26px; border-radius: 2px; background: var(--qk-a, #6b7cff); transform: scaleY(.1); }
.qk-back[data-state="rec"] .qk-orb { animation: qkBeat 1.1s ease-in-out infinite; }
@keyframes qkBeat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.05); } 45% { transform: scale(1.02); } 60% { transform: scale(1.05); } }
.qk-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--qk-a, #6b7cff) 60%, transparent); opacity: 0; }
.qk-back[data-state="rec"] .qk-ring { animation: qkRing 1.8s ease-out infinite; }
.qk-back[data-state="rec"] .qk-ring.r2 { animation-delay: .6s; } .qk-back[data-state="rec"] .qk-ring.r3 { animation-delay: 1.2s; }
@keyframes qkRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.qk-back[data-state="thinking"] .qk-orb, .qk-back[data-state="sending"] .qk-orb { animation: qkBreath 1.4s ease-in-out infinite; }
@keyframes qkBreath { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.2); } }
.qk-back[data-state="done"] .qk-orb, .qk-back[data-state="idle"] .qk-orb { background: var(--glass2); color: var(--text); box-shadow: none; border: 1px solid var(--border2); }
.qk-answer { display: none; overflow: auto; max-height: 40vh; padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); font-size: 14px; line-height: 1.75; animation: qkCardIn .32s cubic-bezier(.2,.7,.3,1); box-shadow: 0 10px 34px -14px color-mix(in srgb, var(--qk-a, #6b7cff) 50%, transparent); }
@keyframes qkCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.qk-back[data-state="answering"] .qk-answer, .qk-back[data-state="done"] .qk-answer { display: block; }
.qk-back[data-state="answering"] .qk-stage, .qk-back[data-state="done"] .qk-stage { padding: 4px 0; }
.qk-back[data-state="answering"] .qk-orb, .qk-back[data-state="done"] .qk-orb { width: 54px; height: 54px; }
.qk-back[data-state="answering"] .qk-orb svg.ico, .qk-back[data-state="done"] .qk-orb svg.ico { width: 22px; height: 22px; }
.qk-foot { display: none; justify-content: center; gap: 8px; }
.qk-back[data-state="done"] .qk-foot { display: flex; }
/* the recorder's own sheet stays hidden while Quick hosts it (the orb is the control) */
.qk-back.vn-host ~ .vn-back { opacity: 0 !important; pointer-events: none !important; }
/* styles */
.qk-back[data-style="aurora"] { --qk-a: #7c6bff; }
.qk-back[data-style="aurora"] .qk-card::before { content: ''; position: absolute; inset: -40% -20% auto; height: 60%; background: radial-gradient(60% 60% at 30% 40%, rgba(124,107,255,.35), transparent 70%), radial-gradient(50% 50% at 75% 30%, rgba(72,199,255,.28), transparent 70%), radial-gradient(40% 40% at 55% 70%, rgba(255,120,190,.22), transparent 70%); filter: blur(24px); pointer-events: none; animation: qkAurora 9s ease-in-out infinite alternate; }
@keyframes qkAurora { from { transform: translateX(-6%) rotate(-3deg); } to { transform: translateX(6%) rotate(3deg); } }
.qk-back[data-style="glass"] { --qk-a: #4fc3f7; }
.qk-back[data-style="glass"] .qk-card { background: color-mix(in srgb, var(--panel-solid) 72%, transparent); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-color: rgba(255,255,255,.14); }
.qk-back[data-style="glass"] .qk-bg { background: rgba(0,0,0,.35); }
.qk-back[data-style="mono"] { --qk-a: var(--text); }
.qk-back[data-style="mono"] .qk-orb { color: var(--bg); box-shadow: none; }
.qk-back[data-style="mono"] .qk-ring { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.qk-back[data-style="pulse"] { --qk-a: #ff5c7a; }
.qk-back[data-style="pulse"][data-state="rec"] .qk-orb { animation: qkPulse .9s ease-in-out infinite; }
@keyframes qkPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,92,122,.55); } 50% { box-shadow: 0 0 0 18px rgba(255,92,122,0); } }
@media (prefers-reduced-motion: reduce) { .qk-ring, .qk-orb, .qk-card::before { animation: none !important; } }
/* v4.5 lowfx: same look, GPU-cheap (weak phones set html.lowfx from JS) */
html.lowfx, html.lowfx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lowfx .sidebar, html.lowfx .panel { background: var(--panel-solid); }
html.lowfx .topbar, html.lowfx .composer { background: var(--panel-solid); }
html.lowfx .qk-bg { background: rgba(8,9,11,.8); }
html.lowfx .qk-back[data-style="glass"] .qk-card { background: var(--panel-solid); }
html.lowfx .qk-card::before { animation: none !important; }
html.lowfx .qk-halo { display: none; }
html.lowfx .qk-ring.r2, html.lowfx .qk-ring.r3 { display: none; }
html.lowfx .qk-orb { animation: none !important; }
html.lowfx .msg { animation: none; }
html.lowfx .toast { animation-duration: .01s; }
html.lowfx .savebar { background: var(--panel-solid); }
.qk-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qk-pick button { border: 1px solid var(--border); border-radius: 14px; background: var(--glass); color: var(--text); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; cursor: pointer; }
.qk-pick button.on { border-color: var(--text); }
.qk-pick i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.qk-pick [data-s="aurora"] i { background: linear-gradient(135deg, #7c6bff, #48c7ff, #ff78be); }
.qk-pick [data-s="glass"] i { background: rgba(79,195,247,.35); border: 1px solid rgba(255,255,255,.4); }
.qk-pick [data-s="mono"] i { background: var(--text); }
.qk-pick [data-s="pulse"] i { background: #ff5c7a; box-shadow: 0 0 0 4px rgba(255,92,122,.25); }
.qk-answer .tbl-wrap, .qk-answer pre { max-width: 100%; overflow-x: auto; }
.qk-answer table { font-size: 12.5px; }

/* v5.3 tidy settings: collapsible groups + jump chips */
.sec-jump { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 2px 12px; }
.set-sec { border: 1px solid var(--border); border-radius: 13px; background: var(--glass); margin-bottom: 10px; overflow: hidden; }
.set-sec > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; user-select: none; }
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary::marker { content: ''; }
.set-sec > summary::after { content: '‹'; margin-inline-start: auto; color: var(--text3); font-size: 20px; line-height: 1; transition: transform .15s; }
.set-sec[open] > summary::after { transform: rotate(-90deg); }
.set-sec > .card { border: 0; background: transparent; border-radius: 0; border-top: 1px solid var(--border); }

/* ── v6.0 inline media — pictures & files exactly where the model put them ── */
.bubble.md figure.inl-img { margin: 10px 0; padding: 0; max-width: min(100%, 380px); border-radius: 16px; overflow: hidden;
  position: relative; cursor: zoom-in; background: var(--glass); border: 1px solid var(--border);
  box-shadow: 0 8px 26px rgba(0,0,0,.28); transition: transform .16s ease, box-shadow .16s ease; }
.bubble.md figure.inl-img:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.36); }
.bubble.md .inl-img img { width: 100%; height: auto; max-height: 420px; object-fit: cover; display: block; }
.bubble.md .inl-img:not(.ld) { min-height: 150px; }
.bubble.md .inl-img:not(.ld)::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  background-size: 200% 100%; animation: inlShim 1.2s linear infinite; pointer-events: none; }
@keyframes inlShim { to { background-position: -200% 0; } }
.inl-img figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 20px 10px 7px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .18s; pointer-events: none; }
.inl-img:hover figcaption { opacity: 1; }
.inl-img .zoom { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.inl-img .zoom svg.ico { width: 15px; height: 15px; }
.inl-img:hover .zoom { opacity: 1; }
@media (pointer: coarse) { .inl-img .zoom { opacity: .9; width: 25px; height: 25px; } .inl-img figcaption { opacity: .85; } }
.inl-img.noimg { min-height: 120px; display: grid; place-items: center; cursor: default; }
.inl-img.noimg .inl-ph { color: var(--text3); }
.inl-img.noimg .inl-ph svg.ico { width: 30px; height: 30px; }
/* album: consecutive pictures become one mosaic grid */
.bubble.md .inl-album { display: grid; gap: 6px; margin: 10px 0; max-width: min(100%, 520px); }
.inl-album.n2 { grid-template-columns: repeat(2, 1fr); }
.inl-album.n3, .inl-album.n4 { grid-template-columns: repeat(3, 1fr); }
.bubble.md .inl-album .inl-img { margin: 0; max-width: none; border-radius: 13px; aspect-ratio: 1; }
.bubble.md .inl-album .inl-img img { height: 100%; max-height: none; }
.bubble.md .inl-album .inl-img:not(.ld) { min-height: 0; }
.inl-album figcaption { display: none; }
.inl-album.n4 .inl-img .zoom { display: none; }
/* file chip dropped mid-sentence */
.bubble.md a.inl-file { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; margin: 6px 2px; padding: 8px 12px;
  border-radius: 14px; background: var(--glass2); border: 1px solid var(--border2); color: var(--text);
  vertical-align: middle; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bubble.md a.inl-file:hover { border-color: var(--accent2); transform: translateY(-1px); text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.inl-file .fi { min-width: 36px; height: 36px; padding: 0 7px; border-radius: 10px; background: var(--accent-solid);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--text2); flex: 0 0 auto; }
.inl-file.k-video .fi { background: rgba(240,165,74,.16); color: #e89b3d; }
.inl-file.k-audio .fi { background: rgba(127,189,144,.16); color: #6fae82; }
.inl-file.k-pdf .fi { background: rgba(224,124,110,.16); color: #d97366; }
.inl-file.k-zip .fi { background: rgba(167,139,250,.16); color: #a78bfa; }
.inl-file.k-apk .fi { background: rgba(127,189,144,.2); color: #5da87a; }
.inl-file .fmeta { min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.inl-file .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.inl-file small { color: var(--text3); font-size: 11px; white-space: nowrap; }
.inl-file .fdl { margin-inline-start: auto; padding-inline-start: 4px; color: var(--text3); flex: 0 0 auto; }
.inl-file .fdl svg.ico { width: 16px; height: 16px; }
.inl-file:hover .fdl { color: var(--text); }
@media (max-width: 640px) {
  .bubble.md figure.inl-img { max-width: 100%; border-radius: 14px; }
  .bubble.md .inl-img img { max-height: 62vw; }
  .bubble.md a.inl-file { max-width: 100%; }
}

/* ═══════════ v6.1 — beauty pass: charts, tables, tasks, lists ═══════════ */
/* charts: rank badge + top-row highlight + value pill */
.chart { box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.chart-row { grid-template-columns: 26px minmax(64px,130px) 1fr auto; grid-template-areas: 'cr cl track cv'; }
.chart-row .cr { grid-area: cr; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text3); background: var(--glass2); border: 1px solid var(--border); }
.chart-row .cl { grid-area: cl; }
.chart-row .track { grid-area: track; border: 1px solid color-mix(in srgb, var(--text3) 12%, transparent); }
.chart-row .track i { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
.chart-row .cv { grid-area: cv; background: var(--glass2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.chart-row.top .cr { color: var(--btn-text); background: var(--btn); border-color: transparent; }
.chart-row.top .cl { color: var(--text); font-weight: 700; }
.chart-row.top .track i { background: linear-gradient(to left, var(--btn), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 700px) {
  /* mobile: label line on top, full-width bar below */
  .chart-row { grid-template-columns: 24px 1fr auto; grid-template-areas: 'cr cl cv' 'track track track'; row-gap: 7px; padding: 2px 0; }
  .chart-row .track { height: 14px; }
  .chart-row .cl { max-width: none; }
}
/* tables: card depth + zebra + tabular numbers + stronger header */
.md .tbl-wrap { box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.md .tbl-wrap thead th { font-weight: 700; border-bottom: 1px solid var(--border2); }
.md .tbl-wrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text3) 7%, transparent); }
.md .tbl-wrap th, .md .tbl-wrap td { font-variant-numeric: tabular-nums; }
.md .tbl-wrap tbody tr:last-child td { border-bottom: 0; }
/* tasks: status rail + roomier cards + time pill + kind chip */
.trow { position: relative; padding: 12px 14px; gap: 12px; }
.trow::before { content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--text3); opacity: .45; }
.trow.st-active::before { background: var(--ok); opacity: 1; box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 50%, transparent); }
.trow.st-paused::before { background: var(--warn); opacity: 1; }
.trow.st-done::before { background: var(--text3); opacity: .5; }
.trow.st-error::before { background: var(--danger); opacity: 1; }
.trow-ic { width: 38px; height: 38px; border-radius: 12px; }
.trow-t b { font-size: 14px; }
.trow-k { font-size: 10.5px; font-weight: 600; color: var(--text3); background: var(--glass2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.trow-s { align-self: flex-start; background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; max-width: 100%; overflow: hidden; }
.trow-a .icon-btn { width: 34px; height: 34px; }
.trow-a .icon-btn svg.ico { width: 16px; height: 16px; }
@media (hover: hover) { .trow:hover { background: var(--glass); } }
@media (max-width: 700px) {
  .trow { padding: 12px 12px; }
  .trow-a .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
}
/* lists: accent markers + calmer rhythm + pretty checkboxes */
.md ul > li::marker, .md ol > li::marker { color: var(--accent2); font-weight: 700; }
.md li { line-height: 1.75; }
.md ul ul, .md ol ol, .md ul ol, .md ol ul { margin: .15em 0 .35em; }
.md input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ok); vertical-align: -2px; cursor: pointer; }
/* timeline: unseen rows lift a little + tabular clock */
.tl-it.unseen { background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 10px; }
.tl-it time { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* v6.1 plans: day-plan timelines + proactive reminder popup */
.plan-card { border: 1px solid var(--border); border-radius: 16px; background: var(--panel-solid); padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.plan-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.plan-ic.big { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); flex: 0 0 auto; }
.plan-ic.big svg.ico { width: 18px; height: 18px; }
.plan-ht { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.plan-ht b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-sub { font-size: 11.5px; color: var(--text3); }
.plan-h .icon-btn { margin-inline-start: auto; color: var(--text3); }
.plan-bar { height: 6px; border-radius: 3px; background: var(--glass2); overflow: hidden; margin-bottom: 4px; }
.plan-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(to left, var(--ok), color-mix(in srgb, var(--ok) 55%, var(--accent))); transition: width .4s; }
.plan-list { display: flex; flex-direction: column; }
.plan-it { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-top: 1px solid var(--border); }
.plan-it:first-child { border-top: 0; }
.plan-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--glass2); color: var(--text2); flex: 0 0 auto; }
.plan-ic svg.ico { width: 14px; height: 14px; }
.plan-it.st-done .plan-ic { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.plan-it.st-done .plan-ti { text-decoration: line-through; opacity: .6; }
.plan-it.st-bad .plan-ic { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.plan-it.st-due .plan-ic { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.plan-tm { font-size: 12px; font-weight: 700; color: var(--text); background: var(--glass2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-ti { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-a { display: flex; gap: 2px; margin-inline-start: auto; flex: 0 0 auto; }
@media (max-width: 700px) {
  .plan-card { padding: 12px; }
  .plan-a .icon-btn { width: 36px; height: 36px; }
}
/* proactive popup: bottom sheet on mobile, centered card on desktop */
.rem-back { z-index: 90; }
.rem-sheet { width: min(100%, 520px); background: var(--panel-solid); border: 1px solid var(--border2); border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); transform: translateY(14px); transition: transform .2s ease; text-align: center; }
.mm-back.on .rem-sheet { transform: none; }
.rem-sheet .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 0 auto 10px; }
.rem-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 8px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.rem-ic svg.ico { width: 24px; height: 24px; }
.rem-t { display: block; font-size: 16px; margin-bottom: 4px; }
.rem-b { font-size: 14px; color: var(--text2); line-height: 1.7; margin: 0 0 12px; }
.rem-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 701px) {
  .rem-back { align-items: center; padding: 20px; }
  .rem-sheet { border-radius: 18px; width: min(440px, 100%); padding-bottom: 16px; }
}

/* ── v6.8 stickers ─────────────────────────────────────────────────────── */
.kalim-sticker { display: inline-block; vertical-align: middle; margin: 4px 2px; animation: sticker-pop .35s ease; }
.kalim-sticker svg { width: 104px; height: 104px; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
@keyframes sticker-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.bubble.big-emoji { font-size: 46px; line-height: 1.35; }

/* v6.8.1: restore progress modal */
.prog-modal { min-width: min(420px, 92vw); }
.prog-file { font-size: .85em; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.prog-bar { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; margin: 10px 0 6px; }
.prog-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width .15s linear; }
.prog-fill.err { background: linear-gradient(90deg, #ef4444, #f87171); }
.prog-meta { display: flex; justify-content: space-between; font-size: .85em; opacity: .9; }
.prog-stage { min-height: 1.6em; font-size: .9em; }
.prog-stage.prog-err { color: #f87171; font-weight: 700; }

/* ── v6.8.5 alarms panel ─────────────────────────────────────────────── */
.input { background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; outline: 0; color: var(--text); color-scheme: light dark; }
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text3); }
select.input option { background: var(--panel-solid); color: var(--text); }
.al-add { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.al-time-in { font-size: 16px; font-variant-numeric: tabular-nums; direction: ltr; }
@media (max-width: 560px) { .al-add { grid-template-columns: 1fr 1fr; } .al-add .primary { grid-column: 1 / -1; } }
.al-list { display: flex; flex-direction: column; gap: 8px; }
.al-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass); }
.al-row.off { opacity: .55; }
.al-row.stale { border-color: var(--warn); }
.al-clock { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 86px; text-align: center; }
.al-row.off .al-clock { text-decoration: line-through; }
.al-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-mid b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-mid small { font-size: 12px; color: var(--text2); }
.al-acts { display: flex; align-items: center; gap: 8px; }
.al-empty { display: flex; gap: 12px; align-items: center; padding: 18px 8px; color: var(--text2); }
.al-empty svg.ico { width: 34px; height: 34px; opacity: .6; }

/* ── v6.8.5 Samsung-style ring screen ────────────────────────────────── */
.alm-sheet { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #3b2d5c 0%, #1d1b2e 55%, #0e0d16 100%); color: #fff; animation: fadeUp .25s ease both; }
.alm-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.alm-rings i { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); animation: almPulse 2.4s ease-out infinite; }
.alm-rings i:nth-child(2) { animation-delay: .8s; }
.alm-rings i:nth-child(3) { animation-delay: 1.6s; }
@keyframes almPulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.alm-date { font-size: 15px; opacity: .85; z-index: 1; }
.alm-clock { font-size: min(96px, 22vw); font-weight: 800; letter-spacing: 2px; line-height: 1.05; font-variant-numeric: tabular-nums; z-index: 1;
  text-shadow: 0 0 34px rgba(150,130,255,.55), 0 2px 0 rgba(0,0,0,.4); animation: almGlow 2.4s ease-in-out infinite; }
@keyframes almGlow { 0%,100% { text-shadow: 0 0 22px rgba(150,130,255,.4), 0 2px 0 rgba(0,0,0,.4); } 50% { text-shadow: 0 0 44px rgba(170,150,255,.75), 0 2px 0 rgba(0,0,0,.4); } }
.alm-title { font-size: 19px; margin-top: 4px; z-index: 1; max-width: 90vw; }
.alm-body { font-size: 13.5px; opacity: .8; max-width: 90vw; z-index: 1; }
.alm-snooze { display: flex; align-items: center; gap: 8px; margin-top: 18px; z-index: 1; flex-wrap: wrap; justify-content: center; }
.alm-sn-label { font-size: 13px; opacity: .8; }
.alm-chip { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: 99px; padding: 9px 16px; font-size: 13.5px; backdrop-filter: blur(4px); }
.alm-chip:active { background: rgba(255,255,255,.28); }
.alm-off { margin-top: 14px; z-index: 1; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 14px 44px; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff5d5d, #c81e5b); box-shadow: 0 8px 30px rgba(255,60,90,.45); }
.alm-off:active { transform: scale(.97); }
.alm-off svg.ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .alm-rings i, .alm-clock { animation: none; } }
ndex: 1; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 14px 44px; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff5d5d, #c81e5b); box-shadow: 0 8px 30px rgba(255,60,90,.45); }
.alm-off:active { transform: scale(.97); }
.alm-off svg.ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .alm-rings i, .alm-clock { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v7.4 (B74) — beautiful math: flat, quiet, readable. KaTeX paints the glyphs;
   these rules only set the stage (formulas are LTR islands inside RTL text). */
.kmath { direction: ltr; unicode-bidi: isolate; font-size: 1.02em; }
.kmath-display {
  direction: ltr; text-align: center;
  margin: 10px 0; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
  overflow-x: auto; overflow-y: hidden;
  font-size: 1.08em;
}
.kmath-display > .katex-display { margin: 0; }
.kmath-error {
  font-family: var(--mono); font-size: .85em;
  color: var(--danger);
  border: 1px dashed var(--border2); border-radius: 8px; padding: 1px 8px;
  display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: baseline;
}
div.kmath-error { display: block; text-align: left; padding: 8px 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v7.6 LOOK — ghost thinking, background-free ovals, beautiful chat.
   Flat only (no glassmorphism): hairlines + faint tints. Mobile-first. */

/* ── 1. ghost thinking: while live, NO card at all — just the latest whisper
   line, centered and faint. (The boxed card still exists for the rare error
   fallback; history shows no thoughts at all.) */
.thoughts.live { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.thoughts.live > summary { display: none; }
.thoughts.live .th-body, .thoughts.live .th-inner { display: block; overflow: visible; }
.thoughts.live[open] .th-feed {
  height: auto; max-height: none; padding: 3px 10px; margin: 2px auto 0;
  -webkit-mask-image: none; mask-image: none;
  text-align: center; font-size: 12px; line-height: 1.8; color: var(--text3);
  overflow: hidden;
}
.thoughts.live .th-feed .th-line { display: none; }
.thoughts.live .th-feed .th-line:last-child { display: block; animation: thWhisper .4s ease both; }
.thoughts.live .th-feed .th-line.st { color: var(--text3); font-weight: 500; }
.thoughts.live .th-feed .th-line.st::before { content: ''; margin: 0; }
.thoughts.live .th-feed .th-line:last-child::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-inline-start: 7px; vertical-align: 1px; background: var(--text3); opacity: .7;
  animation: pulse 1.6s ease-in-out infinite;
}
.thoughts.live[open] .th-feed::after { content: none; }
@keyframes thWhisper { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mono-addr { font-family: var(--mono); direction: ltr; text-align: left; font-size: 13px; color: var(--text2); background: var(--glass); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; overflow-x: auto; white-space: nowrap; }

/* ── 2. v7.6.2: live-action sits in NO box — bare whisper on empty surroundings;
   the composer keeps its floating oval. */
.status-line {
  background: none; border: 0; border-radius: 0; padding: 0 8px;
}
.composer-wrap { background: none; }
.composer {
  background: transparent;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--border2) 70%, transparent);
  border-radius: 28px; box-shadow: none;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: none;
}

/* ── 3. chat beauty: formulas unmistakable, type with rhythm, crisp tables/charts. */
.md { line-height: 1.9; }
.md p { margin: .55em 0 .95em; }
.md p:first-child { margin-top: 0; } .md p:last-child { margin-bottom: 0; }
.md h2 { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.md h1::before, .md h2::before {
  content: ''; display: inline-block; width: 4px; height: .85em; border-radius: 2px;
  background: var(--accent); margin-inline-end: 8px; vertical-align: -.05em; opacity: .8;
}
.md strong { color: var(--text); }
.md a { color: var(--accent); font-weight: 600; }
.md li { margin: .32em 0; }
.md li::marker { color: var(--accent); }
.md ul { padding-inline-start: 1.3em; } .md ol { padding-inline-start: 1.4em; }
/* formulas: inline pills, display cards — never mistaken for prose again */
.md .kmath:not(.kmath-display) {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 7px; padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.md .kmath-display {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 16px; padding: 16px 18px; margin: 14px 0; font-size: 1.12em;
}
/* tables: crisp header, airy cells, tabular numbers, smooth sideways scroll */
.md table { border-color: var(--border2); scrollbar-width: thin; }
.md thead th {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 10px 14px; white-space: nowrap;
}
.md th, .md td { padding: 9px 14px; }
.md td { font-variant-numeric: tabular-nums; }
/* charts: bolder labels, glowing winner, hover lift */
.chart { padding: 16px 18px; gap: 11px; }
.chart-row .cl { font-weight: 600; color: var(--text); }
.chart-row .track { height: 20px; }
.chart-row.top .cv { color: var(--accent); font-weight: 700; }
.chart-row.top .track i { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); }
.chart-row:hover .cl { color: var(--accent); }
@media (max-width: 640px) {
  .md .kmath-display { padding: 13px 12px; font-size: 1.06em; border-radius: 14px; }
  .composer { border-radius: 24px; }
  .chart { padding: 13px 14px; }
  .chart-row { grid-template-columns: minmax(56px, 96px) 1fr 52px; gap: 8px; }
}