/* Grok.ai inspired dark theme design */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Base colors */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --bg-sidebar: #0f0f0f;
    --bg-input: #1a1a1a;
    --bg-surface: rgba(255, 255, 255, 0.02);
    --bg-overlay: rgba(0, 0, 0, 0.4);

    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --text-muted: #6b6b6b;
    --text-accent: #00d9ff;

    /* Accent colors */
    --accent-primary: #00d9ff;
    --accent-secondary: rgba(0, 217, 255, 0.1);
    --accent-tertiary: rgba(0, 217, 255, 0.05);

    /* Border colors */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-active: #00d9ff;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Theme extras (overridden per data-theme) */
    --header-bar-bg: rgba(10, 10, 10, 0.85);
    --mobile-overlay-bg: rgba(0, 0, 0, 0.7);
    --logo-ai-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
    --banner-text: rgba(255, 255, 255, 0.95);
    --btn-primary-fg: #00151a;
    --topbar-bg: rgba(0, 0, 0, 0.12);
    --modal-scrim: rgba(0, 0, 0, 0.6);
    --panel-shade: rgba(0, 0, 0, 0.15);
    --panel-shade-soft: rgba(0, 0, 0, 0.1);
    --editor-gutter-bg: rgba(0, 0, 0, 0.2);
    --glass-blur: blur(8px);
    --glass-blur-strong: blur(24px);
    --backdrop-heavy: rgba(0, 0, 0, 0.82);
    /* Sidebar: compact desktop width */
    --sidebar-width: 248px;
    color-scheme: dark;
}

/* —— Light (claro) —— */
[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ececf0;
    --bg-sidebar: #ebebed;
    --bg-input: #ffffff;
    --bg-surface: rgba(0, 0, 0, 0.05);
    --bg-overlay: rgba(255, 255, 255, 0.72);

    --text-primary: #141416;
    --text-secondary: #3a3a3e;
    --text-muted: #5c5c62;
    --text-accent: #0088a3;

    --accent-primary: #0097b3;
    --accent-secondary: rgba(0, 151, 179, 0.14);
    --accent-tertiary: rgba(0, 151, 179, 0.07);

    --border-color: rgba(0, 0, 0, 0.14);
    --border-hover: rgba(0, 0, 0, 0.24);
    --border-active: #0097b3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);

    --header-bar-bg: rgba(255, 255, 255, 0.82);
    --mobile-overlay-bg: rgba(20, 20, 30, 0.35);
    --logo-ai-shadow: 0 1px 2px rgba(0, 80, 100, 0.15);
    --banner-text: #1d1d1f;
    --btn-primary-fg: #00151a;
    --topbar-bg: rgba(255, 255, 255, 0.78);
    --modal-scrim: rgba(15, 23, 42, 0.45);
    --panel-shade: rgba(0, 0, 0, 0.04);
    --panel-shade-soft: rgba(0, 0, 0, 0.03);
    --editor-gutter-bg: rgba(0, 0, 0, 0.04);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(28px);
    --backdrop-heavy: rgba(15, 23, 42, 0.52);
}

/* —— System: light —— */
@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        color-scheme: light;
        --bg-primary: #f5f5f7;
        --bg-secondary: #ffffff;
        --bg-tertiary: #ececf0;
        --bg-sidebar: #ebebed;
        --bg-input: #ffffff;
        --bg-surface: rgba(0, 0, 0, 0.05);
        --bg-overlay: rgba(255, 255, 255, 0.72);
        --text-primary: #141416;
        --text-secondary: #3a3a3e;
        --text-muted: #5c5c62;
        --text-accent: #0088a3;
        --accent-primary: #0097b3;
        --accent-secondary: rgba(0, 151, 179, 0.14);
        --accent-tertiary: rgba(0, 151, 179, 0.07);
        --border-color: rgba(0, 0, 0, 0.14);
        --border-hover: rgba(0, 0, 0, 0.24);
        --border-active: #0097b3;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);
        --header-bar-bg: rgba(255, 255, 255, 0.82);
        --mobile-overlay-bg: rgba(20, 20, 30, 0.35);
        --logo-ai-shadow: 0 1px 2px rgba(0, 80, 100, 0.15);
        --banner-text: #1d1d1f;
        --btn-primary-fg: #00151a;
        --topbar-bg: rgba(255, 255, 255, 0.78);
        --modal-scrim: rgba(15, 23, 42, 0.45);
        --panel-shade: rgba(0, 0, 0, 0.04);
        --panel-shade-soft: rgba(0, 0, 0, 0.03);
        --editor-gutter-bg: rgba(0, 0, 0, 0.04);
        --glass-blur: blur(12px);
        --glass-blur-strong: blur(28px);
        --backdrop-heavy: rgba(15, 23, 42, 0.52);
    }
}

/* —— System: dark (same as default :root) —— */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        color-scheme: dark;
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --bg-tertiary: #141414;
        --bg-sidebar: #0f0f0f;
        --bg-input: #1a1a1a;
        --bg-surface: rgba(255, 255, 255, 0.02);
        --bg-overlay: rgba(0, 0, 0, 0.4);
        --text-primary: #ffffff;
        --text-secondary: #b8b8b8;
        --text-muted: #6b6b6b;
        --text-accent: #00d9ff;
        --accent-secondary: rgba(0, 217, 255, 0.1);
        --accent-tertiary: rgba(0, 217, 255, 0.05);
        --border-color: rgba(255, 255, 255, 0.08);
        --border-hover: rgba(255, 255, 255, 0.15);
        --border-active: #00d9ff;
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
        --header-bar-bg: rgba(10, 10, 10, 0.85);
        --mobile-overlay-bg: rgba(0, 0, 0, 0.7);
        --logo-ai-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
        --banner-text: rgba(255, 255, 255, 0.95);
        --btn-primary-fg: #00151a;
        --topbar-bg: rgba(0, 0, 0, 0.12);
        --modal-scrim: rgba(0, 0, 0, 0.6);
        --panel-shade: rgba(0, 0, 0, 0.15);
        --panel-shade-soft: rgba(0, 0, 0, 0.1);
        --editor-gutter-bg: rgba(0, 0, 0, 0.2);
        --glass-blur: blur(8px);
        --glass-blur-strong: blur(24px);
        --backdrop-heavy: rgba(0, 0, 0, 0.82);
    }
}

/* —— Liquid Glass (Apple-like frosted UI; web uses backdrop-filter, not proprietary libs) —— */
[data-theme="glass"] {
    color-scheme: light;
    --accent-primary: #0078a8;
    --bg-primary: transparent;
    --bg-secondary: rgba(255, 255, 255, 0.62);
    --bg-tertiary: rgba(255, 255, 255, 0.52);
    --bg-sidebar: rgba(255, 255, 255, 0.44);
    --bg-input: rgba(255, 255, 255, 0.78);
    --bg-surface: rgba(255, 255, 255, 0.4);
    --bg-overlay: rgba(255, 255, 255, 0.55);

    --text-primary: #0f1218;
    --text-secondary: #252b34;
    --text-muted: #4a5563;
    --text-accent: #006994;

    --accent-secondary: rgba(0, 105, 148, 0.16);
    --accent-tertiary: rgba(0, 105, 148, 0.08);

    --border-color: rgba(20, 40, 65, 0.16);
    --border-hover: rgba(20, 40, 65, 0.28);
    --border-active: #0080b0;

    --shadow-sm: 0 2px 10px rgba(15, 35, 55, 0.1);
    --shadow-md: 0 8px 28px rgba(15, 35, 55, 0.14);
    --shadow-lg: 0 14px 44px rgba(15, 35, 55, 0.18);
    --shadow-xl: 0 22px 64px rgba(15, 35, 55, 0.22);

    --header-bar-bg: rgba(255, 255, 255, 0.44);
    --mobile-overlay-bg: rgba(20, 35, 55, 0.42);
    --logo-ai-shadow: 0 2px 12px rgba(0, 100, 140, 0.28);
    --banner-text: #0f1218;
    --btn-primary-fg: #ffffff;
    --topbar-bg: rgba(255, 255, 255, 0.4);
    --modal-scrim: rgba(12, 24, 42, 0.48);
    --panel-shade: rgba(255, 255, 255, 0.28);
    --panel-shade-soft: rgba(255, 255, 255, 0.2);
    --editor-gutter-bg: rgba(255, 255, 255, 0.28);
    --glass-blur: blur(20px);
    --glass-blur-strong: blur(48px);
    --backdrop-heavy: rgba(10, 22, 40, 0.52);
}

/* Glass: gradient on html so subpages (jobs, connectors) with their own body {} still match */
[data-theme="glass"] html {
    min-height: 100%;
    background:
        radial-gradient(ellipse 90% 70% at 15% -10%, rgba(255, 255, 255, 0.75) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 95% 15%, rgba(120, 200, 255, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 10% 90%, rgba(180, 210, 240, 0.45) 0%, transparent 55%),
        linear-gradient(168deg, #a8bdd4 0%, #dce4ee 38%, #b4c6d8 100%);
    background-attachment: fixed;
}

[data-theme="glass"] body {
    background: transparent;
}

[data-theme="glass"] .sidebar {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(48px) saturate(190%) brightness(1.02);
    -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(1.02);
    border-right-color: var(--border-color);
}

[data-theme="glass"] .header {
    backdrop-filter: blur(48px) saturate(180%);
    -webkit-backdrop-filter: blur(48px) saturate(180%);
    border-bottom-color: var(--border-color);
}

[data-theme="glass"] .input-container {
    border-color: var(--border-color);
    box-shadow: 0 4px 24px rgba(15, 35, 55, 0.12);
}

[data-theme="glass"] .settings-content,
[data-theme="glass"] .confirm-modal-box,
[data-theme="glass"] .onboarding-content {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 48px rgba(15, 35, 55, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-theme="glass"] .quick-actions-panel,
[data-theme="glass"] .mcps-header-panel {
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border-color: var(--border-color);
}

/* Chat empty / stars: tune for light & glass */
[data-theme="light"] .chat-empty-bg::before,
[data-theme="glass"] .chat-empty-bg::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(0, 151, 179, 0.08), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 120, 160, 0.05), transparent 45%),
        radial-gradient(ellipse 60% 40% at 20% 70%, rgba(0, 120, 160, 0.05), transparent 45%);
}

[data-theme="light"] .chat-empty-bg .star,
[data-theme="glass"] .chat-empty-bg .star {
    background: rgba(30, 40, 55, 0.35);
    opacity: 0.65;
}

[data-theme="light"] .chat-empty-bg .star.star-cyan,
[data-theme="glass"] .chat-empty-bg .star.star-cyan {
    background: rgba(0, 151, 179, 0.55);
    box-shadow: 0 0 8px rgba(0, 151, 179, 0.25);
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] .chat-empty-bg::before {
        background:
            radial-gradient(ellipse 80% 50% at 50% 30%, rgba(0, 151, 179, 0.08), transparent 50%),
            radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 120, 160, 0.05), transparent 45%),
            radial-gradient(ellipse 60% 40% at 20% 70%, rgba(0, 120, 160, 0.05), transparent 45%);
    }
    [data-theme="system"] .chat-empty-bg .star {
        background: rgba(30, 40, 55, 0.35);
        opacity: 0.65;
    }
    [data-theme="system"] .chat-empty-bg .star.star-cyan {
        background: rgba(0, 151, 179, 0.55);
        box-shadow: 0 0 8px rgba(0, 151, 179, 0.25);
    }
}

/* Login / auth screen follows selected theme */
[data-theme="light"] .auth-page {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-tertiary), transparent),
        radial-gradient(ellipse 60% 40% at 100% 50%, var(--accent-tertiary), transparent),
        radial-gradient(ellipse 60% 40% at 0% 50%, var(--accent-tertiary), transparent),
        linear-gradient(180deg, #eef2f7 0%, #e4e9f0 50%, #f5f5f7 100%);
}
[data-theme="light"] .auth-page::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 151, 179, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 120, 160, 0.05) 0%, transparent 50%);
}
[data-theme="light"] .auth-page::after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    opacity: 0.35;
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] .auth-page {
        background:
            radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-tertiary), transparent),
            radial-gradient(ellipse 60% 40% at 100% 50%, var(--accent-tertiary), transparent),
            radial-gradient(ellipse 60% 40% at 0% 50%, var(--accent-tertiary), transparent),
            linear-gradient(180deg, #eef2f7 0%, #e4e9f0 50%, #f5f5f7 100%);
    }
    [data-theme="system"] .auth-page::before {
        background-image:
            radial-gradient(circle at 20% 30%, rgba(0, 151, 179, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(0, 120, 160, 0.05) 0%, transparent 50%);
    }
    [data-theme="system"] .auth-page::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
        opacity: 0.35;
    }
}

[data-theme="glass"] .auth-page {
    background:
        radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
        linear-gradient(168deg, #a8bdd4 0%, #dce4ee 45%, #b4c6d8 100%);
}
[data-theme="glass"] .auth-page::after {
    opacity: 0.25;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    line-height: 1.6;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Auth page (login / landing) */
.auth-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-tertiary), transparent),
        radial-gradient(ellipse 60% 40% at 100% 50%, var(--accent-tertiary), transparent),
        radial-gradient(ellipse 60% 40% at 0% 50%, var(--accent-tertiary), transparent),
        linear-gradient(180deg, #050508 0%, #0a0a0f 50%, #000000 100%);
}

/* Auth logo styles */
.auth-logo-container {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-xl);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.auth-logo-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
}

.auth-container:hover .auth-logo-container::before {
    transform: translateX(100%);
}

.auth-logo-container svg,
.auth-logo-container img {
    width: 48px;
    height: 48px;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
    object-fit: contain;
}

.auth-container:hover .auth-logo-container svg,
.auth-container:hover .auth-logo-container img {
    opacity: 1;
}

.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 217, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.auth-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    opacity: 0.5;
}

/* Auth Container */
.auth-container {
    max-width: 420px;
    width: 100%;
    margin: 0 var(--space-lg);
    position: relative;
    z-index: 1;
    background: var(--bg-overlay);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    box-shadow:
        0 16px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.auth-container:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

.auth-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0.6;
}

/* Auth typography */
.auth-container h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 var(--space-sm) 0;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-container .subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.2px;
}

/* Auth header and logo */
.auth-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.auth-container h1 {
    text-align: center;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.8px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

.auth-container h1.auth-logo-title {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    letter-spacing: inherit;
}
.auth-header .logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.auth-header .logo-brand {
    font-family: 'Satisfy', cursive;
    font-size: 34px;
    font-weight: 400;
    color: var(--text-primary);
}
.auth-header .logo-ai {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.45em;
    color: var(--accent-primary);
    letter-spacing: 0.1em;
    text-shadow: 0 0 24px rgba(0, 217, 255, 0.5);
}

.auth-container .subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 40px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.auth-container input {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 15px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-weight: 400;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-container input:focus {
    outline: none;
    border-color: var(--border-hover);
    background: var(--bg-surface);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.auth-container input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.auth-container button {
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--text-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.2px;
    margin-top: var(--space-sm);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.auth-container button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.auth-container button:hover:not(:disabled) {
    background: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.auth-container button:hover:not(:disabled)::before {
    opacity: 1;
}

.auth-container button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.auth-container button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.error {
    color: #ff6b6b;
    margin-bottom: 16px;
    text-align: center;
    font-size: 13px;
    padding: 12px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 107, 0.2);
    font-weight: 400;
}

/* 2FA Setup Section */
#setup2FASection input:focus {
    outline: none;
    border-color: var(--border-hover);
    background: var(--bg-surface);
}

#setup2FASection button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Header */
.header {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--header-bar-bg);
    min-height: 52px;
    isolation: isolate;
}

/* Chat (desktop): alinhar o toggle com a sidebar vs. área de conteúdo
   - Sidebar visível: mínimo recuo para o ícone encostar à junção com a barra
   - Sidebar colapsada: recuo à esquerda alinhado ao padding do .container (evita o botão colado ao canto) */
@media (min-width: 769px) {
    .main-content > .header {
        padding-left: 24px;
    }
    body:has(.sidebar:not(.sidebar-collapsed)) .main-content > .header {
        padding-left: 2px;
    }
    body:has(.sidebar:not(.sidebar-collapsed)) .main-content > .header .sidebar-menu-btn {
        margin-right: 0;
    }
}

/* Em mobile: header e toggle acima do fundo de estrelas; altura alinhada ao corte do .chat-empty-bg */
@media (max-width: 768px) {
    .header {
        z-index: 120;
    }
    .main-content {
        --chat-empty-bg-top: 56px;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: -0.4px;
    transition: all var(--transition-fast);
}

.logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

/* JoaquAIm brand text in top bar – script for name, tech-style emphasis on AI */
.logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.logo-brand {
    font-family: 'Satisfy', cursive;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}
.logo-ai {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.4em;
    color: var(--accent-primary);
    letter-spacing: 0.1em;
    padding: 0 2px;
    text-shadow: var(--logo-ai-shadow);
    vertical-align: baseline;
}
.logo:hover .logo-brand {
    color: var(--text-primary);
}
.logo:hover .logo-ai {
    color: var(--accent-primary);
    filter: brightness(1.05);
}

.logo:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.header-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Model selector wrapper: Grok highlight when a Grok model is selected */
.model-select-wrap {
    position: relative;
    border-radius: 10px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.model-select-wrap--grok {
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.2);
    border-radius: 10px;
}
.model-select-wrap--grok .model-select {
    border-color: rgba(0, 217, 255, 0.35);
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.04) 0%, var(--bg-input) 100%);
}

.model-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    height: 38px;
    padding: 0 36px 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    max-width: 260px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%238b8b8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    margin-left: 0;
}

.model-select:hover {
    border-color: var(--border-hover);
    background-color: var(--bg-tertiary);
}

.model-select:focus {
    outline: none;
    border-color: var(--border-hover);
}

/* Grok (xAI) optgroup highlight in dropdown */
.model-select optgroup.supplier-xai,
.model-select optgroup[data-supplier="xai"] {
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(0, 217, 255, 0.08);
}

/* Sidebar model section overrides */
.sidebar-model-section .model-select-wrap {
    width: 100%;
}
.sidebar-model-section .model-select {
    width: 100%;
    min-width: unset;
    max-width: unset;
    height: 34px;
    font-size: 12px;
    padding: 0 28px 0 10px;
    background-position: right 8px center;
}
.sidebar-model-section .custom-model-input {
    width: 100%;
    height: 32px;
    font-size: 12px;
}
.sidebar-model-section #restartBtn:hover {
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
}
.sidebar-model-section #restartBtn.restarting svg {
    animation: spin 0.8s linear infinite;
}

.custom-model-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-primary);
    width: 160px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.custom-model-input::placeholder {
    color: var(--text-muted);
}

.custom-model-input:focus {
    outline: none;
    border-color: var(--border-hover);
}

/* Unified header icon buttons */
.header-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.header-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.header-btn:active {
    transform: scale(0.95);
}

.sidebar-menu-btn {
    margin-right: 4px;
}

.header-new-chat-btn {
    color: var(--text-secondary);
}
.header-new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.header-new-chat-btn .header-nav-label {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}
@media (max-width: 480px) {
    .header-new-chat-btn .header-nav-label { display: none; }
}

/* Header ícones: quick-tip via data-tooltip; posição fixed + JS (evita clip por overflow em .main-content / header mobile) */
.header-quicktip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: fixed;
    top: var(--header-quicktip-top, -10000px);
    left: var(--header-quicktip-left, -10000px);
    transform: translateX(-50%);
    margin-top: 0;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 1100;
    box-shadow: var(--shadow-md);
}
.header-quicktip[data-tooltip]:hover::after,
.header-quicktip[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Tooltips nas conversas da sidebar: texto mais longo, quebra em linhas */
.history-item-actions .header-quicktip[data-tooltip]::after {
    white-space: normal;
    max-width: min(280px, 92vw);
    text-align: center;
    line-height: 1.35;
}

.header-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    flex-shrink: 0;
}

.header-btn.refreshing {
    animation: spin 0.8s linear infinite;
    pointer-events: none;
    color: var(--text-primary);
}

/* Header nav links (Workspaces, Ações rápidas, Jobs) */
.header-nav-link,
.header-jobs-link {
    text-decoration: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 36px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.header-nav-btn {
    font-family: inherit;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
}
.header-nav-link:hover,
.header-jobs-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.header-nav-link .header-nav-label,
.header-nav-link .header-jobs-label,
.header-nav-btn .header-nav-label {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}

/* Desktop: só ícones; texto no quick-tip (não expandir ao lado) */
@media (min-width: 481px) {
    .header-nav-link .header-nav-label,
    .header-nav-link .header-jobs-label,
    .header-nav-btn .header-nav-label,
    .header-new-chat-btn .header-nav-label {
        display: none !important;
    }
    .header-nav-link,
    .header-nav-btn,
    .header-new-chat-btn,
    #headerSidebarToggleInHeader.header-nav-btn {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .header-nav-label,
    .header-jobs-label { display: none; }
    .header-nav-link,
    .header-jobs-link {
        padding: 0 10px;
        min-width: 44px;
        min-height: 40px;
        justify-content: center;
    }
    #headerQuickActionsBtn {
        min-width: 44px;
    }
}

#restartBtn.restarting svg {
    animation: spin 0.8s linear infinite;
}
#restartBtn.restarting {
    pointer-events: none;
    opacity: 0.6;
}

/* Cursor usage widget (canto superior direito) */
.cursor-usage-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    margin-left: 2px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cursor-usage-widget:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.cursor-usage-widget .cursor-usage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}

.cursor-usage-widget .cursor-usage-icon svg {
    flex-shrink: 0;
}

.cursor-usage-widget .cursor-usage-label {
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .cursor-usage-widget .cursor-usage-label {
        display: none;
    }
    .cursor-usage-widget {
        padding: 0 8px;
    }
}

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

.logo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-avatar svg {
    width: 24px;
    height: 24px;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width, 248px);
    min-width: 0;
    max-width: min(var(--sidebar-width, 248px), 92vw);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    transition: all var(--transition-normal);
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mobile-overlay-bg);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.sidebar.mobile-hidden {
    transform: translateX(-100%);
}

/* Desktop: sidebar colapsável para o lado */
@media (min-width: 769px) {
    .sidebar.sidebar-collapsed {
        transform: translateX(-100%);
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 100;
    }
}

.sidebar-header {
    position: relative;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    overflow: visible;
    background: var(--bg-surface);
}

/* Menu name tooltip on hover for left bar top buttons */
.sidebar-btn-tooltip {
    position: relative;
}

.sidebar-btn-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 6px;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 1002;
    box-shadow: var(--shadow-md);
}

.sidebar-btn-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.new-chat-btn {
    width: 100%;
    padding: 9px 12px;
    min-height: 0;
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.new-chat-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.new-chat-btn:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-input) 100%);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.new-chat-btn:hover::before {
    opacity: 1;
}

.new-chat-btn:active {
    transform: translateY(0);
}

.new-chat-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sidebar-search {
    margin-top: 8px;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sidebar-search:focus {
    border-color: var(--border-hover);
    background: var(--bg-surface);
}

.sidebar-search::placeholder {
    color: var(--text-muted);
}

.sidebar-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.settings-btn {
    flex: 1;
    height: 36px;
    padding: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.settings-btn:hover {
    background: var(--bg-surface);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.settings-btn:active {
    transform: translateY(0);
}

/* Settings Modal */
.settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--backdrop-heavy);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn var(--transition-slow) ease-out;
}

.settings-modal.active {
    display: flex;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Skills modal — MCP on/off (toggle em vez de checkbox nativo) */
.mcp-skill-row .mcp-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
.mcp-skill-row .mcp-toggle-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
}
.mcp-skill-row .mcp-toggle-visual {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mcp-skill-row .mcp-toggle-switch:hover .mcp-toggle-visual {
    border-color: rgba(255, 255, 255, 0.2);
}
.mcp-skill-row .mcp-toggle-cb:checked + .mcp-toggle-visual {
    background: rgba(37, 211, 102, 0.28);
    border-color: rgba(37, 211, 102, 0.55);
}
.mcp-skill-row .mcp-toggle-visual::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f0f0f0;
    top: 2px;
    left: 2px;
    transition: transform 0.22s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.mcp-skill-row .mcp-toggle-cb:checked + .mcp-toggle-visual::after {
    transform: translateX(20px);
    background: #fff;
}
.mcp-skill-row .mcp-toggle-switch:focus-within .mcp-toggle-visual {
    outline: 2px solid var(--accent, #e3bc4c);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .mcp-skill-row .mcp-toggle-visual,
    .mcp-skill-row .mcp-toggle-visual::after {
        transition: none;
    }
}

/* Confirm modal (restart, etc.) */
.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.confirm-modal[aria-hidden="false"] {
    display: flex;
}
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.confirm-modal-box {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    animation: confirmModalIn 0.2s ease-out;
}
@keyframes confirmModalIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.confirm-modal-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.confirm-modal-message {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.confirm-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Job Modal */
#jobModal {
    display: none;
}

#jobModal.active {
    display: flex;
}

.job-item {
    transition: all 0.2s ease;
}

.job-item:hover {
    border-color: var(--border-hover) !important;
    background: var(--bg-tertiary) !important;
}

.job-action-btn {
    transition: all 0.2s ease;
}

.job-action-btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-hover) !important;
    transform: scale(1.05);
}

.schedule-options {
    margin-top: 8px;
}

.settings-content {
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn var(--transition-normal) ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.settings-content h2 {
    margin: 0 0 var(--space-lg) 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

/* Onboarding modal layout */
.onboarding-content {
    max-width: 640px;
}

.onboarding-header {
    margin-bottom: var(--space-lg);
}

.onboarding-content .onboarding-title {
    margin: 0 0 var(--space-md) 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.onboarding-welcome-block {
    padding: 12px 0 12px 14px;
    border-left: 3px solid var(--accent-primary);
    background: rgba(0, 217, 255, 0.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.onboarding-welcome-block .onboarding-welcome {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.onboarding-section {
    margin-bottom: var(--space-lg);
}

.onboarding-section-last {
    margin-bottom: 0;
}

.onboarding-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
}

.onboarding-section-title::before {
    content: '';
    width: 4px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 2px;
}

.onboarding-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.onboarding-feature-card {
    padding: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.onboarding-feature-card:hover {
    border-color: rgba(0, 217, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 217, 255, 0.12);
    transform: translateY(-1px);
}

.onboarding-feature-card .onboarding-feature-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

.onboarding-feature-card .onboarding-feature-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.onboarding-feature-card .onboarding-feature-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.onboarding-suggestions,
.onboarding-quick-actions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Ações rápidas no modal: chips maiores, mais espaço e hover claro */
.onboarding-quick-actions-chips {
    gap: 10px 12px;
    margin-top: 4px;
    min-height: 44px;
}

.onboarding-quick-actions-chips .onboarding-suggestion-chip {
    padding: 10px 14px !important;
    border-radius: var(--radius-lg) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    white-space: normal;
    text-align: left;
    max-width: 100%;
}

.onboarding-quick-actions-chips .onboarding-suggestion-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 217, 255, 0.2) !important;
}

.onboarding-quick-actions-chips .onboarding-suggestion-chip:active {
    transform: translateY(0);
}

.onboarding-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.onboarding-actions .btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 520px) {
    .onboarding-highlights {
        grid-template-columns: 1fr;
    }
}

.settings-group {
    margin-bottom: var(--space-lg);
}

.settings-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.1px;
}

.settings-group small {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--space-xs);
    line-height: 1.4;
}

.settings-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-group input,
.settings-group textarea,
.settings-group select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
}

.settings-group input:focus,
.settings-group textarea:focus,
.settings-group select:focus {
    outline: none;
    border-color: var(--border-hover);
}

.settings-group textarea {
    min-height: 80px;
    resize: vertical;
}

.settings-group select {
    cursor: pointer;
}

.settings-version-footer {
    margin: 0;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.settings-version-footer-label {
    font-weight: 500;
    opacity: 0.85;
}
.settings-version-footer-value {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.settings-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    justify-content: flex-end;
}

.settings-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    color: var(--btn-primary-fg);
    border: 1px solid var(--accent-primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 217, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-primary) 0%, rgba(0, 168, 204, 0.8) 100%);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.btn-secondary:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
    transform: translateY(0);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    min-height: 0;
}

/* Sidebar footer: configs, model, restart, logout */
.sidebar-footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-footer-section {
    margin: 4px 0 2px;
}
.sidebar-footer-section .history-section-title {
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.sidebar-footer-workspace-link:hover {
    color: rgba(0, 217, 255, 0.9);
    border-color: rgba(0, 217, 255, 0.3);
}
.sidebar-footer-section#adminWorkspaceSection {
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-workspace-select-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-workspace-select-row #adminWorkspaceSelect {
    flex: 1;
}
.sidebar-workspaces-mini-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.2s ease;
}
.sidebar-workspaces-mini-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 217, 255, 0.35);
    background: rgba(0, 217, 255, 0.1);
}
.sidebar-footer-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}
.sidebar-footer-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
}
.sidebar-footer-btn svg {
    flex-shrink: 0;
}
.sidebar-footer-btn-logout {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.45);
}
.sidebar-footer-btn-logout:hover {
    color: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 0.3);
}
.sidebar-model-section #restartBtn:hover,
.sidebar-footer-btn#restartBtn:hover,
.sidebar-footer-icon-btn#restartBtn:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Sidebar: conta + menu de atalhos (avatar, lista) */
.sidebar-footer-tools-group.sidebar-account-shell {
    margin-top: 4px;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    position: relative;
}
.sidebar-account-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sidebar-account-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 217, 255, 0.25);
}
.sidebar-account-trigger.is-open {
    border-color: rgba(0, 217, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.12);
}
.sidebar-account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, #0d8a9e 0%, #00d9ff 50%, #0a5c6e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sidebar-account-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sidebar-account-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-account-ws {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-account-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    transition: transform 0.2s ease;
}
.sidebar-account-trigger.is-open .sidebar-account-chevron {
    transform: rotate(180deg);
    opacity: 0.85;
}
.sidebar-account-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 200;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    border-radius: 14px;
    /* Liquid glass: separa do fundo escuro da sidebar */
    background: linear-gradient(
        165deg,
        rgba(32, 42, 58, 0.82) 0%,
        rgba(18, 22, 32, 0.78) 55%,
        rgba(12, 16, 24, 0.88) 100%
    );
    backdrop-filter: blur(52px) saturate(185%) brightness(1.05);
    -webkit-backdrop-filter: blur(52px) saturate(185%) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 0 0 1px rgba(0, 217, 255, 0.07),
        0 -8px 32px rgba(0, 0, 0, 0.45),
        0 -28px 64px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.sidebar-account-menu .sidebar-account-menu-section.sidebar-footer-section {
    padding: 4px 10px 8px;
    margin: 0 0 2px;
}
.sidebar-account-menu #adminWorkspaceSection {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-account-menu .sidebar-model-section {
    margin-bottom: 6px;
    padding-bottom: 4px;
}
.sidebar-account-menu-divider--after-admin {
    margin-top: 2px;
    margin-bottom: 4px;
}
.sidebar-account-menu-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 10px 6px;
}
.sidebar-account-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--border-color);
}
.sidebar-account-menu .header-quick-actions-wrap,
.sidebar-account-menu .header-mcps-wrap,
.sidebar-account-menu .header-automations-wrap,
.sidebar-account-menu .header-connectors-wrap,
.sidebar-account-menu .header-memory-wrap {
    position: relative;
    width: 100%;
}
.sidebar-account-menu-row,
.sidebar-account-menu-row--plain {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    transition: background 0.15s;
}
.sidebar-account-menu a.sidebar-account-menu-row {
    text-decoration: none;
    color: var(--text-primary);
    box-sizing: border-box;
}
.sidebar-account-menu a.sidebar-account-menu-row:hover,
.sidebar-account-menu a.sidebar-account-menu-row--plain:hover {
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-account-menu-row:hover,
.sidebar-account-menu-row--plain:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sidebar-account-menu-row .header-nav-label,
.sidebar-account-menu-row .header-jobs-label {
    flex: 1;
    text-align: left;
}
.sidebar-account-menu-row svg,
.sidebar-account-menu-row--plain svg {
    flex-shrink: 0;
    opacity: 0.9;
}
.sidebar-account-menu-row--danger {
    color: rgba(248, 113, 113, 0.95);
    margin-top: 2px;
}
.sidebar-account-menu-row--danger:hover {
    background: rgba(239, 68, 68, 0.12);
}
.sidebar-account-menu a.sidebar-account-menu-row--plain.sidebar-account-menu-workspaces-link {
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.sidebar-account-menu a.sidebar-account-menu-row--plain.sidebar-account-menu-workspaces-link:hover {
    color: var(--text-primary);
}

/* Menu Conta — Atalhos: mostrar rótulos (o header compacto esconde .header-nav-label em desktop) */
@media (min-width: 481px) {
    .sidebar-account-menu .sidebar-account-menu-row.header-nav-link,
    .sidebar-account-menu .sidebar-account-menu-row.header-nav-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 6px 10px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .sidebar-account-menu .sidebar-account-menu-row .header-nav-label,
    .sidebar-account-menu .sidebar-account-menu-row .header-jobs-label {
        display: inline !important;
    }
}
@media (max-width: 480px) {
    .sidebar-account-menu .sidebar-account-menu-row .header-nav-label,
    .sidebar-account-menu .sidebar-account-menu-row .header-jobs-label {
        display: inline !important;
    }
}

[data-theme="light"] .sidebar-account-menu {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(44px) saturate(160%);
    -webkit-backdrop-filter: blur(44px) saturate(160%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
        0 -12px 40px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .sidebar-account-menu-label {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sidebar-account-menu-row:hover,
[data-theme="light"] .sidebar-account-menu-row--plain:hover {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="glass"] .sidebar-account-menu {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.52) 0%,
        rgba(255, 255, 255, 0.38) 45%,
        rgba(255, 255, 255, 0.32) 100%
    );
    backdrop-filter: blur(56px) saturate(200%) brightness(1.04);
    -webkit-backdrop-filter: blur(56px) saturate(200%) brightness(1.04);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 120, 160, 0.12),
        0 -24px 72px rgba(15, 35, 55, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
[data-theme="glass"] .sidebar-account-menu-label {
    color: rgba(15, 23, 42, 0.45);
}
[data-theme="glass"] .sidebar-account-menu-row:hover,
[data-theme="glass"] .sidebar-account-menu-row--plain:hover {
    background: rgba(255, 255, 255, 0.45);
}
[data-theme="light"] .sidebar-account-trigger {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sidebar-account-name {
    color: #111827;
}
[data-theme="light"] .sidebar-account-ws {
    color: #6b7280;
}

/* Legacy: grelha antiga (se existir noutros templates) */
.sidebar-footer-actions-grid {
    --sfag-gap: 8px;
    --sfag-cols: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    gap: var(--sfag-gap);
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 340px) {
    .sidebar-footer-actions-grid {
        --sfag-cols: 4;
    }
}
.sidebar-footer-actions-grid > * {
    flex: 1 1 calc((100% - (var(--sfag-cols) - 1) * var(--sfag-gap)) / var(--sfag-cols));
    max-width: calc((100% - (var(--sfag-cols) - 1) * var(--sfag-gap)) / var(--sfag-cols));
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-footer-actions-grid .header-quick-actions-wrap,
.sidebar-footer-actions-grid .header-mcps-wrap,
.sidebar-footer-actions-grid .header-automations-wrap,
.sidebar-footer-actions-grid .header-connectors-wrap,
.sidebar-footer-actions-grid .header-memory-wrap {
    position: relative;
}
.sidebar-footer-actions-grid .header-divider {
    display: none;
}

.sidebar-footer-icon-btn {
    min-width: 36px;
    width: 100%;
    max-width: 100%;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    position: relative;
}
.sidebar-footer-icon-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
.sidebar-footer-icon-btn[title]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 6px;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 1002;
    box-shadow: var(--shadow-md);
}
.sidebar-footer-icon-btn:hover::after {
    opacity: 1;
    visibility: visible;
}
.sidebar-footer-icon-btn.sidebar-footer-btn-logout:hover {
    color: rgba(239, 68, 68, 0.95);
    border-color: rgba(239, 68, 68, 0.35);
}

.history-section {
    margin-bottom: var(--space-lg);
}

.history-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.65px;
    margin-bottom: 6px;
    padding: 0 6px;
    border-left: 3px solid var(--accent-primary);
    padding-left: 5px;
}

.history-section-favorites .history-section-title {
    color: var(--accent-primary, #00d9ff);
}

/* Ações rápidas: icon + label button */
.auto-prompt-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-prompt-item-icon i {
    font-size: 14px;
}

.auto-prompt-item-label {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid de ícones no modal (6 por linha no desktop) */
.auto-prompt-icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 0;
}

.auto-prompt-icon-option {
    width: 100%;
    aspect-ratio: 1;
    min-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
}

.auto-prompt-icon-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-hover, var(--border-color));
}

.auto-prompt-icon-option.selected {
    background: rgba(0, 217, 255, 0.15);
    color: var(--accent-primary, #00d9ff);
    border-color: var(--accent-primary, #00d9ff);
}

.settings-group-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.theme-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-segmented-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 112px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.theme-segmented-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.theme-segmented-btn.theme-segmented-btn--active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-secondary);
    box-shadow: 0 0 0 1px var(--accent-tertiary);
}

@media (max-width: 480px) {
    .theme-segmented-btn {
        min-width: 100%;
    }
}


.show-more-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.8) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.history-item {
    padding: 7px 8px;
    margin-bottom: 2px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    position: relative;
}

.history-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.history-item:hover .history-item-actions {
    opacity: 1;
}

.history-item.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-left: 2px solid var(--accent-primary);
}

.history-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.history-item-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.history-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-unread-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-primary, #00d9ff);
    color: var(--bg-primary, #0f0f0f);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Fora do fluxo flex: os ícones não reservam largura quando invisíveis → mais texto visível */
.history-item-actions {
    display: flex;
    gap: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    border-radius: 4px;
}

.history-item:hover .history-item-actions {
    opacity: 1;
    pointer-events: auto;
    background: var(--bg-tertiary);
    padding-left: 8px;
    box-shadow: -10px 0 14px var(--bg-tertiary);
}

.history-item-favorite,
.history-item-rename,
.history-item-share,
.history-item-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 18px;
    height: 18px;
    opacity: 0.5;
}

.history-item-favorite svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

.history-item-favorite:hover,
.history-item-favorite.history-item-favorite-active {
    color: var(--accent-primary, #00d9ff);
    opacity: 1;
}

.history-item-favorite.history-item-favorite-active svg {
    fill: var(--accent-primary, #00d9ff);
    stroke: var(--accent-primary, #00d9ff);
}

.history-item-rename svg,
.history-item-share svg,
.history-item-delete svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

.history-item-share:hover {
    background: var(--bg-input);
    color: var(--accent-primary, #00d9ff);
    opacity: 1;
}

.history-item-rename:hover {
    background: var(--bg-input);
    color: var(--text-secondary);
    opacity: 1;
}

.history-item-delete:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--text-muted);
    opacity: 1;
}

.history-item.dragging {
    opacity: 0.5;
}

.history-item.drag-over {
    border-top: 2px solid var(--accent-primary);
}

/* Main Content Area — z-index acima da sidebar (100); overflow visível para não cortar
   tooltips do header (::after) que se prolongam para a esquerda sobre a junção com a sidebar */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 0; /* flex row: sem isto, texto/URLs longas forçam overflow e “empurram” o layout */
    overflow: visible;
    position: relative;
    z-index: 101;
}

/* Container */
.container {
    flex: 1;
    max-width: 1320px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: justify-content 0.35s ease, align-items 0.35s ease, transform 0.35s ease;
}

/* Connection retry banner (shown on network error, hidden when reconnected) */
.connection-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: var(--banner-text);
    font-size: 14px;
    flex-shrink: 0;
}

.connection-banner-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(234, 179, 8, 0.4);
    border-top-color: rgba(234, 179, 8, 0.9);
    border-radius: 50%;
    animation: connection-banner-spin 0.8s linear infinite;
}

@keyframes connection-banner-spin {
    to { transform: rotate(360deg); }
}

.connection-banner-text {
    flex: 1;
}


/* Chat empty state background: stars/space effect (visible only when prompt is centered)
   Não usar inset:0 — cobria o header e no mobile o ícone do menu ficava ilegível por cima do gradiente */
.chat-empty-bg {
    position: absolute;
    top: var(--chat-empty-bg-top, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow: hidden;
}

.main-content.chat-empty .chat-empty-bg {
    opacity: 1;
}

/* Subtle gradient overlay so empty state feels like space (helps on mobile where fewer stars visible) */
.chat-empty-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(0, 217, 255, 0.06), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 168, 204, 0.04), transparent 45%),
        radial-gradient(ellipse 60% 40% at 20% 70%, rgba(0, 168, 204, 0.04), transparent 45%);
    pointer-events: none;
}

.chat-empty-bg .star {
    position: absolute;
    width: var(--star-size, 2px);
    height: var(--star-size, 2px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    opacity: 0.55;
    will-change: transform, opacity;
    animation-name: star-drift, star-twinkle;
    animation-duration: var(--star-drift-duration, 36s), var(--star-twinkle-duration, 4.2s);
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
}

.chat-empty-bg .star.star-cyan {
    background: rgba(0, 217, 255, 0.64);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .chat-empty-bg .star {
        animation: star-twinkle 9s ease-in-out infinite;
        opacity: 0.5;
    }
    .chat-empty-bg .shooting-star {
        display: none;
    }
}

@keyframes star-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(
            calc(var(--star-drift-x, 0vw) * 0.58),
            calc(var(--star-drift-y, 0vh) * 0.58),
            0
        );
    }
    100% {
        transform: translate3d(var(--star-drift-x, 0vw), var(--star-drift-y, 0vh), 0);
    }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.28; }
    48% { opacity: 0.92; }
    54% { opacity: 0.46; }
    72% { opacity: 0.86; }
}

.chat-empty-bg .shooting-star {
    position: absolute;
    width: clamp(56px, 9vw, 112px);
    height: 1.5px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transform-origin: left center;
    transform: rotate(var(--shoot-angle, 24deg));
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.95) 45%,
        rgba(0, 217, 255, 0.6) 100%
    );
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.34));
    animation: shooting-star var(--shoot-duration, 1.35s) cubic-bezier(0.18, 0.7, 0.22, 1) forwards;
}

.chat-empty-bg .shooting-star::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
    transform: translateY(-50%);
}

@keyframes shooting-star {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--shoot-angle, 24deg));
    }
    14% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(
            var(--shoot-distance, 30vw),
            calc(var(--shoot-distance, 30vw) * 0.42),
            0
        ) rotate(var(--shoot-angle, 24deg));
    }
}

/* Chat empty state: input centered; container transparent so .chat-empty-bg stars show through */
.main-content.chat-empty .container {
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    background: transparent;
    transform: translateY(-6vh);
}

.main-content.chat-empty #messages {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 0;
    overflow: visible;
    max-height: none;
    position: relative;
    /* Acima da barra de input: o menu da grelha (atalhos) é absolute e sobrepõe-se à área do input */
    z-index: 2;
}

.main-content.chat-empty .input-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    margin-top: 22px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#messages {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 0;
    margin-bottom: 24px;
    scroll-behavior: smooth;
}

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

#messages::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

#messages::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

#messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Messages */
.message {
    display: flex;
    margin-bottom: var(--space-xl);
    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: var(--space-md);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.message.user {
    justify-content: flex-end;
}

.message.assistant {
    justify-content: flex-start;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
}

.message-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

.message.user .message-avatar {
    order: 2;
    background: var(--bg-tertiary);
}

.message.assistant .message-avatar {
    background: transparent;
    border: none;
}

/* Message body: conteúdo + datetime por baixo (user e assistant) */
.message .message-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 75%;
}

.message.assistant .message-body {
    flex: 1;
    gap: 8px;
}

.message.user .message-body {
    align-items: flex-end;
}

.message.assistant .message-body .message-content {
    max-width: 100%;
}

.message-content {
    max-width: 95%;
    padding: 16px 20px;
    border-radius: 16px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;
    font-size: 15px;
}

/* User messages: comfortable reading width and spacing for long instructions */
.message.user .message-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-right-radius: 4px;
    max-width: min(95%, 80em);
    min-width: 4.5em; /* evita bolha tão estreita que "oi" quebre em duas linhas */
    line-height: 1.65;
    padding: 18px 22px;
}

.message.assistant .message-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Token count only (cost must not appear after LLM is selected) */
.message-cost {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Data/hora sob cada mensagem — minimal e pequeno */
.message-datetime {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.75;
}

.message-content p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message.user .message-content p {
    margin-bottom: 12px;
    line-height: 1.65;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 16px 0 8px 0;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.message-content h1 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.message-content h2 {
    font-size: 1.3em;
    margin-top: 20px;
}

.message-content h3 {
    font-size: 1.1em;
    margin-top: 16px;
}

.message-content ul,
.message-content ol {
    margin: 12px 0;
    padding-left: 24px;
    line-height: 1.6;
}

.message.user .message-content ul,
.message.user .message-content ol {
    margin: 14px 0;
    padding-left: 26px;
}

.message-content li {
    margin: 6px 0;
}

.message.user .message-content li {
    margin: 8px 0;
}

.message-content code {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 0.9em;
    color: #00d9ff;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.message-content pre {
    background: var(--bg-input);
    padding: 12px;
    border-radius: 8px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--border-color);
}

.message-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.85em;
    line-height: 1.5;
}

.message-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.message-content em {
    font-style: italic;
    color: var(--text-secondary);
}

.message-content a {
    color: #00d9ff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.message-content a:hover {
    color: #00a8cc;
}

.message-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
    display: block;
    box-shadow: var(--shadow-md);
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

/* Chat mode bar (SDK: agent/plan/ask + thinking) */
.chat-mode-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md) var(--space-sm);
    flex-wrap: wrap;
}

.chat-mode-select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.chat-thinking-toggle {
    font-size: 12px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.chat-thinking-toggle.is-active {
    border-color: rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.08);
}

.chat-thinking-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}

.chat-thinking-icon {
    opacity: 0.85;
    flex-shrink: 0;
}

.chat-thinking-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-thinking-switch-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
}

.chat-thinking-switch-visual {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.chat-thinking-switch:hover .chat-thinking-switch-visual {
    border-color: rgba(255, 255, 255, 0.22);
}

.chat-thinking-switch-cb:checked + .chat-thinking-switch-visual {
    background: rgba(0, 217, 255, 0.28);
    border-color: rgba(0, 217, 255, 0.65);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.25);
}

.chat-thinking-switch-visual::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8e8e8;
    top: 2px;
    left: 2px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.chat-thinking-switch-cb:checked + .chat-thinking-switch-visual::after {
    transform: translateX(18px);
    background: #fff;
}

.chat-thinking-switch-cb:focus-visible + .chat-thinking-switch-visual {
    outline: 2px solid rgba(0, 217, 255, 0.75);
    outline-offset: 2px;
}

.chat-thinking-switch-state {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 28px;
    transition: color 0.2s ease;
}

.chat-thinking-switch-state::after {
    content: "Off";
}

.chat-thinking-switch-cb:checked ~ .chat-thinking-switch-state {
    color: #00d9ff;
}

.chat-thinking-switch-cb:checked ~ .chat-thinking-switch-state::after {
    content: "High";
}

.chat-cancel-btn {
    margin-left: auto;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-cancel-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

/* Input Container */
.input-container {
    display: flex;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    align-items: flex-end;
    flex-wrap: wrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}

.input-container:focus-within {
    border-color: var(--border-hover);
}

.input-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    border: 1px solid transparent;
}

.input-action-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.input-action-btn:active {
    transform: translateY(0);
}

.input-action-btn.active {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.input-action-btn.recording {
    animation: pulse 1.5s ease-in-out infinite;
    color: #ff3b30;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.selected-photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.selected-photo {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.selected-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

#userInput {
    flex: 1;
    min-height: 48px;
    max-height: 240px;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition-fast);
    font-family: inherit;
    resize: none;
    overflow-y: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.5;
}

#userInput:focus {
    border-color: var(--border-hover);
    background: var(--bg-surface);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

#userInput::placeholder {
    color: var(--text-muted);
}

#sendButton {
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#sendButton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

#sendButton:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-input) 100%);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#sendButton:hover:not(:disabled)::before {
    opacity: 1;
}

#sendButton:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

#sendButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading */
.loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    border-top-color: var(--bg-primary);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Pulse animation for collapsed sidebar toggle */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(0, 217, 255, 1), 0 0 60px rgba(0, 217, 255, 0.5);
        transform: scale(1.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 217, 255, 1.2), 0 0 80px rgba(0, 217, 255, 0.8);
        transform: scale(1.15);
    }
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: fit-content;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Thinking text - pequeno com fade out */
.thinking-text {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-top: 8px;
    padding: 4px 8px;
    font-style: italic;
    animation: fadeOut 3s ease-out forwards;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes fadeOut {
    0% {
        opacity: 0.6;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.2;
    }
}

.thinking-text-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Agent activity list (scrollable, Cursor-like) */
.agent-activity-list {
    margin-top: 10px;
    max-height: 50em;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.agent-activity-list::-webkit-scrollbar {
    width: 6px;
}
.agent-activity-list::-webkit-scrollbar-track {
    background: transparent;
}
.agent-activity-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.agent-activity-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.agent-activity-item {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    padding: 3px 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-activity-message {
    word-break: break-word;
    white-space: normal;
}

.agent-activity-detail {
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-word;
    white-space: normal;
}

.agent-activity-item-in {
    animation: agentActivityFadeIn 0.25s ease-out forwards;
}

.agent-activity-item-out {
    animation: agentActivityFadeOut 0.2s ease-in forwards;
}

@keyframes agentActivityFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes agentActivityFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

.mcp-app-panel {
    margin-top: 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}
.mcp-app-panel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.mcp-app-iframe {
    width: 100%;
    min-height: 200px;
    max-height: 480px;
    border: 0;
    background: #fff;
}
.mcp-app-json {
    font-size: 11px;
    padding: 8px 10px;
    margin: 0;
    overflow: auto;
    max-height: 240px;
}

/* Persisted activity log (kept in message after response completes) */
.agent-activity-log-persisted {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.agent-activity-log-persisted-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.agent-activity-list-persisted {
    max-height: 50em;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.agent-activity-list-persisted::-webkit-scrollbar {
    width: 6px;
}
.agent-activity-list-persisted::-webkit-scrollbar-track {
    background: transparent;
}
.agent-activity-list-persisted::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.agent-activity-list-persisted::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.agent-activity-list-persisted .agent-activity-item-in {
    animation: none;
}

.agent-activity-log-persisted {
    min-height: 0;
}

/* Cursor CLI terminal-style output (raw stdout/stderr) */
.chat-terminal {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
    background: var(--terminal-bg, #0d1117);
    color: var(--terminal-fg, #e6edf3);
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    margin: 0;
}

/* Markdown Tables */
.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.95em;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.message-content th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
}

.message-content td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color-muted);
}

.message-content tr:last-child td {
    border-bottom: none;
}

.message-content tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.message-content table p {
    margin: 0;
}

/* Voice Mode Overlay - bola gigante */
.voice-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.voice-mode-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
}

.voice-mode-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 480px;
    width: 100%;
}

.voice-mode-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.voice-mode-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.voice-mode-ball {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.4s ease, transform 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.voice-mode-ball-inner {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: var(--bg-tertiary);
    opacity: 0.6;
}

.voice-mode-ball-idle {
    background: radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.25), rgba(0, 168, 204, 0.15));
    box-shadow: 0 0 60px rgba(0, 217, 255, 0.2), inset 0 0 40px rgba(0, 217, 255, 0.05);
}

.voice-mode-ball-idle:hover {
    box-shadow: 0 0 80px rgba(0, 217, 255, 0.3), inset 0 0 50px rgba(0, 217, 255, 0.08);
    transform: scale(1.02);
}

.voice-mode-ball-listening {
    background: radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.5), rgba(0, 168, 204, 0.3));
    box-shadow: 0 0 80px rgba(0, 217, 255, 0.4), inset 0 0 60px rgba(0, 217, 255, 0.1);
    animation: voice-mode-pulse 1.2s ease-in-out infinite;
}

.voice-mode-ball-speaking {
    background: radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.4), rgba(0, 168, 204, 0.25));
    box-shadow: 0 0 70px rgba(0, 217, 255, 0.35), inset 0 0 50px rgba(0, 217, 255, 0.08);
    animation: voice-mode-glow 0.8s ease-in-out infinite alternate;
}

@keyframes voice-mode-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.95; }
}

@keyframes voice-mode-glow {
    0% { box-shadow: 0 0 60px rgba(0, 217, 255, 0.3), inset 0 0 40px rgba(0, 217, 255, 0.06); }
    100% { box-shadow: 0 0 90px rgba(0, 217, 255, 0.45), inset 0 0 60px rgba(0, 217, 255, 0.1); }
}

.voice-mode-status {
    font-size: 15px;
    color: var(--text-secondary);
    text-align: center;
    min-height: 24px;
}

.voice-mode-transcript {
    width: 100%;
    max-height: 120px;
    overflow-y: auto;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.voice-mode-transcript:empty {
    display: none;
}

.voice-mode-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.voice-mode-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
}

.voice-mode-listen {
    background: rgba(0, 217, 255, 0.2);
    color: var(--text-primary);
    border: 1px solid rgba(0, 217, 255, 0.4);
}

.voice-mode-listen:hover {
    background: rgba(0, 217, 255, 0.3);
}

.voice-mode-listen:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Job Management Improvements */
.jobs-filters .job-filter-btn {
    padding: 8px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.jobs-filters .job-filter-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.jobs-filters .job-filter-btn.active {
    background: var(--accent-secondary);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .jobs-grid {
        grid-template-columns: 1fr;
    }
}

.job-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover {
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .job-card:hover,
[data-theme="glass"] .job-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-md);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.job-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-card-status {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-status-active {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.job-status-disabled {
    background: var(--bg-surface);
    color: var(--text-muted);
}

.job-status-error {
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
}

.job-card-body {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.job-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.job-card-actions {
    display: flex;
    gap: 8px;
}

.job-card-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.job-card-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.job-card-btn.run-btn:hover {
    color: var(--accent-primary);
    border-color: rgba(0, 217, 255, 0.35);
}

.job-card-btn.delete-btn:hover {
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.5);
}

/* Custom Scrollbar for jobs list */
#jobsList::-webkit-scrollbar {
    width: 6px;
}
#jobsList::-webkit-scrollbar-track {
    background: transparent;
}
#jobsList::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
#jobsList::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Code blocks */
code {
    background: var(--bg-tertiary);
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

pre {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--border-color);
}

pre code {
    background: none;
    padding: 0;
    border: none;
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--text-primary);
    text-decoration: none;
}

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

/* Scrollbar for sidebar */
.sidebar::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track {
    background: var(--bg-sidebar);
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Responsive */
@media (max-width: 768px) {
    body {
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        /* Abaixo da sidebar (1000), acima do main-content (101) — senão toques iam para o chat e o overlay não fechava */
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-fast), visibility var(--transition-fast);
    }

    .mobile-sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Sidebar - Escondido por padrão em mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 88vw);
        height: 100vh;
        max-height: 100vh;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        transform: translateX(-100%);
        z-index: 1000;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: transform var(--transition-normal);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Só o conteúdo (lista de conversas) faz scroll; o footer fica sempre visível.
     * Em modo admin o footer inclui workspace + modelo (renderizados no template);
     * em workspace sem admin essas secções não existem no DOM. */
    .sidebar .sidebar-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    .sidebar .sidebar-footer {
        flex-shrink: 0;
    }

    .sidebar.mobile-visible {
        transform: translateX(0);
    }

    .sidebar-header {
        padding: var(--space-lg) var(--space-md);
    }

    .new-chat-btn {
        padding: var(--space-sm) var(--space-md);
        font-size: 14px;
    }

    .new-chat-btn svg {
        width: 16px;
        height: 16px;
    }

    .sidebar-search {
        margin-top: var(--space-sm);
        padding: var(--space-xs) var(--space-sm);
        font-size: 14px;
    }

    .sidebar-buttons {
        margin-top: var(--space-sm);
        gap: var(--space-sm);
    }

    .settings-btn {
        height: 32px;
        padding: 0;
    }

    .settings-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Main Content - Ocupa toda a tela em mobile */
    .main-content {
        width: 100%;
        height: 100vh;
        flex: 1;
        margin-left: 0;
    }

    .header {
        padding: 8px 12px;
        min-height: 48px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /* Garantir que Workspaces e outros controlos do header não sejam cortados em mobile */
    .header > #headerSidebarToggleInHeader,
    .header > .logo,
    .header-controls {
        flex-shrink: 0;
    }

    .header .logo {
        font-size: 16px;
        gap: var(--space-sm);
    }
    .header .logo-brand {
        font-size: 20px;
    }
    .header .logo-ai {
        font-size: 1.3em;
    }

    /* Same brand logo sizing as chat header on Connectors / Workspaces / editor / Automations */
    .cn-topbar .logo,
    .ws-header .logo,
    .ws-editor-topbar .logo,
    .jobs-header .logo {
        font-size: 16px;
        gap: var(--space-sm);
    }
    .cn-topbar .logo-brand,
    .ws-header .logo-brand,
    .ws-editor-topbar .logo-brand,
    .jobs-header .logo-brand {
        font-size: 20px;
    }
    .cn-topbar .logo-ai,
    .ws-header .logo-ai,
    .ws-editor-topbar .logo-ai,
    .jobs-header .logo-ai {
        font-size: 1.3em;
    }

    .header .logo-avatar {
        width: 28px;
        height: 28px;
    }

    .header .logo-avatar svg {
        width: 20px;
        height: 20px;
    }

    .logo {
        font-size: 16px;
    }

    .logo-avatar {
        width: 32px;
        height: 32px;
    }

    .logo-avatar svg {
        width: 22px;
        height: 22px;
    }

    .header-controls {
        gap: 4px;
        position: relative;
        z-index: 2;
    }
    .header-quick-actions-wrap {
        z-index: 3;
    }
    #headerQuickActionsBtn,
    #headerSidebarToggleInHeader {
        touch-action: manipulation;
    }

    /* Garantir contraste do ícone do menu sobre o fundo (evita “invisível” no topo) */
    #headerSidebarToggleInHeader {
        color: var(--text-primary);
        position: relative;
        z-index: 2;
    }

    .model-select-wrap {
        max-width: none;
    }
    .model-select {
        font-size: 12px;
        height: 34px;
        padding: 0 28px 0 var(--space-sm);
        min-width: unset;
        max-width: 150px;
    }

    .header-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .header-btn svg {
        width: 16px;
        height: 16px;
    }

    .custom-model-input {
        width: 100%;
        height: 32px;
        font-size: 12px;
    }

    .cursor-usage-widget {
        height: 36px;
        padding: 0 var(--space-sm);
    }

    .container {
        padding: var(--space-md);
        height: calc(100vh - 52px);
        display: flex;
        flex-direction: column;
    }

    /* Chat empty state on mobile: centered input, transparent so star background shows; shift block up */
    .main-content.chat-empty .container {
        justify-content: center;
        align-items: center;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateY(-5vh);
        background: transparent;
    }

    /* Star bg abaixo do header — não cobrir a barra (toggle Conversas visível) */
    .main-content.chat-empty .chat-empty-bg {
        position: absolute;
        top: var(--chat-empty-bg-top, 56px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        opacity: 1;
    }

    .main-content.chat-empty .input-container {
        max-width: 100%;
        margin-top: 16px;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px 0;
        margin-bottom: 16px;
    }

    .message-content {
        max-width: 95%;
        font-size: 14px;
        padding: 12px 16px;
    }

    .message.user .message-content {
        min-width: 4.5em;
    }

    .input-container {
        padding: var(--space-sm);
        gap: var(--space-xs);
        margin-top: auto;
        border-radius: var(--radius-xl);
    }

    .input-action-btn {
        padding: var(--space-xs);
        border-radius: var(--radius-md);
    }

    .input-action-btn svg {
        width: 20px;
        height: 20px;
    }

    #userInput {
        padding: var(--space-sm) var(--space-md);
        font-size: 16px; /* >= 16px evita zoom automático no iOS Safari em focus */
        border-radius: var(--radius-lg);
        min-height: 44px;
    }

    #sendButton {
        padding: var(--space-sm) var(--space-lg);
        font-size: 14px;
        border-radius: var(--radius-lg);
        font-weight: 600;
    }

    .auth-page {
        padding: 20px;
        align-items: flex-start;
        padding-top: 60px;
    }
    .auth-container {
        margin: 0;
        padding: 40px 28px;
    }
}

/* Welcome message */
.welcome-message {
    text-align: center;
    padding: 42px 24px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
}

.welcome-hero {
    width: min(940px, 100%);
    padding: 28px 24px 20px;
    border-radius: 18px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.welcome-message .welcome-message-text {
    font-size: clamp(16px, 2.1vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
    font-family: "Avenir Next", "SF Pro Display", "Inter", "Segoe UI", sans-serif;
    margin: 0;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.16);
}

.welcome-suggestions {
    margin: 18px 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.welcome-quick-actions-manage {
    display: flex;
    justify-content: center;
}

.welcome-manage-quick-actions-btn {
    padding: 8px 16px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.welcome-manage-quick-actions-btn:hover {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.35);
    color: var(--text-primary);
}

/* Quick actions below welcome message (all templates, clickable) */
.welcome-quick-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 8px;
    /* Contexto para o menu da engrenagem: centrado na largura do cartão, não só ao lado do ícone */
    position: relative;
}

.welcome-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}

/* Ícone de engrenagem à direita das quick actions; sem linha / texto extra */
.welcome-prelist-block--inline {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    align-self: center;
    position: static;
}

.welcome-prelist-gear-btn.welcome-prelist-reveal {
    margin: 0;
    padding: 0 10px 0 8px;
    min-height: 38px;
    height: auto;
    width: auto;
    min-width: 38px;
    border-radius: 11px;
    border: 1px solid rgba(0, 217, 255, 0.45);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(0, 217, 255, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.welcome-prelist-gear-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: inherit;
    white-space: nowrap;
    line-height: 1;
}

.welcome-prelist-gear-btn.welcome-prelist-reveal:hover {
    color: #00d9ff;
    border-color: rgba(0, 217, 255, 0.75);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.25);
}

.welcome-prelist-block.is-open .welcome-prelist-gear-btn.welcome-prelist-reveal {
    color: #00d9ff;
    border-color: rgba(0, 217, 255, 0.75);
    background: rgba(0, 217, 255, 0.12);
}

.welcome-prelist-reveal:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.welcome-prelist-menu {
    width: min(400px, 100%);
    margin-top: 10px;
    padding: 4px 0;
    border-radius: 14px;
    border: 1px solid rgba(0, 217, 255, 0.18);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
}

.welcome-prelist-block--inline .welcome-prelist-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    margin-top: 0;
    transform: translateX(-50%);
    z-index: 20;
    width: min(480px, calc(100vw - 32px));
    max-height: min(70vh, 440px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: grelha de atalhos centrada no ecrã para acesso rápido */
@media (max-width: 700px) {
    .welcome-prelist-block--inline.is-open .welcome-prelist-menu {
        position: fixed;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(440px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px);
        max-height: min(82vh, 560px);
        margin: 0 !important;
        z-index: 1400;
        box-sizing: border-box;
    }
}

.welcome-prelist-menu.welcome-prelist-menu--grid {
    padding: 10px;
}

.welcome-prelist-menu--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
    border-radius: 14px;
    text-align: center;
    box-sizing: border-box;
}

.welcome-prelist-menu[hidden] {
    display: none !important;
}

.welcome-prelist-btn.welcome-prelist-btn--line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}
a.welcome-prelist-btn.welcome-prelist-btn--line {
    text-decoration: none;
    box-sizing: border-box;
}

.welcome-prelist-line-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 217, 255, 0.1);
    color: rgba(0, 217, 255, 0.88);
    transition: background 0.15s ease, color 0.15s ease;
}

.welcome-prelist-line-icon svg {
    display: block;
}

.welcome-prelist-line-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.welcome-prelist-btn.welcome-prelist-btn--line:last-child {
    border-bottom: none;
}

.welcome-prelist-line-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
}

.welcome-prelist-line-desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.45);
}

.welcome-prelist-btn.welcome-prelist-btn--line:hover {
    background: rgba(0, 217, 255, 0.08);
}

.welcome-prelist-btn.welcome-prelist-btn--line:hover .welcome-prelist-line-icon {
    background: rgba(0, 217, 255, 0.16);
    color: #00d9ff;
}

.welcome-prelist-btn.welcome-prelist-btn--line:hover .welcome-prelist-line-title {
    color: #00d9ff;
}

.welcome-prelist-btn.welcome-prelist-btn--line:hover .welcome-prelist-line-desc {
    color: rgba(0, 217, 255, 0.55);
}

.welcome-prelist-btn.welcome-prelist-btn--line:focus-visible {
    outline: none;
    background: rgba(0, 217, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.35);
}

/* Galeria em grelha (welcome): cartões clicáveis estilo masonry */
.welcome-prelist-btn.welcome-prelist-btn--tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 104px;
    margin: 0;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.welcome-prelist-btn.welcome-prelist-btn--tile .welcome-prelist-line-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.welcome-prelist-btn.welcome-prelist-btn--tile .welcome-prelist-line-main {
    align-items: center;
    width: 100%;
}

.welcome-prelist-btn.welcome-prelist-btn--tile .welcome-prelist-line-title {
    font-size: 12px;
    line-height: 1.25;
}

.welcome-prelist-btn.welcome-prelist-btn--tile .welcome-prelist-line-desc {
    font-size: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.welcome-prelist-btn.welcome-prelist-btn--tile:hover {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.welcome-prelist-btn.welcome-prelist-btn--tile:hover .welcome-prelist-line-icon {
    background: rgba(0, 217, 255, 0.2);
    color: #00d9ff;
}

.welcome-prelist-btn.welcome-prelist-btn--tile:hover .welcome-prelist-line-title {
    color: #00d9ff;
}

.welcome-prelist-btn.welcome-prelist-btn--tile:hover .welcome-prelist-line-desc {
    color: rgba(0, 217, 255, 0.55);
}

.welcome-prelist-btn.welcome-prelist-btn--tile:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(0, 217, 255, 0.45);
}

.welcome-quick-actions .welcome-quick-action-item,
.welcome-quick-actions .auto-prompt-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 217, 255, 0.55);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    pointer-events: auto;
}
.welcome-quick-actions .welcome-quick-action-item:hover,
.welcome-quick-actions .auto-prompt-item:hover {
    background: rgba(0, 217, 255, 0.12);
    border-color: #00d9ff;
    color: #00d9ff;
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.welcome-quick-actions .auto-prompt-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 13px;
    opacity: 0.7;
}
.welcome-quick-actions .auto-prompt-item:hover .auto-prompt-item-icon {
    opacity: 1;
    color: #00d9ff;
}

/* Welcome quick actions: chips use .onboarding-suggestion-chip + inline style — override for azul Joaquaim mais vivo e hover neon */
.welcome-quick-actions .onboarding-suggestion-chip {
    border: 1px solid rgba(0, 217, 255, 0.75) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.welcome-quick-actions .onboarding-suggestion-chip:hover {
    border-color: #00d9ff !important;
    color: #00d9ff !important;
    background: rgba(0, 217, 255, 0.15) !important;
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.4), 0 0 24px rgba(0, 217, 255, 0.2) !important;
}

/* Modal Ajuda: quick actions and suggestion chips with Joaquim blue border */
#onboardingSuggestions .onboarding-suggestion-chip {
    background: rgba(0, 217, 255, 0.12) !important;
    border: 1px solid rgba(0, 217, 255, 0.35) !important;
    color: #fff;
}
#onboardingSuggestions .onboarding-suggestion-chip:hover {
    background: rgba(0, 217, 255, 0.18) !important;
    border-color: rgba(0, 217, 255, 0.5) !important;
}

/* Ações rápidas: destaque visual mais forte */
.onboarding-quick-actions-chips .onboarding-suggestion-chip {
    background: rgba(0, 217, 255, 0.1) !important;
    border: 1px solid rgba(0, 217, 255, 0.45) !important;
    color: rgba(255, 255, 255, 0.95);
}
.onboarding-quick-actions-chips .onboarding-suggestion-chip:hover {
    background: rgba(0, 217, 255, 0.2) !important;
    border-color: var(--accent-primary) !important;
    color: #fff;
}

/* —— Tema claro + Liquid glass: welcome / chips (texto legível, sem branco em fundo claro) —— */
[data-theme="light"] .welcome-hero,
[data-theme="glass"] .welcome-hero {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}
[data-theme="light"] .welcome-message .welcome-message-text,
[data-theme="glass"] .welcome-message .welcome-message-text {
    color: var(--text-primary);
    text-shadow: none;
}
[data-theme="light"] .welcome-prelist-gear-btn.welcome-prelist-reveal,
[data-theme="glass"] .welcome-prelist-gear-btn.welcome-prelist-reveal {
    color: var(--accent-primary);
    background: var(--bg-input);
    border-color: var(--border-color);
    text-decoration: none;
}
[data-theme="light"] .welcome-prelist-gear-btn.welcome-prelist-reveal:hover,
[data-theme="glass"] .welcome-prelist-gear-btn.welcome-prelist-reveal:hover {
    border-color: var(--accent-primary);
    background: var(--accent-secondary);
}
[data-theme="light"] .welcome-prelist-menu,
[data-theme="glass"] .welcome-prelist-menu {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}
[data-theme="light"] .welcome-prelist-btn.welcome-prelist-btn--line,
[data-theme="glass"] .welcome-prelist-btn.welcome-prelist-btn--line {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
[data-theme="light"] .welcome-prelist-btn.welcome-prelist-btn--tile,
[data-theme="glass"] .welcome-prelist-btn.welcome-prelist-btn--tile {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}
[data-theme="light"] .welcome-prelist-line-title,
[data-theme="glass"] .welcome-prelist-line-title {
    color: var(--text-primary);
}
[data-theme="light"] .welcome-prelist-line-desc,
[data-theme="glass"] .welcome-prelist-line-desc {
    color: var(--text-muted);
}
[data-theme="light"] .welcome-prelist-line-icon,
[data-theme="glass"] .welcome-prelist-line-icon {
    background: var(--accent-secondary);
    color: var(--accent-primary);
}
[data-theme="light"] .welcome-quick-actions .onboarding-suggestion-chip,
[data-theme="glass"] .welcome-quick-actions .onboarding-suggestion-chip {
    color: var(--text-primary) !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--accent-primary) !important;
}
[data-theme="light"] .welcome-quick-actions .onboarding-suggestion-chip:hover,
[data-theme="glass"] .welcome-quick-actions .onboarding-suggestion-chip:hover {
    color: var(--accent-primary) !important;
    background: var(--accent-secondary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] #onboardingSuggestions .onboarding-suggestion-chip,
[data-theme="glass"] #onboardingSuggestions .onboarding-suggestion-chip {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] #onboardingSuggestions .onboarding-suggestion-chip:hover,
[data-theme="glass"] #onboardingSuggestions .onboarding-suggestion-chip:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}
[data-theme="light"] .onboarding-quick-actions-chips .onboarding-suggestion-chip,
[data-theme="glass"] .onboarding-quick-actions-chips .onboarding-suggestion-chip {
    color: var(--text-primary) !important;
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .onboarding-quick-actions-chips .onboarding-suggestion-chip:hover,
[data-theme="glass"] .onboarding-quick-actions-chips .onboarding-suggestion-chip:hover {
    color: var(--accent-primary) !important;
    background: var(--accent-secondary) !important;
    border-color: var(--accent-primary) !important;
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] .welcome-hero {
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        box-shadow: var(--shadow-md);
    }
    [data-theme="system"] .welcome-message .welcome-message-text {
        color: var(--text-primary);
        text-shadow: none;
    }
    [data-theme="system"] .welcome-prelist-gear-btn.welcome-prelist-reveal {
        color: var(--accent-primary);
        background: var(--bg-input);
        border-color: var(--border-color);
        text-decoration: none;
    }
    [data-theme="system"] .welcome-prelist-menu {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        box-shadow: var(--shadow-lg);
    }
    [data-theme="system"] .welcome-prelist-btn.welcome-prelist-btn--line {
        color: var(--text-primary);
        border-bottom-color: var(--border-color);
    }
    [data-theme="system"] .welcome-prelist-btn.welcome-prelist-btn--tile {
        color: var(--text-primary);
        background: var(--bg-tertiary);
        border-color: var(--border-color);
    }
    [data-theme="system"] .welcome-prelist-line-title {
        color: var(--text-primary);
    }
    [data-theme="system"] .welcome-prelist-line-desc {
        color: var(--text-muted);
    }
    [data-theme="system"] .welcome-prelist-line-icon {
        background: var(--accent-secondary);
        color: var(--accent-primary);
    }
    [data-theme="system"] .welcome-quick-actions .onboarding-suggestion-chip {
        color: var(--text-primary) !important;
        background: var(--bg-input) !important;
        border: 1px solid var(--accent-primary) !important;
    }
    [data-theme="system"] .welcome-quick-actions .onboarding-suggestion-chip:hover {
        color: var(--accent-primary) !important;
        background: var(--accent-secondary) !important;
    }
}

/* Additional animations for enhanced UX */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: var(--space-xs) 0;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: typing 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    30% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Subtle hover effects for interactive elements */
.message-content a:hover {
    text-decoration: underline;
    color: var(--accent-primary);
}

/* Improved scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Sidebar quick-actions panel (opens from "Ações rápidas" button) */
.sidebar-quick-actions-wrap {
    position: relative;
}
.header-quick-actions-wrap {
    position: relative;
}
.header-mcps-wrap {
    position: relative;
}
.header-automations-wrap,
.header-connectors-wrap,
.header-memory-wrap {
    position: relative;
}
.header-mcps-btn {
    position: relative;
}
.mcps-header-panel-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 36px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 8px;
}
.mcps-header-panel-footer {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 8px 0;
    margin-top: 2px;
    border-top: 1px solid var(--border-color);
    line-height: 1.35;
}
.mcps-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-primary);
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
}
.mcps-header-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mcps-header-row-dot.ok {
    background: #25d366;
}
.mcps-header-row-dot.bad {
    background: #ff4444;
}
.mcps-header-row-dot.neutral {
    background: #888;
}
.mcps-header-row-name {
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcps-header-row-hint {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    max-width: 42%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quick-actions-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    margin-bottom: 6px;
    padding: 12px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 280px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.quick-actions-panel.active {
    display: flex;
}
.quick-actions-panel-header {
    bottom: auto;
    top: 100%;
    margin-top: 6px;
    margin-bottom: 0;
    left: auto;
    right: 0;
    min-width: 280px;
    width: 280px;
    max-width: 280px;
}
@media (max-width: 768px) {
    /* Em mobile o header usa overflow para scroll horizontal; o painel precisa
     * ser fixed para não ser cortado/clipped pelo header. */
    .quick-actions-panel-header {
        position: fixed !important;
        top: calc(48px + env(safe-area-inset-top) + 6px) !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: min(280px, calc(100vw - 20px)) !important;
        min-width: 240px !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1200 !important;
    }
}
.quick-actions-panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.quick-actions-panel-list {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
.quick-actions-panel-list .auto-prompt-item {
    pointer-events: auto;
    cursor: pointer;
}
.quick-actions-panel-manage-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-actions-panel-manage-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Quick Actions - no longer shown below prompt; access via sidebar "Ações rápidas" */
.quick-actions {
    display: none !important;
}

.quick-actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.quick-actions-list .auto-prompt-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.quick-actions-list .auto-prompt-item:hover {
    background: rgba(0, 217, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.quick-actions-list .auto-prompt-item .auto-prompt-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 13px;
    opacity: 0.7;
}

.quick-actions-list .auto-prompt-item:hover .auto-prompt-item-icon {
    opacity: 1;
}

.quick-actions-list .auto-prompt-item .auto-prompt-item-label {
    font-size: 13px;
    line-height: 1.2;
}

.quick-actions-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.quick-actions-manage-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
    color: var(--text-secondary);
    transform: rotate(45deg);
}

.quick-actions-list .auto-prompts-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 8px;
}

@media (max-width: 768px) {
    .quick-actions {
        margin-top: 12px;
        gap: 6px;
    }

    .quick-actions-list .auto-prompt-item {
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 16px;
    }
}

/* Toast notification */
.toast-container {
    position: fixed;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: min(420px, calc(100vw - 32px));
    border: 1px solid transparent;
}
.toast--success {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: rgba(0, 217, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 217, 255, 0.08);
}
.toast--success .toast-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}
.toast--error {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: rgba(255, 100, 100, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.toast--error .toast-icon {
    color: #ff6464;
    flex-shrink: 0;
}
.toast-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.toast-message {
    flex: 1;
}
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.toast.toast-out {
    animation: toastOut 0.25s ease forwards;
}
@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}