/* ClassEx Voice Assistant — Styles v11.0 */

/* ── Reset ───────────────────────────────────────────────────── */
.cva-widget *, .cva-vocab-widget * { box-sizing: border-box; }

/* ── Widget wrapper ──────────────────────────────────────────── */
.cva-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    max-width: 700px;
    margin: 28px auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0,0,0,0.10);
    border: 1px solid #e0e7ef;
    background: #fff;
}

/* ── Header ──────────────────────────────────────────────────── */
.cva-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #0073aa 0%, #005f8e 100%);
    color: #fff;
}
.cva-logo { font-size: 30px; line-height: 1; }
.cva-header strong { display: block; font-size: 17px; font-weight: 700; }
.cva-header p { margin: 2px 0 0; font-size: 13px; opacity: 0.85; }

/* ── Selectors ───────────────────────────────────────────────── */
.cva-selectors-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px 10px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.cva-selector-group {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 140px;
}
.cva-selector-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.cva-lang-select,
.cva-level-select,
.cva-topic-select,
.cva-lesson-select,
.cva-vocab-mode-select {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.cva-lang-select:focus,
.cva-level-select:focus,
.cva-topic-select:focus,
.cva-lesson-select:focus,
.cva-vocab-mode-select:focus { border-color: #0073aa; background: #fff; }

/* ── Usage bar ───────────────────────────────────────────────── */
.cva-usage-bar {
    padding: 7px 18px;
    background: #f0f7ff;
    border-bottom: 1px solid #dce8f5;
    text-align: center;
    font-size: 13px;
    color: #334155;
}
.cva-usage-counter.cva-limit-hit { color: #dc2626; font-weight: 700; }

/* ── Chat area ───────────────────────────────────────────────── */
.cva-chat {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f5f8fb;
    scroll-behavior: smooth;
}

/* ── Messages ────────────────────────────────────────────────── */
.cva-msg { display: flex; max-width: 88%; animation: cva-pop 0.22s ease; }
.cva-msg.cva-ai   { align-self: flex-start; }
.cva-msg.cva-user { align-self: flex-end; flex-direction: row-reverse; }

.cva-bubble {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 16px;
    line-height: 1.6;
    word-break: break-word;
    font-size: 14px;
}
.cva-msg.cva-ai   .cva-bubble { background: #fff; border: 1px solid #dce5ef; border-bottom-left-radius: 4px; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.cva-msg.cva-user .cva-bubble { background: #0073aa; color: #fff; border-bottom-right-radius: 4px; }

.cva-label-wrong { color: #dc2626; font-weight: 600; }
.cva-label-right { color: #16a34a; font-weight: 600; }
.cva-explain     { display: block; margin-top: 6px; font-style: italic; color: #475569; font-size: 13px; }

/* ── Toolbar ─────────────────────────────────────────────────── */
.cva-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: #fff;
    border-top: 1px solid #e0e7ef;
    flex-wrap: wrap;
}

/* ── Text fallback ───────────────────────────────────────────── */
.cva-text-fallback {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid #e0e7ef;
}
.cva-text-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.cva-text-input:focus { border-color: #0073aa; }
.cva-text-submit-btn {
    background: #0073aa;
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.cva-text-submit-btn:hover { background: #005f8e; }

/* ── Buttons ─────────────────────────────────────────────────── */
.cva-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, transform 0.1s, opacity 0.18s;
    line-height: 1.4;
}
.cva-btn:active  { transform: scale(0.96); }
.cva-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.cva-speak-btn { background: #0073aa; color: #fff; min-width: 100px; justify-content: center; }
.cva-speak-btn:hover:not(:disabled) { background: #005f8e; }

.cva-clear-btn { background: transparent; color: #64748b; border: 1px solid #cbd5e1; padding: 8px 14px; }
.cva-clear-btn:hover { background: #f1f5f9; }

.cva-kofi-btn {
    background: #FF5E5B;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 4px;
    box-shadow: 0 3px 12px rgba(255,94,91,0.3);
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    text-decoration: none !important;
}
.cva-kofi-btn:hover { background: #e04e4b; transform: translateY(-2px); }

/* ── Status ──────────────────────────────────────────────────── */
.cva-status { font-size: 13px; font-style: italic; color: #64748b; flex: 1; }
.cva-listening { color: #16a34a; font-weight: 700; font-style: normal; }
.cva-thinking  { color: #0073aa; font-weight: 700; font-style: normal; }
.cva-error     { color: #dc2626; font-weight: 700; font-style: normal; }

/* ── Browser warning ─────────────────────────────────────────── */
.cva-browser-warn {
    margin: 14px 18px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.6;
}

/* ── CTA / Ko-fi box ─────────────────────────────────────────── */
.cva-cta {
    text-align: center;
    padding: 16px 20px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
}
.cva-cta p { margin: 0 0 10px; font-size: 13px; color: #92400e; font-weight: 500; }

/* ── Share buttons ───────────────────────────────────────────── */
.cva-share-box { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cva-share-label { font-size: 12px; color: #92400e; margin-bottom: 6px; }
.cva-share-twitter  { background: #1da1f2; color: #fff; font-size: 13px; padding: 7px 14px; }
.cva-share-twitter:hover  { background: #0d8fd8; }
.cva-share-whatsapp { background: #25d366; color: #fff; font-size: 13px; padding: 7px 14px; }
.cva-share-whatsapp:hover { background: #1aab50; }

/* ── Global cap box ──────────────────────────────────────────── */
.cva-cap-box {
    text-align: center;
    padding: 22px 24px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2440 100%);
    border-top: 3px solid #f59e0b;
}
.cva-cap-title { font-size: 16px; font-weight: 700; color: #fbbf24; margin: 0 0 8px; }
.cva-cap-sub   { font-size: 13px; color: #cbd5e1; margin: 0 0 14px; line-height: 1.6; }

/* ── Waitlist ────────────────────────────────────────────────── */
.cva-waitlist-form  { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.cva-waitlist-label { font-size: 13px; color: #e2e8f0; margin: 0 0 10px; font-weight: 500; }
.cva-waitlist-row   { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cva-waitlist-msg   { font-size: 13px; margin: 10px 0 0; font-weight: 500; }
.cva-email-input {
    flex: 1; min-width: 200px; max-width: 300px;
    padding: 9px 14px; border: 1px solid #475569; border-radius: 999px;
    background: #1e293b; color: #f1f5f9; font-size: 14px; outline: none;
    transition: border-color 0.2s;
}
.cva-email-input:focus    { border-color: #f59e0b; }
.cva-email-input::placeholder { color: #64748b; }
.cva-notify-btn { background: #f59e0b; color: #1e293b; font-weight: 700; padding: 9px 20px; border-radius: 999px; font-size: 14px; white-space: nowrap; border: none; cursor: pointer; }
.cva-notify-btn:hover { background: #fbbf24; }

/* ── Upgrade box ─────────────────────────────────────────────── */
.cva-upgrade-box {
    text-align: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-top: 3px solid #FF5E5B;
}
.cva-upgrade-box p { margin: 0 0 8px; color: #e2e8f0; font-size: 14px; line-height: 1.6; }
.cva-upgrade-box p:first-child { font-size: 16px; color: #FF5E5B; font-weight: 700; }
.cva-reset-note { font-size: 12px !important; color: #94a3b8 !important; margin-top: 6px !important; font-style: italic; }

/* ── Access code box ─────────────────────────────────────────── */
.cva-code-box { padding: 14px 18px; background: #f0f7ff; border-top: 1px solid #dce8f5; }
.cva-code-inner { text-align: center; }
.cva-code-icon  { font-size: 20px; display: block; margin-bottom: 5px; }
.cva-code-label { font-size: 13px; font-weight: 600; color: #0a1628; margin-bottom: 10px; }
.cva-code-row   { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.cva-code-input {
    flex: 1; min-width: 150px; max-width: 220px;
    padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 999px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    outline: none; transition: border-color 0.2s;
}
.cva-code-input:focus { border-color: #0073aa; }
.cva-code-btn { background: #0073aa; color: #fff; font-weight: 700; padding: 8px 18px; border-radius: 999px; font-size: 14px; border: none; cursor: pointer; white-space: nowrap; }
.cva-code-btn:hover { background: #005f8e; }
.cva-code-msg  { font-size: 13px; font-weight: 600; margin: 5px 0 3px; }
.cva-code-kofi { font-size: 12px; color: #64748b; margin-top: 5px; }
.cva-code-kofi a { color: #0073aa; text-decoration: none; font-weight: 600; }

/* ── Vocabulary widget ───────────────────────────────────────── */
.cva-vocab-area {
    padding: 16px 18px;
    background: #f5f8fb;
    min-height: 120px;
}
.cva-vocab-placeholder { text-align: center; padding: 30px 20px; color: #94a3b8; }
.cva-vocab-placeholder .cva-vocab-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.cva-vocab-loading { text-align: center; padding: 30px; color: #0073aa; font-style: italic; }
.cva-vocab-error   { color: #dc2626; font-size: 14px; padding: 10px; }

.cva-vocab-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
    gap: 14px;
}
.cva-vocab-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, transform 0.2s;
}
.cva-vocab-card:hover { box-shadow: 0 6px 20px rgba(0,115,170,0.12); transform: translateY(-2px); }
.cva-vocab-word         { font-size: 20px; font-weight: 700; color: #0073aa; line-height: 1.2; }
.cva-vocab-pronunciation { font-size: 12px; color: #94a3b8; font-style: italic; }
.cva-vocab-meaning       { font-size: 14px; font-weight: 600; color: #1e293b; }
.cva-vocab-example       { font-size: 13px; color: #475569; border-left: 3px solid #0073aa; padding-left: 8px; margin: 4px 0; }
.cva-vocab-translation   { font-size: 12px; color: #64748b; }
.cva-vocab-speak-btn     { background: #e0f2fe; color: #0073aa; border: none; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 4px; transition: background 0.2s; }
.cva-vocab-speak-btn:hover { background: #bae6fd; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes cva-pop {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 520px) {
    .cva-widget { margin: 12px; border-radius: 14px; }
    .cva-selectors-wrap { flex-direction: column; }
    .cva-selector-group { min-width: 100%; }
    .cva-vocab-grid { grid-template-columns: 1fr; }
    .cva-bubble { font-size: 13px; }
}