/* Style riêng cho trang Trợ lý AI (public/ai.html) — tách khỏi style.css để cập nhật
   trang AI không ảnh hưởng tới phần Lý thuyết/Flashcard/Quiz/Browse. Vẫn dùng chung
   biến CSS (--primary, --surface...) và class cơ bản (primary-btn, btn-focus...)
   được định nghĩa trong style.css. */

.ai-main { max-width: 760px; margin: 0 auto; padding: 16px 14px 70px; }
.ai-mode-panel { display: flex; flex-direction: column; gap: 12px; }

.ai-corner-controls {
  position: fixed; bottom: 16px; right: 16px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
}
.ai-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer;
  text-decoration: none; box-shadow: var(--shadow); transition: background .15s, border-color .15s;
}
.ai-icon-btn:hover { border-color: var(--primary); }
.ai-icon-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.ai-icon-btn-primary.listening { background: #d63; border-color: #d63; animation: liveMicPulse 1.6s ease-in-out infinite; }
@keyframes liveMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221,102,51,.5); }
  50% { box-shadow: 0 0 0 7px rgba(221,102,51,0); }
}
.ai-corner-divider { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }

#liveOverlayContent { background: var(--bg); }

.live-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  margin-bottom: 14px;
}
.live-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0;
}
.live-status.listening .live-status-dot {
  background: #d63; animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221,102,51,.5); }
  50% { box-shadow: 0 0 0 5px rgba(221,102,51,0); }
}

.live-transcript { font-size: 0.85rem; font-style: italic; color: var(--muted); min-height: 20px; margin-bottom: 12px; }

.live-empty-state {
  text-align: center; padding: 48px 20px; color: var(--muted);
  border: 1.5px dashed var(--border); border-radius: var(--radius);
}
.live-empty-icon { font-size: 2.2rem; margin-bottom: 10px; }
.live-empty-text { font-size: 0.85rem; line-height: 1.6; max-width: 320px; margin: 0 auto; }

.live-answer-box {
  background: var(--amber-lt); border-radius: var(--radius); border-left: 4px solid var(--primary);
  padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
  animation: liveFadeIn .25s ease;
}
@keyframes liveFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.live-question-heard { font-size: 0.76rem; color: var(--muted); margin-bottom: 8px; }
.live-answer-text { font-size: 1.15rem; font-weight: 600; line-height: 1.5; color: var(--ink); }

.live-history-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 8px;
}
.live-history {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
}
.live-history-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; opacity: 0.75; transition: opacity .15s;
}
.live-history-item:hover { opacity: 1; }
.live-history-item .live-answer-text { font-size: 0.9rem; font-weight: 500; }