:root{
  --cnia-bg-1: rgba(10, 15, 28, 0.88);
  --cnia-bg-2: rgba(18, 25, 45, 0.92);
  --cnia-border: rgba(255,255,255,0.10);
  --cnia-border-hi: rgba(14,165,233,0.35);
  --cnia-text: #e8eef8;
  --cnia-text-dim: #98a3b8;
  --cnia-accent: #0ea5e9;
  --cnia-accent-2: #38bdf8;
  --cnia-accent-grad: linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);
  --cnia-radius: 18px;
  --cnia-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
}

#cnia-overlay{
  position:fixed; inset:0; z-index:999999;
  background: radial-gradient(circle at 30% 20%, rgba(14,165,233,.10), transparent 45%),
              radial-gradient(circle at 70% 80%, rgba(99,102,241,.10), transparent 45%),
              rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  display:none; align-items:center; justify-content:center;
  padding:14px;
}
#cnia-overlay.open{ display:flex; animation:cniaFade .22s ease; }
@keyframes cniaFade{ from{opacity:0} to{opacity:1} }

#cnia-modal{
  position:relative; width:100%; max-width:660px; max-height:90vh;
  background: linear-gradient(160deg, var(--cnia-bg-1), var(--cnia-bg-2));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--cnia-border);
  border-radius: var(--cnia-radius);
  box-shadow: var(--cnia-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--cnia-text);
  transform: translateY(8px) scale(.98);
  animation: cniaIn .26s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes cniaIn{ to{ transform: translateY(0) scale(1); } }

/* TOPBAR */
.cnia-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 48px 12px 14px;
  background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(99,102,241,.10));
  border-bottom:1px solid var(--cnia-border);
  font-size:11px; line-height:1.3;
}
.cnia-top-left, .cnia-top-right{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cnia-top-left a, .cnia-top-right a{
  color: var(--cnia-text-dim); text-decoration:none; opacity:.9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition: color .15s;
}
.cnia-top-left a:hover, .cnia-top-right a:hover{ color: var(--cnia-accent-2); }
.cnia-top-center{ text-align:center; flex:1; }
.cnia-top-center span{
  font-weight:700; font-size:14px; letter-spacing:.3px;
  background: linear-gradient(90deg,#38bdf8,#a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

#cnia-close{
  position:absolute; top:10px; right:12px;
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1px solid var(--cnia-border);
  color: var(--cnia-text-dim); cursor:pointer; font-size:13px;
  display:grid; place-items:center; transition: all .15s;
}
#cnia-close:hover{ background: rgba(239,68,68,.20); color:#fff; border-color: rgba(239,68,68,.4); transform: rotate(90deg); }

/* LOG */
.cnia-log{
  flex:1; overflow-y:auto; padding:16px;
  background: transparent; font-size:14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
  min-height:180px;
}
.cnia-log::-webkit-scrollbar{ width:6px; }
.cnia-log::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:3px; }

.cnia-welcome{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin-bottom:12px;
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(99,102,241,.06));
  border:1px solid rgba(14,165,233,.18);
  border-radius:14px;
  animation: cniaSlide .3s ease;
}
.cnia-welcome-icon{ font-size:26px; }
.cnia-welcome-text{ font-size:13px; color:var(--cnia-text-dim); line-height:1.5; }
.cnia-welcome-text strong{ color:var(--cnia-text); }

@keyframes cniaSlide{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.cnia-msg{
  margin-bottom:10px; padding:11px 14px; border-radius:14px;
  max-width:92%; word-wrap:break-word; line-height:1.5;
  animation: cniaSlide .25s ease;
  position:relative;
}
.cnia-user{
  background: linear-gradient(135deg,#0ea5e9,#6366f1);
  color:#fff; margin-left:auto; font-weight:500;
  box-shadow: 0 6px 18px rgba(14,165,233,.30);
}
.cnia-bot{
  background: rgba(255,255,255,.05);
  border:1px solid var(--cnia-border);
  color: var(--cnia-text);
}
.cnia-bot a{ color: var(--cnia-accent-2); font-weight:600; text-decoration:none; }
.cnia-bot a:hover{ text-decoration:underline; }

.cnia-listen{
  display:inline-flex; align-items:center; gap:4px;
  background: rgba(14,165,233,.14); color:var(--cnia-accent-2);
  border:1px solid rgba(14,165,233,.25);
  padding:4px 10px; border-radius:20px; font-size:11px;
  cursor:pointer; margin-top:8px; transition: all .15s;
}
.cnia-listen:hover{ background: rgba(14,165,233,.25); transform: translateY(-1px); }

.cnia-typing{ display:inline-flex; gap:3px; align-items:center; }
.cnia-typing span{
  width:6px; height:6px; border-radius:50%; background: var(--cnia-accent-2);
  animation: cniaBounce 1.2s infinite;
}
.cnia-typing span:nth-child(2){ animation-delay:.15s; }
.cnia-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes cniaBounce{ 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* LATEST */
.cnia-latest{
  padding:10px 16px; background: rgba(255,255,255,.02);
  border-top:1px solid var(--cnia-border);
  font-size:12px; color: var(--cnia-text-dim);
}
.cnia-latest strong{ color: var(--cnia-accent-2); display:block; margin-bottom:6px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.cnia-latest ul{ margin:0; padding-left:16px; list-style:none; }
.cnia-latest li{ position:relative; padding-left:0; margin-bottom:4px; }
.cnia-latest li::before{ content:'▸'; color: var(--cnia-accent); margin-right:6px; }
.cnia-latest a{ color: var(--cnia-text); text-decoration:none; transition: color .15s; }
.cnia-latest a:hover{ color: var(--cnia-accent-2); }
.cnia-latest em{ color: var(--cnia-text-dim); font-size:10px; }

/* FORM */
.cnia-form{
  display:flex; gap:8px; padding:12px 14px;
  background: rgba(0,0,0,.20);
  border-top:1px solid var(--cnia-border);
}
.cnia-form input{
  flex:1; padding:13px 16px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--cnia-border);
  border-radius: 26px; color: var(--cnia-text);
  font-size:14px; outline:none; transition: all .2s;
  font-family: inherit;
}
.cnia-form input::placeholder{ color: var(--cnia-text-dim); }
.cnia-form input:focus{
  border-color: var(--cnia-border-hi);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(14,165,233,.10);
}
.cnia-form button{
  border:none; background: rgba(255,255,255,.06);
  color: var(--cnia-text); width:44px; height:44px;
  border-radius:50%; cursor:pointer; font-size:16px;
  display:grid; place-items:center;
  transition: all .18s; border:1px solid var(--cnia-border);
}
.cnia-form button:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
#cnia-send{
  background: var(--cnia-accent-grad); border:none;
  box-shadow: 0 6px 20px rgba(14,165,233,.4);
}
#cnia-send:hover{ box-shadow: 0 8px 26px rgba(14,165,233,.55); }
#cnia-mic.rec{
  background: linear-gradient(135deg,#ef4444,#dc2626);
  animation: cniaPulse 1s infinite;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
}
@keyframes cniaPulse{
  0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70%{ box-shadow: 0 0 0 14px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.cnia-status{ font-size:11px; color: var(--cnia-text-dim); padding:0 16px 10px; min-height:14px; text-align:center; }

.cnia-footer{ display:flex; gap:8px; padding:0 14px 12px; }
.cnia-footer button{
  flex:1; padding:9px; border-radius:10px; cursor:pointer;
  font-size:12px; font-weight:600; border:1px solid var(--cnia-border);
  background: rgba(255,255,255,.04); color: var(--cnia-text-dim);
  transition: all .18s;
}
.cnia-footer button:hover{ background: rgba(255,255,255,.10); color: var(--cnia-text); }
.cnia-install{ border-color: rgba(16,185,129,.35) !important; color: #6ee7b7 !important; }
.cnia-install:hover{ background: rgba(16,185,129,.15) !important; }
.cnia-subscribe{ border-color: rgba(245,158,11,.35) !important; color: #fbbf24 !important; }
.cnia-subscribe:hover{ background: rgba(245,158,11,.15) !important; }
.cnia-subscribe.active{ background: rgba(16,185,129,.18) !important; color:#6ee7b7 !important; border-color: rgba(16,185,129,.4) !important; }

@media (max-width:520px){
  #cnia-modal{ max-height:94vh; border-radius:16px; }
  .cnia-topbar{ font-size:10px; padding:10px 42px 10px 12px; }
  .cnia-top-center span{ font-size:12px; }
  .cnia-log{ padding:12px; }
}