/* ==========================================================================
   Teamily AI — Advanced Agent console
   Premium dark interface. No dependencies, no build step.
   ========================================================================== */

:root{
  --bg:            #06070d;
  --bg-2:          #0a0c16;
  --surface:       rgba(255,255,255,.040);
  --surface-2:     rgba(255,255,255,.065);
  --surface-3:     rgba(255,255,255,.095);
  --border:        rgba(255,255,255,.085);
  --border-2:      rgba(255,255,255,.14);
  --text:          #e9ebf5;
  --text-2:        #b3b8cd;
  --muted:         #838aa4;
  --accent:        #6366f1;
  --accent-2:      #22d3ee;
  --danger:        #f2555a;
  --ok:            #34d399;
  --radius:        16px;
  --radius-sm:     11px;
  --shadow:        0 20px 50px -22px rgba(0,0,0,.85);
  --font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --side-w:        340px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  font-size:15px;
  line-height:1.55;
}

/* ---------- ambient background ---------- */
.aurora{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(900px 500px at 92% 8%,  rgba(34,211,238,.14), transparent 62%),
    radial-gradient(900px 700px at 62% 108%, rgba(168,85,247,.16), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.42;
  animation:drift 26s ease-in-out infinite;
}
.aurora span:nth-child(1){ width:520px; height:520px; left:-140px; top:-160px; background:#4f46e5; }
.aurora span:nth-child(2){ width:460px; height:460px; right:-120px; top:6%;     background:#0891b2; animation-delay:-9s; }
.aurora span:nth-child(3){ width:600px; height:600px; left:34%; bottom:-320px; background:#7e22ce; animation-delay:-17s; }
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(46px,-38px,0) scale(1.10); }
  66%    { transform:translate3d(-38px,26px,0) scale(.94); }
}

/* ---------- layout ---------- */
.shell{
  position:relative; z-index:1;
  display:flex; height:100vh; height:100dvh; overflow:hidden;
}

/* ====================== SIDEBAR ====================== */
.sidebar{
  width:var(--side-w); flex:0 0 var(--side-w);
  display:flex; flex-direction:column;
  background:rgba(10,12,22,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid var(--border);
  transition:margin-left .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.sidebar.hidden{ margin-left:calc(-1 * var(--side-w)); opacity:0; pointer-events:none; }

.side-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 16px 14px; border-bottom:1px solid var(--border);
  flex:0 0 auto;
}

.brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:1; }

.brand-logo{
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  border-radius:13px;
  background:linear-gradient(150deg, rgba(99,102,241,.24), rgba(34,211,238,.12));
  border:1px solid rgba(129,140,248,.34);
  box-shadow:0 0 22px -6px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.10);
}
.brand-logo svg{ width:24px; height:24px; display:block; }

.brand-txt{ min-width:0; }
.brand-txt h1{
  font-size:17px; font-weight:800; letter-spacing:-.4px; line-height:1.15;
  white-space:nowrap;
}
.brand-txt h1 span{
  background:linear-gradient(92deg,#818cf8,#22d3ee 65%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-left:3px;
}
.brand-sub{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:var(--muted); margin-top:2px;
}

.side-scroll{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:16px 14px 20px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
}
.side-scroll::-webkit-scrollbar{ width:8px; }
.side-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
.side-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:content-box; }

.side-foot{
  padding:11px 16px; border-top:1px solid var(--border);
  font-size:11px; color:var(--muted);
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
}
.pulse{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(34,211,238,.6);
  animation:beat 2.4s infinite;
}
@keyframes beat{
  0%  { box-shadow:0 0 0 0 rgba(34,211,238,.55); }
  70% { box-shadow:0 0 0 8px rgba(34,211,238,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,238,0); }
}

/* ---------- groups ---------- */
.group{ margin-bottom:20px; }
.group:last-child{ margin-bottom:0; }
.group-label{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  padding:0 4px 9px;
}
.group-label i{
  width:5px; height:5px; border-radius:50%; flex:0 0 5px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 0 9px rgba(99,102,241,.85);
}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:13px 13px 14px;
  margin-bottom:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:border-color .2s, background .2s;
}
.card:hover{ border-color:var(--border-2); background:var(--surface-2); }
.card:last-child{ margin-bottom:0; }

.card-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  margin-bottom:10px; color:var(--text);
}

/* ---------- form controls ---------- */
.input{
  width:100%; font-family:inherit; font-size:13px; color:var(--text);
  background:rgba(0,0,0,.34);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:9px 11px; outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.input::placeholder{ color:#5d6480; }
.input:hover{ border-color:var(--border-2); }
.input:focus{
  border-color:rgba(129,140,248,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.17);
  background:rgba(0,0,0,.46);
}
.mono{ font-family:var(--mono); font-size:12px; }
textarea.input{ resize:vertical; line-height:1.5; }
textarea.ta{ min-height:38px; }
select.input{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23838aa4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px;
}
select.input option{ background:#12141f; color:var(--text); }
input.file.input{ padding:7px 9px; font-size:11.5px; cursor:pointer; }
input.file.input::file-selector-button{
  font-family:var(--font); font-size:11.5px; font-weight:600;
  color:var(--text); background:var(--surface-3);
  border:1px solid var(--border-2); border-radius:8px;
  padding:5px 10px; margin-right:9px; cursor:pointer;
  transition:background .16s;
}
input.file.input::file-selector-button:hover{ background:rgba(255,255,255,.15); }

/* ---------- ranges ---------- */
input[type=range]{
  appearance:none; -webkit-appearance:none;
  width:100%; height:5px; border-radius:99px; margin:5px 0 13px;
  background:rgba(255,255,255,.11); cursor:pointer; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(140deg,#a5b4fc,#22d3ee);
  border:2px solid #0b0d18;
  box-shadow:0 0 12px rgba(99,102,241,.9);
  transition:transform .14s;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.18); }
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:2px solid #0b0d18;
  background:linear-gradient(140deg,#a5b4fc,#22d3ee);
  box-shadow:0 0 12px rgba(99,102,241,.9);
}

.lbl{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; font-weight:600; color:var(--text-2); margin-bottom:3px;
}
.lbl b{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:#a5b4fc; background:rgba(99,102,241,.15);
  padding:1px 8px; border-radius:99px;
}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; font-size:13px; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid transparent;
  padding:9px 15px; cursor:pointer; color:var(--text);
  background:var(--surface-2);
  transition:transform .12s, background .16s, border-color .16s, box-shadow .16s, opacity .16s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.sm{ padding:7px 12px; font-size:12px; }
.btn.xs{ padding:4px 9px;  font-size:10.5px; }
.btn.full{ width:100%; margin-top:8px; }

.btn.primary{
  background:linear-gradient(120deg,var(--accent),#4f46e5 48%,var(--accent-2) 128%);
  border-color:rgba(165,180,252,.4); color:#fff;
  box-shadow:0 8px 24px -10px rgba(79,70,229,.95);
}
.btn.primary:hover{ box-shadow:0 12px 30px -10px rgba(79,70,229,1); }
.btn.ghost{ background:var(--surface); border-color:var(--border); color:var(--text-2); }
.btn.ghost:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border-2); }
.btn.danger{ background:rgba(242,85,90,.15); border-color:rgba(242,85,90,.42); color:#ff9b9e; }
.btn.danger:hover{ background:rgba(242,85,90,.25); }
.btn.cta{ margin:20px auto 0; display:block; padding:11px 22px; font-size:13.5px; }

.icon-btn{
  width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  font-size:14px; color:var(--text-2); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; transition:background .16s, color .16s, border-color .16s;
  font-family:inherit;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border-2); }

.row{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.row .btn{ flex:1 1 0; min-width:0; }

/* ---------- hints ---------- */
.hint{ font-size:11px; color:var(--muted); line-height:1.45; margin:7px 0 0; }
.hint.tiny{ font-size:10.5px; margin-top:7px; }
.hint.center{ text-align:center; margin-top:8px; }
.hint b{ color:var(--text-2); font-weight:600; }

/* ---------- status dots ---------- */
.dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 8px; display:inline-block;
  background:#4b5170; transition:background .2s, box-shadow .2s;
}
.dot.on{  background:var(--ok);     box-shadow:0 0 10px rgba(52,211,153,.9); }
.dot.off{ background:var(--danger); box-shadow:0 0 10px rgba(242,85,90,.75); }

/* ====================== MAIN ====================== */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(8,10,18,.55);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  flex:0 0 auto;
}
.topbar-brand{
  font-size:15px; font-weight:800; letter-spacing:-.35px; display:none;
  white-space:nowrap;
}
.topbar-brand span{
  background:linear-gradient(92deg,#818cf8,#22d3ee 65%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-left:2px;
}
.topbar-mid{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  min-width:0; flex-wrap:wrap;
}
.badge{
  font-size:11.5px; font-weight:600; color:#c7cbe4;
  background:var(--surface); border:1px solid var(--border);
  padding:5px 12px; border-radius:99px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px;
}
.conn{
  font-size:11.5px; font-weight:600; color:var(--muted);
  display:flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border);
  padding:5px 12px; border-radius:99px; white-space:nowrap;
}

/* ---------- stream ---------- */
.stream{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:30px 22px 14px;
  scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
}
.stream::-webkit-scrollbar{ width:9px; }
.stream::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
.stream::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:content-box; }

/* ---------- welcome ---------- */
.welcome{
  max-width:660px; margin:5vh auto 0; text-align:center;
  animation:rise .5s ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.welcome-logo{
  width:76px; height:76px; margin:0 auto 20px;
  display:grid; place-items:center; border-radius:22px;
  background:linear-gradient(150deg, rgba(99,102,241,.22), rgba(34,211,238,.10));
  border:1px solid rgba(129,140,248,.32);
  box-shadow:0 0 44px -10px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.10);
}
.welcome-logo svg{ width:42px; height:42px; display:block; }

.welcome h2{
  font-size:40px; font-weight:800; letter-spacing:-1.4px; line-height:1.1;
  margin-bottom:12px;
}
.welcome h2 span{
  background:linear-gradient(92deg,#818cf8,#22d3ee 62%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-left:5px;
}
.tagline{
  font-size:12px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.welcome-desc{
  font-size:14.5px; color:var(--text-2); line-height:1.68;
  max-width:520px; margin:0 auto;
}

.chips{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:26px;
}
.chip{
  font-family:inherit; font-size:12.5px; font-weight:500; color:var(--text-2);
  background:var(--surface); border:1px solid var(--border);
  padding:9px 15px; border-radius:99px; cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .12s;
}
.chip:hover{
  background:var(--surface-3); color:var(--text);
  border-color:rgba(129,140,248,.5); transform:translateY(-2px);
}

/* ---------- messages ---------- */
.msg{
  display:flex; gap:13px; max-width:840px; margin:0 auto 22px;
  animation:rise .32s ease both;
}
.msg-av{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center; font-size:16px;
  background:var(--surface-2); border:1px solid var(--border);
}
.msg-av.brand{
  background:linear-gradient(150deg, rgba(99,102,241,.26), rgba(34,211,238,.12));
  border-color:rgba(129,140,248,.36);
  box-shadow:0 0 18px -6px rgba(99,102,241,.75);
}
.msg-av.brand svg{ width:20px; height:20px; display:block; }

.msg-body{ min-width:0; flex:1; }
.msg-role{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.msg.agent .msg-role{ color:#a5b4fc; }

.msg-text{
  font-size:14.7px; line-height:1.72; color:var(--text);
  word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.user .msg-text{
  background:linear-gradient(120deg, rgba(99,102,241,.19), rgba(34,211,238,.09));
  border:1px solid rgba(129,140,248,.29);
  border-radius:14px; padding:12px 15px; white-space:pre-wrap;
}
.msg-text p{ margin:0 0 11px; }
.msg-text p:last-child{ margin-bottom:0; }
.msg-text h1,.msg-text h2,.msg-text h3{
  font-weight:700; letter-spacing:-.3px; margin:18px 0 9px; line-height:1.3;
}
.msg-text h1{ font-size:21px; }
.msg-text h2{ font-size:18px; }
.msg-text h3{ font-size:15.5px; }
.msg-text ul,.msg-text ol{ margin:0 0 11px; padding-left:24px; }
.msg-text li{ margin-bottom:5px; }
.msg-text hr{ border:none; border-top:1px solid var(--border); margin:16px 0; }
.msg-text blockquote{
  border-left:3px solid rgba(129,140,248,.55);
  padding:3px 0 3px 14px; margin:11px 0; color:var(--text-2);
}
.msg-text a{ color:#7dd3fc; text-decoration:none; }
.msg-text a:hover{ text-decoration:underline; }
.msg-text code{
  font-family:var(--mono); font-size:12.5px;
  background:rgba(99,102,241,.17); color:#c7d2fe;
  padding:2px 6px; border-radius:6px;
}
.msg-text pre{
  position:relative; background:rgba(0,0,0,.52);
  border:1px solid var(--border); border-radius:13px;
  padding:15px; margin:13px 0; overflow-x:auto;
}
.msg-text pre code{
  background:none; color:#dbe2f5; padding:0; font-size:12.5px; line-height:1.62;
}
.copy-btn{
  position:absolute; top:9px; right:9px;
  font-family:var(--font); font-size:10.5px; font-weight:600;
  color:var(--text-2); background:var(--surface-3);
  border:1px solid var(--border-2); border-radius:7px;
  padding:4px 10px; cursor:pointer; transition:background .16s, color .16s;
}
.copy-btn:hover{ background:rgba(255,255,255,.18); color:#fff; }

/* typing indicator */
.typing{ display:inline-flex; gap:5px; align-items:center; padding:7px 0; }
.typing i{
  width:7px; height:7px; border-radius:50%; background:#818cf8;
  animation:bounce 1.35s infinite;
}
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes bounce{
  0%,60%,100%{ transform:translateY(0);    opacity:.36; }
  30%        { transform:translateY(-6px); opacity:1; }
}

/* error box */
.err-box{
  background:rgba(242,85,90,.10);
  border:1px solid rgba(242,85,90,.36);
  border-left:3px solid var(--danger);
  border-radius:12px; padding:13px 15px;
  font-size:13px; line-height:1.62; color:#ffc9cb;
}
.err-box b{ color:#ff9b9e; display:block; margin-bottom:5px; }
.err-box code{
  font-family:var(--mono); font-size:11.5px;
  background:rgba(0,0,0,.34); padding:1px 6px; border-radius:5px; color:#ffd7d9;
}

/* ---------- composer ---------- */
.composer{
  flex:0 0 auto; padding:14px 22px 18px;
  border-top:1px solid var(--border);
  background:rgba(8,10,18,.55);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.composer-inner{
  max-width:840px; margin:0 auto;
  display:flex; gap:10px; align-items:flex-end;
  background:rgba(0,0,0,.40);
  border:1px solid var(--border);
  border-radius:18px; padding:9px 9px 9px 15px;
  transition:border-color .18s, box-shadow .18s;
}
.composer-inner:focus-within{
  border-color:rgba(129,140,248,.62);
  box-shadow:0 0 0 4px rgba(99,102,241,.15), 0 12px 34px -18px rgba(79,70,229,.9);
}
.composer-inner .input{
  flex:1; border:none; background:none; box-shadow:none;
  padding:9px 0; font-size:14.7px; max-height:190px;
}
.composer-inner .input:focus{ border:none; box-shadow:none; background:none; }
.composer-inner .btn{ flex:0 0 auto; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:99;
  background:rgba(18,21,34,.97);
  border:1px solid rgba(129,140,248,.42);
  border-radius:12px; padding:11px 20px;
  font-size:13px; font-weight:500; color:var(--text);
  box-shadow:var(--shadow);
  animation:toastIn .22s ease both;
}
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%,10px); }
  to  { opacity:1; transform:translate(-50%,0); }
}

/* ====================== RESPONSIVE ====================== */
@media (max-width:860px){
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; z-index:50;
    margin-left:calc(-1 * var(--side-w)); opacity:1;
    box-shadow:26px 0 60px -20px rgba(0,0,0,.9);
  }
  .sidebar.open{ margin-left:0; }
  .sidebar.hidden{ margin-left:calc(-1 * var(--side-w)); opacity:1; pointer-events:none; }
  .topbar-brand{ display:block; }
  .topbar{ padding:11px 14px; }
  .topbar-mid{ justify-content:flex-end; }
  .stream{ padding:22px 15px 10px; }
  .composer{ padding:12px 14px 15px; }
  .welcome{ margin-top:3vh; }
  .welcome h2{ font-size:31px; }
  .msg{ gap:11px; }
  .msg-av{ width:32px; height:32px; flex-basis:32px; }
  .badge{ display:none; }
}
@media (max-width:520px){
  .welcome-logo{ width:64px; height:64px; }
  .welcome-logo svg{ width:34px; height:34px; }
  .welcome h2{ font-size:27px; }
  .welcome-desc{ font-size:13.5px; }
  .chips{ gap:7px; }
  .chip{ font-size:11.5px; padding:8px 12px; }
  .msg-text{ font-size:14.2px; }
  .conn span{ display:none; }
}