* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #f5c542;
  --gold-soft: #ffdd7a;
  --red-deep: #7f1010;
  --red-glow: #e03131;
  --bg-1: #170404;
  --bg-2: #2a0808;
  --card: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --text: #f7f1e8;
  --text-dim: rgba(247, 241, 232, 0.65);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Be Vietnam Pro", "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(224, 49, 49, 0.28), transparent 60%),
    linear-gradient(170deg, var(--bg-2) 0%, var(--bg-1) 55%, #0d0202 100%);
  min-height: 100vh;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Quang sang vang nhe phia sau orb */
#bg-glow {
  position: fixed;
  top: 22%;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(245, 197, 66, 0.10) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Header ===== */
header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 22px 16px;
}
header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 84%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 66, 0.55), transparent);
}
header .badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffe9a3, #d9a713 68%, #9a7208);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow:
    0 0 0 3px rgba(245, 197, 66, 0.25),
    0 6px 22px rgba(245, 197, 66, 0.35);
}
.head-text h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #fff6df, var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head-text p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* ===== Main ===== */
main {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ===== Mode toggle ===== */
#mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 5px;
}
.mode-btn, #summary-btn {
  border: none;
  background: transparent;
  color: var(--text);
  opacity: 0.7;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s ease;
}
.mode-btn:hover, #summary-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.mode-btn.active {
  background: linear-gradient(135deg, var(--gold), #e0a922);
  color: #4a3305;
  font-weight: 700;
  opacity: 1;
  box-shadow: 0 3px 14px rgba(245, 197, 66, 0.35);
}

/* ===== Orb + rings + visualizer ===== */
#orb-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#orb-rings {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.4s;
}
.ring-1 {
  border: 1.5px solid rgba(245, 197, 66, 0.35);
  animation: spin 14s linear infinite;
  border-top-color: rgba(245, 197, 66, 0.9);
}
.ring-2 {
  inset: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  animation: spin 26s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

#orb {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 46px;
  color: #fff;
  background: radial-gradient(circle at 34% 28%, #ff9d9d, var(--red-glow) 45%, var(--red-deep) 90%);
  box-shadow:
    inset 0 -10px 24px rgba(0, 0, 0, 0.35),
    0 10px 34px rgba(224, 49, 49, 0.45);
  transition: transform 0.18s ease, box-shadow 0.4s ease, background 0.4s ease;
}
#orb:hover { transform: scale(1.045); }
#orb:active { transform: scale(0.97); }

/* Trang thai: nghe / suy nghi / noi */
#orb.listening {
  background: radial-gradient(circle at 34% 28%, #a9f5c3, #23b45c 45%, #0c5c2c 90%);
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.3), 0 10px 40px rgba(35, 180, 92, 0.5);
  animation: breathe 1.8s ease-in-out infinite;
}
#orb.thinking {
  background: radial-gradient(circle at 34% 28%, #ffe29a, #e8a51d 45%, #8a5d06 90%);
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.3), 0 10px 40px rgba(232, 165, 29, 0.5);
}
#orb.speaking {
  background: radial-gradient(circle at 34% 28%, #a8ccff, #3a7bd5 45%, #14386e 90%);
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.3), 0 10px 40px rgba(58, 123, 213, 0.55);
  animation: breathe 1.1s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
#orb.thinking + #viz, #orb.thinking ~ #viz { opacity: 0.9; }
#orb-rings:has(#orb.thinking) .ring-1 { animation-duration: 2.2s; }
#orb-rings:has(#orb.listening) .ring-1 { border-color: rgba(35, 180, 92, 0.4); border-top-color: #4ade80; }
#orb-rings:has(#orb.speaking) .ring-1 { border-color: rgba(58, 123, 213, 0.4); border-top-color: #93c5fd; }

/* Song am thanh */
#viz {
  width: min(560px, 92vw);
  height: 56px;
  opacity: 0.85;
}

#status {
  font-size: 14px;
  font-weight: 500;
  min-height: 34px;
  color: var(--text-dim);
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  padding: 7px 18px;
  border-radius: 999px;
}

/* ===== Hoi thoai ===== */
#conversation {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.msg {
  position: relative;
  padding: 12px 16px;
  border-radius: 16px;
  max-width: 82%;
  line-height: 1.6;
  font-size: 15px;
  white-space: pre-wrap;
  animation: rise 0.3s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #fff8ea, #f7e8c8);
  color: #5a1010;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.msg.assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 5px;
  border-left: 2.5px solid rgba(245, 197, 66, 0.65);
}
.msg.interim { opacity: 0.55; font-style: italic; }

/* ===== Panels ===== */
#validity, #summary-panel {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13.5px;
  animation: rise 0.3s ease both;
}
#validity h3, #summary-panel h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; color: var(--gold-soft); }
#validity li { margin-left: 18px; margin-bottom: 5px; line-height: 1.5; }
#validity li.expired { color: #ff9d9d; font-weight: 700; }
#validity li.valid { color: #86efac; }
#validity li.partial { color: var(--gold-soft); }
#validity li.unknown { opacity: 0.7; }

#summary-panel pre {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.6;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
  font-size: 13.5px;
}
.summary-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.summary-actions button {
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  font-family: inherit;
  background: linear-gradient(135deg, var(--gold), #e0a922);
  color: #4a3305;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.summary-actions button:hover { transform: translateY(-1px); }
.summary-actions #summary-close { background: rgba(255, 255, 255, 0.16); color: var(--text); font-weight: 500; }

/* ===== O nhap chu ===== */
#text-fallback {
  width: 100%;
  display: flex;
  gap: 10px;
}
#text-input {
  flex: 1;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#text-input::placeholder { color: rgba(247, 241, 232, 0.4); }
#text-input:focus {
  border-color: rgba(245, 197, 66, 0.6);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.15);
}
#text-send {
  padding: 13px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--gold), #e0a922);
  color: #4a3305;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(245, 197, 66, 0.3);
}
#text-send:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(245, 197, 66, 0.45); }
#text-send span { font-size: 13px; }

/* ===== Footer ===== */
footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-dim);
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ===== Mobile ===== */
@media (max-width: 560px) {
  header .badge { width: 46px; height: 46px; font-size: 22px; }
  .head-text h1 { font-size: 18px; }
  .head-text p { font-size: 9.5px; letter-spacing: 1.6px; }
  #orb-rings { width: 138px; height: 138px; }
  #orb { width: 106px; height: 106px; font-size: 38px; }
  .msg { max-width: 90%; font-size: 14.5px; }
  #conversation { max-height: 40vh; }
  .mode-btn, #summary-btn { padding: 8px 13px; font-size: 13px; }
}