:root{
  --bg: #0d0f14;
  --panel: #171a22;
  --muted: #242832;
  --text: #e7edf5;
  --text-dim: #b8c1cc;

  --danger: #ff4d4f;

  --pill-bg: #2a2f3a;
  --pill-border: #2f3541;
  --pill-hover: #313745;

  /* Zaip */
  --accent: #1fd7e0;
  --accent-shadow: #1fd7e055;

  --rec-bar-bg:#1f242e;
  --rec-bar-br:#2b3240;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; flex-direction:column;
}

/* ===== Header ===== */
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px; background:#0f1218; border-bottom:1px solid #141821;
}
.brand img{ height:26px; display:block; }

.cid-ctl{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.cid-label{
  color:var(--text-dim); font-size:12px; opacity:.8;
}
.cid-view{
  font-size:12px; color:#a9b3bf; background:#121620; border:1px dashed #1b2230;
  padding:6px 10px; border-radius:10px; user-select:text;
}
.ghost-btn{
  background:transparent; color:#9fb3c7; border:1px solid #293142;
  padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px;
}
.ghost-btn:hover{ background:#202532; }
.solid-btn{
  background:var(--accent); color:#001317; border:none;
  padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px;
  box-shadow: 0 4px 12px var(--accent-shadow);
}
.cid-edit{ display:flex; align-items:center; gap:8px; }
.cid-edit input{
  width:360px; max-width:60vw;
  padding:8px 10px; border-radius:10px; border:1px solid #2b2f36; background:#0f131a; color:var(--text);
  font-size:13px;
}
.hidden{ display:none !important; }

/* ===== Chat ===== */
.chat-wrap{ flex:1; display:flex; justify-content:center; }
.chat{
  width:100%; max-width:980px; padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;
}
.msg{
  max-width:78%; padding:12px 14px; line-height:1.55; white-space:pre-wrap; border-radius:14px;
}
.user{
  align-self:flex-end; background:var(--accent); color:#0a0f12;
  border:1px solid #119aa1; border-bottom-right-radius:6px;
}
.assistant{ align-self:flex-start; background:var(--panel); border:1px solid #222735; border-bottom-left-radius:6px; }
.error{
  align-self:center; background:#3b1c1c; border:1px solid var(--danger); color:#ffd7d7;
  border-radius:10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding:12px 16px;
}
.typing::after{
  content:" "; display:inline-block; width:8px; height:18px; border-right:2px solid #9ad0ff;
  animation: blink 1s steps(1) infinite; margin-left:2px;
}
@keyframes blink { 50%{ border-color:transparent; } }

/* ===== Rec bar ===== */
.rec-bar{
  width:100%; max-width:980px; margin:6px auto 0;
  display:flex; align-items:center; gap:10px;
  background:var(--rec-bar-bg); border:1px solid var(--rec-bar-br);
  border-radius:12px; padding:6px 10px;
}
.rec-dot{
  width:10px; height:10px; border-radius:999px; background:#ff4d4f;
  box-shadow: 0 0 0 0 rgba(255,77,79,.7);
  animation: pulse 1.4s infinite;
}
@keyframes pulse{
  0% { box-shadow:0 0 0 0 rgba(255,77,79,.7); }
  70%{ box-shadow:0 0 0 10px rgba(255,77,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,79,0); }
}
.rec-timer{ font-variant-numeric: tabular-nums; color:#ffd7d7; font-weight:600; }
.rec-viz{ width:160px; height:28px; background:#151a22; border-radius:8px; }

/* ===== Composer ===== */
.composer2{ border-top:1px solid #141821; background:#0f1218; padding:12px 16px 18px; }
.pill-form{
  width:100%; max-width:980px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center;
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  border-radius:28px;
  padding:10px 10px 10px 16px;
}
.pill-form:hover{ background:var(--pill-hover); }

#msg{
  width:100%; border:none; background:transparent; color:var(--text);
  padding:8px 6px; outline:none; font-size:15px;
}
#msg::placeholder{ color:#97a1af; }

.icon-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border:none; background:transparent; color:#cfd6e1; cursor:pointer; border-radius:999px;
}
.icon-btn:hover{ background:#353b48; }
.mic.rec{ background:#c1121f !important; color:#fff; box-shadow:0 0 0 4px #c1121f33; }

.send-btn{
  width:42px; height:42px; border-radius:999px; border:none;
  background: linear-gradient(180deg, var(--accent), var(--accent));
  color:#001317; display:grid; place-items:center; cursor:pointer;
  box-shadow: 0 6px 18px var(--accent-shadow), inset 0 0 0 1px #ffffff1a;
}
.send-btn:hover{ filter:brightness(1.05); }

.hint{ margin-top:10px; text-align:center; color:var(--text-dim); font-size:12px; }

/* ===== responsive ===== */
@media (max-width:640px){
  .cid-edit input{ width: min(70vw, 360px); }
  .msg{ max-width:90%; }
  .pill-form{ grid-template-columns:1fr auto auto auto; }
  .rec-viz{ width:120px; }
}