:root {
    /* --- Helper for Glass Effects --- */
    --theme-primary-rgb: 0, 191, 255; /* Midnight Cyan RGB */

    /* --- DEFAULT THEME IS NOW MIDNIGHT (Dark) --- */
    /* Replaced #4a90e2 with Midnight Cyan #00BFFF */
    --theme-primary-default: #00BFFF; 
    --theme-hover-default: #009ACD;

    /* Replaced #000000 with Midnight Blue-Black #121218 */
    --background-color-default: #121218; 
    --wallpaper-fallback-bg: #121218;

    /* Replaced #1f1f1f with Midnight Sidebar #1A1A22 */
    --sidebar-bg-default: #1A1A22;
    --header-bg-default: #1A1A22;
    --input-area-bg-default: #1A1A22;
    --settings-modal-bg-default: #1A1A22;

    /* Message Bubbles */
    --ai-message-bg-default: #2C2C3A;
    --text-color-default: #EAEAEA;
    --input-bg-default: #2C2C3A;
    --border-color-default: #444;

    /* Glass/Transparents */
    --background-color-transparent: rgba(26, 26, 34, 0.8);
    --border-color-transparent: rgba(255, 255, 255, 0.1);
    
    /* Highlights */
    --highlight-bg: #00BFFF;
    --highlight-text: #000;

    /* Fonts */
    --font-main-default: 'Inter', system-ui, -apple-system, sans-serif;

    /* --- Default Theme (Dark) --- */
    --theme-primary-default: #4a90e2;
    --theme-hover-default: #357ab8;
    --font-main-default: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --background-color-default: #000000;
    --wallpaper-fallback-bg: transparent;
    --sidebar-bg-default: #1f1f1f;
    --header-bg-default: #1f1f1f;
    --input-area-bg-default: #1f1f1f;
    --ai-message-bg-default: #2a2a2a;
    --settings-modal-bg-default: #1f1f1f;
    --text-color-default: #f0f0f0;
    --input-bg-default: #333;
    --border-color-default: #333;
    --background-color-transparent: rgba(31, 31, 31, 0.1);
    --border-color-transparent: rgba(255, 255, 255, 0.2);
    --highlight-bg: yellow;
    --highlight-text: black;
    /* --- Mid night Theme (Dark) --- */
    --theme-primary-midnight: #00BFFF;
    --theme-hover-midnight: #009ACD;
    --font-main-midnight: 'Inter', sans-serif;
    --background-color-midnight: #121218;
    --sidebar-bg-midnight: #1A1A22;
    --header-bg-midnight: #1A1A22;
    --input-area-bg-midnight: #1A1A22;
    --ai-message-bg-midnight: #2C2C3A;
    --settings-modal-bg-midnight: #1A1A22;
    --text-color-midnight: #EAEAEA;
    --input-bg-midnight: #2C2C3A;
    --border-color-midnight: #444;
    /* --- Synthwave Theme (Dark) --- */
    --theme-primary-synthwave: #FF00FF;
    --theme-hover-synthwave: #C700C7;
    --font-main-synthwave: 'Fira Code', monospace;
    --background-color-synthwave: #201335;
    --sidebar-bg-synthwave: #2A1A45;
    --header-bg-synthwave: #2A1A45;
    --input-area-bg-synthwave: #2A1A45;
    --ai-message-bg-synthwave: #4A3A65;
    --settings-modal-bg-synthwave: #2A1A45;
    --text-color-synthwave: #E0B0FF;
    --input-bg-synthwave: #4A3A65;
    --border-color-synthwave: #6A4A85;
    /* --- Stealth Black Theme (Dark) --- */
    --theme-primary-stealth: #444;
    --theme-hover-stealth: #555;
    --font-main-stealth: var(--font-main-default);
    --background-color-stealth: #000000;
    --sidebar-bg-stealth: #000000;
    --header-bg-stealth: #000000;
    --input-area-bg-stealth: #000000;
    --ai-message-bg-stealth: #111;
    --settings-modal-bg-stealth: #050505;
    --text-color-stealth: #999;
    --input-bg-stealth: #111;
    --border-color-stealth: #222;
    /* --- Carbon Fibre Theme (Dark) --- */
    --theme-primary-carbon-fibre: #c0c0c0;
    --theme-hover-carbon-fibre: #a0a0a0;
    --font-main-carbon-fibre: var(--font-main-default);
    --background-color-carbon-fibre: #222;
    --sidebar-bg-carbon-fibre: #1a1a1a;
    --header-bg-carbon-fibre: #1a1a1a;
    --input-area-bg-carbon-fibre: #1a1a1a;
    --ai-message-bg-carbon-fibre: #2c2c2c;
    --settings-modal-bg-carbon-fibre: #1a1a1a;
    --text-color-carbon-fibre: #e0e0e0;
    --input-bg-carbon-fibre: #2c2c2c;
    --border-color-carbon-fibre: #444;
    /* --- Frosted Glass Theme (Light) --- */
    --theme-primary-frosted-glass: #007aff;
    --theme-hover-frosted-glass: #0056b3;
    --font-main-frosted-glass: var(--font-main-default);
    --background-color-frosted-glass: #eaf2f8;
    --sidebar-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --header-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --input-area-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --ai-message-bg-frosted-glass: rgba(255, 255, 255, 0.9);
    --settings-modal-bg-frosted-glass: rgba(255, 255, 255, 0.8);
    --text-color-frosted-glass: #111;
    --input-bg-frosted-glass: #e9e9e9;
    --border-color-frosted-glass: #c1c1c1;
    /* --- Paper Theme (Light) --- */
    --theme-primary-paper: #2c5282;
    --theme-hover-paper: #1a365d;
    --font-main-paper: 'Merriweather', serif;
    --background-color-paper: #F8F4E9;
    --sidebar-bg-paper: #FFFFFF;
    --header-bg-paper: #FFFFFF;
    --input-area-bg-paper: #FFFFFF;
    --ai-message-bg-paper: #FFFFFF;
    --settings-modal-bg-paper: #FFFFFF;
    --text-color-paper: #121212;
    --input-bg-paper: #e9e9e9;
    --border-color-paper: #d1d1d1;
    --highlight-bg-paper: #ffd700;
    --highlight-text-paper: black;
    /* --- Light Mode Overrides --- */
    --theme-primary-light: var(--theme-primary-default);
    --theme-hover-light: var(--theme-hover-default);
    --font-main-light: var(--font-main-default);
    --background-color-light: #f0f0f0;
    --sidebar-bg-light: #FFFFFF;
    --header-bg-light: #FFFFFF;
    --input-area-bg-light: #FFFFFF;
    --ai-message-bg-light: #FFFFFF;
    --settings-modal-bg-light: #FFFFFF;
    --text-color-light: #121212;
    --input-bg-light: #e9e9e9;
    --border-color-light: #d1d1d1;
    --highlight-bg-light: #ffd700;
    --highlight-text-light: black;
    /* --- Nord Theme (Dark) --- */
    --theme-primary-nord: #88C0D0;
    --theme-hover-nord: #81A1C1;
    --font-main-nord: 'Inter', sans-serif;
    --background-color-nord: #2E3440;
    --sidebar-bg-nord: #3B4252;
    --header-bg-nord: #3B4252;
    --input-area-bg-nord: #3B4252;
    --ai-message-bg-nord: #434C5E;
    --settings-modal-bg-nord: #3B4252;
    --text-color-nord: #ECEFF4;
    --input-bg-nord: #434C5E;
    --border-color-nord: #4C566A;
    /* --- Terminal Theme (Dark) --- */
    --theme-primary-terminal: #39FF14;
    --theme-hover-terminal: #2CC70F;
    --font-main-terminal: 'Fira Code', monospace;
    --background-color-terminal: #0A0A0A;
    --sidebar-bg-terminal: #111;
    --header-bg-terminal: #111;
    --input-area-bg-terminal: #111;
    --ai-message-bg-terminal: #1C1C1C;
    --settings-modal-bg-terminal: #111;
    --text-color-terminal: #39FF14;
    --input-bg-terminal: #1C1C1C;
    --border-color-terminal: #222;
    /* --- Applied Variables --- */
    /* --- Metallic Gold Theme (Dark) --- */ /* <-- NEW */
    --theme-primary-gold: #FFD700; /* Bright Gold */ /* <-- NEW */
    --theme-hover-gold: #E5C400; /* Darker Gold for hover */ /* <-- NEW */
    --font-main-gold: var(--font-main-default); /* <-- NEW */
    --background-color-gold: #101010; /* Near Black */ /* <-- NEW */
    --sidebar-bg-gold: #1A1A1A; /* <-- NEW */
    --header-bg-gold: #1A1A1A; /* <-- NEW */
    --input-area-bg-gold: #1A1A1A; /* <-- NEW */
    --ai-message-bg-gold: #222222; /* <-- NEW */
    --settings-modal-bg-gold: #1A1A1A; /* <-- NEW */
    --text-color-gold: #EAEAEA; /* <-- NEW */
    --input-bg-gold: #333333; /* <-- NEW */
    --border-color-gold: #444444; /* <-- NEW */
    --theme-primary: var(--theme-primary-default);
    --theme-hover: var(--theme-hover-default);
    --font-main: var(--font-main-default);
    --font-main-serif: 'Merriweather', serif;
    --font-main-mono: 'Fira Code', monospace;
    --font-main-inter: 'Inter', sans-serif;
    --user-text-color-final: #fff;
    --ai-text-color-final: var(--text-color);
    --background-color: var(--background-color-default);
    --sidebar-bg: var(--sidebar-bg-default);
    --header-bg: var(--header-bg-default);
    --input-area-bg: var(--input-area-bg-default);
    --ai-message-bg: var(--ai-message-bg-default);
    --settings-modal-bg: var(--settings-modal-bg-default);
    --text-color: var(--text-color-default);
    --input-bg: var(--input-bg-default);
    --border-color: var(--border-color-default);
    --highlight-bg-final: var(--highlight-bg);
    --highlight-text-final: var(--highlight-text);
}

/* Apply Theme Preset Variables */
html.theme-midnight { --theme-primary: var(--theme-primary-midnight); --theme-hover: var(--theme-hover-midnight); --font-main: var(--font-main-midnight); --background-color: var(--background-color-midnight); --sidebar-bg: var(--sidebar-bg-midnight); --header-bg: var(--header-bg-midnight); --input-area-bg: var(--input-area-bg-midnight); --ai-message-bg: var(--ai-message-bg-midnight); --settings-modal-bg: var(--settings-modal-bg-midnight); --text-color: var(--text-color-midnight); --input-bg: var(--input-bg-midnight); --border-color: var(--border-color-midnight); }
html.theme-synthwave { --theme-primary: var(--theme-primary-synthwave); --theme-hover: var(--theme-hover-synthwave); --font-main: var(--font-main-synthwave); --background-color: var(--background-color-synthwave); --sidebar-bg: var(--sidebar-bg-synthwave); --header-bg: var(--header-bg-synthwave); --input-area-bg: var(--input-area-bg-synthwave); --ai-message-bg: var(--ai-message-bg-synthwave); --settings-modal-bg: var(--settings-modal-bg-synthwave); --text-color: var(--text-color-synthwave); --input-bg: var(--input-bg-synthwave); --border-color: var(--border-color-synthwave); }
html.theme-stealth { --theme-primary: var(--theme-primary-stealth); --theme-hover: var(--theme-hover-stealth); --font-main: var(--font-main-stealth); --background-color: var(--background-color-stealth); --sidebar-bg: var(--sidebar-bg-stealth); --header-bg: var(--header-bg-stealth); --input-area-bg: var(--input-area-bg-stealth); --ai-message-bg: var(--ai-message-bg-stealth); --settings-modal-bg: var(--settings-modal-bg-stealth); --text-color: var(--text-color-stealth); --input-bg: var(--input-bg-stealth); --border-color: var(--border-color-stealth); }
html.theme-stealth .sidebar-btn { color: var(--text-color-stealth); }
html.theme-carbon-fibre { --theme-primary: var(--theme-primary-carbon-fibre); --theme-hover: var(--theme-hover-carbon-fibre); --font-main: var(--font-main-carbon-fibre); --background-color: var(--background-color-carbon-fibre); --sidebar-bg: var(--sidebar-bg-carbon-fibre); --header-bg: var(--header-bg-carbon-fibre); --input-area-bg: var(--input-area-bg-carbon-fibre); --ai-message-bg: var(--ai-message-bg-carbon-fibre); --settings-modal-bg: var(--settings-modal-bg-carbon-fibre); --text-color: var(--text-color-carbon-fibre); --input-bg: var(--input-bg-carbon-fibre); --border-color: var(--border-color-carbon-fibre); background-image: linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%, rgba(255,255,255,0.03)), linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%, rgba(255,255,255,0.03)); background-size: 6px 6px; }
html.theme-frosted-glass { --theme-primary: var(--theme-primary-frosted-glass); --theme-hover: var(--theme-hover-frosted-glass); --font-main: var(--font-main-frosted-glass); --background-color: transparent; --wallpaper-fallback-bg: var(--background-color-frosted-glass); --sidebar-bg: var(--sidebar-bg-frosted-glass); --header-bg: var(--header-bg-frosted-glass); --input-area-bg: var(--input-area-bg-frosted-glass); --ai-message-bg: var(--ai-message-bg-frosted-glass); --settings-modal-bg: var(--settings-modal-bg-frosted-glass); --text-color: var(--text-color-frosted-glass); --input-bg: var(--input-bg-frosted-glass); --border-color: var(--border-color-frosted-glass); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }
@supports (backdrop-filter: blur(10px)) {
html.theme-frosted-glass .sidebar, html.theme-frosted-glass .controls-header, html.theme-frosted-glass #input-area, html.theme-frosted-glass .settings-modal, html.theme-frosted-glass .popover-menu { backdrop-filter: blur(10px); }
html.theme-frosted-glass .sidebar { --sidebar-bg: rgba(255, 255, 255, 0.1); }
html.theme-frosted-glass .controls-header, html.theme-frosted-glass #input-area { --header-bg: rgba(255, 255, 255, 0.5); --input-area-bg: rgba(255, 255, 255, 0.5); }
html.theme-frosted-glass .settings-modal { --settings-modal-bg: rgba(255, 255, 255, 0.6); }
html.theme-frosted-glass .popover-menu { background: rgba(255, 255, 255, 0.6); }
}
html.theme-paper { --theme-primary: var(--theme-primary-paper); --theme-hover: var(--theme-hover-paper); --font-main: var(--font-main-paper); --background-color: var(--background-color-paper); --sidebar-bg: var(--sidebar-bg-paper); --header-bg: var(--header-bg-paper); --input-area-bg: var(--input-area-bg-paper); --ai-message-bg: var(--ai-message-bg-paper); --settings-modal-bg: var(--settings-modal-bg-paper); --text-color: var(--text-color-paper); --input-bg: var(--input-bg-paper); --border-color: var(--border-color-paper); --highlight-bg-final: var(--highlight-bg-paper); --highlight-text-final: var(--highlight-text-paper); }
html.theme-nord { --theme-primary: var(--theme-primary-nord); --theme-hover: var(--theme-hover-nord); --font-main: var(--font-main-nord); --background-color: var(--background-color-nord); --sidebar-bg: var(--sidebar-bg-nord); --header-bg: var(--header-bg-nord); --input-area-bg: var(--input-area-bg-nord); --ai-message-bg: var(--ai-message-bg-nord); --settings-modal-bg: var(--settings-modal-bg-nord); --text-color: var(--text-color-nord); --input-bg: var(--input-bg-nord); --border-color: var(--border-color-nord); }
html.theme-terminal { --theme-primary: var(--theme-primary-terminal); --theme-hover: var(--theme-hover-terminal); --font-main: var(--font-main-terminal); --background-color: var(--background-color-terminal); --sidebar-bg: var(--sidebar-bg-terminal); --header-bg: var(--header-bg-terminal); --input-area-bg: var(--input-area-bg-terminal); --ai-message-bg: var(--ai-message-bg-terminal); --settings-modal-bg: var(--settings-modal-bg-terminal); --text-color: var(--text-color-terminal); --input-bg: var(--input-bg-terminal); --border-color: var(--border-color-terminal); }
html.theme-terminal .sidebar, html.theme-terminal .controls-header, html.theme-terminal #input-area, html.theme-terminal .settings-modal, html.theme-terminal .popover-menu, html.theme-terminal #message-input { color: var(--text-color-terminal); }
html.theme-gold { /* <-- NEW */
    --theme-primary: var(--theme-primary-gold); 
    --theme-hover: var(--theme-hover-gold); 
    --font-main: var(--font-main-gold); 
    --background-color: var(--background-color-gold); 
    --sidebar-bg: var(--sidebar-bg-gold); 
    --header-bg: var(--header-bg-gold); 
    --input-area-bg: var(--input-area-bg-gold); 
    --ai-message-bg: var(--ai-message-bg-gold); 
    --settings-modal-bg: var(--settings-modal-bg-gold); 
    --text-color: var(--text-color-gold); 
    --input-bg: var(--input-bg-gold); 
    --border-color: var(--border-color-gold); 
}
/* Light Mode Overrides */
html.light-mode { --theme-primary: var(--theme-primary-light); --theme-hover: var(--theme-hover-light); --font-main: var(--font-main-light); --background-color: var(--background-color-light); --sidebar-bg: var(--sidebar-bg-light); --header-bg: var(--header-bg-light); --input-area-bg: var(--input-area-bg-light); --ai-message-bg: var(--ai-message-bg-light); --settings-modal-bg: var(--settings-modal-bg-light); --text-color: var(--text-color-light); --input-bg: var(--input-bg-light); --border-color: var(--border-color-light); --background-color-transparent: rgba(255, 255, 255, 0.1); --border-color-transparent: rgba(0, 0, 0, 0.1); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }
body.font-style-serif .message { font-family: var(--font-main-serif); }
body.font-style-mono .message { font-family: var(--font-main-mono); }
html.font-sm #chat .message { font-size: 0.85em; }
html.font-md #chat .message { font-size: 1em; }
html.font-lg #chat .message { font-size: 1.15em; }

/* Specific theme overrides WHEN light mode is ALSO active */
html.light-mode.theme-midnight { --theme-primary: var(--theme-primary-midnight); --theme-hover: var(--theme-hover-midnight); }
html.light-mode.theme-synthwave { --theme-primary: var(--theme-primary-synthwave); --theme-hover: var(--theme-hover-synthwave); }
html.light-mode.theme-stealth { --theme-primary: var(--theme-primary-stealth); --theme-hover: var(--theme-hover-stealth); --font-main: var(--font-main-stealth); --background-color: var(--background-color-stealth); --sidebar-bg: var(--sidebar-bg-stealth); --header-bg: var(--header-bg-stealth); --input-area-bg: var(--input-area-bg-stealth); --ai-message-bg: var(--ai-message-bg-stealth); --settings-modal-bg: var(--settings-modal-bg-stealth); --text-color: var(--text-color-stealth); --input-bg: var(--input-bg-stealth); --border-color: var(--border-color-stealth); --highlight-bg-final: var(--highlight-bg); --highlight-text-final: var(--highlight-text); }
html.light-mode.theme-carbon-fibre { --theme-primary: var(--theme-primary-carbon-fibre); --theme-hover: var(--theme-hover-carbon-fibre); --font-main: var(--font-main-carbon-fibre); --background-color: var(--background-color-carbon-fibre); --sidebar-bg: var(--sidebar-bg-carbon-fibre); --header-bg: var(--header-bg-carbon-fibre); --input-area-bg: var(--input-area-bg-carbon-fibre); --ai-message-bg: var(--ai-message-bg-carbon-fibre); --settings-modal-bg: var(--settings-modal-bg-carbon-fibre); --text-color: var(--text-color-carbon-fibre); --input-bg: var(--input-bg-carbon-fibre); --border-color: var(--border-color-carbon-fibre); --highlight-bg-final: var(--highlight-bg); --highlight-text-final: var(--highlight-text); }
html.light-mode.theme-nord { --theme-primary: var(--theme-primary-nord); --theme-hover: var(--theme-hover-nord); --font-main: var(--font-main-nord); --background-color: var(--background-color-nord); --sidebar-bg: var(--sidebar-bg-nord); --header-bg: var(--header-bg-nord); --input-area-bg: var(--input-area-bg-nord); --ai-message-bg: var(--ai-message-bg-nord); --settings-modal-bg: var(--settings-modal-bg-nord); --text-color: var(--text-color-nord); --input-bg: var(--input-bg-nord); --border-color: var(--border-color-nord); --highlight-bg-final: var(--highlight-bg); --highlight-text-final: var(--highlight-text); }
html.light-mode.theme-terminal { --theme-primary: var(--theme-primary-terminal); --theme-hover: var(--theme-hover-terminal); --font-main: var(--font-main-terminal); --background-color: var(--background-color-terminal); --sidebar-bg: var(--sidebar-bg-terminal); --header-bg: var(--header-bg-terminal); --input-area-bg: var(--input-area-bg-terminal); --ai-message-bg: var(--ai-message-bg-terminal); --settings-modal-bg: var(--settings-modal-bg-terminal); --text-color: var(--text-color-terminal); --input-bg: var(--input-bg-terminal); --border-color: var(--border-color-terminal); --highlight-bg-final: var(--highlight-bg); --highlight-text-final: var(--highlight-text); }

/* Force light mode for specific themes even if light-mode class is NOT present */
html:not(.light-mode).theme-paper { --theme-primary: var(--theme-primary-paper); --theme-hover: var(--theme-hover-paper); --font-main: var(--font-main-paper); --background-color: var(--background-color-paper); --sidebar-bg: var(--sidebar-bg-paper); --header-bg: var(--header-bg-paper); --input-area-bg: var(--input-area-bg-paper); --ai-message-bg: var(--ai-message-bg-paper); --settings-modal-bg: var(--settings-modal-bg-paper); --text-color: var(--text-color-paper); --input-bg: var(--input-bg-paper); --border-color: var(--border-color-paper); --highlight-bg-final: var(--highlight-bg-paper); --highlight-text-final: var(--highlight-text-paper); }
html:not(.light-mode).theme-frosted-glass { --theme-primary: var(--theme-primary-frosted-glass); --theme-hover: var(--theme-hover-frosted-glass); --font-main: var(--font-main-frosted-glass); --background-color: transparent; --wallpaper-fallback-bg: var(--background-color-frosted-glass); --sidebar-bg: var(--sidebar-bg-frosted-glass); --header-bg: var(--header-bg-frosted-glass); --input-area-bg: var(--input-area-bg-frosted-glass); --ai-message-bg: var(--ai-message-bg-frosted-glass); --settings-modal-bg: var(--settings-modal-bg-frosted-glass); --text-color: var(--text-color-frosted-glass); --input-bg: var(--input-bg-frosted-glass); --border-color: var(--border-color-frosted-glass); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }

/* --- Premium Unlock Modal Styles --- */
#premium-offer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; z-index: 10000; }
#premium-offer-modal { position: relative; background: transparent; border-radius: 8px; padding: 0; max-width: 450px; width: 90%; box-shadow: 0 8px 30px rgba(74, 144, 226, 0.4); transition: transform 0.3s ease; }
#premium-offer-image { width: 100%; height: auto; display: block; border-radius: 8px; }
#premium-offer-cta-btn { position: absolute; bottom: 5.5%; left: 50%; transform: translateX(-50%); width: 80%; padding: 12px 20px; background: #FFD700; color: #111; font-size: 1.1em; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background 0.2s, transform 0.2s; }
#premium-offer-cta-btn:hover { background: #E8C100; transform: translateX(-50%) translateY(-2px); }
#premium-offer-close-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); border: 1px solid white; color: white; font-size: 1.2em; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; line-height: 1; display: flex; justify-content: center; align-items: center; opacity: 0.8; }
#premium-offer-close-btn:hover { background: #cc0000; opacity: 1; }

/* Premium Credentials Modal */
#premium-credentials-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 25px 30px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 5px 20px rgba(0,0,0,0.3); width: 90%; max-width: 380px; text-align: center; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
#premium-credentials-modal h2 { margin-top: 0; margin-bottom: 10px; color: var(--theme-primary); transition: color 0.3s; }
#premium-credentials-modal h2 i { margin-right: 8px; }
#premium-credentials-modal p { margin-bottom: 20px; opacity: 0.8; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-weight: 500; font-size: 0.9em; margin-bottom: 5px; opacity: 0.9; }
.form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 1em; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s; }
.form-group input[type="text"]::placeholder, .form-group input[type="password"]::placeholder { color: #888; opacity: 0.6; }
html.light-mode .form-group input[type="text"]::placeholder, html.light-mode .form-group input[type="password"]::placeholder, html.theme-paper .form-group input[type="text"]::placeholder, html.theme-paper .form-group input[type="password"]::placeholder, html.theme-frosted-glass .form-group input[type="text"]::placeholder, html.theme-frosted-glass .form-group input[type="password"]::placeholder { color: #777; }
.form-group input[type="text"]:focus, .form-group input[type="password"]:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 8px var(--theme-primary); }
#premium-credentials-modal .button-group { display: flex; gap: 10px; margin-top: 25px; }
#premium-credentials-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #premium-credentials-overlay { background: rgba(0,0,0,0.3); }
#premium-credentials-modal button { margin: 0; flex-grow: 1; padding: 12px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s, transform 0.2s, color 0.3s, border-color 0.3s; font-weight: bold; }
#credentials-unlock-btn { background: var(--theme-primary); color: #fff; border: 1px solid transparent; }
#credentials-unlock-btn:hover { background: var(--theme-hover); transform: translateY(-2px); }
html.light-accent-selected #credentials-unlock-btn, html.theme-carbon-fibre #credentials-unlock-btn, html.theme-nord #credentials-unlock-btn, html.theme-terminal #credentials-unlock-btn, html.light-mode #credentials-unlock-btn, html.theme-paper #credentials-unlock-btn, html.theme-frosted-glass #credentials-unlock-btn { color: #111; }
#credentials-cancel-btn { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); }
#credentials-cancel-btn:hover { background: var(--ai-message-bg); transform: translateY(-2px); }

/* Unlock/Premium Buttons */
#show-unlock-modal-btn { background: #c69400; border-color: #f5b800; box-shadow: 0 0 10px #f5b800; }
#show-unlock-modal-btn:hover { background: #eab308; }
#premium-status-badge { display: none; background: #c69400; border-color: #f5b800; box-shadow: 0 0 10px #f5b800; cursor: default; opacity: 0.8; }
#premium-status-badge:hover { background: #c69400; box-shadow: 0 0 10px #f5b800; transform: none; }
.premium-feature { display: none !important; }
body.premium-unlocked .model-list li.premium-feature { display: list-item !important; }
body.premium-unlocked .input-controls label.premium-feature { display: flex !important; }
body.premium-unlocked #logout-btn-container.premium-feature { display: block !important; }
body.premium-unlocked #show-unlock-modal-btn { display: none !important; }
body.premium-unlocked #premium-status-badge { display: flex !important; }

/* Intro Video */
#intro-video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 20000; opacity: 1; transition: opacity 0.5s ease-out; pointer-events: auto; }
#intro-video-container.fade-out { opacity: 0; pointer-events: none; }
#intro-video-container video { width: 100%; height: 100%; object-fit: cover; }

/* Base Layout */
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
html { background-color: var(--background-color); transition: background-color 0.3s; }
body { font-family: var(--font-main); color: var(--text-color); transition: color 0.3s; }
.main-container { display: flex; height: 100%; width: 100%; overflow: hidden; position: relative; z-index: 2; }
.chat-container { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; border-left: 2px solid var(--theme-primary); box-shadow: 0 0 20px var(--theme-primary); overflow: hidden; background: transparent; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; min-width: 0; }
html.theme-frosted-glass .chat-container { border-left: 1px solid var(--theme-primary); box-shadow: 0 0 15px rgba(0,122,255,0.3); }
html.theme-carbon-fibre .chat-container { border-left: 1px solid var(--theme-primary); box-shadow: 0 0 20px rgba(192,192,192,0.3); }

/* Sidebar */
.sidebar {
    /* ULTRA PREMIUM: Deep Matte Gradient */
    background: linear-gradient(180deg, #0a0b10 0%, #13161c 100%);
    
    /* Subtle blur for depth, but mostly opaque for a solid premium feel */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* "Light Edge" instead of a border (Subtle highlight on the right) */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08), 
                10px 0 40px rgba(0, 0, 0, 0.5);
    border-right: none;

    /* Positioning (Keep existing) */
    position: fixed; top: 0; left: 0; width: 320px; height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; z-index: 1000;
}
    
    /* Thinner, cleaner border */
    border-right: 1px solid rgba(255, 255, 255, 0.08); 
    box-shadow: 10px 0 30px rgba(0,0,0,0.3);
    
    /* Positioning */
    position: fixed; top: 0; left: 0; width: 320px; height: 100%; 
    transform: translateX(-100%); 
    transition: transform 0.3s ease, box-shadow 0.3s, background-color 0.3s, border-color 0.3s; 
    display: flex; flex-direction: column; z-index: 1000; 
}
html.theme-frosted-glass .sidebar, html.theme-carbon-fibre .sidebar { border-right: 1px solid var(--theme-primary); }
html.theme-carbon-fibre .sidebar { box-shadow: 0 0 20px rgba(192,192,192,0.3); }
.sidebar.open { transform: translateX(0); }


.sidebar-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    /* Fading Gradient Separator */
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}



#sidebar-header-content { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
#sidebar-greeting { font-size: 1em; font-weight: bold; color: var(--theme-primary); }
#sidebar-subheading { font-size: 0.6em; font-weight: normal; color: var(--text-color); opacity: 0.7; margin-top: 2px; }
html.theme-synthwave .sidebar-header { text-shadow: 0 0 12px var(--theme-primary); }
.sidebar-header button { background: none; border: none; color: var(--text-color); font-size: 1.5em; cursor: pointer; }
.sidebar-controls { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); transition: border-color 0.3s; overflow: hidden; flex-shrink: 0; }
.sidebar-btn-group { display: flex; gap: 5px; }



/* General Sidebar Buttons (Premium Glass + Accent Glow) */
.sidebar-btn {
    height: 44px;
    border-radius: 12px;
    padding: 0 16px;
    
    /* Transparent Glass Base */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}

.sidebar-btn:hover {
    /* Dynamic Accent Tint on Hover */
    background: rgba(var(--theme-primary-rgb), 0.1); 
    
    /* Dynamic Accent Border */
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    
    /* The Subtle Accent Glow */
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.15);
    
    color: #fff;
    transform: translateY(-1px);
}

.sidebar-btn i { opacity: 0.7; transition: 0.3s; }
.sidebar-btn:hover i { opacity: 1; color: var(--theme-primary); }

/* "New Chat" Hero Button (Specific Override) */
#new-chat-btn {
    /* Gradient Glow */
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-hover) 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.25); /* Colored Glow */
    margin-bottom: 10px;
}

#new-chat-btn:hover {
    box-shadow: 0 6px 25px rgba(var(--theme-primary-rgb), 0.4);
    transform: translateY(-1px) scale(1.01);
    filter: brightness(1.1);
}



.sidebar-btn:hover { background: var(--theme-hover); box-shadow: 0 0 15px var(--theme-primary); }
html.light-mode .sidebar-btn:hover, html.theme-paper .sidebar-btn:hover, html.theme-frosted-glass .sidebar-btn:hover { background: #dcdcdc; }
html.theme-carbon-fibre .sidebar-btn { color: var(--text-color-carbon-fibre); box-shadow: 0 0 10px rgba(192,192,192,0.3); }
html.theme-carbon-fibre .sidebar-btn:hover { background: var(--theme-hover-carbon-fibre); color: #111; }
#chat-history-list { flex-grow: 1; overflow-y: auto; padding: 10px; }

/* Improve History Items */
.history-item {
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; justify-content: space-between; align-items: center; cursor: pointer; 
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px); /* Subtle slide on hover */
}

.history-item {
    border-radius: 8px;
    margin: 2px 10px;
    padding: 12px 14px;
    border: none; /* No border by default */
    transition: all 0.2s ease;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    color: rgba(255, 255, 255, 0.6); /* Muted text */
    background: transparent; /* Blended */
}

/* Hover: Slight highlight */
.history-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* Active: Laser Gradient */
.history-item.active {
    /* Gradient fading from left to right */
    background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.15) 0%, transparent 100%);
    
    /* The "Laser" indicator on the left */
    box-shadow: inset 3px 0 0 var(--theme-primary);
    
    color: #fff;
    font-weight: 600;
}

/* Adjust the small date text */
.history-item-date {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.3); /* Very subtle */
}
.history-item-details { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; margin-right: 10px; }
.history-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-date { font-size: 0.75em; color: #888; margin-top: 4px; }
html.light-mode .history-item-date, html.theme-paper .history-item-date, html.theme-frosted-glass .history-item-date { color: #555; }
.history-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-icon-btn { background: none; border: none; color: #888; font-size: 0.9em; cursor: pointer; padding: 2px 4px; transition: color 0.2s; }
html.light-mode .history-icon-btn, html.theme-paper .history-icon-btn, html.theme-frosted-glass .history-icon-btn { color: #777; }
.history-icon-btn:hover { color: var(--theme-primary); }
.history-icon-btn.delete-chat-btn:hover { color: #ff5c5c; }
.history-icon-btn.pin-chat-btn.pinned { color: var(--theme-primary); }
html.light-mode .history-item:hover, html.theme-paper .history-item:hover, html.theme-frosted-glass .history-item:hover { background-color: rgba(0,0,0,0.05); }
html.theme-stealth .history-item:hover { background-color: #1a1a1a; }
html.light-mode .history-item.active, html.theme-paper .history-item.active { background-color: #e0eafc; }
html.theme-frosted-glass .history-item.active { background-color: rgba(0,122,255,0.15); border-color: var(--theme-primary); }
html.theme-stealth .history-item.active { background-color: #222; }
html.theme-carbon-fibre .history-item.active { background-color: #333; }
.backup-toggle-container { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9em; padding-top: 10px; }
.overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: 0.3s ease; z-index: 900; }
html.theme-frosted-glass .overlay { background: rgba(0,0,0,0.3); }
.overlay.active { opacity: 1; pointer-events: auto; }

/* Sidebar Footer */

.sidebar-footer {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    
    /* Fading Gradient Separator */
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    background-size: 100% 1px;
    background-position: top;
    background-repeat: no-repeat;
    
    /* Blended Background */
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}



.sidebar-footer > div { margin-top: 0 !important; }
.sidebar-footer .sidebar-btn { width: 100%; box-sizing: border-box; }
#user-controls-sidebar { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
#user-controls-sidebar > .sidebar-btn { flex-grow: 1; }
#logged-in-controls { display: flex; width: 100%; gap: 5px; }
#logged-in-controls .sidebar-btn { flex-grow: 1; box-sizing: border-box; margin: 0; width: auto !important; }
body.logged-in #login-button, body.logged-in #signup-button { display: none !important; }

/* Header */
.top-header, .controls-header { text-align: center; padding: 10px 0 5px 0; border-bottom: 1px solid var(--border-color); background: var(--header-bg); transition: background 0.3s, border-color 0.3s; flex-shrink: 0; }
.controls-header { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; position: relative; }
#logo-video { max-height: 60px; width: auto; vertical-align: middle; }
.header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; flex-grow: 1; }


.header-right {
    gap: 2px !important; /* Reduced from 6px/8px */
}

/* Optional: If you want to shave off a tiny bit more padding from the buttons themselves */
.header-right .header-icon-btn {
    padding: 0 2px !important; /* Tighter touch targets */
    min-width: 30px !important; /* Allow them to be narrower */
}
    .header-right { display: flex; align-items: center; gap: 2px !important; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }



.header-icon-btn { 
    background: transparent; 
    border: 1px solid transparent; 
    color: rgba(255, 255, 255, 0.7); 
    width: 40px; height: 40px; 
    border-radius: 50%; /* Circle */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}

.header-icon-btn:hover { 
    background: rgba(var(--theme-primary-rgb), 0.1);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    color: var(--theme-primary);
    box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), 0.2);
    transform: none; /* Remove scale, use glow instead */
}
.header-icon-btn.active { color: var(--theme-primary); }
.hamburger { font-size: 1.6em; cursor: pointer; padding: 0 8px; color: var(--text-color); }
#search-container { display: flex; align-items: center; gap: 5px; background-color: var(--input-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); flex-grow: 1; max-width: 400px; margin: 0 10px; }
.hidden { display: none !important; }
#search-input { flex-grow: 1; background: none; border: none; outline: none; color: var(--text-color); font-size: 0.9em; }
#search-close-btn { background: none; border: none; color: var(--text-color); font-size: 1em; cursor: pointer; padding: 0 4px; flex-shrink: 0; }

/* Toggles */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #4a90e2, #357ab8); border-radius: 24px; transition: background 0.3s ease; }
.slider:before { position: absolute; content: "🌙"; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #333; }
.switch input:checked + .slider { background: linear-gradient(90deg, #ccc, #999); }
.switch input:checked + .slider:before { transform: translateX(26px); content: "☀️"; }
.feature-switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.feature-switch input { display: none; }
.feature-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #555; border-radius: 18px; transition: background 0.3s; }
html.light-mode .feature-slider, html.theme-paper .feature-slider, html.theme-frosted-glass .feature-slider { background: #ccc; }
.feature-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: transform 0.3s; }
.feature-switch input:checked + .feature-slider { background: var(--theme-primary); }
.feature-switch input:checked + .feature-slider:before { transform: translateX(16px); }
.control-group label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.control-group label input:disabled + .feature-slider { cursor: not-allowed !important; background: #444 !important; }
.control-group label input:disabled + .feature-slider:before { background-color: #777 !important; }
html.light-mode .control-group label input:disabled + .feature-slider:before, html.theme-paper .control-group label input:disabled + .feature-slider:before, html.theme-frosted-glass .control-group label input:disabled + .feature-slider:before { background-color: #aaa !important; }

/* Chat Area */
#chat { padding: 15px; overflow-y: auto; position: relative; flex-grow: 1; min-height: 0; }
.date-divider { text-align: center; margin: 15px auto; font-size: 0.8em; color: #888; display: flex; align-items: center; }
html.light-mode .date-divider, html.theme-paper .date-divider, html.theme-frosted-glass .date-divider { color: #555; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); margin: 0 10px; }

/* Message Containers */
.message-container { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 24px; /* More breathing room */
}

.message-wrapper { display: flex; gap: 8px; width: 100%; max-width: 800px; margin: 0 auto; }
.message-container.user .message-wrapper { justify-content: flex-end; }

/* Base message style */
.message { 
    padding: 12px 18px; 
    border-radius: 12px; 
    white-space: pre-wrap; 
    transition: background-color 0.3s, color 0.3s, font-size 0.2s ease-in-out, border-color 0.3s, box-shadow 0.3s; 
    line-height: 1.6; 
    min-width: 40px; 
    overflow-wrap: break-word; 
    font-family: var(--font-main); 
}

/* User Message - Tail on bottom right */
.message-container.user .message {
    border-radius: 20px 20px 4px 20px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-hover)); 
    color: var(--user-text-color-final);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: none;
}

/* AI Message - Tail on bottom left */
.message-container.ai .message, 
.message-container.assistant .message {
    border-radius: 20px 20px 20px 4px;
    background: var(--ai-message-bg);
    color: var(--ai-text-color-final);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

html.theme-paper .message, html.theme-frosted-glass .message { box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.message mark { background-color: var(--highlight-bg-final); color: var(--highlight-text-final); padding: 0.1em; border-radius: 3px; }
.message img, .message video { max-width: 100%; border-radius: 8px; }
.message img { max-height: 200px; margin-bottom: 8px; display: block; }
html.theme-carbon-fibre .user .message { color: var(--user-text-color-final); }
html.theme-frosted-glass .user .message { color: var(--user-text-color-final); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; }
.message-container.user .avatar { font-size: 1.8em; text-align: center; line-height: 36px; }
.message-container.ai .avatar, .message-container.assistant .avatar { border-radius: 8px; overflow: hidden; }
.message-container.ai .avatar img, .message-container.assistant .avatar img { width: 100%; height: 100%; object-fit: cover; }
.gemini-loader { display: flex; align-items: center; justify-content: center; height: 28px; gap: 6px; }
.gemini-loader div { width: 5px; height: 10px; background: var(--theme-primary); border-radius: 5px; animation: pulse 1.2s infinite ease-in-out; }
.gemini-loader div:nth-child(2) { animation-delay: 0.2s; }
.gemini-loader div:nth-child(3) { animation-delay: 0.4s; }
.gemini-loader div:nth-child(4) { animation-delay: 0.6s; }
@keyframes pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.5); } }
.follow-up-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 40px; }
.prompt-suggestion { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px 12px; cursor: pointer; transition: 0.2s; font-size: 0.9em; }

/* Mac Window Code Blocks */
.code-block-wrapper { 
    position: relative; 
    margin-top: 15px; 
    background: #0d0d0d;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    overflow: hidden; /* Ensures header stays inside rounded corners */
}

/* Fake "Terminal Header" */
.code-block-wrapper::before {
    content: "Code"; /* You can also leave this empty for just a bar */
    display: block;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    font-size: 0.75rem;
    font-family: sans-serif;
    color: #888;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.message pre { 
    background-color: transparent; /* Remove bg from pre, wrapper handles it */
    border: none;
    border-radius: 0; 
    padding: 20px; 
    margin: 0;
    overflow-x: auto; 
    color: #d4d4d4; 
}

/* Adjust copy button position to sit in the header */
.code-block-wrapper .copy-btn {
    top: 6px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    color: #fff; 
    border: none; 
    cursor: pointer; 
    opacity: 0.7; 
    transition: opacity 0.2s;
}

.message pre code { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; white-space: pre; }
html.light-mode .message pre, html.theme-paper .message pre, html.theme-frosted-glass .message pre { background-color: #f5f5f5; color: #333; border-color: #ddd;}
html.theme-stealth .message pre { background-color: #080808; border-color: var(--border-color); }
html.theme-carbon-fibre .message pre { background-color: #111; border-color: var(--border-color-carbon-fibre); }
html.theme-terminal .message pre { background-color: #111; border-color: var(--border-color-terminal); color: var(--text-color-terminal);}
html.light-mode .copy-btn, html.theme-paper .copy-btn, html.theme-frosted-glass .copy-btn { background-color: #ddd; color: #333;}
html.theme-stealth .copy-btn { background-color: #222; color: #777; }
html.theme-terminal .copy-btn { background-color: #222; color: var(--text-color-terminal);}
.code-block-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background-color: #555; }
html.light-mode .copy-btn:hover, html.theme-paper .copy-btn:hover, html.theme-frosted-glass .copy-btn:hover { background-color: #ccc;}

/* Input Area (Floating) */
#input-area {
    display: flex;
    flex-direction: column;
    /* Floating Effect */
    background: rgba(30, 30, 30, 0.65); /* Translucent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px 24px 0 0; /* Round top corners */
    margin: 0 12px; /* Pull away from edges */
    padding: 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); /* Lift with shadow */
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.input-wrapper { display: flex; width: 100%; max-width: 800px; margin: 0 auto; gap: 8px; align-items: flex-end; position: relative; }

#message-input {
    flex: 1;
    /* Round Pill Shape */
    border-radius: 24px; 
    padding: 14px 24px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    font-size: 1em;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none; 
    overflow-y: auto; 
    max-height: 150px; 
    line-height: 1.5; 
    white-space: pre-wrap; 
    word-wrap: break-word;
}

#message-input:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
}

html.light-mode #message-input, html.theme-paper #message-input, html.theme-frosted-glass #message-input { box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.action-button-group { display: flex; gap: 8px; flex-shrink: 0; }
/* Unified Premium Action Buttons */
.action-btn {
    border-radius: 16px;
    width: 50px; 
    height: 50px;
    font-size: 1.2rem;
    
    /* Transparent Glass Default */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.action-btn:hover:not(:disabled) {
    /* Glow matches the Theme Color */
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb), 0.3) !important;
    transform: translateY(-2px);
}

.action-btn i { transition: color 0.3s; }
.action-btn:hover i { color: #fff; }

/* Special Handling for SEND Button (Make it slightly more visible but still glass) */
#send-btn {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
    color: var(--theme-primary) !important;
}

#send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.8), var(--theme-primary)) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.5) !important;
}
.action-btn i { font-size: 1.1em; }
.action-btn:disabled { background-color: #555; cursor: not-allowed; transform: none; color: #aaa !important; }
#send-btn { background: var(--theme-primary); }
#send-btn:hover:not(:disabled) { background: var(--theme-hover); }
html.light-mode #send-btn, html.theme-paper #send-btn, html.theme-frosted-glass #send-btn { color: #111; }
html.light-accent-selected #send-btn { color: #111; }
html.theme-carbon-fibre #send-btn, html.theme-nord #send-btn, html.theme-terminal #send-btn { color: #111; }
#create-image-btn { background: #e67e22; }
#pause-resume-btn { background: #6c757d; }
.input-controls { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: 0.8em; width: 100%; max-width: 800px; margin: 0 auto; gap: 8px; }
.control-btn { background: none; border: 1px solid var(--border-color); border-radius: 4px; padding: 4px; cursor: pointer; color: #888; font-size: 1.2em; transition: all 0.2s; }

.control-btn { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 8px; 
    padding: 6px 10px; 
    cursor: pointer; 
    color: rgba(255, 255, 255, 0.6); 
    font-size: 1.1em; 
    transition: all 0.3s ease; 
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.control-btn.active { 
    border-color: var(--theme-primary); 
    color: #fff; 
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2), rgba(var(--theme-primary-rgb), 0.4));
    box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), 0.2);
}

.control-btn.active { border-color: var(--theme-primary); color: var(--theme-primary); background-color: rgba(74, 144, 226, 0.1); }

.control-btn.hidden { display: none; }
html.light-mode #file-name-display, html.theme-paper #file-name-display, html.theme-frosted-glass #file-name-display { color: #555; }
.input-controls .control-group { display: flex; align-items: center; gap: 15px; }
.input-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; user-select: none; }
#file-preview-container img { max-height: 50px; max-width: 100%; border-radius: 6px; border: 1px solid var(--border-color); display: block; margin-top: 5px; }
#file-preview-container pre { max-height: 60px; overflow: hidden; font-size: 0.8em; border: 1px solid var(--border-color); padding: 5px; border-radius: 4px; margin-top: 5px; white-space: pre-wrap; word-break: break-all; color: var(--text-color); background: var(--input-bg); }
.generic-file-preview { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); margin-top: 5px; color: var(--text-color); max-width: 300px; box-sizing: border-box; }
.generic-file-preview i { font-size: 2.5em; color: var(--theme-primary); flex-shrink: 0; }
.generic-file-preview .file-info { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.generic-file-preview .file-name { font-size: 0.9em; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generic-file-preview .file-size { font-size: 0.8em; color: #888; }
html.light-mode .generic-file-preview .file-size, html.theme-paper .generic-file-preview .file-size, html.theme-frosted-glass .generic-file-preview .file-size { color: #555; }
.tts-btn { background: none; border: none; color: #aaa; cursor: pointer; font-size: 1.1em; padding: 2px 8px; margin-left: 5px; transition: color 0.2s; }
.tts-btn:hover { color: var(--theme-primary); }
.tts-btn.speaking { color: #e67e22; }
#import-file-input, #chat-file-input { opacity: 0; width: 0; height: 0; position: absolute; z-index: -1; }

/* Settings Modal */
#settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity 0.3s ease; }
html.theme-frosted-glass #settings-overlay { background: rgba(0,0,0,0.3); }
#settings-overlay.hidden { opacity: 0; pointer-events: none; }
#theme-confirm-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #theme-confirm-overlay { background: rgba(0,0,0,0.3); }
#limit-reached-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #limit-reached-overlay { background: rgba(0,0,0,0.3); }
#limit-reached-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 20px 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 90%; max-width: 340px; text-align: center; }
#limit-reached-modal h3 { margin-top: 0; }
#limit-reached-buttons { margin-top: 20px; display: flex; justify-content: space-around; gap: 10px; }
#limit-reached-buttons .action-btn { width: 140px; }
#limit-confirm-yes { background: var(--theme-primary); }
#limit-confirm-yes:hover { background: var(--theme-hover); }
html.light-accent-selected #limit-confirm-yes, html.theme-carbon-fibre #limit-confirm-yes, html.theme-nord #limit-confirm-yes, html.theme-terminal #limit-confirm-yes { color: #111; }
#theme-confirm-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 20px 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 90%; max-width: 300px; text-align: center; }
#theme-confirm-modal h3 { margin-top: 0; }
#theme-confirm-buttons { margin-top: 20px; display: flex; justify-content: space-around; gap: 10px; }
#theme-confirm-buttons .action-btn { width: 100px; }
#theme-confirm-yes { background: var(--theme-primary); }
#theme-confirm-yes:hover { background: var(--theme-hover); }
html.light-accent-selected #theme-confirm-yes, html.theme-carbon-fibre #theme-confirm-yes, html.theme-nord #theme-confirm-yes, html.theme-terminal #theme-confirm-yes { color: #111; }
.settings-modal { background: var(--background-color-transparent, rgba(31, 31, 31, 0.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; border-radius: 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color-transparent, rgba(255, 255, 255, 0.2)); width: 90%; max-width: 400px; color: var(--text-color); }
.settings-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.settings-header h2 { margin: 0; font-size: 1.2em; }
#close-settings-btn, #close-profile-settings-btn { background: none; border: none; color: var(--text-color); font-size: 2em; cursor: pointer; line-height: 1; padding: 0 5px; }
.color-picker { display: flex; gap: 15px; margin-top: 10px; flex-wrap: wrap; }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--text-color); transition: transform 0.2s; }
html.light-mode .color-swatch, html.theme-paper .color-swatch, html.theme-frosted-glass .color-swatch { border-color: #555; }
.color-swatch:hover { transform: scale(1.1); }
.settings-modal .setting-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--border-color); margin-top: 15px; }
.settings-content > .setting-row:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.settings-modal .setting-row > select { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; margin-top: 5px; }
.font-size-controls button { padding: 5px 10px; margin-left: 5px; cursor: pointer; background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; margin-top: 5px; }
.font-size-controls button.active { background: var(--theme-primary); color: white; border-color: var(--theme-primary); }
html.light-accent-selected .font-size-controls button.active, html.theme-carbon-fibre .font-size-controls button.active, html.theme-nord .font-size-controls button.active, html.theme-terminal .font-size-controls button.active { color: #111; }

/* Profile Settings Modal */
#profile-settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity 0.3s ease; }
#profile-settings-overlay.hidden { opacity: 0; pointer-events: none; }
#profile-settings-modal { max-width: 480px; background: var(--background-color-transparent, rgba(31, 31, 31, 0.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color-transparent, rgba(255, 255, 255, 0.2)); }
.settings-section-header { font-size: 1.1em; font-weight: 600; margin-top: 25px; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--theme-primary); color: var(--text-color); }
.settings-content .settings-section-header:first-child { margin-top: 5px; }
html.light-mode .settings-section-header, html.theme-paper .settings-section-header { color: #111; }
#profile-settings-modal .settings-content { display: flex; flex-direction: column; gap: 0; }
#profile-settings-modal .setting-row { display: block; padding: 0; margin: 0; border-top: none; }
#profile-settings-modal .form-group { margin-bottom: 0; padding: 15px 0; border-bottom: 1px solid var(--border-color); text-align: left; display: flex; flex-direction: column; }
#profile-settings-modal .form-group:has(+ .settings-section-header) { border-bottom: none; padding-bottom: 0; }
#profile-settings-modal .settings-content > .form-group:last-of-type { border-bottom: none; padding-bottom: 0; }
#profile-settings-modal .form-group label { font-size: 0.9em; font-weight: 500; opacity: 0.9; margin-bottom: 10px; display: block; }
#profile-settings-modal .form-group input { width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 1em; box-sizing: border-box; margin-bottom: 10px; }
#profile-settings-modal .form-group input:last-child { margin-bottom: 0; }
.input-with-button-group input { margin-bottom: 0 !important; }
.profile-avatar-group .profile-avatar-controls { display: flex; align-items: center; gap: 15px; }
#profile-avatar-preview { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #555; border: 2px solid var(--theme-primary); flex-shrink: 0; }
.profile-avatar-group .sidebar-btn { width: auto; flex-grow: 0; padding: 8px 12px; font-size: 0.9em; }
.security-row { flex-direction: row !important; justify-content: space-between; align-items: center; }
.security-row label { display: none !important; }
.security-row .profile-static-info { flex-grow: 1; padding: 0; margin: 0; display: flex; align-items: center; min-width: 0; }
.security-row .profile-static-info span { font-size: 1em; opacity: 1; font-weight: 500; color: var(--text-color); }
.profile-link-btn { background: none !important; border: none !important; color: var(--theme-primary) !important; box-shadow: none !important; padding: 0 !important; font-size: 0.9em; font-weight: bold; cursor: pointer; flex-shrink: 0; transition: color 0.2s; }
.profile-link-btn:hover { color: var(--theme-hover) !important; transform: none !important; }
.security-row .profile-link-btn { margin-left: 10px; flex-shrink: 0; }
#email-change-form .button-group, #password-change-form .button-group { display: flex; gap: 10px; margin-top: 5px; }
.profile-secondary-btn { background: #6c757d !important; border-color: #6c757d !important; box-shadow: none !important; }
.profile-secondary-btn:hover { background: #5a6268 !important; }
.subscription-group { flex-direction: row !important; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.subscription-group label { display: none !important; }
#subscription-status-section { display: flex; align-items: center; flex-grow: 1; min-width: 0; flex-wrap: nowrap; }
#subscription-status-text { font-weight: normal; opacity: 1; }
#subscription-status-text.premium { background: #c69400; color: #111; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; font-weight: bold; margin-right: 15px; flex-shrink: 0; }
.subscription-group .sidebar-btn { background: var(--input-bg); border: 1px solid var(--border-color); box-shadow: none; padding: 8px 15px; font-size: 0.9em; }
.subscription-group .sidebar-btn:hover { background: var(--ai-message-bg); box-shadow: none; transform: none; }
#cancel-sub-confirm { width: 100%; margin-top: 10px; display: none; }
#cancel-sub-confirm p { color: var(--text-color); }
#cancel-sub-confirm .button-group { display: flex; gap: 10px; }

/* Wallpapers */
#live-wallpaper-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; overflow: hidden; }
#wallpaper-fallback { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: var(--wallpaper-fallback-bg, var(--background-color-default)); transition: background 0.3s; }
.wallpaper-option { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; overflow: hidden; }
.wallpaper-option:not(.hidden) { opacity: 1; pointer-events: auto; }
.blocks-sm, .blocks-md, .blocks-lg, .ask-ai-sm, .ask-ai-md, .ask-ai-lg { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background-repeat: no-repeat; opacity: 0.3; animation: animStar 50s linear infinite; }
html.theme-stealth .blocks-sm, html.theme-stealth .blocks-md, html.theme-stealth .blocks-lg, html.theme-stealth .ask-ai-sm, html.theme-stealth .ask-ai-md, html.theme-stealth .ask-ai-lg, html.theme-carbon-fibre .blocks-sm, html.theme-carbon-fibre .blocks-md, html.theme-carbon-fibre .blocks-lg, html.theme-carbon-fibre .ask-ai-sm, html.theme-carbon-fibre .ask-ai-md, html.theme-carbon-fibre .ask-ai-lg { opacity: 0.1; }
#ambient-gradient-wallpaper { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; z-index: -2; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.rain-drop { position: absolute; bottom: 100%; width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.25)); animation: rain-fall 1s linear infinite; }
html.light-mode .rain-drop, html.theme-frosted-glass .rain-drop { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
html.theme-stealth .rain-drop, html.theme-carbon-fibre .rain-drop { background: linear-gradient(to bottom, rgba(100,100,100,0), rgba(100,100,100,0.15)); }
@keyframes rain-fall { 0% { transform: translateY(0); } 100% { transform: translateY(110vh); } }
#rain-wallpaper .rain-drop:nth-child(1) { left: 10%; animation-delay: 0.5s; animation-duration: 0.8s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(2) { left: 20%; animation-delay: 0.2s; animation-duration: 1.1s; height: 60px; }
#rain-wallpaper .rain-drop:nth-child(3) { left: 30%; animation-delay: 0.8s; animation-duration: 0.7s; height: 30px; }
#rain-wallpaper .rain-drop:nth-child(4) { left: 40%; animation-delay: 0.1s; animation-duration: 1.3s; height: 55px; }
#rain-wallpaper .rain-drop:nth-child(5) { left: 50%; animation-delay: 0.6s; animation-duration: 0.9s; height: 45px; }
#rain-wallpaper .rain-drop:nth-child(6) { left: 60%; animation-delay: 0.3s; animation-duration: 1.2s; height: 50px; }
#rain-wallpaper .rain-drop:nth-child(7) { left: 70%; animation-delay: 0.9s; animation-duration: 0.6s; height: 35px; }
#rain-wallpaper .rain-drop:nth-child(8) { left: 80%; animation-delay: 0.4s; animation-duration: 1.0s; height: 65px; }
#rain-wallpaper .rain-drop:nth-child(9) { left: 90%; animation-delay: 0.7s; animation-duration: 0.8s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(10){ left: 25%; animation-delay: 1.1s; animation-duration: 0.9s; height: 50px; }
#rain-wallpaper .rain-drop:nth-child(11){ left: 55%; animation-delay: 1.3s; animation-duration: 1.1s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(12){ left: 85%; animation-delay: 1.0s; animation-duration: 0.7s; height: 60px; }
#particle-canvas { width: 100%; height: 100%; display: block; }
#matrix-canvas { display: block; width: 100%; height: 100%; background-color: #0d0d0d; }
html.light-mode #matrix-canvas, html.theme-paper #matrix-canvas, html.theme-frosted-glass #matrix-canvas { background-color: #f0f0f0; }
html.theme-stealth #matrix-canvas, html.theme-carbon-fibre #matrix-canvas { background-color: #000; }
html.light-mode .blocks-sm, html.light-mode .blocks-md, html.light-mode .blocks-lg, html.theme-frosted-glass .blocks-sm, html.theme-frosted-glass .blocks-md, html.theme-frosted-glass .blocks-lg { background-image: url('https://beeimg.com/images/p77662494522.jpg'), url('https://beeimg.com/images/p77662494522.jpg'), url('https://beeimg.com/images/p77662494522.jpg'); }
.blocks-sm, .blocks-md, .blocks-lg { background-image: url('https://beeimg.com/images/d64744471554.jpg'), url('https://beeimg.com/images/d64744471554.jpg'), url('https://beeimg.com/images/d64744471554.jpg'); }
.blocks-sm { background-size: 100px, 80px, 120px; background-position: 10% 80%, 50% 10%, 80% 90%; animation-duration: 150s; }
.blocks-md { background-size: 180px, 150px; background-position: 25% 40%, 70% 5%; animation-duration: 100s; }
.blocks-lg { background-size: 250px; background-position: 45% 70%; animation-duration: 50s; }
html.light-mode .ask-ai-sm, html.light-mode .ask-ai-md, html.light-mode .ask-ai-lg, html.theme-frosted-glass .ask-ai-sm, html.theme-frosted-glass .ask-ai-md, html.theme-frosted-glass .ask-ai-lg { background-image: url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'); }
.ask-ai-sm, .ask-ai-md, .ask-ai-lg { background-image: url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'); }
.ask-ai-sm { background-size: 40px, 30px, 45px, 25px, 50px, 35px; background-position: 10% 80%, 30% 10%, 50% 50%, 75% 20%, 90% 95%, 5% 30%; animation-duration: 150s; }
.ask-ai-md { background-size: 80px, 60px, 75px, 90px; background-position: 5% 90%, 25% 40%, 60% 5%, 80% 60%; animation-duration: 100s; }
.ask-ai-lg { background-size: 120px, 150px, 100px; background-position: 15% 5%, 45% 80%, 70% 30%; animation-duration: 50s; }
@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-50%); } }
#circuit-wallpaper { background-color: #001a00; }
.circuit-bg-1, .circuit-bg-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://beeimg.com/images/t47916958852.jpg'); background-repeat: repeat; background-size: 300px 300px; opacity: 0.3; }
.circuit-bg-1 { animation: moveCircuit 30s linear infinite; }
.circuit-bg-2 { opacity: 0.2; animation: moveCircuitReverse 60s linear infinite; }
@keyframes moveCircuit { from { background-position: 0 0; } to { background-position: 512px 512px; } }
@keyframes moveCircuitReverse { from { background-position: 0 0; } to { background-position: -512px 512px; } }
html.light-mode #circuit-wallpaper, html.theme-paper #circuit-wallpaper, html.theme-frosted-glass #circuit-wallpaper { background-color: #e6f5e6; }
html.light-mode .circuit-bg-1, html.light-mode .circuit-bg-2, html.theme-paper .circuit-bg-1, html.theme-paper .circuit-bg-2, html.theme-frosted-glass .circuit-bg-1, html.theme-frosted-glass .circuit-bg-2 { filter: invert(1); opacity: 0.15; }
html.light-mode .circuit-bg-2, html.theme-paper .circuit-bg-2, html.theme-frosted-glass .circuit-bg-2 { opacity: 0.1; }
#stars-canvas, #waves-canvas { width: 100%; height: 100%; display: block; }
#polygons-canvas, #data-stream-canvas { width: 100%; height: 100%; display: block; }
#fireflies-wallpaper { overflow: hidden; }
.firefly { position: absolute; width: 4px; height: 4px; background: #ffff99; border-radius: 50%; box-shadow: 0 0 8px 2px #ffff99; opacity: 0; animation: firefly-move linear infinite, firefly-blink ease-in-out infinite alternate; pointer-events: none; }
@keyframes firefly-move { 0% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } }
@keyframes firefly-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
#data-stream-canvas { width: 100%; height: 100%; display: block; }
#network-nodes-canvas { width: 100%; height: 100%; display: block; }
#hud-wallpaper { overflow: hidden; border: 1px solid rgba(0, 255, 0, 0.2); box-sizing: border-box;}
.hud-scanline { position: absolute; left: 0; width: 100%; height: 2px; background: rgba(0, 255, 0, 0.3); box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); animation: hud-scan 5s linear infinite; }
.hud-corner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(0, 255, 0, 0.5); }
.hud-corner.top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corner.top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-corner.bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; }
@keyframes hud-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
html:not(.theme-terminal) #hud-wallpaper { border-color: rgba(74, 144, 226, 0.2); }
html:not(.theme-terminal) .hud-scanline { background: rgba(74, 144, 226, 0.3); box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); }
html:not(.theme-terminal) .hud-corner { border-color: rgba(74, 144, 226, 0.5); }
html.light-mode #hud-wallpaper { border-color: rgba(0, 0, 0, 0.2); }
html.light-mode .hud-scanline { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
html.light-mode .hud-corner { border-color: rgba(0, 0, 0, 0.5); }
#subtle-noise-canvas { width: 100%; height: 100%; display: block; }
#gentle-pulse-wallpaper { animation: gentle-pulse-anim 8s ease-in-out infinite alternate; }
@keyframes gentle-pulse-anim { from { background-color: var(--background-color); } to { background-color: var(--ai-message-bg); } }

.wallpaper-option video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Model Selector */
.model-selector-container { position: relative; display: inline-block; z-index: 100; }

#model-toggle-button { 
    background: var(--input-bg); 
    color: var(--text-color); 
    border: 1px solid var(--theme-primary); 
    padding: 6px 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    min-width: 0; 
    justify-content: flex-start; 
    gap: 8px; 
}
#model-toggle-button:hover { background: var(--ai-message-bg); }
#selected-model-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }

/* Dropdown Container */
#model-popover {
    position: absolute; top: calc(100% + 5px); left: 0;
    width: 600px !important; /* Mega Menu Width */
    max-width: 90vw !important;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    z-index: 1001;
    opacity: 1; 
    transform: translateY(0); 
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
#model-popover[hidden] { opacity: 0; transform: translateY(-5px); pointer-events: none; }

/* Grid Layout */
.popover-content { padding: 20px; }
.model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Headers */
.column-header {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Model List Items (The Cards) - TRANSPARENT UPGRADE */
.model-list { list-style: none; padding: 0; margin: 0; }
.model-list li {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 12px; /* Softer corners */
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    
    /* Transparent Glass Style */
    background-color: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8); 
    box-shadow: none;
    opacity: 1 !important;
}
.model-list li:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}
    
    /* Card Style (Fixes Dark Mode Visibility) */
    background-color: var(--input-bg); 
    border: 1px solid var(--border-color);
    color: var(--text-color); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 1 !important;
}
.model-list li:hover {
    background-color: var(--ai-message-bg);
    border-color: #888;
    transform: translateY(-1px);
}
.model-list li.active {
    background: var(--theme-primary) !important;
    color: #fff !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Persona Footer */
.persona-footer {
    background: rgba(0,0,0,0.2);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-label { font-size: 0.65rem; color: #666; font-weight: bold; letter-spacing: 1px; }
.persona-pills { display: flex; gap: 8px; width: 100%; justify-content: center; }

.persona-pill {
    /* Transparent Glass Style */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    list-style: none;
}
.persona-pill:hover { 
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.persona-pill.active {
    background: #eee;
    color: #111;
    font-weight: bold;
}

/* --- LIGHT MODE COLOUR FIX (Revised) --- */
html.light-mode #model-popover {
    background-color: #f5f5f7 !important; /* Light Grey Menu BG */
    border-color: #d1d1d1 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

/* 1. Force Card Text Color to Black in Light Mode */
html.light-mode .model-list li {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #1c1c1c !important; /* CRITICAL: Forces text black */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 2. Force Icons/Spans inside cards to be Black too */
html.light-mode .model-list li span,
html.light-mode .model-list li i {
    color: #1c1c1c !important;
}

/* 3. Hover State */
html.light-mode .model-list li:hover {
    background-color: #eeeeee !important;
    border-color: #bbb !important;
}

/* 4. ACTIVE SELECTED ITEM (Blue Background, White Text) */
html.light-mode .model-list li.active {
    background-color: #2563eb !important; /* Blue */
    border-color: #2563eb !important;
    color: #ffffff !important; /* White Text */
}
/* Ensure text inside the active button stays white */
html.light-mode .model-list li.active span,
html.light-mode .model-list li.active i {
    color: #ffffff !important;
}

/* 5. Headers */
html.light-mode .column-header { 
    color: #555 !important; 
    text-shadow: none !important;
}

/* 6. Footer Area */
html.light-mode .persona-footer { 
    background-color: #e5e5e5 !important; 
    border-top: 1px solid #ccc !important; 
}
html.light-mode .persona-pill { 
    background-color: #ffffff !important; 
    color: #333 !important; 
    border: 1px solid #ccc !important;
}
html.light-mode .persona-pill.active { 
    background-color: #333 !important; 
    color: #fff !important; 
    border-color: #333 !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    #model-popover { width: 300px !important; }
    .model-grid { grid-template-columns: 1fr; gap: 10px; }
    .persona-pills { flex-wrap: wrap; }
}
html.theme-frosted-glass .popover-label { color: #333; }
.model-list, .persona-list { list-style: none; padding: 0; margin: 0; }
.model-list li, .persona-list li { padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }
.model-list li:hover, .persona-list li:hover { background: var(--input-bg); }
.model-list li.active, .persona-list li.active { background: var(--theme-primary); color: white; font-weight: 500; }
html.light-accent-selected .model-list li.active, html.light-accent-selected .persona-list li.active, html.theme-carbon-fibre .model-list li.active, html.theme-carbon-fibre .persona-list li.active, html.theme-nord .model-list li.active, html.theme-nord .persona-list li.active, html.theme-terminal .model-list li.active, html.theme-terminal .persona-list li.active { color: #111; }
html.theme-stealth .model-list li.active, html.theme-stealth .persona-list li.active { color: #ddd; }

/* Transparent Message Box */
@supports (backdrop-filter: blur(5px)) { body.transparent-mode .message { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } }
body.transparent-mode .message { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
body.transparent-mode .ai .message, body.transparent-mode .assistant .message { background: rgba(255, 255, 255, 0.3); }
body.transparent-mode.light-mode .ai .message, body.transparent-mode.light-mode .assistant .message, body.transparent-mode.theme-paper .ai .message, body.transparent-mode.theme-paper .assistant .message, body.transparent-mode.theme-frosted-glass .ai .message, body.transparent-mode.theme-frosted-glass .assistant .message { color: #111; }
body.transparent-mode .user .message { background: rgba(74, 144, 226, 0.5); color: #fff; }
body.transparent-mode.light-accent-selected .user .message, body.transparent-mode.theme-carbon-fibre .user .message, body.transparent-mode.theme-nord .user .message, body.transparent-mode.theme-terminal .user .message, body.transparent-mode.light-mode .user .message, body.transparent-mode.theme-paper .user .message, body.transparent-mode.theme-frosted-glass .user .message { color: #111; }
body.transparent-mode.theme-frosted-glass .ai .message, body.transparent-mode.theme-frosted-glass .assistant .message { background: rgba(255, 255, 255, 0.7); border-color: rgba(0,0,0,0.1); }
body.transparent-mode.theme-frosted-glass .user .message { background: rgba(0, 122, 255, 0.6); border-color: transparent; color: #fff; }
body.transparent-mode.theme-stealth .ai .message, body.transparent-mode.theme-stealth .assistant .message { background: rgba(50, 50, 50, 0.4); border-color: rgba(255, 255, 255, 0.1); }
body.transparent-mode.theme-stealth .user .message { background: rgba(70, 70, 70, 0.5); color: #ccc; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 40%; }

/* Toast Notification */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; }
.toast { background: #333; color: #fff; padding: 15px 20px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateX(100%); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); min-width: 250px; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast.fade-out { opacity: 0; transform: translateX(100%); }
.toast-message { margin-right: 15px; }
.toast.toast--success { background: #28a745; color: white; }
.toast.toast--error { background: #dc3545; color: white; }
.toast.toast--info { background: #17a2b8; color: white; }
.toast-close-btn { background: none; border: none; color: inherit; font-size: 24px; font-weight: bold; line-height: 1; opacity: 0.7; cursor: pointer; padding: 0 5px; }
.toast-close-btn:hover { opacity: 1; }

/* Settings Tabs */
.settings-tabs { display: flex; border-bottom: 1px solid var(--border-color); background-color: var(--background-color-secondary); padding: 0 24px; gap: 16px; flex-shrink: 0; }
.tab-btn { padding: 12px 16px; font-size: 1em; font-weight: 500; color: var(--text-color-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s ease-in-out; }
.tab-btn:hover { color: var(--text-color); }
.tab-btn.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary); }
#universal-settings-modal .settings-content-container { max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D32F2F #2a2a2e; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar { width: 12px; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-track { background: #2a2a2e; border-radius: 6px; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-thumb { background-color: #D32F2F; border-radius: 6px; border: 2px solid #2a2a2e; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-thumb:hover { background-color: #E53935; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel .settings-content { padding: 16px 24px 24px 24px; }
.input-wrapper { display: flex; align-items: flex-end; width: 100%; gap: 10px; position: relative; }
.delete-account-group p { color: var(--text-color); opacity: 0.8; line-height: 1.5; }
.sidebar-btn.delete-btn, .action-btn.delete-btn { background-color: #a04040 !important; border-color: #a04040 !important; box-shadow: none !important; color: #fff !important; }
.sidebar-btn.delete-btn:hover, .action-btn.delete-btn:hover { background-color: #dc3545 !important; transform: translateY(-2px); }
#delete-error-message { color: #ffc0cb; background: rgba(255, 0, 0, 0.2); border: 1px solid #dc3545; padding: 10px; border-radius: 6px; margin-bottom: 15px; }

/* Cookie Consent */
#cookie-consent-banner { position: fixed; bottom: -150px; left: 0; right: 0; width: 100%; z-index: 10001; padding: 0; box-sizing: border-box; transition: bottom 0.5s ease-in-out; }
#cookie-consent-banner:not(.cookie-banner-hidden) { bottom: 0; }
.cookie-content { max-width: 800px; margin: 0 auto; background: var(--sidebar-bg); color: var(--text-color); padding: 15px 20px; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); padding-bottom: calc(15px + env(safe-area-inset-bottom)); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.cookie-content p { margin: 0; flex-grow: 1; font-size: 0.9em; line-height: 1.5; min-width: 250px; }
.cookie-content a { color: var(--theme-primary); text-decoration: underline; font-weight: 500; }
.cookie-content #cookie-accept-btn { flex-shrink: 0; margin: 0; background: var(--theme-primary); color: #fff; }
html.light-accent-selected .cookie-content #cookie-accept-btn, html.theme-carbon-fibre .cookie-content #cookie-accept-btn, html.theme-nord .cookie-content #cookie-accept-btn, html.theme-terminal .cookie-content #cookie-accept-btn, html.light-mode .cookie-content #cookie-accept-btn, html.theme-paper .cookie-content #cookie-accept-btn, html.theme-frosted-glass .cookie-content #cookie-accept-btn { color: #111; }
.temporary-chat-mode #sidebar-greeting { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.temporary-chat-mode #sidebar-greeting::after { content: "Temporary"; font-size: 0.7em; font-weight: 600; color: #ffc107; background-color: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 4px; padding: 2px 6px; line-height: 1; margin: 0; }
.sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sidebar-btn-group .sidebar-btn, .sidebar-btn-group label.sidebar-btn { width: 100%; margin: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; }
.sidebar-btn-group .sidebar-btn i, .sidebar-btn-group label.sidebar-btn i { margin: 0; font-size: 1em; }
pre[class*="language-"] { background: none; color: inherit; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 8px; }
pre[class*="language-"] > code[class*="language-"] { font-family: 'Fira Code', monospace; font-size: 0.9em; color: inherit; background: none; padding: 0; margin: 0; }
.code-block-wrapper { position: relative; }
.code-block-wrapper .copy-btn { position: absolute; top: 8px; right: 8px; z-index: 10; padding: 5px 10px; font-size: 0.8em; background-color: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; }
.code-block-wrapper:hover .copy-btn { opacity: 1; }
.light-mode .code-block-wrapper .copy-btn { background-color: rgba(0, 0, 0, 0.1); color: #333; border-color: rgba(0, 0, 0, 0.2); }
.control-btn-style-as-label { display: flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; user-select: none; background: none; border: none; color: var(--text-color); padding: 0; opacity: 0.8; transition: opacity 0.2s; }
.control-btn-style-as-label:hover { opacity: 1; }
.control-btn-style-as-label i { font-size: 1.1em; }
.file-error-message { color: #ff5c5c; background: rgba(255, 92, 92, 0.1); border: 1px solid #ff5c5c; padding: 10px; border-radius: 6px; font-size: 0.9em; font-weight: 500; width: 100%; max-width: 800px; margin: 0 auto 5px auto; box-sizing: border-box; display: none; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 10px 16px; font-size: 1em; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; background-color: #ffffff; color: #333; border: 1px solid #DADCE0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.social-btn:hover { background-color: #F8F9FA; border-color: #C6C6C6; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.social-btn img { width: 20px; height: 20px; }
.divider { display: flex; align-items: center; text-align: center; color: #888; margin: 20px 0; font-size: 0.9em; text-transform: uppercase; }
html.light-mode .divider { color: #555; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.divider span { padding: 0 10px; }
#chat-limit-counter { width: 100%; max-width: 800px; margin: 0 auto 5px auto; padding: 0 10px; box-sizing: border-box; text-align: center; font-size: 0.8em; color: #888; }
html.light-mode #chat-limit-counter, html.theme-paper #chat-limit-counter, html.theme-frosted-glass #chat-limit-counter { color: #555; }
#theme-confirm-yes { background-color: var(--theme-primary); color: #FFFFFF; border: 2px solid var(--theme-primary); font-weight: bold; transition: all 0.2s ease; }
#theme-confirm-yes:hover { background-color: var(--theme-hover); border-color: var(--theme-hover); box-shadow: 0 0 10px var(--theme-primary); transform: translateY(-1px); }
#theme-confirm-no { background-color: #6c757d !important; border: 2px solid #6c757d !important; color: #FFFFFF; transition: all 0.2s ease; }
#theme-confirm-no:hover { background-color: #5a6268 !important; border-color: #5a6268 !important; }
#theme-confirm-yes.high-contrast-apply { background-color: #1c1c1c; color: #FFFFFF !important; border-color: #1c1c1c; }
#theme-confirm-yes.high-contrast-apply:hover { background-color: #333; border-color: #333; color: #FFFFFF !important; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
body { font-family: 'Inter', sans-serif; }
.message { font-family: var(--chat-font-family, 'Inter', sans-serif); }
body.font-style-serif .message { --chat-font-family: 'Merriweather', serif; }
body.font-style-mono .message { --chat-font-family: 'Fira Code', monospace; }
.message pre, .message code { font-family: 'Fira Code', monospace !important; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal { background-color: #ffffff; color: #1c1c1c; border: 1px solid #e0e0e0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-header, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-content h3, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-section-header, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .form-group[style*="border-bottom"] { color: #1c1c1c; border-bottom-color: #eeeeee; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .setting-row span, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .form-group label, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-static-info span, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal p { color: #333333; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-tabs { border-bottom-color: #eeeeee; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .tab-btn { color: #555555; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .tab-btn.active { color: #007AFF; border-bottom-color: #007AFF; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal select, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="text"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="password"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="email"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal textarea { background-color: #f4f4f4; color: #1c1c1c; border: 1px solid #cccccc; border-radius: 4px; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .sidebar-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .action-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-link-btn { background-color: #f0f0f0; color: #1c1c1c; border: 1px solid #cccccc; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .sidebar-btn:hover, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .action-btn:hover, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-link-btn:hover { background-color: #e5e5e5; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .delete-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #show-delete-confirm-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #confirm-delete-account-btn { background-color: #dc3545; color: #ffffff; border-color: #dc3545; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #set-default-visuals-btn { background-color: #333; color: #fff; border-color: #333; }
#memory-shortcut-btn { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: #ccc; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; user-select: none; border-radius: 6px; padding: 4px 6px; background: none; border: none; }
#memory-shortcut-btn:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.05); }
.memory-status-light { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background-color: #6b7280; transition: all 0.3s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
#memory-shortcut-btn.memory-on .memory-status-light { background-color: #39FF14; border-color: #39FF14; box-shadow: 0 0 8px #39FF14; }
.action-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 100px; flex-shrink: 0; }
.action-button-grid .action-btn { padding: 12px; display: flex; justify-content: center; align-items: center; gap: 0; font-weight: 700; }
.message .download-link-button { display: inline-block; padding: 10px 15px; margin-top: 10px; margin-bottom: 10px; background: var(--theme-primary); color: var(--user-text-color-final, #fff); text-decoration: none; border-radius: 6px; font-weight: bold; transition: background 0.2s, transform 0.2s; cursor: pointer; }
.message .download-link-button:hover { background: var(--theme-hover); transform: translateY(-1px); }
html.light-accent-selected .message .download-link-button, html.theme-carbon-fibre .message .download-link-button, html.theme-nord .message .download-link-button, html.theme-terminal .message .download-link-button, html.light-mode .message .download-link-button, html.theme-paper .message .download-link-button, html.theme-frosted-glass .message .download-link-button { color: #111; }
#universal-settings-modal, #profile-settings-modal { width: 95%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--settings-modal-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.settings-header { padding: 20px 25px; margin: 0; background: rgba(0,0,0,0.1); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.settings-content-container { padding: 0; flex-grow: 1; overflow-y: auto; }
.settings-content { padding: 25px; display: flex; flex-direction: column; gap: 2px; }
.settings-section-header { font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--theme-primary); margin-top: 30px; margin-bottom: 15px; opacity: 0.9; }
.settings-section-header:first-child { margin-top: 0; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95em; color: var(--text-color); opacity: 0.9; }
.form-group p.description { font-size: 0.85em; opacity: 0.7; margin-top: -5px; margin-bottom: 10px; line-height: 1.4; }
.settings-modal input[type="text"], .settings-modal input[type="email"], .settings-modal input[type="password"], .settings-modal textarea, .settings-modal select { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--input-bg); color: var(--text-color); font-size: 1em; font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s; box-sizing: border-box; }
.settings-modal input:focus, .settings-modal textarea:focus, .settings-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2); }
.settings-modal textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.settings-modal .sidebar-btn, .settings-modal .action-btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95em; border: none; cursor: pointer; transition: all 0.2s ease; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.settings-modal button.primary-action { background-color: var(--theme-primary); color: #fff !important; }
.settings-modal button.primary-action:hover { filter: brightness(1.1); transform: translateY(-1px); }
.settings-modal button.secondary-action { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-color); }
.settings-modal button.secondary-action:hover { background-color: var(--input-bg); border-color: var(--text-color); }
.settings-modal button.destructive-action { background-color: rgba(220, 53, 69, 0.1); color: #dc3545 !important; border: 1px solid #dc3545; }
.settings-modal button.destructive-action:hover { background-color: #dc3545; color: #fff !important; }
.profile-avatar-group .profile-avatar-controls { display: flex; align-items: center; gap: 20px; background: var(--input-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
#profile-avatar-preview { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--theme-primary); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.input-with-button-group { display: flex; gap: 10px; }
.input-with-button-group input { flex-grow: 1; }
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: var(--input-bg); border-radius: 8px; border: 1px solid var(--border-color); }
.security-row label { margin: 0; font-weight: normal; }
.profile-static-info { font-weight: bold; flex-grow: 1; text-align: right; margin-right: 20px; opacity: 0.8; }
.profile-link-btn { background: none; border: none; color: var(--theme-primary); font-weight: 600; cursor: pointer; padding: 5px 10px; }
.profile-link-btn:hover { text-decoration: underline; }
#email-change-form, #password-change-form, #delete-account-confirm-form { background: var(--background-color); padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid var(--border-color); animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal { background: rgba(255, 255, 255, 0.85) !important; border-color: #e0e0e0 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(h2, h3, label, p, span, div, select) { color: #1c1c1c !important; }
.settings-modal, .settings-modal h2, .settings-modal h3, .settings-modal h4, .settings-modal p, .settings-modal label, .settings-modal span, .settings-modal div { color: #ffffff; }
.settings-modal input[type="text"], .settings-modal input[type="email"], .settings-modal input[type="password"], .settings-modal textarea, .settings-modal select { background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }
.settings-modal .secondary-action { color: #e0e0e0; border-color: #555; }
html.theme-terminal .settings-modal :is(h2, h3, h4, p, label, span, div, select, input, textarea) { color: var(--theme-primary-terminal) !important; }
html.theme-synthwave .settings-modal :is(h2, h3, h4, p, label, span, div, select, input, textarea) { color: #E0B0FF !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #d1d1d1 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(h1, h2, h3, h4, p, label, span, div, strong, li) { color: #000000 !important; text-shadow: none !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(input, textarea, select) { background-color: #ffffff !important; color: #000000 !important; border: 1px solid #999 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(input, textarea, select):focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.1) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .secondary-action { background-color: #f0f0f0 !important; color: #000000 !important; border: 1px solid #ccc !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .secondary-action:hover { background-color: #e0e0e0 !important; border-color: #999 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-tabs { border-bottom-color: #ccc !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn { color: #666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn.active { color: #000 !important; font-weight: 700 !important; border-bottom-color: var(--theme-primary) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .primary-action, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .destructive-action { color: #ffffff !important; }
.watermark { grid-row: 3; grid-column: 1; align-self: end; justify-self: end; margin-bottom: 10px; margin-right: 20px; z-index: 5; pointer-events: none; font-family: var(--font-main); color: var(--text-color); font-size: 0.85em; opacity: 0.4; font-weight: bold; padding: 5px; transition: color 0.3s, opacity 0.3s; }
.watermark:hover { opacity: 0.8; color: var(--theme-primary); }
.setting-section { padding: 15px 0; display: flex; flex-direction: column; gap: 10px; }
.divider { border: 0; border-top: 1px solid var(--border-color); margin: 5px 0; }
.section-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.section-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; margin-top: -5px; }
.avatar-section { align-items: center; text-align: center; }
.avatar-wrapper img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-input); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.avatar-controls { margin-top: 15px; display: flex; gap: 15px; justify-content: center; }
.input-row { display: flex; gap: 10px; }
input, textarea { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; outline: none; font-family: inherit; }
input:focus, textarea:focus { border-color: var(--primary-color); }
.textarea-group { margin-bottom: 15px; }
.textarea-group label { display: block; font-size: 0.85rem; margin-bottom: 5px; color: var(--text-muted); }
.info-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-input); padding: 12px 15px; border-radius: 8px; }
.info-text { display: flex; flex-direction: column; }
.info-text .label { font-size: 0.75rem; color: var(--text-muted); }
.info-text .value { font-size: 1rem; color: #fff; }
.btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: var(--primary-color); color: white; }
.btn-secondary { background: #4b5563; color: white; }
.btn-outline { background: transparent; border: 1px solid #555; color: white; }
.btn-text { background: transparent; color: var(--text-muted); }
.btn-text:hover { color: white; }
.btn-danger { background: var(--danger-color); color: white; }
.btn-danger-outline { background: transparent; border: 1px solid var(--danger-color); color: var(--danger-color); width: 100%; padding: 10px; }
.btn-premium { background: linear-gradient(135deg, #6366f1, #a855f7); color: white; border: none;}
.text-red { color: var(--danger-color) !important; }
.full-width { width: 100%; }
.hidden-form { display: none; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; margin-top: 10px; animation: slideDown 0.3s ease; border: 1px solid var(--border-color); }
.hidden-form input { margin-bottom: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.error-text { color: var(--danger-color); font-size: 0.85rem; margin-top: 10px; text-align: center; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.setting-section { padding: 15px 0; display: flex; flex-direction: column; gap: 12px; }
.divider { border: 0; border-top: 1px solid #3f3f3f; margin: 10px 0; }
.section-label { font-size: 0.85rem; font-weight: 700; color: #a1a1a1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.section-desc { font-size: 0.9rem; color: #cccccc; margin-bottom: 10px; margin-top: -5px; }
.avatar-section { align-items: center; text-align: center; background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 12px; }
.avatar-wrapper img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #2d2d2d; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.avatar-controls { margin-top: 15px; display: flex; gap: 15px; justify-content: center; }
.input-row { display: flex; gap: 10px; }
#tab-panel-profile input, #tab-panel-profile textarea { width: 100%; background-color: #222222 !important; border: 1px solid #444444 !important; color: #ffffff !important; padding: 12px 15px; border-radius: 8px; font-size: 1rem; outline: none; font-family: inherit; }
#tab-panel-profile input:focus, #tab-panel-profile textarea:focus { border-color: #3b82f6 !important; background-color: #1a1a1a !important; }
#tab-panel-profile input::placeholder, #tab-panel-profile textarea::placeholder { color: #777777 !important; opacity: 1; }
.textarea-group { margin-bottom: 15px; }
.textarea-group label { display: block; font-size: 0.9rem; margin-bottom: 8px; color: #cccccc; }
.info-row { display: flex; justify-content: space-between; align-items: center; background: #2a2a2a; padding: 15px; border-radius: 8px; border: 1px solid #3a3a3a; }
.info-text { display: flex; flex-direction: column; }
.info-text .label { font-size: 0.75rem; color: #888; margin-bottom: 4px; }
.info-text .value { font-size: 1.1rem; color: #ffffff; font-weight: 500; }
.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: white; }
.btn-secondary { background: #4b5563; color: white; }
.btn-outline { background: transparent; border: 1px solid #666; color: white; }
.btn-outline:hover { border-color: white; }
.btn-text { background: transparent; color: #999; padding: 8px 12px;}
.btn-text:hover { color: white; background: rgba(255,255,255,0.1); }
.btn-danger { background: #ef4444; color: white; }
.btn-danger-outline { background: transparent; border: 1px solid #ef4444; color: #ef4444; width: 100%; padding: 12px; }
.btn-danger-outline:hover { background: rgba(239, 68, 68, 0.1); }
.btn-premium { background: linear-gradient(135deg, #6366f1, #a855f7); color: white; border: none; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4); }
.text-red { color: #ef4444 !important; }
.full-width { width: 100%; margin-top: 10px; }
.hidden-form { display: none; background: #222; padding: 20px; border-radius: 8px; margin-top: 15px; animation: slideDown 0.3s ease; border: 1px solid #444; }
.hidden-form input { margin-bottom: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.error-text { color: #ff6b6b; font-size: 0.9rem; margin-top: 10px; text-align: center; background: rgba(255, 0, 0, 0.1); padding: 8px; border-radius: 4px; display: none; }
.visuals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; }
.visual-card { background: var(--bg-secondary, #2a2a2a); border: 1px solid var(--border-color, #444); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; min-height: 100px; position: relative; }
.visual-card:hover { background: var(--bg-tertiary, #333); transform: translateY(-2px); border-color: var(--theme-primary, #4a90e2); }
.visual-card-icon { font-size: 1.5em; color: var(--theme-primary, #4a90e2); margin-bottom: 10px; }
.visual-card-title { font-size: 0.95em; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 4px; }
.visual-card-value { font-size: 0.8em; color: var(--text-secondary, #888); }
.visual-card.toggle-card { flex-direction: row; align-items: center; grid-column: span 2; min-height: 60px; }
.revert-section { margin-bottom: 15px; width: 100%; }
#custom-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#custom-confirm-overlay.active { opacity: 1; pointer-events: all; }
.confirm-modal { background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); width: 90%; max-width: 400px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; }
#custom-confirm-overlay.active .confirm-modal { transform: scale(1); }
.confirm-icon-area { font-size: 3rem; color: #f59e0b; margin-bottom: 16px; }
.confirm-modal h3 { color: #fff; margin: 0 0 8px 0; font-size: 1.25rem; }
.confirm-modal p { color: #a0aec0; margin: 0 0 24px 0; font-size: 0.95rem; line-height: 1.5; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-btn { padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: transform 0.1s, opacity 0.2s; }
.modal-btn:active { transform: scale(0.98); }
.modal-btn.cancel { background: transparent; border: 1px solid #4a5568; color: #cbd5e0; }
.modal-btn.confirm { background: #ef4444; color: white; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.modal-btn.confirm:hover { background: #dc2626; }
.modal-btn.cancel:hover { border-color: #fff; color: #fff; }
button, .sidebar-btn, .action-btn, .control-btn, .history-icon-btn, select, input[type="text"], input[type="file"] { min-height: 48px; min-width: 48px; touch-action: manipulation; }
@media (max-width: 768px) { .input-wrapper { padding: 10px; } #message-input { font-size: 16px; } .history-item { padding: 12px 10px; margin-bottom: 8px; } }
.download-link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 10px 18px; font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 10px; margin-bottom: 5px; width: fit-content; max-width: 100%; }
.download-link-button:hover:not(:disabled) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3); }
.download-link-button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.download-link-button:disabled { background: #475569; color: #94a3b8; cursor: not-allowed; box-shadow: none; transform: none; }
.download-link-button i { font-size: 1.1em; }
.download-link-button.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); pointer-events: none; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background-color: #ffffff !important; border: 1px solid #ccc !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #000000 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #555555 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-icon { filter: brightness(0.9); }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal label, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal h3, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal h4, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal span { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="card"], :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="box"], :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="container"] { background-color: #f9f9f9 !important; border-color: #e0e0e0 !important; color: #000 !important; }
html.light-mode .visual-card, html.theme-paper .visual-card, html.theme-frosted-glass .visual-card { background-color: #ffffff !important; border: 1px solid #ccc !important; color: #000000 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }
html.light-mode .visual-card .visual-card-title, html.theme-paper .visual-card .visual-card-title, html.theme-frosted-glass .visual-card .visual-card-title { color: #000000 !important; }
html.light-mode .visual-card .visual-card-value, html.theme-paper .visual-card .visual-card-value, html.theme-frosted-glass .visual-card .visual-card-value { color: #555555 !important; }
html.light-mode .settings-content div[class*="card"], html.light-mode .settings-content div[class*="box"], html.light-mode .settings-content div[class*="group"], html.theme-paper .settings-content div[class*="card"], html.theme-paper .settings-content div[class*="box"], html.theme-paper .settings-content div[class*="group"], html.theme-frosted-glass .settings-content div[class*="card"], html.theme-frosted-glass .settings-content div[class*="box"], html.theme-frosted-glass .settings-content div[class*="group"] { background-color: #ffffff !important; border-color: #ccc !important; color: #000000 !important; }
html.light-mode .settings-modal select, html.light-mode .settings-modal input, html.theme-paper .settings-modal select, html.theme-paper .settings-modal input, html.theme-frosted-glass .settings-modal select, html.theme-frosted-glass .settings-modal input { background-color: #f5f5f5 !important; color: #000000 !important; border: 1px solid #999 !important; }
html.light-mode .settings-modal label, html.theme-paper .settings-modal label, html.theme-frosted-glass .settings-modal label { color: #333333 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) { --bg-secondary: #ffffff; --bg-tertiary: #f7f7f7; --text-primary: #1c1c1c; --text-secondary: #555555; --border-color: #e2e8f0; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #666666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background: #ffffff !important; border: 1px solid #ccc !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #555555 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-icon { filter: brightness(0.95); }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) #profile-settings-modal { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #ccc !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-header { background-color: transparent !important; border-bottom: 1px solid #e0e0e0 !important; color: #000 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-section-header { color: #000000 !important; border-bottom: 2px solid var(--theme-primary) !important; background: transparent !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-tabs { background-color: #f7f7f7 !important; border-bottom: 1px solid #e0e0e0 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn { color: #666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn.active { color: #000 !important; font-weight: 700 !important; background: transparent !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content p, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content li { color: #1c1c1c !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) #profile-settings-modal { color: #ffffff !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-section-header { color: #ffffff !important; border-bottom: 2px solid var(--theme-primary) !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal p, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal li, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal label, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal span, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal h2, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal h3 { color: #e0e0e0 !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card { background: #2a2a2a !important; border: 1px solid #444 !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card .visual-card-title { color: #ffffff !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card .visual-card-value { color: #aaaaaa !important; }
.support-cta-btn { padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95em; border: 1px solid var(--border-color); cursor: pointer; transition: all 0.2s ease; text-align: center; background-color: var(--input-bg); color: var(--text-color); width: auto; min-width: 180px; text-decoration: none !important; display: inline-flex !important; justify-content: center; }
.support-cta-btn:hover { background-color: var(--ai-message-bg); border-color: var(--theme-primary); transform: translateY(-1px); }
#premium-status-badge.ultra-badge { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important; border-color: #ff5c5c !important; box-shadow: 0 0 15px rgba(220, 53, 69, 0.6) !important; color: white !important; font-weight: 800; letter-spacing: 0.5px; }
#new-chat-btn { grid-column: span 2; background: var(--theme-primary); color: white; font-size: 1em; padding: 12px; }
#new-chat-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 5px; }
#show-upgrade-modal-btn { font-size: 0.85em; }
.sidebar-controls .sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#new-chat-btn { grid-column: span 2; background-color: var(--theme-primary); color: white; justify-content: center; }
.model-list li[data-model="nano"].active { background: #28a745 !important; border-color: #28a745 !important; color: white !important; }
.model-list li[data-model="gpt4"].active { background: #007aff !important; border-color: #007aff !important; color: white !important; }
.model-list li[data-model="o1pro"].active { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important; border-color: #ff5c5c !important; color: white !important; box-shadow: 0 0 10px rgba(220, 53, 69, 0.4) !important; font-weight: 800 !important; }
.model-list li[data-model="nano"]:hover:not(.active) { border: 1px solid #28a745; color: #28a745; }
.model-list li[data-model="gpt4"]:hover:not(.active) { border: 1px solid #007aff; color: #007aff; }
.model-list li[data-model="o1pro"]:hover:not(.active) { border: 1px solid #dc3545; color: #dc3545; }
.model-list li[data-model="nano"].active { background: linear-gradient(135deg, #28a745, #1e7e34) !important; border-color: #28a745 !important; color: white !important; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); }
.model-list li[data-model="gpt4"].active { background: linear-gradient(135deg, #007aff, #0056b3) !important; border-color: #007aff !important; color: white !important; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }
.model-list li[data-model="o1pro"].active { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important; border-color: #ff5c5c !important; color: white !important; font-weight: 800 !important; letter-spacing: 0.5px; box-shadow: 0 0 15px rgba(220, 53, 69, 0.5) !important; }
.model-list li[data-model="nano"]:hover:not(.active) { color: #28a745; border-color: #28a745; }
.model-list li[data-model="gpt4"]:hover:not(.active) { color: #007aff; border-color: #007aff; }
.model-list li[data-model="o1pro"]:hover:not(.active) { color: #dc3545; border-color: #dc3545; }
.download-link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--theme-primary) !important; color: white !important; border: none !important; border-radius: 20px; padding: 10px 20px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 8px; transition: transform 0.2s, filter 0.2s, box-shadow 0.2s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.download-link-button:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }
.download-link-button:active { transform: translateY(0); }
#model-toggle-button.tier-nano { background: rgba(40, 167, 69, 0.15) !important; border: 1px solid #28a745 !important; color: #28a745 !important; }
#model-toggle-button.tier-plus { background: rgba(0, 122, 255, 0.15) !important; border: 1px solid #007aff !important; color: #007aff !important; }
#model-toggle-button.tier-ultra { background: rgba(220, 53, 69, 0.15) !important; border: 1px solid #ff5c5c !important; color: #ff5c5c !important; box-shadow: 0 0 15px rgba(220, 53, 69, 0.2); font-weight: 800; }
#model-toggle-button.tier-nano i, #model-toggle-button.tier-plus i { color: inherit !important; }
#model-toggle-button.tier-ultra i { color: white !important; }
.tier-heading { text-align: center; }
.tier-free-status .fa-star { color: #28a745; }
.tier-premium-status .fa-star { color: #007bff; }
.tier-max-status .fa-star { color: #dc3545; }
.sidebar-btn.tier-max-status, .sidebar-btn.tier-premium-status, .sidebar-btn.tier-free-status { box-shadow: none; transition: all 0.3s ease; }
.tier-status-crimson { background: rgba(180, 0, 0, 0.4) !important; border: 1px solid rgba(255, 0, 0, 0.6) !important; color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 0, 0, 0.3) !important; font-weight: 700; pointer-events: none; }
.tier-status-emerald { background: rgba(0, 150, 100, 0.4) !important; border: 1px solid rgba(0, 255, 170, 0.6) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(0, 255, 170, 0.3) !important; font-weight: 600; pointer-events: none; }
.tier-ultra-final-size { padding: 6px 8px !important; font-size: 0.85em !important; align-items: center; justify-content: center; background: rgba(180, 0, 0, 0.4) !important; }
.tier-ultra-stars i.fa-star { font-size: 0.7em !important; color: #000000 !important; margin-right: 2px !important; }
.tier-ultra-final-size i.fa-star:last-of-type { margin-right: 5px !important; }
.tier-plus-stars i.fa-star, .tier-free-stars i.fa-star { color: #34d399 !important; }
.tier-status-crimson { background: rgba(180, 0, 0, 0.4) !important; border: 1px solid rgba(255, 0, 0, 0.6) !important; color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 0, 0, 0.3) !important; font-weight: 700; pointer-events: none; }
.tier-ultra-final-size { font-size: 0.8em !important; padding: 6px !important; align-items: center; justify-content: center; display: flex; white-space: nowrap; background: rgba(180, 0, 0, 0.4) !important; }
.tier-ultra-stars i.fa-star { font-size: 0.5em !important; color: #000000 !important; margin-right: 1px !important; }
.tier-ultra-final-size i.fa-star:last-of-type { margin-right: 2px !important; }
.sidebar-btn.tier-max-status { background: rgba(180, 0, 0, 0.4) !important; box-shadow: 0 0 0 transparent !important; color: #000000 !important; }
.tier-ultra-stars i.fa-star { color: #000000 !important; font-size: 0.5em !important; margin-right: 1px !important; }
#model-toggle-button.tier-grok { background: rgba(0, 0, 0, 0.1) !important; border: 1px solid #333 !important; color: #333 !important; }
html:not(.light-mode) #model-toggle-button.tier-grok { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid #fff !important; color: #fff !important; }
#model-toggle-button.tier-auto { background: linear-gradient(45deg, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)) !important; border: 1px solid var(--theme-primary) !important; color: var(--theme-primary) !important; font-weight: 800; animation: borderPulse 3s infinite; }
@keyframes borderPulse { 0% { border-color: #ff00ff; color: #ff00ff; } 50% { border-color: #00ffff; color: #00ffff; } 100% { border-color: #ff00ff; color: #ff00ff; } }

/* === 🟢 FIX: SMALLER PREMIUM/FREE/ULTRA BADGES === */
.tier-premium-status,
.tier-free-status,
.tier-max-status {
    font-size: 10px !important;       
    padding: 4px 8px !important;      
    min-height: 24px !important;      
    height: auto !important;          /* Override default sidebar-btn height */
    gap: 5px !important;              
    line-height: 1 !important;
    width: auto !important;           
    display: inline-flex !important;  
    margin-top: 4px; /* alignment fix */
}

/* Smaller Stars for All Tiers */
.tier-premium-status i, 
.tier-free-status i,
.tier-max-status i {
    font-size: 9px !important;        
    margin-right: 2px !important;
}

/* --- NEW: Go Back Button Style --- */
    .back-btn-pill {
      /* Pill shape */
      border: 1px solid var(--border-light);
      border-radius: 30px; 
      /* Appearance */
      background: var(--background-light);
      color: var(--text-medium);
      padding: 0.75rem 1.5rem;
      width: auto; /* Override button: width: 100% */
      margin: 2rem auto 0 auto; /* Center it and add top margin */
      display: inline-flex; /* Use inline-flex to respect auto width */
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      transition: all 0.2s ease;
    }
    .back-btn-pill:hover {
      background: var(--border-light);
      color: var(--text-dark);
      border-color: var(--text-medium);
    }

    /* === GLOBAL CUSTOM MODAL STYLES === */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark dimmed background */
    backdrop-filter: blur(8px);      /* Blur effect */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-modal-box {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal-overlay.active .custom-modal-box {
    transform: scale(1);
}

/* Icon Styling */
.modal-icon-area {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.modal-icon-area i {
    font-size: 28px;
    color: #4a90e2; /* Default Blue */
}

.modal-icon-area i.warning { color: #f59e0b; }
.modal-icon-area i.danger { color: #ef4444; }
.modal-icon-area i.premium { color: #FFD700; }

/* Text Styling */
.custom-modal-box h3 {
    margin: 0 0 10px 0;
    color: white;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
}

.custom-modal-box p {
    margin: 0 0 25px 0;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.5;
}

/* Buttons */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    flex: 1;
    transition: transform 0.2s, opacity 0.2s;
}

.modal-btn:active { transform: scale(0.96); }

.modal-btn.primary {
    background: linear-gradient(135deg, #4a90e2, #3b7dd8);
    color: white;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.modal-btn.primary.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.modal-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ddd;
}

.modal-btn.hidden { display: none; }

/* --- Mega Menu Container --- */
#model-popover {
    width: 600px; /* Wider to fit columns */
    max-width: 90vw;
    background: #1a1a1a; /* Dark background matches your UI */
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* --- Grid Layout for Tiers --- */
.popover-content {
    padding: 20px;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Equal Columns */
    gap: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

/* --- Column Headers --- */
.column-header {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
    padding-left: 8px;
}

/* --- List Items --- */
.model-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.model-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    color: #eee;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.model-list li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.model-list li.active {
    background: #2563eb; /* Blue Brand Color */
    color: white;
    font-weight: 600;
}

.model-icon {
    font-size: 1.1rem;
}

/* --- Footer: Persona Pills --- */
.persona-footer {
    background: #111; /* Slightly darker footer */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.persona-pills {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

/* --- Pill Buttons --- */
.persona-pill {
    flex: 1; /* Distribute space evenly */
    background: #333;
    border: none;
    color: #aaa;
    padding: 8px 16px;
    border-radius: 999px; /* Pill shape */
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.persona-pill:hover {
    background: #444;
    color: white;
}

.persona-pill.active {
    background: #eee; /* Light active state */
    color: #111;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* --- Mobile Optimization --- */
@media (max-width: 600px) {
    #model-popover {
        width: 320px;
    }
    .model-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 20px;
    }
}

/* --- Mega Menu Visibility Fixes --- */

/* 1. Ensure text is visible in both modes */
.model-list li {
    color: var(--text-primary, #fff); /* Default to white in dark mode */
    opacity: 1; /* Ensure they aren't hidden */
}

/* 2. Light Mode Overrides for the Menu */
.light-mode #model-popover {
    background: #ffffff;
    border-color: #ddd;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.light-mode .column-header {
    color: #555;
}
.light-mode .model-list li {
    color: #333; /* Dark text for light mode */
}
.light-mode .model-list li:hover {
    background: #f5f5f5;
}
.light-mode .persona-footer {
    background: #f9f9f9;
    border-top: 1px solid #eee;
}
.light-mode .persona-pill {
    background: #e0e0e0;
    color: #555;
}
.light-mode .persona-pill.active {
    background: #333;
    color: #fff;
}

/* 3. Locked Item Styling (Optional visual cue) */
/* We don't hide them, but we can give them a lock icon via JS if desired, 
   or just keep them looking normal to entice clicks. */

   /* === COOKIE BANNER FIX === */
#cookie-consent-banner {
    position: fixed;
    bottom: 100px; /* 100px up to clear the input bar */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background-color: rgba(20, 20, 20, 0.95); /* Dark, distinct background */
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 999999; /* CRITICAL: Higher than everything else */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideUp 0.5s ease-out;
}

/* Hide class */
.cookie-banner-hidden {
    display: none !important;
}

/* Inner Content Layout */
.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    color: #e0e0e0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Link Color */
.cookie-content a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
}

/* The OK Button */
#cookie-accept-btn {
    background: #2563eb; /* Bright Blue */
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

#cookie-accept-btn:hover {
    background: #1d4ed8;
}

/* Animation */
@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile Tweak: Move it slightly higher if keyboard might hide it */
@media (max-width: 600px) {
    #cookie-consent-banner {
        bottom: 90px; /* Adjust based on your input bar height */
        width: 95%;
    }
}

/* Video Container Styling */
.ai-video-container {
    margin-top: 10px;
    max-width: 100%;
    background: #000; /* Black background for cinematic feel */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* The Video Player */
.ai-video-container video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Download Link */
.ai-video-container a {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background 0.3s;
}

.ai-video-container a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* === INPUT TEXT VISIBILITY FIX === */

/* Force input text to be white because the background is dark glass */
#message-input {
    color: #ffffff !important;
}

/* Force the placeholder text ("Just ASK AI") to be light grey */
#message-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

/* Ensure the character counter is also visible */
.char-counter {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* === VISUAL UPGRADE: MODEL SELECTOR & POPOVER === */

/* 1. The Container (Menu) - Frosted Glass Effect */
#model-popover {
    background: rgba(15, 15, 15, 0.85) !important; /* Dark Translucent */
    backdrop-filter: blur(24px) !important; /* Strong Blur */
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

/* 2. The Buttons (Unselected) - Glassy Pills */
.model-list li {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.model-list li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 3. The Active Button - Gradient & Glow */
/* Active State - Gradient & Glow */
.model-list li.active, 
.persona-pill.active {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-hover)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3) !important;
    font-weight: 700;
}

/* 4. Specific Tier Glows (Preserve your color coding but add glow) */
/* Nano/Free - Green Glow */
.model-list li[data-model="nano"].active {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: #28a745 !important;
}

/* GPT-4/Plus - Blue Glow */
.model-list li[data-model="gpt4"].active {
    background: linear-gradient(135deg, #007aff, #0056b3) !important;
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: #007aff !important;
}

/* Ultra/O1 - Red/Crimson Glow */
.model-list li[data-model="o1pro"].active,
.model-list li[data-model="gemini_ultra"].active {
    background: linear-gradient(135deg, #dc3545, #b02a37) !important;
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: #ff5c5c !important;
}

/* 5. Chat Persona Pills - Matching Style */
.persona-pill {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(

    /* === AI MESSAGE TEXT VISIBILITY FIX === */

/* 1. Force AI Message Text to be Light Grey in Default/Dark Mode */
.message-container.ai .message,
.message-container.assistant .message {
    color: #e0e0e0 !important; /* Readable Off-White */
}

/* 2. Make Bold Text (Headers/Strong) Pure White for emphasis */
.message-container.ai .message strong,
.message-container.assistant .message strong,
.message-container.ai .message b,
.message-container.assistant .message b {
    color: #ffffff !important; /* Pure White */
    font-weight: 700;
}

/* 3. Ensure Paragraphs and Lists inherit this light color */
.message-container.ai .message p,
.message-container.assistant .message p,
.message-container.ai .message li,
.message-container.assistant .message li {
    color: inherit !important;
}

/* --- EXCEPTION: LIGHT MODE --- */
/* If the user switches to Light Mode (Paper/Frosted), switch text back to Black */
html.light-mode .message-container.ai .message,
html.light-mode .message-container.assistant .message,
html.theme-paper .message-container.ai .message,
html.theme-paper .message-container.assistant .message,
html.theme-frosted-glass .message-container.ai .message,
html.theme-frosted-glass .message-container.assistant .message {
    color: #1c1c1c !important;
}

/* Force Bold text to Black in Light Mode */
html.light-mode .message-container.ai .message strong,
html.light-mode .message-container.assistant .message strong,
html.theme-paper .message-container.ai .message strong,
html.theme-paper .message-container.assistant .message strong,
html.theme-frosted-glass .message-container.ai .message strong,
html.theme-frosted-glass .message-container.assistant .message strong {
    color: #000000 !important;
}

/* === IMPROVED PAUSE BUTTON === */
#pause-resume-btn {
    /* Vibrant Gradient (Red/Crimson) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    
    /* Text/Icon Color */
    color: white !important;
    
    /* Border & Depth */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4) !important;
    
    /* Shape matching other buttons */
    border-radius: 16px !important; 
    
    /* Animation */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    
    /* Ensure opacity is full */
    opacity: 1 !important; 
}

/* Hover Effect - Glow Brighter */
#pause-resume-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 75, 43, 0.6) !important;
    filter: brightness(1.1);
}

/* Active/Click Effect */
#pause-resume-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 75, 43, 0.3) !important;
}

/* Optional: Pulse animation to show it's active/working */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 75, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 75, 43, 0); }
}

/* Apply pulse when the button is visible (implying generation is happening) */
#pause-resume-btn:not(.hidden) {
    animation: pulse-red 2s infinite;
}

/* === FORCE PAUSE BUTTON VISUALS === */
/* We use the parent ID to increase specificity and override any defaults */
#input-area .input-controls #pause-resume-btn {
    /* 1. Make it stand out (Red/Pink Gradient) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: white !important;
    
    /* 2. Fix the size and shape */
    width: auto !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 20px !important; /* Wider touch target */
    border-radius: 20px !important; /* Pill shape */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* 3. Reset flex/display properties to ensure it shows */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    
    /* 4. Add Glow */
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.5) !important;
    opacity: 1 !important;
    margin-left: 5px !important;
}

/* Hover State */
#input-area .input-controls #pause-resume-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255, 75, 43, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* Hide it properly when the class 'hidden' is present */
#input-area .input-controls #pause-resume-btn.hidden {
    display: none !important;
}

/* Optional: Add text label next to icon for clarity */
#input-area .input-controls #pause-resume-btn::after {
    content: "Stop";
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
    text-transform: uppercase;
}

/* === FORCE PAUSE BUTTON VISUALS === */
/* We use the ID selector (#) to override the generic class */
#input-area .input-controls #pause-resume-btn {
    /* 1. THE RED GRADIENT (Replaces grey background) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* 2. SIZE & SHAPE (Pill shape instead of square) */
    width: auto !important;
    min-width: 80px !important; /* Wide enough for text */
    height: 36px !important;
    border-radius: 20px !important; 
    padding: 0 16px !important;
    margin-left: 10px !important;
    
    /* 3. GLOW EFFECT */
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.5) !important;
    opacity: 1 !important;

    /* 4. FLEX LAYOUT (Centers content) */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 5. ADD THE WORD "STOP" (Pseudo-element) */
/* This adds text without changing HTML */
#input-area .input-controls #pause-resume-btn::after {
    content: "STOP";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Hover State - Brighter Glow */
#input-area .input-controls #pause-resume-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255, 75, 43, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* Ensure it actually hides when needed */
#input-area .input-controls #pause-resume-btn.hidden {
    display: none !important;
}

/* === MOBILE HEADER LAYOUT FIX === */
@media (max-width: 600px) {
    
    /* 1. Remove Redundant Settings Button (It's in Sidebar) */
    /* This immediately frees up ~50px of space */
    #settings-btn {
        display: none !important;
    }

    /* 2. Tighten Header Padding */
    /* Maximize available width for buttons */
    .controls-header {
        padding: 0 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Shrink Remaining Buttons (Search & Share) */
    /* Reduces them from 48px to 34px */
    .header-right .header-icon-btn {
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 1.1rem !important;
    }

    /* 4. Reduce Gaps */
    .header-right {
        gap: 2px !important;
    }

    /* 5. Shrink the Toggle Switch */
    /* Scales it down to 75% size to fit snugly */
    .switch {
        transform: scale(0.75) !important;
        margin-left: 5px !important;
        transform-origin: right center !important;
    }
    
    /* 6. Prevent Model Selector from pushing too hard */
    #model-toggle-button {
        max-width: 140px !important;
        padding: 4px 8px !important;
    }
    #selected-model-name {
        font-size: 0.8rem !important;
    }
}

/* === NEW VISUALS TAB: MODE GRID === */
.mode-toggle-container {
    margin-bottom: 20px;
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.mode-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mode-card:hover {
    background: var(--ai-message-bg);
    transform: translateY(-2px);
    border-color: var(--text-secondary);
}

.mode-icon {
    font-size: 1.8rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

/* ACTIVE STATE */
.mode-card.active {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Icon Color when Active */
#mode-btn-light.active .mode-icon { color: #f59e0b; /* Sun Yellow */ }
#mode-btn-dark.active .mode-icon { color: #4a90e2; /* Moon Blue */ }

/* Checkmark Badge */
.active-check {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: var(--theme-primary);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mode-card.active .active-check {
    opacity: 1;
    transform: scale(1);
}

/* === CLEAN UP MOBILE HEADER (Since toggle is gone) === */
@media (max-width: 600px) {
    .header-right {
        gap: 8px !important; /* Restore normal spacing */
    }
    /* Re-enable buttons we hid before if you want them back */
    #settings-btn, #share-btn {
        display: inline-flex !important; 
    }
}


#controls-header-content {
    /* Set up the container as a flex element */
    display: flex; 
    
    /* This is the key property: it distributes the space 
       between the two main child elements (header-left and header-right) 
       pushing them to opposite edges of the container. */
    justify-content: space-between; 
    
    /* Ensures all items are aligned vertically in the center */
    align-items: center; 
    
    /* Ensures the header spans the full width it can take */
    width: 100%; 
}

/* Optional but good practice: ensure header-right uses flex 
   to keep the buttons close together */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between icons */
}

/* Luma Premium Glow Effect */
.luma-glow {
    border: 1px solid #8b5cf6 !important; /* Luma Purple border */
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
    animation: lumaPulse 3s infinite ease-in-out;
}

.luma-glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: lumaShine 3s infinite;
}

@keyframes lumaPulse {
    0% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); border-color: #8b5cf6; }
    50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6); border-color: #a78bfa; }
    100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); border-color: #8b5cf6; }
}

@keyframes lumaShine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* Dim icons by default */
.sidebar-btn i, .history-icon-btn i {
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Brighten on hover or active */
.sidebar-btn:hover i, 
.history-item:hover .history-icon-btn i,
#new-chat-btn i {
    opacity: 1;
}

/* === PREMIUM SKELETON LOADER === */

/* Container for the fake items */
.skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Matches your history item gap */
    padding: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* The card itself (matches .history-item dimensions) */
.skeleton-card {
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02); /* Very subtle background */
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* The "Title" Line */
.skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.skeleton-line.title {
    width: 70%; /* Simulate title width */
}

.skeleton-line.date {
    width: 40%; /* Simulate date width */
    height: 8px;
}

/* The Shimmer Animation Effect */
.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.03) 20%, /* Slight bright spot */
        rgba(255, 255, 255, 0.06) 60%, /* Peak brightness */
        rgba(255, 255, 255, 0)
    );
    animation: skeletonShimmer 2s infinite;
}

@keyframes skeletonShimmer {
    100% {
        transform: translateX(100%);
    }

}

/* === DRAMATIC PULSATING INPUT GLOW === */

@keyframes theme-pulse-glow {
    0% {
        border-color: rgba(var(--theme-primary-rgb), 0.3);
        /* Subtle starting state */
        box-shadow: 0 0 5px rgba(var(--theme-primary-rgb), 0.1); 
    }
    50% {
        border-color: var(--theme-primary);
        /* DRAMATIC EFFECT: 
           1. First shadow (10px) is the bright inner halo.
           2. Second shadow (30px) is the wide outer diffusion.
           3. Inset shadow adds depth inside the box. 
        */
        box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.8),
                    0 0 30px rgba(var(--theme-primary-rgb), 0.4),
                    inset 0 0 8px rgba(var(--theme-primary-rgb), 0.2);
    }
    100% {
        border-color: rgba(var(--theme-primary-rgb), 0.3);
        /* Return to subtle state */
        box-shadow: 0 0 5px rgba(var(--theme-primary-rgb), 0.1);
    }
}

/* Apply to Input on Focus */
#message-input:focus {
    background: rgba(0, 0, 0, 0.7); /* Darker bg makes the glow pop more */
    animation: theme-pulse-glow 2.5s infinite ease-in-out; /* Slightly faster breath */
    outline: none;
}


/* Add this at the end of your CSS to ensure it overrides */

.btn, .modal-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.btn:hover, .modal-btn:hover {
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.2) !important;
    transform: translateY(-1px);
}

/* Primary/Confirm buttons inside modals get a bit more fill on hover */
.modal-btn.primary:hover, .btn-primary:hover {
    background: rgba(var(--theme-primary-rgb), 0.3) !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb), 0.4) !important;
}


/* === FORCE GLASS TRANSPARENCY FIX === */

/* 1. Sidebar Buttons (New Chat, History Items, etc.) */
.sidebar-btn {
    /* Make background transparent white (Glass) */
    background: rgba(255, 255, 255, 0.03) !important;
    
    /* Thin subtle border */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    /* Blur background for true glass effect */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Text color */
    color: rgba(255, 255, 255, 0.7) !important;
    
    /* Remove any solid shadows */
    box-shadow: none !important;
}

.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* 2. Model Selector Options (The Grid Buttons) */
.model-list li {
    /* Transparent Glass Background */
    background: rgba(255, 255, 255, 0.03) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Blur */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
}

.model-list li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* 3. The ACTIVE Selected Model (Blue/Gradient Glass) */
.model-list li.active {
    /* Semi-transparent Gradient */
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.6), rgba(var(--theme-primary-rgb), 0.3)) !important;
    
    /* Border glows with theme color */
    border: 1px solid rgba(var(--theme-primary-rgb), 0.6) !important;
    
    /* Add a glow shadow */
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.3) !important;
    
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
}

/* 4. Persona Pills (Bottom of menu) */
.persona-pill {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    color: rgba(255, 255, 255, 0.6) !important;
}

.persona-pill.active {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.6), rgba(var(--theme-primary-rgb), 0.3)) !important;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.6) !important;
    color: #fff !important;
}

/* === FORCE GLOBAL SIDEBAR TRANSPARENCY === */

/* 1. Default Dark Glass (For Midnight, Synthwave, Stealth, etc.) */
.sidebar {
    /* Semi-transparent dark layer */
    background: rgba(10, 12, 16, 0.65) !important; 
    
    /* Heavy Blur to make text readable */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Remove solid borders, use light highlight */
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    /* subtle shadow for separation */
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Light Theme Glass (For Paper, Frosted, Default Light) */
/* We need a separate rule because white text on clear glass is hard to read in light mode */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .sidebar {
    /* Semi-transparent white layer */
    background: rgba(255, 255, 255, 0.75) !important;
    
    /* Darker, subtle border for light mode */
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    
    /* Lighter shadow */
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Ensure the Sidebar Footer blends in too */
.sidebar-footer {
    /* Make the footer background mostly clear so the gradient flows */
    background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fix for Light Mode Footer */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .sidebar-footer {
    background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, transparent 100%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* --- NEW SIDEBAR LAYOUT STYLES --- */

/* 1. Header */
.sidebar-header {
    padding: 25px 20px 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: transparent;
    border-bottom: none;
}

#sidebar-greeting {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.user-status {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* 2. Controls Container */
.sidebar-controls {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Full Width "New Chat" Button */
.sidebar-btn.full-width {
    width: 100%;
    justify-content: center;
    font-weight: 600;
    background: var(--theme-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.sidebar-btn.full-width:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 3. Search Bar */
.sidebar-search-container {
    position: relative;
    width: 100%;
}

.sidebar-search-container input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-color);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s;
}

.sidebar-search-container input:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--theme-primary);
}

.sidebar-search-container .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.9rem;
}

/* 4. Utilities Grid (3 Buttons in a row) */
.sidebar-utilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.sidebar-btn.small {
    padding: 8px;
    font-size: 0.85rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
}

/* Glass effect for utility buttons */
.glass-btn {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-color);
}

.glass-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Accent for Premium button */
.accent-glass {
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05)) !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    color: #FFD700 !important;
}

/* 5. Footer & Delete Link */
.sidebar-footer {
    padding: 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
}

#user-controls-sidebar {
    display: flex;
    flex-direction: column;
}

#logged-in-controls {
    display: flex;
}

.sidebar-btn.footer-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* The Subtle Text Link for Delete All */
.text-link-danger {
    background: none;
    border: none;
    color: #666;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.text-link-danger:hover {
    color: #ff4444;
}


.notes-modal-box {
    background: var(--sidebar-bg); /* Matches your sidebar glass theme */
    width: 600px;
    height: 70vh;
    max-width: 95%;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: scaleIn 0.2s ease-out;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

.notes-title {
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-status {
    font-size: 0.75rem;
    color: #4ade80; /* Green for success */
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.save-status.saving {
    color: #fbbf24; /* Yellow for saving */
    opacity: 1;
    content: "Saving...";
}

.save-status.saved {
    opacity: 1;
}

.notes-body {
    flex-grow: 1;
    padding: 0;
    background: rgba(0,0,0,0.1);
}

#notes-textarea {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 20px;
    color: var(--text-color);
    font-family: 'Fira Code', monospace; /* Good for code snippets */
    font-size: 0.95rem;
    resize: none;
    outline: none;
    line-height: 1.6;
}

#notes-textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

.notes-actions .icon-btn {
    color: var(--text-color);
    opacity: 0.7;
    margin-left: 10px;
    transition: opacity 0.2s;
}

.notes-actions .icon-btn:hover {
    opacity: 1;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobile Tweak */
@media (max-width: 600px) {
    .notes-modal-box {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* Notes Overlay */
#notes-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#notes-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Canvas Box */
.notes-canvas {
    width: 90%;
    max-width: 600px;
    height: 70vh;
    background: var(--bg-card, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#notes-overlay.active .notes-canvas {
    transform: translateY(0);
}

/* Header */
.notes-header {
    padding: 15px;
    background: var(--bg-core, #121212);
    border-bottom: 1px solid var(--border-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--theme-primary, #4a90e2);
    font-weight: bold;
}

#notes-status {
    font-size: 0.8rem;
    color: #666;
    margin-right: 10px;
    font-weight: normal;
}

#close-notes-btn {
    background: transparent;
    border: none;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 1.2rem;
}

#notes-textarea {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px;
    color: var(--text-color, #ddd);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    resize: none;
    outline: none;
    line-height: 1.6;
}

/* Delete Animation */
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
        max-height: 60px; /* Approx height of item */
        margin-bottom: 5px;
    }
    100% {
        transform: translateX(-120%); /* Slide way off screen */
        opacity: 0;
        max-height: 0; /* Shrink space */
        margin-bottom: 0;
        padding: 0;
        border: none;
    }
}

.history-item.deleting {
    animation: slideOutLeft 0.4s ease-in-out forwards;
    pointer-events: none; /* Prevent clicks while animating */
}

/* === FIX: CHAT BUBBLE SIZING === */

/* 1. Force User Bubble (Blue) to shrink to text */
.message-container.user .message {
    width: fit-content !important;  /* Only as wide as the text */
    max-width: 85% !important;      /* Prevent it from hitting the edge */
    padding: 8px 14px !important;   /* Reduce padding (makes it smaller) */
    margin-left: auto;              /* Push it to the right */
    min-width: auto !important;     /* Remove minimum width enforcement */
    display: inline-block;          /* Ensures correct wrapping */
    text-align: left; 
}

/* 2. Force AI Bubble (Grey) to shrink to text */
.message-container.ai .message, 
.message-container.assistant .message {
    width: fit-content !important;
    max-width: 85% !important;
    padding: 8px 14px !important;
    display: inline-block;
}

/* 3. Ensure the wrapper allows shrinking */
.message-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important; /* Allows alignment via margins */
}

/* Style for the Subscription Status Badge */
.status-pill {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}

/* Specific Tier Styles */
.status-free {
    background: #333;
    color: #ccc;
    border: 1px solid #555;
}

.status-premium {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Blue */
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.status-ultra {
    background: linear-gradient(135deg, #FFD700, #FDB931); /* Gold */
    color: #000;
    border: none;
    font-weight: 800;
    box-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- New Help & Features Layout --- */

/* Grid for "How to Use" cards */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.help-card {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
}

.help-card:hover {
    transform: translateY(-2px);
    background: var(--bg-tertiary, #333);
}

.help-icon {
    font-size: 1.5rem;
    color: var(--theme-primary, #4a90e2);
    margin-bottom: 5px;
}

.help-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.help-desc {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
}

/* Feature Tiers Layout */
.tier-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid #555;
}

.tier-box.premium {
    border-left-color: #3b82f6; /* Blue */
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
}

.tier-box.ultra {
    border-left-color: #ffd700; /* Gold */
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent);
}

.tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
}

.feature-list-styled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list-styled li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.4;
}

.feature-list-styled i {
    margin-top: 3px;
    font-size: 0.9rem;
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */

/* Use this if you toggle themes via a CSS class on the body */
body.light-mode .fa-magnifying-glass,
body.light-mode .fa-gear, 
body.light-mode .fa-share-nodes,
body.light-mode .fa-share-from-square {
    color: #1a1a1a !important; /* Dark text for icons */
}

/* Fix for the Sidebar Tier Status (Free/Upgrade text) */
body.light-mode .sidebar-section span,
body.light-mode .tier-status-text, 
body.light-mode .upgrade-text,
body.light-mode .user-info-panel {
    color: #1a1a1a !important;
}

/* Ensure the Sidebar Search input is visible */
body.light-mode input[type="text"],
body.light-mode .search-history-input {
    background-color: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

/* =========================================
   SYSTEM PREFERENCE AUTOMATIC OVERRIDE
   (If you rely on system settings instead of a toggle button)
   ========================================= */
@media (prefers-color-scheme: light) {
    /* Header Icons */
    .fa-magnifying-glass, .fa-gear, .fa-share-nodes {
        color: #1a1a1a !important;
    }

    /* Sidebar Text */
    .sidebar-wrapper, .sidebar-content {
        color: #1a1a1a !important; 
    }
    
    /* Specific target for the "Free" text if it's generic */
    .tier-label, .plan-name {
        color: #1a1a1a !important;
    }
}

/* =========================================================
   🚀 FINAL LIGHT MODE FIXES (Paste at the VERY bottom)
   ========================================================= */

/* 1. Fix Invisible Header Icons (Search, Settings, Share) */
html.light-mode .header-icon-btn,
html.light-mode .fa-magnifying-glass,
html.light-mode .fa-gear,
html.light-mode .fa-share-nodes,
html.light-mode .fa-share-from-square {
    color: #1a1a1a !important; /* Forces icons to Black */
    border-color: #ccc !important;
}

/* 2. Fix Sidebar Text (Free/Upgrade/Status) */
html.light-mode .sidebar-section span,
html.light-mode .tier-status-text,
html.light-mode .upgrade-text,
html.light-mode .user-status,
html.light-mode .footer-label {
    color: #1a1a1a !important;
}

/* 3. Fix Invisible Input/Search Bars */
html.light-mode input[type="text"],
html.light-mode .sidebar-search-container input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
}
html.light-mode input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

/* 4. Fix Sidebar Buttons (Settings, History items) */
html.light-mode .sidebar-btn {
    color: #333 !important;
    border-color: #ddd !important;
    background: rgba(0,0,0,0.05) !important;
}
html.light-mode .sidebar-btn:hover {
    background: rgba(0,0,0,0.1) !important;
}

/* 5. Fix "Free" Star Icon specifically */
html.light-mode .tier-free-status .fa-star {
    color: #28a745 !important; /* Keep green, but ensure visibility */
    text-shadow: none !important;
}

/* =================================================================
   🛑 FORCE LIGHT MODE VISIBILITY FIX (Paste at BOTTOM of file)
   ================================================================= */

/* 1. FORCE HEADER ICONS (Search, Settings, Share) TO BLACK */
html.light-mode .header-right .header-icon-btn,
body.light-mode .header-right .header-icon-btn,
html.light-mode .header-icon-btn,
body.light-mode .header-icon-btn {
    color: #1a1a1a !important; 
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
}

/* Hover state for header icons in light mode */
html.light-mode .header-right .header-icon-btn:hover,
body.light-mode .header-right .header-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000 !important;
}

/* 2. FORCE SIDEBAR TEXT & ICONS TO DARK GREY */
/* This targets the Free/Upgrade status text specifically */
html.light-mode .sidebar-controls .sidebar-btn,
body.light-mode .sidebar-controls .sidebar-btn,
html.light-mode .tier-status-text,
html.light-mode .user-status,
html.light-mode .upgrade-text,
html.light-mode .sidebar-btn {
    color: #333333 !important; 
    text-shadow: none !important;
}

/* Force icons inside sidebar buttons to be dark */
html.light-mode .sidebar-btn i,
body.light-mode .sidebar-btn i {
    color: #333333 !important;
    opacity: 1 !important;
}

/* 3. FIX THE "FREE" STAR & TEXT */
html.light-mode .tier-free-status,
body.light-mode .tier-free-status {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ccc !important;
}

/* Keep the star green, but make sure it pops against white */
html.light-mode .tier-free-status .fa-star,
body.light-mode .tier-free-status .fa-star {
    color: #28a745 !important;
}

/* 4. SIDEBAR SEARCH BAR TEXT */
html.light-mode .sidebar-search-container input,
body.light-mode .sidebar-search-container input {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ccc !important;
}
html.light-mode .sidebar-search-container input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}
html.light-mode .sidebar-search-container .search-icon {
    color: #555 !important;
}

/* === LOGIN HERO PILL === */
        .login-hero-btn {
            position: absolute;
            top: 30px;
            right: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08); /* Glassy background */
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 24px;
            border-radius: 50px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            z-index: 20; /* Ensure it sits above video */
        }

        .login-hero-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        /* Adjust positioning for mobile */
        @media (max-width: 768px) {
            .login-hero-btn {
                top: 20px;
                right: 20px;
                padding: 8px 16px;
                font-size: 0.85rem;
            }
        }

        /* Blue Pulse for Code Section */
        @keyframes pulse-blue {
            0% { text-shadow: 0 0 0 rgba(74, 144, 226, 0); }
            50% { text-shadow: 0 0 20px rgba(74, 144, 226, 0.5); color: #8ec5fc; }
            100% { text-shadow: 0 0 0 rgba(74, 144, 226, 0); }
        }

        /* === FIXED BACKGROUND VIDEO === */
        #bg-video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; 
            overflow: hidden;
            /* ADDED: This makes sure the "transparency" reveals black */
            background-color: #000; 
        }
        #bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* CHANGED: 1.0 is fully visible, 0.0 is invisible. 
               Set to 0.4 or 0.3 for a darker, more cinematic look. */
            opacity: 0.4; 
        }

}

/* --- New styles for the Speech Language Globe Button (Above the microphone) --- */
/* Target: #speech-lang-btn (Class: .lang-globe-btn) */
#speech-lang-btn.lang-globe-btn {
    /* Make it look like a secondary action button (Pill-shaped) */
    background-color: var(--theme-primary); 
    color: #fff; /* White text/icon */
    border: 2px solid var(--theme-primary); 
    
    /* Sizing and Shape */
    height: 38px; 
    padding: 0 10px;
    border-radius: 20px; /* Pill shape for button with text/badge */
    
    /* Layout */
    display: flex;
    align-items: center;
    gap: 6px; /* Space between globe icon and language badge */
    cursor: pointer;
    
    /* Effects */
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(var(--theme-primary-rgb, 74, 144, 226), 0.2);
}

#speech-lang-btn.lang-globe-btn:hover {
    background-color: var(--theme-hover);
    border-color: var(--theme-hover);
    transform: translateY(-1px);
}

/* Make the globe icon inside bigger */
#speech-lang-btn.lang-globe-btn i.fa-globe {
    font-size: 1.1em;
}

/* Style the language badge for visibility/contrast */
#speech-lang-btn .lang-badge-tiny {
    font-size: 0.7em;
    font-weight: 700;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.2); /* Subtle dark background for the badge */
    border-radius: 4px;
    min-width: 18px;
    text-align: center;
}

/* === NEW: LANGUAGES GRID === */
.languages-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, #000 0%, #050505 100%);
    text-align: center;
}
.lang-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 40px auto 0 auto;
}
.lang-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lang-pill:hover {
    background: white;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}
.globe-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
    animation: spin-slow 10s linear infinite;
}

/* === NEW: IMMERSIVE FEATURES (Voice + Wallpapers) === */
.immersive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto 0 auto;
}
.immersive-card {
    background: #0a0a0a;
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}
.immersive-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}
.immersive-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    padding: 15px;
    border-radius: 16px;
}
/* Voice Card Styling */
.card-voice .immersive-icon {
    background: rgba(74, 144, 226, 0.1);
    color: var(--primary);
}
.voice-waves {
    position: absolute;
    right: -20px; bottom: -20px;
    font-size: 8rem;
    opacity: 0.05;
    color: var(--primary);
}
/* Wallpaper Card Styling */
.card-wallpaper .immersive-icon {
    background: linear-gradient(135deg, #ff00cc20, #33339920);
    color: #d63384; /* Pinkish accent */
}
.wallpaper-preview {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, #ff00cc, #333399);
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 0;
}
.card-wallpaper:hover .wallpaper-preview {
    opacity: 0.1;
}
.immersive-content { position: relative; z-index: 1; }

@keyframes spin-slow { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* Mobile Stack */
@media (max-width: 768px) {
    .immersive-grid { grid-template-columns: 1fr; }
}

/* === VOICE MODE OVERLAY === */
#voice-mode-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 20000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
#voice-mode-overlay.active { opacity: 1; pointer-events: auto; }

/* The Orb Container */
.voice-orb-container {
    position: relative; width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
}

/* The Glowing Orb */
.voice-orb {
    width: 100px; height: 100px; border-radius: 50%;
    background: white;
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    animation: orb-idle 4s infinite ease-in-out;
}

/* States */
.voice-orb.listening {
    background: #4a90e2; /* Blue when listening to you */
    box-shadow: 0 0 60px 30px rgba(74, 144, 226, 0.6);
    animation: orb-pulse 1.5s infinite;
}
.voice-orb.processing {
    background: #9013fe; /* Purple when thinking */
    box-shadow: 0 0 50px 20px rgba(144, 19, 254, 0.5);
    animation: orb-spin 2s infinite linear;
}
.voice-orb.speaking {
    background: #fff; /* White/Bright when AI speaks */
    box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.8);
    animation: orb-speak 0.5s infinite alternate;
}

/* Controls */
.voice-controls {
    margin-top: 80px; display: flex; gap: 40px;
}
.voice-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: white; width: 60px; height: 60px; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.voice-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.voice-btn.close { background: rgba(255, 59, 59, 0.2); border-color: #ff5c5c; color: #ff5c5c; }
.voice-btn.close:hover { background: rgba(255, 59, 59, 0.4); }

/* Animations */
@keyframes orb-idle { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.5; } }
@keyframes orb-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes orb-speak { 0% { transform: scale(1); } 100% { transform: scale(1.2); filter: blur(5px); } }
@keyframes orb-spin { 0% { transform: rotate(0deg) scale(1); border-radius: 40%; } 50% { transform: rotate(180deg) scale(0.8); border-radius: 50%; } 100% { transform: rotate(360deg) scale(1); border-radius: 40%; } }


/* --- HELP TAB STYLES --- */

/* 1. The "How to Use" Grid */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Auto-fit columns */
    gap: 15px;
    margin-bottom: 25px;
}

.help-card {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.2s, border-color 0.2s;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-primary, #4a90e2);
    background: var(--bg-tertiary, #333);
}

.help-icon {
    font-size: 1.4rem;
    color: var(--theme-primary, #4a90e2);
    background: rgba(255,255,255,0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 5px;
}

.help-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.help-desc {
    font-size: 0.85rem;
    color: #b0b0b0;
    line-height: 1.5;
}

/* 2. The Tier Comparison Grid */
.tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% split */
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .tier-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
    }
}

.tier-card {
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Distinct Styles for Tiers */
.tier-card.premium {
    border-top: 4px solid #3b82f6; /* Blue Top Border */
}

.tier-card.ultra {
    border-top: 4px solid #ffd700; /* Gold Top Border */
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.05), rgba(0,0,0,0));
}

.tier-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

/* List Styling inside Tiers */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
}

.feature-list li i {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Contact Card */
.contact-card {
    background: var(--bg-secondary, #252526);
    border: 1px dashed var(--border-color, #444);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* === NEW: CAPABILITIES HIGHLIGHTS === */
.capabilities-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 10px; /* Space before the model pills */
    flex-wrap: wrap;
}

.cap-badge {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: default;
    backdrop-filter: blur(8px);
}

.cap-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Auto-Routing Styles */
.cap-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.route-icon { color: #4a90e2; }
.orb-icon { color: #bf5af2; }

.cap-text {
    display: flex;
    flex-direction: column;
}

.cap-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cap-desc {
    font-size: 0.75rem;
    color: #aaa;
}

/* Orb Animation */
.orb-pulse {
    width: 12px;
    height: 12px;
    background: #bf5af2;
    border-radius: 50%;
    box-shadow: 0 0 15px #bf5af2;
    animation: orb-glow 2s infinite ease-in-out;
}

@keyframes orb-glow {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 10px #bf5af2; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 25px #bf5af2; }
    100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 10px #bf5af2; }
}
/* =========================================
   1. SIDEBAR USER TIER & BADGES
   ========================================= */
#sidebar-user-tier {
    font-size: 0.85rem;
    margin-top: 4px;
    margin-bottom: 4px;
    display: block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Helper to hide elements (Used for Ultra users to hide upgrade button) */
.hidden-el {
    display: none !important;
}

/* =========================================
   2. HEADER UPGRADE PILL BUTTON
   ========================================= */
.header-pill-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Green Default */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-left: auto; /* Pushes it to the right if in flex container */
}

.header-pill-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Premium Mode (Blue - "Get Ultra") */
.header-pill-btn.premium-mode {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

/* =========================================
   3. TOAST NOTIFICATIONS (Auth.js Support)
   ========================================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ask-ai-toast {
    background: #1

    /* =================================================================
   🛑 FIX: FORCE VISIBLE TEXT IN SUB-MODALS (Light Mode)
   ================================================================= */

/* 1. Force the Modal Background to White */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
}

/* 2. Force Headers (Theme, Wallpaper, etc.) to Black */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal-header h3,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal-header h3 {
    color: #000000 !important;
}

/* 3. Force the Close 'X' Button to Dark Grey */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal-header button,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal-header button {
    color: #555555 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* 4. Force the Item Labels (The text under the circles/previews) to Black */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-list-label {
    color: #1c1c1c !important;
    font-weight: 600 !important; /* Make it slightly bolder for readability */
    text-shadow: none !important;
}

/* 5. Add a hover effect so you can see which item you are picking */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-list-item:hover {
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
}

/* =========================================
   HORIZONTAL SCROLL FIX FOR THEME SELECTION
   ========================================= */

/* 1. Override the Grid layout specifically for the Theme List */
#theme-modal-list {
    display: flex !important;           /* Switch to Flexbox */
    flex-direction: row !important;     /* Arrange items in a row */
    flex-wrap: nowrap !important;       /* CRITICAL: Prevent wrapping to new lines */
    overflow-x: auto !important;        /* Enable horizontal scrolling */
    overflow-y: hidden !important;      /* Disable vertical scrolling */
    gap: 16px !important;               /* Space between cards */
    padding: 10px 20px !important;      /* Breathing room on sides */
    width: 100% !important;
    align-items: flex-start !important; /* Align items to the top */
    
    /* Smooth Physics (iOS style) */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory;      /* Snap cards to center */
    
    /* Hide Scrollbar */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/Edge */
}

/* Hide Scrollbar for Chrome/Safari */
#theme-modal-list::-webkit-scrollbar {
    display: none;
}

/* 2. Fix the individual Theme Cards inside that list */
#theme-modal-list .wallpaper-list-item {
    flex: 0 0 auto !important;          /* Don't grow, don't shrink, auto basis */
    width: 110px !important;            /* Fixed width for uniformity */
    scroll-snap-align: center;          /* Snap to center of screen */
    margin: 0 !important;               /* Remove conflicting margins */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3. Adjust the Preview Box inside the cards */
#theme-modal-list .theme-preview-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;     /* Keep them square */
    margin-bottom: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Nice shadow depth */
}

/* 4. Active State Polish */
#theme-modal-list .wallpaper-list-item.selected .theme-preview-box {
    box-shadow: 0 0 0 3px var(--theme-primary, #4a90e2), 0 8px 20px rgba(0,0,0,0.4);
    transform: scale(1.05);             /* Slight pop effect */
    transition: all 0.2s ease;
}




/* Container for actions below/beside the message */
.ai-action-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns to right of bubble */
    margin-top: 4px;
    padding: 0 5px;
    width: 100%;
}

/* The Report Button itself */
.flag-btn {
    background: transparent;
    border: none;
    color: #888; /* Visible Grey */
    font-size: 12px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: all 0.2s;
}

.flag-btn:hover {
    opacity: 1;
    color: #ff4444; /* Red on hover */
    background: rgba(255, 0, 0, 0.1);
    border-radius: 4px;
}

/* Text label next to icon */
.flag-text {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

/* === FOLDER MANAGER MODAL (Mirrors Prompt Library) === */
#folder-manager-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px); opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#folder-manager-overlay.active { opacity: 1; pointer-events: auto; }

.folder-modal {
    width: 90%; max-width: 900px; height: 85vh;
    background: #121212; border: 1px solid #333;
    border-radius: 16px; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease;
}
#folder-manager-overlay.active .folder-modal { transform: scale(1); }

/* Header */
.folder-header {
    padding: 20px; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    background: #1a1a1a;
}
.folder-header h2 { margin: 0; font-size: 1.2rem; color: #fff; display: flex; gap: 10px; align-items: center; }

/* Body Layout */
.folder-body { display: flex; flex: 1; overflow: hidden; }

/* Left Sidebar (Folder List) */
.folder-sidebar {
    width: 240px; background: #0f0f0f; border-right: 1px solid #333;
    padding: 15px; display: flex; flex-direction: column; gap: 5px;
    overflow-y: auto;
}

.folder-btn {
    background: transparent; border: none; color: #888;
    padding: 12px 15px; text-align: left; cursor: pointer;
    border-radius: 8px; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s;
}
.folder-btn:hover { background: rgba(255,255,255,0.05); color: #ccc; }
.folder-btn.active { background: #252525; color: var(--theme-primary, #4a90e2); border-left: 3px solid var(--theme-primary, #4a90e2); }

.folder-count { font-size: 0.75em; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 10px; }

/* Right Content (Chat Grid) */
.folder-content-area {
    flex: 1; padding: 30px; overflow-y: auto; background: #121212;
}
.folder-chats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.folder-chat-card {
    background: #1e1e1e; border: 1px solid #333; border-radius: 12px;
    padding: 15px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.folder-chat-card:hover {
    border-color: var(--theme-primary, #4a90e2); transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.chat-card-title { font-weight: 600; color: #eee; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card-date { font-size: 0.8em; color: #666; }

/* Context Menu for Moving Chats */
.chat-move-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.5); border: none; color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    cursor: pointer; opacity: 0; transition: opacity 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.folder-chat-card:hover .chat-move-btn { opacity: 1; }

/* Add Button */
#add-folder-btn {
    margin-top: auto; padding: 12px; background: var(--theme-primary, #4a90e2);
    color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
#add-folder-btn:hover { filter: brightness(1.1); }

/* === SETTINGS TABS COMPACT FIX === */

/* 1. Make the container scrollable horizontally (swipeable) */
.settings-tabs {
    display: flex;
    flex-wrap: nowrap !important; /* Force single line */
    overflow-x: auto !important;  /* Allow scrolling if too wide */
    gap: 5px !important;          /* Reduce gap between buttons */
    padding: 0 10px !important;   /* Reduce side padding */
    
    /* Hide scrollbar for cleaner look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.settings-tabs::-webkit-scrollbar {
    display: none;
}

/* 2. Make the buttons smaller and tighter */
.tab-btn {
    padding: 12px 10px !important; /* Reduce padding inside button */
    font-size: 0.9rem !important;  /* Slightly smaller text */
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0; /* Prevent buttons from squishing too much */
}

/* 3. Optional: Rename "Knowledge Base" to "Library" in HTML if preferred */
/* If you can't change the HTML, this CSS trick visually renames it */
/* button[data-tab="knowledge-base"] { font-size: 0 !important; }
button[data-tab="knowledge-base"]::after { content: "Library"; font-size: 0.9rem; }
*/

/* Highlights Audio files in Orange */
.file-preview-item .fa-file-audio {
    color: #ff9f43; 
}

/* Highlights PDFs in Red */
.file-preview-item .fa-file-pdf {
    color: #ff5c5c;
}

/* === PODCAST MODE OVERLAY (FINAL FIX) === */
#podcast-overlay {
    position: fixed;
    bottom: -250px; /* Start hidden */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 450px;
    
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 20px 25px;
    
    display: flex;
    align-items: center;
    gap: 20px;
    
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    
    transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Slide Up when Active */
#podcast-overlay.active {
    bottom: 30px !important;
}

/* Visualizer Container */
.podcast-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    width: 50px;
    flex-shrink: 0;
}

/* The Bars */
.podcast-bar {
    width: 5px;
    height: 10%; /* Default low height */
    background: #fff;
    border-radius: 99px;
    transition: height 0.2s ease;
}

/* ANIMATION: Only runs when 'playing' class is present */
#podcast-overlay.playing .podcast-bar {
    animation: sound-wave 0.5s ease-in-out infinite alternate;
}

/* Color & Stagger delays */
.podcast-bar:nth-child(1) { background: #4a90e2; animation-delay: 0.0s; }
.podcast-bar:nth-child(2) { background: #9013fe; animation-delay: 0.2s; }
.podcast-bar:nth-child(3) { background: #ff0055; animation-delay: 0.4s; }
.podcast-bar:nth-child(4) { background: #9013fe; animation-delay: 0.1s; }
.podcast-bar:nth-child(5) { background: #4a90e2; animation-delay: 0.3s; }

@keyframes sound-wave {
    0% { height: 10%; }
    100% { height: 100%; }
}

/* Info Section */
.podcast-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.podcast-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podcast-status {
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: 600;
}

/* Controls */
.podcast-controls {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.pod-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
}

.pod-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }
.pod-btn.close { background: rgba(255, 59, 59, 0.2); border-color: rgba(255, 59, 59, 0.3); color: #ff5c5c; }
.pod-btn.close:hover { background: rgba(255, 59, 59, 0.4); }


/* =========================================================
   ANDROID COMPACT LAYOUT FIXES
   ========================================================= */

/* 1. TIGHTEN HEADER ICONS (Make them fit) */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important; /* Reduce gap between icons (was likely 10px) */
    padding-right: 0 !important; /* Remove right padding to save space */
}

.header-icon-btn {
    padding: 6px !important; /* Smaller touch target padding */
    width: 34px !important;  /* Force smaller width */
    height: 34px !important;
    min-width: 0 !important; /* Allow shrinking */
    justify-content: center !important;
}

/* Optional: Make icons slightly smaller on mobile to ensure fit */
.header-icon-btn i {
    font-size: 0.9rem !important; 
}


/* 2. FIX SETTINGS MODAL SCROLLING & CUTOFF */
/* This forces the modal to stay within the screen and scroll internally */

#universal-settings-modal {
    display: flex !important;
    flex-direction: column !important;
    /* Constrain height so it doesn't go off-screen */
    max-height: 85vh !important; 
    height: 85vh !important; 
    overflow: hidden !important; /* Prevent the modal box itself from scrolling */
}

/* Force the header and tabs to stay visible at the top */
.settings-header, .settings-tabs {
    flex-shrink: 0 !important; 
}

/* Make the content area fill the rest and SCROLL */
.settings-content-container {
    flex: 1 !important; /* Takes up all remaining space */
    overflow-y: auto !important; /* Enables scrolling for this part only */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for Android */
    padding-bottom: 50px !important; /* Add space at bottom so text isn't cut off */
}

/* Fix Heading/Label Wrapping */
.settings-section h3, 
.settings-section label,
.section-label {
    white-space: normal !important; /* Allow text to wrap to next line */
    overflow: visible !important;
    line-height: 1.4 !important;
}

/* =========================================================
   PROMPT LIBRARY MOBILE FIXES
   ========================================================= */

/* 1. Fix the Main Modal Container */
.prompt-modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important; /* Cap the height */
    height: 85vh !important;
    overflow: hidden !important; /* Stop the whole box from scrolling */
}

/* 2. Fix the Header (Stop overlap) */
.prompt-header {
    flex-shrink: 0 !important; /* Keep header strictly at the top */
    min-height: 60px; /* Ensure minimum space */
}

/* 3. Fix the Body Area (Allow scrolling) */
.prompt-body {
    flex: 1 !important; /* Fill remaining space */
    display: flex !important;
    flex-direction: row !important; /* Default to side-by-side */
    overflow: hidden !important; /* Internal parts scroll, not this wrapper */
}

/* 4. Fix Mobile Layout (Stacking) */
@media (max-width: 768px) {
    .prompt-body {
        flex-direction: column !important; /* Stack sidebar on top of grid */
    }

    /* Fix Sidebar (Categories) */
    .prompt-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important; /* Limit height */
        min-height: 60px;
        flex-direction: row !important; /* Horizontal scroll for buttons */
        overflow-x: auto !important; /* Scroll sideways */
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color, #333) !important;
        padding: 10px !important;
        flex-shrink: 0 !important; /* Don't shrink */
        white-space: nowrap !important;
    }
    
    /* Fix the Buttons inside Sidebar */
    .category-btn {
        display: inline-flex !important;
        width: auto !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Fix the Grid Area (The main scrolling part) */
    .prompt-grid-container {
        flex: 1 !important; /* Fill the rest of the height */
        overflow-y: auto !important; /* Enable vertical scroll */
        padding: 15px !important;
        padding-bottom: 50px !important; /* Space for bottom navigation/safe area */
    }
}

/* 5. Fix Heading Overlap inside Cards */
.prompt-card h4 {
    white-space: normal !important; /* Allow wrapping */
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    height: auto !important;
}

.prompt-card p {
    white-space: normal !important;
}


/* =========================================
       MOBILE SCROLL FIX (PROMPT LIBRARY & TABS)
       ========================================= */
    @media (max-width: 768px) {
        /* 1. Target the container of the buttons */
        /* We target settings-tabs AND likely class names for the prompt library */
        .settings-tabs,
        .prompt-categories, 
        .library-tabs,
        .prompt-filter-container,
        /* Fallback: Select any flex container inside a modal header that contains buttons */
        [id*="prompt"] header + div, 
        [id*="prompt"] nav {
            display: flex !important;
            flex-wrap: nowrap !important;       /* Prevent wrapping to next line */
            overflow-x: auto !important;        /* Enable horizontal scrolling */
            justify-content: flex-start !important; /* Align to start */
            gap: 12px !important;               /* Space between buttons */
            padding: 5px 2px !important;        /* Padding for touch area */
            width: 100% !important;
            -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
            
            /* Hide Scrollbar */
            scrollbar-width: none; 
            -ms-overflow-style: none;
        }
        
        /* Hide scrollbar for Chrome/Safari */
        .settings-tabs::-webkit-scrollbar,
        .prompt-categories::-webkit-scrollbar {
            display: none;
        }

        /* 2. CRITICAL: Stop the buttons from squishing */
        .settings-tabs button,
        .settings-tabs .tab-btn,
        .prompt-categories button,
        .library-tabs button,
        [id*="prompt"] header + div button,
        [id*="prompt"] nav button {
            flex: 0 0 auto !important;      /* Don't grow, don't shrink, auto width */
            flex-shrink: 0 !important;      /* Force them to keep their width */
            white-space: nowrap !important; /* Prevent text wrapping inside button */
            width: auto !important;
            min-width: auto !important;
            max-width: none !important;
        }
    }

    /* Hide the Share button in the header ONLY on mobile */
@media (max-width: 768px) {
    /* Option 1: If your button has a specific ID (e.g., #header-share-btn), use that */
    #header-share-btn {
        display: none !important;
    }

    /* Option 2: Target by the icon class (Works in modern browsers) */
    .controls-header button:has(.fa-share-nodes),
    .sidebar-header button:has(.fa-share-nodes) {
        display: none !important;
    }
}

/* Add this block to your <style> section in app.html or in your style.css */

@media (max-width: 600px) {
    /* 1. Force the Popover container to behave predictably */
    #model-popover {
        /* CRITICAL: Set a maximum height to keep it on screen */
        max-height: 80vh !important; /* Cap height to 80% of viewport height */
        
        /* Ensure the element can move up if needed when near the bottom */
        transform: translateY(0) !important;
    }
}

/* 2. Apply scrolling to the content grid inside the popover */
/* This ensures the list itself scrolls vertically when the popover is too short */
#model-popover .popover-content {
    /* Set a fluid height that respects the container's max-height */
    height: 100% !important; 
    
    /* CRITICAL: Enable vertical scrolling */
    overflow-y: auto !important; 
    
    /* Ensure scroll is smooth on mobile */
    -webkit-overflow-scrolling: touch;
    
    /* Optional: Hide the scrollbar if you prefer a cleaner look */
    scrollbar-width: none; 
}
#model-popover .popover-content::-webkit-scrollbar {
    display: none;
}

// Add this inside applyPremiumInputStyles or your main CSS file
const styleUpgrade = document.createElement('style');
styleUpgrade.innerHTML = `
    /* --- 1. UPGRADED MINI-MENU (The + Button Menu) --- */
    .action-button-grid {
        /* Deep Glass Effect */
        background: rgba(18, 18, 24, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        
        /* Premium Border */
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.6), 
                    inset 0 1px 0 rgba(255,255,255,0.1) !important;
        border-radius: 24px !important;
    }

    .action-btn {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid transparent !important;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .action-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    /* --- 2. UPGRADED CUSTOM MODAL (Replaces the white prompt) --- */
    .custom-modal {
        background: #151515 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.8) !important;
        font-family: 'Inter', sans-serif !important;
    }

    #modal-title {
        font-size: 1.4rem !important;
        background: linear-gradient(135deg, #fff 0%, #aaa 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .modal-input {
        background: #0a0a0a !important;
        border: 1px solid #333 !important;
        color: #fff !important;
        border-radius: 12px !important;
        padding: 16px !important;
        font-size: 1rem !important;
        transition: 0.3s ease !important;
    }

    .modal-input:focus {
        border-color: #4a90e2 !important;
        box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.15) !important;
        background: #000 !important;
    }
    
    .modal-btn.primary {
        background: linear-gradient(135deg, #4a90e2, #357abd) !important;
        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
        transition: transform 0.2s !important;
    }
    
    .modal-btn.primary:active {
        transform: scale(0.96) !important;
    }
`;
document.head.appendChild(styleUpgrade);


/* GPT-5.2 Specific Button Style */
.tier-gpt5\.2 { /* Escaping the dot is important in CSS */
    background: linear-gradient(135deg, #10a37f 0%, #0d8a6a 100%) !important; /* OpenAI Green vibe */
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 15px rgba(16, 163, 127, 0.4) !important;
}

/* Lock Icon on Wallpapers */
.wallpaper-list-item .lock-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.6);
    color: #ffd700; /* Gold */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(2px);
    z-index: 5;
}

.wallpaper-list-item.premium-locked .lock-overlay { color: #3b82f6; } /* Blue for Premium */
.wallpaper-list-item.ultra-locked .lock-overlay { color: #ffd700; } /* Gold for Ultra */

/* --- Limit Reached Modal Styles --- */

#limit-reached-overlay {
    /* Use the same overlay styles as your other modals */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#limit-reached-modal {
    background: var(--bg-primary, #1c1c1c); /* Dark Background */
    border: 1px solid var(--border-color, #444);
    border-radius: 16px;
    width: 90%;
    max-width: 380px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: var(--text-primary, #fff);
}

#limit-reached-modal h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    font-weight: 700;
}

#limit-reached-modal p {
    color: var(--text-secondary, #ccc);
    font-size: 0.95rem;
    margin: 0 0 25px 0; /* Space before buttons */
}

/* Button Container - Key to layout */
#limit-reached-buttons {
    display: flex;
    flex-direction: column; /* Stack vertically for better mobile tap target */
    gap: 12px;
}

/* Primary Action: Sign Up */
#limit-confirm-yes {
    /* Inherits styling from .action-btn, but we force the primary look */
    background: var(--theme-primary, #4a90e2) !important;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-primary, #4a90e2);
}

#limit-confirm-yes:hover {
    background: var(--theme-hover, #357ab8) !important;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb, 74, 144, 226), 0.4);
    transform: translateY(-1px);
}

/* Secondary Action: Not Now */
#limit-confirm-no {
    /* Override inline style and make it a subtle secondary button */
    background: transparent !important;
    color: var(--text-secondary, #aaa) !important; 
    border: 1px solid var(--border-color, #444) !important;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#limit-confirm-no:hover {
    background: var(--bg-secondary, #2a2a2a) !important;
    color: var(--text-primary, #fff) !important;
    border-color: var(--theme-primary, #4a90e2) !important;
}

/* Small mobile screens: put them side-by-side */
@media (min-width: 350px) {
    #limit-reached-buttons {
        flex-direction: row; /* Buttons side-by-side */
        justify-content: space-between;
    }
    #limit-confirm-yes, #limit-confirm-no {
        flex: 1; /* Make them equal width */
    }
}

/* =================================================================
   🚀 ULTIMATE REPAIR: DAILY LIMIT MODAL BUTTONS
   ================================================================= */

/* 1. Force the container to be a horizontal flexbox */
body #limit-reached-overlay #limit-reached-modal #limit-reached-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 30px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 2. Strip away the circular shape and fixed dimensions */
body #limit-reached-overlay #limit-reached-modal #limit-reached-buttons .action-btn,
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes,
body #limit-reached-overlay #limit-reached-modal #limit-confirm-no {
    /* RESET DIMENSIONS */
    width: auto !important;
    height: auto !important;
    min-width: 140px !important; /* Wide enough for text */
    min-height: unset !important; /* Remove the 48px global min-height */
    padding: 12px 20px !important;
    
    /* FIX SHAPE */
    border-radius: 50px !important; /* Forces Pill Shape */
    
    /* FIX TEXT */
    white-space: nowrap !important; /* CRITICAL: Prevents stacking text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important; /* Removes link underline */
    line-height: 1 !important;
}

/* 3. Cyan Gradient for "SIGN UP FREE" */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes {
    background: linear-gradient(135deg, #00BFFF, #009ACD) !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.4) !important;
}

/* 4. Glass Effect for "WAIT 24 HOURS" */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-no {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Hover effects */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.6) !important;
}

body #limit-reached-overlay #limit-reached-modal #limit-confirm-no:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* RTL Support - Text Only Alignment */
body.rtl-text-only .message, 
body.rtl-text-only #welcome-message-content,
body.rtl-text-only #message-input,
body.rtl-text-only .history-item-details,
body.rtl-text-only .section-label,
body.rtl-text-only .section-desc {
    text-align: right !important;
    direction: rtl !important;
}

/* Maintain the icon positions in the sidebar */
body.rtl-text-only .history-item {
    flex-direction: row; /* Forces it not to flip */
}

/* Keep layout fixed, but align text for Urdu, Arabic, etc. */
.rtl-text-only #message-input,
.rtl-text-only .message-content,
.rtl-text-only .welcome-title,
.rtl-text-only .welcome-subtitle {
    text-align: right !important;
    direction: rtl !important;
}

/* Ensure the typing container doesn't move buttons to the wrong side */
.rtl-text-only .input-container {
    direction: ltr !important; 
}

/* === UNIVERSAL MODEL SELECTOR (Body Injection Fix) === */

/* The Full Screen Overlay */
#universal-model-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 999999; /* Highest priority */
    display: flex;
    justify-content: center; /* Center Horizontal */
    align-items: center;     /* Center Vertical (Desktop Default) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#universal-model-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Card/Sheet Itself */
.universal-sheet {
    background: #1a1a1a;
    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    border: 1px solid #333;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

#universal-model-overlay.active .universal-sheet {
    transform: scale(1);
}

/* Mobile Bottom Sheet Override */
@media (max-width: 768px) {
    #universal-model-overlay {
        align-items: flex-end; /* Push to bottom */
    }
    .universal-sheet {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0; /* Round top only */
        border-bottom: none;
        transform: translateY(100%); /* Start off-screen down */
        margin-bottom: 0;
    }
    #universal-model-overlay.active .universal-sheet {
        transform: translateY(0); /* Slide up */
    }
}

/* Header & Content Styling */
.us-header {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
}
.us-header h3 { margin: 0; color: #fff; font-size: 1.1rem; }
.us-close-btn { background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; }

.us-content {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.us-tier-label {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; 
    margin-bottom: 10px; color: #666; display: block;
}
.us-tier-label.free { color: #10b981; }
.us-tier-label.premium { color: #3b82f6; }
.us-tier-label.ultra { color: #ff4444; }

.us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .us-grid { grid-template-columns: 1fr; } }

.us-option {
    background: #252525; border: 1px solid #333; color: #ccc;
    padding: 12px; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; text-align: left;
    transition: 0.2s;
}
.us-option:hover { background: #333; transform: translateY(-2px); }
.us-option.active { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }
.us-option.premium.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.us-option.ultra.active { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); }

.us-footer { padding: 20px; background: #151515; border-top: 1px solid #333; }
.us-persona-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.us-persona-btn { 
    background: #252525; border: 1px solid #333; color: #aaa; 
    padding: 6px 14px; border-radius: 20px; white-space: nowrap; cursor: pointer; 
}
.us-persona-btn.active { background: #4a90e2; color: #fff; border-color: #4a90e2; }


/* Container must have a solid base color to fade into */
#live-wallpaper-container {
    background-color: #000; /* Dark mode default */
    transition: background-color 0.5s ease;
}

.light-mode #live-wallpaper-container {
    background-color: #f0f0f0; /* Light mode default */
}

/* Cinematic Fade Keyframes */
@keyframes cinematicLoop {
    0% { opacity: 0; }
    5% { opacity: 1; }   /* Quickly fade in */
    95% { opacity: 1; }  /* Stay visible for most of the loop */
    100% { opacity: 0; } /* Fade out right before the jump */
}

/* Targeting your specific video IDs from wallpapers.js */
[id^="background-video-player"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: opacity;
    /* Animation duration is handled dynamically in JS below */
    animation: cinematicLoop 10s infinite ease-in-out;
}

html.light-mode #speech-lang-badge-display {
    color: #000 !important;
    background: rgba(0,0,0,0.1) !important;
}

/* Trial Highlight Badge */
.trial-badge-floating {
    background: var(--accent-green);
    color: #000;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* Container for the buttons */
#limit-buttons-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

/* Shared Button Styles */
.limit-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 50px; /* Pill shape */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit; /* Inherit font from body */
    box-sizing: border-box; /* Ensures padding doesn't widen element */
}

/* SPECIFIC FIX FOR LINKS ("<a>" tags) */
a.limit-btn {
    text-decoration: none !important; /* Removes purple underline */
    line-height: normal; /* Fixes vertical alignment */
}

/* Secondary Style (White Box like in your screenshot) */
.limit-btn-secondary {
    background-color: #ffffff;
    color: #000000 !important; /* Force black text */
    border: 1px solid #e0e0e0;
}

.limit-btn-secondary:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* Optional: Icon wrapper style if you need it */
.modal-icon-wrapper {
    margin-bottom: 15px;
    font-size: 2rem;
    color: #ffffff;
}