@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
  --bg:#010409;
  --panel:#020912;
  --panel2:#04101b;
  --line:#0f5f95;
  --line2:#2bb7ff;
  --lineSoft:rgba(43,183,255,.18);
  --text:#e5f3fb;
  --muted:#8fb3c8;
  --blue:#2bb7ff;
  --ice:#a9e9ff;
  --glow:rgba(43,183,255,.32);
  --body:'Geist','Inter','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular','Consolas',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--body);}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(24,142,215,.06) 1px,transparent 1px),linear-gradient(rgba(24,142,215,.035) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.app{height:100vh;width:100vw;display:grid;grid-template-columns:270px 1fr;background:radial-gradient(circle at 20% 10%,rgba(36,163,238,.16),transparent 30%),#010409;overflow:hidden}
.side{border-right:1px solid var(--line);padding:30px 34px;display:flex;flex-direction:column;gap:28px;background:linear-gradient(180deg,#03111d,#01060c);box-shadow:0 0 34px rgba(43,183,255,.08)}
.logoBox{width:112px;height:112px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 22px var(--glow));overflow:visible}
.logoBox img{max-width:92px;max-height:92px;object-fit:contain;display:block}
.portraitBox{width:150px;height:190px;border:1px solid var(--line2);box-shadow:0 0 22px rgba(43,183,255,.12);overflow:hidden;background:#02070c}
.portraitBox img,.voicePortrait img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
nav{display:flex;flex-direction:column;gap:20px;margin-top:5px}
nav button{font-family:var(--mono);font-size:19px;letter-spacing:.17em;text-transform:uppercase;text-align:left;color:#b1d6e8;background:transparent;border:0;padding:0;cursor:pointer}
nav button.active{color:var(--blue)}
nav button.active:before{content:"— ";color:var(--blue)}
.main{padding:44px 52px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.topbar{height:66px;border-bottom:1px solid var(--lineSoft);display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--mono);letter-spacing:.25em;text-transform:uppercase;font-size:15px;color:#dff5ff}
.dot{display:inline-block;width:5px;height:5px;background:var(--blue);margin:0 14px 2px 16px}.available{color:var(--ice)}.statusText{font-size:12px;color:var(--muted);letter-spacing:.14em}.statusText span{color:var(--blue)}
.section{display:none;min-height:0;flex:1;overflow:hidden}.section.active{display:flex;flex-direction:column}.section h1{font-size:35px;line-height:1;margin:32px 0 26px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f0fbff}
.thinFrame{border:1px solid var(--line);background:rgba(2,9,18,.7);box-shadow:inset 0 0 28px rgba(43,183,255,.04)}
.chatFrame{flex:1;display:flex;flex-direction:column;min-height:0;padding:28px 28px 22px}.scrollArea{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}.scrollArea::-webkit-scrollbar{width:7px}.scrollArea::-webkit-scrollbar-track{background:transparent}.scrollArea::-webkit-scrollbar-thumb{background:linear-gradient(var(--line2),var(--line));border-radius:8px}
.msg{margin:0 0 26px}.meta{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:9px}.msg p{margin:0;font-size:18px;line-height:1.55;color:var(--text)}
.inputLine{height:60px;border:1px solid var(--line);display:grid;grid-template-columns:72px 1fr 78px;align-items:center;margin-top:18px}.inputLine input,.searchLine input{background:transparent;border:0;color:var(--text);font:500 16px var(--body);outline:0;padding:0 18px}.inputLine button,.searchLine button,.voiceButtons button,#diagnosticBtn{background:transparent;border:0;color:var(--ice);font:600 14px var(--body);cursor:pointer;height:100%}
.searchLine{height:58px;border:1px solid var(--line);display:grid;grid-template-columns:1fr 110px;margin-bottom:24px}.tabs{display:flex;gap:48px;border-bottom:1px solid var(--lineSoft);margin-bottom:22px}.tabs button{background:transparent;border:0;color:var(--muted);font:500 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:0 0 14px}.tabs .active{color:var(--blue);border-bottom:1px solid var(--blue)}
.list{flex:1}.row{display:grid;grid-template-columns:40px 1fr 28px;gap:14px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(43,183,255,.13);color:var(--text);text-decoration:none}.row b{display:block;font-size:18px;font-weight:500}.row small{display:block;color:var(--muted);margin-top:7px}.hidden{display:none!important}#weatherBox{padding:18px 20px;margin-bottom:20px}#weatherBox p{margin:8px 0}.voicePanel{align-items:center}.voicePortrait{width:300px;height:300px;border:1px solid var(--line2);overflow:hidden;margin:12px 0 38px}.wave{height:92px;width:min(520px,80%);display:flex;align-items:center;justify-content:center;gap:5px}.wave i{display:block;width:4px;background:var(--blue);box-shadow:0 0 12px var(--glow);opacity:.75}.wave.active i{animation:pulse .75s infinite alternate}.wave.active i:nth-child(3n){animation-duration:.48s}@keyframes pulse{to{transform:scaleY(1.8);opacity:1}}#voiceState{font-family:var(--mono);letter-spacing:.34em;text-transform:uppercase;color:#dff5ff}.voiceButtons{display:flex;gap:18px}.voiceButtons button,#diagnosticBtn{border:1px solid var(--line);padding:14px 26px;height:auto}.rulesList{display:grid;gap:18px;flex:1}.rule{border-bottom:1px solid var(--lineSoft);padding-bottom:18px}.rule span{display:block;color:var(--blue);font:600 13px var(--mono);letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}.rule textarea{width:100%;min-height:68px;background:rgba(2,9,18,.82);border:1px solid var(--line);color:var(--text);font:15px var(--body);padding:14px;resize:vertical;outline:0}.statusPanel{padding:24px;flex:1}pre{white-space:pre-wrap;color:var(--ice);font:14px/1.5 var(--mono)}
@media(max-width:760px){.app{grid-template-columns:120px 1fr}.side{padding:18px 16px}.logoBox{width:76px;height:76px}.logoBox img{max-width:64px;max-height:64px}.portraitBox{width:82px;height:112px}nav button{font-size:13px}.main{padding:24px 18px}.section h1{font-size:28px}.msg p{font-size:16px}.chatFrame{padding:18px}.inputLine{grid-template-columns:58px 1fr 58px}.voicePortrait{width:220px;height:220px}}