/* ==============================================
   Live Brainstorm Board — Frontend Styles
   ============================================== */

:root {
    --lbb-primary:    #4f46e5;
    --lbb-primary-dk: #3730a3;
    --lbb-accent:     #f59e0b;
    --lbb-success:    #10b981;
    --lbb-danger:     #ef4444;
    --lbb-bg:         #f8f7ff;
    --lbb-white:      #ffffff;
    --lbb-gray-50:    #f9fafb;
    --lbb-gray-100:   #f3f4f6;
    --lbb-gray-300:   #d1d5db;
    --lbb-gray-600:   #4b5563;
    --lbb-gray-800:   #1f2937;
    --lbb-radius:     14px;
    --lbb-radius-sm:  8px;
    --lbb-shadow:     0 4px 24px rgba(79, 70, 229, 0.12);
    --lbb-shadow-card:0 2px 12px rgba(0,0,0,0.08);

    /* Card colors — customize these */
    --lbb-card-blue:   #e0e7ff;
    --lbb-card-green:  #d1fae5;
    --lbb-card-orange: #fef3c7;
    --lbb-card-purple: #ede9fe;
    --lbb-card-pink:   #fce7f3;
    --lbb-card-teal:   #ccfbf1;

    --lbb-card-blue-border:   #a5b4fc;
    --lbb-card-green-border:  #6ee7b7;
    --lbb-card-orange-border: #fcd34d;
    --lbb-card-purple-border: #c4b5fd;
    --lbb-card-pink-border:   #f9a8d4;
    --lbb-card-teal-border:   #5eead4;
}

/* ============ BOARD ============ */

.lbb-board-wrap {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--lbb-bg);
    border-radius: var(--lbb-radius);
    padding: 2rem;
    min-height: 300px;
}

.lbb-board-header {
    text-align: center;
    margin-bottom: 2rem;
}

.lbb-board-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--lbb-gray-800);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.lbb-board-question {
    font-size: 1.15rem;
    color: var(--lbb-primary);
    font-weight: 600;
    margin: 0 auto 1rem;
    max-width: 100%;
    background: white;
    border-left: 4px solid var(--lbb-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 0 var(--lbb-radius-sm) var(--lbb-radius-sm) 0;
    text-align: left;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

.lbb-board-count {
    display: inline-block;
    background: var(--lbb-primary);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.lbb-board-status {
    text-align: center;
    padding: 1rem;
    border-radius: var(--lbb-radius-sm);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.lbb-status-paused { background: #fef3c7; color: #92400e; }
.lbb-status-closed { background: #fee2e2; color: #991b1b; }

/* Grid of cards */
.lbb-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Card */
.lbb-card {
    border-radius: var(--lbb-radius);
    padding: 1.25rem;
    border: 2px solid transparent;
    box-shadow: var(--lbb-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: lbb-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    word-break: break-word;
    position: relative;
    overflow: hidden;
}

.lbb-card:hover {
    transform: translateY(-3px) rotate(0.3deg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.lbb-card::before {
    content: '"';
    position: absolute;
    top: -5px;
    left: 10px;
    font-size: 4rem;
    opacity: 0.12;
    font-family: Georgia, serif;
    line-height: 1;
}

.card-blue   { background: var(--lbb-card-blue);   border-color: var(--lbb-card-blue-border); }
.card-green  { background: var(--lbb-card-green);  border-color: var(--lbb-card-green-border); }
.card-orange { background: var(--lbb-card-orange); border-color: var(--lbb-card-orange-border); }
.card-purple { background: var(--lbb-card-purple); border-color: var(--lbb-card-purple-border); }
.card-pink   { background: var(--lbb-card-pink);   border-color: var(--lbb-card-pink-border); }
.card-teal   { background: var(--lbb-card-teal);   border-color: var(--lbb-card-teal-border); }

.lbb-card-content {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--lbb-gray-800);
    font-weight: 500;
}

.lbb-card-author {
    font-size: 0.8rem;
    color: var(--lbb-gray-600);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Empty state */
.lbb-board-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--lbb-gray-600);
}

.lbb-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    animation: lbb-float 3s ease-in-out infinite;
}

/* Animations */
@keyframes lbb-card-in {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes lbb-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ============ INLINE JOIN FORM ============ */

.lbb-join-wrap {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 540px;
}

.lbb-inline-question {
    background: var(--lbb-primary);
    color: white;
    border-radius: var(--lbb-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.lbb-q-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    display: block;
    margin-bottom: 0.4rem;
}

.lbb-q-text {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.lbb-field {
    margin-bottom: 1rem;
    position: relative;
}

.lbb-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lbb-gray-800);
    margin-bottom: 0.4rem;
}

.lbb-input,
.lbb-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 2px solid var(--lbb-gray-300);
    border-radius: var(--lbb-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: white;
    color: var(--lbb-gray-800);
    transition: border-color 0.2s;
    outline: none;
    -webkit-appearance: none;
}

.lbb-input:focus,
.lbb-textarea:focus {
    border-color: var(--lbb-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.lbb-input.lbb-error-field,
.lbb-textarea.lbb-error-field {
    border-color: var(--lbb-danger);
}

.lbb-textarea { resize: vertical; min-height: 100px; }

.lbb-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 0.75rem;
    color: var(--lbb-gray-600);
    pointer-events: none;
}

.lbb-submit-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--lbb-primary);
    color: white;
    border: none;
    border-radius: var(--lbb-radius-sm);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
}

.lbb-submit-btn:hover  { background: var(--lbb-primary-dk); }
.lbb-submit-btn:active { transform: scale(0.98); }
.lbb-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Status notices */
.lbb-status-notice {
    padding: 1rem 1.25rem;
    border-radius: var(--lbb-radius-sm);
    font-size: 0.95rem;
}

.lbb-paused-notice { background: #fef3c7; color: #92400e; }
.lbb-closed-notice { background: #fee2e2; color: #991b1b; }

/* QR code */
.lbb-qr-wrap { text-align: center; }
.lbb-qr-code { display: inline-block; padding: 1rem; background: white; border-radius: var(--lbb-radius); box-shadow: var(--lbb-shadow); }
.lbb-qr-image { display: block; }
.lbb-qr-url { margin-top: 0.75rem; font-size: 0.875rem; word-break: break-all; }

/* Error */
.lbb-error { color: var(--lbb-danger); font-weight: 600; }

/* Responsive */
@media (max-width: 600px) {
    .lbb-board-wrap { padding: 1rem; }
    .lbb-board-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .lbb-card { padding: 1rem; }
}

@media (max-width: 400px) {
    .lbb-board-grid { grid-template-columns: 1fr; }
}