/* Light theme */
[data-theme="light"] {
    --chat-bg-primary: rgb(245,245,245);
    --chat-bg-secondary: rgb(255,255,255);
    --chat-text-primary: rgb(51,51,51);
    --chat-text-secondary: rgb(102,102,102);
    --chat-accent: rgb(0,123,255);
    --chat-user-bubble: rgb(0,123,255);
    --chat-other-bubble: rgb(233,236,239);
    --chat-user-text: rgb(255,255,255);
    --chat-other-text: rgb(51,51,51);
    --chat-border: rgb(222,226,230);
    --chat-shadow: rgba(0, 0, 0, 0.1);
    --chat-hover: rgba(0, 123, 255, 0.1);
    --whiteboard-bg: rgb(255,255,255);
    --tab-bg-active: var(--whiteboard-bg);
    --tab-bg-inactive: rgb(220,220,220);
}

/* Dark theme */
[data-theme="dark"] {
    --chat-bg-primary: rgb(26,26,26);
    --chat-bg-secondary: rgb(45,45,45);
    --chat-text-primary: rgb(255,255,255);
    --chat-text-secondary: rgb(204,204,204);
    --chat-accent: rgb(77,171,247);
    --chat-user-bubble: rgb(77,171,247);
    --chat-other-bubble: rgb(64,64,64);
    --chat-user-text: rgb(255,255,255);
    --chat-other-text: rgb(255,255,255);
    --chat-border: rgb(85,85,85);
    --chat-shadow: rgba(0, 0, 0, 0.3);
    --chat-hover: rgba(77, 171, 247, 0.1);
    --whiteboard-bg: rgb(26,26,26);
    --tab-bg-active: var(--whiteboard-bg);
    --tab-bg-inactive: rgb(45,45,45);
}

/* Ocean theme */   
[data-theme="ocean"] {
    --chat-bg-primary: rgb(230,243,255);
    --chat-bg-secondary: rgb(255,255,255);
    --chat-text-primary: rgb(12,74,110);
    --chat-text-secondary: rgb(3,105,161);
    --chat-accent: rgb(2,132,199);
    --chat-user-bubble: rgb(2,132,199);
    --chat-other-bubble: rgb(186,230,253);
    --chat-user-text: rgb(255,255,255);
    --chat-other-text: rgb(12,74,110);
    --chat-border: rgb(125,211,252);
    --chat-shadow: rgba(2, 132, 199, 0.2);
    --chat-hover: rgba(2, 132, 199, 0.1);
    --whiteboard-bg: rgb(255,255,255);
    --tab-bg-active: var(--whiteboard-bg);
    --tab-bg-inactive: rgb(227,242,253);
}

/* Fantasy theme */
[data-theme="fantasy"] {
    --chat-bg-primary: rgba(255, 255, 255, 0.25);
    --chat-bg-secondary: rgba(255, 255, 255, 0.85);
    --chat-text-primary: rgb(34,40,49);
    --chat-text-secondary: rgb(57,62,70);
    --chat-accent: rgba(54, 0, 181, 0.35);
    --chat-user-bubble: rgba(0, 173, 181, 0.7);
    --chat-user-bubble2: rgba(255, 255, 255, 0.18);
    --chat-other-bubble: rgba(54, 0, 181, 0.35);
    --chat-other-bubble2: rgba(255, 255, 255, 0.18);
    --chat-user-text: rgb(0,0,0);
    --chat-other-text: rgb(7,17,31);
    --chat-border: rgba(0, 0, 0, 0.12);
    --chat-shadow: rgba(0, 0, 0, 0.18);
    --chat-hover: rgba(255, 55, 242, 0.361);
    --chat-bg-image-filter: #ffd6ed6c;
    --chat-bg-image-img: url("/assets/imgs/castlepink.jpg");
    --whiteboard-bg: rgb(255,255,255);
    --tab-bg-active: var(--whiteboard-bg);
    --tab-bg-inactive: rgb(243,228,245);
}

/* Toronto Blue Jays theme */
[data-theme="bluejays"] {
    --chat-bg-primary: rgba(197,225,255,0.94);
    --chat-bg-secondary: rgba(113,159,208,0.63);
    --chat-text-primary: rgb(19,74,142);
    --chat-text-secondary: rgb(29,45,92);
    --chat-accent: rgb(19,74,142);
    --chat-user-bubble: rgba(29,45,92,0.88);
    --chat-user-bubble2: rgba(65,94,129,0.63);
    --chat-other-bubble: rgba(90,134,188,0.75);
    --chat-other-bubble2: rgba(196,215,238,0.63);
    --chat-user-text: rgb(255,255,255);
    --chat-other-text: rgb(4,24,49);
    --chat-border: rgba(19,74,142,0.2);
    --chat-shadow: rgba(19, 74, 142, 0.18);
    --chat-hover: #EC1B30e0;
    --chat-bg-image-filter: #e3eafc99;
    --chat-bg-image-img: url("/assets/imgs/bluejays.jpg");
    --whiteboard-bg: rgb(255,255,255);
    --tab-bg-active: var(--whiteboard-bg);
    --tab-bg-inactive: rgb(227,242,253);
}

[data-theme="fantasy"] .sbChat_container,
[data-theme="fantasy"] .sbChat_input-wrapper,
[data-theme="fantasy"] .sbChat_bubble,
[data-theme="fantasy"] .sbChat_input-container {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--chat-border);
}

[data-theme="fantasy"] .sbChat_message.user .sbChat_bubble {
    position: relative;
    background: linear-gradient(135deg, var(--chat-user-bubble) 0%, var(--chat-user-bubble2) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow:
        0 2px 8px 0 rgba(0, 0, 0, 0.18),
        /* outer shadow */
        0 1.5px 0 0 rgba(255, 255, 255, 0.7) inset,
        /* top inner highlight */
        0 -2px 8px 0 rgba(0, 0, 0, 0.12) inset;
    /* bottom inner shadow */
    color: var(--chat-user-text);
    border-bottom-right-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top: 2.5px solid rgba(255, 255, 255, 0.7);
    border-left: 1.5px solid rgba(255, 255, 255, 0.25);
    border-right: 1.5px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

[data-theme="fantasy"] .sbChat_message.user .sbChat_bubble::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 18px;
    right: 18px;
    height: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0.7;
    border-radius: 12px;
    pointer-events: none;
    filter: blur(0.5px);
}

[data-theme="fantasy"] .sbChat_message.other .sbChat_bubble {
    position: relative;
    background: linear-gradient(135deg, var(--chat-other-bubble) 0%, var(--chat-other-bubble2) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow:
        0 2px 8px 0 rgba(0, 0, 0, 0.13),
        0 1.5px 0 0 rgba(255, 255, 255, 0.6) inset,
        0 -2px 8px 0 rgba(0, 0, 0, 0.10) inset;
    color: var(--chat-other-text);
    border-bottom-left-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-top: 2.5px solid rgba(255, 255, 255, 0.6);
    border-left: 1.5px solid rgba(255, 255, 255, 0.18);
    border-right: 1.5px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

[data-theme="fantasy"] .sbChat_message.other .sbChat_bubble::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0.7;
    border-radius: 12px;
    pointer-events: none;
    filter: blur(0.5px);
}

[data-theme="bluejays"] .sbChat_container,
[data-theme="bluejays"] .sbChat_input-wrapper,
[data-theme="bluejays"] .sbChat_bubble,
[data-theme="bluejays"] .sbChat_input-container {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--chat-border);
}

[data-theme="bluejays"] .sbChat_message.user .sbChat_bubble {
    position: relative;
    background: linear-gradient(135deg, var(--chat-user-bubble) 0%, var(--chat-user-bubble2) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow:
        0 2px 8px 0 rgba(19, 74, 142, 0.18),
        0 1.5px 0 0 rgba(255, 255, 255, 0.7) inset,
        0 -2px 8px 0 rgba(0, 0, 0, 0.12) inset;
    color: var(--chat-user-text);
    border-bottom-right-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top: 2.5px solid rgba(255, 255, 255, 0.7);
    border-left: 1.5px solid rgba(255, 255, 255, 0.25);
    border-right: 1.5px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

[data-theme="bluejays"] .sbChat_message.user .sbChat_bubble::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 18px;
    right: 18px;
    height: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0.7;
    border-radius: 12px;
    pointer-events: none;
    filter: blur(0.5px);
}

[data-theme="bluejays"] .sbChat_message.other .sbChat_bubble {
    position: relative;
    background: linear-gradient(135deg, var(--chat-other-bubble) 0%, var(--chat-other-bubble2) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow:
        0 2px 8px 0 rgba(19, 74, 142, 0.13),
        0 1.5px 0 0 rgba(255, 255, 255, 0.6) inset,
        0 -2px 8px 0 rgba(0, 0, 0, 0.10) inset;
    color: var(--chat-other-text);
    border-bottom-left-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-top: 2.5px solid rgba(255, 255, 255, 0.6);
    border-left: 1.5px solid rgba(255, 255, 255, 0.18);
    border-right: 1.5px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

[data-theme="bluejays"] .sbChat_message.other .sbChat_bubble::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0.7;
    border-radius: 12px;
    pointer-events: none;
    filter: blur(0.5px);
}