:root {
    /* Catppuccin Mocha (dark) */
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
    --ctp-surface0: #313244;
    --ctp-surface1: #45475a;
    --ctp-surface2: #585b70;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-sapphire: #74c7ec;
    --ctp-sky: #89dceb;
    --ctp-teal: #94e2d5;
    --ctp-green: #a6e3a1;
    --ctp-yellow: #f9e2af;
    --ctp-peach: #fab387;
    --ctp-maroon: #eba0ac;
    --ctp-red: #f38ba8;
    --ctp-mauve: #cba6f7;
    --ctp-pink: #f5c2e7;
    --ctp-flamingo: #f2cdcd;
    --ctp-rosewater: #f5e0dc;

    --bg-main: var(--ctp-base);
    --bg-chat: var(--ctp-mantle);
    --bg-header: var(--ctp-surface0);
    --bg-btn: var(--ctp-surface1);
    --bg-btn-hover: var(--ctp-surface2);
    --bg-popup: var(--ctp-mantle);
    --bg-popup-header: var(--ctp-surface1);
    --bg-popup-header-pulse: var(--ctp-surface2);
    --text-main: var(--ctp-text);
    --text-secondary: var(--ctp-subtext1);
    --text-link: var(--ctp-blue);
    --border-main: var(--ctp-surface2);
    --shadow-main: 0 4px 24px rgba(24,24,37,0.25);
    --shadow-header: 0 2px 8px rgba(24,24,37,0.18);
    --shadow-header-pulse: 0 4px 16px rgba(137,180,250,0.25);
    --popup-radius: 16px 16px 8px 8px;
    --border-color: var(--ctp-surface2);
    --border-color-accent: var(--ctp-blue);
}
.light-mode {
    /* Catppuccin Latte (light) */
    --ctp-base: #eff1f5;
    --ctp-mantle: #e6e9ef;
    --ctp-crust: #dce0e8;
    --ctp-surface0: #ccd0da;
    --ctp-surface1: #bcc0cc;
    --ctp-surface2: #acb0be;
    --ctp-text: #4c4f69;
    --ctp-subtext1: #5c5f77;
    --ctp-subtext0: #6c6f85;
    --ctp-overlay2: #7c7f93;
    --ctp-overlay1: #8c8fa1;
    --ctp-overlay0: #9ca0b0;
    --ctp-blue: #1e66f5;
    --ctp-lavender: #7287fd;
    --ctp-sapphire: #209fb5;
    --ctp-sky: #04a5e5;
    --ctp-teal: #179299;
    --ctp-green: #40a02b;
    --ctp-yellow: #df8e1d;
    --ctp-peach: #fe640b;
    --ctp-maroon: #e64553;
    --ctp-red: #d20f39;
    --ctp-mauve: #8839ef;
    --ctp-pink: #ea76cb;
    --ctp-flamingo: #dd7878;
    --ctp-rosewater: #dc8a78;

    --bg-main: var(--ctp-base);
    --bg-chat: var(--ctp-mantle);
    --bg-header: var(--ctp-surface0);
    --bg-btn: var(--ctp-surface1);
    --bg-btn-hover: var(--ctp-surface2);
    --bg-popup: var(--ctp-mantle);
    --bg-popup-header: var(--ctp-surface1);
    --bg-popup-header-pulse: var(--ctp-surface2);
    --text-main: var(--ctp-text);
    --text-secondary: var(--ctp-subtext1);
    --text-link: var(--ctp-blue);
    --border-main: var(--ctp-surface2);
    --shadow-main: 0 4px 24px rgba(220,224,232,0.10);
    --shadow-header: 0 2px 8px rgba(220,224,232,0.08);
    --shadow-header-pulse: 0 4px 16px rgba(30,102,245,0.12);
    --popup-radius: 16px 16px 8px 8px;
    --border-color: var(--ctp-surface2);
    --border-color-accent: var(--ctp-blue);
}
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Quicksand', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: var(--text-link);
    text-decoration: underline;
}

.chat-container,
.chat-messages,
.chat-input-area,
input,
textarea {
    background-color: var(--bg-chat);
    color: var(--text-main);
    border-color: var(--border-main);
    font-family: inherit;
}

.message.sent {
    background-color: var(--bg-btn);
    color: var(--text-main);
}

.message.received {
    background-color: var(--bg-header);
    color: var(--text-secondary);
}

button,
.send-btn {
    background-color: var(--bg-btn);
    color: var(--text-main);
    border: 1px solid var(--border-main);
    font-family: inherit;
    transition: background 0.2s;
}

button:hover,
.send-btn:hover {
    background-color: var(--bg-btn-hover);
}

::-webkit-scrollbar {
    width: 8px;
    background: var(--bg-header);
}
::-webkit-scrollbar-thumb {
    background: var(--border-main);
    border-radius: 4px;
}

.messenger-container {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 370px;
    height: 520px;
    max-width: 98vw;
    max-height: 90vh;
    z-index: 1000;
    box-shadow: var(--shadow-main);
    border-radius: var(--popup-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, background 0.25s, border-radius 0.25s, height 0.25s, opacity 0.25s, max-height 0.25s;
    opacity: 1;
    will-change: opacity, max-height, box-shadow;
    box-sizing: border-box;
}

.messenger-container.minimized {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: unset !important;
    width: 350px;
    max-width: 90vw;
    overflow: visible;
    opacity: 0.85;
    max-height: 60px;
    transition: box-shadow 0.25s, background 0.25s, border-radius 0.25s, height 0.25s, opacity 0.25s, max-height 0.25s;
    box-sizing: border-box;
}
.messenger-container.minimized .chat-main {
    display: none !important;
}
.messenger-container.minimized .chat-header {
    background: var(--bg-popup-header) !important;
    box-shadow: var(--shadow-header);
    color: var(--text-main);
    border-radius: 16px !important;
    cursor: pointer;
    position: relative;
    animation: headerPulse 1.2s infinite alternate;
    box-sizing: border-box;
}
.messenger-container.minimized .chat-header::after {
    content: "Click to open chat";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background: var(--bg-popup-header);
    color: var(--text-link);
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 8px;
    margin-top: 4px;
    white-space: nowrap;
    opacity: 0.95;
    pointer-events: none;
    box-sizing: border-box;
}
@keyframes headerPulse {
    0% { box-shadow: var(--shadow-header); background: var(--bg-popup-header); }
    100% { box-shadow: var(--shadow-header-pulse); background: var(--bg-popup-header-pulse); }
}

.sidebar {
    display: none;
}

.chat-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--bg-chat);
}

.chat-header {
    flex: 0 0 auto;
    background: var(--bg-header);
    padding: 12px 18px 10px 18px;
    border-bottom: 1px solid var(--border-main);
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 8px;
}

.chat-title {
    flex: 1;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-main);
    letter-spacing: 0.01em;
}

.chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
    margin: 0;
    text-align: left;
    padding: 18px 14px 10px 14px;
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-input-area {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-chat);
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--border-color);
    min-height: 44px;
}

.chat-input {
    flex: 1;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-header);
    color: var(--text-main);
    font-size: 0.97rem;
    min-height: 32px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
}
.chat-input:focus {
    border-color: var(--border-color-accent);
    box-shadow: 0 0 0 2px var(--border-color-accent, var(--ctp-blue));
}

.attach-btn {
    background: none;
    border: none;
    color: var(--text-link);
    font-size: 1em;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    margin-right: 2px;
}
.attach-btn:hover, .attach-btn:focus {
    background: var(--bg-btn-hover);
    color: var(--ctp-blue);
}

.send-btn {
    background: var(--ctp-blue);
    color: var(--ctp-base);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    margin-left: 1px;
    box-shadow: 0 2px 8px rgba(137,180,250,0.10);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.send-btn:hover, .send-btn:focus {
    background: var(--ctp-lavender);
    color: var(--ctp-base);
    box-shadow: 0 4px 16px rgba(180,190,254,0.18);
}

.message {
    max-width: 100%;
    word-break: break-word;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: auto;
    padding: 10px 16px;
    border-radius: 0 8px 8px 0;
    display: block;
    text-align: left;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: bubbleIn 0.35s cubic-bezier(.4,1.4,.6,1) forwards;
    box-sizing: border-box;
    background: inherit;
}
.message * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
.message p,
.message ul,
.message ol,
.message pre,
.message blockquote {
    margin: 0.15em 0 !important;
    padding: 0 !important;
}
.message > *:not(:last-child) {
    margin-bottom: 0.15em !important;
}
.message > p {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
}
.message ul, .message ol {
    padding-left: 1.2em !important;
    margin: 0.1em 0 0.1em 0 !important;
    list-style-position: inside;
}
@keyframes bubbleIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    80% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.minimize-btn {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    float: right;
    margin-left: 8px;
    transition: color 0.2s;
    display: inline-block;
    box-sizing: border-box;
}
.minimize-btn:hover {
    color: var(--text-link);
}
.messenger-container.minimized .minimize-btn {
    display: none !important;
}
.maximize-btn {
    display: none;
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1100;
    background: var(--bg-btn);
    color: var(--text-main);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 22px;
    box-shadow: var(--shadow-header);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.25s, transform 0.25s;
    box-sizing: border-box;
}
.maximize-btn:hover {
    background: var(--text-link);
    color: var(--bg-header);
}
.messenger-container.minimized ~ .maximize-btn {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: popIn 0.4s;
}
@keyframes popIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.mode-switch-btn {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    margin-left: 8px;
    transition: color 0.2s;
    display: inline-block;
    box-sizing: border-box;
}
.mode-switch-btn:hover {
    color: var(--text-link);
}

.chat-header,
.chat-main,
.chat-messages,
.chat-input-area,
.message,
.minimize-btn,
.maximize-btn,
.mode-switch-btn {
    border: 1px solid var(--border-color) !important;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.message:focus,
.message:hover,
.minimize-btn:focus,
.minimize-btn:hover,
.maximize-btn:focus,
.maximize-btn:hover,
.mode-switch-btn:focus,
.mode-switch-btn:hover {
    border-color: var(--border-color-accent) !important;
}

@media (max-width: 500px) {
    .messenger-container {
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .chat-header, .chat-input-area {
        border-radius: 0;
    }
}