/* v21: progressive, touch-friendly layout; no device/user-agent lockout. */
:root { --visual-height: 100vh; --topbar-height: 76px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.app { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.layout > *, .row > *, .cardHeader > *, .setting > *, .grid2 > *, .statGrid > *, .msg > * { min-width: 0; }
.card, .bubble, .fact, .dependencyHero, .footer, .depRow > * { overflow-wrap: anywhere; }
button, .tab, .btn.small, .hint, summary { min-height: 44px; }
button { max-width: 100%; }
.switch { width: 50px; height: 44px; padding: 3px; }
.switch i { width: 21px; height: 21px; }
.switch.on i { transform: translateX(23px); }
.input, textarea, select { font-size: 16px; min-height: 44px; min-width: 0; }
input[type=range] { min-height: 44px; }
input[type=time], input[type=number] { max-width: 100%; }
.topbar { gap: 10px; flex-wrap: wrap; }
.topActions { max-width: 100%; flex-wrap: wrap; overflow: visible; }
.topActions .btn, .topActions .btn span { display: inline-flex; }
.topActions .chip { font-size: 11px; }
.topActions .chip span:last-child { display: inline; }
.tabs { top: var(--topbar-height); scroll-padding-inline: 10px; }
.cardHeader, .chatHead { flex-wrap: wrap; }
.chatShell { grid-template-rows: auto minmax(100px, 1fr) auto; padding: 0; }
.messages { min-height: 0; }
.composerRow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#chatInput { grid-column: 1 / -1; }
#sendBtn { grid-column: auto; }
.composerRow .btn { white-space: normal; }
.chatInput { scroll-margin-block: 120px 30px; }
.memoryToolbar { grid-template-columns: minmax(0, 1fr) auto; }
.dependencyLegend { flex-wrap: wrap; }
.depRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.depRow.header { display: none; }
.depRow .depFeature, .depRow > :last-child { grid-column: 1 / -1; }
.depRow [data-label]::before { content: attr(data-label) " · "; font-size: .7rem; color: var(--muted); }
.panel:not(#chat) .card { content-visibility: visible; }
.availabilityRow { grid-template-columns: minmax(0, 1fr) minmax(46px, 70px) minmax(50px, 76px); font-size: 12px; overflow-wrap: anywhere; }
.modalBackdrop { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.modal { max-height: calc(var(--visual-height) - 24px); overscroll-behavior: contain; }
.toast { bottom: max(16px, env(safe-area-inset-bottom)); }
.skipLink { position: fixed; left: 12px; top: -100px; z-index: 120; padding: 12px; background: var(--text); color: var(--bg); }
.skipLink:focus { top: 12px; }
.platformStatus { padding: 12px; border: 1px solid var(--line); border-radius: 12px; line-height: 1.55; margin: 10px 0; }
.platformWarning { color: var(--warn); }
.platformActions { margin-block: 12px; }
.platformHelp { font-size: 13px; line-height: 1.6; color: var(--muted); }
.platformHelp a { color: var(--accent2); }
.platformHelp code { overflow-wrap: anywhere; }
#transferText { min-height: 150px; font-size: 14px; resize: vertical; margin-top: 8px; }
[hidden] { display: none !important; }
@supports (height: 100dvh) { :root { --visual-height: 100dvh; } }
@media (max-width: 1280px) {
  .layout { grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); }
  .right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .settingsGrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .center { order: 0; }
  .portraitCard { order: 1; height: 240px; min-height: 0; position: relative; top: auto; }
  .right { order: 2; grid-column: auto; }
  .chatShell { height: calc(var(--visual-height) - var(--topbar-height) - 100px); min-height: 310px; }
  .brand strong { font-size: 11px; letter-spacing: .09em; }
  .brand span { display: none; }
  .tabs { margin: 0; padding-inline: 0; }
  .topbar { padding-top: 6px; min-height: 0; }
  .portraitInfo h1 { font-size: 34px; }
}
@media (max-width: 620px) {
  .brand, .topActions { flex-basis: 100%; }
  .topActions { justify-content: flex-start; gap: 6px; }
  .topActions .chip { display: none; }
  .topActions .btn { flex: 1; font-size: 12px; }
  .brand .logo { width: 28px; height: 28px; flex: 0 0 auto; }
  .brand strong { letter-spacing: .055em; }
  .right { grid-template-columns: minmax(0, 1fr); }
  .composerRow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .composerRow .btn { font-size: 12px; padding: 7px 5px; }
  #sendBtn { grid-column: 3; grid-row: 2; }
  #micBtn { grid-column: 1; grid-row: 2; }
  #voiceToggleBtn { grid-column: 2; grid-row: 2; }
  #stopGenerationBtn { grid-column: 1 / -1; }
  .chatComposer { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .chatHead { padding: 10px; }
  .chatShell { border-radius: 16px; }
  .memoryToolbar { grid-template-columns: minmax(0, 1fr); }
  .depRow, .grid2, .settingsGrid { grid-template-columns: minmax(0, 1fr); }
  .dependencyActions { justify-content: flex-start; }
  .setting { gap: 8px; }
}
@media (max-height: 500px) and (max-width: 1000px) {
  .topbar { position: static; }
  .tabs { position: static; }
  .chatShell { height: auto; min-height: 300px; }
  .messages { max-height: 42vh; min-height: 110px; }
  .composerHints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html, .messages { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .btn, .tab, .bubble, .switch { border: 1px solid ButtonText; }
  .tab.active, .switch.on { outline: 2px solid Highlight; }
}