:root{
  --bg:#060912; --bg2:#0d1326; --panel:#121a33; --accent:#00e5ff; --accent2:#7c5cff;
  --pink:#ff4d8d; --green:#00ffa3; --text:#e8ecff; --dim:#7a86b8; --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;
}
.hidden{display:none!important}
.screen{flex:1;display:flex;flex-direction:column;width:100%;height:100%}

/* ===== LOGIN ===== */
#loginScreen{align-items:center;justify-content:center;background:
  radial-gradient(circle at 30% 20%,rgba(124,92,255,.15),transparent 50%),
  radial-gradient(circle at 70% 80%,rgba(0,229,255,.12),transparent 50%),
  var(--bg);}
.login-card{background:var(--panel);border:1px solid rgba(124,92,255,.3);
  border-radius:28px;padding:48px 40px;text-align:center;max-width:380px;width:90%;
  box-shadow:0 0 60px rgba(0,229,255,.15),0 20px 60px rgba(0,0,0,.5);}
.robot-mini{width:80px;height:80px;margin:0 auto 20px;position:relative;
  background:linear-gradient(135deg,#1a2342,#0d1326);border-radius:50%;
  border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;
  gap:10px;box-shadow:0 0 30px rgba(0,229,255,.4);animation:float 3s ease-in-out infinite;}
.robot-eye{width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);animation:blink 4s infinite;}
.login-card h1{font-size:30px;letter-spacing:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.subtitle{color:var(--dim);margin:8px 0 28px;font-size:15px}
.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;
  background:#fff;color:#1a1a2e;transition:.2s;}
.g-btn:hover{background:#f0f0f5;transform:translateY(-1px)}
.g-btn svg{width:20px;height:20px}
.email-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.email-form input{padding:13px 16px;border-radius:12px;border:1px solid rgba(124,92,255,.4);
  background:var(--bg2);color:var(--text);font-size:15px;outline:none}
.email-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.email-form button{padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:600;
  cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#060912}
.login-note{color:var(--dim);font-size:12px;margin-top:16px}

/* ===== TOPBAR ===== */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:rgba(13,19,38,.8);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(124,92,255,.2);z-index:10}
.user-chip{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  min-width:0;flex:1}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:#060912;font-weight:700}
.user-chip .uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-select,.lang-select{background:var(--bg2);color:var(--text);border:1px solid rgba(124,92,255,.3);
  border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer;outline:none}
.model-select:focus{border-color:var(--accent)}
.icon-btn{background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;padding:6px 10px;border-radius:10px}
.icon-btn:hover{background:rgba(255,77,141,.15);color:var(--pink)}

/* ===== STAGE ===== */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  position:relative;overflow:hidden;padding:8px 16px 4px;
  background:radial-gradient(ellipse at 50% 40%,rgba(124,92,255,.08),transparent 60%);}
.stage::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%)}

/* ===== ROBOT ===== */
.robot-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;
  flex-shrink:0;padding-top:6px}
.robot{position:relative;width:160px;height:200px;animation:float 4s ease-in-out infinite;
  transition:filter .3s}
.robot.idle{filter:saturate(.7) brightness(.85)}
.robot.thinking{animation:float 2s ease-in-out infinite}
.robot.speaking .antenna-tip{animation:pulse-fast .3s infinite}
.antenna{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:3px;height:18px;
  background:var(--accent2);border-radius:2px;z-index:3}
.antenna-tip{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:var(--pink);box-shadow:0 0 16px var(--pink);animation:pulse 2s infinite}
.head{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:130px;height:100px;
  background:linear-gradient(180deg,#1c2748,#141d38);border-radius:30px 30px 26px 26px;
  border:2px solid rgba(0,229,255,.25);box-shadow:0 0 30px rgba(0,229,255,.2),inset 0 -8px 20px rgba(0,0,0,.4)}
.face-screen{position:absolute;inset:14px 12px;background:linear-gradient(180deg,#050810,#0a0f1e);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(0,229,255,.15)}
.eyes{display:flex;gap:22px;margin-bottom:8px}
.eye{width:18px;height:18px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent);transition:.15s}
.robot.speaking .eye{animation:eye-talk .12s infinite alternate}
.robot.listening .eye{background:var(--green);box-shadow:0 0 18px var(--green);animation:eye-listen .6s infinite alternate}
.mouth{width:30px;height:6px;border-radius:6px;background:var(--accent);opacity:.6;transition:.1s}
.robot.speaking .mouth{height:10px;animation:mouth-talk .1s infinite alternate}
.ear{position:absolute;top:30px;width:10px;height:30px;background:linear-gradient(180deg,#1c2748,#141d38);
  border-radius:6px}
.ear.left{left:-8px}.ear.right{right:-8px}
.body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:110px;height:60px;
  background:linear-gradient(180deg,#1c2748,#0d1326);border-radius:24px 24px 30px 30px;
  border:2px solid rgba(124,92,255,.2);box-shadow:inset 0 -10px 20px rgba(0,0,0,.5)}
.body::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:30px;height:30px;
  border-radius:50%;background:radial-gradient(circle,var(--accent2),transparent 70%);opacity:.6}

.status-text{color:var(--dim);font-size:15px;min-height:22px;text-align:center;letter-spacing:.3px}
.status-text.active{color:var(--accent)}

/* ===== TRANSCRIPT — ruang chat sendiri, tak tutup robot ===== */
.transcript{position:relative;width:100%;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;padding:10px 8px 8px;z-index:3;
  pointer-events:auto;scrollbar-width:thin;overscroll-behavior:contain}
.transcript .msg{max-width:78%;padding:11px 16px;border-radius:16px;font-size:15px;line-height:1.45;
  flex-shrink:0;pointer-events:auto;animation:msgIn .3s ease;word-wrap:break-word;
  backdrop-filter:blur(8px)}
.transcript .msg:first-child{margin-top:auto}
.transcript .msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent2),#5a3fd6);
  color:#fff;border-bottom-right-radius:5px}
.transcript .msg.ai{align-self:flex-start;background:rgba(18,26,51,.85);border:1px solid rgba(0,229,255,.25);
  color:var(--text);border-bottom-left-radius:5px}
.transcript .msg.ai .tag{font-size:11px;color:var(--accent);margin-bottom:3px;font-weight:600}
.transcript .msg .typing{display:inline-block;width:6px;animation:blink 1s infinite}

/* ===== CONTROLS ===== */
.controls{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 16px 22px;
  background:linear-gradient(180deg,transparent,rgba(6,9,18,.9) 30%);z-index:5}
.mic-container{position:relative;width:80px;height:80px}
.mic-btn{width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#060912;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
  box-shadow:0 0 30px rgba(0,229,255,.4),0 8px 24px rgba(0,0,0,.4);transition:.2s}
.mic-btn:hover{transform:scale(1.05)}
.mic-btn.recording{background:linear-gradient(135deg,var(--pink),#c92b6b);
  box-shadow:0 0 40px rgba(255,77,141,.6)}
.mic-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  opacity:0;z-index:1}
.mic-btn.recording ~ .mic-pulse{animation:ripple 1.5s infinite}
.control-row{display:flex;gap:10px;align-items:center}
.ctrl-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(124,92,255,.3);
  background:var(--bg2);color:var(--text);font-size:18px;cursor:pointer;opacity:.55;transition:.2s}
.ctrl-btn.active{opacity:1;border-color:var(--accent);box-shadow:0 0 12px rgba(0,229,255,.3)}
.text-form{display:flex;gap:8px;width:100%;max-width:560px}
.text-form input{flex:1;padding:13px 16px;border-radius:12px;border:1px solid rgba(124,92,255,.3);
  background:var(--bg2);color:var(--text);font-size:15px;outline:none}
.text-form input:focus{border-color:var(--accent)}
.text-form button{width:48px;border:none;border-radius:12px;cursor:pointer;font-size:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#060912}
.attach-btn{width:48px;border:1px solid rgba(124,92,255,.3)!important;border-radius:12px!important;
  background:var(--bg2)!important;color:var(--text)!important;font-size:17px!important;cursor:pointer;
  flex-shrink:0}
.attach-btn:hover{border-color:var(--accent)!important}
.chat-img{max-width:220px;max-height:220px;border-radius:12px;display:block;margin-bottom:6px;
  border:1px solid rgba(0,229,255,.25)}
.img-caption{font-size:12px;color:var(--dim);margin-top:4px;word-break:break-word;line-height:1.4}

/* ===== ANIMATIONS ===== */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blink{0%,90%,100%{opacity:1}93%,97%{opacity:.2}}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(1.4);opacity:.5}}
@keyframes pulse-fast{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.6)}}
@keyframes eye-talk{from{height:18px}to{height:8px}}
@keyframes eye-listen{from{transform:scale(1)}to{transform:scale(1.3)}}
@keyframes mouth-talk{from{height:4px;width:20px}to{height:14px;width:38px}}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:480px){
  .robot{width:130px;height:170px}
  .head{width:105px;height:82px}
  .transcript .msg{font-size:14px}
  .chat-img{max-width:160px;max-height:160px}
}
@media(max-height:720px){
  .robot{width:120px;height:150px}
  .head{width:96px;height:74px}
  .robot-wrap{gap:6px;padding-top:2px}
  .status-text{font-size:13px;min-height:18px}
}

/* ===== HAMBURGER ===== */
.hamburger{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:10px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ===== ALWAYS-LISTEN BUTTON ===== */
#alwaysBtn.active{opacity:1;border-color:var(--green);box-shadow:0 0 14px rgba(0,255,163,.4)}
#alwaysBtn.active{color:var(--green)}

/* ===== SERVICE BANNER ===== */
.service-banner{position:fixed;top:56px;left:0;right:0;background:rgba(255,77,141,.95);
  color:#fff;text-align:center;padding:8px;font-size:14px;font-weight:600;z-index:50}

/* ===== DRAWER ===== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:100}
.drawer{position:fixed;top:0;right:0;bottom:0;width:330px;max-width:85vw;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border-left:1px solid rgba(124,92,255,.3);z-index:101;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;padding:16px}
.drawer.open{transform:translateX(0);box-shadow:-10px 0 50px rgba(0,0,0,.5)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer-profile{display:flex;align-items:center;gap:12px;min-width:0}
.drawer-profile .avatar{width:42px;height:42px;font-size:18px}
.drawer-profile .dp-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-profile .dp-email{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  background:none;border:none;color:var(--text);font-size:15px;cursor:pointer;border-radius:12px;text-align:left;transition:.15s}
.drawer-item:hover{background:rgba(124,92,255,.12)}
.drawer-item span:not(.slider){flex:1}
.drawer-item.logout{color:var(--pink)}
.drawer-item.logout:hover{background:rgba(255,77,141,.12)}
.drawer-sep{border:none;border-top:1px solid rgba(124,92,255,.15);margin:12px 0}

/* voice gender picker */
.vg-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;
  background:none;border:none;color:var(--text);font-size:15px;border-radius:12px}
.vg-row > span:first-of-type{flex:1}
.vg-group{display:flex;gap:3px;background:var(--bg2);border-radius:9px;padding:3px;
  border:1px solid rgba(124,92,255,.25);flex:0 0 auto}
.vg-btn{border:none;background:none;color:var(--dim);font-size:12px;padding:5px 9px;
  border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap}
.vg-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#060912;font-weight:600}
.vg-btn:hover:not(.active){background:rgba(124,92,255,.2);color:var(--text)}

/* switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto!important}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--bg2);border:1px solid rgba(124,92,255,.3);
  border-radius:24px;transition:.25s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;
  background:var(--dim);border-radius:50%;transition:.25s}
.switch input:checked + .slider{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent}
.switch input:checked + .slider:before{transform:translateX(18px);background:#fff}

/* ===== ADMIN PANEL ===== */
.admin-panel{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.admin-title{font-size:17px;color:var(--accent);margin-bottom:4px}
.admin-sub{font-size:13px;color:var(--dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-card{background:var(--bg2);border:1px solid rgba(124,92,255,.2);border-radius:12px;padding:10px;text-align:center}
.stat-card .num{font-size:22px;font-weight:700;color:var(--accent)}
.stat-card .lbl{font-size:11px;color:var(--dim);margin-top:2px}
.btn-kill{width:100%;padding:12px;border:none;border-radius:12px;font-size:14px;font-weight:600;
  cursor:pointer;background:linear-gradient(135deg,var(--pink),#c92b6b);color:#fff;transition:.2s}
.btn-kill:hover{filter:brightness(1.1)}
.btn-kill.revive{background:linear-gradient(135deg,var(--green),#00b873);color:#060912}
.admin-users,.admin-models{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}
.user-row,.model-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);
  border:1px solid rgba(124,92,255,.15);border-radius:10px;font-size:13px}
.user-row .ur-info{flex:1;min-width:0}
.user-row .ur-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .ur-email{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .ur-actions,.model-row .mr-actions{display:flex;gap:4px}
.mini-btn{padding:5px 9px;border:none;border-radius:7px;font-size:12px;cursor:pointer;
  background:rgba(124,92,255,.2);color:var(--text);transition:.15s}
.mini-btn:hover{background:rgba(124,92,255,.35)}
.mini-btn.danger{background:rgba(255,77,141,.2);color:var(--pink)}
.mini-btn.danger:hover{background:rgba(255,77,141,.35)}
.mini-btn.warn{background:rgba(255,193,7,.2);color:#ffc107}
.mini-btn.warn:hover{background:rgba(255,193,7,.35)}
.model-row .mr-name{flex:1;font-family:monospace;font-size:12px}
.model-row .mr-status{font-size:10px;padding:2px 6px;border-radius:6px}
.model-row .mr-status.on{background:rgba(0,255,163,.15);color:var(--green)}
.model-row .mr-status.off{background:rgba(255,77,141,.15);color:var(--pink)}
.add-model-form{display:flex;gap:6px;margin-top:8px}
.add-model-form input{flex:1;padding:9px 11px;border-radius:9px;border:1px solid rgba(124,92,255,.3);
  background:var(--bg2);color:var(--text);font-size:13px;outline:none}
.add-model-form input:focus{border-color:var(--accent)}
.add-model-form button{padding:9px 14px;border:none;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#060912}

/* ===== NAME SETUP / LINK BTN ===== */
#nameSetupScreen{align-items:center;justify-content:center;background:
  radial-gradient(circle at 30% 20%,rgba(0,255,163,.12),transparent 50%),
  radial-gradient(circle at 70% 80%,rgba(0,229,255,.12),transparent 50%),
  var(--bg);}
.link-btn{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;
  text-decoration:underline;padding:0 0 0 6px;}
.link-btn:hover{color:#fff}