/* explain-ask widget styles — namespaced under .eaw- to avoid collisions */

.eaw-root {
  --eaw-accent: #22d3ee;
  --eaw-accent-b: #3dd68c;
  --eaw-bg: #080c14;
  --eaw-bg2: rgba(34, 211, 238, 0.055);
  --eaw-bd: rgba(255, 255, 255, 0.10);
  --eaw-bd2: rgba(255, 255, 255, 0.16);
  --eaw-txt: #e7ecf3;
  --eaw-txt2: #c7d0dc;
  --eaw-muted: #7d8aa0;
  --eaw-muted2: #566073;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eaw-bd);
  border-radius: 8px;
  overflow: hidden;
  background: var(--eaw-bg);
  color: var(--eaw-txt);
  min-height: 220px;
  max-height: 60vh;
}

.eaw-hdr {
  padding: 6px 10px;
  flex-shrink: 0;
  background: var(--eaw-bg2);
  border-bottom: 1px solid rgba(34, 211, 238, 0.13);
  display: flex;
  align-items: center;
  gap: 6px;
}
.eaw-hdr-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(34, 211, 238, 0.75);
}
.eaw-explain-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 5px;
  color: var(--eaw-accent);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
}
.eaw-explain-btn:hover { background: rgba(34, 211, 238, 0.22); border-color: rgba(34, 211, 238, 0.65); }
.eaw-explain-btn:disabled { opacity: 0.35; cursor: default; }
@keyframes eawPulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.eaw-explain-btn.loading { animation: eawPulse 1s ease-in-out infinite; }

.eaw-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.eaw-tab {
  flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 600;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--eaw-muted); cursor: pointer; transition: .15s;
}
.eaw-tab.active { color: var(--eaw-accent); border-bottom-color: var(--eaw-accent); }
.eaw-tab:hover:not(.active) { color: var(--eaw-txt); }

.eaw-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* Podcast tab */
.eaw-pane-podcast { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.eaw-pane-chat { display: none; flex-direction: column; flex: 1; min-height: 0; }
.eaw-pane-chat.active { display: flex; }

.eaw-audio-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.05); flex-wrap: wrap;
}
.eaw-zoom-btn {
  background: rgba(255,255,255,.06); border: 1px solid var(--eaw-bd2); border-radius: 5px;
  color: var(--eaw-txt); cursor: pointer; font-size: 12px; padding: 3px 8px;
}
.eaw-zoom-btn:hover { background: rgba(255,255,255,.12); }
.eaw-zoom-btn:disabled { opacity: .35; cursor: default; }
.eaw-progress { flex: 1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; cursor: pointer; position: relative; min-width: 60px; }
.eaw-bar { height: 100%; width: 0%; background: var(--eaw-accent); border-radius: 3px; }
.eaw-speed-btn {
  background: transparent; border: 1px solid var(--eaw-bd2); border-radius: 4px;
  color: var(--eaw-muted); cursor: pointer; font-size: 9.5px; padding: 2px 5px;
}
.eaw-speed-btn.active { color: var(--eaw-accent); border-color: rgba(34,211,238,.5); }
.eaw-dl {
  display: none; text-decoration: none; font-size: 10px; padding: 3px 8px; border-radius: 5px;
  background: rgba(61,214,140,.12); border: 1px solid rgba(61,214,140,.35); color: var(--eaw-accent-b);
  white-space: nowrap;
}
.eaw-dl:hover { background: rgba(61,214,140,.25); }

.eaw-transcript { flex: 1; overflow-y: auto; padding: 8px 12px 6px; font-size: 12px; line-height: 1.65; color: var(--eaw-txt2); }
.eaw-transcript:empty::before { content: attr(data-placeholder); color: var(--eaw-muted2); font-style: italic; }
.eaw-status { font-size: 10.5px; color: var(--eaw-muted); padding: 3px 12px 6px; flex-shrink: 0; }

.eaw-turn { padding: 3px 6px 3px 8px; border-radius: 4px; margin-bottom: 6px; border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
.eaw-turn.playing { background: rgba(255,255,255,.06); border-left-color: rgba(34,211,238,.6); }
.eaw-turn-label { font-weight: 700; font-size: 10.5px; letter-spacing: .06em; margin-right: 6px; }
.eaw-turn-label.a { color: rgba(34,211,238,.90); }
.eaw-turn-label.b { color: rgba(167,243,208,.90); }

/* Chat tab */
.eaw-chat-history { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.eaw-chat-user { align-self: flex-end; max-width: 82%; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.22); border-radius: 10px 10px 2px 10px; padding: 6px 10px; font-size: 12.5px; }
.eaw-chat-bot { align-self: flex-start; max-width: 96%; font-size: 12.5px; }
.eaw-chat-bot-label { font-weight: 700; font-size: 10.5px; letter-spacing: .05em; margin-bottom: 2px; color: rgba(167,243,208,.90); }
.eaw-chat-bot-body { font-style: italic; }
.eaw-chat-replay { background: none; border: none; color: rgba(167,243,208,.45); cursor: pointer; font-size: 10.5px; padding: 2px 0 0; }
.eaw-chat-replay:hover { color: rgba(167,243,208,.9); }
.eaw-chat-typing { color: var(--eaw-muted); font-size: 14px; letter-spacing: 2px; }

.eaw-chat-mic {
  background: rgba(255,255,255,.06); border: 1px solid var(--eaw-bd2); border-radius: 6px;
  color: var(--eaw-txt); cursor: pointer; font-size: 13px; padding: 5px 9px; line-height: 1;
}
.eaw-chat-mic:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.eaw-chat-mic:disabled { opacity: .35; cursor: default; }
.eaw-chat-mic.recording {
  background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.5); color: #f87171;
  animation: eaw-mic-pulse 1.1s ease-in-out infinite;
}
@keyframes eaw-mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.35); } 50% { box-shadow: 0 0 0 6px rgba(248,113,113,0); } }

.eaw-chat-input-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; }
.eaw-chat-input { flex: 1; min-width: 100px; background: rgba(255,255,255,.06); border: 1px solid var(--eaw-bd2); border-radius: 6px; color: var(--eaw-txt); font-size: 12.5px; padding: 6px 8px; outline: none; }
.eaw-chat-input:focus { border-color: rgba(34,211,238,.45); }
.eaw-chat-input::placeholder { color: var(--eaw-muted); }
.eaw-chat-input:disabled { opacity: .4; }
.eaw-chat-send { background: rgba(34,211,238,.14); border: 1px solid rgba(34,211,238,.34); border-radius: 6px; color: var(--eaw-accent); cursor: pointer; font-size: 13px; padding: 5px 10px; }
.eaw-chat-send:hover { background: rgba(34,211,238,.26); }
.eaw-chat-send:disabled { opacity: .35; cursor: default; }
.eaw-chat-speak-lbl { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--eaw-muted); white-space: nowrap; }
.eaw-chat-speak-chk { accent-color: var(--eaw-accent); cursor: pointer; width: 12px; height: 12px; }

.eaw-affect-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.eaw-affect-toggle {
  background: rgba(255,255,255,.06); border: 1px solid var(--eaw-bd2); border-radius: 6px;
  color: var(--eaw-muted); cursor: pointer; font-size: 10.5px; padding: 3px 8px;
}
.eaw-affect-toggle:hover { background: rgba(255,255,255,.12); }
.eaw-affect-toggle.active { color: var(--eaw-accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.eaw-affect-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--eaw-muted); }
.eaw-affect-dot { width: 6px; height: 6px; border-radius: 50%; background: #f87171; animation: eaw-affect-pulse 1.4s ease-in-out infinite; }
@keyframes eaw-affect-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.eaw-affect-consent { padding: 8px 10px; background: rgba(34,211,238,.05); border-bottom: 1px solid rgba(34,211,238,.15); flex-shrink: 0; }
.eaw-affect-consent p { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--eaw-txt2); }
.eaw-affect-consent-btns { display: flex; gap: 6px; }
.eaw-affect-consent-btns button {
  border-radius: 6px; cursor: pointer; font-size: 11px; padding: 5px 10px; border: 1px solid var(--eaw-bd2);
}
.eaw-affect-consent-btns button[data-role="affect-consent-allow"] {
  background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.35); color: var(--eaw-accent);
}
.eaw-affect-consent-btns button[data-role="affect-consent-cancel"] { background: transparent; color: var(--eaw-muted); }

.eaw-chat-video-status { font-size: 10.5px; color: var(--eaw-muted); font-style: italic; margin-top: 4px; }
.eaw-chat-video { display: block; margin-top: 6px; max-width: 220px; border-radius: 8px; border: 1px solid var(--eaw-bd2); }

.eaw-spin { display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(34,211,238,.25); border-top-color: var(--eaw-accent); border-radius: 50%; animation: eaw-spin 0.8s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes eaw-spin { to { transform: rotate(360deg); } }