/* aitt.css — AI Tamil Tutor styles */

/* ---------- Chat widget container ---------- */
.aitt-widget {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  max-width: 640px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #fff;
}

/* If JS renders .aitt inside the mount */
.aitt,
.aitt-widget .aitt {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  max-width: 640px;
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Top bar: filters + tabs */
.aitt-top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }

.aitt-filters { display:flex; gap:8px; align-items:center; }
.aitt-filters label { font-size:13px; color:#374151; display:flex; gap:6px; align-items:center; }
.aitt-filters select,
.aitt-filters input[type="text"] {
  padding:6px 8px; border:1px solid #d1d5db; border-radius:8px; background:#fff; font-size:14px;
}

.aitt-tabs { margin-left:auto; display:flex; gap:6px; }
.aitt-tab {
  padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; background:#f3f4f6;
  font-size:14px; cursor:pointer;
}
.aitt-tab:hover { background:#e5e7eb; }
.aitt-tab--active { background:#2563eb; color:#fff; border-color:#2563eb; }

/* Panels */
.aitt-panel { width:100%; }

/* ---------- Transcript area ---------- */
.aitt-chat-log {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px;
  background: #fafafa;
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 15px;
  margin-bottom: 8px;
}
.aitt-row { display:flex; margin:4px 0; }
.aitt-row--user { justify-content: flex-end; }
.aitt-row--bot  { justify-content: flex-start; }

.aitt-bubble {
  margin: 4px 0;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 85%;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.aitt-bubble.user { background:#2563eb; color:#fff; }
.aitt-bubble.bot  { background:#f3f4f6; color:#111827; }

/* Typing dots animation */
.aitt-typing { display:flex; gap:3px; }
.aitt-dot { width:6px; height:6px; background:#9ca3af; border-radius:50%; animation: aitt-blink 1.2s infinite ease-in-out; }
.aitt-dot:nth-child(2){ animation-delay: .2s; }
.aitt-dot:nth-child(3){ animation-delay: .4s; }
@keyframes aitt-blink { 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }

/* ---------- Input & Send ---------- */
.aitt-chat-input { display:flex; gap:6px; }
#aitt-q {
  flex:1;
  min-height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  background: #fff;
}
#aitt-send {
  padding: 6px 12px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
#aitt-send:hover { background: #1e40af; }
#aitt-send:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Results chips (if used by your JS) ---------- */
.aitt-results { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; font-size:13px; }
.aitt-chip { border:1px solid #d1d5db; border-radius:16px; padding:2px 8px; background:#f9fafb; cursor:pointer; }
.aitt-chip.is-active { background:#2563eb; color:#fff; border-color:#2563eb; }

/* ---------- Drill cards ---------- */
.aitt-qcard {
  background:#fff; border:1px solid #eee; border-radius:12px; padding:14px; margin-bottom:10px;
}
.aitt-q-ta { font-size:1.05rem; font-weight:600; margin-bottom:6px; }
.aitt-q-en { color:#6b7280; margin-bottom:10px; font-size:14px; }
.aitt-ans { display:flex; flex-direction:column; gap:6px; }

/* ---------- Interactive Quiz ---------- */
.aitt-opt {
  display:block; width:100%; text-align:left;
  margin:2px 0; padding:10px 12px;
  border:1px solid #d1d5db; border-radius:10px; background:#fafafa; cursor:pointer; font-size:14px;
}
.aitt-opt:hover { background:#f3f4f6; }
.aitt-opt--correct { border-color:#2e7d32; background:#e8f5e9; }
.aitt-opt--wrong   { border-color:#c62828; background:#ffebee; }

.aitt-fill {
  width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; background:#fff;
}
.aitt-fill--correct { border-color:#2e7d32; background:#e8f5e9; }
.aitt-fill--wrong   { border-color:#c62828; background:#ffebee; }
.aitt-check {
  align-self:flex-start; padding:6px 10px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer;
}
.aitt-check:hover { background:#f3f4f6; }

.aitt-drill-score { margin-top:6px; font-size:14px; }
.aitt-finish { text-align:center; padding:10px; }
#aitt-again {
  padding:6px 12px; border-radius:8px; background:#2563eb; color:#fff; border:none; font-size:14px; cursor:pointer;
}
#aitt-again:hover { background:#1e40af; }

/* ---------- Toast ---------- */
.aitt-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  animation: aitt-fadein .3s, aitt-fadeout .3s 1.8s forwards;
}
@keyframes aitt-fadein { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes aitt-fadeout { to{opacity:0; transform:translateY(10px);} }

/* ---------- Misc ---------- */
.aitt-hint { margin-top: 6px; font-size: 13px; color: #6b7280; }
.aitt-muted { font-size: 12px; color: #6b7280; }

/* Optional mic styles (not used yet) */
#aitt-mic {
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  cursor: pointer;
}
#aitt-mic:hover { background: #e5e7eb; }
#aitt-mic:disabled { opacity: .5; cursor: not-allowed; }

/* Status line above chat log */
.aitt-status {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 6px 2px;
  min-height: 16px; /* keeps layout stable */
}

/* Turn container (boxed card) */
.aitt-row { display:block; margin:10px 0; }
.aitt-msg {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  max-width: 95%;
}
.aitt-row--user .aitt-msg { margin-left: auto; }   /* aligns user to right */
.aitt-row--bot  .aitt-msg { margin-right: auto; }  /* bot to left */

.aitt-msg-head {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 4px;
}

/* Keep your existing bubble colors but within a card */
.aitt-bubble.user { background:#2563eb; color:#fff; border-radius:10px; }
.aitt-bubble.bot  { background:#f3f4f6; color:#111827; border-radius:10px; }

/* Space between header and bubble content on desktop */
@media (min-width: 768px) {
  .aitt-bubble { margin-top: 4px; }
}
/* Chat log layout (desktop-friendly spacing) */
.aitt-chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;            /* visual separation between turns */
  padding: 8px;
}

/* Status line above chat log */
.aitt-status {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 6px 2px;
  min-height: 16px;     /* keeps layout stable */
}

/* Chat turns (avoid clash with existing .aitt-row used elsewhere) */
.aitt-turn { display: block; }
.aitt-msg {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  max-width: 95%;
}
.aitt-turn--user .aitt-msg { margin-left: auto; }   /* user to right */
.aitt-turn--bot  .aitt-msg { margin-right: auto; }  /* bot to left */

.aitt-msg-head {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 4px;
}

/* Keep bubble colors, but inside the message card */
.aitt-bubble.user { background:#2563eb; color:#fff; border-radius:10px; padding:8px 10px; }
.aitt-bubble.bot  { background:#f3f4f6; color:#111827; border-radius:10px; padding:8px 10px; }

/* Markdown inside bot replies */
.aitt-bubble.bot .aitt-md p { margin: 6px 0; }
.aitt-bubble.bot .aitt-md ul,
.aitt-bubble.bot .aitt-md ol { margin: 6px 0 6px 18px; padding:0; }
.aitt-bubble.bot .aitt-md li { margin: 4px 0; }
.aitt-bubble.bot .aitt-md code {
  background:#eee; padding:2px 4px; border-radius:4px; font-family: monospace;
}
.aitt-bubble.bot .aitt-md pre {
  background:#f4f4f4; padding:8px; border-radius:6px; overflow-x:auto;
}
.aitt-bubble.bot .aitt-md a { color:#2563eb; text-decoration:underline; }
/* Media toolbar under bot replies */
.aitt-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.aitt-tools-left { display:flex; align-items:center; gap:8px; }
.aitt-tools-right { display:flex; align-items:center; gap:8px; }

.aitt-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: block;
}
.aitt-tts-btn {
  border: 1px solid #d1d5db;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.aitt-tts-btn:hover { background: #eef2f7; }
/* Media toolbar under bot replies */
.aitt-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.aitt-tools-left { display:flex; align-items:center; gap:8px; }
.aitt-tools-right { display:flex; align-items:center; gap:8px; }

.aitt-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: block;
}

.aitt-tts-btn {
  border: 1px solid #d1d5db;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.aitt-tts-btn:hover { background: #eef2f7; }
.aitt-tts-btn:disabled { opacity: .6; cursor: not-allowed; }

/* === Patch: Chat & Drill formatting; ensure visible selects === */
.aitt-bubble{
  white-space: pre-wrap;
  line-height: 1.4;
}
.aitt-turn--user .aitt-bubble{
  background:#2563eb;
  color:#fff;
  border-top-right-radius:4px;
}
.aitt-turn--bot .aitt-bubble{
  background:#ffffff;
  color:#111827;
  border:1px solid #e5e7eb;
  border-top-left-radius:4px;
}
/* typing dots */
.aitt-typing{display:inline-flex;gap:4px;align-items:center;}
.aitt-dot{width:6px;height:6px;background:#9ca3af;border-radius:50%;animation:aitt-blink 1.2s infinite;}
.aitt-dot:nth-child(2){animation-delay:.2s}
.aitt-dot:nth-child(3){animation-delay:.4s}
@keyframes aitt-blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* drill */
.aitt-qcard{border:1px solid #e5e7eb;border-radius:10px;padding:12px;margin:10px 0;background:#fff;}
.aitt-q-ta{font-size:18px;font-weight:600;margin-bottom:6px;}
.aitt-q-en{font-size:14px;color:#6b7280;margin-bottom:10px;}

/* make selects render as dropdowns (some themes override this) */
#aitt-category,#aitt-level{
  appearance:auto;
  -webkit-appearance:menulist;
  -moz-appearance:menulist;
  padding-right:2rem;
}