@import url('..\/fonts\/quicksand.css');
@import url('unified-notification.css');
@import url('error-modal.css');

:root {
    /* Unified Pink Palette (website main color) */
    --pink-primary: #e2477f;  /* Main brand color - matches original banner-chat-btn gradient */
    --pink-hover: #f779a4;    /* Lighter hover state - from original gradient */
    --pink-glow: #ff80ab;     /* Lighter for gradients and glows */
    --pink-subtle: #fce4ec;   /* Very light pink for backgrounds */

    /* Tinted Blacks & Whites */
    --text-color: #fff5f8;     /* Rose Mist - replaces pure white */
    --border-color: #251016;   /* Dark Cherry - replaces pure black */
    --bg-dark: #180a0f;        /* Dark Cherry for dark backgrounds */

    /* Grey Scale (Tinted) */
    --text-grey: rgb(212, 163, 190);      /* Tinted grey for secondary text */
    --text-grey-dark: #8a7a82; /* Darker tinted grey */

    /* Black with opacity variants */
    --black-01: rgb(24, 10, 15, 0.1);
    --black-02: rgb(24, 10, 15, 0.2);
    --black-03: rgb(24, 10, 15, 0.3);
    --black-04: rgb(24, 10, 15, 0.4);
    --black-05: rgb(24, 10, 15, 0.5);
    --black-07: rgb(24, 10, 15, 0.7);
    --black-08: rgb(24, 10, 15, 0.8);
    --black-09: rgb(24, 10, 15, 0.9);
    --black-10: rgb(24, 10, 15, 1.0);

    /* White with opacity variants */
    --white-01: rgb(255, 245, 248, 0.1);
    --white-02: rgb(255, 245, 248, 0.2);
    --white-03: rgb(255, 245, 248, 0.3);
    --white-05: rgb(255, 245, 248, 0.5);
    --white-06: rgb(255, 245, 248, 0.6);
    --white-07: rgb(255, 245, 248, 0.7);
    --white-08: rgb(255, 245, 248, 0.8);
    --white-09: rgb(255, 245, 248, 0.9);
    --white-10: rgb(255, 245, 248, 1.0);

    /* Semantic Colors */
    --color-error: #ff5252;     /* Error red */
    --color-success: #4caf50;   /* Success green */
    --color-warning: #ffeb3b;   /* Warning yellow */
    --color-warning-dark: #ffc107; /* Darker warning */

    /* Guide colors */
    --why-color: rgb(21, 170, 191);
    --technical-color: rgb(130, 201, 30);
    --warning-color: rgb(250, 82, 82);
    --title-color: rgb(250, 176, 5);

    /* Additional UI Colors */
    --color-text-muted: #666;      /* Muted text */
    --color-text-light: #ccc;      /* Light text */
    --color-text-medium: #999;     /* Medium text */
    --color-text-dark: #888;       /* Darker text */
    --color-border-light: #777;    /* Light borders */
    --color-bg-dark-1: #374151;    /* Dark background 1 */
    --color-bg-dark-2: #6b7280;    /* Dark background 2 */
    --color-bg-dark-3: #111827;    /* Dark background 3 */
    --color-bg-dark-4: #95a5a6;    /* Dark background 4 */
    --color-bg-dark-5: #3a3a3a;    /* Dark background 5 */
    --color-bg-dark-6: #2a2a2a;    /* Dark background 6 */
    --color-bg-dark-7: #333;   /* Dark background 7 */
    --color-bg-light-1: #f5f5f5;   /* Light background 1 */
    --color-error-light: #E57373; /* Light error color */

    /* Theme accent colors */
    --color-accent-pink: #ff6b9d;   /* Accent pink */
    --color-accent-light: #ff69b4; /* Light accent */
    --color-accent-lighter: #faf; /* Lighter accent */
    --color-accent-purple: #9d4edd; /* Purple accent */

    /* One-off pinks promoted to tokens (blue twins live on html[data-site="sfw"]) */
    --pink-blush: #f8a5c2;
    --pink-mist: #ffd1dc;
    --pink-pressed: #c2185b;
    --pink-deep: #e91e63;
    --pink-vivid: #ff4081;
    --pink-vivid-deep: #f50057;
    --pink-soft: #ff8da1;
    --pink-lift: #ff85b3;
    --pink-lift-hover: #ff7fb1;
    --pink-lift-end: #ff98c4;
    --pink-violet: #c45bff;
    --pink-heading: #a166d8;
    --pink-mauve: #d168c3;
    --pink-mauve-hover: #b058a3;
    --pink-hot: #ff005c;
    --surface-rose: #2d1820;

    /* Channel lists for alpha one-offs: rgb(var(--…-rgb), a) */
    --accent-pink-rgb: 255, 107, 157;
    --accent-light-rgb: 255, 105, 180;
    --pink-primary-rgb: 226, 71, 127;
    --pink-ink-rgb: 216, 27, 96;
    --pink-blush-rgb: 248, 165, 194;
    --pink-vivid-rgb: 255, 64, 129;
    --pink-vivid-deep-rgb: 245, 0, 87;
    --pink-hot-rgb: 255, 0, 92;
    --pink-mauve-rgb: 209, 104, 195;
    --surface-rose-rgb: 45, 24, 32;

    /* Pink with opacity variants */
    --pink-primary-01: rgb(216, 27, 96, 0.1);
    --pink-primary-02: rgb(216, 27, 96, 0.2);
    --pink-primary-03: rgb(216, 27, 96, 0.3);
    --pink-primary-04: rgb(216, 27, 96, 0.4);
    --pink-primary-05: rgb(216, 27, 96, 0.5);
    --pink-primary-06: rgb(216, 27, 96, 0.6);
    --pink-primary-07: rgb(216, 27, 96, 0.7);
    --pink-primary-08: rgb(216, 27, 96, 0.8);

    /* Legacy compatibility */
    --heart-color-1: var(--pink-primary);
    --heart-color-2: #9d4edd;  /* Purple accent */
}

html[data-site="sfw"] {
    --pink-primary: #2f6feb;
    --pink-hover: #5b8def;
    --pink-glow: #8eb4ff;
    --pink-subtle: #dbe7ff;
    --text-color: #f3f6fb;
    --text-grey: #9aa8c3;
    --text-grey-dark: #7d8da8;
    --border-color: #1a2744;
    --bg-dark: #0c1222;
    --black-01: rgb(12, 18, 34, 0.1);
    --black-02: rgb(12, 18, 34, 0.2);
    --black-03: rgb(12, 18, 34, 0.3);
    --black-04: rgb(12, 18, 34, 0.4);
    --black-05: rgb(12, 18, 34, 0.5);
    --black-07: rgb(12, 18, 34, 0.7);
    --black-08: rgb(12, 18, 34, 0.8);
    --black-09: rgb(12, 18, 34, 0.9);
    --black-10: rgb(12, 18, 34, 1.0);
    --white-01: rgb(243, 246, 251, 0.1);
    --white-02: rgb(243, 246, 251, 0.2);
    --white-03: rgb(243, 246, 251, 0.3);
    --white-05: rgb(243, 246, 251, 0.5);
    --white-06: rgb(243, 246, 251, 0.6);
    --white-07: rgb(243, 246, 251, 0.7);
    --white-08: rgb(243, 246, 251, 0.8);
    --white-09: rgb(243, 246, 251, 0.9);
    --white-10: rgb(243, 246, 251, 1.0);
    --color-accent-pink: #2f6feb;
    --color-accent-light: #5b8def;
    --color-accent-lighter: #8eb4ff;
    --color-accent-purple: #2f6feb;
    --pink-blush: #a8c4f8;
    --pink-mist: #d6e4ff;
    --pink-pressed: #1e4fd0;
    --pink-deep: #2563eb;
    --pink-vivid: #3b82f6;
    --pink-vivid-deep: #1d4ed8;
    --pink-soft: #9eb6ff;
    --pink-lift: #85b6ff;
    --pink-lift-hover: #7fb6ff;
    --pink-lift-end: #98c4ff;
    --pink-violet: #5b8cff;
    --pink-heading: #6684e0;
    --pink-mauve: #6894d1;
    --pink-mauve-hover: #5878c4;
    --pink-hot: #3b82f6;
    --surface-rose: #121c30;
    --accent-pink-rgb: 47, 111, 235;
    --accent-light-rgb: 91, 141, 239;
    --pink-primary-rgb: 47, 111, 235;
    --pink-ink-rgb: 47, 111, 235;
    --pink-blush-rgb: 168, 196, 248;
    --pink-vivid-rgb: 59, 130, 246;
    --pink-vivid-deep-rgb: 29, 78, 216;
    --pink-hot-rgb: 59, 130, 246;
    --pink-mauve-rgb: 104, 148, 209;
    --surface-rose-rgb: 18, 28, 48;
    --pink-primary-01: rgb(47, 111, 235, 0.1);
    --pink-primary-02: rgb(47, 111, 235, 0.2);
    --pink-primary-03: rgb(47, 111, 235, 0.3);
    --pink-primary-04: rgb(47, 111, 235, 0.4);
    --pink-primary-05: rgb(47, 111, 235, 0.5);
    --pink-primary-06: rgb(47, 111, 235, 0.6);
    --pink-primary-07: rgb(47, 111, 235, 0.7);
    --pink-primary-08: rgb(47, 111, 235, 0.8);
    --heart-color-1: var(--pink-primary);
    --heart-color-2: #2f6feb;
}

html[data-site="sfw"] body {
    background-color: var(--bg-dark);
    color: var(--text-color);
}

* {
    font-family: Quicksand, sans-serif;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #111;
    color: var(--text-color);
}

main {
    max-width: 1800px;
    margin: 0 auto;
}

h1 {
    text-align: center;
}


#chat-container {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    background: rgb(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 20px;
    gap: 10px;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 80%;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.message::before {
    content: attr(data-character-name);
    position: absolute;
    top: -20px;
    font-size: 0.8em;
    color: var(--text-color);
}

.user-message {
    background: #2c3e50;
    color: var(--text-color);
    align-self: flex-end;
    margin-left: 20%;
}

.character-message {
    background: #3498db;
    color: var(--text-color);
    align-self: flex-start;
    margin-right: 20%;
}

#chat-input-container {
    display: flex;
    gap: 10px;
}

#chat-input {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: rgb(255, 255, 255, 0.9);
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: #1a1a1a;
    cursor: pointer;
    transition: background 0.3s ease;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(255, 255, 255, 0.5);
}