/* Brand source: Colossus_Refined/site/assets/site.css.
   Original palette, logo, gradients, glass panels and constellations.
   Component sizing is adapted for the Telegram conversation interface. */
:root {
  --bg-color: #0a0b12;
  --bg-secondary: #12141d;
  --glass-bg: rgba(20, 22, 35, .5);
  --glass-border: rgba(255, 255, 255, .06);
  --neon-cyan: #00d4ff;
  --neon-purple: #d45ed0;
  --neon-violet: #8a2be2;
  --neon-gold: #ffb84d;
  --text-main: #e2e8f0;
  --text-muted: #8b94a8;
  --accent-gradient: linear-gradient(135deg, #00d4ff 0%, #d45ed0 100%);
  --bg: var(--bg-color);
  --panel: var(--bg-secondary);
  --card: var(--glass-bg);
  --line: var(--glass-border);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --accent: var(--neon-cyan);
  --accent-dim: rgba(0, 212, 255, .1);
  --font: Inter, "Segoe UI", system-ui, sans-serif;
}
html { height:100%; overflow:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { height:100%; overflow:hidden; background:var(--bg-color); }
html.managed-zoom { touch-action:pan-x pan-y; }
.app-shell,.sheet,.image-dialog,.toast { zoom:var(--ui-scale,1); }
.bg-orbs { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.27; animation:float 20s infinite ease-in-out; }
.orb-1 { width:500px; height:500px; background:var(--neon-cyan); top:-180px; left:-150px; }
.orb-2 { width:400px; height:400px; background:var(--neon-purple); top:40%; right:-160px; animation-delay:-7s; }
.orb-3 { width:350px; height:350px; background:var(--neon-violet); bottom:-180px; left:30%; animation-delay:-14s; }
@keyframes float {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(100px,-80px) scale(1.1); }
  66% { transform:translate(-80px,100px) scale(.9); }
}
#constellations { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85; z-index:0; }
/* Scale the content inside the viewport, never the viewport dimensions themselves. */
.app-shell {
  position:absolute; z-index:1; left:var(--app-page-left,0px); top:var(--app-page-top,0px);
  width:var(--app-width,100%); height:var(--app-height,100dvh); min-height:0;
}
.desktop-rail,.topbar {
  background:var(--glass-bg);
  border-color:var(--glass-border);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.topbar { border-bottom:1px solid var(--glass-border); }
.topbar>.icon-btn { width:36px; height:36px; border-radius:9px; }
.topbar>.icon-btn svg { width:20px; height:20px; }
.rail-logo { width:34px; height:44px; object-fit:contain; filter:drop-shadow(0 0 8px #00d4ff55); }
.brand { font-size:18px; font-weight:800; letter-spacing:5px; color:#fff; gap:12px; }
.brand>img { width:26px; height:32px; object-fit:contain; filter:drop-shadow(0 0 8px #00d4ff80); }
.lite-label { border-color:#00d4ff33; color:var(--neon-cyan); background:#00d4ff0a; font-size:8px; letter-spacing:1.5px; }
.balance-pill { background:#00d4ff0d; border-color:#00d4ff33; }
.balance-pill svg,.status-dot { color:var(--neon-cyan); }
.welcome { padding-top:26px; }
.welcome-symbol { width:85px; height:104px; margin-bottom:14px; background:none; }
.welcome-symbol img { width:85px; height:104px; object-fit:contain; filter:drop-shadow(0 0 22px #00d4ff33); }
.welcome>.eyebrow {
  display:inline-flex; font-size:11px; font-weight:500; letter-spacing:0;
  color:var(--neon-cyan); border:1px solid #00d4ff33; background:#00d4ff14;
  border-radius:100px; padding:6px 14px;
}
.welcome h1 { font-size:43px; font-weight:800; letter-spacing:-.02em; line-height:1.12; margin:18px 0 14px; }
.welcome h1 span { background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.welcome-copy { color:var(--text-muted); }
.suggestion {
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px;
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
}
.suggestion:hover { background:rgba(20,22,35,.8); border-color:#00d4ff33; }
.suggestions { grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px auto 14px; }
.welcome-foot { margin-top:10px; }
.suggestion,.suggestion>span:not(.suggestion-icon) { min-width:0; }
.suggestion-icon {
  color:var(--neon-cyan); border:1px solid #00d4ff33;
  background:linear-gradient(135deg,#00d4ff26,#d45ed026);
}
.suggestion strong { color:#fff; font-weight:600; }
.tiny-model-icons img { background:var(--bg-secondary); border-color:var(--bg-color); }
/* Let messages continue behind the floating composer instead of clipping above it. */
.conversation {
  padding-bottom:calc(var(--composer-height,180px) + 12px);
  scroll-padding-bottom:calc(var(--composer-height,180px) + 40px);
}
.composer-area {
  position:absolute; inset:auto 0 0; z-index:3;
  background:var(--bg-color); pointer-events:none;
}
.composer-area::before {
  content:""; position:absolute; inset:-32px 0 100%;
  background:linear-gradient(to bottom,transparent,var(--bg-color));
  pointer-events:none;
}
.composer-area>.composer,.composer-area>.composer-caption,.composer-area>.scroll-bottom { pointer-events:auto; }
.awaiting-login .conversation { padding-bottom:12px; scroll-padding-bottom:12px; }
.composer { background:rgba(20,22,35,.9); border:1px solid #ffffff14; box-shadow:0 8px 32px #0004; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.composer:focus-within { border-color:#00d4ff60; }
.model-button { min-width:0; background:rgba(255,255,255,.04); border-color:var(--glass-border); color:var(--text-main); }
.model-button img,.model-button>span:last-child,.attach-button { flex-shrink:0; }
.send-button,.primary-button { background:var(--accent-gradient); color:var(--bg-color); box-shadow:0 4px 16px #00d4ff20; }
.send-button:hover,.primary-button:hover { background:var(--accent-gradient); filter:brightness(1.12); }
.send-button.is-stop { background:var(--bg-secondary); color:var(--neon-cyan); border:1px solid #00d4ff40; }
.send-button { flex-shrink:0; }
.send-button.needs-key { display:flex; align-items:center; justify-content:center; width:auto; min-width:72px; padding:0 14px; font-size:11px; font-weight:600; white-space:nowrap; }
.composer.needs-key .model-button { min-width:0; }
.composer.needs-key .model-button img,.composer.needs-key .model-button>span:last-child { flex-shrink:0; }
.composer-caption { color:var(--text-muted); }
.message.user { background:linear-gradient(135deg,#00d4ff15,#d45ed01c); border-color:#00d4ff26; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.message.assistant {
  position:relative; color:var(--text-main); padding:12px 14px;
  background:linear-gradient(135deg,#00d4ff0a,#d45ed00d),rgba(18,20,29,.84);
  border:1px solid rgba(110,121,196,.32); border-radius:13px 13px 13px 4px;
  box-shadow:0 8px 28px #00000020;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
/* Keep the translucent fill separate from the diagonal outline. */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
  .message.assistant { border-color:transparent; }
  .message.assistant::before {
    content:"";
    position:absolute;
    inset:-1px;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(0,212,255,.34),rgba(128,108,230,.22) 52%,rgba(188,98,236,.36));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }
}
.fullscreen-toggle[aria-pressed="true"] { color:var(--accent); background:transparent; }
.message-label {
  display:flex; flex-wrap:nowrap; align-items:center; gap:6px;
  min-width:0; min-height:18px; line-height:18px; margin-bottom:8px;
  color:var(--text-muted); white-space:nowrap;
}
.message-label img { width:16px; height:16px; flex:0 0 16px; }
.message-label>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-label time { flex:0 0 auto; min-width:5ch; color:#7b8496; font-variant-numeric:tabular-nums; white-space:nowrap; }
.message.user .message-actions { justify-content:flex-end; min-height:28px; margin-top:4px; white-space:normal; }
.message-delete:hover { color:var(--danger); background:#f8717112; }
.message-body strong { color:#fff; }
.answer-waiting { padding:4px 0; min-height:33px; }
.answer-waiting-text { display:inline-block; font-weight:600; color:var(--neon-cyan); }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .answer-waiting-text {
    background:linear-gradient(110deg,#00d4ff 0%,#9aa6ff 25%,#db8cf4 50%,#9aa6ff 75%,#00d4ff 100%);
    background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    animation:answer-shimmer 2.8s linear infinite;
  }
}
@keyframes answer-shimmer { to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce) {
  .answer-waiting-text { animation:none; }
}
.code-card { background:#0a0b12; border-color:#ffffff14; }
.code-header { background:#191b2b; }
.message-body .inline-code { background:#ffffff0a; color:#b2dcf2; }
.followup { color:var(--neon-cyan); }
.followup:hover { background:#00d4ff0a; }
.message-sources { margin-top:14px; padding-top:4px; border-top:1px solid #ffffff0d; font-size:12px; line-height:1.4; min-width:0; }
.message-sources>summary { display:flex; align-items:center; gap:7px; width:fit-content; max-width:100%; min-height:36px; padding:6px 0; color:var(--text-muted); cursor:pointer; list-style:none; }
.message-sources>summary::-webkit-details-marker { display:none; }
.message-sources>summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.message-sources>summary svg { width:13px; height:13px; transition:transform .15s; }
.message-sources[open]>summary svg { transform:rotate(180deg); }
.source-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#ffffff09; color:var(--text-main); font-size:10px; }
.message-body .source-list { list-style:none; margin:3px 0 0; padding:0; }
.source-list>li+li { border-top:1px solid #ffffff08; }
.message-body .source-link { display:flex; align-items:flex-start; gap:7px; min-width:0; min-height:44px; padding:7px 0; color:var(--text-main); text-decoration:none; }
.source-link:hover .source-title { color:var(--neon-cyan); text-decoration:underline; text-underline-offset:3px; }
.source-number { flex:0 0 auto; white-space:nowrap; font-size:10px; color:var(--text-muted); padding-top:2px; }
.source-text { flex:1; min-width:0; }
.source-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-size:12px; line-height:1.4; }
.source-domain { display:block; margin-top:2px; font-size:10px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-arrow { flex:0 0 auto; color:var(--text-muted); font-size:13px; }
.sheet { background:rgba(18,20,29,.98); border-color:#ffffff14; box-shadow:0 20px 80px #0008; }
.sheet h2 { font-weight:700; }
.sheet::backdrop { background:#05060ac4; }
.sheet-handle { background:#414354; }
.attachment-options { display:grid; gap:8px; }
.attachment-option { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:12px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-bg); text-align:left; }
.attachment-option:hover { background:#00d4ff0d; border-color:#00d4ff33; }
.attachment-option>[data-icon] { color:var(--accent); }
.attachment-option>[data-icon]>svg { width:23px; height:23px; }
.attachment-option strong { display:block; font-size:13px; font-weight:600; }
.attachment-option small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.search-field,.key-input { background:var(--bg-color); border-color:#ffffff17; }
.filter-tabs button.active { color:var(--neon-cyan); background:#00d4ff14; }
.model-option:hover { background:#ffffff05; }
.model-option.selected { background:linear-gradient(135deg,#00d4ff12,#d45ed012); border-color:#00d4ff33; }
.model-option .selected-check { color:var(--neon-cyan); }
.model-option { display:grid; grid-template-columns:28px minmax(0,1fr) auto 16px; column-gap:10px; }
.model-option .model-copy { min-width:0; }
.model-option strong { overflow-wrap:anywhere; line-height:1.4; }
.model-option small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.5; }
.model-option .price { display:flex; flex-direction:column; align-items:flex-end; gap:5px; margin-left:0; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.price-values { display:flex; align-items:baseline; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.model-option .price-original { font-size:10px; color:var(--text-muted); text-decoration-thickness:1px; }
.model-option .has-discount .price-current { color:#adf0c1; font-weight:650; }
.model-discount { display:inline-flex; align-items:center; justify-content:center; padding:2px 6px; border:1px solid #7ae5a12b; border-radius:5px; background:#5dda8a14; color:#96edb3; font-size:10px; font-weight:650; line-height:1.4; }
.history-row,.settings-footer { border-color:var(--glass-border); }
.account-card { background:var(--glass-bg); border-color:var(--glass-border); }
.avatar { background:linear-gradient(135deg,#00d4ff22,#d45ed022); color:var(--neon-cyan); }
.balance-card { background:linear-gradient(135deg,#00d4ff12,#d45ed012); border-color:#00d4ff26; }
.balance-card strong { color:var(--neon-cyan); }
.secondary-button { background:#ffffff05; border-color:#ffffff17; }
.destructive,.destructive:hover { background:#c84364; color:#fff; }
.toast { background:#202233; border-color:#ffffff20; }
.table-scroll th { background:#191b2b; }
.attachment { border-color:#ffffff17; }
.attachment.file { background:#191b2b; }
.image-copy { background:#0a0b12c9; color:#fff; border:1px solid #ffffff20; }
.image-save-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:14px auto 0; }
.image-save-actions>button { width:auto; min-height:42px; margin:0; }
#image-save-status { margin:10px auto 0; max-width:500px; text-align:center; font-size:12px; line-height:1.5; color:var(--text-muted); }
.motion-paused .orb { animation-play-state:paused; }
.browser-login { max-width:360px; margin:24px auto; padding:20px; border:1px solid #ffffff18; border-radius:16px; background:#11131dcc; }
.browser-login a { color:var(--accent); font-size:12px; text-decoration:none; }
.browser-login .field-note { margin-bottom:12px; }
.awaiting-login .composer-area,.awaiting-login .suggestions,.awaiting-login .welcome-foot { display:none; }
.settings-heading { font-size:15px; font-weight:600; margin:0 0 10px; }
#saved-keys { margin-bottom:20px; }
.key-row { display:flex; align-items:center; gap:8px; margin:8px 0; border:1px solid #ffffff16; border-radius:12px; padding:5px; }
.key-row.selected { border-color:var(--accent); background:#00c8ed0b; }
.key-choice { background:transparent; color:inherit; text-align:left; flex:1; min-width:0; padding:9px; }
.key-choice strong { display:block; overflow-wrap:anywhere; font-size:13px; }
.key-choice small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
#key-form { margin-top:20px; } #key-form .field-label { margin-top:15px; }
.storage-card { margin-top:24px; padding-top:20px; border-top:1px solid #ffffff16; }
.storage-card progress { appearance:none; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; background:#ffffff12; accent-color:var(--accent); }
.storage-card progress::-webkit-progress-bar { background:#ffffff12; border-radius:8px; }
.storage-card progress::-webkit-progress-value { background:var(--accent-gradient); border-radius:8px; }
.storage-card progress::-moz-progress-bar { background:var(--accent-gradient); border-radius:8px; }
#current-key { color:var(--accent); background:transparent; font-size:inherit; max-width:45%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0; }
.composer-caption { gap:10px; }
.zoom-settings { margin-top:24px; padding-top:20px; border-top:1px solid var(--glass-border); }
.zoom-controls { display:flex; gap:8px; }
.zoom-controls>.secondary-button { width:auto; min-width:40px; margin:0; padding:7px 12px; }
#zoom-reset { min-width:72px; font-variant-numeric:tabular-nums; }
/* Native overlay insets stay the same physical size when the page is zoomed. */
:root {
  --screen-top:calc(max(var(--top-inset,0px),env(safe-area-inset-top,0px)) / var(--viewport-scale,1));
  --screen-right:calc(max(var(--right-inset,0px),env(safe-area-inset-right,0px)) / var(--viewport-scale,1));
  --screen-bottom:calc(max(var(--bottom-inset,0px),env(safe-area-inset-bottom,0px)) / var(--viewport-scale,1));
  --screen-left:calc(max(var(--left-inset,0px),env(safe-area-inset-left,0px)) / var(--viewport-scale,1));
  --usable-height:calc(var(--app-height,100dvh) - var(--screen-top) - var(--screen-bottom));
}
.app-shell { padding:var(--screen-top) var(--screen-right) var(--screen-bottom) var(--screen-left); }
/* The system gesture area is outside the composer, but needs the same opaque floor. */
.app-shell::after { content:""; position:absolute; inset:auto 0 0; height:var(--screen-bottom); background:var(--bg-color); pointer-events:none; }
.topbar { height:81px; padding-top:0; }
.composer-area { padding-bottom:13px; }
.sheet,.image-dialog {
  position:fixed;
  top:calc(var(--app-top,0px) + var(--screen-top) + 12px);
  bottom:calc(var(--app-bottom,0px) + var(--screen-bottom) + 12px);
  left:calc(var(--app-left,0px) + var(--screen-left));
  right:calc(var(--app-right,0px) + var(--screen-right));
}
.sheet {
  width:calc(var(--app-width,100%) - 28px - var(--screen-left) - var(--screen-right));
  max-height:min(85dvh,720px,calc(var(--usable-height) - 24px));
}
.image-dialog {
  width:min(950px,calc(var(--app-width,100%) - var(--screen-left) - var(--screen-right)));
  max-height:calc(var(--usable-height) - 24px);
}
.image-dialog>img { max-height:min(75dvh,calc(var(--usable-height) - 140px)); }
.toast {
  left:calc(var(--app-left,0px) + var(--app-width,100vw) / 2);
  bottom:calc(var(--app-bottom,0px) + var(--screen-bottom) + min(145px,var(--usable-height) / 2));
  max-width:calc(var(--app-width,100vw) - 30px);
}
@media(max-width:640px) {
  .brand { font-size:14px; letter-spacing:3px; gap:7px; }
  .brand>img { width:22px; height:27px; }
  .lite-label { font-size:7px; letter-spacing:1px; padding:2px 4px; }
  .topbar { height:66px; padding-inline:10px; gap:7px; }
  .topbar>.icon-btn { width:32px; height:32px; }
  .composer-area { padding-bottom:10px; }
  .sheet {
    top:auto; bottom:calc(var(--app-bottom,0px) + var(--screen-bottom)); padding-bottom:23px;
    width:calc(var(--app-width,100%) - var(--screen-left) - var(--screen-right));
    max-height:min(88dvh,calc(var(--usable-height) - 12px));
  }
  .history-sheet { border:0; outline:none; box-shadow:none; }
  .history-sheet button:focus-visible,.history-sheet a:focus-visible { outline:none; }
  .history-sheet button,.history-sheet button:hover { box-shadow:none; filter:none; }
  .history-sheet .icon-btn:hover { background:transparent; }
  .history-sheet .search-field { border-color:transparent; }
  .orb { opacity:.23; animation:none; }
  .orb-1 { left:-300px; top:-200px; }
  .orb-2 { right:-290px; }
  .welcome { padding-top:12px; }
  .welcome-symbol { width:72px; height:90px; margin-bottom:12px; }
  .welcome-symbol img { width:72px; height:90px; }
  .welcome h1 { font-size:34px; margin:16px 0 12px; }
  .suggestions { margin:18px auto 12px; }
  .welcome>.eyebrow { font-size:10px; padding:5px 12px; }
  .message.assistant { padding:10px 12px; }
}
@media(max-width:400px) {
  .has-fullscreen-toggle .brand>img,.has-fullscreen-toggle .lite-label { display:none; }
  .suggestion { display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px 7px; padding:10px; align-content:start; align-items:center; }
  .suggestion>span:not(.suggestion-icon):not(.suggestion-arrow) { display:contents; }
  .suggestion .suggestion-icon { width:22px; height:22px; border-radius:6px; }
  .suggestion .suggestion-icon svg { width:15px; height:15px; }
  .suggestion strong { margin:0; font-size:11px; line-height:1.35; }
  .suggestion small { grid-column:1 / -1; margin:0; font-size:10px; line-height:1.45; }
}
@media(max-width:355px) {
  .lite-label { display:none; }
  .welcome h1 { font-size:31px; }
}
/* Media queries retain the unzoomed width during pinch; these use the visible width. */
.viewport-narrow.has-fullscreen-toggle .brand>img,.viewport-narrow.has-fullscreen-toggle .lite-label { display:none; }
.viewport-tight .topbar { padding-inline:6px; gap:4px; }
.viewport-tight .brand { display:block; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; letter-spacing:1px; }
.viewport-tight .brand>img,.viewport-tight .lite-label { display:none; }
.viewport-tiny .brand { display:none; }
.viewport-tight .balance-pill { min-width:0; max-width:80px; padding-inline:6px; }
.viewport-tight #balance { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewport-tight .conversation { padding-inline:12px; }
.viewport-tight .welcome h1 { font-size:30px; overflow-wrap:anywhere; }
.viewport-tight .suggestions { grid-template-columns:minmax(0,1fr); }
.viewport-tight .welcome>.eyebrow { max-width:100%; padding-inline:8px; }
.viewport-tight .composer-area { padding-inline:8px; }
.viewport-tight .composer-tools { gap:5px; padding-inline:7px; }
.viewport-tight .model-button { gap:4px; padding-inline:5px; }
.viewport-tight .composer.needs-key .model-button img { display:none; }
.viewport-tight .composer-caption { flex-wrap:wrap; gap:2px; }
.viewport-tight #current-key { max-width:100%; }
.viewport-short .topbar { height:44px; }
.viewport-short .composer-caption { display:none; }
.viewport-short .composer textarea { min-height:36px; max-height:min(100px,calc(var(--usable-height) * .25)); }
.viewport-short .attachments { max-height:60px; overflow-y:auto; }

/* One-line composer while reading; keep the actual draft and Send/Stop control. */
.composer-area.is-mobile .composer textarea { font-size:16px; }
.composer-area.is-mobile .composer-caption { display:none; }
.composer-area.is-mobile .composer-tools { gap:6px; }
.composer-area.is-mobile #composer-collapse { width:32px; height:36px; flex-shrink:0; }
.composer-area.is-mobile .model-button { max-width:min(200px,calc(100% - 128px)); }
.composer-area.is-mobile .attachments { max-height:76px; overflow-y:auto; }
.composer-area.is-compact { padding-top:6px; padding-bottom:8px; }
.composer-area.is-compact::before { top:-18px; }
.composer-area.is-compact .composer {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center;
  gap:3px; padding:4px 6px; border-radius:17px;
}
.composer-area.is-compact .composer-tools { display:contents; }
.composer-area.is-compact .composer textarea {
  grid-column:2; grid-row:1; min-height:44px; height:44px; max-height:44px;
  padding:10px 3px; line-height:24px; white-space:nowrap; overflow:hidden;
}
.composer-area.is-compact .attach-button { grid-column:1; grid-row:1; width:36px; height:44px; position:relative; }
.composer-area.is-compact .attach-button[data-count]:not([data-count=""])::after {
  content:attr(data-count); position:absolute; right:0; top:0; min-width:16px; height:16px;
  border-radius:8px; background:var(--bg-secondary); color:var(--neon-cyan); font-size:10px;
}
.composer-area.is-compact #send { grid-column:3; grid-row:1; width:36px; height:36px; }
.composer-area.is-compact #send.needs-key { width:auto; }
.composer-area.is-compact .model-button,.composer-area.is-compact .composer-tools>.top-spacer,
.composer-area.is-compact .attachments { display:none; }
.composer-area.is-compact .scroll-bottom { width:32px; height:32px; top:-38px; right:calc(50% - 16px); }