:root{
  --space-0:#050710;
  --space-1:#0a0e1a;
  --panel:#0d1424;
  --panel-2:#111a2e;
  --line:rgba(120,170,255,0.14);
  --line-strong:rgba(120,170,255,0.28);
  --cyan:#5fd4ff;
  --cyan-soft:rgba(95,212,255,0.4);
  --amber:#ffa24d;
  --amber-soft:rgba(255,162,77,0.45);
  --gold:#e8b86d;
  --text-hi:#eef4ff;
  --text-mid:#8fa3c4;
  --text-low:#4c5a78;
  --danger:#ff6b5b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--text-hi);
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(95,212,255,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(255,162,77,0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 5% 90%, rgba(120,90,255,0.07), transparent 60%),
    var(--space-0);
}
.hidden{display:none !important;}

.stars{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 25% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent),
    radial-gradient(1px 1px at 55% 80%, #fff, transparent),
    radial-gradient(1px 1px at 70% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 92% 20%, #fff, transparent),
    radial-gradient(1px 1px at 15% 90%, #fff, transparent),
    radial-gradient(1px 1px at 63% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 33% 40%, #fff, transparent);
  opacity:0.5;
}
.nebula-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 420px at 50% 38%, rgba(95,212,255,0.06), transparent 70%);
}

/* ================= LOGIN ================= */
#login-screen{
  position:relative; z-index:1; height:100dvh; width:100vw;
  display:flex; align-items:center; justify-content:center;
}
.login-card{
  width:min(340px, 88vw); padding:36px 30px;
  background:rgba(13,20,36,0.85); border:1px solid var(--line-strong);
  border-radius:14px; backdrop-filter:blur(8px);
  box-shadow:0 0 60px rgba(95,212,255,0.08);
}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:28px;}
.login-orb{
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff 0%, var(--cyan) 22%, #2a7fb0 55%, #0d2a3a 100%);
  box-shadow:0 0 34px rgba(95,212,255,0.5);
}
.login-brand h1{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:20px; letter-spacing:6px;
  background:linear-gradient(90deg, var(--cyan), var(--text-hi) 60%, var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#login-form{display:flex; flex-direction:column; gap:11px;}
#login-form input{
  background:rgba(9,13,24,0.8); border:1px solid var(--line); border-radius:8px;
  padding:12px 13px; color:var(--text-hi); font-size:14px; outline:none; font-family:'Inter',sans-serif;
}
#login-form input:focus{border-color:var(--cyan-soft); box-shadow:0 0 0 3px rgba(95,212,255,0.1);}
#login-form button{
  margin-top:6px; background:linear-gradient(135deg, var(--cyan), #2a7fb0); border:none;
  border-radius:8px; padding:12px; color:#04121a; font-weight:700; font-size:14px; cursor:pointer;
  font-family:'Inter',sans-serif;
}
#login-form button:hover{filter:brightness(1.08);}
.error{color:var(--danger); font-size:12.5px; min-height:16px;}

/* ================= SHELL ================= */
.shell{position:relative; z-index:1; display:grid; grid-template-columns:76px 1fr 300px; height:100dvh;}

/* ---- rail ---- */
.rail{
  border-right:1px solid var(--line); background:rgba(10,14,26,0.55); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; padding:26px 0; gap:16px;
}
.rail .logo{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(145deg, var(--panel-2), var(--panel));
  border:1px solid var(--cyan-soft); display:flex; align-items:center; justify-content:center;
  color:var(--cyan); font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px;
  margin-bottom:8px; box-shadow:0 0 16px rgba(95,212,255,0.15); flex-shrink:0;
}
.rail .icon{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--text-low); font-size:11px; font-family:'JetBrains Mono',monospace;
  border:1px solid transparent; cursor:pointer; background:none; flex-shrink:0;
}
.rail .icon.active{
  color:var(--cyan); border:1px solid var(--line-strong); background:rgba(95,212,255,0.06);
  box-shadow:0 0 14px rgba(95,212,255,0.12);
}
.rail .icon:hover:not(.active){color:var(--text-mid);}
.rail .spacer{flex:1;}
.rail .status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber);
  animation:pulse 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

/* ---- main / center ---- */
.main{position:relative; display:flex; flex-direction:column; border-right:1px solid var(--line); min-width:0;}

.core-zone{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:0;}

.bracket{position:absolute; width:26px; height:26px; border-color:var(--line-strong); opacity:0.8;}
.bracket.tl{top:22px; left:22px; border-top:1px solid; border-left:1px solid;}
.bracket.tr{top:22px; right:22px; border-top:1px solid; border-right:1px solid;}
.bracket.bl{bottom:22px; left:22px; border-bottom:1px solid; border-left:1px solid;}
.bracket.br{bottom:22px; right:22px; border-bottom:1px solid; border-right:1px solid;}

.readout{position:absolute; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1px; color:var(--text-low); line-height:1.6;}
.readout.rt1{top:70px; left:48px;}
.readout.rt2{top:70px; right:48px; text-align:right;}
.readout span{color:var(--cyan);}

.core-wrap{position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center;}
.ring{position:absolute; border-radius:50%;}
.ring.r1{inset:0; border:1px solid var(--line-strong);}
.ring.r2{inset:24px; border:1px solid rgba(95,212,255,0.18); animation:spin 20s linear infinite;}
.ring.r3{inset:48px; border:1px dashed rgba(255,162,77,0.25); animation:spin 28s linear infinite reverse;}
.ring.r4{inset:-16px; border:1px solid rgba(95,212,255,0.08);}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.ring.pulse{inset:-12px; border:1px solid var(--cyan-soft); animation:expand 3s ease-out infinite;}
@keyframes expand{0%{transform:scale(0.92); opacity:0.7;} 100%{transform:scale(1.25); opacity:0;}}

.orbit-dot{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); top:50%; left:50%; animation:orbit 9s linear infinite;}
.orbit-dot.d2{animation-duration:14s; animation-direction:reverse; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
@keyframes orbit{from{transform:rotate(0deg) translateX(110px) rotate(0deg);} to{transform:rotate(360deg) translateX(110px) rotate(-360deg);}}

.core{
  width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff 0%, var(--cyan) 22%, #2a7fb0 55%, #0d2a3a 100%);
  box-shadow:0 0 50px rgba(95,212,255,0.5), 0 0 100px rgba(255,162,77,0.15), inset 0 0 20px rgba(255,255,255,0.3);
  transition:box-shadow 0.3s;
}
.core.thinking{animation:think 1.1s ease-in-out infinite;}
@keyframes think{0%,100%{box-shadow:0 0 50px rgba(95,212,255,0.5);} 50%{box-shadow:0 0 80px rgba(255,162,77,0.6);}}

.core-status{margin-top:22px; text-align:center;}
.core-status .state{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; letter-spacing:3px; text-transform:uppercase;
  background:linear-gradient(90deg, var(--cyan), var(--text-hi) 50%, var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.core-status .sub{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-low); letter-spacing:2px; text-transform:uppercase; margin-top:8px;}

/* ---- browser view (replaces core-zone content when active) ---- */
.browser-view{flex:1; display:flex; flex-direction:column; min-height:0; position:relative;}
.browser-view-header{
  display:flex; align-items:center; gap:8px; padding:10px 20px;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mid);
  border-bottom:1px solid var(--line);
}
.browser-view-header .status-dot{width:7px; height:7px; border-radius:50%; background:var(--text-low);}
.browser-view-header .status-dot.active{background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulse 1.4s ease-in-out infinite;}
.browser-view-body{flex:1; position:relative; min-height:0;}
#browser-frame{width:100%; height:100%; border:none; display:none;}
.browser-view-body.has-frame #browser-frame{display:block;}
.browser-view-body.has-frame .browser-placeholder{display:none;}
.browser-placeholder{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--text-low); text-align:center; padding:20px;
}
.browser-placeholder p{font-size:12.5px; max-width:240px;}

/* ---- docked chat ---- */
.docked-chat{flex-shrink:0; display:flex; flex-direction:column; border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(10,14,26,0.75) 30%); backdrop-filter:blur(4px);
  max-height:52vh; height:52vh;}
.chat-scroll{overflow-y:auto; padding:18px 30px 10px; display:flex; flex-direction:column; gap:14px;}
.msg{max-width:80%; display:flex; flex-direction:column; gap:5px;}
.msg.user{align-self:flex-end; align-items:flex-end;}
.msg .bubble{padding:12px 16px; border-radius:10px; font-size:14.5px; line-height:1.65; white-space:pre-wrap; word-wrap:break-word;}
.msg.jarvis .bubble{background:rgba(17,26,46,0.8); border:1px solid var(--line); color:var(--text-hi);}
.msg.user .bubble{background:rgba(95,212,255,0.08); border:1px solid var(--line-strong); color:var(--text-hi);}
.msg .meta{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-low);}
.msg.pending .bubble{opacity:0.5;}

.composer{padding:10px 30px 20px;}
.composer-inner{
  display:flex; align-items:center; gap:10px; background:rgba(13,20,36,0.8); border:1px solid var(--line-strong);
  border-radius:10px; padding:5px 5px 5px 15px;
}
.composer-inner input{flex:1; background:none; border:none; outline:none; color:var(--text-hi); font-size:13px; padding:9px 0; font-family:'Inter',sans-serif;}
.composer-inner input::placeholder{color:var(--text-low);}
.composer-inner .mic, .composer-inner .send{
  width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; border:none; font-family:'JetBrains Mono',monospace; flex-shrink:0;
}
.composer-inner .mic{background:var(--panel); border:1px solid var(--line); color:var(--text-low);}
.composer-inner .send{background:linear-gradient(135deg, var(--cyan), #2a7fb0); color:#05121c; font-weight:700;}
.composer-inner .send:disabled{opacity:0.4; cursor:default;}

/* ---- right panel ---- */
.panel{background:rgba(10,14,26,0.5); backdrop-filter:blur(6px); padding:24px 20px; overflow-y:auto;}
.panel h2{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--gold); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:16px; border-bottom:1px solid var(--line); padding-bottom:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.panel h2 .logout-link{color:var(--text-low); cursor:pointer; font-size:9.5px; letter-spacing:1px;}
.panel h2 .logout-link:hover{color:var(--danger);}

.timeline{position:relative; padding-left:14px; margin-bottom:26px;}
.timeline::before{content:''; position:absolute; left:3px; top:4px; bottom:4px; width:1px; background:linear-gradient(180deg, var(--cyan-soft), transparent);}
.tl-item{position:relative; padding-bottom:16px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; left:-14px; top:3px; width:6px; height:6px; border-radius:50%; background:var(--text-low);}
.tl-item.live::before{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.tl-item .time{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-low); letter-spacing:0.5px;}
.tl-item.live .time{color:var(--cyan);}
.tl-item .txt{font-size:12px; color:var(--text-mid); line-height:1.5; margin-top:3px;}
.tl-empty{font-size:12px; color:var(--text-low); font-style:italic;}

.metric-card{background:rgba(17,26,46,0.6); border:1px solid var(--line); border-radius:10px; padding:14px;}
.metric-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line);}
.metric-row:last-child{border-bottom:none;}
.metric-row .label{font-size:12px; color:var(--text-mid);}
.metric-row .value{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-hi);}
.metric-row .value.alert{color:var(--danger);}
.metric-row .value.good{color:var(--amber);}

/* ================= MODAL ================= */
.modal-backdrop{position:fixed; inset:0; background:rgba(4,8,14,0.75); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:50;}
.modal-card{width:min(340px, 90vw); background:var(--panel); border:1px solid var(--line-strong); border-radius:14px; padding:24px;}
.modal-card h2{margin:0 0 16px; font-size:15px; font-weight:600; font-family:'Inter',sans-serif;}
.modal-card form{display:flex; flex-direction:column; gap:10px;}
.modal-card input{background:rgba(9,13,24,0.8); border:1px solid var(--line); border-radius:8px; padding:11px 13px; color:var(--text-hi); font-size:13.5px; outline:none; font-family:'Inter',sans-serif;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}
.modal-actions button{font-family:'Inter',sans-serif; cursor:pointer; border-radius:8px; padding:9px 16px; font-size:13px;}
.modal-actions .cancel-btn{background:none; border:1px solid var(--line); color:var(--text-mid);}
.modal-actions button[type="submit"]{background:linear-gradient(135deg, var(--cyan), #2a7fb0); border:none; color:#04121a; font-weight:600;}

/* ================= MOBILE ================= */
@media (max-width: 899px){
  .shell{grid-template-columns:1fr; grid-template-rows:1fr 60px; height:100dvh;}
  .rail{
    order:2; flex-direction:row; width:100%; height:60px; padding:0 10px; border-right:none;
    border-top:1px solid var(--line); gap:4px; justify-content:space-around;
  }
  .rail .logo{display:none;}
  .rail .spacer{display:none;}
  .rail .status-dot{position:absolute; top:8px; right:14px;}
  .rail .icon{width:auto; flex:1; height:44px; flex-direction:column; gap:2px; font-size:9px;}

  .main{order:1; border-right:none; min-height:0;}
  .panel{order:1; border-right:none; border-bottom:1px solid var(--line);}

  /* Bitta vaqtda faqat bitta "view" ko'rinadi */
  body[data-view="chat"] .panel{display:none;}
  body[data-view="activity"] .main{display:none;}
  body[data-view="activity"] .panel{display:flex; flex-direction:column; height:100%;}
  body[data-view="web"] .docked-chat{display:none;}

  .core-wrap{width:170px; height:170px;}
  .ring.r2{inset:20px;} .ring.r3{inset:38px;}
  .orbit-dot{animation:orbit-m 9s linear infinite;}
  @keyframes orbit-m{from{transform:rotate(0deg) translateX(85px) rotate(0deg);} to{transform:rotate(360deg) translateX(85px) rotate(-360deg);}}
  .readout{display:none;}
  .bracket{display:none;}
  .docked-chat{max-height:none; height:auto; flex:1;}
  .core-zone{flex:0 0 auto; padding:14px 0;}
}