/* Components */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; min-height: 2.25rem; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent-grad, var(--accent)); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-grad-hover, var(--accent-hover)); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger.solid { background: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn[disabled], .icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink); flex: none; }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.send-btn { background: var(--accent-grad, var(--accent)); color: var(--accent-ink); border-radius: 50%; }
.send-btn:hover { background: var(--accent-grad-hover, var(--accent-hover)); }
.send-btn.stop { background: var(--ink); color: var(--bg); }

.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .85rem; }
button.chip:hover { background: var(--surface-2); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip .x { border: 0; background: transparent; padding: 0; line-height: 1; color: inherit; }
.chip.err { border-color: var(--danger); color: var(--danger); }

/* History items */
.conv-item { display: flex; align-items: center; gap: .15rem; border-radius: var(--radius-sm); position: relative; }
.conv-item:hover, .conv-item.active { background: var(--surface-3); }
.conv-item > a, .conv-item > button.open { flex: 1; min-width: 0; text-align: start; padding: .5rem .6rem; color: var(--ink); text-decoration: none; border: 0; background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .pin { color: var(--accent); width: .85rem; height: .85rem; }
.conv-item .more { opacity: 0; }
.conv-item:hover .more, .conv-item:focus-within .more, .conv-item.active .more { opacity: 1; }
@media (hover: none) { .conv-item .more { opacity: 1; } }
.conv-item .snippet { display: block; font-size: .75rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.conv-item mark { background: var(--warn-soft); color: inherit; }

/* Menus */
.menu { position: fixed; z-index: 60; min-width: 12rem; max-width: 20rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .3rem; max-height: 70vh; overflow: auto; }
.menu button, .menu a { display: flex; width: 100%; gap: .6rem; align-items: center; padding: .5rem .65rem; border: 0; background: transparent; text-align: start; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.menu button:hover, .menu button:focus-visible, .menu a:hover { background: var(--surface-3); }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; }
.menu .menu-label { font-size: .72rem; color: var(--ink-2); padding: .4rem .65rem .15rem; text-transform: uppercase; letter-spacing: .05em; }
.menu button[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--accent); }
.menu button small { display: block; color: var(--ink-2); }

/* Dialogs */
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--surface); color: var(--ink); max-width: min(34rem, calc(100vw - 1.5rem)); width: 100%; box-shadow: var(--shadow); }
dialog.wide { max-width: min(52rem, calc(100vw - 1.5rem)); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.dlg-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.dlg-head h2 { flex: 1; margin: 0; font-size: 1.1rem; }
.dlg-body { padding: 1rem; max-height: 70vh; overflow: auto; }
.dlg-foot { display: flex; gap: .5rem; justify-content: flex-end; padding: .75rem 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* Forms */
.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.field label, .field .lbl { font-weight: 600; font-size: .9rem; }
.field .hint { color: var(--ink-2); font-size: .8rem; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=search], .field select, .field textarea, .input {
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); width: 100%; }
.field textarea { min-height: 5rem; resize: vertical; }
.field .error, .form-error { color: var(--danger); font-size: .85rem; }
.form-error { background: var(--danger-soft); padding: .5rem .7rem; border-radius: var(--radius-sm); margin-bottom: .8rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .desc { color: var(--ink-2); font-size: .82rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); padding: 0 1rem; overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: .65rem .8rem; border-bottom: 2px solid transparent; color: var(--ink-2); white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); font-weight: 600; }

/* Messages */
.msg { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; margin-bottom: calc(var(--space) * 1.4); }
.msg .avatar { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
.msg.assistant .avatar { background: transparent; }
.msg.assistant .avatar img { width: 1.9rem; height: 1.9rem; }
.msg-body { min-width: 0; }
.msg-meta { font-size: .78rem; color: var(--ink-2); margin-bottom: .2rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.msg-content { font-size: var(--fs-msg); line-height: var(--lh); overflow-wrap: anywhere; }
.msg.user .msg-content { background: var(--user-bubble); padding: .7rem .95rem; border-radius: var(--radius); width: fit-content; max-width: 100%; white-space: pre-wrap; }
.msg-content > :last-child { margin-bottom: 0; }
.msg-content h1, .msg-content h2, .msg-content h3, .msg-content h4 { margin: 1.1em 0 .4em; }
.msg-content h1 { font-size: 1.4em; } .msg-content h2 { font-size: 1.22em; } .msg-content h3 { font-size: 1.08em; }
.msg-content ul, .msg-content ol { padding-inline-start: 1.5rem; margin: 0 0 .75em; }
.msg-content li { margin: .15em 0; }
.msg-content blockquote { margin: .75em 0; padding: .1em 1em; border-inline-start: 3px solid var(--accent); color: var(--ink-2); }
.msg-content table { border-collapse: collapse; margin: .75em 0; display: block; overflow-x: auto; max-width: 100%; }
.msg-content th, .msg-content td { border: 1px solid var(--line); padding: .4rem .7rem; text-align: start; }
.msg-content th { background: var(--surface-2); }
.msg-content hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.msg-content code:not(pre code) { background: var(--code-bg); padding: .1em .35em; border-radius: .3em; font-size: .9em; }
.msg-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.msg-content .math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Noto Sans Math", "XITS Math", math, var(--font-serif) !important; }
.msg-content .math math { font-size: 1.08em; }
.msg-content .math-block math { font-size: 1.2em; }
.math .tex-boxed { border: 1px solid currentColor; padding: .25em .4em; }
.math .tex-cancel { text-decoration: line-through; }
.math .tex-unknown { color: var(--danger); font-family: var(--font-mono) !important; }
.math mtd.tex-l { text-align: left; text-align: -webkit-left; }
.math mtd.tex-r { text-align: right; text-align: -webkit-right; }
.math mtable.tex-aligned > mtr > mtd { padding-inline: 0; }
.msg-content .math-block { display: block; text-align: center; margin: .8em 0; overflow-x: auto; }
.msg-content sup.cite a { text-decoration: none; font-weight: 600; }
.msg-content [dir] { unicode-bidi: plaintext; }
.msg.failed .msg-content, .msg.incomplete .msg-content { border-inline-start: 3px solid var(--warn); padding-inline-start: .75rem; }
.msg.failed .msg-content { border-color: var(--danger); }
.typing { display: inline-flex; gap: .25rem; padding: .3rem 0; }
.typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink-2); animation: pulse 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.msg-actions { display: flex; flex-wrap: wrap; gap: .1rem; margin-top: .35rem; opacity: .75; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
.msg-actions .icon-btn { width: 2rem; height: 2rem; }
.branch-nav { display: inline-flex; align-items: center; gap: .1rem; font-size: .8rem; color: var(--ink-2); }
.branch-nav .icon-btn { width: 1.7rem; height: 1.7rem; }
.msg-notice { margin: .5rem 0; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: .88rem; }
.msg-notice.error { background: var(--danger-soft); color: var(--danger); }
.msg-notice .btn { margin-inline-start: .5rem; padding: .2rem .6rem; min-height: 0; }
.sources { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .7rem; font-size: .88rem; }
.sources summary { cursor: pointer; font-weight: 600; }
.sources ol { margin: .4rem 0 0; padding-inline-start: 1.4rem; }
.sources li { margin: .3rem 0; overflow-wrap: anywhere; }
.sources small { color: var(--ink-2); display: block; }
.edit-box textarea { width: 100%; min-height: 5rem; padding: .6rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); resize: vertical; }
.edit-box .row { display: flex; gap: .5rem; margin-top: .4rem; justify-content: flex-end; }
.gen-images { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.gen-images img { max-width: 16rem; max-height: 16rem; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: zoom-in; }
.att-card { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: .85rem; max-width: 16rem; }
.att-card img { width: 2.2rem; height: 2.2rem; object-fit: cover; border-radius: .3rem; }
.att-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card progress { width: 4rem; }
.att-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.scroll-down { position: absolute; inset-inline-end: 1rem; bottom: 6.5rem; z-index: 4; box-shadow: var(--shadow); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; }

/* Code blocks */
.codeblock { margin: .75em 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--code-bg); direction: ltr; text-align: left; }
.codeblock-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .3rem .2rem .75rem; font-size: .78rem; background: var(--surface-2); color: var(--ink-2); }
.codeblock pre { margin: 0; padding: .75rem; overflow-x: auto; color: var(--code-ink); font-size: .88rem; }
.tok-k { color: #a2379e; } .tok-s { color: #1a7a3d; } .tok-c { color: #6a737d; font-style: italic; } .tok-n { color: #b44800; } .tok-f { color: #1456d6; }
html[data-theme="dark"] .tok-k, html[data-theme="system-dark"] .tok-k { color: #e29bff; }
html[data-theme="dark"] .tok-s, html[data-theme="system-dark"] .tok-s { color: #8fdc9f; }
html[data-theme="dark"] .tok-c, html[data-theme="system-dark"] .tok-c { color: #8c95a6; }
html[data-theme="dark"] .tok-n, html[data-theme="system-dark"] .tok-n { color: #ffb27a; }
html[data-theme="dark"] .tok-f, html[data-theme="system-dark"] .tok-f { color: #8ab8ff; }

/* Toasts */
.toasts { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.toast { background: var(--ink); color: var(--bg); padding: .65rem .9rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); display: flex; gap: .75rem; align-items: center; }
.toast.error { background: var(--danger); color: #fff; }
.toast button { border: 0; background: transparent; color: inherit; text-decoration: underline; margin-inline-start: auto; }

.banner { padding: .5rem 1rem; background: var(--warn-soft); color: var(--warn); font-size: .88rem; text-align: center; }
.banner.error { background: var(--danger-soft); color: var(--danger); }
.auth-card { max-width: 26rem; margin: 8vh auto; padding: 1.5rem; }
.auth-card h1 { font-size: 1.4rem; }
.auth-card .brand { margin-bottom: 1rem; flex: none; }
.muted { color: var(--ink-2); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: start; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; border: 1px solid var(--line); }
.badge.ok { color: var(--ok); border-color: var(--ok); } .badge.bad { color: var(--danger); border-color: var(--danger); } .badge.warn { color: var(--warn); border-color: var(--warn); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.tool-grid button { text-align: start; padding: .6rem .75rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
.tool-grid button:hover:not([disabled]) { background: var(--surface-2); }
.tool-grid button[disabled] { opacity: .55; cursor: not-allowed; }
.tool-grid small { display: block; color: var(--ink-2); font-size: .75rem; }
.lang-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lang-list button { display: flex; width: 100%; justify-content: space-between; padding: .5rem .75rem; border: 0; background: transparent; border-bottom: 1px solid var(--line); text-align: start; }
.lang-list button:hover, .lang-list button[aria-current="true"] { background: var(--surface-2); }
.lang-list .flag { font-size: .72rem; color: var(--warn); }
.guest-cta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.guest-view { max-width: none; }
.guest-view .banner { margin: .5rem var(--space) 0; }

/* Dictation state: red pulsing mic while listening, accent pulse while transcribing */
#btnMic[data-state="listening"] { background: #d92d20; color: #fff; animation: cv-mic-pulse 1.3s ease-out infinite; }
#btnMic[data-state="transcribing"] { background: var(--accent-soft); color: var(--accent); animation: cv-mic-fade 1s ease-in-out infinite; }
@keyframes cv-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55); } 100% { box-shadow: 0 0 0 .8rem rgba(217, 45, 32, 0); } }
@keyframes cv-mic-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- Brand polish: violet glow, gradient heading, calmer cards ---- */
.brand b { background: var(--accent-grad, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome { position: relative; isolation: isolate; }
.welcome::before { content: ""; position: absolute; inset: 4vh 0 auto; height: 18rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 28rem 12rem at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.welcome img { width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; box-shadow: 0 .6rem 2rem color-mix(in srgb, var(--accent) 35%, transparent); }
.welcome h1 { font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--ink) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome .chip { transition: border-color .15s, background .15s, transform .15s; }
.welcome .chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.composer { transition: border-color .15s, box-shadow .2s; }
.composer:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.conv-item.active { box-shadow: inset 3px 0 0 var(--accent); }
html[dir="rtl"] .conv-item.active { box-shadow: inset -3px 0 0 var(--accent); }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--accent) 14%, transparent); padding: 1.75rem; position: relative; }
.auth-card .brand img { width: 3rem; height: 3rem; border-radius: .9rem; }
.auth-card h1 { letter-spacing: -.01em; }
body:has(.auth-card) { background: radial-gradient(ellipse 60rem 28rem at 50% -8rem, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--bg); }
@media (prefers-reduced-motion: reduce) { .welcome .chip { transition: none; transform: none !important; } }

/* ---- Chat bubbles ---- */
.msg.user .msg-content { background: linear-gradient(135deg, var(--user-bubble), color-mix(in srgb, var(--accent) 14%, var(--user-bubble))); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.sidebar { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 18rem); }
.sidebar-tabs button[aria-selected="true"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .composer[data-state="listening"] .composer-row::before { animation: none; } }

/* ---- Listening bar (mic is on) ---- */
.composer[data-state="listening"] { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .18), var(--shadow); }
.listen-bar { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; margin-bottom: .35rem; border-radius: .9rem; font-size: .9rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(217, 45, 32, .13), var(--accent-soft)); color: var(--ink); }
.listen-bar .dot { width: .65rem; height: .65rem; border-radius: 50%; background: #d92d20; animation: cv-mic-pulse 1.3s ease-out infinite; flex: none; }
.listen-bar.transcribing .dot { background: var(--accent); animation: cv-mic-fade 1s ease-in-out infinite; }
.listen-bar .tm { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.listen-bar .wave { flex: 1; min-width: 4rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
.listen-bar .wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--accent-grad, var(--accent)); transform: scaleY(.18); animation: cv-bar 1.05s ease-in-out infinite; animation-delay: calc(var(--i) * -.083s); }
.listen-bar.transcribing .wave i { animation: cv-bar-slow 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.06s); }
@keyframes cv-bar { 0%, 100% { transform: scaleY(.18); } 25% { transform: scaleY(.9); } 50% { transform: scaleY(.4); } 75% { transform: scaleY(1); } }
@keyframes cv-bar-slow { 0%, 100% { transform: scaleY(.15); opacity: .5; } 50% { transform: scaleY(.45); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .listen-bar .wave i, .listen-bar .dot { animation: none; transform: scaleY(.6); } }

/* ---- 3D animated logo ---- */
.logo3d { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.1rem; perspective: 520px; animation: cv-float 5.5s ease-in-out infinite; }
.logo3d::before { content: ""; position: absolute; inset: -.55rem; border-radius: 1.8rem; z-index: -1; filter: blur(14px); opacity: .75;
  background: conic-gradient(from 0deg, #dcb2ff, #8fc5ff, #b69cff, #dcb2ff); animation: cv-spin 7s linear infinite; }
.welcome .logo3d img { width: 100%; height: 100%; margin: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; animation: cv-sway 6s ease-in-out infinite; }
@keyframes cv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes cv-spin { to { transform: rotate(360deg); } }
@keyframes cv-sway { 0%, 100% { rotate: y -10deg; } 50% { rotate: y 10deg; } }
html[data-busy] .brand img { animation: cv-think 1.4s ease-in-out infinite; }
@keyframes cv-think { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 .5rem var(--accent)); } }
@media (prefers-reduced-motion: reduce) { .logo3d, .logo3d::before, .welcome .logo3d img, html[data-busy] .brand img { animation: none; } }

/* ---- Clean white look (light theme): flat, quiet, lots of white space ---- */
html:not([data-theme="dark"]):not([data-theme="system-dark"]) {
  --shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .sidebar { background: #f9f9fa; background-image: none; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .brand b { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome::before { display: none; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .logo3d::before { opacity: .22; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome img { box-shadow: none; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome h1 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-weight: 600; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome .chips { flex-direction: column; align-items: center; gap: .15rem; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome .chip { border: 0; background: transparent; padding: .6rem 1rem; border-radius: .8rem; font-size: .98rem; color: var(--ink-2); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .welcome .chip:hover { background: var(--surface-2); color: var(--ink); transform: none; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .composer { border-radius: 1.75rem; border-color: var(--line); box-shadow: 0 2px 16px rgba(0, 0, 0, .08); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .composer:focus-within { border-color: #c9c9cf; box-shadow: 0 2px 18px rgba(0, 0, 0, .1); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .composer-wrap { background: linear-gradient(to top, #fff 70%, transparent); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .msg.user .msg-content { background: var(--user-bubble); border: 0; border-radius: 1.4rem; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .avatar { box-shadow: none; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .conv-item.active { box-shadow: none; background: var(--surface-3); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .sidebar-tabs button[aria-selected="true"] { box-shadow: 0 0 0 1px var(--line); }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .btn.primary { border-radius: 999px; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .auth-card { box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }
html:not([data-theme="dark"]):not([data-theme="system-dark"]) body:has(.auth-card) { background: #fff; }
:is(html:not([data-theme="dark"]):not([data-theme="system-dark"])) .listen-bar { background: linear-gradient(135deg, rgba(217, 45, 32, .1), var(--surface-2)); }

/* ---- Plan picker (Settings > Plan) ---- */
.plan-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); margin: 1rem 0; }
.plan-seg button { border: 0; background: transparent; padding: .55rem .5rem; border-radius: 999px; font-weight: 600; color: var(--ink-2); }
.plan-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.plan-card { border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.1rem 1.1rem 1rem; display: grid; gap: .6rem; }
.plan-card h4 { margin: 0; font-size: 1.35rem; text-align: center; }
.plan-card > .muted:first-of-type { text-align: center; margin: 0; }
.plan-table { width: 100%; border-collapse: collapse; margin: .25rem 0; }
.plan-table th, .plan-table td { padding: .6rem .35rem; text-align: start; border-bottom: 1px solid var(--line); font-size: .95rem; }
.plan-table th { color: var(--ink-2); font-weight: 600; font-size: .85rem; }
.plan-table tr:last-child td { border-bottom: 0; }
.plan-table .c { text-align: center; width: 5.5rem; }
.plan-table .hl { font-weight: 700; }
.plan-table .tick { color: var(--ok); font-weight: 700; } .plan-table .dash { color: var(--ink-2); }
.plan-buy { border-radius: 999px; min-height: 3rem; font-size: 1rem; font-weight: 600; }
.plan-more { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
/* ChatGPT-style message layout fix */
.msg { display: flex !important; gap: .75rem; align-items: flex-start; }
.msg > .avatar { flex: none; }
.msg-body { flex: 1 1 auto; min-width: 0; width: 100%; }
.msg-content { overflow-wrap: break-word; word-break: normal; }

/* User message: right side bubble, jaise ChatGPT */
.msg.user .msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .msg-content { max-width: 75%; }

/* Copy, speaker, like icons ek line mein */
.msg-actions { flex-direction: row; }