:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #f4f6f8;
  --panel: rgba(8, 13, 23, .92);
  --panel-soft: rgba(65, 65, 25, .05);
  --border: rgba(255, 255, 255, .1);
  --muted: #9ca3af;
  --accent: #2563eb;
  --accent-2: #4ade80;
  --indigo: #4f46e5;
  --gold: #e0bb43;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { font-size: 20px; }
body { overflow: hidden; background: linear-gradient(to bottom right, #000, #1e3a8a) fixed; }
button, textarea { font: inherit; }
button { color: inherit; }

.app-shell { display: grid; grid-template-columns: 390px 1fr; height: 100dvh; background: transparent; }
.sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; padding: 28px 23px; background: linear-gradient(180deg, rgba(0,0,0,.84), rgba(6,15,36,.74)); border-right: 1px solid var(--border); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 16px; padding: 6px 11px 30px; }
.brand-mark, .welcome-mark { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #5b9df6); box-shadow: 0 10px 35px rgba(116, 107, 238, .22); font-weight: 750; }
.brand-mark { width: 54px; height: 54px; border-radius: 17px; font-size: 22px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 20px; letter-spacing: .01em; }
.brand span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.new-chat { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-soft); cursor: pointer; transition: .2s ease; }
.new-chat:hover { border-color: rgba(139,124,246,.48); background: #1b1f2a; }
.new-chat span { color: #bcb3ff; font-size: 27px; }
.history-label { margin: 34px 12px 14px; color: #687182; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.history { flex: 1; min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; }
.history-item { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 5px; padding: 15px 14px; border: 0; border-radius: 13px; background: transparent; color: #b9c0cc; text-align: left; cursor: pointer; }
.history-item:hover, .history-item.active { background: #181c25; color: #fff; }
.history-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.history-item .delete { display: none; padding: 2px 4px; border: 0; background: transparent; color: #747d8d; cursor: pointer; }
.history-item:hover .delete { display: block; }
.sidebar-footer { display: flex; align-items: center; gap: 12px; padding: 17px 9px 4px; border-top: 1px solid var(--border); }
.privacy-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px rgba(86,214,177,.65); }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { font-size: 15px; }
.sidebar-footer span { margin-top: 5px; color: var(--muted); font-size: 13px; }

.chat-panel { display: grid; grid-template-rows: 92px minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 50% -25%, rgba(102,84,207,.12), transparent 42%), #10131a; }
.topbar { display: flex; align-items: center; padding: 0 40px; border-bottom: 1px solid var(--border); background: rgba(16,19,26,.8); backdrop-filter: blur(16px); }
.topbar-controls { display: flex; align-items: center; min-width: 0; margin-left: auto; }
.menu-button { display: none; margin-right: 12px; border: 0; background: transparent; cursor: pointer; }
.model-title strong, .model-title span { display: block; }
.model-title strong { font-size: 19px; }
.model-title span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.inference-counter { --hud-cyan: #00f7ff; --hud-cyan-soft: rgba(0,247,255,.25); position: relative; display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; margin-left: 16px; border-radius: 50%; filter: drop-shadow(0 0 8px rgba(0,247,255,.22)); }
.inference-ring { position: absolute; display: block; border: 1px solid var(--hud-cyan-soft); border-radius: 50%; pointer-events: none; }
.inference-ring.ring-outer { inset: 0; border-top-color: var(--hud-cyan); border-right-color: transparent; animation: hud-spin 8s linear infinite; }
.inference-ring.ring-middle { inset: 6px; border-bottom-color: transparent; border-left-color: var(--hud-cyan); animation: hud-spin-reverse 5s linear infinite; }
.inference-ring.ring-inner { inset: 12px; border-top-color: transparent; border-bottom-color: var(--hud-cyan); animation: hud-spin 3.6s linear infinite; }
.inference-counter strong { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--hud-cyan); border-radius: 50%; background: radial-gradient(circle, rgba(0,247,255,.32) 0%, rgba(0,247,255,.1) 48%, rgba(0,247,255,.02) 70%, transparent 74%); box-shadow: 0 0 8px var(--hud-cyan), 0 0 20px rgba(0,247,255,.48), inset 0 0 12px rgba(0,247,255,.55); color: #eaffff; font-size: 12px; line-height: 1; text-shadow: 0 0 7px var(--hud-cyan); animation: hud-pulse 2s ease-in-out infinite; }
@keyframes hud-spin { to { transform: rotate(360deg); } }
@keyframes hud-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes hud-pulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
.reasoning-selector { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 6px 7px 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: rgba(8,13,23,.7); transition: opacity .2s ease; }
.reasoning-selector > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.reasoning-switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 164px; padding: 3px; border: 1px solid rgba(224,187,67,.28); border-radius: 999px; background: rgba(2,6,15,.76); isolation: isolate; }
.reasoning-switch::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border: 1px solid rgba(245,214,105,.65); border-radius: 999px; background: linear-gradient(135deg, rgba(224,187,67,.3), rgba(79,124,255,.22)); box-shadow: 0 0 13px rgba(224,187,67,.18); transition: transform .22s ease; }
.reasoning-switch[data-mode="medium"]::before { transform: translateX(100%); }
.reasoning-switch[data-mode="strong"]::before { transform: translateX(200%); }
.reasoning-option { min-width: 0; padding: 6px 5px; border: 0; border-radius: 999px; background: transparent; color: #8e96a5; font-size: 11px; font-weight: 750; cursor: pointer; transition: color .2s ease; }
.reasoning-option::after { content: attr(data-label); }
.reasoning-option[aria-checked="true"] { color: #fff1ae; text-shadow: 0 0 8px rgba(224,187,67,.42); }
.reasoning-option:focus-visible { outline: 2px solid #e0bb43; outline-offset: 2px; }
.reasoning-selector.disabled { opacity: .42; }
.reasoning-selector.disabled .reasoning-option { cursor: not-allowed; }
.engine-selector { display: flex; align-items: center; gap: 10px; margin-left: 10px; padding: 7px 9px 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(8,13,23,.7); }
.engine-selector > span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.engine-selector > strong { min-width: 118px; padding: 7px 12px; border: 1px solid rgba(79,124,255,.35); border-radius: 999px; background: #111a30; color: #f4f6f8; font-size: 14px; text-align: center; }
.engine-selector select { min-width: 150px; padding: 7px 30px 7px 11px; border: 1px solid rgba(79,124,255,.35); border-radius: 999px; outline: 0; background: #111a30; color: #f4f6f8; font-size: 14px; font-weight: 700; cursor: pointer; }
.engine-selector select:focus { border-color: #4f7cff; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.status { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 15px; border: 1px solid var(--border); border-radius: 999px; color: #9ca4b3; font-size: 14px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #f2b84b; }
.status.ready i { background: var(--accent-2); box-shadow: 0 0 10px rgba(86,214,177,.7); }
.status.error i { background: #ef6b73; }

.messages { min-height: 0; overflow-y: scroll; padding: 44px max(32px, calc((100% - 1120px) / 2)) 130px; scroll-behavior: smooth; scrollbar-gutter: stable; }

.history,
.messages {
  scrollbar-width: auto;
  scrollbar-color: rgba(139, 124, 246, .72) rgba(255, 255, 255, .05);
}

.history::-webkit-scrollbar,
.messages::-webkit-scrollbar {
  width: 13px;
}

.history::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
}

.history::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), #5b9df6) padding-box;
}

.history::-webkit-scrollbar-thumb:hover,
.messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a89cff, #72afff) padding-box;
}
.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; text-align: center; }
.welcome-mark { width: 80px; height: 80px; margin-bottom: 30px; border-radius: 24px; font-size: 31px; }
.welcome h1 { margin: 0; font-size: clamp(44px, 5vw, 62px); letter-spacing: -.035em; }
.welcome > p { max-width: 760px; margin: 18px 0 42px; color: var(--muted); font-size: 20px; line-height: 1.65; }
.suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: min(100%, 1080px); }
.suggestions button { min-height: 120px; padding: 22px; border: 1px solid var(--border); border-radius: 19px; background: rgba(24,28,37,.66); color: #aeb5c2; font-size: 17px; line-height: 1.5; text-align: left; cursor: pointer; transition: .2s ease; }
.suggestions button:hover { transform: translateY(-2px); border-color: rgba(139,124,246,.4); color: white; background: #1b1f2a; }
.message { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto 42px; }
.avatar { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 15px; background: #222734; color: #d7dce5; font-size: 15px; font-weight: 750; }
.message.assistant .avatar { background: linear-gradient(135deg, var(--accent), #5b9df6); color: white; }
.message-body { min-width: 0; padding-top: 6px; color: #dce0e8; font-size: 21px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .message-body { color: #f6f7f9; }
.message-body .message-strong { color: #f7f9ff; font-weight: 800; }
.message-link { color: #8eb8ff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(142,184,255,.48); text-underline-offset: 3px; }
.message-link:hover { color: #c7dcff; text-decoration-color: currentColor; }
.message-link:focus-visible { border-radius: 3px; outline: 3px solid rgba(79,124,255,.3); outline-offset: 3px; }
.market-snapshot { width: min(100%, 960px); margin: 18px 0 4px; overflow: hidden; border: 1px solid rgba(221,178,61,.38); border-radius: 14px; background: rgba(3,8,18,.72); }
.market-snapshot img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #050914; }
.market-snapshot figcaption { padding: 9px 12px; color: #d8bd62; font-size: 12px; letter-spacing: .02em; }
.ea-download-row { margin-top: 18px; }
.ea-download { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(224,187,67,.55); border-radius: 10px; background: rgba(224,187,67,.1); color: #f1d56c; font-size: 16px; font-weight: 750; letter-spacing: .01em; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.ea-download:hover { border-color: #e0bb43; background: rgba(224,187,67,.18); transform: translateY(-1px); }
.ea-download:focus-visible { outline: 3px solid rgba(224,187,67,.28); outline-offset: 3px; }
.typing::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: #aaa1ff; animation: blink .85s infinite; }
.workflow-status { color: #d9c774; font-size: 17px; font-weight: 650; letter-spacing: .02em; }
.workflow-status::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 11px; border: 2px solid rgba(224,187,67,.28); border-top-color: #e0bb43; border-radius: 50%; animation: workflow-spin .8s linear infinite; }
@keyframes blink { 50% { opacity: .15; } }
@keyframes workflow-spin { to { transform: rotate(360deg); } }

.composer-wrap { padding: 22px max(32px, calc((100% - 1120px) / 2)) 27px; background: linear-gradient(transparent, #10131a 26%); }
.document-shelf { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; max-width: 1120px; margin: 0 auto 12px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 16px; background: rgba(23,27,36,.96); }
.document-shelf[hidden] { display: none; }
.document-shelf-title { align-self: center; }
.document-shelf-title strong, .document-shelf-title span { display: block; }
.document-shelf-title strong { font-size: 14px; }
.document-shelf-title span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.document-list { display: grid; gap: 8px; min-width: 0; }
.document-item { min-width: 0; }
.document-summary { display: flex; align-items: center; gap: 10px; }
.document-summary strong { min-width: 0; overflow: hidden; color: #d8dde6; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.document-summary span { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.document-delete { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(239,107,115,.2); border-radius: 7px; background: rgba(239,107,115,.08); color: #ff9ba2; font-size: 18px; line-height: 1; cursor: pointer; }
.document-delete:hover { border-color: rgba(239,107,115,.5); background: rgba(239,107,115,.16); }
.document-delete:disabled { opacity: .35; cursor: not-allowed; }
.document-item.ready .document-summary span { color: var(--accent-2); }
.document-item.error .document-summary span { color: #ff9ba2; }
.document-progress { height: 3px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.document-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #5b9df6); transition: width .3s ease; }
.document-item.ready .document-progress i { background: var(--accent-2); }
.document-item.error .document-progress i { background: #ef6b73; }
.attachment-status { display: flex; align-items: center; gap: 11px; max-width: 1120px; margin: 0 auto 12px; padding: 11px 15px; border: 1px solid var(--border); border-radius: 15px; background: #171b24; color: #cbd1dc; font-size: 14px; }
.attachment-status[hidden] { display: none; }
.attachment-status.uploading { border-color: rgba(139,124,246,.4); }
.attachment-status.ready { border-color: rgba(86,214,177,.38); }
.attachment-status.error { border-color: rgba(239,107,115,.4); }
.attachment-icon { display: grid; place-items: center; min-width: 42px; height: 30px; border-radius: 9px; background: rgba(239,107,115,.14); color: #ff9ba2; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-state { margin-left: auto; color: var(--muted); white-space: nowrap; }
.composer { display: flex; align-items: flex-end; gap: 15px; max-width: 1120px; margin: 0 auto; padding: 16px 16px 16px 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: #1a1e27; box-shadow: 0 18px 55px rgba(0,0,0,.25); }
.composer:focus-within { border-color: rgba(139,124,246,.58); box-shadow: 0 18px 60px rgba(0,0,0,.3), 0 0 0 3px rgba(139,124,246,.07); }
.attach-button { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #242936; color: #d7d3ff; font-size: 32px; line-height: 1; cursor: pointer; transition: .2s ease; }
.attach-button:hover { border-color: rgba(139,124,246,.55); background: #2b3040; color: white; transform: translateY(-1px); }
.attach-button:disabled { opacity: .5; cursor: wait; transform: none; }
textarea { flex: 1; max-height: 220px; padding: 10px 0; border: 0; outline: 0; resize: none; background: transparent; color: #f4f5f7; font-size: 21px; line-height: 1.5; }
textarea::placeholder { color: #717989; }
.send-button { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 17px; background: linear-gradient(135deg, var(--accent), #6d8ef6); color: white; font-size: 28px; cursor: pointer; }
.send-button:disabled { background: #343947; color: #6f7787; cursor: not-allowed; }
.stop-button { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: #f5f7fb; color: #111827; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.send-button[hidden], .stop-button[hidden] { display: none !important; }
.stop-button:hover { background: #fff; transform: scale(1.03); }
.stop-button span { display: block; width: 17px; height: 17px; border-radius: 3px; background: currentColor; }
.composer-wrap > p { margin: 13px auto 0; color: #606979; font-size: 14px; text-align: center; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 390px; padding: 12px 15px; border: 1px solid rgba(239,107,115,.28); border-radius: 11px; background: #2b171c; color: #ffbdc1; font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Identidad visual de Horta Capital */
.brand { min-height: 100px; padding: 2px 8px 27px; }
.brand-wordmark { display: block; width: min(100%, 265px); height: auto; }
.new-chat { border-radius: 10px; background: rgba(65,65,25,.05); backdrop-filter: blur(10px); }
.new-chat:hover { border-color: rgba(224,187,67,.5); background: rgba(255,255,255,.07); }
.new-chat span { color: var(--gold); }
.history-item { border-radius: 8px; }
.history-item:hover, .history-item.active { background: rgba(37,99,235,.18); box-shadow: inset 3px 0 0 #4f7cff; }
.privacy-dot { background: var(--accent-2); }
.sidebar-footer { background: rgba(0,0,0,.12); }

.chat-panel { background: radial-gradient(circle at 82% 12%, rgba(37,99,235,.2), transparent 34%); }
.topbar { background: rgba(0,0,0,.26); }
.model-title strong { letter-spacing: -.02em; }
.admin-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-left: 10px; padding: 8px 16px; border: 1px solid rgba(224,187,67,.35); border-radius: 999px; background: rgba(224,187,67,.08); color: #f4d76f; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-decoration: none; transition: .2s ease; }
.admin-link:hover { border-color: rgba(224,187,67,.7); background: rgba(224,187,67,.15); color: #fff0a5; }
.status { background: rgba(65,65,25,.05); backdrop-filter: blur(10px); }
.topbar .status { margin-left: 10px; }

.history,
.messages {
  scrollbar-color: rgba(79, 124, 255, .78) rgba(255, 255, 255, .05);
}
.history::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563eb, #4f46e5) padding-box;
}
.history::-webkit-scrollbar-thumb:hover,
.messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f7cff, #6a60ee) padding-box;
}

.welcome-mark { overflow: hidden; background: rgba(0,0,0,.25); border: 1px solid rgba(224,187,67,.38); box-shadow: 0 14px 48px rgba(0,0,0,.32), 0 0 36px rgba(224,187,67,.08); }
.welcome-mark img { width: 72%; height: 72%; object-fit: contain; }
.welcome h1 { max-width: 900px; font-weight: 800; letter-spacing: -.055em; }
.suggestions button { border-radius: 10px; background: rgba(65,65,25,.05); backdrop-filter: blur(10px); }
.suggestions button:hover { border-color: rgba(79,124,255,.58); background: rgba(37,99,235,.13); }

.message.assistant .avatar { background: rgba(0,0,0,.3); border: 1px solid rgba(224,187,67,.32); }
.avatar img { width: 70%; height: 70%; object-fit: contain; }

.document-shelf,
.attachment-status { border-radius: 10px; background: rgba(8,13,23,.78); backdrop-filter: blur(12px); }
.document-progress i { background: linear-gradient(90deg, #2563eb, #4f46e5); }
.document-item.ready .document-progress i { background: linear-gradient(90deg, #20935c, #4ade80); }
.attachment-icon { background: rgba(224,187,67,.13); color: #f4d76f; }

.composer { border-radius: 14px; background: rgba(8,13,23,.9); backdrop-filter: blur(14px); }
.composer:focus-within { border-color: rgba(79,124,255,.68); box-shadow: 0 18px 60px rgba(0,0,0,.3), 0 0 0 3px rgba(37,99,235,.12); }
.attach-button { border-radius: 10px; background: rgba(255,255,255,.05); color: var(--gold); }
.attach-button:hover { border-color: rgba(224,187,67,.5); background: rgba(224,187,67,.1); }
.send-button { border-radius: 10px; background: linear-gradient(to right, #2563eb, #4f46e5); }
.send-button:disabled { background: rgba(255,255,255,.08); }
.stop-button { border-radius: 10px; }

@media (max-width: 1100px) {
  html { font-size: 17px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: min(88vw, 360px); transform: translateX(-102%); box-shadow: 30px 0 70px rgba(0,0,0,.45); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: block; }
  .topbar { padding: 0 22px; }
  .reasoning-selector > span { display: none; }
  .engine-selector > span { display: none; }
  .engine-selector select { min-width: 135px; }
  .engine-selector > strong { min-width: 112px; }
  .messages { padding-inline: 24px; }
  .composer-wrap { padding-inline: 19px; }
}

@media (max-width: 760px) {
  html { width: 100%; max-width: 100%; overflow: hidden; font-size: 16px; -webkit-text-size-adjust: 100%; }
  body { width: 100%; max-width: 100%; overflow: hidden; }
  .app-shell { width: 100%; max-width: 100%; }
  .chat-panel { width: 100%; max-width: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
  .sidebar { width: min(90vw, 340px); padding: 22px 18px; }
  .topbar {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 42px 28px;
    grid-template-areas:
      "menu title counter status"
      "controls controls controls controls";
    gap: 7px 8px;
    min-width: 0;
    min-height: 104px;
    padding: 9px 14px;
    overflow: hidden;
  }
  .menu-button { grid-area: menu; width: 32px; height: 38px; margin: 0; padding: 0; }
  .model-title { grid-area: title; min-width: 0; }
  .model-title strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .model-title span { margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .inference-counter { grid-area: counter; }
  .topbar .status { grid-area: status; justify-self: end; width: 28px; height: 28px; margin: 0; padding: 0; justify-content: center; }
  .topbar-controls { grid-area: controls; display: flex; width: 100%; min-width: 0; margin: 0; gap: 6px; justify-content: flex-end; }
  .messages { width: 100%; max-width: 100%; padding: 24px 16px 34px; overflow-x: hidden; scrollbar-gutter: auto; }
  .welcome { width: 100%; max-width: 100%; min-height: 100%; padding: 22px 0; overflow: hidden; }
  .suggestions { width: 100%; max-width: 100%; grid-template-columns: 1fr; gap: 10px; }
  .suggestions button { width: 100%; max-width: 100%; min-height: 64px; padding: 15px 16px; font-size: 15px; }
  .welcome-mark { flex: 0 0 auto; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 18px; font-size: 25px; }
  .welcome h1 { width: 100%; max-width: 100%; font-size: clamp(30px, 8.5vw, 38px); line-height: 1.08; overflow-wrap: anywhere; }
  .welcome > p { width: 100%; max-width: 100%; margin: 14px 0 24px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
  .message { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .avatar { width: 36px; height: 36px; }
  .message-body { max-width: 100%; font-size: 17px; }
  .composer-wrap { width: 100%; max-width: 100%; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .composer { width: 100%; max-width: 100%; min-width: 0; gap: 8px; padding: 10px 10px 10px 15px; }
  textarea { min-width: 0; font-size: 16px; }
  .composer-wrap > p { max-width: 100%; margin-top: 8px; padding-inline: 4px; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
  .attach-button { width: 44px; height: 44px; border-radius: 14px; font-size: 27px; }
  .send-button { width: 44px; height: 44px; }
  .stop-button { width: 44px; height: 44px; }
  .stop-button span { width: 15px; height: 15px; }
  .attachment-state { display: none; }
  .document-shelf { grid-template-columns: 1fr; }
  .document-shelf-title span { display: none; }
  .status span { display: none; }
  .inference-counter { flex-basis: 42px; width: 42px; height: 42px; margin-left: 7px; }
  .inference-ring.ring-middle { inset: 5px; }
  .inference-ring.ring-inner { inset: 9px; }
  .inference-counter strong { width: 23px; height: 23px; font-size: 10px; }
  .reasoning-selector { flex: 0 0 auto; margin: 0; padding: 4px; }
  .reasoning-switch { width: 100px; }
  .reasoning-option { padding-inline: 3px; font-size: 10px; }
  .reasoning-option::after { content: attr(data-short); }
  .engine-selector { flex: 0 0 auto; margin: 0; padding: 4px; }
  .engine-selector select { min-width: 0; width: 126px; font-size: 12px; }
  .engine-selector > strong { min-width: 0; width: 105px; padding: 6px 8px; font-size: 11px; }
  .admin-link { flex: 0 0 auto; min-height: 34px; margin: 0; padding: 6px 9px; font-size: 9px; }
  .interaction-link { padding-inline: 7px; }
  .toast { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px; max-width: none; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 10px; }
  .reasoning-switch { width: 92px; }
  .engine-selector > strong { width: 96px; }
  .topbar-controls { gap: 4px; }
  .admin-link { padding-inline: 7px; }
  .welcome h1 { font-size: 29px; }
  .messages { padding-inline: 13px; }
  .composer-wrap { padding-inline: 10px; }
}