:root { color-scheme: light dark; font: 16px Inter, ui-sans-serif, system-ui, sans-serif; --bg:#f4f1ec; --surface:#fffdfa; --surface-muted:#ece8e1; --text:#201e1b; --muted:#77716a; --border:#d8d1c7; --accent:#6557d8; --accent-strong:#4f43bd; --danger:#c53b3b; --shadow:0 18px 50px rgb(43 35 24 / 10%); }
@media (prefers-color-scheme: dark) { :root { --bg:#171615; --surface:#252321; --surface-muted:#302d2a; --text:#f6f1e9; --muted:#b6ada1; --border:#47413b; --accent:#a69afa; --accent-strong:#c0b7ff; --shadow:0 18px 50px rgb(0 0 0 / 28%); } }
:root[data-theme="light"] { color-scheme:light; --bg:#f4f1ec; --surface:#fffdfa; --surface-muted:#ece8e1; --text:#201e1b; --muted:#77716a; --border:#d8d1c7; --accent:#6557d8; --accent-strong:#4f43bd; --shadow:0 18px 50px rgb(43 35 24 / 10%); }
:root[data-theme="dark"] { color-scheme:dark; --bg:#171615; --surface:#252321; --surface-muted:#302d2a; --text:#f6f1e9; --muted:#b6ada1; --border:#47413b; --accent:#a69afa; --accent-strong:#c0b7ff; --shadow:0 18px 50px rgb(0 0 0 / 28%); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x:hidden; background:var(--bg); color:var(--text); }
button, input { font: inherit; }
button { min-height:44px; border:0; border-radius:12px; padding:.7rem 1rem; background:var(--accent); color:#fff; cursor:pointer; font-weight:650; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
button:hover:not(:disabled) { background:var(--accent-strong); transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 24%,transparent); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%, white); outline-offset:2px; }
button:disabled { opacity:.6; cursor:wait; }
.auth-card { width:min(100% - 2rem, 400px); margin:12vh auto; padding:2rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.invite-page h2 { margin-top:1.5rem; }.invite-page small { display:block; margin-top:.35rem; color:var(--muted); }.invite-page button + button { margin-left:.5rem; }
.auth-card h1 { margin-top:0; }
form { display:grid; gap:1rem; }
label { display:grid; gap:.4rem; }
input { width:100%; padding:.7rem; border:1px solid var(--border); border-radius:8px; background:transparent; color:inherit; }
.form-error { color:#dc2626; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { min-height:var(--visual-viewport-height, 100vh); background:radial-gradient(circle at 75% -20%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 34rem), var(--bg); }
.app-shell header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); background:color-mix(in srgb,var(--surface) 78%,transparent); backdrop-filter:blur(18px); }
.app-shell header h1 { margin:0; font-size:1rem; letter-spacing:-.02em; }
.brand-lockup { display:flex; align-items:center; gap:.55rem; }.brand-mark { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:9px; color:#fff; background:linear-gradient(145deg,#7d6ef2,var(--accent-strong)); box-shadow:0 5px 15px color-mix(in srgb,var(--accent) 32%,transparent); }.user-pill { color:var(--muted); font-size:.9rem; }
.nav-toggle { display:none; min-height:36px; padding:.35rem .55rem; color:var(--text); background:transparent; box-shadow:none; }
.app-shell main { width:min(920px,100%); margin:auto; padding:clamp(1rem,4vw,3.5rem) clamp(1rem,4vw,3.5rem); }
.user-pill { text-decoration:none; }.settings-page { width:min(100% - 2rem, 560px); margin:clamp(2rem,10vh,7rem) auto; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }.settings-page > a { color:var(--accent); text-decoration:none; }.settings-page h1 { margin:2rem 0 .35rem; font-size:clamp(2rem,6vw,3.5rem); letter-spacing:-.06em; }.settings-intro { color:var(--muted); }.settings-page label { margin-top:2rem; }.settings-page select { width:100%; margin-top:.5rem; padding:.75rem; border:1px solid var(--border); border-radius:10px; color:inherit; background:var(--surface); }.settings-links { display:grid; gap:.6rem; margin:1.5rem 0; }.settings-links a { padding:.85rem 0; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }.settings-logout { background:transparent; color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border)); }
.pwa-banner { position:fixed; z-index:20; left:50%; bottom:1rem; display:flex; align-items:center; gap:.75rem; width:min(calc(100% - 2rem), 420px); padding:.75rem 1rem; transform:translateX(-50%); border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }.pwa-banner[hidden] { display:none; }.pwa-banner span { flex:1; font-size:.9rem; }.pwa-banner button { min-height:36px; padding:.45rem .7rem; }
.memory-page h2 { margin:2rem 0 .75rem; }.memory-form { margin-top:1.5rem; }.memory-form textarea { width:100%; padding:.7rem; border:1px solid var(--border); border-radius:8px; background:transparent; color:inherit; resize:vertical; }.memory-form label:last-of-type { display:flex; align-items:center; gap:.5rem; }.memory-form label:last-of-type input { width:auto; }.memory-facts { display:grid; gap:.6rem; margin-bottom:1rem; }.memory-fact { display:flex; align-items:center; gap:.5rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); }.memory-fact span { flex:1; min-width:0; overflow-wrap:anywhere; }.memory-fact button { min-height:36px; padding:.45rem .65rem; font-size:.82rem; }.memory-page > button { margin:.35rem .35rem 0 0; }
.security-page h2 { margin:2rem 0 .75rem; }.security-page form { margin-top:1.5rem; }.security-list { display:grid; gap:.5rem; margin:.75rem 0 1rem; }.security-row { display:flex; align-items:center; gap:.6rem; padding:.7rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); }.security-row span { flex:1; overflow-wrap:anywhere; }.security-row button { min-height:36px; padding:.45rem .65rem; font-size:.82rem; }
.dev-blocks-page { width:min(1180px,100% - 2rem); margin:2rem auto; }.dev-blocks-page > a { color:var(--accent); text-decoration:none; }.dev-blocks-page h1 { margin:2rem 0 .35rem; font-size:clamp(2rem,6vw,3.5rem); letter-spacing:-.06em; }.dev-blocks-page > p { color:var(--muted); }.dev-blocks-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }.dev-block-card { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }.dev-block-card h2 { margin:0; font-size:.85rem; color:var(--muted); }.dev-block-card .rich-block { margin-top:.7rem; }
@media (max-width:900px) { .dev-blocks-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .dev-blocks-page { width:calc(100% - 2rem); }.dev-blocks-grid { grid-template-columns:1fr; } }
body[data-offline]::before { content:"Нет соединения. Сообщение не отправлено."; position:fixed; z-index:19; top:0; left:0; right:0; padding:.45rem 1rem; color:#fff; background:var(--danger); text-align:center; font-size:.8rem; }
.app-body { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - 57px); }
.app-body aside { padding:1.5rem 1rem; border-right:1px solid color-mix(in srgb,var(--border) 70%,transparent); background:color-mix(in srgb,var(--surface) 58%,transparent); }
.app-body aside h2 { margin:.1rem 0 .25rem; font-size:1.2rem; letter-spacing:-.03em; }.sidebar-caption { margin:0 0 1.25rem; color:var(--muted); font-size:.8rem; }
.chat-search { width:100%; margin-top:1rem; padding:.65rem .75rem; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 78%,var(--bg)); color:inherit; font-size:.9rem; }.chat-search-empty { padding:.7rem .5rem; color:var(--muted); font-size:.85rem; }
.chat-search-dialog { width:min(calc(100% - 2rem), 560px); padding:0; border:1px solid var(--border); border-radius:18px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }.chat-search-dialog::backdrop { background:rgb(20 16 10 / 45%); backdrop-filter:blur(4px); }.chat-search-dialog form { gap:.6rem; padding:.75rem; }.chat-search-dialog input { margin:0; font-size:1rem; }.chat-search-results { display:grid; gap:.25rem; max-height:50vh; overflow:auto; }.chat-search-results button { min-height:44px; padding:.65rem .75rem; color:var(--text); background:transparent; border-radius:10px; text-align:left; }.chat-search-results button:hover, .chat-search-results button.is-active { color:var(--text); background:var(--surface-muted); transform:none; box-shadow:none; }
.archive-toggle { margin:.55rem 0 0; min-height:36px; padding:.45rem .7rem; color:var(--muted); background:transparent; border:1px solid var(--border); font-size:.82rem; }.archive-toggle:hover { color:var(--text); background:var(--surface-muted); box-shadow:none; transform:none; }.chat-group-label { margin:.9rem .5rem .1rem; color:var(--muted); font-size:.72rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.chat-list { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.4rem; }.chat-row { display:flex; align-items:center; gap:.2rem; min-width:0; }.chat-item { width:100%; text-align:left; background:transparent; color:var(--text); border:1px solid transparent; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }.chat-item:hover { color:var(--text); background:var(--surface-muted); box-shadow:none; transform:none; }.chat-menu { position:relative; flex:0 0 auto; }.chat-menu summary { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:var(--muted); cursor:pointer; list-style:none; }.chat-menu summary::-webkit-details-marker { display:none; }.chat-menu summary:hover { background:var(--surface-muted); }.chat-menu button { display:block; width:100%; min-height:36px; padding:.45rem .7rem; border-radius:7px; color:var(--text); background:var(--surface); text-align:left; font-size:.82rem; font-weight:500; white-space:nowrap; }.chat-menu button:hover { background:var(--surface-muted); color:var(--text); transform:none; box-shadow:none; }.chat-menu[open] { z-index:3; }.chat-menu[open] button:first-of-type { margin-top:.25rem; }.chat-menu[open] { position:relative; }.chat-menu[open]::after { content:""; position:absolute; top:2.2rem; right:0; width:9rem; min-height:7rem; padding:.25rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); z-index:-1; }.message-feed { display:grid; align-content:start; gap:1rem; min-height:200px; max-height:calc(100dvh - 190px); overflow:auto; padding:.25rem; scroll-behavior:smooth; }.message { max-width:min(80%, 680px); padding:1rem 1.1rem; border:1px solid var(--border); border-radius:18px; white-space:pre-wrap; line-height:1.55; box-shadow:0 5px 18px rgb(50 40 25 / 4%); }
.message-user { justify-self:end; background:var(--accent); color:#fff; }
.message-assistant { justify-self:start; background:var(--surface); }
.message-markdown p:first-child { margin-top:0; }.message-markdown p:last-child { margin-bottom:0; }.message-markdown pre { position:relative; overflow:auto; padding:1rem; border-radius:10px; background:var(--surface-muted); }.message-markdown code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.code-copy { display:block; min-height:32px; margin:.6rem 0 0 auto; padding:.35rem .6rem; font-size:.78rem; color:var(--text); background:var(--surface); border:1px solid var(--border); }.provider-note { display:block; margin-top:.7rem; color:var(--muted); font-size:.78rem; }
.message-images { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.65rem; }.message-images img { width:min(220px,100%); max-height:220px; object-fit:cover; border-radius:12px; }.attachment-tray { display:flex; flex:0 0 auto; gap:.4rem; min-height:0; }.attachment-preview { width:48px; height:48px; object-fit:cover; border-radius:9px; border:1px solid var(--border); }.attachment-preview.is-loading { opacity:.45; }.attach-button { min-width:44px; padding:.7rem; color:var(--text); background:var(--surface-muted); }
.message.is-error { border-color:var(--danger); }
.message-retry, .run-stop { background:transparent; color:var(--accent); border:1px solid var(--border); margin-top:.65rem; }
.run-stop { color:var(--danger); }
.voice-button { min-width:44px; padding:.7rem; color:var(--text); background:var(--surface-muted); }.voice-button[data-recording="true"] { color:#fff; background:var(--danger); }
.run-status { flex:1 0 100%; min-height:1.2rem; color:var(--text); font-size:.85rem; }
.empty-state { min-height:calc(100dvh - 150px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; max-width:650px; }.eyebrow { color:var(--accent); font-size:.77rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }.empty-state h2 { max-width:11ch; margin:.7rem 0 .75rem; font-size:clamp(2.5rem,7vw,5.2rem); line-height:.96; letter-spacing:-.075em; }.empty-state-copy { margin:0; max-width:28rem; color:var(--muted); line-height:1.55; }.empty-state-copy + button { align-self:flex-start; margin-top:1.35rem; }.starter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; width:100%; margin-top:3rem; }.starter-card { min-height:76px; padding:.9rem; text-align:left; color:var(--text); background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid var(--border); font-size:.85rem; font-weight:600; }.starter-card:hover { color:var(--text); background:var(--surface); }
.source-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; font-size:.8rem; align-items:center; }
.source-list a { color:var(--accent); border:1px solid var(--border); border-radius:999px; padding:.2rem .5rem; text-decoration:none; max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.document-editor { display:block; width:100%; min-height:12rem; margin:.75rem 0; padding:.75rem; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:.75rem; font:inherit; }
.document-page { width:min(900px,100% - 2rem); margin:2rem auto; }.document-page > a { color:var(--accent); text-decoration:none; }.document-page h1 { margin:1.5rem 0 .5rem; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:-.05em; }.document-page .document-editor { min-height:55dvh; }.document-page .document-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }.document-page .document-actions a { color:var(--accent); padding:.65rem .75rem; }
.document-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.document-actions a { color:var(--accent); }
.document-downloads { display:inline-flex; gap:.35rem; }
.document-conflict { margin:.6rem 0; padding:.65rem .8rem; color:var(--text); background:color-mix(in srgb,var(--danger) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border)); border-radius:.7rem; }
.document-conflict button { margin-left:.35rem; }
.document-status { color:var(--border); font-size:.85rem; }
.rich-block { margin-top:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 80%,var(--bg)); }
.map-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .7rem; margin-bottom:.55rem; color:var(--muted); font-size:.78rem; }.map-count { color:var(--text); font-weight:650; }.map-why { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.map-categories { display:flex; flex-wrap:wrap; gap:.3rem; }.map-category, .map-open { color:var(--accent); background:transparent; border:0; font:inherit; font-size:.76rem; cursor:pointer; text-decoration:none; }.map-category { padding:.2rem .45rem; border:1px solid var(--border); border-radius:999px; }.map-category[aria-pressed="true"] { color:var(--text); background:var(--surface-muted); border-color:var(--accent); }.map-category:hover, .map-open:hover { text-decoration:underline; }.map-frame { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(12rem,.8fr); gap:.7rem; min-height:300px; }.map-canvas { min-height:300px; overflow:hidden; border-radius:12px; background:var(--surface-muted); }.map-list { display:grid; align-content:start; gap:.35rem; max-height:300px; overflow:auto; padding:0; margin:0; list-style:none; }.map-list li { display:grid; gap:.2rem; }.map-list button { width:100%; min-height:40px; padding:.55rem .65rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:9px; text-align:left; font-size:.85rem; }.map-list button:hover, .map-list button.is-selected { color:var(--text); background:var(--surface-muted); transform:none; box-shadow:none; border-color:var(--accent); }.map-route { margin:0 .65rem .25rem; color:var(--accent); font-size:.75rem; text-decoration:none; }.map-route:hover { text-decoration:underline; }.map-sheet-panel { min-width:0; }.map-sheet-handle { display:none; }.map-fallback ul { display:grid; gap:.35rem; padding:0; list-style:none; }.map-fallback li { padding:.55rem .65rem; border:1px solid var(--border); border-radius:9px; }
.map-page { width:min(1180px,100% - 2rem); margin:2rem auto; }.map-page > a { color:var(--accent); text-decoration:none; }.map-page h1 { margin:1.5rem 0 .8rem; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:-.05em; }.map-fullscreen .map-frame { min-height:calc(100dvh - 11rem); }.map-fullscreen .map-canvas { min-height:calc(100dvh - 11rem); }
.rich-map { background:radial-gradient(circle at 20% 30%, color-mix(in srgb,var(--accent) 22%,transparent) 0 2px, transparent 3px), radial-gradient(circle at 70% 65%, color-mix(in srgb,var(--accent) 28%,transparent) 0 2px, transparent 3px), linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface)); background-size:26px 26px,34px 34px,100% 100%; min-height:140px; }.rich-map ul { display:grid; gap:.35rem; padding:.7rem; margin:0; list-style:none; }.rich-map li { padding:.5rem .65rem; border:1px solid color-mix(in srgb,var(--border) 80%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface) 88%,transparent); }
.rich-block h4, .rich-block p { margin:.2rem 0; }
.news-group-title { margin:.85rem 0 .35rem; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }.news-item { display:grid; gap:.25rem; padding:.65rem 0; border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent); }.news-item > a { color:var(--text); font-weight:650; text-decoration:none; }.news-item > a:hover { color:var(--accent); }.news-item small { color:var(--muted); }.news-cluster { width:max-content; padding:.15rem .4rem; color:var(--accent-strong); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; font-size:.72rem; }.news-image { width:96px; height:64px; object-fit:cover; border-radius:8px; }.news-item details { color:var(--muted); font-size:.85rem; }.news-item summary { color:var(--accent); cursor:pointer; }
.rich-block article + article { border-top:1px solid var(--border); margin-top:.5rem; padding-top:.5rem; }
.rich-block table { width:100%; border-collapse:collapse; }
.rich-block th, .rich-block td { padding:.35rem .5rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.table-scroll, .comparison-scroll { max-width:100%; overflow-x:auto; }
.table-scroll { max-height:26rem; overflow-y:auto; }
.table-toolbar { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.table-toolbar button { min-height:32px; padding:.35rem .6rem; }
.table-status { color:var(--muted); font-size:.75rem; }
.table-scroll thead th { position:sticky; top:0; z-index:1; background:var(--surface); }
.table-sort { padding:0; color:inherit; background:transparent; border:0; font:inherit; font-weight:650; text-align:left; cursor:pointer; }
.table-sort::after { content:"↕"; margin-left:.35rem; color:var(--muted); font-size:.75em; }
.table-sort[aria-sort="ascending"]::after { content:"↑"; color:var(--accent); }
.table-sort[aria-sort="descending"]::after { content:"↓"; color:var(--accent); }
.comparison-table { min-width:34rem; }
.comparison-table th:first-child { position:sticky; left:0; z-index:1; background:var(--surface); }
.comparison-table thead th { background:var(--surface-muted); }
.composer { display:flex; gap:.55rem; position:relative; margin-top:2rem; padding:.65rem; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(18px); border:1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.composer::before { content:""; position:absolute; inset:0; padding:1px; pointer-events:none; z-index:2; border-radius:inherit; background:conic-gradient(from var(--composer-beam-angle), transparent 0 30%, color-mix(in srgb,var(--accent) 25%,transparent) 39%, color-mix(in srgb,var(--accent) 96%,white) 48% 54%, color-mix(in srgb,var(--accent) 25%,transparent) 63%, transparent 72% 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:0; animation:none; }
.composer::after { content:""; position:absolute; inset:1px; pointer-events:none; z-index:0; border-radius:inherit; background:color-mix(in srgb,var(--surface) 94%,transparent); }
.composer.beam-active::before { opacity:1; animation:composer-beam-spin 3.6s linear infinite; }
.composer > * { position:relative; z-index:1; }
@property --composer-beam-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes composer-beam-spin { to { --composer-beam-angle:360deg; } }
@keyframes orb-pulse { 0%,100% { transform:scale(.75); opacity:.65; } 50% { transform:scale(1.25); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .composer::before { animation:none; } }
.composer textarea { flex:1; min-width:0; max-height:180px; resize:vertical; padding:.85rem .8rem; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface-muted) 58%,transparent); color:inherit; font-size:16px; line-height:1.4; }.composer textarea::placeholder { color:var(--muted); opacity:1; }.composer textarea:focus { outline:0; border-color:var(--accent); background:var(--surface-muted); }.composer button[type=submit] { align-self:flex-end; }
@media (max-width:700px) {
  .app-shell header { padding:calc(.55rem + env(safe-area-inset-top)) 1rem .55rem; }.nav-toggle { display:block; }
  .app-body { position:relative; display:block; min-height:calc(100dvh - 56px); }
  .app-body aside { position:absolute; z-index:5; inset:0 auto 0 0; width:min(84vw,320px); display:block; min-width:0; padding:1rem; border-right:1px solid var(--border); background:var(--surface); box-shadow:18px 0 45px rgb(30 25 20 / 16%); transform:translateX(-105%); transition:transform .2s ease; }
  .app-body.sidebar-open::after { content:""; position:absolute; z-index:4; inset:0; background:rgb(20 16 10 / 30%); }
  .app-body.sidebar-open aside { transform:translateX(0); }.app-body aside h2 { margin:0; font-size:1.15rem; }.sidebar-caption { margin:0 0 1.25rem; }
  .chat-list { display:grid; min-width:0; overflow:visible; gap:.4rem; margin:1.25rem 0 0; padding:0; }.chat-item { min-height:48px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .map-frame { grid-template-columns:1fr; }.map-canvas { min-height:240px; }.map-list { max-height:180px; }.map-fullscreen .map-frame { min-height:0; }.map-fullscreen .map-canvas { min-height:55dvh; }.map-fullscreen .map-list { max-height:28dvh; }
  .map-sheet { position:relative; display:block; height:calc(100dvh - 10rem); min-height:420px; overflow:hidden; }.map-sheet .map-canvas { height:100%; min-height:0; border-radius:14px; }.map-sheet .map-sheet-panel { position:absolute; z-index:2; right:0; bottom:0; left:0; display:flex; flex-direction:column; height:45%; padding:.5rem .7rem calc(.7rem + env(safe-area-inset-bottom)); border:1px solid var(--border); border-radius:18px 18px 0 0; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 -12px 35px rgb(30 25 20 / 18%); transition:height .2s ease; }.map-sheet[data-sheet-position="collapsed"] .map-sheet-panel { height:3.25rem; }.map-sheet[data-sheet-position="expanded"] .map-sheet-panel { height:85%; }.map-sheet-handle { display:block; width:100%; min-height:2.3rem; padding:.5rem; color:var(--text); background:transparent; border:0; font-weight:700; }.map-sheet-handle::before { content:""; display:block; width:2.5rem; height:.22rem; margin:0 auto .35rem; border-radius:99px; background:var(--border); }.map-sheet .map-list { max-height:none; overflow:auto; }.map-sheet .map-sheet-panel + * { min-width:0; }
  .app-body main { width:100%; min-width:0; min-height:0; margin:0; padding:1rem; display:flex; flex-direction:column; }.empty-state { min-height:calc(100dvh - 215px); padding:.6rem 0 1rem; }.empty-state h2 { font-size:clamp(2.8rem,13vw,4.4rem); }.starter-grid { grid-template-columns:1fr; margin-top:2rem; }.starter-card { min-height:52px; }
  .message-feed { flex:1; min-height:0; max-height:none; }
  .composer { width:100%; flex-wrap:wrap; flex-shrink:0; margin-top:auto; margin-inline:0; padding:.65rem .5rem; padding-bottom:calc(.65rem + env(safe-area-inset-bottom)); gap:.5rem; }
  .composer textarea { flex:0 0 100%; height:3.1rem; min-height:3.1rem; max-height:7rem; resize:none; }
  .composer button { flex:0 0 auto; }
}

/* libraries.dev integration: the composer uses the Beam language, while active
   generation uses the restrained Thinking Orb treatment. Effects stay local to
   feedback surfaces so the reading flow remains dense and calm. */
:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-muted: #f0f0ed;
  --text: #202123;
  --muted: #6b6d70;
  --border: #e2e2df;
  --accent: #6d5dfc;
  --accent-strong: #5949e8;
  --shadow: 0 8px 24px rgb(25 25 25 / 7%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #212121;
    --surface: #2f2f2f;
    --surface-muted: #3a3a3a;
    --text: #ececec;
    --muted: #a7a7a7;
    --border: #454545;
    --accent: #a99bff;
    --accent-strong: #b9adff;
    --shadow: 0 10px 28px rgb(0 0 0 / 24%);
  }
}
:root[data-theme="light"] { --bg:#f7f7f5; --surface:#fff; --surface-muted:#f0f0ed; --text:#202123; --muted:#6b6d70; --border:#e2e2df; --accent:#6d5dfc; --accent-strong:#5949e8; --shadow:0 8px 24px rgb(25 25 25 / 7%); }
:root[data-theme="dark"] { --bg:#212121; --surface:#2f2f2f; --surface-muted:#3a3a3a; --text:#ececec; --muted:#a7a7a7; --border:#454545; --accent:#a99bff; --accent-strong:#b9adff; --shadow:0 10px 28px rgb(0 0 0 / 24%); }

body { font-size: .9375rem; letter-spacing: -.005em; }
textarea, select { font: inherit; }
button { min-height: 40px; border-radius: 10px; padding: .55rem .8rem; transition: transform .15s cubic-bezier(.2,0,0,1), background .15s cubic-bezier(.2,0,0,1), box-shadow .15s cubic-bezier(.2,0,0,1); }
button:active:not(:disabled) { transform: scale(.96); }
.app-shell { background: var(--bg); }
.app-shell header { height: 56px; padding: .5rem 1.25rem; border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.app-shell header h1 { font-size: .9rem; font-weight: 650; }
.brand-mark { width: 1.65rem; height: 1.65rem; border-radius: 7px; font-size: .85rem; }
.user-pill { padding: .35rem .55rem; border-radius: 8px; font-size: .82rem; color: var(--muted); }
.user-pill:hover { background: var(--surface-muted); color: var(--text); }
.app-body { grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.app-body aside { padding: 1rem .75rem; border-right-color: var(--border); background: color-mix(in srgb, var(--surface) 68%, var(--bg)); overflow:auto; }
.app-body aside h2 { font-size: .95rem; font-weight: 650; }
.sidebar-caption { margin-bottom: .8rem; font-size: .75rem; }
.app-body main { display:flex; flex-direction:column; height:calc(100dvh - 56px); min-height:0; width: min(860px, 100%); padding: 1rem 1.5rem 1.5rem; }
.chat-search { margin-top: .75rem; padding: .55rem .7rem; border-color: var(--border); border-radius: 9px; background: var(--surface); font-size: .84rem; }
.chat-list { gap: .15rem; margin-top: .9rem; }
.chat-group-label { margin: .8rem .45rem .2rem; font-size: .65rem; letter-spacing: .09em; }
.chat-item { min-height: 38px; padding: .5rem .6rem; border-radius: 8px; font-size: .84rem; }
.chat-item.is-active-run::after { content:""; display:inline-block; width:.42rem; height:.42rem; margin-inline-start:.45rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--accent) 14%,transparent); animation:active-pulse 1.6s ease-in-out infinite; vertical-align:.08em; }
.chat-menu summary { width: 32px; height: 32px; }
.message-feed { flex:1; min-height:0; max-height:none; gap: 1.1rem; padding: .5rem 0 1rem; }
.app-body main > h2 { margin: .15rem 0 1.1rem; color: var(--muted); font-size: .82rem; font-weight: 550; letter-spacing: .01em; }
.message { max-width: min(76%, 700px); padding: .8rem .95rem; border-radius: 14px; line-height: 1.5; box-shadow: none; }
.message-user { border-color: transparent; background: var(--accent); }
.message-assistant { border-color: transparent; background: transparent; }
.message-assistant .rich-block { margin-inline-start: -.1rem; }
.provider-note { margin-top: .55rem; font-size: .72rem; }
.source-list { margin-top: .55rem; gap: .3rem; font-size: .72rem; }
.source-list a { padding: .15rem .42rem; border-radius: 999px; }
.rich-block { margin-top: .65rem; padding: .7rem; border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, var(--bg)); }
.rich-map { min-height: 120px; }
.empty-state { min-height: calc(100dvh - 150px); max-width: 680px; justify-content: center; padding-bottom: 3rem; }
.thinking-orb { position:relative; display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; margin-bottom:.85rem; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 86%,white) 0 16%, color-mix(in srgb,var(--accent) 55%,transparent) 34%, transparent 70%); filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 48%,transparent)); }
.thinking-orb::before, .thinking-orb::after { content:""; position:absolute; inset:.15rem; border:1px solid color-mix(in srgb,var(--accent) 48%,transparent); border-radius:50%; animation:orb-orbit 3.2s linear infinite; }
.thinking-orb::after { inset:.42rem -.2rem; transform:rotate(62deg); opacity:.55; animation-duration:2.4s; animation-direction:reverse; }
.thinking-orb i { position:absolute; width:.25rem; height:.25rem; border-radius:50%; background:var(--accent-strong); transform:rotate(calc(var(--orb-index) * 45deg)) translateY(-1.1rem); opacity:calc(.35 + var(--orb-index) * .08); animation:orb-dot 1.8s ease-in-out infinite; animation-delay:calc(var(--orb-index) * -120ms); }
.thinking-orb-label { position:absolute; left:calc(100% + .65rem); width:max-content; color:var(--muted); font-size:.75rem; font-weight:550; }
.empty-state h2 { max-width: none; margin: .55rem 0 .5rem; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1; }
.empty-state-copy { max-width: 32rem; font-size: .95rem; }
.empty-state-copy + button { margin-top: 1rem; }
.starter-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 2rem; }
.starter-card { min-height: 62px; padding: .72rem; border-radius: 12px; background: var(--surface); font-size: .8rem; }
.composer { display:flex; flex-wrap:wrap; gap: .35rem; margin-top: 1rem; padding: .45rem; border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 26px rgb(0 0 0 / 9%); }
.composer::before { animation-duration:5s; }
.composer textarea { flex:1 0 100%; width:100%; min-height: 40px; padding: .65rem .7rem; line-height: 1.35; }
.composer button { min-height: 38px; }
.attach-button, .voice-button { min-width: 38px; padding: .55rem; }
.voice-cancel { min-height: 38px; padding: .45rem .65rem; color: var(--danger); background: transparent; border: 1px solid color-mix(in srgb,var(--danger) 45%,var(--border)); font-size: .78rem; }
.run-status { min-height: 1rem; font-size: .75rem; }
.activity-stack { flex: 1 0 100%; min-height: 1rem; color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-status:empty, .activity-stack:empty { display:none; }
@keyframes orb-orbit { to { transform:rotate(360deg); } }
@keyframes orb-dot { 50% { opacity:1; transform:rotate(calc(var(--orb-index) * 45deg)) translateY(-1.25rem) scale(1.25); } }
@keyframes active-pulse { 50% { opacity:.45; transform:scale(.78); } }
.settings-page, .auth-card, .dev-block-card { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow); }
.settings-page { border-radius: 18px; padding: 1.5rem; }
.settings-page h1, .dev-blocks-page h1, .document-page h1, .map-page h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); letter-spacing: -.055em; }
.settings-page label { margin-top: 1.4rem; font-size: .85rem; font-weight: 600; }
.settings-page select, input, .memory-form textarea, .document-editor { border-color: var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, var(--bg)); }
.settings-links { gap: .25rem; margin: 1.2rem 0; }
.settings-links a { padding: .7rem .1rem; font-size: .9rem; }
.dev-blocks-page, .document-page, .map-page { margin-top: 1.25rem; }
.dev-blocks-grid { gap: .7rem; margin-top: 1.25rem; }
.dev-block-card { padding: .8rem; border-radius: 14px; }
.dev-block-card h2 { font-size: .72rem; }
.document-page .document-editor { min-height: 55dvh; padding: 1rem; line-height: 1.55; }
.document-actions { gap: .35rem; }
.document-status { color: var(--muted); }

@media (max-width:700px) {
  .app-shell header { height: 52px; padding: calc(.45rem + env(safe-area-inset-top)) .8rem .45rem; }
  .app-body { min-height: calc(100dvh - 52px); }
  .app-body aside { width: min(82vw, 300px); padding: .8rem; }
  .app-body main { height:calc(100dvh - 52px); padding: .7rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }
  .app-body main > h2 { margin: .2rem 0 .65rem; }
  .message-feed { gap: .8rem; padding-top: .2rem; padding-bottom: 1rem; }
  .message { max-width: 88%; padding: .7rem .8rem; border-radius: 13px; font-size: .92rem; }
  .message-assistant { max-width: 100%; padding-inline: .2rem; }
  .empty-state { min-height: calc(100dvh - 180px); padding: .2rem 0 1.5rem; }
  .empty-state h2 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .starter-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
  .starter-card { min-height: 54px; }
  .composer { margin-top: .65rem; padding: .35rem; border-radius: 16px; }
  .composer textarea { min-height: 38px; }
  .settings-page, .auth-card { width: calc(100% - 1.5rem); margin: 1.25rem auto; padding: 1.1rem; border-radius: 16px; }
  .dev-blocks-page, .document-page, .map-page { width: calc(100% - 1.5rem); }
  .comparison-scroll { scroll-snap-type:x proximity; }
  .comparison-table { min-width:36rem; }
  .comparison-table th, .comparison-table td { scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce) {
  .composer::before, .thinking-orb::before, .thinking-orb::after, .thinking-orb i { animation: none; opacity: .55; }
}
.map-canvas { position:relative; background:radial-gradient(circle at 18% 28%, color-mix(in srgb,var(--accent) 22%,transparent) 0 2px, transparent 3px), radial-gradient(circle at 74% 64%, color-mix(in srgb,var(--accent) 24%,transparent) 0 2px, transparent 3px), linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface-muted)); background-size:28px 28px,36px 36px,100% 100%; }
.map-loading { position:absolute; inset:50% auto auto 50%; z-index:1; transform:translate(-50%,-50%); padding:.55rem .8rem; color:var(--muted); background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--border); border-radius:999px; font-size:.78rem; white-space:nowrap; box-shadow:0 8px 24px rgb(30 25 20 / 12%); }
.map-preview { position:absolute; inset:0; pointer-events:none; }
.map-preview-point { position:absolute; display:grid; place-items:center; width:1rem; height:1rem; transform:translate(-50%,-50%); border:2px solid var(--surface); border-radius:50%; background:var(--accent-strong); box-shadow:0 0 0 .25rem color-mix(in srgb,var(--accent) 18%,transparent), 0 3px 8px rgb(30 25 20 / 24%); }
.map-preview-point > span { position:absolute; top:1.15rem; max-width:9rem; padding:.25rem .4rem; color:var(--text); background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--border); border-radius:6px; font-size:.68rem; white-space:nowrap; box-shadow:0 3px 10px rgb(30 25 20 / 12%); }
.message-feed, .message { min-width:0; }
.message { overflow-wrap:anywhere; }