body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at top, #0a1b2a, #000);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
}
.flobot-container{
  width:min(360px, 92vw);
  height:470px;
  background:rgba(5,93,255,0.16);
  border-radius:50%;
  box-shadow:0 0 42px rgba(5,93,255,0.85);
  text-align:center;
  padding-top:44px;
  border:1px solid rgba(5,93,255,0.35);
  backdrop-filter:blur(10px);
}
.avatar{
  width:128px;height:128px;
  margin:0 auto 10px;
  border-radius:50%;
  background:radial-gradient(circle, #055DFF, #012060 70%);
  box-shadow:0 0 30px rgba(5,93,255,1);
  position:relative; overflow:hidden;
}
.avatar::after{
  content:"";
  position:absolute; inset:-40%;
  background:conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
  animation:sweep 3.2s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg);} }
h2{ margin:8px 0 2px; letter-spacing:.5px;}
.status{ margin:6px 0 0; opacity:.86;}
.controls{ margin-top:18px; display:flex; gap:10px; justify-content:center;}
.call-btn,.hang-btn{
  border:none; color:#fff; font-size:16px;
  padding:12px 18px; border-radius:999px; cursor:pointer;
}
.call-btn{ background:#055DFF;}
.call-btn:hover{ filter:brightness(1.08); }
.hang-btn{ background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22); }
.hang-btn:hover{ filter:brightness(1.08); }
.call-btn:disabled,.hang-btn:disabled{ opacity:.5; cursor:not-allowed; }
.timer{ margin-top:16px; font-size:18px; letter-spacing:.8px;}
.mini{ margin:10px 22px 0; font-size:12px; opacity:.72; line-height:1.3;}