:root{
    --void:#0B1020;
    --navy:#121A33;
    --panel:#161F3D;
    --panel-2:#1C2748;
    --line: rgba(168,216,255,0.14);
    --star-core:#EAF4FF;
    --star:#8FD3FF;
    --star-dim:#5D86C4;
    --ember:#FF8B5E;
    --text:#EAF0FF;
    --text-muted:#8B96B8;
    --font: 'Space Grotesk', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }
  *{ box-sizing:border-box; }

  /* ---------- ORB ---------- */
  #orb-wrap{
    position:fixed; right:26px; bottom:26px; z-index:1000;
  }
  #orb{
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--star-core), var(--star) 42%, var(--star-dim) 72%, var(--navy) 100%);
    box-shadow: 0 0 0 1px var(--line), 0 6px 22px rgba(0,0,0,0.45), 0 0 26px rgba(143,211,255,0.35);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    animation: breathe 3.6s ease-in-out infinite;
    transition: transform .18s ease;
  }
  #orb:hover{ transform: scale(1.06); }
  #orb:active{ transform: scale(0.97); }
  #orb::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:1px solid rgba(143,211,255,0.25);
    animation: ring 3.6s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ box-shadow: 0 0 0 1px var(--line), 0 6px 22px rgba(0,0,0,0.45), 0 0 22px rgba(143,211,255,0.28); }
    50%{ box-shadow: 0 0 0 1px var(--line), 0 6px 22px rgba(0,0,0,0.45), 0 0 34px rgba(143,211,255,0.5); }
  }
  @keyframes ring{
    0%,100%{ transform:scale(1); opacity:0.7; }
    50%{ transform:scale(1.14); opacity:0.15; }
  }
  #orb-dot{
    position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
    background:var(--ember); border:2px solid var(--void);
    display:none;
  }
  #orb-dot.show{ display:block; }
  #orb-icon{
    width:100%; height:100%; border-radius:50%; object-fit:cover;
    display:block;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  #orb.open #orb-icon{ transform: rotate(90deg); }

  /* ---------- PANEL ---------- */
  #panel{
    position:fixed; right:26px; bottom:96px; z-index:1001;
    width:360px; max-width:calc(100vw - 40px);
    height:520px; max-height:calc(100vh - 140px);
    background:linear-gradient(180deg, var(--panel), var(--navy));
    border:1px solid var(--line);
    border-radius:22px 22px 18px 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    display:flex; flex-direction:column;
    overflow:hidden;
    opacity:0; transform:translateY(14px) scale(0.98);
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  #panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

  #head{
    padding:14px 16px; display:flex; align-items:center; gap:10px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    flex-shrink:0;
  }
  #head .mini-orb{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    object-fit:cover;
    box-shadow:0 0 14px rgba(143,211,255,0.45);
  }
  #head .titles{ flex:1; min-width:0; }
  #head h1{ font-size:15px; margin:0; font-weight:600; letter-spacing:0.2px; }
  #head p{ font-size:11.5px; margin:1px 0 0; color:var(--text-muted); }
  #head button{
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    width:28px; height:28px; border-radius:8px; font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }
  #head button:hover{ background:rgba(255,255,255,0.06); color:var(--text); }

  #messages{
    flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px;
  }
  #messages::-webkit-scrollbar{ width:6px; }
  #messages::-webkit-scrollbar-thumb{ background:rgba(143,211,255,0.2); border-radius:6px; }

  .msg{ max-width:86%; font-size:13px; line-height:1.5; padding:9px 12px; border-radius:14px; white-space:pre-wrap; }
  .msg.user{ align-self:flex-end; background:var(--star-dim); color:#fff; border-bottom-right-radius:4px; }
  .msg.bot{ align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:4px; }
  .msg.bot.crash{ border-color:rgba(255,139,94,0.4); }
  .msg.system{ align-self:center; color:var(--text-muted); font-size:11.5px; text-align:center; max-width:95%; }
  .msg code{ font-family:var(--mono); font-size:12px; background:rgba(0,0,0,0.25); padding:1px 4px; border-radius:4px; }

  .typing{ display:flex; gap:4px; padding:10px 12px; }
  .typing span{ width:6px; height:6px; border-radius:50%; background:var(--star); animation:blink 1.2s infinite; }
  .typing span:nth-child(2){ animation-delay:.2s; }
  .typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes blink{ 0%,80%,100%{ opacity:0.25; } 40%{ opacity:1; } }

  #logbox{
    display:none; flex-direction:column; gap:8px; padding:12px 16px;
    border-top:1px solid var(--line); background:rgba(0,0,0,0.18); flex-shrink:0;
  }
  #logbox.show{ display:flex; }
  #logbox textarea{
    width:100%; height:100px; resize:none; background:var(--void);
    border:1px solid var(--line); border-radius:10px; color:var(--star-core);
    font-family:var(--mono); font-size:11.5px; padding:8px; line-height:1.4;
  }
  #logbox .row{ display:flex; gap:8px; }
  #logbox button, .send-btn, .util-btn{
    font-family:var(--font); border:none; cursor:pointer; border-radius:9px;
    font-size:12.5px; padding:7px 12px; font-weight:500;
  }
  #logbox .primary{ background:var(--ember); color:#241206; flex:1; }
  #logbox .ghost{ background:transparent; border:1px solid var(--line); color:var(--text-muted); }

  #inputrow{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); flex-shrink:0; }
  #inputrow .util-btn{ background:var(--panel-2); border:1px solid var(--line); color:var(--text-muted); flex-shrink:0; }
  #inputrow .util-btn:hover{ color:var(--text); }
  #inputrow input{
    flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    color:var(--text); padding:9px 11px; font-size:13px; font-family:var(--font); min-width:0;
  }
  #inputrow input:focus{ outline:none; border-color:var(--star-dim); }
  .send-btn{ background:var(--star); color:#0B1020; flex-shrink:0; }
  .send-btn:disabled{ opacity:0.4; cursor:default; }