/* assets/chat.css - ChatGPT-like polished UI with round dynamic buttons */

:root{
  --bg: #fbfdff;
  --card: #fff;
  --muted: #6b7280;
  --primary: #2563eb;
  --accent: #10b981;
  --danger: #ef4444;
  --shadow: rgba(2,6,23,0.06);
  --radius: 16px;
  --btn-size: 48px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.aipt-chat {
  max-width: 760px;
  margin: 26px auto;
  background: linear-gradient(180deg,var(--bg),#f7fafc);
  border-radius: var(--radius);
  box-shadow: 0 10px 36px var(--shadow);
  border: 1px solid rgba(2,6,23,0.04);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:480px;
}

/* messages */
.aipt-chat-messages {
  padding: 20px;
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  scroll-behavior:smooth;
}

/* bubbles */
.msg {
  max-width:82%;
  padding:12px 16px;
  border-radius:14px;
  background:var(--card);
  color:#0f172a;
  box-shadow:0 4px 18px rgba(2,6,23,0.03);
  font-size:15px;
  line-height:1.45;
  white-space:pre-wrap;
}
.msg.user {
  align-self:flex-end;
  background: linear-gradient(90deg,var(--primary),#1d4ed8);
  color:#fff;
  border-bottom-right-radius:6px;
}
.msg.ai {
  align-self:flex-start;
  background:#f1f9ff;
  color:#0f172a;
  border-bottom-left-radius:6px;
}
.msg.error { align-self:center; background:#fff1f2; color:#7f1d1d; font-weight:600; }
.msg.stopped { align-self:center; background:#fff7ed; color:#92400e; }

/* typing */
.msg.typing, .msg.typing .thinking-text { font-style:italic; color:var(--muted); background:transparent; box-shadow:none; padding:6px 10px; }
.dots span { display:inline-block; animation: blink 1.4s infinite both; opacity:0.2; margin:0 2px; }
.dots span:nth-child(2){ animation-delay:0.14s; } .dots span:nth-child(3){ animation-delay:0.28s; }
@keyframes blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

/* controls */
.aipt-chat-controls {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border-top:1px solid rgba(2,6,23,0.04);
  position:relative;
}

/* textarea */
.aipt-chat-input {
  flex:1;
  min-height:48px;
  max-height:160px;
  resize:none;
  padding:12px 110px 12px 14px; /* room for send + two small buttons */
  border-radius:12px;
  border:1px solid #e6eef8;
  background:#fbfdff;
  font-size:15px;
  outline:none;
  transition:box-shadow .12s, border-color .12s;
}
.aipt-chat-input:focus { box-shadow:0 10px 24px rgba(37,99,235,0.08); border-color:#cfe3ff; background:#fff; }
.aipt-chat-input::placeholder { color:#94a3b8; }

/* big circular send (becomes stop) */
.aipt-chat-send {
  position:absolute;
  right:18px;
  width:var(--btn-size);
  height:var(--btn-size);
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(90deg,var(--primary),#1d4ed8);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(37,99,235,0.12);
  transition: transform .12s ease, background .12s ease;
}
.aipt-chat-send:hover { transform:translateY(-3px); }
.aipt-icon-send { display:inline-block; }
.aipt-icon-stop { display:inline-block; }
.hidden { display:none !important; }

/* tts toggle and mic (small round) */
.aipt-tts-toggle, .aipt-chat-mic {
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:#f3f4f6;
  color:#374151;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.aipt-tts-toggle.active { background: linear-gradient(90deg,var(--accent),#059669); color:#fff; box-shadow:0 10px 28px rgba(16,185,129,0.12); }
.aipt-chat-mic.listening { background: linear-gradient(90deg,#ef4444,#f43f5e); color:#fff; box-shadow:0 10px 28px rgba(244,63,94,0.12); }
.aipt-tts-toggle:hover, .aipt-chat-mic:hover { transform:translateY(-3px); }

/* TTS controls in bubble */
.tts-controls { margin-top:8px; display:flex; gap:8px; }
.tts-controls button { border:none; background:#e6eef8; color:#0f172a; padding:6px 8px; border-radius:8px; cursor:pointer; }
.tts-controls button.hidden{ display:none !important; }

/* speaking bubble highlight */
.msg.ai.speaking { box-shadow: 0 12px 36px rgba(16,24,40,0.08); }

/* focus outlines */
.aipt-chat-send:focus, .aipt-tts-toggle:focus, .aipt-chat-mic:focus, .tts-controls button:focus { outline: 3px solid rgba(37,99,235,0.12); outline-offset:2px; }

/* responsive */
@media (max-width: 640px) {
  .aipt-chat { margin:12px; border-radius:12px; min-height:420px; }
  .aipt-chat-input { padding-right:96px; }
  .aipt-chat-send { right:12px; width:44px; height:44px; }
  .aipt-tts-toggle, .aipt-chat-mic { width:40px; height:40px; }
  .tts-controls button { padding:6px; font-size:14px; }
}