/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-dark: #0f0f1a;
    --bg-chat: #151525;
    --bg-msg-human: #2a2a42;
    --bg-msg-ai: #1a2e4a;
    --bg-flyer: #fefae0;
    --accent: #8b7cf7;
    --accent-light: #a89cff;
    --gold: #d4a054;
    --gold-light: #f0d48a;
    --green: #3cb371;
    --amber: #e9a820;
    --text-light: #e8e8f0;
    --text-muted: #888898;
    --text-dark: #2d2d2d;
    --radius: 12px;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
}

html, body {
    height: 100%;
    font-family: var(--font-sans);
    background: var(--bg-dark);
    color: var(--text-light);
    overflow: hidden;
}

/* ========== LANDING ========== */
#landing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a35 50%, #0f0f1a 100%);
}

.landing-card {
    background: #1c1c32;
    border: 1px solid #2a2a48;
    border-radius: 20px;
    padding: 48px 40px;
    width: 400px;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.logo {
    font-family: var(--font-display);
    font-size: 2.2em;
    font-weight: 700;
    color: var(--accent-light);
    margin-bottom: 4px;
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.95em;
    margin-bottom: 32px;
}

.form-group {
    text-align: left;
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #3a3a58;
    border-radius: 8px;
    background: #12121f;
    color: var(--text-light);
    font-size: 1em;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: var(--accent);
}

.form-group input::placeholder {
    color: #555;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 0.82em;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #2a2a48;
}

.divider span {
    padding: 0 12px;
}

.tagline {
    margin-top: 28px;
    color: #555;
    font-size: 0.85em;
    font-style: italic;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-block;
    width: 100%;
    padding: 13px 24px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(139,124,247,0.3);
}

.btn-primary:hover {
    background: var(--accent-light);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-light);
    border: 1px solid var(--accent);
}

.btn-secondary:hover {
    background: rgba(139,124,247,0.1);
}

.btn-send {
    padding: 12px 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    width: auto;
    flex-shrink: 0;
}

.btn-send:hover { background: var(--accent-light); }

.btn-icon {
    background: rgba(139,124,247,0.15);
    color: var(--accent-light);
    border: 1px solid rgba(139,124,247,0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.2s;
}

.btn-icon:hover { background: rgba(139,124,247,0.25); }

/* ========== APP LAYOUT ========== */
#app {
    display: flex;
    height: 100%;
}

#chat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-chat);
    min-width: 0;
}

#flyer-col {
    width: 380px;
    flex-shrink: 0;
    background: #1e1e32;
    border-left: 1px solid #2a2a48;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ========== CHAT HEADER ========== */
#chat-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #2a2a48;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.header-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1em;
    color: var(--accent-light);
}

.badge {
    background: rgba(139,124,247,0.15);
    color: var(--accent-light);
    font-size: 0.78em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: monospace;
    letter-spacing: 1px;
}

#participant-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2a2a42;
    border-radius: 20px;
    padding: 3px 12px 3px 4px;
    font-size: 0.8em;
    color: var(--text-light);
}

.chip-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    color: #fff;
}

/* ========== MESSAGES ========== */
#messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msg {
    max-width: 88%;
    padding: 10px 16px;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.93em;
    animation: msg-in 0.25s ease-out;
    word-wrap: break-word;
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg.human {
    background: var(--bg-msg-human);
    align-self: flex-start;
}

.msg.ai {
    background: var(--bg-msg-ai);
    align-self: flex-start;
    border-left: 3px solid var(--accent);
}

.msg.system-msg {
    align-self: center;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82em;
    font-style: italic;
    padding: 4px 0;
}

.msg-sender {
    font-size: 0.78em;
    font-weight: 700;
    margin-bottom: 3px;
}

.msg.human .msg-sender { color: var(--gold-light); }
.msg.ai .msg-sender { color: var(--accent-light); }

.msg-text { color: var(--text-light); }

.msg-text .mention {
    color: var(--gold-light);
    font-weight: 600;
}

/* ========== THINKING INDICATOR ========== */
#thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    color: var(--text-muted);
    font-size: 0.85em;
}

.dot-pulse {
    display: flex;
    gap: 4px;
}

.dot-pulse span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: dot-bounce 1.4s infinite ease-in-out both;
}

.dot-pulse span:nth-child(1) { animation-delay: 0s; }
.dot-pulse span:nth-child(2) { animation-delay: 0.16s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.32s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ========== CHAT INPUT ========== */
#chat-form {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #2a2a48;
    background: var(--bg-chat);
}

#msg-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #3a3a58;
    border-radius: 8px;
    background: #12121f;
    color: var(--text-light);
    font-size: 0.95em;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.2s;
}

#msg-input:focus { border-color: var(--accent); }
#msg-input::placeholder { color: #555; }

/* ========== FLYER COLUMN ========== */
.flyer-meta {
    padding: 16px 20px;
    border-bottom: 1px solid #2a2a48;
}

.flyer-meta h3 {
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

#progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

#progress-label {
    font-size: 0.8em;
    color: var(--text-muted);
    white-space: nowrap;
}

.progress-track {
    flex: 1;
    height: 6px;
    background: #2a2a42;
    border-radius: 3px;
    overflow: hidden;
}

#progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
}

/* ========== FLYER CARD ========== */
#flyer {
    margin: 20px;
    background: var(--bg-flyer);
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    position: relative;
}

.flyer-stars {
    text-align: center;
    color: var(--gold);
    font-size: 1em;
    letter-spacing: 6px;
    margin-bottom: 20px;
}

.flyer-stars.bottom {
    margin-bottom: 0;
    margin-top: 20px;
}

.flyer-rule {
    border: none;
    border-top: 1px dashed var(--gold);
    margin: 16px 0;
    opacity: 0.4;
}

/* ========== PLAN ROWS ========== */
.plan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.3s, box-shadow 0.3s;
}

.plan-row.headline {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.plan-row.headline .plan-value {
    font-family: var(--font-display);
    font-size: 1.6em;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.2;
}

.plan-row.tagline-row {
    justify-content: center;
    margin-bottom: 8px;
}

.plan-row.tagline-row .plan-value {
    font-style: italic;
    font-size: 1.05em;
    color: #777;
    text-align: center;
}

.plan-icon {
    font-size: 1.2em;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.plan-detail {
    flex: 1;
    min-width: 0;
}

.plan-label {
    display: block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.plan-value {
    color: #aaa;
    font-size: 0.95em;
    transition: color 0.3s;
}

.plan-badge {
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s;
    visibility: hidden;
}

/* --- Status: open (default) --- */
.plan-row.open .plan-value {
    color: #bbb;
    font-style: italic;
}

/* --- Status: discussing --- */
.plan-row.discussing {
    background: rgba(233,168,32,0.08);
}

.plan-row.discussing .plan-value {
    color: #b8860b;
    font-style: italic;
}

.plan-row.discussing .plan-badge {
    visibility: visible;
    background: rgba(233,168,32,0.15);
    color: #b8860b;
    animation: pulse-badge 2s infinite;
}

.plan-row.discussing .plan-badge::after {
    content: 'deciding\2026';
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Status: resolved --- */
.plan-row.resolved .plan-value {
    color: var(--text-dark);
    font-weight: 600;
    font-style: normal;
}

.plan-row.resolved .plan-badge {
    visibility: visible;
    background: rgba(60,179,113,0.15);
    color: var(--green);
}

.plan-row.resolved .plan-badge::after {
    content: '\2713';
}

.plan-row.resolved.headline .plan-value {
    color: var(--text-dark);
}

.plan-row.resolved.tagline-row .plan-value {
    color: #555;
    font-weight: 500;
}

/* Flash animation for newly resolved */
@keyframes flash-resolved {
    0% { background: rgba(60,179,113,0.25); }
    100% { background: transparent; }
}

.plan-row.just-resolved {
    animation: flash-resolved 1s ease-out;
}

/* ========== TOAST ========== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #2a2a42;
    color: var(--text-light);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.88em;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

.toast.visible {
    transform: translateX(-50%) translateY(0);
}

/* ========== SCROLLBAR ========== */
#messages::-webkit-scrollbar { width: 6px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: #2a2a48; border-radius: 3px; }
#messages::-webkit-scrollbar-thumb:hover { background: #3a3a58; }

/* ========== RESPONSIVE ========== */
@media (max-width: 800px) {
    #app { flex-direction: column; }
    #flyer-col {
        width: 100%;
        border-left: none;
        border-top: 1px solid #2a2a48;
        max-height: 45vh;
    }
    #chat-col { min-height: 55vh; }
}

/* ========== FLYER ACTIONS ========== */
.flyer-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
}

.btn-restyle,
.btn-download,
.btn-publish {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.82em;
    border-radius: 8px;
}

.btn-restyle {
    background: rgba(139,124,247,0.15);
    color: var(--accent-light);
    border: 1px solid rgba(139,124,247,0.3);
}
.btn-restyle:hover { background: rgba(139,124,247,0.25); }
.btn-restyle.loading { opacity: 0.6; pointer-events: none; }

.btn-download {
    background: rgba(60,179,113,0.15);
    color: var(--green);
    border: 1px solid rgba(60,179,113,0.3);
}
.btn-download:hover { background: rgba(60,179,113,0.25); }

.btn-publish {
    background: rgba(212,160,84,0.15);
    color: var(--gold-light);
    border: 1px solid rgba(212,160,84,0.3);
}
.btn-publish:hover { background: rgba(212,160,84,0.25); }

/* ========== PERMALINK ========== */
#permalink-area {
    padding: 0 20px 16px;
}

.permalink-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#permalink-url {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #3a3a58;
    border-radius: 6px;
    background: #12121f;
    color: var(--accent-light);
    font-size: 0.8em;
    font-family: monospace;
    outline: none;
}