html,body{height:100%;margin:0;overflow:hidden!important}
#app.app{height:100dvh;max-height:100dvh;display:flex;flex-direction:row;overflow:hidden}
.sidebar{flex:0 0 auto;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.sidebar-head,.sidebar-foot,.sidebar-label{flex-shrink:0}
#sessionList{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.main{flex:1 1 auto;min-width:0;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.topbar{flex-shrink:0;position:relative;z-index:5}
#messages.messages{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#playOut,.attachment-tray,.composer-wrap{flex-shrink:0}
:root {
  color-scheme: dark;
  --bg: #1c1e22;
  --panel: #2a2d33;
  --panel-2: #32363d;
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --line: #3c4048;
  --accent: #6b7c93;
  --accent-2: #8b93a0;
  --danger: #ff6b7a;
  --shadow: 0 20px 60px rgba(0, 0, 0, .42);
  --text-scale: 100%;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #edf2f8;
  --ink: #172033;
  --muted: #5b687c;
  --line: #d5deea;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --danger: #c92a3a;
  --shadow: 0 20px 55px rgba(24, 39, 75, .16);
}

* { box-sizing: border-box; }
html { font-size: var(--text-scale); }
html, body { height: 100%; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body { overflow: hidden; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; overscroll-behavior: none; }
button, select, textarea, input { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }

.app { display: flex; position: fixed; inset: 0; height: 100dvh; height: 100svh; max-height: 100svh; overflow: hidden; }
.sidebar { width: 285px; flex: 0 0 285px; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--panel); border-right: 1px solid var(--line); transition: margin-left .24s ease; z-index: 30; overflow: hidden; min-height: 0; }
.sidebar-collapsed .sidebar { margin-left: -285px; }
.sidebar-head, .modal-head, .topbar, .mode-row, .composer, .attachment-tray, .check-row { display: flex; align-items: center; }
.sidebar-head, .modal-head { justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark, .welcome-mark { display: inline-grid; place-items: center; color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px rgba(83, 114, 255, .32); }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; }
.sidebar-label { margin-top: 8px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.session-list { flex: 1; min-height: 0; overflow-y: auto; }
.session-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 5px; padding: 10px 8px 10px 12px; border-radius: 10px; color: var(--muted); }
.session-item:hover, .session-item.active { background: var(--panel-2); color: var(--ink); }
.session-item.active { box-shadow: inset 3px 0 var(--accent); }
.session-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.session-delete { border: 0; background: transparent; color: inherit; opacity: .55; }
.session-delete:hover { color: var(--danger); opacity: 1; }
.sidebar-foot { display: grid; gap: 8px; }

.main { position: relative; min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.topbar { position: relative; flex: 0 0 auto; min-height: 62px; padding: 10px 18px; gap: 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(18px); z-index: 20; }
.top-title { min-width: 0; display: flex; flex-direction: column; }
.top-title strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-title span { color: var(--muted); font-size: .72rem; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.icon-button, .top-button, .composer-button, .quiet, .primary, .send-button { border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.icon-button { width: 38px; height: 38px; font-size: 1.25rem; }
.top-button { min-height: 40px; padding: 0 13px; }
.top-button:hover, .icon-button:hover, .quiet:hover, .composer-button:hover { background: var(--panel-2); }
.primary, .send-button { border-color: transparent; color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 750; }
.primary, .quiet { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 0 14px; text-decoration: none; }
.wide { width: 100%; }
.danger { color: var(--danger); }

.popover { position: absolute; right: 16px; top: 57px; width: min(320px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); z-index: 80; }
.popover label, .modal-card > label { display: block; margin: 5px 0 7px; color: var(--muted); font-size: .8rem; font-weight: 750; }
select, .modal-card input[type="range"] { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.check-row { gap: 9px; margin: 14px 0 !important; color: var(--ink) !important; font-weight: 500 !important; }
.check-row input { width: 18px; height: 18px; }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 28px max(18px, calc((100% - 920px) / 2)); scroll-behavior: smooth; background: var(--bg); }
.welcome { max-width: 650px; margin: 13vh auto 0; text-align: center; color: var(--muted); }
.welcome-mark { width: 70px; height: 70px; border-radius: 24px; margin-bottom: 18px; font-size: 2rem; font-weight: 900; }
.welcome h1 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.9rem, 5vw, 3rem); }
.welcome p { line-height: 1.7; }
.message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; max-width: 900px; margin: 0 auto 22px; }
.message.user { grid-template-columns: minmax(0, 1fr); }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-size: .8rem; font-weight: 900; }
.message-body { min-width: 0; }
.message.user .message-body { justify-self: end; max-width: min(760px, 88%); padding: 12px 15px; border-radius: 16px 16px 4px 16px; background: #234781; color: white; }
.message-text { line-height: 1.68; overflow-wrap: anywhere; }
.message-text > :first-child { margin-top: 0; }
.message-text > :last-child { margin-bottom: 0; }
.message-text pre { position: relative; overflow-x: auto; padding: 38px 14px 14px; border: 1px solid var(--line); border-radius: 11px; background: #070b13; color: #e6edf7; }
.copy-code { position: absolute; right: 8px; top: 7px; padding: 5px 8px; border: 1px solid #2b374c; border-radius: 7px; color: #bdc9da; background: #111928; }
.message-text code:not(pre code) { padding: .14em .35em; border-radius: 5px; background: var(--panel-2); }
.message-text table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.message-text th, .message-text td { padding: 8px 10px; border: 1px solid var(--line); }
.message-image { display: block; max-width: min(100%, 680px); max-height: 680px; margin: 8px 0; border: 1px solid var(--line); border-radius: 14px; object-fit: contain; background: var(--panel-2); cursor: zoom-in; }
.message-tools { display: flex; gap: 8px; margin-top: 8px; }
.message-tools button { border: 0; background: transparent; color: var(--muted); padding: 4px; }
.message-tools button:hover { color: var(--accent); }
.thinking { color: var(--muted); }
.thinking::after { content: ''; animation: dots 1.2s infinite; }
@keyframes dots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } }

.attachment-tray { width: min(920px, calc(100% - 32px)); margin: 0 auto 8px; gap: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.attachment-tray[hidden] { display: none !important; }
.attachment-tray img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.attachment-tray div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.attachment-tray strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-tray span { color: var(--muted); font-size: .75rem; }
.composer-wrap { position: relative; flex: 0 0 auto; padding: 10px max(16px, calc((100% - 920px) / 2)) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.mode-row { gap: 9px; margin-bottom: 8px; color: var(--muted); font-size: .78rem; }
.mode-row label { font-weight: 800; }
.mode-row select { width: auto; min-height: 34px; padding: 4px 8px; }
.mode-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer { gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.composer-button { flex: 0 0 42px; height: 42px; font-size: 1.15rem; }
.composer-button.recording { color: white; border-color: var(--danger); background: var(--danger); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.composer textarea { min-height: 42px; max-height: 180px; flex: 1; resize: none; padding: 9px 4px; border: 0; outline: 0; color: var(--ink); background: transparent; line-height: 1.45; }
.send-button { align-self: flex-end; min-width: 76px; height: 42px; }
.send-button:disabled, button:disabled { cursor: not-allowed; opacity: .55; }
.fine-print { margin-top: 6px; color: var(--muted); text-align: center; font-size: .68rem; }
.drop-hint { position: absolute; inset: -130px 16px 8px; display: none; place-items: center; border: 2px dashed var(--accent); border-radius: 16px; color: var(--accent); background: color-mix(in srgb, var(--panel) 92%, transparent); font-size: 1.2rem; font-weight: 800; z-index: 10; }
body.dragging .drop-hint { display: grid; }

.modal, .lightbox { position: fixed; inset: 0; z-index: 100; place-items: center; padding: 18px; background: rgba(2, 6, 14, .78); backdrop-filter: blur(8px); }
.modal:not([hidden]), .lightbox:not([hidden]) { display: grid; }
.modal-card { width: min(460px, 100%); padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.modal-card h2 { margin: 0; }
.modal-card select, .modal-card input[type="range"] { margin-bottom: 14px; }
.settings-note { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.lightbox img { max-width: 94vw; max-height: 82vh; object-fit: contain; }
.lightbox-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }

@media (max-width: 760px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100svh; width: 52px; flex-basis: 52px; margin-left: 0; transform: none !important; box-shadow: var(--shadow); overflow: hidden; z-index: 40; }
  .app:not(.sidebar-collapsed) .sidebar { width: min(88vw, 320px); flex-basis: min(88vw, 320px); }
  .app.sidebar-collapsed .sidebar { width: 52px; flex-basis: 52px; transform: none !important; }
  .app.sidebar-collapsed .fly { display: none !important; }
  .app:not(.sidebar-collapsed) .fly { display: flex !important; }
  .main { margin-left: 52px; }
  .top-button span { display: none; }
  .messages { padding-top: 20px; }
  .mode-row span { display: none; }
  .fine-print { display: none; }
  .composer-wrap { padding-top: 8px; }
  .send-button { min-width: 62px; }
}

@media print {
  .sidebar, .topbar, .composer-wrap, .attachment-tray, .message-tools { display: none !important; }
  body, .main, .messages { overflow: visible; height: auto; background: white; color: black; }
}


.welcome-logo {
  display: block;
  width: 220px; max-width: 70vw;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.welcome-logo[style*="none"] + .welcome-mark { display: inline-flex; }
.welcome:has(.welcome-logo:not([style*="none"])) .welcome-mark { display: none; }

.message-tools button{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:4px 8px;border-radius:8px;font-size:12px}
.top-button{min-width:44px}

.thumb-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.thumb-grid .thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line)}

.sidebar { width: 285px; }
.sidebar-collapsed .sidebar { margin-left: 0; width: 58px; flex-basis: 58px; padding: 10px 6px; overflow: hidden; }
.sidebar-collapsed .brand-name,
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-foot,
.sidebar-collapsed #newChat { display: none !important; }
.sidebar-collapsed .session-title { display: none; }
.sidebar-collapsed .session-item { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; }
.sidebar-collapsed .session-delete { opacity: 1; }
.brand-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #111; }
.sidebar:not(.sidebar-collapsed) .brand-logo, .app:not(.sidebar-collapsed) .brand-logo { width: 120px; height: 36px; object-fit: contain; }
.app:not(.sidebar-collapsed) .brand-mark { display: none; }
.app.sidebar-collapsed .brand-logo { width: 36px; height: 36px; }
.confirm-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.confirm-bar[hidden] { display: none !important; }
.send-button.stop { background: #b42318; }
.status-spin::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--muted); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.session-item{transition:transform .16s ease, background .16s ease, box-shadow .16s ease}
.session-item:hover{transform:translateX(3px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.session-list{scrollbar-width:thin}
.brand-logo{transition:width .2s ease,height .2s ease}
/* no per-redraw rise — caused flicker while streaming */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.top-button,.send-button,.primary{transition:transform .12s ease,filter .12s ease}
.top-button:hover,.send-button:hover,.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}

.settings-card{width:min(420px,calc(100vw - 24px));max-height:min(88dvh,720px);overflow:auto;padding:16px 16px 18px}
.settings-card .modal-head{margin-bottom:8px}
.set-block{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-2) 65%,transparent)}
.set-block h3{margin:0 0 10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}
.set-row>span{flex:0 0 92px;color:var(--ink);font-size:.92rem}
.set-row select,.set-row input[type=range]{flex:1;min-height:38px;margin:0}
.set-row.colors{align-items:flex-start}
.swatches{display:flex;gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;color:var(--muted)}
.swatch input[type=color]{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.set-check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:var(--ink)}
.set-check small{display:block;color:var(--muted);font-weight:400}
.set-reset{width:100%;margin-top:6px}
.modal-card>label{margin:0}

.welcome-list{text-align:left;max-width:520px;margin:16px auto 0;padding:0;list-style:none}
.welcome-list li{margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:.92rem}

.sidebar-collapsed #closeSidebar,
.sidebar-collapsed #pinSidebar { display: none !important; }
.sidebar-collapsed .brand-mark { display: none !important; }
.sidebar-collapsed .session-delete { display: none !important; }
.session-num {
  display: none;
  width: 32px; height: 32px; place-items: center;
  border-radius: 10px; border: 1px solid var(--line);
  color: var(--ink); font-size: .85rem; font-weight: 700;
}
.sidebar-collapsed .session-num { display: grid; }
.sidebar-collapsed .session-item.active .session-num { border-color: var(--accent); color: var(--accent); }
.welcome-list li { cursor: pointer; }
.welcome-list li:hover { border-color: var(--accent); }
.brand { cursor: pointer; }

.build-stamp,#appVersion{color:var(--muted);font-size:.72rem}
#appVersion{display:block}
.topbar{z-index:40}
.sidebar{z-index:25}
#toggleSidebar{position:relative;z-index:50}

.set-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.set-tab{border:1px solid var(--line,#3a3d44);background:transparent;color:inherit;border-radius:8px;padding:6px 10px;cursor:pointer}
.set-tab.on{background:var(--accent,#6b7280);color:#fff;border-color:transparent}
.set-pane{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.set-pane[hidden]{display:none !important}
:root[data-theme="dark"],:root{--bg:#1c1e22;--panel:#2a2d33;--panel-2:#32363d;--ink:#e8eaed;--accent:#6b7c93}
:root[data-theme="midnight"]{--bg:#0e0e10;--panel:#1a1a1f;--panel-2:#22222a;--ink:#f2f2f4;--accent:#5b6b82}
:root[data-theme="purple"]{--bg:#1a1424;--panel:#2a2038;--panel-2:#332848;--ink:#f3eefe;--accent:#8b6cc4}

.brand-name,.brand-mark{display:none}
body.no-logo .brand-name{display:inline}
body.no-logo .brand-logo{display:none}
body.no-logo .brand-mark{display:none}
.brand-logo{display:block;max-height:36px;width:auto}

.welcome{margin:8vh auto 0;max-width:720px}
.welcome h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 10px}
.welcome p{line-height:1.6;font-size:1rem;margin:0 0 12px}
.welcome-logo{width:220px;height:auto;max-width:70vw;border-radius:28px;margin-bottom:18px}
.welcome-mark{width:96px;height:96px;border-radius:28px;margin-bottom:18px;font-size:2.4rem}
.welcome-list{margin:14px auto 0;max-width:640px}
.welcome-list li{margin:8px 0;padding:12px 14px;font-size:.95rem}
.topbar{min-height:44px;padding:6px 12px}
.composer-wrap{padding:6px max(12px,calc((100% - 920px)/2)) 8px}
.composer{padding:4px;border-radius:12px}
.composer-button{flex:0 0 34px;height:34px;font-size:1rem}
.composer textarea{min-height:36px;max-height:220px;padding:6px 4px}
.mode-row{margin-bottom:4px;font-size:.72rem}
.session-item{padding:4px 6px;gap:6px}
.session-pin{border:0;background:transparent;color:var(--muted);cursor:pointer}
.session-item.pinned .session-pin{color:var(--accent)}

.banner-error{color:#fecaca;background:#7f1d1d;padding:4px 8px;border-radius:8px;font-size:.8rem}
.run-status{margin-left:auto;color:var(--muted);font-size:.75rem}
#appVersion{display:none}

.file-chip{width:52px;height:52px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;font-size:.65rem;padding:4px;text-align:center}

.mention-menu{position:absolute;left:52px;bottom:58px;z-index:30;min-width:240px;max-height:220px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px}
.mention-item{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;border-radius:8px}
.mention-item:hover,.mention-item.on{background:var(--panel-2)}
.mention-item img,.mention-item .file-chip{width:32px;height:32px;object-fit:cover;border-radius:6px}
.prompt-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 8px 4px}
.prompt-chips .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;background:var(--panel-2);font-size:.75rem}
.prompt-chips .chip img{width:16px;height:16px;border-radius:3px;object-fit:cover}

.tool-tab{border:1px solid var(--line);background:transparent;color:inherit;border-radius:8px;padding:6px 10px;cursor:pointer}
.tool-tab.on{background:var(--accent);color:#fff;border-color:transparent}
.tool-pane{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.tool-pane[hidden]{display:none !important}

.message img,.thumb-grid img{object-fit:contain;height:auto;max-width:100%;}

.play-wide{width:min(920px,96vw);max-height:92vh;overflow:auto;}
.play-style{width:100%;min-height:6rem;font-size:1rem;}
.play-lyrics{width:100%;min-height:16rem;font-size:1rem;line-height:1.4;}
.tool-pane label{display:block;margin:10px 0 4px;}

.top-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-weight:600;font-size:.85rem;}
#openTools.top-button{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0;}

.sidebar-foot{display:flex;flex-direction:column;gap:8px;padding:12px;}
.playground-btn{background:#3a3f46;color:#e8eaed;border:1px solid #555;border-radius:10px;padding:10px 12px;font-weight:700;}
.clear-data-btn,.danger{background:#8b1e1e;color:#fff;border:0;border-radius:10px;padding:10px 12px;font-weight:700;}

.sidebar-head{flex:0 0 auto;position:sticky;top:0;z-index:3;background:var(--panel);padding-bottom:8px;}
.sidebar-foot{flex:0 0 auto;position:sticky;bottom:0;z-index:3;background:var(--panel);padding-top:8px;}
#newChat{flex:0 0 auto;}
.session-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sidebar{overflow:hidden !important;}
.topbar #toggleSidebar{flex:0 0 auto;}

.ver-row{display:flex;gap:8px;margin:8px 0 12px;}
.ver-btn{flex:1;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:8px;padding:6px 0;font-weight:700;}
.ver-btn.on{background:var(--accent);color:#fff;border-color:transparent;}

/* Main chrome stays put. Only messages + session list scroll. */
html, body { height: 100%; overflow: hidden !important; }
.app { position: fixed !important; inset: 0 !important; overflow: hidden !important; height: 100dvh !important; max-height: 100dvh !important; }
.sidebar { flex-shrink: 0; overflow: hidden !important; min-height: 0; }
.session-list { overflow-y: auto !important; min-height: 0; -webkit-overflow-scrolling: touch; }
.main { overflow: hidden !important; min-height: 0; display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto !important; position: relative !important; z-index: 40; }
.composer-wrap, .attachment-tray { flex: 0 0 auto !important; }
.messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.composer textarea { min-height: 44px; max-height: 160px; overflow-y: auto; }
.modal { overflow: auto; }

.message-tools{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.message-tools .icon-tool{width:28px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:8px;font-size:14px;line-height:28px;padding:0;cursor:pointer}
.message-tools .icon-tool:hover{color:var(--ink);background:var(--panel-2)}

.attach-item{cursor:pointer}

#voiceSelect, #voiceUser, #voiceTalk, #voiceAssistant, #toolTtsVoice { max-height: 280px; }

.play-out{flex-shrink:0;padding:8px 12px;border-top:1px solid var(--line,#333);background:var(--panel,#111);display:flex;gap:10px;align-items:center}
.play-out audio,.play-out video{width:100%;max-height:48px}
.play-out[hidden]{display:none!important}
.attach-strip audio{width:140px;height:36px}

.pwa-banner{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--accent,#3b82f6);color:#fff;font-size:13px}
.pwa-banner[hidden]{display:none!important}
.pwa-banner .top-button{background:#fff;color:#111}

.topbar{overflow:visible}
#voicePopover.popover{position:absolute;right:12px;top:52px;z-index:80;min-width:260px;max-height:70vh;overflow:auto;padding:12px;background:var(--panel,#1b1f2a);border:1px solid var(--line,#333);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#voicePopover select{width:100%;margin:4px 0 10px}

.talk-front{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;margin:0 8px}
.sidebar-foot .talk-front{margin:0 0 8px;padding:6px 8px}

.attach-item{cursor:pointer;position:relative}
.attach-item .tag-hint{position:absolute;left:4px;bottom:4px;font-size:10px;background:rgba(0,0,0,.65);color:#fff;padding:2px 6px;border-radius:4px;pointer-events:none}
.attach-strip,.attachment-tray{cursor:pointer}

.message-tools{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2}
.message-tools .icon-tool{min-width:32px;min-height:32px;pointer-events:auto}

.attach-strip,.attach-tray{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;align-items:center}
.attach-item{position:relative;flex:0 0 auto;width:72px;height:72px;padding:0;margin:0}
.attach-item img,.attach-item video{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
.attach-item .icon-button{position:absolute;top:2px;right:2px;width:20px;height:20px;font-size:12px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%}
.attach-item .tag-hint{display:none}

/* one logo file, any aspect: contain in the slot */
.brand-logo,
.welcome-logo {
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 148px;
  max-height: 40px;
}
.app.sidebar-collapsed .brand-logo,
.sidebar-collapsed .brand-logo {
  max-width: 44px;
  max-height: 44px;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.brand {
  min-height: 44px;
}
.welcome-logo {
  width: auto;
  height: auto;
  max-width: min(280px, 70vw);
  max-height: 120px;
}

.talk-btn{background:linear-gradient(180deg,#22c55e,#16a34a)!important;color:#fff!important;border:0!important;border-radius:12px;font-weight:800;position:relative}
.talk-btn.stop,.talk-btn.live{background:linear-gradient(180deg,#ef4444,#b91c1c)!important}
.talk-btn.live::after{content:"";display:inline-block;width:14px;height:10px;margin-left:8px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px);animation:waves .6s linear infinite;vertical-align:middle}
@keyframes waves{to{background-position:8px 0}}
.tools-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;color:#fff!important;border:0!important;border-radius:12px;font-weight:800}
.clear-data-btn{background:linear-gradient(180deg,#444,#2a2a2a)!important}
.session-item{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s ease,box-shadow .15s}
.session-item:hover{transform:translateX(2px);box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.session-title{background:linear-gradient(90deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text}
.session-blurb{display:block;font-size:11px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.brand-lock{position:relative;display:inline-flex;align-items:center;justify-content:center}
.brand-pin{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;padding:0;border:0;border-radius:50%;background:#eab308;box-shadow:0 0 0 2px var(--bg,#111);cursor:pointer;opacity:.85}
.brand-pin::before{content:"";display:block;width:6px;height:6px;margin:4px auto 0;border-radius:1px;background:#111;transform:rotate(45deg)}
.app.sidebar-pinned .brand-pin{background:#22c55e}
.sidebar-collapsed .brand-pin{right:0;bottom:0;width:12px;height:12px}
.sidebar-collapsed #pinSidebar{display:block!important}
.session-num{position:relative}
.session-pin{position:absolute;right:-4px;bottom:-4px;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px currentColor;cursor:pointer}
.session-pin.on{background:var(--accent);box-shadow:none}
.sidebar-collapsed .session-pin{right:-2px;bottom:-2px;width:8px;height:8px}
.sidebar-collapsed .session-item{position:relative}

.collapse-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:10px;width:36px;height:36px}
.danger-btn{background:linear-gradient(180deg,#ef4444,#b91c1c)!important;color:#fff!important;border:0!important;border-radius:12px;font-weight:800;min-height:42px}
.talk-btn,.tools-btn,.danger-btn{min-height:42px}

.sidebar-collapsed .sidebar{width:56px;flex-basis:56px;padding:10px 6px}
.sidebar-collapsed #newChat{display:flex!important;width:44px;height:44px;padding:0;border-radius:12px;font-size:0;align-items:center;justify-content:center}

.sidebar-collapsed .session-item{grid-template-columns:1fr;justify-items:center;padding:6px 0}
.sidebar-collapsed .session-title,.sidebar-collapsed .session-blurb,.sidebar-collapsed .session-delete{display:none!important}
.sidebar-collapsed .session-num{width:28px;height:28px}
.sidebar-collapsed .session-item.busy .session-num{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(99,102,241,.35)}}
.session-item{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.retry-submit{display:inline-block;margin-top:8px;background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;border:0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}

.sidebar-head{display:flex;align-items:center;gap:8px;justify-content:flex-start}
.sidebar-head .collapse-btn{flex:0 0 36px}
.brand{display:flex;align-items:center;min-width:0;flex:1}
.brand-logo-wide{display:block;max-width:148px;max-height:40px;width:auto;height:auto;object-fit:contain}
.brand-logo-sq{display:none;width:36px;height:36px;object-fit:contain;border-radius:8px}
.brand-mark,.brand-name{display:none}
body.no-logo .brand-logo-wide,body.no-logo .brand-logo-sq{display:none!important}
body.no-logo .brand-name{display:inline;font-weight:800}
.app.sidebar-collapsed .brand-logo-wide{display:none}
.app.sidebar-collapsed .brand-logo-sq{display:block}
.app.sidebar-collapsed body.no-logo .brand-mark,
.app.sidebar-collapsed.no-logo .brand-mark,
body.no-logo.app.sidebar-collapsed .brand-mark{display:grid}
body.no-logo.app.sidebar-collapsed .brand-name{display:none}
.app.sidebar-collapsed .sidebar-head{justify-content:center;flex-direction:column;gap:8px}
.app.sidebar-collapsed .sidebar-head .collapse-btn{order:-1}

.session-more{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px}
.thread-menu{position:fixed;z-index:80;min-width:180px;background:var(--panel,#1b1b22);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.thread-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--ink,#eee);padding:8px;border-radius:8px;cursor:pointer}
.thread-menu button:hover{background:rgba(255,255,255,.08)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:90}
.modal[hidden]{display:none}
.modal-card{background:var(--panel,#1b1b22);color:var(--ink,#eee);padding:18px;border-radius:16px;min-width:260px;display:grid;gap:10px}
.app.sidebar-collapsed .session-more{display:block}

.talk-btn,.tools-btn,#newChat.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)));
  color:#fff;border:0;border-radius:12px;font-weight:800;
}
.session-item.pinned{outline:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%, transparent)}
.session-item.active{box-shadow:inset 3px 0 var(--accent)}
.app.sidebar-collapsed #clearData,.sidebar-collapsed #clearData{display:none!important}
.app.sidebar-collapsed #talkLiveBtn,.app.sidebar-collapsed #openTools,
.sidebar-collapsed #talkLiveBtn,.sidebar-collapsed #openTools{
  display:flex!important;width:44px;height:44px;padding:0;font-size:0;align-items:center;justify-content:center;margin:0 auto 8px;
}


.app.sidebar-collapsed .session-more,.sidebar-collapsed .session-more{display:block!important;font-size:18px}
.app.sidebar-collapsed .sidebar-foot{display:flex!important;flex-direction:column;align-items:center}

.archive-btn{background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent));color:#fff;border:0;border-radius:12px;font-weight:800;min-height:42px}
.app.sidebar-collapsed #archiveBtn,.sidebar-collapsed #archiveBtn{display:flex!important;width:44px;height:44px;padding:0;font-size:0;align-items:center;justify-content:center}


.sidebar{width:260px;flex-basis:260px;padding:10px 8px;display:flex;flex-direction:column;gap:8px}
.sidebar-head{display:flex;align-items:center;gap:8px;min-height:44px}
.brand{flex:1;min-width:0;overflow:hidden}
.brand-logo-wide{max-width:100%;max-height:36px;width:auto;height:auto;object-fit:contain;display:block}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:10px;padding:8px 10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font-weight:650}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-ico{width:22px;text-align:center;flex:0 0 22px}
.nav-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.talk .nav-ico{color:#4ade80}
.nav-item.tools .nav-ico{color:var(--accent)}
.nav-item.danger{color:#f87171}
.app.sidebar-collapsed .sidebar{width:56px;flex-basis:56px;padding:8px 6px}
.app.sidebar-collapsed .nav-txt,
.app.sidebar-collapsed .sidebar-label,
.app.sidebar-collapsed .brand-logo-wide,
.app.sidebar-collapsed .brand-name,
.app.sidebar-collapsed #clearData .nav-txt{display:none!important}
.app.sidebar-collapsed .nav-item{width:44px;height:44px;padding:0;justify-content:center;margin:0 auto}
.app.sidebar-collapsed .brand-logo-sq{display:block;width:32px;height:32px;margin:0 auto}
.app.sidebar-collapsed .session-title,
.app.sidebar-collapsed .session-blurb,
.app.sidebar-collapsed .session-delete{display:none!important}

.session-item{position:relative}
.session-more{position:absolute;right:4px;bottom:2px;z-index:2;line-height:1;padding:0 4px;font-size:14px;opacity:.7}
.session-item:hover .session-more{opacity:1}
.app.sidebar-collapsed .session-item{width:44px;height:44px;margin:0 auto 8px;padding:0}
.app.sidebar-collapsed .session-num{margin:0;width:100%;height:100%;display:grid;place-items:center}
.app.sidebar-collapsed .session-more{right:0;bottom:0;font-size:12px}

.session-more{position:absolute;right:2px;bottom:2px;z-index:5}
.session-more summary{list-style:none;cursor:pointer;padding:0 4px;color:var(--muted)}
.session-more summary::-webkit-details-marker{display:none}
.session-more-list{position:absolute;right:0;bottom:22px;min-width:160px;background:var(--panel,#1c1c24);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.session-more-list button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:8px;border-radius:8px;cursor:pointer}
.nav-item .nav-ico{color:var(--muted)!important}
.nav-item.talk .nav-ico{color:var(--muted)!important}
.brand-logo-sq,.brand-logo-wide{background:rgba(255,255,255,.06);border-radius:10px;padding:4px}
.app.sidebar-collapsed .brand{display:flex;justify-content:center}
.app.sidebar-collapsed .brand-logo-sq{display:block!important;width:36px;height:36px;object-fit:contain}
.app.sidebar-collapsed .brand-logo-wide{display:none!important}

/* 227 overrides — last wins */
.sidebar-collapsed #newChat{display:flex!important}
.app:not(.sidebar-collapsed) .brand{flex:1;min-width:0;background:color-mix(in srgb,var(--accent) 16%, transparent);border-radius:12px;padding:6px 8px}
.app:not(.sidebar-collapsed) .brand-logo-wide{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:52px!important;
  object-fit:contain!important;
  padding:0!important;
  background:transparent!important;
}
.app.sidebar-collapsed .brand{background:color-mix(in srgb,var(--accent) 16%, transparent);border-radius:12px;padding:4px}
.app.sidebar-collapsed .brand-logo-sq{
  display:block!important;
  width:40px!important;
  height:40px!important;
  object-fit:contain!important;
  padding:0!important;
  background:transparent!important;
}
.nav-item{
  background:color-mix(in srgb,var(--accent) 18%, transparent)!important;
  color:var(--ink)!important;
}
.nav-item .nav-ico{display:inline-block!important;font-size:18px!important;line-height:1!important;color:var(--ink)!important}
.app.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-item,
.sidebar-collapsed #newChat,
.sidebar-collapsed #archiveBtn,
.sidebar-collapsed #talkLiveBtn,
.sidebar-collapsed #openTools{
  display:flex!important;
  width:44px!important;
  height:44px!important;
  font-size:18px!important;
  padding:0!important;
  justify-content:center!important;
  align-items:center!important;
}
.app.sidebar-collapsed .nav-txt{display:none!important}

.top-button,.top-actions button,.settings-modal button,.set-pane button,.modal-card button,
#exportPdfTop,#voiceButton,#settingsButton{
  background:color-mix(in srgb,var(--accent) 16%, transparent)!important;
  color:var(--ink)!important;
  border:1px solid color-mix(in srgb,var(--accent) 28%, transparent)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-weight:650;
}
.danger-btn,#clearData{
  background:color-mix(in srgb,#ef4444 22%, transparent)!important;
  color:var(--ink)!important;
  border:1px solid color-mix(in srgb,#ef4444 40%, transparent)!important;
}
.settings-modal,.modal-card{
  background:var(--panel)!important;
  border:1px solid color-mix(in srgb,var(--accent) 20%, transparent);
  border-radius:12px;
}
.set-row, .settings-modal select, .settings-modal input, .settings-modal textarea{
  border-radius:8px!important;
  background:color-mix(in srgb,var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 18%, transparent);
  color:var(--ink);
}
.settings-tabs button{
  background:transparent!important;
  border:0!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important;
}
.settings-tabs button.active{border-bottom-color:var(--accent)!important}

#newChat .nav-ico,#archiveBtn .nav-ico,#talkLiveBtn .nav-ico,#openTools .nav-ico{
  font-size:20px!important;line-height:1!important;display:block!important;
}
#newChat::before,#archiveBtn::before,#talkLiveBtn::before,#openTools::before,
.sidebar-collapsed #newChat::before,.sidebar-collapsed #archiveBtn::before,
.app.sidebar-collapsed #newChat::before,.app.sidebar-collapsed #archiveBtn::before,
.app.sidebar-collapsed #talkLiveBtn::before,.app.sidebar-collapsed #openTools::before{content:none!important;display:none!important}

.app.sidebar-collapsed .brand,
.app.sidebar-collapsed .sidebar-head .brand,
.app.sidebar-collapsed .brand-logo,
.app.sidebar-collapsed .brand-logo-sq,
.app.sidebar-collapsed .brand-logo-wide{display:none!important}
.chat-action-btns{display:grid;gap:8px}
.chat-action-btns button{width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 25%, transparent);background:color-mix(in srgb,var(--accent) 12%, transparent);color:var(--ink)}
.sidebar-foot{align-items:stretch}
.app.sidebar-collapsed .sidebar-foot{align-items:center;padding:0}
.app.sidebar-collapsed .sidebar-foot .nav-item{margin:6px auto!important}

.sidebar{display:flex;flex-direction:row;width:auto;flex-basis:auto;padding:0;align-items:stretch}
.rail{width:56px;flex:0 0 56px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border-right:1px solid rgba(255,255,255,.06)}
.rail-btn{width:40px;height:40px;border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.rail-space{flex:1}
.rail-foot{margin-top:auto}
.fly{width:220px;display:flex;flex-direction:column;min-width:0;padding:10px 8px}
.app.sidebar-collapsed .fly{display:none!important}
.app.sidebar-collapsed .sidebar{width:56px;flex-basis:56px}
.chat-search{width:100%;margin:8px 0;padding:8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 20%, transparent);background:color-mix(in srgb,var(--accent) 8%, transparent);color:var(--ink)}
.app:not(.sidebar-collapsed) .brand-logo-wide{width:100%;max-height:44px;object-fit:contain}

.rail{background:var(--panel);border-right:1px solid var(--line)}
.rail-btn{background:color-mix(in srgb,var(--accent) 14%, var(--panel-2));color:var(--ink);border:1px solid var(--line)}
.fly{background:var(--bg);color:var(--ink)}
.chat-search{background:var(--panel-2);color:var(--ink);border-color:var(--line)}

.rail{width:52px;flex-basis:52px;padding:8px 6px;align-items:center}
.rail-btn{width:40px;height:40px;margin:0;padding:0}
.app.sidebar-collapsed .rail-btn{margin:0}
.app.sidebar-collapsed .sidebar{width:52px!important;flex-basis:52px!important}
#sessionList{overflow-y:auto}
.session-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-item:hover .session-title{overflow:auto;text-overflow:clip}

#app.sidebar, #app .sidebar, .app .sidebar{
  display:flex!important;
  flex-direction:row!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  width:auto!important;
  flex:0 0 auto!important;
  flex-basis:auto!important;
}
.app .rail{
  flex:0 0 52px!important;
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  padding:8px 0!important;
  box-sizing:border-box!important;
}
.app .rail-btn{width:40px!important;height:40px!important;margin:4px auto!important}
.app .fly{flex:0 0 220px;width:220px;min-width:0;overflow:auto}
.app.sidebar-collapsed .fly{
  display:none!important;
  width:0!important;
  flex-basis:0!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}
.app.sidebar-collapsed .sidebar,
.app.sidebar-collapsed #app .sidebar{
  width:52px!important;
  min-width:52px!important;
  flex-basis:52px!important;
}

.app:not(.sidebar-collapsed) .brand,
.app:not(.sidebar-collapsed) #brandBlock{
  width:100%!important;
  background:transparent!important;
  padding:0!important;
  margin:0 0 8px!important;
  box-shadow:none!important;
}
.app:not(.sidebar-collapsed) .brand-logo-wide,
.app:not(.sidebar-collapsed) #brandLogo{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
}
.app.sidebar-collapsed .brand,
.app.sidebar-collapsed #brandBlock,
.app.sidebar-collapsed .brand-logo-wide,
.app.sidebar-collapsed .brand-logo-sq{display:none!important}

.rail{gap:4px!important;padding:6px 0!important}
.rail-space{flex:1 1 auto;min-height:8px}
.rail-sessions{display:flex;flex-direction:column;gap:4px;align-items:center}
.rail-chat-dot{font-size:12px}
.app:not(.sidebar-collapsed) .rail-sessions{display:none}

.settings-modal select, #voiceUser, #voiceAssistant, #voiceTalk, #voiceSelect, #toolTtsVoice{
  pointer-events:auto!important;
  appearance:auto!important;
  -webkit-appearance:menulist!important;
  position:relative;
  z-index:6;
  min-height:40px;
  background:var(--panel-2);
  color:var(--ink);
}

.rail{gap:2px!important;padding:6px 0!important}
.rail-btn{width:36px!important;height:36px!important}
.fly-back{margin:0 0 8px}
.retry-submit{background:color-mix(in srgb,var(--accent) 30%, var(--panel-2))!important;color:var(--ink)!important;border:0;border-radius:10px;padding:8px 12px}
.session-delete{position:relative;z-index:3;width:28px;height:28px;pointer-events:auto}
.session-more{display:none!important}
.brand-logo-wide{width:100%!important;max-height:48px!important;object-fit:contain!important}

.fly{background:var(--bg)!important;padding:8px!important}
.brand,#brandBlock{background:transparent!important;box-shadow:none!important;padding:4px 6px!important}
.brand-logo-wide{width:100%;height:36px;object-fit:contain;object-position:left center}
.fly-row{
  display:flex;align-items:center;gap:10px;width:100%;
  height:40px;padding:0 10px;margin:0 0 4px;
  border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--ink);
  text-align:left;font:inherit;
}
.fly-row:hover{background:color-mix(in srgb,var(--ink) 8%, transparent)}
.fly-ico{width:20px;text-align:center;flex:0 0 20px}
.nav-item,.primary.wide,#newChat.wide{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:10px!important;height:40px!important;width:100%!important;
}
#newChat.rail-btn{/* rail stays icon only */}
.session-item{display:flex;align-items:center;gap:8px;background:transparent!important;box-shadow:none!important}
.session-item.active{background:color-mix(in srgb,var(--ink) 10%, transparent)!important}
.chat-search{background:color-mix(in srgb,var(--ink) 6%, var(--bg))!important;border:1px solid var(--line)!important}

.chat-pop{
  position:fixed;z-index:100010;display:flex;flex-direction:column;gap:4px;
  padding:6px;border-radius:12px;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.chat-pop[hidden]{display:none!important}
.chat-pop-btn{
  width:36px;height:36px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--ink);
  display:grid;place-items:center;
}
.chat-pop-btn:hover{background:color-mix(in srgb,var(--ink) 10%, transparent)}
#chatMenu{display:none!important}

.regen-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.regen-actions button,.retry-submit,.composer .ico, .msg-actions button{
  height:32px!important;min-height:32px;padding:0 10px;border-radius:8px;font-size:13px
}
.msg-actions{gap:4px!important}
.rail{gap:2px!important}
.rail-btn,.ico{width:34px!important;height:34px!important}

/* v259 grok rows */
.sidebar .brand,.brand-logo,.brand-name,#brandBlock,.sidebar-head{display:none!important;height:0!important;margin:0!important;padding:0!important}
.fly{background:var(--bg,#0a0a0a)!important;padding:8px 6px!important}
.fly-row,.nav-item,#flyNew,#flyBack{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:12px!important;width:100%!important;height:40px!important;
  margin:0!important;padding:0 10px!important;
  border:0!important;border-radius:10px!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--ink,#ececec)!important;font-size:14px!important;font-weight:400!important;
}
.fly-row:hover,.nav-item:hover,#flyNew:hover,#flyBack:hover{background:rgba(255,255,255,.06)!important}
.fly-ico,.nav-ico{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;flex:0 0 18px!important}
.session-list{overflow:auto;flex:1}
.session-item,.session-row{
  display:flex!important;align-items:center!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:10px!important;padding:8px 10px!important;margin:0!important;
  min-height:36px;
}
.session-item:hover,.session-row:hover{background:rgba(255,255,255,.06)!important}
.session-item.active,.session-row.active{background:rgba(255,255,255,.08)!important}
.session-more{display:none!important}
.session-delete{margin-left:auto;opacity:.5;width:22px;height:22px;border:0;background:transparent;color:inherit}
.chat-search{background:transparent!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
.sidebar-label{font-size:12px;opacity:.55;padding:10px 10px 4px;background:none!important}
.rail-btn{background:transparent!important;box-shadow:none!important}
.rail-btn:hover{background:rgba(255,255,255,.06)!important}

/* v261 settings: table rows, hover only, compact */
#settingsModal, #settingsPanel, .settings-modal, .sheet, .modal-card, dialog.settings {
  background: var(--bg, #0a0a0a) !important;
}
#settingsModal .panel, #settingsModal .card, .settings-grid > *, .setting-block, .settings-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.settings-tabs button, .tab-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
.settings-tabs button:hover, .tab-btn:hover { background: rgba(255,255,255,.06) !important; }
.settings-tabs button.on, .tab-btn.active { border-bottom-color: currentColor !important; }
.settings-row, .field, .admin-row, label.row {
  display: grid !important;
  grid-template-columns: minmax(140px, 32%) 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 8px !important;
}
.settings-row:hover, .field:hover, .admin-row:hover { background: rgba(255,255,255,.05) !important; }
#settingsModal input, #settingsModal select, #settingsModal textarea,
.settings-modal input, .settings-modal select, .settings-modal textarea {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
#settingsModal textarea { height: auto !important; min-height: 64px; }
#settingsModal button.primary, #settingsModal .primary {
  height: 32px !important; padding: 0 12px !important; font-size: 13px !important;
}

.chat-head{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
#chatHeadTitle{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chatHeadStatus{font-size:12px;opacity:.6}
.session-list{overflow-y:auto!important;max-height:calc(100vh - 220px)}
.session-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* 4.7.267 menu labels + thread X overlay */
.session-item{position:relative;padding-right:28px}
.session-delete,.session-x{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:0;border-radius:6px;cursor:pointer;
  background:color-mix(in srgb,var(--danger,#ff6b7a) 18%, transparent);
  color:var(--ink);opacity:.85;z-index:4;line-height:20px;text-align:center;
}
.session-delete:hover{opacity:1;background:var(--danger,#ff6b7a);color:#fff}
.chat-pop{min-width:220px;padding:8px}
.chat-pop-btn{
  width:100%!important;height:auto!important;min-height:36px;
  display:flex!important;align-items:center;gap:10px;
  padding:8px 10px!important;text-align:left;border-radius:10px;
}
.chat-pop-btn:hover{background:color-mix(in srgb,var(--accent) 18%, transparent)}
.chat-pop-lab{font-size:13px}
.chat-pop-ico{display:grid;place-items:center;width:18px;flex:0 0 18px}
#topMore{cursor:pointer}
#topMore:hover{border-color:var(--accent)}

/* 4.7.269 archive + thread controls */
#archiveBtn.on{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 22%, transparent)}
.session-item{position:relative;padding-right:52px}
.session-pin,.session-delete{
  position:absolute;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:0;border-radius:6px;cursor:pointer;z-index:4;
  background:transparent;color:var(--ink);opacity:.8;
}
.session-pin{right:28px}
.session-pin.on{color:gold;opacity:1}
.session-delete{right:4px;background:color-mix(in srgb,var(--danger,#ff6b7a) 16%, transparent)}
.session-delete:hover{background:var(--danger,#ff6b7a);color:#fff}
.techstar-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  padding:8px 14px;border-radius:10px;z-index:200000;font-size:13px;
}
.techstar-toast[hidden]{display:none!important}

.native-voice-hidden{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}
.voice-wheel{width:100%;max-height:220px;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#1a1b22;color:#e8e8ee;margin:6px 0 12px}
.voice-wheel-h{position:sticky;top:0;padding:6px 10px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#9aa0ae;background:#14151b}
.voice-wheel-item{display:block;width:100%;text-align:left;background:transparent;color:#e8e8ee;border:0;padding:10px 12px;cursor:pointer}
.voice-wheel-item.on,.voice-wheel-item:hover{background:#2c3140;color:#fff}
.set-pane[data-pane="voice"] .set-row{display:block}

.attachment-tray{flex-direction:column;align-items:stretch}
.attachment-tray .tray-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between}
.attachment-tray .attach-strip,.attach-strip{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto;overflow-y:hidden;align-items:center;width:100%}
.attachment-tray .attach-item{display:flex;flex-direction:column;flex:0 0 auto;position:relative}
.attachment-tray .attach-item img,.attachment-tray img{width:64px;height:64px}

.mention-menu{position:absolute;left:12px;right:12px;bottom:72px;z-index:40;max-height:220px;overflow:auto;background:#1a1b22;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px}
.mention-menu[hidden]{display:none!important}
.mention-item{display:flex;flex-direction:row;align-items:center;gap:8px;color:#e8e8ee}

.voice-wheel{width:100%;height:132px;overflow-y:auto;scroll-snap-type:y mandatory;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#14151b;margin:6px 0 12px}
.voice-wheel-pad{height:44px;flex:0 0 44px}
.voice-wheel-break{height:14px;margin:4px 18px;border-top:1px solid rgba(255,255,255,.28);scroll-snap-align:none;pointer-events:none}
.voice-wheel-item{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;color:#8b909c;font-size:15px}
.voice-wheel-item.on{color:#fff;font-weight:650;background:rgba(255,255,255,.06)}

.attach-item{position:relative;flex:0 0 auto}
.attach-item .icon-button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;z-index:2}

.voice-pick{width:100%;text-align:left;background:#1a1b22;color:#e8e8ee;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px 12px;margin:4px 0}
.voice-pop{position:relative;z-index:30}
.voice-pop[hidden]{display:none!important}
.voice-wheel{height:108px;overflow-y:auto;scroll-snap-type:y mandatory;background:#14151b;border:1px solid rgba(255,255,255,.16);border-radius:12px}
.voice-wheel-pad{height:36px}
.voice-wheel-item{height:36px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;color:#8b909c}
.voice-wheel-item.on{color:#fff;background:rgba(255,255,255,.08)}
.voice-wheel-break{height:10px;margin:0 16px;border-top:1px solid rgba(255,255,255,.28);pointer-events:none}
.native-voice-hidden{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}

.set-pane select,.mode-row select{background:#1a1b22;color:#e8e8ee;border:1px solid rgba(255,255,255,.16)}
.voice-wheel{height:108px;overflow-y:auto;scroll-snap-type:y mandatory;background:#14151b;color:#e8e8ee;border:1px solid rgba(255,255,255,.16);border-radius:12px;margin:6px 0}
.voice-wheel-pad{height:36px}
.voice-wheel-item{height:36px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;color:#8b909c}
.voice-wheel-item.on{color:#fff;background:rgba(255,255,255,.08)}
.voice-wheel-break{height:10px;margin:0 16px;border-top:1px solid rgba(255,255,255,.28)}

.message-tools button.speaking{color:#8fd0ff;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}