/* ═══════════════════════════════════════════════════════════════
   chat-core.css — shared between admin UI and /widget
   Referenced by:
     admin:  /css/chat.css imports this (or links directly)
     widget: <link href="/shared/chat-core.css">
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --bg:     #0d0f12;
  --surf:   #13161c;
  --panel:  #181c24;
  --b1:     #23272f;
  --b2:     #2c3240;
  --t1:     #e8eaf0;
  --t2:     #8892a4;
  --t3:     #4f5a6e;
  --ac:     #3b7cf7;
  --ac2:    #2563d4;
  --acbg:   rgba(59,124,247,.09);
  --gr:     #22c55e;
  --grbg:   rgba(34,197,94,.08);
  --re:     #ef4444;
  --r:      10px;
  --mono:   'DM Mono', monospace;
  --sans:   'DM Sans', system-ui, sans-serif;
}

/* ── Message rows ────────────────────────────────────────────── */
.msg-row {
  display: flex;
  padding: 4px 14px;
  gap: 9px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  animation: msg-in .18s ease;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 640px) { .msg-row { padding: 4px 12px; gap: 8px; } }
@media (max-width: 380px) { .msg-row { padding: 4px 8px;  gap: 6px; } }

/* ── Avatar ──────────────────────────────────────────────────── */
.av {
  width: 28px; height: 28px;
  border-radius: 7px;
  flex-shrink: 0; min-width: 28px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.av-bot  { background: var(--ac);    color: #fff; }
.av-user { background: var(--panel); color: var(--t2); border: 1px solid var(--b2); }

/* ── Bubble ──────────────────────────────────────────────────── */
.bubble   { flex: 1; min-width: 0; }
.bub-name {
  font-size: 10px; color: var(--t3); font-weight: 500;
  margin-bottom: 3px; font-family: var(--mono);
}
.bub-text { font-size: 14px; line-height: 1.65; color: var(--t1); }
.bub-text p            { margin-bottom: 6px; }
.bub-text p:last-child { margin-bottom: 0; }

/* ── Stage tag ───────────────────────────────────────────────── */
.stage-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 2px 7px;
  background: var(--acbg); border-radius: 20px;
  font-size: 10px; font-family: var(--mono); color: var(--t3);
}
.stage-dot { width: 4px; height: 4px; background: var(--ac); border-radius: 50%; }

/* ── Typing indicator ────────────────────────────────────────── */
.typing { display: flex; gap: 4px; padding: 3px 0; align-items: center; }
.typing span {
  width: 5px; height: 5px;
  background: var(--t3); border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

/* ── Quick-start buttons ─────────────────────────────────────── */
.quick-btns {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 10px;
}
.quick-btn {
  padding: 9px 16px; min-height: 44px;
  background: var(--panel); border: 1px solid var(--b2);
  color: var(--t2); border-radius: 20px;
  font-size: 13px; font-family: var(--sans);
  cursor: pointer; transition: .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}
.quick-btn:hover  { background: var(--acbg); border-color: rgba(59,124,247,.3); color: var(--ac); }
.quick-btn:active { opacity: .75; transform: scale(.97); }

/* ── Input area ──────────────────────────────────────────────── */
.input-area {
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--b1);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 640px) {
  .input-area { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

.input-box {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surf); border: 1px solid var(--b2);
  border-radius: 14px; padding: 8px 8px 8px 14px;
  transition: border-color .15s;
}
.input-box:focus-within {
  border-color: rgba(59,124,247,.5);
  box-shadow: 0 0 0 3px rgba(59,124,247,.06);
}
.input-box textarea {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--t1); font-family: var(--sans);
  font-size: 16px; /* 16px = no iOS auto-zoom */
  line-height: 1.45; resize: none;
  min-height: 26px; max-height: 130px;
  -webkit-appearance: none; padding: 0;
}
.input-box textarea::placeholder { color: var(--t3); }

.send-btn {
  width: 36px; height: 36px; min-width: 36px;
  background: var(--ac); border: none; border-radius: 9px;
  color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  transition: .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.send-btn:hover  { background: var(--ac2); }
.send-btn:active { transform: scale(.88); }
.send-btn:disabled { background: var(--b2); opacity: .5; cursor: not-allowed; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes msg-in { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
@keyframes bounce { 0%,60%,100% { transform:none } 30% { transform:translateY(-5px) } }