/* Bob Page Styles - Chat Interface */

:root {
    /* Color Palette - Dark Theme (Matching Header) */

    /* Primary Brand Colors (Bob's Identity - Purple/Indigo) */
    --bob-primary: #4f46e5;
    /* Indigo-600 */
    --bob-secondary: #7c3aed;
    /* Violet-600 */
    --bob-accent: #db2777;
    /* Pink-600 */

    /* Backgrounds - Using Header Colors */
    --bob-bg-dark: #0f172a;
    /* Slate-900 (Header BG) - Page Background */
    --bob-bg-medium: #1e293b;
    /* Slate-800 - Modal/Card Background */
    --bob-bg-light: #334155;
    /* Slate-700 - Secondary Background */

    /* Text Colors */
    --bob-text-primary: #f8fafc;
    /* Slate-50 - Main Text */
    --bob-text-secondary: #cbd5e1;
    /* Slate-300 - Secondary Text */
    --bob-text-muted: #94a3b8;
    /* Slate-400 - Muted Text */
    --bob-text-inverse: #ffffff;
    /* White */

    /* Borders & Decor */
    --bob-border: rgba(255, 255, 255, 0.1);
    --bob-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --bob-glass-bg: rgba(15, 23, 42, 0.8);
    --bob-glass-border: rgba(255, 255, 255, 0.1);

    /* Interactive States */
    --bob-hover-bg: rgba(255, 255, 255, 0.05);

    /* Utility Colors */
    --bob-success: #10b981;
    /* Emerald-500 */
    --bob-warning: #f59e0b;
    /* Amber-500 */
    --bob-error: #ef4444;
    /* Red-500 */
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Ensure footer widget is visible ONLY when triggered */
#footer-widget {
    display: none;
}

/* Chat Disclaimer (Inserted in Message Log) */
/* Chat Disclaimer (Inserted in Message Log) */
.chat-disclaimer-message {
    font-size: 0.75rem;
    color: var(--bob-text-muted);
    text-align: center;
    margin-bottom: 0.75rem;
    /* Space before first message */
    line-height: 1.4;
    padding: 0 1rem;
    width: 100%;
}

.chat-disclaimer-message a {
    color: var(--bob-text-secondary);
    text-decoration: underline;
    transition: color 0.2s;
}

.chat-disclaimer-message a:hover {
    color: var(--bob-primary);
}

/* Consent Checkbox */
.confirm-consent {
    margin: 1.5rem 0;
    text-align: left;
}

.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--bob-text-secondary);
    line-height: 1.4;
}

.consent-checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bob-text-muted);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.consent-checkbox-label input:checked~.custom-checkbox {
    background-color: var(--bob-primary);
    border-color: var(--bob-primary);
}

.consent-checkbox-label input:checked~.custom-checkbox:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Error state */
.confirm-consent.error .custom-checkbox {
    border-color: var(--bob-error);
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}