/* ==========================================================================
           [SEC:CSS:CORE]
           1. CSS VARIABLES & THEME
           ========================================================================== */
        :root {
            /* Typography */
            --font-primary: 'Inter', sans-serif;
            --chat-font-family: 'Inter', sans-serif;
            --chat-font-size: 16px;

            /* Colors */
            --text-primary: #e5e7eb;
            --text-secondary: #cbd5e1;
            --text-accent: #14b8a6;
            --chat-text-color: #e5e7eb;

            /* Surfaces */
            --surface-glass: rgba(17, 24, 39, 0.15);
            --surface-card: rgba(55, 65, 81, 0.6);
            --surface-overlay: rgba(0, 0, 0, 0.6);

            /* Brand */
            --border-hue-color: rgba(75, 85, 99, 0.8);
            --border-primary: var(--border-hue-color);
            --brand-color: #0d9488;
            --brand-color-hover: #0f766e;

            /* Dimensions */
            --border-radius-md: 0.75rem;
            --border-radius-sm: 4px;
            --bubble-image-size: 100px;

            /* Animation */
            --transition-fast: 0.2s ease-in-out;
            --transition-medium: 0.4s ease-out;
        }

        /* Color Overrides: Map Indigo utilities to Slate Teal */
        .text-indigo-300 {
            color: #2dd4bf !important;
        }

        .text-indigo-400 {
            color: #14b8a6 !important;
        }

        .text-indigo-500 {
            color: #0d9488 !important;
        }

        .text-indigo-600 {
            color: #0f766e !important;
        }

        .hover\:text-indigo-300:hover {
            color: #2dd4bf !important;
        }

        .hover\:text-indigo-400:hover {
            color: #14b8a6 !important;
        }

        .bg-indigo-500 {
            background-color: #0d9488 !important;
        }

        .bg-indigo-600 {
            background-color: #0f766e !important;
        }

        .bg-indigo-700 {
            background-color: #115e59 !important;
        }

        .bg-indigo-500\/10 {
            background-color: rgba(20, 184, 166, 0.1) !important;
        }

        .bg-indigo-500\/20 {
            background-color: rgba(20, 184, 166, 0.2) !important;
        }

        .bg-indigo-500\/25 {
            background-color: rgba(20, 184, 166, 0.25) !important;
        }

        .bg-indigo-500\/50 {
            background-color: rgba(20, 184, 166, 0.5) !important;
        }

        .bg-indigo-600\/20 {
            background-color: rgba(13, 148, 136, 0.2) !important;
        }

        .bg-indigo-600\/50 {
            background-color: rgba(13, 148, 136, 0.5) !important;
        }

        .bg-indigo-600\/80 {
            background-color: rgba(13, 148, 136, 0.8) !important;
        }

        .bg-indigo-600\/90 {
            background-color: rgba(13, 148, 136, 0.9) !important;
        }

        .bg-indigo-900\/10 {
            background-color: rgba(13, 148, 136, 0.1) !important;
        }

        .bg-indigo-900\/20 {
            background-color: rgba(13, 148, 136, 0.2) !important;
        }

        .bg-indigo-900\/30 {
            background-color: rgba(13, 148, 136, 0.3) !important;
        }

        .bg-indigo-900\/40 {
            background-color: rgba(13, 148, 136, 0.4) !important;
        }

        .bg-indigo-900\/50 {
            background-color: rgba(13, 148, 136, 0.5) !important;
        }

        .bg-indigo-900\/80 {
            background-color: rgba(13, 148, 136, 0.8) !important;
        }

        .hover\:bg-indigo-500:hover {
            background-color: #0d9488 !important;
        }

        .hover\:bg-indigo-600:hover {
            background-color: #0f766e !important;
        }

        .hover\:bg-indigo-700:hover {
            background-color: #115e59 !important;
        }

        .hover\:bg-indigo-900\/40:hover {
            background-color: rgba(13, 148, 136, 0.4) !important;
        }

        .hover\:bg-indigo-600\/20:hover {
            background-color: rgba(13, 148, 136, 0.2) !important;
        }

        .hover\:bg-indigo-600\/50:hover {
            background-color: rgba(13, 148, 136, 0.5) !important;
        }

        .border-indigo-400\/20 {
            border-color: rgba(45, 212, 191, 0.2) !important;
        }

        .border-indigo-400\/50 {
            border-color: rgba(45, 212, 191, 0.5) !important;
        }

        .border-indigo-500 {
            border-color: #0d9488 !important;
        }

        .border-indigo-500\/20 {
            border-color: rgba(13, 148, 136, 0.2) !important;
        }

        .border-indigo-500\/30 {
            border-color: rgba(13, 148, 136, 0.3) !important;
        }

        .border-indigo-500\/50 {
            border-color: rgba(13, 148, 136, 0.5) !important;
        }

        .hover\:border-indigo-400:hover {
            border-color: #2dd4bf !important;
        }

        .hover\:border-indigo-500\/50:hover {
            border-color: rgba(13, 148, 136, 0.5) !important;
        }

        .ring-indigo-500\/30 {
            --tw-ring-color: rgba(20, 184, 166, 0.3) !important;
        }

        .ring-indigo-500\/50 {
            --tw-ring-color: rgba(20, 184, 166, 0.5) !important;
        }

        .peer-checked\:bg-indigo-500:checked~div {
            background-color: #0d9488 !important;
        }

        .peer-checked\:bg-indigo-500:checked {
            background-color: #0d9488 !important;
        }

        .shadow-indigo-500\/20 {
            --tw-shadow-color: rgba(20, 184, 166, 0.2) !important;
        }

        .shadow-indigo-900\/20 {
            --tw-shadow-color: rgba(13, 148, 136, 0.2) !important;
        }

        .shadow-indigo-900\/30 {
            --tw-shadow-color: rgba(13, 148, 136, 0.3) !important;
        }

        .shadow-indigo-900\/50 {
            --tw-shadow-color: rgba(13, 148, 136, 0.5) !important;
        }

        /* Typography & Whitespace - Literary Magazine styles */
        .serif-text {
            font-family: 'EB Garamond', 'Lora', 'Cormorant Garamond', Georgia, serif;
            font-size: 1.125rem;
            line-height: 1.75;
        }

        .sans-text {
            font-family: 'Inter', 'Lexend Deca', sans-serif;
        }

        /* Modern Flat controls (border-de-emphasized) */
        input.underline-input,
        textarea.underline-input,
        select.flat-select {
            border: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            background-color: transparent !important;
            border-radius: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }

        input.underline-input:focus,
        textarea.underline-input:focus,
        select.flat-select:focus {
            border-bottom: 1px solid rgba(20, 184, 166, 0.8) !important;
            background-color: rgba(255, 255, 255, 0.01) !important;
            box-shadow: none !important;
            outline: none !important;
        }

        select.flat-select {
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
            background-repeat: no-repeat !important;
            background-position: right 4px center !important;
            background-size: 14px !important;
            padding-right: 20px !important;
            cursor: pointer;
        }

        /* Flat text buttons */
        .borderless-btn {
            background: transparent !important;
            border: none !important;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #9ca3af;
            border-bottom: 1px solid transparent !important;
            transition: all 0.2s ease;
            border-radius: 0 !important;
        }

        .borderless-btn:hover {
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
        }

        .borderless-btn.active-accent {
            color: #2dd4bf;
            border-bottom: 1px solid #2dd4bf !important;
        }

        /* Settings Modal Layout: Orientation aware */
        #settings-modal-wrapper {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }

        #settings-sidebar-nav {
            width: 14rem;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            background-color: rgba(255, 255, 255, 0.01);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #settings-sidebar-tabs {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .settings-tab-sidebar-btn {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #6b7280;
            border-left: 2px solid transparent;
            padding-left: 12px;
            text-align: left;
            transition: all 0.2s ease;
        }

        .settings-tab-sidebar-btn.active {
            color: #14b8a6;
            border-left: 2px solid #14b8a6;
        }

        .settings-tab-sidebar-btn:hover {
            color: #d1d5db;
        }

        /* Layout specific overrides for settings */
        body.layout-vertical #settings-sidebar-nav {
            display: none !important;
        }

        body.layout-vertical #settings-modal-header-tabs {
            display: flex !important;
        }

        body.layout-horizontal #settings-sidebar-nav {
            display: flex !important;
        }

        body.layout-horizontal #settings-modal-header-tabs {
            display: none !important;
        }

        body.layout-horizontal #settings-modal-title-box {
            display: none !important;
        }

        /* Subtle Chat Bubble Tweaks: Thinner borders, clean text-only controls */
        .chat-bubble-container .bubble-body {
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        }

        .chat-bubble-container:hover .action-btn-group button {
            opacity: 1;
        }

        .chat-bubble-container .action-btn-group button {
            opacity: 0.4;
            transition: opacity 0.2s ease;
        }

        /* ==========================================================================
           Custom CSS Utilities
           ========================================================================== */

        /* Auto-Hide Scrollbars (Only show on hover) */
        .scrollbar-autohide::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .scrollbar-autohide::-webkit-scrollbar-button {
            display: none;
        }

        .scrollbar-autohide::-webkit-scrollbar-track {
            background: transparent;
        }

        .scrollbar-autohide::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 10px;
        }

        .scrollbar-autohide:hover::-webkit-scrollbar-thumb {
            background: rgba(107, 114, 128, 0.5);
        }

        .scrollbar-autohide {
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
            transition: scrollbar-color 0.2s;
        }

        .scrollbar-autohide:hover {
            scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
        }

        /* Completely Hide Scrollbars */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Image Upload Preview */
        #image-preview-container {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 0;
            padding: 0.5rem;
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            border-radius: 0.75rem 0.75rem 0 0;
            z-index: 40;
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

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

        .preview-image-wrapper {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 0.5rem;
            overflow: hidden;
            border: 2px solid var(--brand-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .preview-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .remove-image-btn {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 2px solid #111827;
            transition: transform 0.2s ease;
            z-index: 50;
        }

        .remove-image-btn:hover {
            transform: scale(1.1);
            background: #f87171;
        }

        /* Message Images */
        .message-image-container {
            float: right;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-left: 1rem;
            margin-bottom: 0.5rem;
            max-width: 50%;
            shape-outside: margin-box;
        }

        .message-img {
            display: block;
            width: 50px;
            height: 50px;
            min-width: 50px;
            min-height: 50px;
            flex-shrink: 0;
            border-radius: 0.5rem;
            object-fit: cover;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .message-img:hover {
            transform: scale(1.05) translateY(-2px);
            border-color: var(--brand-color);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }