/* ══════════════════════════════════════════════
   Debate Panel — supports data-theme dark/light/system
   ══════════════════════════════════════════════ */

/* ── Panel container ────────────────────────── */
#debatePanel {
    display: none;
    flex-direction: column;
    width: 100%;
    /* Stretch to full container width — no max-width cap */
    margin: 0 auto 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,10,15,0.88);
    /* Scrollable, always shows latest turn */
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

#debatePanel.db-active {
    display: flex;
}

/* ── Light theme overrides ──────────────────── */
[data-theme="light"] #debatePanel,
[data-theme="system"] #debatePanel {
    border-color: #d8d8d0;
    background: #ffffff;
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] #debatePanel {
        border-color: #d8d8d0;
        background: #ffffff;
    }
}

/* ── Header ─────────────────────────────────── */
.db-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,15,0.95);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .db-header,
[data-theme="system"] .db-header {
    border-bottom-color: #e8e8e0;
    background: rgba(255,255,255,0.96);
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] .db-header {
        border-bottom-color: #e8e8e0;
        background: rgba(255,255,255,0.96);
    }
}

.db-header-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

[data-theme="light"] .db-header-icon,
[data-theme="system"] .db-header-icon {
    background: rgba(180,140,0,0.08);
    border-color: rgba(180,140,0,0.2);
}

.db-header-text { flex: 1; min-width: 0; }

.db-header-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.65);
    margin-bottom: 3px;
}

[data-theme="light"] .db-header-label,
[data-theme="system"] .db-header-label {
    color: rgba(140,100,0,0.8);
}

.db-header-topic {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}

[data-theme="light"] .db-header-topic,
[data-theme="system"] .db-header-topic {
    color: #1a1a1a;
}

.db-status-text {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-top: 2px;
    font-style: italic;
}

[data-theme="light"] .db-status-text,
[data-theme="system"] .db-status-text {
    color: #888880;
}

/* ── Agent cards row ────────────────────────── */
.db-agents-row {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
}

[data-theme="light"] .db-agents-row,
[data-theme="system"] .db-agents-row {
    border-bottom-color: #e8e8e0;
}

.db-agent-card {
    flex: 1;
    min-width: 110px;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: box-shadow 0.2s;
}

.db-agent-card.speaking {
    box-shadow: 0 0 0 1.5px currentColor;
}

.db-agent-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.db-agent-stance {
    font-size: 12px;
    opacity: 0.6;
    line-height: 1.3;
}

/* ── Section label ──────────────────────────── */
.db-section-label {
    padding: 10px 20px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
}

[data-theme="light"] .db-section-label,
[data-theme="system"] .db-section-label {
    color: #aaaaaa;
    border-top-color: #e8e8e0;
}

/* ── Debate turns ───────────────────────────── */
.db-turn {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
    animation: db-fadein 0.25s ease;
}

[data-theme="light"] .db-turn,
[data-theme="system"] .db-turn {
    border-top-color: #eeeeea;
}

@keyframes db-fadein {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.db-turn-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.db-turn-name {
    font-size: 14px;
    font-weight: 600;
}

.db-turn-stance-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid;
    opacity: 0.7;
    white-space: nowrap;
}

.db-turn-content {
    font-size: 15px;
    line-height: 1.72;
    color: rgba(255,255,255,0.8);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="light"] .db-turn-content,
[data-theme="system"] .db-turn-content {
    color: #2a2a2a;
}

.db-moderation-note {
    padding: 8px 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.28);
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.04);
}

[data-theme="light"] .db-moderation-note,
[data-theme="system"] .db-moderation-note {
    color: #aaaaaa;
    border-top-color: #eeeeea;
}

/* ── Voting section ─────────────────────────── */
.db-voting-section {
    display: none;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.07);
}

[data-theme="light"] .db-voting-section,
[data-theme="system"] .db-voting-section {
    border-top-color: #d8d8d0;
}

.db-voting-section.visible { display: flex; }

.db-judge-card {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
    animation: db-fadein 0.25s ease;
}

[data-theme="light"] .db-judge-card,
[data-theme="system"] .db-judge-card {
    border-top-color: #eeeeea;
}

.db-judge-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.db-judge-icon { font-size: 14px; flex-shrink: 0; }

.db-judge-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,215,0,0.8);
}

[data-theme="light"] .db-judge-name,
[data-theme="system"] .db-judge-name {
    color: rgba(140,100,0,0.9);
}

.db-judge-content {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="light"] .db-judge-content,
[data-theme="system"] .db-judge-content {
    color: #333333;
}

/* ── Summary section ────────────────────────── */
.db-summary-section {
    display: none;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.015);
}

[data-theme="light"] .db-summary-section,
[data-theme="system"] .db-summary-section {
    border-top-color: #d8d8d0;
    background: #f8f8f5;
}

.db-summary-section.visible { display: flex; }

.db-summary-content {
    padding: 16px 20px 8px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255,255,255,0.86);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="light"] .db-summary-content,
[data-theme="system"] .db-summary-content {
    color: #1a1a1a;
}

.db-summary-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 14px;
}

.db-copy-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.db-copy-btn:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}

[data-theme="light"] .db-copy-btn,
[data-theme="system"] .db-copy-btn {
    border-color: #d8d8d0;
    background: #f0f0ea;
    color: #555555;
}

[data-theme="light"] .db-copy-btn:hover,
[data-theme="system"] .db-copy-btn:hover {
    background: #e0e0da;
    color: #1a1a1a;
}

/* ── Streaming cursor ───────────────────────── */
.db-turn-content.streaming::after,
.db-judge-content.streaming::after,
.db-summary-content.streaming::after {
    content: '▋';
    animation: db-blink 0.8s step-end infinite;
    opacity: 0.45;
}

@keyframes db-blink {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0;   }
}

/* ── Moderator CoT card ─────────────────────── */
.db-moderator-cot {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,215,0,0.1);
    background: rgba(255,215,0,0.03);
    animation: db-fadein 0.25s ease;
}

[data-theme="light"] .db-moderator-cot,
[data-theme="system"] .db-moderator-cot {
    border-top-color: rgba(180,140,0,0.15);
    background: rgba(180,140,0,0.04);
}

.db-moderator-cot-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.55);
    margin-bottom: 8px;
}

[data-theme="light"] .db-moderator-cot-header,
[data-theme="system"] .db-moderator-cot-header {
    color: rgba(140,100,0,0.7);
}

.db-moderator-cot-content {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,0.6);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="light"] .db-moderator-cot-content,
[data-theme="system"] .db-moderator-cot-content {
    color: #555550;
}

/* Between-turn moderator brief note */
.db-moderation-brief {
    padding: 6px 20px;
    font-size: 11px;
    color: rgba(255,215,0,0.45);
    font-style: italic;
    border-top: 1px solid rgba(255,215,0,0.06);
}

[data-theme="light"] .db-moderation-brief,
[data-theme="system"] .db-moderation-brief {
    color: rgba(140,100,0,0.6);
    border-top-color: rgba(140,100,0,0.1);
}

/* ── Challenge turn variant ──────────────────── */
.db-turn-challenge {
    background: rgba(255,255,255,0.015);
    border-left: 2px solid rgba(255,215,0,0.3);
    padding-left: 18px;
}

[data-theme="light"] .db-turn-challenge {
    background: rgba(180,140,0,0.03);
    border-left-color: rgba(180,140,0,0.3);
}

.db-challenge-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(255,215,0,0.12);
    color: rgba(255,215,0,0.8);
    border: 1px solid rgba(255,215,0,0.25);
    margin-left: 4px;
}

[data-theme="light"] .db-challenge-badge {
    background: rgba(180,140,0,0.08);
    color: rgba(140,100,0,0.9);
    border-color: rgba(140,100,0,0.2);
}

.db-challenge-q-inline {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
}

[data-theme="light"] .db-challenge-q-inline {
    color: #888880;
}

/* ── User challenge display card ─────────────── */
.db-user-challenge {
    padding: 10px 20px;
    border-top: 1px solid rgba(255,215,0,0.08);
    animation: db-fadein 0.25s ease;
}

.db-user-challenge-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.5);
    margin-bottom: 4px;
}

[data-theme="light"] .db-user-challenge-label {
    color: rgba(140,100,0,0.65);
}

.db-user-challenge-q {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-style: italic;
}

[data-theme="light"] .db-user-challenge-q {
    color: #333;
}

/* ── Challenge picker bar ────────────────────── */
.db-challenge-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.2);
    background: rgba(255,215,0,0.05);
    animation: db-fadein 0.2s ease;
}

[data-theme="light"] .db-challenge-bar {
    border-color: rgba(180,140,0,0.25);
    background: rgba(180,140,0,0.04);
}

.db-challenge-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,215,0,0.65);
    white-space: nowrap;
    margin-right: 4px;
}

[data-theme="light"] .db-challenge-label {
    color: rgba(140,100,0,0.8);
}

.db-challenge-agent-btn {
    padding: 5px 14px;
    border-radius: 99px;
    border: 1px solid;
    background: transparent;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.db-challenge-agent-btn:hover { opacity: 0.8; }

.db-challenge-cancel {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

[data-theme="light"] .db-challenge-cancel {
    border-color: #d8d8d0;
    color: #888;
}

/* ── Error ──────────────────────────────────── */
.db-error {
    padding: 16px 20px;
    font-size: 13px;
    color: rgba(255,100,100,0.8);
}

[data-theme="light"] .db-error,
[data-theme="system"] .db-error {
    color: #cc3333;
}

.db-error-quota {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,180,50,0.3);
    background: rgba(255,180,50,0.07);
    font-size: 14px;
    color: rgba(255,200,80,0.9);
}

[data-theme="light"] .db-error-quota,
[data-theme="system"] .db-error-quota {
    border-color: rgba(180,120,0,0.25);
    background: rgba(180,120,0,0.05);
    color: rgba(140,90,0,0.9);
}

.db-error-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Hide normal response when debate is active */
body.debate-active .caloogy-ai-response { display: none !important; }
body.debate-active #fsEmptyState        { display: none !important; }

/* ── Wider container + sticky input when debate is active ── */
body.debate-active .caloogy-ai-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 1100px;
}

/* ── Conclude choice bar ─────────────────────── */
.db-conclude-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px;
    margin: 8px 16px 4px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    animation: db-fadein 0.25s ease;
}

[data-theme="light"] .db-conclude-bar,
[data-theme="system"] .db-conclude-bar {
    border-color: #e0e0d8;
    background: #f8f8f5;
}

.db-conclude-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
}

[data-theme="light"] .db-conclude-label,
[data-theme="system"] .db-conclude-label {
    color: #666;
}

.db-conclude-btns {
    display: flex;
    gap: 12px;
}

.db-conclude-btn {
    padding: 9px 24px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.db-conclude-judges {
    border: 1px solid rgba(255,215,0,0.35);
    background: rgba(255,215,0,0.1);
    color: rgba(255,215,0,0.9);
}

.db-conclude-judges:hover {
    background: rgba(255,215,0,0.2);
    color: #ffd700;
}

.db-conclude-skip {
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.45);
}

.db-conclude-skip:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
}

[data-theme="light"] .db-conclude-judges,
[data-theme="system"] .db-conclude-judges {
    border-color: rgba(180,140,0,0.3);
    background: rgba(180,140,0,0.08);
    color: rgba(140,100,0,0.9);
}

[data-theme="light"] .db-conclude-judges:hover,
[data-theme="system"] .db-conclude-judges:hover {
    background: rgba(180,140,0,0.16);
}

[data-theme="light"] .db-conclude-skip,
[data-theme="system"] .db-conclude-skip {
    border-color: #d0d0c8;
    color: #888;
}

[data-theme="light"] .db-conclude-skip:hover,
[data-theme="system"] .db-conclude-skip:hover {
    background: #ebebe5;
    color: #444;
}


/* ── Language picker overlay ─────────────────── */
.db-lang-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,215,0,0.2);
    background: rgba(255,215,0,0.04);
    animation: db-fadein 0.2s ease;
}

[data-theme="light"] .db-lang-picker,
[data-theme="system"] .db-lang-picker {
    border-color: rgba(180,140,0,0.25);
    background: rgba(180,140,0,0.04);
}

.db-lang-picker-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
}

[data-theme="light"] .db-lang-picker-label,
[data-theme="system"] .db-lang-picker-label {
    color: #444;
}

.db-lang-picker-btns {
    display: flex;
    gap: 12px;
}

.db-lang-btn {
    padding: 8px 28px;
    border-radius: 99px;
    border: 1px solid rgba(255,215,0,0.35);
    background: rgba(255,215,0,0.08);
    color: rgba(255,215,0,0.85);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.db-lang-btn:hover {
    background: rgba(255,215,0,0.18);
    color: rgba(255,215,0,1);
}

[data-theme="light"] .db-lang-btn,
[data-theme="system"] .db-lang-btn {
    border-color: rgba(180,140,0,0.3);
    background: rgba(180,140,0,0.07);
    color: rgba(140,100,0,0.9);
}

[data-theme="light"] .db-lang-btn:hover,
[data-theme="system"] .db-lang-btn:hover {
    background: rgba(180,140,0,0.15);
    color: rgba(100,70,0,1);
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
    #debatePanel { max-height: 80vh; }

    .db-agents-row {
        gap: 6px;
        padding: 10px 14px;
    }
    .db-agent-card { min-width: 90px; padding: 8px 10px; }
    .db-turn, .db-judge-card { padding-left: 14px; padding-right: 14px; }
    .db-summary-content { padding-left: 14px; padding-right: 14px; }
}