:root{
  --bg:#081018;
  --panel:#0d1622;
  --panel2:#0a121b;
  --text:#e8eef7;
  --muted:#9fb0c3;
  --border:rgba(255,255,255,0.08);
  --accent:#3aa6ff;
  --danger:#ff4d4d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:radial-gradient(circle at top, #0b1830 0%, #071018 45%, #050b12 100%);
  color:var(--text);
}
.app{
  height:100vh;
  display:grid;
  grid-template-columns:300px 1fr;
}
.sidebar{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-right:1px solid var(--border);
  padding:16px;
  display:flex;
  flex-direction:column;
  min-width:260px;
}
.brand{margin-bottom:14px}
.brandTitle{font-weight:800;letter-spacing:1px}
.brandSub{color:var(--muted);font-size:12px;margin-top:4px}
.sessionsHeader{
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sessions{
  margin-top:8px;
  overflow:auto;
  padding-right:4px;
  flex:1;
}
.sessionItem{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:8px;
  cursor:pointer;
  background:rgba(255,255,255,0.03);
}
.sessionItem:hover{border-color:rgba(58,166,255,0.35)}
.sessionItem.active{border-color:rgba(58,166,255,0.8);background:rgba(58,166,255,0.08)}
.sessionTitle{
  font-size:13px;
  color:var(--text);
  line-height:1.2;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sessionActions{display:flex;gap:6px}
.smallBtn{
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}
.smallBtn.danger:hover{border-color:rgba(255,77,77,0.6);color:#ffd0d0}

.main{
  display:grid;
  grid-template-rows:56px 1fr 72px;
  height:100vh;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.status{display:flex;align-items:center;gap:10px}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:#2cff7a;
  box-shadow:0 0 12px rgba(44,255,122,0.45);
}
.dot.offline{
  background:#ff4d4d;
  box-shadow:0 0 12px rgba(255,77,77,0.45);
}
#statusText{color:var(--muted);font-size:13px}
.controls{display:flex;gap:14px;align-items:center}
.toggle,.voiceLabel{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.select{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
}

.center{
  position:relative;
  overflow:hidden;
  padding:16px;
}
.globeWrap{
  transform: scale(2);
  transform-origin: center;

  position:absolute;
  inset:60px 0 120px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
  z-index:1;
}
.globe{
  width:360px;
  height:360px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 0 80px rgba(58,166,255,0.12),
    inset -40px -40px 80px rgba(0,0,0,0.45),
    inset 20px 20px 50px rgba(255,255,255,0.05);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.20), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(26,79,130,0.55), rgba(4,13,24,0.96) 72%);
}
.globeCore{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(50,170,255,0.12), transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(0,180,140,0.08), transparent 65%);
}
.globeGrid{
  position:absolute;
  inset:-8%;
  border-radius:50%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 16px,
      rgba(120,190,255,0.08) 17px,
      rgba(255,255,255,0.00) 18px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 16px,
      rgba(120,190,255,0.08) 17px,
      rgba(255,255,255,0.00) 18px
    );
  transform:rotate(-16deg);
  opacity:.55;
}
.globeShine{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.28), transparent 20%),
    radial-gradient(circle at 68% 78%, rgba(0,0,0,0.38), transparent 42%);
}
.globe.thinking{
  animation:globeSpin 1.2s linear infinite;
}
@keyframes globeSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.chat{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
  height:100%;
  overflow:auto;
  padding:24px 6px 120px;
}
.bubbleRow{display:flex;margin:10px 0;position:relative;z-index:2}
.bubbleRow.user{justify-content:flex-end}
.bubbleRow.assistant{justify-content:flex-start}
.bubble{
  max-width:78%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  line-height:1.35;
  white-space:pre-wrap;
}
.bubble.user{
  background:rgba(58,166,255,0.10);
  border-color:rgba(58,166,255,0.25);
}

.composer{
  border-top:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  padding:12px 14px;
  display:grid;
  grid-template-columns:40px 40px 1fr 92px;
  gap:10px;
  align-items:center;
}
#input{
  width:100%;
  resize:none;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  padding:12px;
  outline:none;
  min-height:44px;
  max-height:140px;
  overflow:auto;
}
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
}
.btn.primary{border-color:rgba(58,166,255,0.45);background:rgba(58,166,255,0.10)}
.btn.send{border-color:rgba(58,166,255,0.55);background:rgba(58,166,255,0.12)}
.btn.danger{border-color:rgba(255,77,77,0.55);background:rgba(255,77,77,0.10)}
.iconBtn{
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconBtn.small{
  width:40px;
  height:44px;
  font-size:16px;
}
.iconBtn.listening{
  border-color:rgba(44,255,122,0.55);
  box-shadow:0 0 18px rgba(44,255,122,0.10);
}

.confirmOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.confirmOverlay.hidden{display:none}
.confirmBox{
  width:340px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:16px;
  padding:16px;
}
.confirmTitle{font-weight:800;margin-bottom:6px}
.confirmText{color:var(--muted);margin-bottom:14px}
.confirmActions{display:flex;justify-content:flex-end;gap:10px}


.jsBadge{
  margin-left:12px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,77,77,0.10);
  color:#ffd0d0;
}
.jsBadge.ok{
  background:rgba(44,255,122,0.10);
  color:#bfffe0;
  border-color:rgba(44,255,122,0.30);
}



/* ===== ARGYLE EARTH GLOBE OVERRIDE ===== */

.center{
  position:relative !important;
  overflow:hidden !important;
}

.globeWrap{
  transform: scale(2);
  transform-origin: center;

  position:absolute !important;
  inset:58px 0 118px 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  pointer-events:none !important;
  z-index:1 !important;
  margin:0 !important;
}

.chat{
  position:relative !important;
  z-index:2 !important;
  max-width:980px !important;
  margin:0 auto !important;
  height:100% !important;
  overflow:auto !important;
  padding:28px 8px 120px !important;
}

.bubbleRow{
  position:relative;
  z-index:2;
}

.globe{
  width:380px !important;
  height:380px !important;
  border-radius:50% !important;
  position:relative !important;
  overflow:hidden !important;
  pointer-events:none !important;
  border:1px solid rgba(130,190,255,0.18) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.26), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(24,82,138,0.58), rgba(4,12,22,0.97) 72%) !important;
  box-shadow:
    0 0 120px rgba(46,130,255,0.12),
    inset -55px -55px 110px rgba(0,0,0,0.48),
    inset 24px 24px 65px rgba(255,255,255,0.06) !important;
  transform:none !important;
}

.globeCore,
.globeGrid,
.globeShine{
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
}

.globeCore{
  background:
    radial-gradient(circle at 40% 35%, rgba(60,170,255,0.12), transparent 46%),
    radial-gradient(circle at 65% 70%, rgba(0,195,160,0.07), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(6,28,52,0.15), transparent 75%) !important;
}

.globeGrid{
  opacity:.30 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(130,190,255,0.00) 0px,
      rgba(130,190,255,0.00) 17px,
      rgba(130,190,255,0.10) 18px,
      rgba(130,190,255,0.00) 19px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(130,190,255,0.00) 0px,
      rgba(130,190,255,0.00) 17px,
      rgba(130,190,255,0.08) 18px,
      rgba(130,190,255,0.00) 19px
    ) !important;
  transform:perspective(600px) rotateX(18deg) rotateZ(-12deg) scale(1.08) !important;
}

.globeShine{
  opacity:.92 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 20%),
    radial-gradient(circle at 72% 78%, rgba(0,0,0,0.38), transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800'%3E%3Crect width='1600' height='800' fill='none'/%3E%3Cg fill='%237dc9ff' fill-opacity='0.78'%3E%3Cpath d='M120 352l78-52 124 10 90-34 77 33 82-12 65 34-18 62-70 24-76-8-58 34-120 24-104-12-70-32z'/%3E%3Cpath d='M520 268l72-48 118 12 64 36 46-18 58 30-22 48-64 18-52 34-84 18-108-18-44-42z'/%3E%3Cpath d='M860 238l66-30 108 16 68 46 50 6 56 38-36 34-66 12-50 34-84 16-88-16-60-38z'/%3E%3Cpath d='M1148 332l76-34 126 16 88 46 62 4 58 34-42 38-72 16-54 36-96 18-104-14-48-42z'/%3E%3Cpath d='M980 502l70-26 110 20 78 48-22 40-64 18-48 34-86 16-86-18-58-40z'/%3E%3Cpath d='M306 528l56-20 92 14 70 42-18 36-56 16-42 28-70 14-74-18-34-34z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat, no-repeat, repeat-x !important;
  background-size:auto, auto, 200% 100% !important;
  background-position:center center, center center, 0% 50% !important;
  mix-blend-mode:screen !important;
  animation:argyleEarthDrift 46s linear infinite !important;
}

.globe::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  box-shadow:
    0 0 24px rgba(97,178,255,0.14),
    inset 0 0 0 1px rgba(180,220,255,0.10);
  pointer-events:none;
}

.globe.thinking{
  box-shadow:
    0 0 150px rgba(70,150,255,0.18),
    inset -55px -55px 110px rgba(0,0,0,0.48),
    inset 24px 24px 65px rgba(255,255,255,0.06) !important;
}

.globe.thinking .globeShine{
  animation:argyleEarthDrift 7s linear infinite !important;
}

@keyframes argyleEarthDrift{
  from { background-position:center center, center center, 0% 50%; }
  to   { background-position:center center, center center, -100% 50%; }
}

/* ===== END ARGYLE EARTH GLOBE OVERRIDE ===== */




/* ===== ARGYLE REAL EARTH GLOBE ===== */

.center{
  position:relative !important;
  overflow:hidden !important;
}

.globeWrap{
  transform: scale(2);
  transform-origin: center;

  position:absolute !important;
  inset:58px 0 118px 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  pointer-events:none !important;
  z-index:1 !important;
  margin:0 !important;
}

.chat{
  position:relative !important;
  z-index:2 !important;
  max-width:980px !important;
  margin:0 auto !important;
  height:100% !important;
  overflow:auto !important;
  padding:24px 8px 120px !important;
}

.bubbleRow{
  position:relative;
  z-index:2;
}

.globe{
  width:360px !important;
  height:360px !important;
  border-radius:50% !important;
  position:relative !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.globeCore,
.globeGrid,
.globeShine{
  display:none !important;
}

#globe canvas{
  width:100% !important;
  height:100% !important;
  display:block !important;
  border-radius:50% !important;
}

/* ===== END ARGYLE REAL EARTH GLOBE ===== */