@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&subset=latin,latin-ext&display=swap'); /* AI avatar favicon — animasyonlu RGB renk */
@keyframes ai-rgb {
    0% {
        color: #a78bfa;
    }

    16% {
        color: #60a5fa;
    }

    33% {
        color: #34d399;
    }

    50% {
        color: #fbbf24;
    }

    66% {
        color: #f87171;
    }

    83% {
        color: #e879f9;
    }

    100% {
        color: #a78bfa;
    }
}

.ai-fav-svg {
    animation: ai-rgb 6s linear infinite;
    display: block;
}

/* FOUC Prevention — sayfa beyaz aÃÆ'§Ä±lmasın */
html {
    background: #f5f0eb;
}

html[data-theme='dark'] {
    background: #111111 !important;
}

html[data-theme='dark'] body {
    background: #111111 !important;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   GlomaxGPT ÃÆ'¢â‚¬â€ Original UI

   Brand: Deep Teal ÃÆ'ƒâ€” Indigo gradient, soft corporate

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ App Layout with Sidebar ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.app-with-sidebar {
    display: flex;
    width: 100%;
    min-height: 100vh;
    /* overridden on mobile */
}

.settings-main, .profile-main, .pricing-main, .page-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    min-height: 0;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Inner page body layout (sidebar + main) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
body:has(.sidebar) {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MOBILE LAYOUT  (ÃÆ'¢â€°Â¤768px)

   Sidebar is position:fixed and slides in from left.

   mobile-page-header (from sidebar.php) is the top nav bar.

   main-content fills the full screen below mobile-page-header.

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
@media (max-width: 768px) {
    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Body: flex column on mobile ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */ body:has(.sidebar) {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ app-with-sidebar: flex column so mobile-page-header sits on top ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar {
        flex: 1;
        min-height: 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ mobile-page-header: fixed height at top of app-with-sidebar ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .mobile-page-header {
        flex-shrink: 0;
        width: 100%;
        position: relative;
        z-index: 200;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ main-content: fills remaining space, scrollable ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .main-content {
        flex: 1;
        width: 100%;
        height: 0 !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--main-bg);
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ page-main / profile-main / settings-main / pricing-main inside main-content ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .main-content > .page-main, .app-with-sidebar .main-content > .profile-main, .app-with-sidebar .main-content > .settings-main, .app-with-sidebar .main-content > .pricing-main {
        flex: 1 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Hide desktop topbar ÃÆ'¢â‚¬â€ mobile-page-header handles nav ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .main-content > .topbar {
        display: none !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ index.php: sidebar + main-content are direct body children ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    body:has(.sidebar) > .main-content {
        flex: 1;
        height: 0 !important;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--main-bg);
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ messages-container: scrollable content area ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .messages-container, body:has(.sidebar) > .main-content > .messages-container {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        display: block;
        background: var(--main-bg);
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ page-main variants (profile, pricing, settings, etc.) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    body:has(.sidebar) .profile-main, body:has(.sidebar) .pricing-main, body:has(.sidebar) .settings-main, body:has(.sidebar) .page-main, .app-with-sidebar .profile-main, .app-with-sidebar .pricing-main, .app-with-sidebar .settings-main, .app-with-sidebar .page-main {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        height: 0 !important;
        display: block !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ main-content on inner pages must be flex column ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .main-content:has(.page-main), .app-with-sidebar .main-content:has(.profile-main), .app-with-sidebar .main-content:has(.settings-main), .app-with-sidebar .main-content:has(.pricing-main) {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Light Theme (default) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
/* �� Semantic theme tokens �� */
:root {
    /* LIGHT theme palette — Sıcak Krem */
    --bg-page: #f5f0eb;
    --bg-sidebar: #ede8e2;
    --bg-surface: #ede8e2;
    --bg-elevated: #e4dfd8;
    --bg-input: #f0ebe5;
    --bg-hover: #e4dfd8;
    --bg-active: #d5cfc8;
    --text-primary: #1a1a1a;
    --text-secondary: #6b6560;
    --text-placeholder: #a09890;
    --border-subtle: #d5cfc8;
    --border-control: #c8c2bb;
    --button-primary-bg: #3a3530;
    --button-primary-text: #f5f0eb;
    --button-primary-hover: #2a2520;
    --focus-ring: #3a3530;
    --overlay-bg: rgba(0,0,0,.4);
    --shadow-color: rgba(0,0,0,.06);
    --selection-bg: rgba(58,53,48,.12);
    --selection-text: inherit;
    --scrollbar-thumb: #b0aaa3;
    --scrollbar-track: #e0dbd4;
    /* Legacy aliases */
    --sidebar-bg: #ede8e2;
    --sidebar-hover: #e4dfd8;
    --sidebar-active: #d5cfc8;
    --main-bg: #f5f0eb;
    --surface: #ede8e2;
    --surface2: #e4dfd8;
    --surface3: #d5cfc8;
    --input-bg: #f0ebe5;
    --input-border: #c8c2bb;
    --border: #d5cfc8;
    --border2: #b0aaa3;
    --accent: #3a3530;
    --accent2: #6b6560;
    --accent-h: #1a1a1a;
    --accent-soft: rgba(58,53,48,.08);
    --accent-grad: linear-gradient(135deg,#3a3530,#1a1a1a);
    --text: #1a1a1a;
    --text2: #6b6560;
    --text3: #a09890;
    --text4: #b0aaa3;
    --user-msg-bg: #e4dfd8;
    --code-bg: #ede8e2;
    --code-header: #e4dfd8;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --info: var(--text3);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --sidebar-w: 260px;
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    --transition: .15s ease;
    --shadow: 0 2px 12px rgba(0,0,0,.06);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
    color-scheme: light;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Dark Theme ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
[data-theme="dark"] {
    /* DARK theme palette — Derin Siyah */
    --bg-page: #111111;
    --bg-sidebar: #1a1a1a;
    --bg-surface: #1a1a1a;
    --bg-elevated: #222222;
    --bg-input: #1e1e1e;
    --bg-hover: #222222;
    --bg-active: #2a2a2a;
    --text-primary: #f0f0f0;
    --text-secondary: #999999;
    --text-placeholder: #555555;
    --border-subtle: #2e2e2e;
    --border-control: #333333;
    --button-primary-bg: #d4d4d4;
    --button-primary-text: #111111;
    --button-primary-hover: #f0f0f0;
    --focus-ring: #d4d4d4;
    --overlay-bg: rgba(0,0,0,.7);
    --shadow-color: rgba(0,0,0,.6);
    --selection-bg: rgba(212,212,212,.15);
    --selection-text: inherit;
    --scrollbar-thumb: #444444;
    --scrollbar-track: #2a2a2a;
    /* Legacy aliases */
    --sidebar-bg: #1a1a1a;
    --sidebar-hover: #222222;
    --sidebar-active: #2e2e2e;
    --main-bg: #111111;
    --surface: #1a1a1a;
    --surface2: #222222;
    --surface3: #2a2a2a;
    --input-bg: #1e1e1e;
    --input-border: #333333;
    --border: #2e2e2e;
    --border2: #444444;
    --accent: #d4d4d4;
    --accent2: #999999;
    --accent-h: #f0f0f0;
    --accent-soft: rgba(212,212,212,.10);
    --accent-grad: linear-gradient(135deg,#d4d4d4,#f0f0f0);
    --text: #f0f0f0;
    --text2: #999999;
    --text3: #555555;
    --text4: #444444;
    --user-msg-bg: #222222;
    --code-bg: #1a1a1a;
    --code-header: #222222;
    --shadow: 0 4px 24px rgba(0,0,0,.5);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.6);
    color-scheme: dark;
}

/* Light theme explicit selector (for JS toggle) */
[data-theme="light"] {
    --bg-page: #f5f0eb;
    --bg-sidebar: #ede8e2;
    --bg-surface: #ede8e2;
    --bg-elevated: #e4dfd8;
    --bg-input: #f0ebe5;
    --bg-hover: #e4dfd8;
    --bg-active: #d5cfc8;
    --text-primary: #1a1a1a;
    --text-secondary: #6b6560;
    --text-placeholder: #a09890;
    --border-subtle: #d5cfc8;
    --border-control: #c8c2bb;
    --button-primary-bg: #3a3530;
    --button-primary-text: #f5f0eb;
    --button-primary-hover: #2a2520;
    --focus-ring: #3a3530;
    --overlay-bg: rgba(0,0,0,.4);
    --shadow-color: rgba(0,0,0,.06);
    --selection-bg: rgba(58,53,48,.12);
    --selection-text: inherit;
    --scrollbar-thumb: #b0aaa3;
    --scrollbar-track: #e0dbd4;
    --sidebar-bg: #ede8e2;
    --sidebar-hover: #e4dfd8;
    --sidebar-active: #d5cfc8;
    --main-bg: #f5f0eb;
    --surface: #ede8e2;
    --surface2: #e4dfd8;
    --surface3: #d5cfc8;
    --input-bg: #f0ebe5;
    --input-border: #c8c2bb;
    --border: #d5cfc8;
    --border2: #b0aaa3;
    --accent: #3a3530;
    --accent2: #6b6560;
    --accent-h: #1a1a1a;
    --accent-soft: rgba(58,53,48,.08);
    --accent-grad: linear-gradient(135deg,#3a3530,#1a1a1a);
    --text: #1a1a1a;
    --text2: #6b6560;
    --text3: #a09890;
    --text4: #b0aaa3;
    --user-msg-bg: #e4dfd8;
    --code-bg: #ede8e2;
    --code-header: #e4dfd8;
    --shadow: 0 2px 12px rgba(0,0,0,.06);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
    color-scheme: light;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Reset ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: var(--font);
    background: var(--main-bg);
    color: var(--text);
    height: 100vh;
    display: flex;
    overflow: hidden;
    font-size: var(--font-size-base, 14px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
    font-family: var(--font);
    border: none;
    background: none;
}

textarea, input, select {
    font-family: var(--font);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, transparent);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(128,128,128,.3));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128,128,128,.5);
}

/* Text selection */
::selection {
    background: #000000;
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   SIDEBAR

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width .25s cubic-bezier(.4,0,.2,1), min-width .25s cubic-bezier(.4,0,.2,1), transform var(--transition);
    z-index: 100;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    position: relative;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Expand button (only visible when collapsed, desktop) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-expand-btn {
    display: none;
    /* hidden by default; shown only when collapsed */
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sidebar-hover);
    border: 1px solid var(--border);
    color: var(--text3);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 10;
    flex-shrink: 0;
}

.sidebar-expand-btn:hover {
    background: var(--sidebar-active);
    color: var(--text);
}

.sidebar.collapsed .sidebar-expand-btn {
    display: flex;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Collapsed sidebar (icon-only, desktop) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}

.sidebar.collapsed .sidebar-logo-text, .sidebar.collapsed .sidebar-search-wrap, .sidebar.collapsed .sidebar-nav-item span, .sidebar.collapsed .sidebar-more-toggle span, .sidebar.collapsed .sidebar-more-items, .sidebar.collapsed .sidebar-conversations, .sidebar.collapsed .sidebar-spacer, .sidebar.collapsed .sidebar-footer .usage-bar, .sidebar.collapsed .sidebar-footer .user-info, .sidebar.collapsed .sidebar-footer .sidebar-guest-auth, .sidebar.collapsed .sidebar-footer .sidebar-guest-cta, .sidebar.collapsed .sidebar-collapse-label {
    display: none !important;
}

.sidebar.collapsed .sidebar-top {
    justify-content: center;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .sidebar-top-right {
    display: none;
}

.sidebar.collapsed .sidebar-nav {
    padding: 2px 6px 4px;
}

.sidebar.collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
    position: relative;
}

.sidebar.collapsed .sidebar-nav-item:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border2);
}

.sidebar.collapsed .sidebar-footer {
    padding: 8px 6px;
}

.sidebar.collapsed .sidebar-user-item {
    justify-content: center;
    padding: 10px;
}

.sidebar.collapsed .sidebar-user-item .user-info, .sidebar.collapsed .sidebar-user-item > svg {
    display: none;
}

.sidebar.collapsed .sidebar-nav-divider {
    margin: 4px 6px;
}

/* Collapse toggle button (in sidebar-top-right) */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .875rem;
    color: var(--text3);
    cursor: pointer;
    transition: all var(--transition);
    background: none;
    border: none;
    font-family: var(--font);
    text-align: left;
}

.sidebar-collapse-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

.sidebar-collapse-btn svg {
    flex-shrink: 0;
    transition: transform .25s ease;
}

/* Sidebar logo icon */
.sidebar-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.35);
}

/* Sidebar logo gradient dot (legacy, keep for compat) */
.sidebar-logo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(100,100,100,.5);
}

/* Sidebar top */
.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 8px;
    gap: 4px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0px;
    border-radius: 9px;
    color: var(--text);
    transition: background var(--transition);
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.sidebar-logo:hover {
    background: var(--sidebar-hover);
    text-decoration: none;
}

/* Favicon icon in sidebar logo */
.sidebar-logo-favicon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
    transition: transform var(--transition);
}

.sidebar-logo:hover .sidebar-logo-favicon {
    opacity: .85;
}

/* When collapsed: show only favicon, hide text */
.sidebar.collapsed .sidebar-logo {
    justify-content: center;
    gap: 0;
    padding: 0px;
}

.sidebar.collapsed .sidebar-logo-text {
    display: none;
}

.sidebar.collapsed .sidebar-logo-favicon {
    box-shadow: 0 2px 10px rgba(100,100,100,.4);
}

.sidebar-logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--button-primary-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.sidebar-top-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sidebar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--text3);
    transition: all var(--transition);
    text-decoration: none;
}

.sidebar-icon-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}

/* Search */
.sidebar-search-wrap {
    padding: 4px 10px 6px;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: var(--surface2);
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.sidebar-search:focus-within {
    border-color: var(--border2);
    box-shadow: 0 0 0 3px rgba(100,100,100,.07);
}

.sidebar-search svg {
    color: var(--text3);
    flex-shrink: 0;
}

.sidebar-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: .82rem;
    color: var(--text);
    font-family: var(--font);
}

.sidebar-search input::placeholder {
    color: var(--text4);
}

/* Nav */
.sidebar-nav {
    padding: 2px 10px 4px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .875rem;
    color: var(--text2);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    user-select: none;
}

.sidebar-nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}

.sidebar-nav-item.active {
    background: var(--sidebar-active);
    color: var(--text);
    font-weight: 600;
}

.sidebar-nav-item svg {
    flex-shrink: 0;
}

.sidebar-nav-item span {
}

.sidebar-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 5px 10px;
}

.sidebar-spacer {
    flex: 0;
}

/* More items */
.sidebar-more-toggle {
    color: var(--text3);
}

.sidebar-more-toggle:hover {
    color: var(--text);
}

.sidebar-more-items {
    padding-left: 0;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Collapse / expand buttons: desktop only ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
#sidebar-collapse-btn, .sidebar-expand-btn {
    display: none;
    /* hidden on mobile by default */
}

@media (min-width: 769px) {
    #sidebar-collapse-btn {
        display: flex !important;
        margin-left: 10px;
        display: none !important;
    }

    .sidebar.collapsed .sidebar-expand-btn {
        display: flex !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar nav active left-bar indicator ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-nav-item.active {
    position: relative;
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--button-primary-bg);
}

.sidebar.collapsed .sidebar-nav-item.active::before {
    display: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar usage bar improved ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.usage-track {
    height: 4px;
    background: var(--sidebar-active);
    border-radius: 3px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    background: var(--button-primary-bg);
    border-radius: 3px;
    transition: width .5s ease;
}

/* Theme toggle for guests */
.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: .82rem;
    color: var(--text3);
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 4px;
}

.sidebar-theme-toggle:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

/* Conversation list */
.sidebar-section-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text3);
    padding: 8px 12px 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebar-conversations {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}

.conv-group-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text3);
    padding: 10px 8px 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition);
    position: relative;
    min-height: 36px;
}

.conv-item:hover {
    background: var(--sidebar-hover);
}

.conv-item.active {
    background: var(--sidebar-active);
}

.conv-item-text {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.conv-item-time {
    font-size: .72rem;
    color: var(--text3);
    flex-shrink: 0;
}

.conv-item-actions {
    display: none;
    gap: 2px;
    flex-shrink: 0;
}

.conv-item:hover .conv-item-actions {
    display: flex;
}

.conv-item:hover .conv-item-time {
    display: none;
}

.conv-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.conv-action-btn:hover {
    background: var(--sidebar-active);
    color: var(--text);
}

.conv-action-btn.danger:hover {
    color: var(--error);
}

.conv-loading {
    text-align: center;
    color: var(--text3);
    padding: 20px;
    font-size: .875rem;
}

/* Sidebar search */
.sidebar-search {
    position: relative;
    margin: 0 8px 6px;
}

.sidebar-search input {
    width: 100%;
    padding: 0px 0px 0px 0px;
    background: #1e1e2800;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: .875rem;
    outline: none;
    transition: all var(--transition);
}

.sidebar-search input:focus {
    border-color: var(--border2);
}

.sidebar-search input::placeholder {
    color: var(--text3);
}

.sidebar-search .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    pointer-events: none;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .875rem;
    color: var(--text2);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.sidebar-footer-item:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}

.sidebar-footer-item svg {
    flex-shrink: 0;
}

.sidebar-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition);
    position: relative;
}

.sidebar-user-item:hover {
    background: var(--sidebar-hover);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-plan {
    font-size: .72rem;
    color: var(--text3);
}

/* Usage bar */
.usage-bar {
    padding: 4px 10px 8px;
}

.usage-label {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--text3);
    margin-bottom: 5px;
}

.usage-track {
    height: 3px;
    background: var(--sidebar-active);
    border-radius: 2px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width .5s ease;
}

/* User menu popup */
.user-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    z-index: 200;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .875rem;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}

.user-menu-item:hover {
    background: var(--surface2);
    text-decoration: none;
}

.user-menu-item svg {
    color: var(--text3);
    flex-shrink: 0;
}

.user-menu-danger {
    color: var(--error);
}

.user-menu-danger svg {
    color: var(--error);
}

.user-menu-divider {
    height: 1px;
    background: var(--border);
}

/* Guest sidebar CTA */
.sidebar-guest-cta {
    margin: 8px;
    padding: 12px;
    background: var(--sidebar-hover);
    border-radius: 10px;
    font-size: .82rem;
    color: var(--text2);
    line-height: 1.6;
}

.sidebar-guest-cta strong {
    color: var(--text);
    display: block;
    margin-bottom: 4px;
    font-size: .875rem;
}

.btn-sidebar-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    background: var(--button-primary-bg, var(--accent));
    color: var(--button-primary-text);
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition);
    text-decoration: none;
}

.btn-sidebar-login:hover {
    text-decoration: none;
    color: var(--button-primary-text) !important;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MAIN CONTENT

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* overridden on mobile */
    overflow: hidden;
    background: var(--main-bg);
    position: relative;
    min-width: 0;
    /* prevent flex overflow */
    min-height: 0;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Topbar ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    gap: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* GX FIX: model-selector display:none kaldirildi */

.model-btn {
    display: none !important;
}

.model-menu {
    display: none !important;
}

.topbar-model-chip {
    display: none !important;
}

.model-indicator {
    display: none !important;
}

/* Topbar buttons */
.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.btn-icon:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

/* Tek hamburger butonu */
.sidebar-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Desktop'ta hamburger gizli — sidebar zaten görünür */
@media (min-width: 769px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
}

/* Mobilde hamburger görünür */
@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: flex !important;
    }
}

/* Eski class'lar geriye dönük uyumluluk için */
.sidebar-toggle-mobile {
    display: none;
}

.sidebar-toggle-desktop {
    display: none;
}

/* Auth buttons in topbar (guest) */
.btn-topbar-login {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    transition: background var(--transition);
}

.btn-topbar-login:hover {
    background: var(--sidebar-hover);
}

.btn-topbar-register {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    background: var(--text);
    color: var(--button-primary-text);
    transition: opacity var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-topbar-register:hover {
    text-decoration: none;
    color: var(--button-primary-text) !important;
}

/* Announcement */
.announcement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    font-size: .85rem;
    flex-shrink: 0;
    gap: 10px;
}

.announcement button {
    color: inherit;
    opacity: .6;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.announcement button:hover {
    opacity: 1;
}

.announcement-info {
    background: var(--bg-hover, #E2E2E2);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.announcement-warning {
    background: var(--bg-hover, #E2E2E2);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.announcement-success {
    background: var(--bg-hover, #E2E2E2);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.announcement-error {
    background: rgba(239,68,68,.08);
    color: var(--error);
    border-bottom: 1px solid rgba(239,68,68,.2);
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MESSAGES AREA

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Welcome / Empty state ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    max-height: 100%;
    padding: 20px 20px 12px;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Animated gradient logo mark */
.welcome-logo-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 8px 32px rgba(100,100,100,.3);
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%,100% {
        transform: translateY(0);
        box-shadow: 0 8px 32px rgba(100,100,100,.3);
    }

    50% {
        transform: translateY(-4px);
        box-shadow: 0 14px 40px rgba(100,100,100,.4);
    }
}

[data-theme="dark"] .welcome-logo-mark {
    box-shadow: 0 8px 32px rgba(120,120,120,.25);
}

.welcome-screen h1 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.welcome-screen h1 span {
    background: var(--button-primary-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    font-size: .95rem;
    color: var(--text3);
    margin-bottom: 18px;
    max-width: 420px;
}

/* Capability cards grid */
.capability-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 660px;
    width: 100%;
    margin-bottom: 16px;
}

.cap-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    cursor: pointer;
    transition: all .2s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.cap-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--button-primary-bg);
    opacity: 0;
    transition: opacity .2s;
}

.cap-card:hover {
    border-color: var(--border2);
    box-shadow: var(--shadow-sm);
}

.cap-card:hover::before {
    opacity: .04;
}

.cap-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    color: var(--accent);
    position: relative;
}

.cap-card-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    position: relative;
}

.cap-card-desc {
    font-size: .78rem;
    color: var(--text3);
    line-height: 1.5;
    position: relative;
}

/* Guest info banner */
.guest-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--accent-soft);
    border: 1px solid rgba(100,100,100,.2);
    border-radius: 10px;
    margin-bottom: 14px;
    max-width: 600px;
    width: 100%;
    font-size: .85rem;
    color: var(--text2);
    text-align: left;
}

.guest-banner svg {
    color: var(--accent);
    flex-shrink: 0;
}

.guest-banner a {
    color: var(--accent);
    font-weight: 600;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Guest inline CTA (welcome screen, kÃÆ'ƒÂ¼ÃÆ'ƒÂ§ÃÆ'ƒÂ¼k paragraf) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.guest-inline-cta {
    font-size: .8rem;
    color: var(--text3);
    margin-top: -16px;
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.6;
    max-width: 480px;
}

.guest-inline-cta a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.guest-inline-cta a:hover {
    text-decoration: underline;
}

/* Suggestion pills */
.suggestion-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 660px;
    width: 100%;
}

/* �� Medya �retim Kartlar� (Welcome Screen) �� */
.media-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 660px;
    width: 100%;
    margin-top: 18px;
}

.media-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    transition: transform .18s, box-shadow .18s, border-color .18s;
    position: relative;
    cursor: pointer;
}

.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-color: var(--accent);
}

.media-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.media-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.media-card-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.media-card-desc {
    font-size: .68rem;
    color: var(--text3);
    line-height: 1.3;
}

.media-card-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 2px 7px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    font-size: .6rem;
    font-weight: 700;
}

/* Input toolbar medya butonlar� � n�tr gri */
.btn-tool-gen-image {
    color: var(--text-secondary) !important;
}

.btn-tool-gen-image:hover {
    background: var(--bg-hover) !important;
}

.btn-tool-gen-music {
    color: var(--text-secondary) !important;
}

.btn-tool-gen-music:hover {
    background: var(--bg-hover) !important;
}

.btn-tool-gen-video {
    color: var(--text-secondary) !important;
}

.btn-tool-gen-video:hover {
    background: var(--bg-hover) !important;
}

@media (max-width: 600px) {
    .media-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .media-card {
        padding: 12px 8px 10px;
    }

    .media-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .media-card-title {
        font-size: .75rem;
    }

    .media-card-desc {
        display: none;
    }
}

.suggestion-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: .85rem;
    color: var(--text2);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.suggestion-pill:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(100,100,100,.3);
    transform: translateY(-1px);
}

.suggestion-pill svg {
    color: var(--text3);
    flex-shrink: 0;
    transition: color .15s;
}

.suggestion-pill:hover svg {
    color: var(--accent);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Message rows ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.message {
    padding: 6px 0;
    display: flex;
    justify-content: center;
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

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

.message-inner {
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    display: flex;
    gap: 16px;
}

/* User message ÃÆ'¢â‚¬â€ right-aligned bubble like ChatGPT */
.message.user .message-inner {
    flex-direction: row-reverse;
}

.message.user .message-body {
    background: #22222200;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    max-width: 80%;
}

.message.assistant .message-body {
    flex: 1;
    min-width: 0;
}

.message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    margin-top: 2px;
    overflow: hidden;
}

.message.user .message-avatar {
    background: var(--button-primary-bg);
    color: #fff;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
}

.message.assistant .message-avatar {
    background: var(--bg-surface, #080f1c) !important;
    color: var(--text-primary, #dff0ff);
    border: none;
    box-shadow: 0 2px 8px rgba(80,80,80,.25);
}

[data-theme="light"] .message.assistant .message-avatar {
    background: #ffffff !important;
    color: #0f172a;
}

.message-content {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--text);
    word-break: break-word;
}

/* Markdown */
.message-content h1,.message-content h2,.message-content h3 {
    margin: 1em 0 .5em;
    font-weight: 700;
    line-height: 1.3;
}

.message-content h1 {
    font-size: 1.4em;
}

.message-content h2 {
    font-size: 1.2em;
}

.message-content h3 {
    font-size: 1.05em;
}

.message-content p {
    margin-bottom: .75em;
}

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

.message-content ul,.message-content ol {
    padding-left: 1.5em;
    margin-bottom: .75em;
}

.message-content li {
    margin-bottom: .3em;
}

.message-content blockquote {
    border-left: 3px solid var(--border2);
    padding-left: 14px;
    color: var(--text2);
    margin: .75em 0;
}

.message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: .75em 0;
    font-size: .9em;
}

.message-content th,.message-content td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.message-content th {
    background: var(--surface);
    font-weight: 600;
}

.message-content tr:nth-child(even) {
    background: var(--surface);
}

.message-content a {
    color: var(--accent);
}

.message-content strong {
    font-weight: 700;
}

.message-content em {
    font-style: italic;
}

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

.message-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: .5em 0;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Code blocks ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.message-content pre {
    background: var(--code-bg);
    border-radius: 10px;
    margin: .75em 0;
    overflow: hidden;
    border: 1px solid var(--border);
    /* theme-aware shadow */
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

[data-theme="dark"] .message-content pre {
    box-shadow: 0 2px 16px rgba(0,0,0,.4);
}

/* Light theme: slightly warmer code bg */
[data-theme="light"] .message-content pre {
    background: #f8f8fc;
    border-color: #e2e2ea;
}

[data-theme="dark"] .message-content pre {
    background: #0d0d14;
    border-color: rgba(255,255,255,.08);
}

/* �� Code Block Header � ChatGPT tarz� �������������������� */
.code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 48px;
    min-height: 48px;
    background: var(--code-header, #3e73e61c);
    border-bottom: 1px solid var(--border);
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

[data-theme="light"] .code-header {
    background: #eeeef6;
    border-bottom-color: #e2e2ea;
}

[data-theme="dark"] .code-header {
    background: #16161f;
    border-bottom-color: rgba(255,255,255,.07);
}

.code-lang {
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 1;
}

/* Group the action buttons on the right */
.code-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-copy-code, .btn-preview-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(128,128,200,.08);
    border: 1px solid rgba(128,128,200,.18);
    color: var(--text3);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .71rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font);
    white-space: nowrap;
    line-height: 1;
}

.btn-copy-code svg, .btn-preview-code svg {
    flex-shrink: 0;
}

.btn-copy-code:hover {
    color: var(--text);
    background: rgba(128,128,200,.2);
    border-color: rgba(128,128,200,.35);
}

.btn-preview-code:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.btn-preview-code.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

[data-theme="light"] .btn-copy-code, [data-theme="light"] .btn-preview-code {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.1);
}

[data-theme="light"] .btn-copy-code:hover {
    background: rgba(0,0,0,.09);
    border-color: rgba(0,0,0,.18);
}

.message-content pre code {
    display: block;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: .875rem;
    line-height: 1.65;
    overflow-x: auto;
    color: var(--text);
}

[data-theme="light"] .message-content pre code {
    color: #1e1e2e;
}

[data-theme="dark"] .message-content pre code {
    color: #e2e2f0;
}

.message-content code:not(pre code) {
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .875em;
    color: var(--accent);
    border: 1px solid var(--border);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Code block wrap + preview above code ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.code-block-wrap {
    margin: .75em 0;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 520px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    position: relative;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,200,.3) transparent;
}

.code-block-wrap::-webkit-scrollbar {
    width: 5px;
}

.code-block-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.code-block-wrap::-webkit-scrollbar-thumb {
    background: rgba(128,128,200,.3);
    border-radius: 3px;
}

[data-theme="dark"] .code-block-wrap {
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 2px 16px rgba(0,0,0,.4);
}

/* When wrapped, remove individual pre margin/border/radius */
.code-block-wrap pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
    overflow-y: visible;
}

/* Browser-chrome preview bar */
.code-preview-frame {
    background: #fff;
    border-bottom: 1px solid var(--border);
    animation: previewSlide .22s ease;
}

[data-theme="dark"] .code-preview-frame {
    background: #12121a;
    border-bottom-color: rgba(255,255,255,.08);
}

@keyframes previewSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* Top chrome bar */
.code-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0f0f5;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

[data-theme="dark"] .code-preview-bar {
    background: #1e1e2a;
    border-bottom-color: rgba(255,255,255,.07);
}

/* Traffic-light dots */
.code-preview-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.cpd {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.cpd-red {
    background: #ff5f57;
}

.cpd-yellow {
    background: #febc2e;
}

.cpd-green {
    background: #28c840;
}

.code-preview-bar-label {
    flex: 1;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text3);
    text-align: center;
    letter-spacing: .03em;
}

.code-preview-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--text3);
    transition: all var(--transition);
    flex-shrink: 0;
}

.code-preview-close:hover {
    background: rgba(0,0,0,.1);
    color: var(--text);
}

[data-theme="dark"] .code-preview-close:hover {
    background: rgba(255,255,255,.1);
}

/* The iframe itself */
.code-preview-frame iframe {
    width: 100%;
    min-height: 200px;
    max-height: 520px;
    border: none;
    display: block;
    background: #fff;
}

[data-theme="dark"] .code-preview-frame iframe {
    background: #12121a;
}

/* Message actions */
/* Aksiyon �ubu�u � mesaj balonunun d���nda, hemen alt�nda */
.message-actions-bar {
    display: flex;
    align-items: center;
    padding: 0 24px;
    max-width: 56rem;
    margin: 0 auto;
    min-height: 0;
    flex-wrap: wrap;
}

/* Asistan mesaj�: avatar (28px) + gap (16px) kadar girinti */
.message.assistant .message-actions-bar {
    padding-left: calc(24px + 28px + 16px);
}

/* Kullan�c� mesaj�: sa�a hizal� */
.message.user .message-actions-bar {
    justify-content: flex-end;
}

.message-actions {
    display: flex;
    gap: 2px;
    opacity: 1;
    transition: none;
}

.message:focus-within .message-actions {
    opacity: 1;
}

.msg-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--text3);
    font-size: .78rem;
    transition: all var(--transition);
    font-family: var(--font);
}

.msg-action-btn:hover {
    background: var(--surface);
    color: var(--text);
}

.msg-action-btn svg {
    flex-shrink: 0;
}

.msg-action-btn.liked {
    color: var(--accent);
}

.msg-action-btn.disliked {
    color: var(--error);
}

/* Attachments */
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.msg-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--text2);
    max-width: 200px;
}

.msg-attachment img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

/* ── Typing indicator (ChatGPT-style) ─────────────────────── */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 6px 0;
    align-items: center;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    animation: gxTypingBounce 1.2s ease-in-out infinite;
    will-change: transform, opacity;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }

@keyframes gxTypingBounce {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: .45;
    }
    30% {
        transform: translateY(-6px) scale(1.15);
        opacity: 1;
    }
}

/* ── Typing status label (ChatGPT shimmer effect) ─────────── */
.typing-status {
    font-size: .78rem;
    color: var(--text3);
    margin-left: 8px;
    font-style: normal;
    letter-spacing: .01em;
    transition: color .3s, opacity .3s;
    position: relative;
    display: inline-block;
}

/* Shimmer / pulse animation on the status text */
.typing-status-anim {
    animation: gxStatusSlideIn .35s cubic-bezier(.22,1,.36,1) both,
               gxStatusShimmer 2.4s ease-in-out 0.35s infinite;
}

@keyframes gxStatusSlideIn {
    from { opacity: 0; transform: translateY(5px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* Subtle shimmer: text fades between 70%–100% opacity */
@keyframes gxStatusShimmer {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* State-specific colours */
.typing-status[data-state="thinking"] {
    color: var(--accent, #7c3aed);
    font-weight: 600;
}

.typing-status[data-state="writing"] {
    color: var(--accent, #7c3aed);
    font-weight: 600;
}

.typing-status[data-state="done"] {
    color: var(--text3);
    font-weight: 400;
    animation: gxStatusSlideIn .3s ease both;
}

/* Ellipsis dots that animate after the status text */
.typing-status-anim::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: gxEllipsis 1.4s steps(4, end) infinite;
    letter-spacing: -.05em;
}

@keyframes gxEllipsis {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100%{ content: ''; }
}

.typing-status-text {
    font-size: .75rem;
    color: var(--text3);
    margin-left: 8px;
    animation: none;
}

/* Model indicator chip in input area */
.model-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    background: var(--accent-soft);
    border: 1px solid rgba(100,100,100,.2);
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
    cursor: default;
    user-select: none;
    width: fit-content;
}

.model-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    animation: indicatorPulse 2s infinite;
}

@keyframes indicatorPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.75);
    }
}

/* Topbar model chip */
.topbar-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text2);
    cursor: default;
    transition: all .15s;
}

.topbar-model-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.topbar-model-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    flex-shrink: 0;
    animation: indicatorPulse 2s infinite;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   INPUT AREA ÃÆ'¢â‚¬â€ GloMax branded pill input

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.input-wrapper {
    padding: 12px 16px 20px;
    background: transparent;
    flex-shrink: 0;
}

.input-area {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.att-preview-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--text2);
    max-width: 180px;
}

.att-preview-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.att-preview-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.att-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--error);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.att-send-as-text-btn {
    flex-shrink: 0;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .7rem;
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.att-send-as-text-btn:hover {
    background: var(--surface2);
    color: var(--text1);
}

.image-options {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.img-opt-select {
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .8rem;
    outline: none;
}

/* The main input box */
.input-box {
    display: flex;
    flex-direction: column;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px 12px 10px 16px;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 16px rgba(0,0,0,.18);
}

.input-box:focus-within {
    border-color: var(--border);
    box-shadow: 0 2px 16px rgba(0,0,0,.18);
}

[data-theme="light"] .input-box {
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

[data-theme="light"] .input-box:focus-within {
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#message-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: .9375rem;
    line-height: 1.6;
    resize: none;
    max-height: 200px;
    min-height: 24px;
    padding: 2px 0;
}

#message-input::placeholder {
    color: var(--text3);
}

.input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.input-actions-left {
    display: flex;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

.input-actions-right {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

.btn-tool {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.btn-tool:hover {
    background: transparent;
    color: var(--text);
}

.btn-tool.active {
    color: var(--accent);
    background: var(--accent-soft);
}

.btn-tool.recording {
    color: var(--error);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

.btn-send {
    width: 34px;
    height: 34px;
    background: var(--button-primary-bg);
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(100,100,100,.4);
}

.btn-send:hover:not(:disabled) {
    opacity: 1;
    box-shadow: none;
}

.btn-send:disabled {
    opacity: .3;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* �� Speed Picker ������������������������������������������� */
.speed-picker {
    position: relative;
    display: flex;
    align-items: center;
}

.speed-picker-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

.speed-picker-btn:hover {
    border-color: var(--border2);
    background: var(--surface2);
    color: var(--text);
}

.speed-picker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.speed-picker-icon svg {
    display: block;
}

.speed-chevron {
    flex-shrink: 0;
    opacity: .6;
}

.speed-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text2);
}

.speed-option-icon svg {
    display: block;
}

.speed-picker-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    overflow: hidden;
    min-width: 180px;
    z-index: 9999;
}

.speed-picker-dropdown.open {
    display: block;
}

/* Speed picker parent'lar�n overflow'unu ge�mesi i�in */
.speed-picker {
    overflow: visible !important;
    position: relative;
    z-index: 9999;
}

.speed-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text2);
    font-size: .82rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}

.speed-picker-option:hover {
    background: var(--surface2);
    color: var(--text);
}

.speed-picker-option.active {
    color: var(--text);
    background: var(--surface2);
}

.speed-option-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.speed-option-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.speed-option-name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.speed-option-desc {
    font-size: .72rem;
    color: var(--text3);
    line-height: 1.2;
}

[data-theme="light"] .speed-picker-dropdown {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.btn-stop {
    width: 32px;
    height: 32px;
    background: var(--text);
    border-radius: 8px;
    color: var(--button-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.btn-stop:hover {
    opacity: .85;
}

.input-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 4px 0;
    font-size: .72rem;
    color: var(--text4);
}

/* Guest notice in input */
.guest-input-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .8rem;
    color: var(--text2);
    margin-bottom: 8px;
}

.guest-input-notice a {
    color: var(--accent);
    font-weight: 600;
}

.guest-input-notice svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MODALS

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: none;
}

.modal-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow);
    animation: modalIn .2s ease;
}

.modal-lg {
    max-width: 680px;
}

.modal-sm {
    max-width: 360px;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(.96)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.modal-header button {
    color: var(--text3);
    padding: 4px;
    border-radius: 6px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
}

.modal-header button:hover {
    background: var(--surface2);
    color: var(--text);
}

.modal-body {
    padding: 18px 22px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Form elements ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 6px;
}

.form-group textarea, .form-group input, .form-input {
    width: 100%;
    padding: 9px 13px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .9rem;
    outline: none;
    transition: border-color var(--transition);
    resize: vertical;
    font-family: var(--font);
}

.form-group textarea:focus, .form-group input:focus, .form-input:focus {
    border-color: var(--border2);
    box-shadow: 0 0 0 3px rgba(16,163,127,.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

.btn-primary {
    padding: 9px 18px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
}

.btn-primary:hover {
    background: var(--button-primary-hover);
    text-decoration: none;
    color: var(--button-primary-text);
}

.btn-secondary {
    padding: 9px 18px;
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
}

.btn-secondary:hover {
    background: var(--surface3);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Prompt Library ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.prompt-search {
    margin-bottom: 12px;
}

.prompt-search input {
    width: 100%;
    padding: 9px 13px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .9rem;
    outline: none;
    font-family: var(--font);
}

.prompt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.prompt-item {
    padding: 12px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}

.prompt-item:hover {
    border-color: var(--border2);
    background: var(--surface3);
}

.prompt-item-title {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.prompt-item-desc {
    font-size: .8rem;
    color: var(--text2);
}

.prompt-item-cat {
    display: inline-block;
    font-size: .7rem;
    padding: 2px 8px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 4px;
    margin-top: 6px;
    font-weight: 500;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Toast ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: .875rem;
    min-width: 240px;
    max-width: 360px;
    animation: toastIn .3s ease;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px)
    }

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

.toast-success {
    border-left: 3px solid var(--success);
}

.toast-error {
    border-left: 3px solid var(--error);
}

.toast-info {
    border-left: 3px solid var(--info);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast svg {
    flex-shrink: 0;
}

.toast-success svg {
    color: var(--success);
}

.toast-error svg {
    color: var(--error);
}

.toast-info svg {
    color: var(--info);
}

.toast-warning svg {
    color: var(--warning);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ PWA Banner (floating, bottom) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow);
    z-index: 1500;
    max-width: 420px;
    width: calc(100% - 32px);
    animation: slideUp .3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0)
    }
}

.pwa-banner-icon {
    color: var(--accent);
    flex-shrink: 0;
}

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

.pwa-banner-text strong {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.pwa-banner-text span {
    font-size: .78rem;
    color: var(--text2);
}

.pwa-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-pwa-install {
    padding: 7px 14px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    font-family: var(--font);
}

.btn-pwa-install:hover {
    background: var(--accent-h);
}

.btn-pwa-dismiss {
    padding: 7px 10px;
    background: none;
    color: var(--text3);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
}

.btn-pwa-dismiss:hover {
    background: var(--surface2);
    color: var(--text);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ PWA Promo Banner (inline, above input box) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.pwa-promo-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--accent-soft);
    border: 1px solid rgba(100,100,100,.2);
    border-radius: 12px;
    animation: fadeIn .3s ease;
}

[data-theme="light"] .pwa-promo-banner {
    background: rgba(100,100,100,.06);
    border-color: rgba(100,100,100,.18);
}

.pwa-promo-banner.hidden {
    display: none;
}

.pwa-promo-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.35);
}

.pwa-promo-text {
    flex: 1;
    min-width: 0;
}

.pwa-promo-text strong {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-promo-text span {
    font-size: .75rem;
    color: var(--text3);
}

.pwa-promo-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pwa-promo-install {
    padding: 6px 14px;
    background: var(--button-primary-bg);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition);
    font-family: var(--font);
    white-space: nowrap;
}

.pwa-promo-install:hover {
    opacity: .88;
}

.pwa-promo-close {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.pwa-promo-close:hover {
    background: var(--surface2);
    color: var(--text);
}

@media (max-width: 480px) {
    .pwa-promo-text span {
        display: none;
    }

    .pwa-promo-install {
        padding: 6px 10px;
        font-size: .75rem;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar Guest Auth Buttons ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-guest-auth {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 10px 12px;
    border-top: none !important;
}

/* Promo card */
.guest-auth-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid rgba(100,100,100,.15);
    border-radius: 12px;
    margin-bottom: 2px;
}

[data-theme="light"] .guest-auth-card {
    background: rgba(100,100,100,.06);
    border-color: rgba(100,100,100,.14);
}

.guest-auth-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
}

.guest-auth-card-body {
    flex: 1;
    min-width: 0;
}

.guest-auth-card-body strong {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.guest-auth-card-body span {
    font-size: .72rem;
    color: var(--text3);
    line-height: 1.4;
    display: block;
}

/* Google button */
.btn-sidebar-google {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: #fff;
    color: #3c4043;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    border: 1px solid #dadce0;
}

.btn-sidebar-google:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
    transform: translateY(-1px);
    text-decoration: none;
}

[data-theme="dark"] .btn-sidebar-google {
    background: #2a2a38;
    color: #e8e8f0;
    border-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .btn-sidebar-google:hover {
    background: #32323e;
    box-shadow: 0 3px 12px rgba(0,0,0,.4);
}

/* Login / Register row */
.guest-auth-row {
    display: flex;
    gap: 6px;
}

.btn-sidebar-login-sm, .btn-sidebar-register-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    flex: 1;
}

.btn-sidebar-login-sm {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-sidebar-login-sm:hover {
    background: var(--surface3);
    text-decoration: none;
}

.btn-sidebar-register-sm {
    background: var(--button-primary-bg);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
}

.btn-sidebar-register-sm:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(100,100,100,.4);
    text-decoration: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar overlay (mobile) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 499;
    -webkit-backdrop-filter: none;
    cursor: pointer;
}

.sidebar-overlay.show, .sidebar-overlay.active, body.sidebar-open .sidebar-overlay {
    display: block;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Responsive ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    /* Sidebar slides in from left as an overlay ÃÆ'¢â‚¬â€ does NOT affect page layout */ .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        transform: translateX(-100%);
        z-index: 500;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        /* Remove collapsed state on mobile */
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Never collapse sidebar on mobile */
    .sidebar.collapsed {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
    }

    .sidebar-toggle-mobile {
        display: flex;
    }

    .message-inner {
        padding: 0 12px;
    }

    .input-wrapper {
        padding: 8px 12px 16px;
        background: transparent;
    }

    .topbar {
        padding: 0 10px;
    }

    .welcome-screen h1 {
        font-size: 1.5rem;
    }

    .welcome-subtitle {
        font-size: .875rem;
    }

    .capability-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cap-card {
        padding: 12px 10px;
    }

    .cap-card-desc {
        display: none;
    }

    .suggestion-pills {
        gap: 6px;
    }

    .suggestion-pill {
        font-size: .82rem;
        padding: 8px 12px;
    }

    .topbar-model-chip {
        display: none;
    }

    .model-indicator {
        font-size: .7rem;
    }

    .welcome-logo-mark {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    /* login butonu mobilde görünür kalmalı */ /* .topbar-right .btn-topbar-login { display: none; } */ .message.user .message-body {
        max-width: 90%;
    }

    .capability-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .auth-card {
        padding: 24px 16px;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MESSAGE EDITOR OVERLAY

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.msg-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.65);
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .18s ease;
}

.msg-editor-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalIn .2s ease;
    overflow: hidden;
}

.msg-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.msg-editor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}

.msg-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msg-editor-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
}

.msg-editor-btn:hover {
    background: var(--surface3);
    color: var(--text);
}

.msg-editor-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #050816;
    color: var(--text3);
    transition: all var(--transition);
}

.msg-editor-close:hover {
    background: var(--surface2);
    color: var(--text);
}

.msg-editor-textarea {
    flex: 1;
    min-height: 300px;
    max-height: 60vh;
    padding: 18px 20px;
    background: var(--main-bg);
    border: none;
    outline: none;
    resize: none;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.75;
    font-family: var(--font-mono);
    overflow-y: auto;
}

.msg-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.msg-editor-chars {
    font-size: .75rem;
    color: var(--text3);
}

@media (max-width: 600px) {
    .msg-editor-box {
        max-height: 95vh;
        border-radius: 12px;
    }

    .msg-editor-textarea {
        font-size: .82rem;
        padding: 14px;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   Contextual Tip Banners  (ChatGPT-style)

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.tip-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 8px auto 4px;
    max-width: 720px;
    padding: 14px 18px;
    background: var(--surface, #111120);
    border: 1px solid var(--border2, rgba(255,255,255,.10));
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    position: relative;
}

[data-theme="light"] .tip-banner {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.tip-banner.visible {
    opacity: 1;
    transform: translateY(0);
}

.tip-banner.hiding {
    opacity: 0;
    transform: translateY(-6px);
}

.tip-banner-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .tip-banner-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

.tip-banner-body {
    flex: 1;
    min-width: 0;
}

.tip-banner-title {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text, #eeeef8);
    margin-bottom: 3px;
}

[data-theme="light"] .tip-banner-title {
    color: var(--text);
}

.tip-banner-text {
    font-size: .78rem;
    color: var(--text2, #8888aa);
    line-height: 1.5;
}

[data-theme="light"] .tip-banner-text {
    color: var(--text2);
}

.tip-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tip-banner-cta {
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.tip-banner-cta:hover {
    background: var(--accent-h);
}

.tip-banner-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border, rgba(255,255,255,.06));
    background: transparent;
    color: var(--text3, #4a4a6a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.tip-banner-close:hover {
    background: var(--surface2, #181828);
    color: var(--text, #eeeef8);
}

[data-theme="light"] .tip-banner-close {
    border-color: rgba(0,0,0,.08);
    color: #888;
}

[data-theme="light"] .tip-banner-close:hover {
    background: #f5f5f8;
    color: #333;
}

@media (max-width: 600px) {
    .tip-banner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .tip-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   Code Editor Modal

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.code-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.75);
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.code-editor-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.code-editor-dialog {
    background: var(--surface, #111120);
    border: 1px solid var(--border2, rgba(255,255,255,.1));
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    transform: scale(.96);
    transition: transform .2s;
}

.code-editor-overlay.open .code-editor-dialog {
    transform: scale(1);
}

.code-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
    flex-shrink: 0;
}

.code-editor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text, #eeeef8);
}

.code-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.code-editor-header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--border2, rgba(255,255,255,.1));
    background: var(--surface2, #181828);
    color: var(--text2, #8888aa);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.code-editor-header-actions button:hover {
    background: var(--surface3, #1e1e32);
    color: var(--text, #eeeef8);
}

.code-editor-close {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text3, #4a4a6a) !important;
}

.code-editor-close:hover {
    color: var(--error, #ef4444) !important;
}

.code-editor-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#code-editor-textarea {
    flex: 1;
    width: 100%;
    min-height: 300px;
    max-height: 60vh;
    background: var(--bg, #080810);
    color: var(--text, #eeeef8);
    border: none;
    outline: none;
    resize: none;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: .84rem;
    line-height: 1.7;
    padding: 18px 20px;
    tab-size: 2;
}

#code-editor-preview-pane {
    flex: 1;
    border-top: 1px solid var(--border, rgba(255,255,255,.06));
}

#code-editor-iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: none;
}

.code-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid var(--border, rgba(255,255,255,.06));
    flex-shrink: 0;
}

.code-editor-stats {
    font-size: .74rem;
    color: var(--text3, #4a4a6a);
}

.btn-ghost-sm {
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--border2, rgba(255,255,255,.1));
    background: transparent;
    color: var(--text2, #8888aa);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.btn-ghost-sm:hover {
    background: var(--surface2, #181828);
    color: var(--text, #eeeef8);
}

.btn-primary-sm {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.btn-primary-sm:hover {
    background: var(--accent-h);
}

/* Edit button in code header */
.btn-edit-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text3);
    font-size: .71rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1;
}

.btn-edit-code svg {
    flex-shrink: 0;
}

.btn-edit-code:hover {
    background: var(--surface3);
    border-color: var(--border2);
    color: var(--accent-h);
}

[data-theme="light"] .btn-edit-code {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
    color: #555;
}

[data-theme="light"] .btn-edit-code:hover {
    background: var(--surface3);
    border-color: var(--border2);
    color: var(--accent-h);
}

@media (max-width: 600px) {
    .code-editor-dialog {
        max-width: 100%;
        border-radius: 12px;
    }

    #code-editor-textarea {
        font-size: .78rem;
        padding: 12px;
    }

    .code-editor-header-actions button span {
        display: none;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   MOBILE TOP HEADER  (inner pages: pricing, profile, etc.)

   Shown only on mobile ÃÆ'¢â‚¬â€ hidden on desktop via sidebar

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.mobile-page-header {
    display: none;
    /* hidden on desktop */
    position: relative;
    z-index: 200;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    /* Ensure it doesn't shrink and stays at top in flex column layout */
    width: 100%;
}

.mobile-page-header-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.mobile-page-header-logo:hover {
    text-decoration: none;
}

/* Mobile logo mark (ChatGPT-style icon) */
.mobile-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
}

/* Mobile logo text */
.mobile-logo-text {
    font-family: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
    font-weight: 300;
    font-size: .88rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.mobile-page-header-logo:hover {
    text-decoration: none;
}

.mobile-page-header-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--button-primary-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(100,100,100,.3);
}

.mobile-page-header-center {
    flex: 1;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-page-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--text2);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.mobile-back-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}

.mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--text2);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
}

.mobile-hamburger:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

/* Mobile header action buttons (theme toggle, etc.) */
.mobile-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--text2);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
}

.mobile-header-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

/* Mobile header login button */
.mobile-header-login-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--button-primary-bg);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.mobile-header-login-btn:hover {
    text-decoration: none;
    color: var(--text);
}

@media (max-width: 768px) {
    .mobile-page-header {
        display: flex;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   INNER PAGE LAYOUT  (pages that use sidebar + main area)

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
.inner-page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Page section card (unified across profile, pricing, etc.) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.page-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

.page-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.page-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-section-icon.blue {
    background: var(--surface2);
    color: var(--text2);
}

.page-section-icon.green {
    background: var(--surface2);
    color: var(--text2);
}

.page-section-icon.purple {
    background: var(--surface2);
    color: var(--text2);
}

.page-section-icon.orange {
    background: var(--surface2);
    color: var(--text2);
}

.page-section-icon.red {
    background: var(--surface2);
    color: var(--text2);
}

.page-section-icon.cyan {
    background: var(--accent-soft);
    color: var(--accent);
}

.page-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.page-section-subtitle {
    font-size: .78rem;
    color: var(--text3);
    margin-top: 2px;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Form controls (unified) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.field-group {
    margin-bottom: 16px;
}

.field-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 6px;
}

.field-hint {
    font-size: .75rem;
    color: var(--text3);
    margin-top: 4px;
}

.field-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--text);
    font-size: .875rem;
    font-family: var(--font);
    outline: none;
    transition: border-color var(--transition);
}

.field-input:focus {
    border-color: var(--accent);
}

.field-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.field-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.field-input-row .field-input {
    flex: 1;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Stat cards (unified) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.stat-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--button-primary-bg);
}

.stat-card-inner .sci-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.stat-card-inner .sci-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    background: var(--button-primary-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card-inner .sci-label {
    font-size: .75rem;
    color: var(--text3);
    font-weight: 500;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tab bar (unified) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.page-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface2);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tab-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text3);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.page-tab-btn:hover {
    color: var(--text);
    background: var(--surface3);
}

.page-tab-btn.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

[data-theme="dark"] .page-tab-btn.active {
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Profile avatar upload ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.avatar-upload-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: var(--surface2);
    border-radius: 12px;
    margin-bottom: 20px;
}

.avatar-upload-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--border2);
}

.avatar-upload-info {
    flex: 1;
}

.avatar-upload-info h4 {
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.avatar-upload-info p {
    font-size: .78rem;
    color: var(--text3);
}

.avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 8px;
}

.avatar-upload-btn:hover {
    background: var(--surface2);
    color: var(--text);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Plan badge (profile header) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.plan-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(100,100,100,.2);
}

.plan-badge-pill.free {
    background: rgba(107,114,128,.1);
    color: var(--text3);
    border-color: var(--border);
}

.plan-badge-pill.pro {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--border2);
}

.plan-badge-pill.ultra {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Inline alert ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .83rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.inline-alert.success {
    background: var(--surface2);
    border: 1px solid var(--border-subtle);
    color: var(--text2);
}

.inline-alert.error {
    background: var(--surface2);
    border: 1px solid var(--border-control);
    color: var(--text);
}

.inline-alert.info {
    background: var(--surface2);
    border: 1px solid var(--border-subtle);
    color: var(--text2);
}

.inline-alert.warning {
    background: var(--surface2);
    border: 1px solid var(--border-subtle);
    color: var(--text2);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Toast notification ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.page-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    transition: all .3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.page-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.page-toast.success {
    border-color: rgba(16,185,129,.3);
}

.page-toast.error {
    border-color: rgba(239,68,68,.3);
}

.page-toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.page-toast.success .page-toast-dot {
    background: #10b981;
}

.page-toast.error .page-toast-dot {
    background: #ef4444;
}

.page-toast.info .page-toast-dot {
    background: var(--text2);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tab pane (used by profile, settings, etc.) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Responsive inner pages ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    .stat-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-section {
        padding: 16px;
    }

    .avatar-upload-wrap {
        flex-direction: column;
        text-align: center;
    }

    .page-tabs {
        border-radius: 10px;
    }

    .page-tab-btn {
        padding: 7px 12px;
        font-size: .78rem;
    }
}

@media (max-width: 480px) {
    .stat-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card-inner .sci-val {
        font-size: 1.2rem;
    }

    .field-input-row {
        flex-direction: column;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Web Search Result Cards ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.search-results-wrap {
    max-width: 720px;
    width: 100%;
    margin: 0 auto 12px;
    animation: reply-in .25s ease;
}

.search-results-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--text3);
    margin-bottom: 8px;
    padding: 0 2px;
}

.search-results-header svg {
    flex-shrink: 0;
    color: var(--accent);
}

.search-results-header strong {
    color: var(--text2);
    font-weight: 600;
}

.search-results-toggle {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text3);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}

.search-results-toggle:hover {
    color: var(--text);
    background: var(--sidebar-hover);
}

.search-results-wrap.collapsed .search-results-grid {
    display: none;
}

.search-results-wrap.collapsed .search-results-toggle svg {
    transform: rotate(180deg);
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.search-result-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    overflow: hidden;
}

.search-result-card:hover {
    border-color: rgba(100,100,100,.4);
    box-shadow: 0 2px 12px rgba(100,100,100,.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.src-card-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.src-card-snippet {
    font-size: .72rem;
    color: var(--text3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.src-card-host {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    color: var(--accent);
    margin-top: 2px;
    font-weight: 500;
}

.src-card-host svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .search-results-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   GlomaxGPT ÃÆ'¢â‚¬â€ Modern UI KatmanÃÆ'„± v2 (inline)

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
:root {
    --glass-bg: rgba(255,255,255,0.72);
    --glass-border: rgba(255,255,255,0.5);
    --accent-rgb: 14,165,233;
    --accent2-rgb: 99,102,241;
    --success-rgb: 16,185,129;
    --error-rgb: 239,68,68;
    --warning-rgb: 245,158,11;
    --anim-spring: cubic-bezier(0.34,1.56,0.64,1);
    --anim-smooth: cubic-bezier(0.4,0,0.2,1);
    --input-radius: 18px;
    --msg-radius: 18px;
    --card-radius: 14px;
}

[data-theme="dark"] {
    --glass-bg: rgba(22,22,34,0.82);
    --glass-border: rgba(255,255,255,0.08);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ GÃÆ'ƒÂ¶rsel yÃÆ'ƒÂ¼kleme butonu ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.btn-tool-image {
    position: relative;
    color: var(--accent)!important;
    transition: all .2s var(--anim-smooth);
}

.btn-tool-image:hover {
    background: var(--surface2)!important;
    opacity: .85;
}

.att-preview-item img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border2);
    cursor: pointer;
    transition: transform .2s var(--anim-spring),box-shadow .2s;
}

.att-preview-item img:hover {
    box-shadow: var(--shadow-sm);
    opacity: .9;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ GÃÆ'ƒÂ¶rsel ÃÆ'ƒÂ¶nizleme modal ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.img-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s var(--anim-smooth);
}

.img-preview-modal.open {
    opacity: 1;
}

.img-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.img-preview-box {
    position: relative;
    z-index: 1;
    max-width: min(90vw,900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: imgPreviewIn .3s var(--anim-spring);
}

@keyframes imgPreviewIn {
    from {
        transform: scale(.88) translateY(20px);
        opacity: 0
    }

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

.img-preview-img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    object-fit: contain;
}

.img-preview-close {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(255 255 255 / 87%);
    backdrop-filter: none;
    border: 3px solid rgb(255 11 11);
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    z-index: 2;
}

.img-preview-close:hover {
    background: rgba(239,68,68,.9);
}

.img-preview-actions {
    display: flex;
    gap: 8px;
}

.img-preview-actions .btn-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    transition: all .2s;
}

.img-preview-actions .btn-secondary:hover {
    background: rgba(255,255,255,.22);
    text-decoration: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Fiyat karÃÆ'…ŸÃÆ'„±laÃÆ'…ŸtÃÆ'„±rma ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.price-header {
    background: linear-gradient(135deg,rgba(var(--success-rgb),.08) 0%,rgba(var(--accent-rgb),.06) 100%);
}

.price-header svg {
    color: var(--success);
}

.price-summary {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.price-badge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    min-width: 140px;
    flex: 1;
}

.price-badge-cheapest {
    background: rgba(var(--success-rgb),.1);
    border: 1px solid rgba(var(--success-rgb),.25);
}

.price-badge-expensive {
    background: rgba(var(--error-rgb),.07);
    border: 1px solid rgba(var(--error-rgb),.2);
}

.price-badge-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.price-badge-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.03em;
}

.price-badge-cheapest .price-badge-val {
    color: var(--success);
}

.price-badge-expensive .price-badge-val {
    color: var(--error);
}

.price-badge-src {
    font-size: .72rem;
    color: var(--text4);
}

.src-card-price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--success);
    letter-spacing: -.02em;
}

.search-result-card.src-card-cheapest {
    background: rgba(var(--success-rgb),.06);
    border-left: 3px solid var(--success);
}

.search-result-card.src-card-cheapest:hover {
    background: rgba(var(--success-rgb),.1);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Mesaj animasyonlarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.message {
    animation: msgIn .28s var(--anim-smooth);
}

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

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

.message.user .message-content {
    border-radius: var(--msg-radius) var(--msg-radius) 4px var(--msg-radius);
}

.message.assistant .message-content {
    border-radius: 0px var(--msg-radius) var(--msg-radius) var(--msg-radius);
}

.message-content img {
    max-width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .2s var(--anim-spring),box-shadow .2s;
    display: block;
    margin: 0px 0;
}

.message-content img:hover {
    box-shadow: var(--shadow);
    opacity: .95;
}

.msg-attachment img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all .2s var(--anim-spring);
}

.msg-attachment img:hover {
    border-color: var(--border2);
    box-shadow: var(--shadow-sm);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ KarÃÆ'…ŸÃÆ'„±lama ekranÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.welcome-screen {
    animation: welcomeIn .5s var(--anim-smooth);
}

@keyframes welcomeIn {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

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

#welcome-greeting {
    background: var(--button-primary-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#welcome-greeting span {
    -webkit-text-fill-color: transparent;
}

.suggestion-pill {
    transition: all .2s var(--anim-spring)!important;
}

.suggestion-pill:hover {
    background: var(--surface2)!important;
    border-color: var(--border2)!important;
}

.suggestion-pill:active {
    opacity: .8!important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Misafir CTA ÃÆ'¢â‚¬â€ sadece ilk mesajda gÃÆ'ƒÂ¶ster ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Paket / Kalan GÃÆ'ƒÂ¼n satÃÆ'„±rÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.usage-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.usage-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb),.1);
    border-radius: 20px;
    padding: 2px 8px;
}

.usage-days-left {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
}

.usage-days-warn {
    color: #f59e0b !important;
}

.usage-days-urgent {
    color: #ef4444 !important;
    animation: pulse 1.5s infinite;
}

.usage-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-top: 5px;
    opacity: .85;
    transition: opacity .15s;
}

.usage-upgrade-link:hover {
    opacity: 1;
    text-decoration: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Guest CTA ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.guest-inline-cta {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 10px 0 2px;
    font-size: .84rem;
    color: var(--text3);
    line-height: 1.5;
    width: 100%;
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    animation: fadeIn .5s var(--anim-smooth);
}

.guest-cta-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb),.25);
    transition: border-color .15s, color .15s;
}

.guest-cta-link:hover {
    color: var(--accent-h);
    border-color: var(--accent);
    text-decoration: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Topbar butonlarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.btn-topbar-login {
    padding: 6px 14px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text2);
    border: 1px solid var(--border2);
    background: transparent;
    transition: all .18s;
    text-decoration: none;
}

.btn-topbar-login:hover {
    background: var(--surface2);
    color: var(--text);
    text-decoration: none;
}

/* btn-topbar-register — unified system, see end of file */
.btn-topbar-register:hover {
    opacity: .88;
    text-decoration: none;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar iyileÃÆ'…Ÿtirmeleri ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--button-primary-bg);
}

.user-avatar {
    transition: transform .2s var(--anim-spring);
}

.sidebar-user-item:hover .user-avatar {
    opacity: .85;
}

.usage-fill {
    transition: width .6s var(--anim-smooth)!important;
    background: var(--button-primary-bg);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Toast ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border2);
    animation: toastIn .3s var(--anim-spring)!important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Modal ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.modal-box {
    animation: modalIn .28s var(--anim-spring)!important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ GÃÆ'ƒÂ¶nder butonu ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.btn-send {
    transition: all .2s var(--anim-spring)!important;
}

.btn-send:not(:disabled):hover {
    opacity: 1!important;
}

.btn-send:not(:disabled):active {
    opacity: .7!important;
}

.btn-tool {
    transition: all .18s var(--anim-smooth)!important;
}

.btn-tool:hover {
    background: transparent !important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tip banner ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.tip-banner {
    border-radius: 14px!important;
    border: 1px solid var(--border)!important;
    background: var(--surface)!important;
    backdrop-filter: none;
    transition: all .3s var(--anim-smooth)!important;
}

.tip-banner.visible {
    animation: tipIn .35s var(--anim-spring)!important;
}

@keyframes tipIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97)
    }

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

.typing-dot {
    background: var(--accent)!important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Scroll to bottom ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.scroll-bottom-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border2);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all .2s var(--anim-spring);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.scroll-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-bottom-btn:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border2);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Animasyonlar ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.loading-shimmer {
    background: linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Dark mode ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
[data-theme="dark"] .search-result-card:hover {
    background: var(--surface3);
}

[data-theme="dark"] .img-preview-backdrop {
    background: rgb(0 0 0 / 96%);
}

[data-theme="dark"] .price-badge-cheapest {
    background: rgba(var(--success-rgb),.12);
}

[data-theme="dark"] .price-badge-expensive {
    background: rgba(var(--error-rgb),.1);
}

[data-theme="dark"] .guest-inline-cta {
    background: linear-gradient(135deg,rgba(var(--accent-rgb),.1) 0%,rgba(var(--accent2-rgb),.08) 100%);
    border-color: rgba(var(--accent-rgb),.2);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Mobil ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    .img-preview-modal {
        padding:12px;
    }

    .img-preview-box {
        max-width: 100%;
    }

    .img-preview-img {
        max-height: 65vh;
        border-radius: 12px;
    }

    .price-summary {
        flex-direction: column;
    }

    .price-badge {
        min-width: unset;
    }

    .btn-topbar-login,.btn-topbar-register {
        padding: 7px 12px;
        font-size: .78rem;
    }

    #welcome-greeting {
        font-size: 1.4rem!important;
    }

    .msg-attachment img {
        width: 90px;
        height: 68px;
    }
}

@media (max-width: 480px) {
    .search-results-header {
        font-size:.72rem;
        padding: 8px 10px;
    }

    .search-result-card {
        padding: 10px 12px;
    }

    .src-card-title {
        font-size: .78rem;
    }

    .price-badge-val {
        font-size: .95rem;
    }
}

@media print {
    .sidebar,.topbar,.input-wrapper,.pwa-promo-banner,.tip-banner,.search-results-wrap,.price-compare-wrap {
        display: none!important;
    }

    .messages-container {
        overflow: visible!important;
        height: auto!important;
    }

    .message {
        break-inside: avoid;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Kamera Butonu (input-actions-left iÃÆ'ƒÂ§inde) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.btn-tool-camera {
    color: var(--text3);
    transition: color .15s, transform .15s;
}

.btn-tool-camera:hover {
    color: var(--accent);
    transform: scale(1.1);
}

.btn-tool-camera svg {
    transition: transform .2s;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Prompt KÃÆ'ƒÂ¼tÃÆ'ƒÂ¼phanesi Sidebar Link ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.sidebar-nav-item[href="/prompt-library"] {
    position: relative;
}

.sidebar-nav-item[href="/prompt-library"].active {
    color: var(--accent);
    background: var(--accent-soft);
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ GÃÆ'ƒÂ¶rsel Analiz YÃÆ'ƒÂ¼kleniyor Overlay ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.vision-analyzing-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

.vision-analyzing-overlay span {
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(0,0,0,.6);
    padding: 6px 12px;
    border-radius: 20px;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   RESÃÆ'„°M ANALÃÆ'„°Z MODALI

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
/* Analiz butonu (input toolbar) */
.btn-tool-analyze {
    color: var(--accent);
}

.btn-tool-analyze:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Modal genel */
.ia-modal .modal-box.ia-modal-box {
    max-width: 640px;
    width: 96%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.ia-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

.ia-modal-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text1);
}

.ia-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
}

.ia-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Dropzone */
.ia-dropzone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: var(--bg2);
    text-align: center;
    user-select: none;
}

.ia-dropzone:hover, .ia-dropzone.drag-over {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ia-dropzone-icon {
    color: var(--text3);
    transition: color .18s;
}

.ia-dropzone:hover .ia-dropzone-icon, .ia-dropzone.drag-over .ia-dropzone-icon {
    color: var(--accent);
}

.ia-dropzone-text {
    margin: 0;
    font-size: .9rem;
    color: var(--text2);
    font-weight: 500;
}

.ia-dropzone-link {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.ia-dropzone-hint {
    margin: 0;
    font-size: .78rem;
    color: var(--text3);
    line-height: 1.5;
}

/* ÃÆ'ƒâ€“nizleme */
.ia-preview {
    position: relative;
}

.ia-preview-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.ia-preview-img {
    max-width: 100%;
    max-height: 260px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--border);
    display: block;
}

.ia-remove-img {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,.55);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background .15s;
}

.ia-remove-img:hover {
    background: rgba(220,38,38,.8);
}

/* Prompt alanÃÆ'„± */
.ia-prompt-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ia-prompt-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text2);
}

.ia-prompt-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg2);
    color: var(--text1);
    font-size: .875rem;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    transition: border-color .15s;
    box-sizing: border-box;
}

.ia-prompt-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* YÃÆ'ƒÂ¼kleniyor */
.ia-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: var(--text2);
    font-size: .875rem;
    background: var(--bg2);
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Hata */
.ia-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    font-size: .875rem;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .ia-error {
    background: rgba(220,38,38,.12);
    border-color: rgba(220,38,38,.3);
    color: #f87171;
}

/* SonuÃÆ'ƒÂ§ kutusu */
.ia-result {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg1);
}

.ia-result-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text2);
}

.ia-model-badge {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ia-result-body {
    padding: 14px 16px;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--text1);
    max-height: 320px;
    overflow-y: auto;
}

.ia-result-body p {
    margin: 0 0 .6em;
}

.ia-result-body p:last-child {
    margin-bottom: 0;
}

.ia-result-body ul, .ia-result-body ol {
    padding-left: 1.4em;
    margin: .4em 0;
}

.ia-result-body li {
    margin-bottom: .25em;
}

.ia-result-body pre {
    border-radius: 6px;
    overflow-x: auto;
}

.ia-result-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg2);
}

.ia-btn-sm {
    font-size: .78rem !important;
    padding: 5px 10px !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Analiz butonu */
.ia-analyze-btn {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Spin animasyonu */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin .8s linear infinite;
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   KAPSAMLI MOBÃÆ'„°L UYUMLULUK ÃÆ'¢â‚¬â€ TÃÆ'ƒÂ¼m sidebar sayfalarÃÆ'„±

   Hedef: history, image-gen, video-gen, music-gen, code-gen,

   tools, voice, projects, favorites, files, notifications,

   plugins, shared, models, privacy, help, settings, terms,

   subscription, prompt-library, security, stats, status,

   explore, support, changelog, profile, pricing

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ TÃÆ'ƒÂ¼m iÃÆ'ƒÂ§ sayfa layout container'larÃÆ'„± (gerÃÆ'ƒÂ§ek class isimleri) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
.history-layout, .imagegen-layout, .vg-wrap, .mg-wrap, .cg-wrap, .cg-layout, .tools-layout, .explore-layout, .help-layout, .plugins-layout, .tools-layout, .page-wrap, .page-hero, .profile-layout, .settings-layout, .pricing-layout, .inner-page-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tablet (ÃÆ'¢â€°Â¤1024px) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 1024px) {
    .history-layout, .imagegen-layout, .vg-wrap, .mg-wrap, .cg-wrap, .cg-layout, .tools-layout, .explore-layout, .help-layout, .plugins-layout, .page-wrap, .profile-layout, .settings-layout, .pricing-layout, .inner-page-wrap {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Mobil (ÃÆ'¢â€°Â¤768px) ÃÆ'¢â‚¬â€ Ana layout dÃÆ'ƒÂ¼zeltmeleri ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ TÃÆ'ƒÂ¼m iÃÆ'ƒÂ§ sayfa layout container'larÃÆ'„± (gerÃÆ'ƒÂ§ek class isimleri) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */ .history-layout, .imagegen-layout, .vg-wrap, .mg-wrap, .cg-wrap, .cg-layout, .tools-layout, .explore-layout, .help-layout, .plugins-layout, .page-wrap, .profile-layout, .settings-layout, .pricing-layout, .inner-page-wrap {
        max-width: 100% !important;
        padding: 16px 14px 80px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Grid sistemleri ÃÆ'¢â‚¬â€ 2 sÃÆ'ƒÂ¼tundan 1'e ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .vg-grid, .mg-grid, .cg-grid, .tools-grid, .projects-grid, .files-grid, .stats-grid, .explore-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Form satÃÆ'„±rlarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .form-row, .form-grid, .input-row, .btn-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Kart baÃÆ'…ŸlÃÆ'„±klarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .page-header, .section-header, .card-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Buton gruplarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .btn-group, .action-row, .header-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tablo ÃÆ'¢â€ â€™ kart gÃÆ'ƒÂ¶rÃÆ'ƒÂ¼nÃÆ'ƒÂ¼mÃÆ'ƒÂ¼ ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .data-table, .admin-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: .8rem !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Stat kartlarÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .stats-bar, .stat-grid, .kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ BÃÆ'ƒÂ¼yÃÆ'ƒÂ¼k baÃÆ'…ŸlÃÆ'„±klar ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    h1 {
        font-size: 1.3rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Genel kart padding ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .card, .admin-card, .vg-card, .mg-card, .cg-card, .tool-card, .project-card, .file-card, .plugin-card, .model-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar sayfalarÃÆ'„± iÃÆ'ƒÂ§in messages-container scroll ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .messages-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        min-height: 0 !important;
        height: 0 !important;
        display: block !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ page-main (profile, pricing, settings, admin) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .page-main, .profile-main, .pricing-main, .settings-main, .admin-main {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        min-height: 0 !important;
        height: 0 !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar overlay ÃÆ'¢â‚¬â€ handled globally, just add transition ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .sidebar-overlay {
        transition: opacity .25s ease;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Sidebar mobilde slide-in (transition ekle, mevcut CSS'i override etme) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .sidebar {
        transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Input alanlarÃÆ'„± tam geniÃÆ'…Ÿlik ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        /* iOS zoom ÃÆ'ƒÂ¶nleme */
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Butonlar minimum dokunma alanÃÆ'„± ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .btn, .btn-primary, .btn-secondary, .generate-btn, .submit-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Yatay scroll gerektiren iÃÆ'ƒÂ§erikler ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .code-block, pre, .overflow-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Modal tam ekran ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .modal-box, .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Pagination ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Tab navigasyonu yatay scroll ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .tab-nav, .tabs, .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    .tab-nav::-webkit-scrollbar, .tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Topbar gizle (mobile-page-header var) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    .app-with-sidebar .main-content > .topbar {
        display: none !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ KÃÆ'ƒÂ¼ÃÆ'ƒÂ§ÃÆ'ƒÂ¼k mobil (ÃÆ'¢â€°Â¤480px) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 480px) {
    .history-layout, .imagegen-layout, .vg-wrap, .mg-wrap, .cg-wrap, .cg-layout, .tools-layout, .explore-layout, .help-layout, .plugins-layout, .page-wrap, .profile-layout, .settings-layout, .pricing-layout, .inner-page-wrap {
        padding: 12px 10px 80px !important;
    }

    .stats-bar, .stat-grid, .kpi-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    h1 {
        font-size: 1.1rem !important;
    }

    h2 {
        font-size: 1rem !important;
    }

    .card, .admin-card, .vg-card, .mg-card, .cg-card, .tool-card, .project-card, .file-card, .plugin-card, .model-card {
        padding: 12px !important;
        border-radius: 10px !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ ÃÆ'ƒâ€¡ok kÃÆ'ƒÂ¼ÃÆ'ƒÂ§ÃÆ'ƒÂ¼k ekranlar (ÃÆ'¢â€°Â¤360px) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 360px) {
    .history-layout, .imagegen-layout, .vg-wrap, .mg-wrap, .cg-wrap, .cg-layout, .tools-layout, .explore-layout, .help-layout, .plugins-layout, .page-wrap, .profile-layout, .settings-layout, .pricing-layout, .inner-page-wrap {
        padding: 10px 8px 80px !important;
    }

    .stats-bar, .stat-grid, .kpi-row {
        grid-template-columns: 1fr !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Safe area (iPhone X+ ÃÆ'ƒÂ§entik/home bar) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .mobile-page-header {
            padding-top: max(0px, env(safe-area-inset-top));
        }

        .app-with-sidebar .messages-container, .page-main, .profile-main, .pricing-main, .settings-main {
            padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom)));
        }
    }
}

/* ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â

   ÃÆ'„°ÃÆ'ƒâ€¡ SAYFA MOBÃÆ'„°L DÃÆ'ƒÅ“ZELTME ÃÆ'¢â‚¬â€ TÃÆ'ƒÂ¼m cihazlarla uyumluluk

   Ana sayfa (index.php) hariÃÆ'ƒÂ§ tÃÆ'ƒÂ¼m iÃÆ'ƒÂ§ sayfalar iÃÆ'ƒÂ§in

   messages-container'ÃÆ'„± page-main gibi davrandÃÆ'„±r.

   Bu kural, chat sayfasÃÆ'„±nÃÆ'„± (index.php) etkilemez ÃÆ'ƒÂ§ÃÆ'ƒÂ¼nkÃÆ'ƒÂ¼

   index.php'de #messages id'si var.

ÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢ÂÃÆ'¢â€¢Â */
/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ TÃÆ'ƒÂ¼m iÃÆ'ƒÂ§ sayfa body'leri scroll edebilir olsun ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
body:has(.app-with-sidebar):not(:has(#messages)) {
    overflow: auto !important;
    height: auto !important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ app-with-sidebar iÃÆ'ƒÂ§ sayfalarda min-height:100vh, scroll serbest ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
body:has(.app-with-sidebar):not(:has(#messages)) .app-with-sidebar {
    min-height: 100vh;
    height: auto !important;
    overflow: visible !important;
    align-items: flex-start;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ main-content iÃÆ'ƒÂ§ sayfalarda scroll serbest ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
body:has(.app-with-sidebar):not(:has(#messages)) .main-content {
    /* glomax-space.css tarafından yÃÆ'¶netiliyor — burada override etme */
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ messages-container iÃÆ'ƒÂ§ sayfalarda page-main gibi davransÃÆ'„±n ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
body:has(.app-with-sidebar):not(:has(#messages)) .messages-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Mobil: iÃÆ'ƒÂ§ sayfalarda tam ekran scroll ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    body:has(.app-with-sidebar):not(:has(#messages)) {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body:has(.app-with-sidebar):not(:has(#messages)) .app-with-sidebar {
        flex: 1 !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:has(.app-with-sidebar):not(:has(#messages)) .main-content {
        flex: 1 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:has(.app-with-sidebar):not(:has(#messages)) .messages-container {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: 0 !important;
        min-height: 0 !important;
        display: block !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ Topbar iÃÆ'ƒÂ§ sayfalarda gizle (mobile-page-header var) ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    body:has(.app-with-sidebar):not(:has(#messages)) .main-content > .topbar {
        display: none !important;
    }

    /* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ profile-main, settings-main, pricing-main mobil scroll ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
    body:has(.app-with-sidebar):not(:has(#messages)) .profile-main, body:has(.app-with-sidebar):not(:has(#messages)) .settings-main, body:has(.app-with-sidebar):not(:has(#messages)) .pricing-main, body:has(.app-with-sidebar):not(:has(#messages)) .page-main {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: 0 !important;
        min-height: 0 !important;
    }
}

/* ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ settings.php gibi body override'ÃÆ'„± olan sayfalar iÃÆ'ƒÂ§in ÃÆ'¢â€â‚¬ÃÆ'¢â€â‚¬ */
@media (max-width: 768px) {
    body.inner-page {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.inner-page .app-with-sidebar {
        flex: 1 !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.inner-page .settings-main, body.inner-page .profile-main, body.inner-page .pricing-main, body.inner-page .page-main {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: 0 !important;
        min-height: 0 !important;
    }
}

/* Mobil */
@media (max-width: 600px) {
    .ia-modal .modal-box.ia-modal-box {
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        margin-top: auto;
    }

    .ia-modal-body {
        padding: 14px 14px;
    }

    .ia-dropzone {
        padding: 22px 14px;
    }

    .ia-result-body {
        max-height: 220px;
    }
}

/* �� Model Badge (otomatik fallback bildirimi) ��������������� */
.message-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 10px;
    background: var(--surface2, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.10));
    border-radius: 20px;
    font-size: .72rem;
    color: var(--text3, #888);
    font-weight: 500;
    letter-spacing: .01em;
}

.message-model-badge svg {
    flex-shrink: 0;
    opacity: .7;
}

/* �� ZIP teklifi banner animasyonu ����������������������� */
/* �� Kullan�c� mesaj� d�zenleme �������������������������� */
.msg-edit-wrap textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

/* �� Mesaj aksiyon butonu � kullan�c� mesajlar� i�in ����� */
.message.user .message-actions-bar {
    display: flex;
    justify-content: flex-end;
    padding: 2px 0 0;
    opacity: 1;
    pointer-events: auto;
}

/* �� Sidebar Sticky � Scroll eden sayfalarda sidebar sayfa ile kayar �� */
/* Profil, ayarlar, pricing, history gibi uzun sayfalarda ge�erli */
body:has(.sidebar):has(.profile-main), body:has(.sidebar):has(.pricing-main), body:has(.sidebar):has(.settings-main), body:has(.sidebar):has(.page-main), body:has(.sidebar):has(.history-page), body:has(.sidebar):has(.help-page), body:has(.sidebar):has(.changelog-page), body:has(.sidebar):has(.terms-page), body:has(.sidebar):has(.privacy-page), body:has(.sidebar):has(.support-page), body:has(.sidebar):has(.notifications-page), body:has(.sidebar):has(.stats-page), body:has(.sidebar):has(.favorites-page), body:has(.sidebar):has(.files-page), body:has(.sidebar):has(.projects-page), body:has(.sidebar):has(.shared-page), body:has(.sidebar):has(.explore-page), body:has(.sidebar):has(.prompt-library-page), body:has(.sidebar):has(.subscription-page) {
    height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    min-height: 100vh;
}

/* Bu sayfalarda sidebar sticky olur � viewport �st�ne yap���r, sayfa ile kayar */
body:has(.sidebar):has(.profile-main) .sidebar, body:has(.sidebar):has(.pricing-main) .sidebar, body:has(.sidebar):has(.settings-main) .sidebar, body:has(.sidebar):has(.page-main) .sidebar, body:has(.sidebar):has(.history-page) .sidebar, body:has(.sidebar):has(.help-page) .sidebar, body:has(.sidebar):has(.changelog-page) .sidebar, body:has(.sidebar):has(.terms-page) .sidebar, body:has(.sidebar):has(.privacy-page) .sidebar, body:has(.sidebar):has(.support-page) .sidebar, body:has(.sidebar):has(.notifications-page) .sidebar, body:has(.sidebar):has(.stats-page) .sidebar, body:has(.sidebar):has(.favorites-page) .sidebar, body:has(.sidebar):has(.files-page) .sidebar, body:has(.sidebar):has(.projects-page) .sidebar, body:has(.sidebar):has(.shared-page) .sidebar, body:has(.sidebar):has(.explore-page) .sidebar, body:has(.sidebar):has(.prompt-library-page) .sidebar, body:has(.sidebar):has(.subscription-page) .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    align-self: flex-start !important;
}

/* ===========================================================

   PASTE-TO-TXT � Dosya Kart� & �nizleme Modal Stilleri

   =========================================================== */
/* �� Ek �nizleme alan�ndaki TXT kart� ����������������������� */
.att-txt-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    min-width: 180px;
    max-width: 240px;
    position: relative;
    transition: border-color .15s, background .15s;
}

.att-txt-card:hover {
    border-color: var(--border2);
    background: var(--surface2);
}

.att-txt-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    border-radius: 7px;
    color: var(--text2);
}

.att-txt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.att-txt-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-txt-meta {
    font-size: .7rem;
    color: var(--text3);
}

.att-txt-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.att-txt-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.att-txt-btn:hover {
    background: var(--surface3);
    color: var(--text1);
}

/* �� Sohbet mesaj�ndaki TXT kart� ��������������������������� */
.msg-att-txt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    max-width: 320px;
    transition: border-color .15s, background .15s;
    margin-top: 4px;
}

.msg-att-txt:hover {
    border-color: var(--border2);
    background: var(--surface3);
}

.msg-att-txt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: 8px;
    color: var(--text2);
    border: 1px solid var(--border);
}

.msg-att-txt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-att-txt-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-att-txt-meta {
    font-size: .72rem;
    color: var(--text3);
}

.msg-att-txt-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.msg-att-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text3);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.msg-att-btn:hover {
    background: var(--surface);
    color: var(--text1);
}

/* �� TXT �nizleme Modal �������������������������������������� */
.txt-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.txt-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: none;
}

.txt-preview-panel {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    width: min(860px, 94vw);
    max-height: 82vh;
    overflow: hidden;
}

.txt-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    flex-shrink: 0;
}

.txt-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text1);
    min-width: 0;
}

.txt-preview-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txt-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.txt-preview-btn {
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 500;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text2);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.txt-preview-btn:hover {
    background: var(--surface3);
    color: var(--text1);
}

.txt-preview-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.txt-preview-close:hover {
    background: var(--surface2);
    color: var(--text1);
}

.txt-preview-body {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.txt-preview-content {
    margin: 0;
    padding: 16px 20px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: .8rem;
    line-height: 1.65;
    color: var(--text1);
    white-space: pre;
    overflow-x: auto;
    min-height: 200px;
    tab-size: 4;
}

/* Koyu tema uyumu */
[data-theme="dark"] .txt-preview-panel {
    background: var(--surface);
}

[data-theme="dark"] .msg-att-txt {
    background: var(--surface2);
}

[data-theme="dark"] .att-txt-card {
    background: var(--surface);
}

/* Mobil */
@media (max-width: 640px) {
    .txt-preview-panel {
        width: 100vw;
        max-height: 90vh;
        border-radius: 14px 14px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .txt-preview-modal {
        align-items: flex-end;
    }

    .msg-att-txt {
        max-width: 100%;
    }

    .att-txt-card {
        max-width: 200px;
    }
}

/* ===========================================================

   CODE BLOCK UI ENGINE � ChatGPT tarz� header & collapse

   =========================================================== */
/* .code-header tema override */
[data-theme="light"] .code-header {
    background: #f7f7f8 !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
}

[data-theme="dark"] .code-header {
    background: #2d2d2d !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}

/* Sol b�l�m: dil badge */
.code-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Dil badge � monospace, uppercase, 13px */
.code-lang-badge {
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text2, #888);
    white-space: nowrap;
    user-select: none;
}

[data-theme="light"] .code-lang-badge {
    color: #555;
}

[data-theme="dark"] .code-lang-badge {
    color: #bbb;
}

/* Sa� buton grubu � override */
.code-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

/* T�m header butonlar� � yeni stil */
.btn-copy-code, .btn-edit-code, .btn-download-code, .btn-preview-code {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text3, #888) !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .12s, color .12s, border-color .12s !important;
    font-family: var(--font) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.btn-copy-code:hover, .btn-edit-code:hover, .btn-download-code:hover {
    color: var(--text1, #eee) !important;
    background: rgba(128,128,200,.15) !important;
    border-color: rgba(128,128,200,.25) !important;
}

.btn-preview-code:hover, .btn-preview-code.active {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}

[data-theme="light"] .btn-copy-code, [data-theme="light"] .btn-edit-code, [data-theme="light"] .btn-download-code, [data-theme="light"] .btn-preview-code {
    color: #666 !important;
}

[data-theme="light"] .btn-copy-code:hover, [data-theme="light"] .btn-edit-code:hover, [data-theme="light"] .btn-download-code:hover {
    color: #222 !important;
    background: rgba(0,0,0,.07) !important;
    border-color: rgba(0,0,0,.12) !important;
}

/* �� Uzun Kod Collapse Butonu ������������������������������ */
.code-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    background: var(--surface2, #1a1a24);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text3, #888);
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
    border-radius: 0 0 10px 10px;
    font-family: var(--font);
}

.code-expand-btn:hover {
    background: var(--surface3);
    color: var(--text1);
}

[data-theme="light"] .code-expand-btn {
    background: #f0f0f5;
    color: #666;
}

[data-theme="light"] .code-expand-btn:hover {
    background: #e8e8f0;
    color: #222;
}

/* �� Mobil: buton etiketleri gizle, sadece ikon g�ster ����� */
@media (max-width: 640px) {
    .code-header {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 10px !important;
    }

    .btn-copy-code .btn-label, .btn-edit-code .btn-label, .btn-download-code .btn-label, .btn-preview-code .btn-label {
        display: none !important;
    }

    .btn-copy-code, .btn-edit-code, .btn-download-code, .btn-preview-code {
        padding: 6px 8px !important;
    }

    .code-lang-badge {
        font-size: 11px;
    }
}

/* Bu sayfalarda main-content scroll eder */
body:has(.sidebar):has(.profile-main) .main-content, body:has(.sidebar):has(.pricing-main) .main-content, body:has(.sidebar):has(.settings-main) .main-content, body:has(.sidebar):has(.page-main) .main-content, body:has(.sidebar):has(.history-page) .main-content, body:has(.sidebar):has(.help-page) .main-content, body:has(.sidebar):has(.changelog-page) .main-content, body:has(.sidebar):has(.terms-page) .main-content, body:has(.sidebar):has(.privacy-page) .main-content, body:has(.sidebar):has(.support-page) .main-content, body:has(.sidebar):has(.notifications-page) .main-content, body:has(.sidebar):has(.stats-page) .main-content, body:has(.sidebar):has(.favorites-page) .main-content, body:has(.sidebar):has(.files-page) .main-content, body:has(.sidebar):has(.projects-page) .main-content, body:has(.sidebar):has(.shared-page) .main-content, body:has(.sidebar):has(.explore-page) .main-content, body:has(.sidebar):has(.prompt-library-page) .main-content, body:has(.sidebar):has(.subscription-page) .main-content {
    height: auto !important;
    overflow: visible !important;
    min-height: 100vh;
}

/* ============================================

   GlomaxGPT VIE v5.0 � Visual Intelligence Engine

   ============================================ */
/* Varyasyon Butonlar� */
.vie-variation-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 0;
}

.vie-var-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    backdrop-filter: none;
}

.vie-var-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.vie-var-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Match Score Badge */
.vie-match-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    color: white;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.vie-match-badge.score-high {
    background: var(--text3);
}

.vie-match-badge.score-medium {
    background: var(--text3);
}

.vie-match-badge.score-low {
    background: #ef4444;
}

/* Clarification Mesaj� */
.vie-clarification {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0;
    line-height: 1.6;
}

.vie-clarification p {
    margin: 0;
    white-space: pre-line;
}

/* VIE Durum G�stergesi */
.vie-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

.vie-status-indicator .vie-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text3);
    animation: viePulse 2s infinite;
}

@keyframes viePulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Retry G�stergesi */
.vie-retry-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 8px;
}

/* G�rsel Wrapper (badge i�in position:relative) */
.vie-image-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
}

.vie-image-wrapper img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
}

/* Subject Lock Bilgi �ubu�u */
.vie-subject-lock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.vie-subject-lock-bar .lock-icon {
    font-size: 12px;
}

/* Dark mode uyumu */
@media (prefers-color-scheme: light) {
    .vie-var-btn {
        border-color: rgba(0, 0, 0, 0.15);
        background: rgba(0, 0, 0, 0.04);
        color: #333;
    }

    .vie-var-btn:hover {
        background: rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.25);
    }

    .vie-clarification {
        background: rgba(99, 102, 241, 0.06);
    }

    .vie-subject-lock-bar {
        color: rgba(0, 0, 0, 0.5);
    }
}

/* ===========================================================

SEARCH SOURCES PANEL � ChatGPT/Gemini tarz� kaynak kartlar�

=========================================================== */
.search-sources-panel {
    margin: 8px 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    background: var(--surface2, rgba(255,255,255,.03));
    overflow: hidden;
    font-size: 12px;
}

.search-sources-header {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text2, #aaa);
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

.search-sources-header:hover {
    background: var(--surface3, rgba(255,255,255,.05));
}

.search-sources-label {
    flex: 1;
    font-size: 11.5px;
}

.search-sources-chevron {
    transition: transform .2s;
    color: var(--text3, #666);
}

.search-sources-panel.open .search-sources-chevron {
    transform: rotate(180deg);
}

.search-sources-cards {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 8px;
}

.search-source-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text1, #e0e0e0);
    transition: background .15s;
    border: 1px solid transparent;
}

.search-source-card:hover {
    background: var(--surface3, rgba(255,255,255,.06));
    border-color: var(--text);
}

.ssc-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--text);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    margin-top: 1px;
}

.ssc-body {
    flex: 1;
    min-width: 0;
}

.ssc-title {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.ssc-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: var(--text3, #666);
}

.ssc-dot {
    color: var(--text3, #666);
}

.ssc-badge {
    color: var(--text3);
    font-size: 8px;
}

.ssc-quality {
    color: var(--text2);
    font-weight: 600;
}

/* ── SSC Snippet (kısa özet) ── */
.ssc-snippet {
    font-size: .71rem;
    color: var(--text3, #888);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-top: 2px;
}

/* ── YouTube kaynak kartı ── */
.search-source-card.ssc-youtube {
    border-left: 2px solid rgba(255,0,0,.35);
}

.search-source-card.ssc-youtube .ssc-title {
    color: var(--text1);
}

/* ── YouTube thumbnail ── */
.ssc-thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(255,255,255,.05);
}

/* ── Knowledge Graph kartı ── */
.search-source-card.ssc-knowledge {
    border-left: 2px solid rgba(66,133,244,.35);
}

.search-source-card.ssc-knowledge .ssc-title {
    color: var(--text1);
}

/* ── Google Arama Butonu (panel içi) ── */
.ssc-google-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    text-decoration: none;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    background: rgba(66,133,244,.06);
    border-radius: 0 0 12px 12px;
    transition: background .15s;
    font-size: .79rem;
    font-weight: 600;
    color: #4285f4;
    width: 100%;
    box-sizing: border-box;
}

.ssc-google-btn:hover {
    background: rgba(66,133,244,.14);
}

.ssc-google-btn svg {
    flex-shrink: 0;
}

/* Web Arama Toggle Butonu */
.btn-web-search.active {
    color: var(--text) !important;
    background: rgba(124, 110, 242, 0.12) !important;
    border-color: rgba(124, 110, 242, 0.3) !important;
}

.btn-web-search.active svg {
    stroke: var(--text);
}

/* Composer Mode � Orta mod */
.composer-mode-option[data-mode="medium"] .composer-mode-opt-name::after {
    content: "";
}

/* Follow-up chips � temiz g�r�n�m */
.followup-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.followup-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: var(--surface2, rgba(255,255,255,.04));
    color: var(--text2, #aaa);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}

.followup-chip:hover {
    color: var(--text);
}

.followup-chip-icon {
    opacity: .7;
    line-height: 1;
}

/* Kaynak kartlar� scroll (search results) */
.search-results-wrap .search-results-grid {
    scrollbar-width: thin;
}

/* Light mode overrides */
@media (prefers-color-scheme: light) {
    .search-sources-panel {
        background: rgba(0,0,0,.02);
        border-color: rgba(0,0,0,.09);
    }

    .search-source-card {
        color: #222;
    }

    .ssc-meta {
        color: #777;
    }

    .followup-chip {
        color: #555;
        background: rgba(0,0,0,.04);
        border-color: rgba(0,0,0,.12);
    }

    .followup-chip:hover {
        color: var(--text);
    }
}

/* �� �� Sayfa Layout Fix � t�m page-main i�eren sayfalar i�in �� */
.main-content:has(.page-main), .main-content:has(.history-page), .main-content:has(.voice-page), .main-content:has(.favorites-page), .main-content:has(.files-page), .main-content:has(.stats-page), .main-content:has(.projects-page), .main-content:has(.shared-page), .main-content:has(.notifications-page), .main-content:has(.explore-page), .main-content:has(.history-layout), .main-content:has(.settings-main), .main-content:has(.profile-main), .main-content:has(.pricing-main) {
    height: auto !important;
    overflow: visible !important;
    overflow-y: auto !important;
    min-height: 100vh;
}

.page-main {
    flex: 1;
    min-height: 0;
}

.page-main.voice-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Mobil: t�m i� sayfalar scroll yapabilsin */
@media (max-width: 768px) {
    .main-content:has(.page-main), .main-content:has(.history-layout) {
        height: auto !important;
        min-height: 100dvh;
        overflow-y: auto !important;
    }

    .page-wrap {
        padding-bottom: 80px;
    }
}

/* �� Derin D���nce Butonu ������������������������������� */
.btn-deep-think {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--text2, #6b7280);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}

.btn-deep-think:hover {
    border-color: var(--text3);
    color: var(--text3);
    background: rgba(255,255,255,.06);
}

.btn-deep-think.active {
    background: rgba(255,255,255,.10);
    border-color: var(--text3);
    color: var(--text3);
    box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

.btn-deep-think .btn-deep-think-label {
    font-size: .75rem;
}

[data-theme="dark"] .btn-deep-think {
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.5);
}

[data-theme="dark"] .btn-deep-think:hover, [data-theme="dark"] .btn-deep-think.active {
    border-color: var(--text3);
    color: var(--text3);
    background: rgba(167,139,250,.12);
}

/* �� Topbar sayfa ba�l��� ������������������������������� */
.topbar-page-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text2, #374151);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================

   GLOBAL �� SAYFA LAYOUT FIX � En y�ksek �ncelik

   T�m page-main i�eren sayfalarda i�erik g�r�ns�n

   ========================================================== */
/* main-content: i� sayfalarda flex column, tam y�kseklik */
.main-content:has(.page-main), .main-content:has(.history-layout), .main-content:has(.voice-page), .main-content:has(.favorites-page), .main-content:has(.files-page), .main-content:has(.stats-page), .main-content:has(.projects-page), .main-content:has(.shared-page), .main-content:has(.notifications-page), .main-content:has(.images-page) {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

/* page-main: scrollable alan, height:0 override ile flex-grow */
.page-main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* voice-page �zel: tam alan, i� scroll yok */
.page-main.voice-page {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* page-wrap: i� i�erik alan� */
.page-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Topbar i� sayfalarda sabit kalmal� */
.main-content .topbar, .main-content header.topbar {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

/* Mobil uyum */
@media (max-width: 768px) {
    .main-content:has(.page-main), .main-content:has(.history-layout) {
        height: 100dvh !important;
    }

    .page-wrap {
        padding: 20px 16px 100px !important;
    }

    .page-hero h1 {
        font-size: 1.25rem !important;
    }
}

/* ==========================================================

   MOB�L UYGULAMA H�SS� � Native App Feel

   ========================================================== */
/* Temel mobil overscroll ve scroll gizle */
@media (max-width: 768px) {
    /* Sayfa scrollunu kapat � uygulama gibi hissettir */ html, body {
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
    }

    /* App wrapper tam ekran */
    .app-with-sidebar {
        height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        inset: 0 !important;
    }

    /* Sidebar �stten kayma efekti */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        z-index: 500 !important;
        transform: translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: none !important;
    }

    .sidebar.open, .sidebar.sidebar-open, body.sidebar-open .sidebar {
        transform: translateX(0) !important;
        box-shadow: 8px 0 32px rgba(0,0,0,.18) !important;
    }

    /* Main content tam ekran */
    .main-content {
        width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Topbar � native app bar */
    .topbar {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 12px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* Yukar� kayd�rma �ubu�u gizle */
    ::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* Mesaj listesi � i� scroll */
    .messages-wrap, .chat-messages, .messages-container, #messages.messages-container, .msg-list {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .messages-wrap::-webkit-scrollbar, .chat-messages::-webkit-scrollbar, .messages-container::-webkit-scrollbar {
        display: none !important;
    }

    /* �� sayfa scroll � sadece page-main scrollsun */
    .page-main {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }

    .page-main::-webkit-scrollbar {
        display: none !important;
    }

    /* Composer � klavye a��l�nca yukar� git */
    .composer-wrap, .composer, #composer {
        position: relative !important;
        bottom: auto !important;
        z-index: 10 !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    }

    /* Butonlar � dokunmatik hedef b�y�kl��� */
    .btn-icon, .btn-tool {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Mesaj baloncuklari */
    .msg-bubble, .message-content {
        max-width: 100% !important;
        font-size: .935rem !important;
        line-height: 1.65 !important;
    }

    /* Safe area padding � �entikli ekranlar */
    .topbar {
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    .composer-wrap, .composer, #composer {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
    }

    /* Ge�i� animasyonlar� � native hissi */
    .page-main, .main-content {
        transition: opacity .15s ease !important;
    }

    /* Hover efektleri mobilden kald�r � parmak izli gezinti */
    @media (hover: none) {
        .btn-icon:hover, .btn-tool:hover, .sb-nav-item:hover {
            background: transparent !important;
        }

        .msg-actions {
            opacity: 1 !important;
        }
    }

    /* Sidebar overlay kapama - pointer-events kaldirildi, overlay z-index:400 ile zaten tum tiklama olaylarini yakaliyor */
    body.sidebar-open .chat-main, body.sidebar-open .main-content, body.sidebar-open .page-main {
        filter: none !important;
        backdrop-filter: none !important;
    }

    /* ── Topbar/Header — sidebar ve overlay'in altında ── */
    .topbar, .main-topbar, .inner-topbar, .mobile-page-header {
        z-index: 100 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    /* ── TÃÆ'¼m sayfa elementleri — blur/filter YOK ── */
    html, body, .chat-main, .main-content, .page-main, .messages-container, .input-wrapper, .input-box, .composer-box {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    /* ── Sidebar iÃÆ'§indeki elementler tıklanabilir ── */
    .sidebar *, #sidebar * {
        pointer-events: auto !important;
    }

    /* ── Sidebar-overlay tıklanınca kapansın (CSS katmanı) ── */
    .sidebar-overlay, #sidebar-overlay {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar, #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        z-index: 500 !important;
        transform: translateX(-100%) !important;
        transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
        backdrop-filter: none !important;
        filter: none !important;
    }

    .sidebar.open, .sidebar.sidebar-open, body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
}

/* ══════════════════════════════════════════════════════════

   GLOMAX THEME TOKENS — Light & Dark

══════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
    --button-primary-bg: #3a3530;
    --button-primary-text: #f5f0eb !important;
    --button-primary-hover: #2a2520;
    --bg-page: #f5f0eb;
    --bg-sidebar: #ede8e2;
    --bg-input: #f0ebe5;
    --bg-hover: #e4dfd8;
    --bg-active: #d5cfc8;
    --bg-elevated: #e4dfd8;
    --surface2: #e4dfd8;
    --surface3: #d5cfc8;
    --text: #1a1a1a;
    --text2: #6b6560;
    --text3: #a09890;
    --text4: #b0aaa3;
    --border-subtle: #d5cfc8;
    --border-control: #c8c2bb;
}

[data-theme="dark"] {
    --button-primary-bg: #d4d4d4;
    --button-primary-text: #111111;
    --button-primary-hover: #f0f0f0;
    --bg-page: #111111;
    --bg-sidebar: #1a1a1a;
    --bg-input: #1e1e1e;
    --bg-hover: #222222;
    --bg-active: #2a2a2a;
    --bg-elevated: #222222;
    --surface2: #222222;
    --surface3: #2a2a2a;
    --text: #f0f0f0;
    --text2: #999999;
    --text3: #555555;
    --text4: #444444;
    --border-subtle: #2e2e2e;
    --border-control: #333333;
}

/* layout — ana CSS bloÄŸundan yÃÆ'¶netiliyor */
/* ══════════════════════════════════════════════════════════

   UNIFIED BUTTON SYSTEM — TÃÆ'¼m butonlar aynı stil

══════════════════════════════════════════════════════════ */
.btn-primary, .btn-send:not(:disabled), .btn-auth, .btn-topbar-register, .btn-sidebar-login, .btn-sidebar-register-sm, .mobile-header-register-btn, .sb-upgrade-btn, .sb-renew-btn, .pl-btn-use {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-text-fill-color: var(--button-primary-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background .14s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-primary:hover, .btn-send:hover:not(:disabled), .btn-auth:hover, .btn-topbar-register:hover, .btn-sidebar-login:hover, .btn-sidebar-register-sm:hover, .mobile-header-register-btn:hover, .sb-upgrade-btn:hover, .sb-renew-btn:hover, .pl-btn-use:hover {
    background: var(--button-primary-hover) !important;
    color: var(--button-primary-text) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.btn-secondary, .btn-topbar-login, .btn-sidebar-login-sm, .mobile-header-login-btn, .pl-btn-copy, .btn-ghost-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    background: transparent !important;
    color: var(--text2) !important;
    border: 1px solid var(--border-control) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background .14s ease, color .14s ease !important;
}

.btn-secondary:hover, .btn-topbar-login:hover, .btn-sidebar-login-sm:hover, .mobile-header-login-btn:hover, .pl-btn-copy:hover, .btn-ghost-sm:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

[data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-topbar-login:hover, [data-theme="light"] .btn-sidebar-login-sm:hover, [data-theme="light"] .mobile-header-login-btn:hover, [data-theme="light"] .pl-btn-copy:hover {
    background: #E8E8E8 !important;
    color: #101010 !important;
    border-color: #999999 !important;
}

[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-topbar-login:hover, [data-theme="dark"] .btn-sidebar-login-sm:hover, [data-theme="dark"] .mobile-header-login-btn:hover, [data-theme="dark"] .pl-btn-copy:hover {
    background: rgba(255,255,255,.1) !important;
    color: #ECECEC !important;
    border-color: rgba(255,255,255,.35) !important;
}

.btn-tool, .btn-icon, .sidebar-icon-btn, .mobile-header-btn, .conv-action-btn, .sb-new-chat-btn {
    background: transparent !important;
    color: var(--text3) !important;
    border: none !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: background .12s, color .12s !important;
}

.btn-tool:hover, .btn-icon:hover, .sidebar-icon-btn:hover, .mobile-header-btn:hover, .conv-action-btn:hover, .sb-new-chat-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.btn-send {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
}

.btn-send:disabled {
    opacity: .3 !important;
    cursor: not-allowed !important;
    background: var(--surface3) !important;
    color: var(--text3) !important;
}

.mobile-header-register-btn {
    padding: 7px 14px !important;
    font-size: .79rem !important;
}

.mobile-header-login-btn {
    padding: 7px 12px !important;
    font-size: .79rem !important;
}

.btn-topbar-register {
    padding: 7px 16px !important;
    font-size: .82rem !important;
}

.btn-topbar-login {
    padding: 7px 12px !important;
    font-size: .82rem !important;
}

.btn-sidebar-login-sm, .btn-sidebar-register-sm {
    flex: 1 !important;
    padding: 9px 10px !important;
    font-size: .8rem !important;
}

.sb-new-chat-wrap {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════

   COUNTRY BADGE — YouTube tarzı

══════════════════════════════════════════════════════════ */
.sidebar-logo-wrap, .mobile-logo-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.sidebar-country-badge, .mobile-country-badge {
    position: absolute !important;
    top: -7px !important;
    right: -20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 11px !important;
    padding: 0 3px !important;
    border-radius: 3px !important;
    font-size: .52rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 2 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}

/* ══════════════════════════════════════════════════════════

   TEXT — Yazı belirginliği

══════════════════════════════════════════════════════════ */
.message-content {
    font-size: .825rem !important;
    line-height: 1.75 !important;
    color: var(--text) !important;
    font-weight: 400 !important;
}

.message-content strong, .message-content b {
    font-weight: 700 !important;
    color: var(--text) !important;
}

.message-content h1, .message-content h2, .message-content h3, .message-content h4 {
    font-weight: 700 !important;
    color: var(--text) !important;
}

#message-input {
    font-size: .925rem !important;
    color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════

   MOBILE — TÃÆ'¼m cihazlar uyumlu

══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        flex-direction: column !important;
        height: 100dvh !important;
    }

    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100dvh !important;
        width: 85vw !important;
        max-width: 360px !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform .25s ease !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
    }

    .page-main {
        height: 100dvh !important;
        width: 100% !important;
    }

    /* chat-main: flex column layout — input-wrapper altta gÃÆ'¶rÃÆ'¼nsÃÆ'¼n */
    .chat-main {
        height: 100dvh !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        /* overflow:hidden iOS Safari'de position:fixed child'ların touch event almasını engelliyor */
        overflow-y: hidden !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    /* input-wrapper her zaman gÃÆ'¶rÃÆ'¼nÃÆ'¼r, flex-shrink:0 ile alta yapışık */
    .input-wrapper {
        flex-shrink: 0 !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* messages-container kalan alanı doldursun */
    .messages-container, #messages.messages-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .input-box {
        border-radius: 14px !important;
    }

    .message-inner {
        padding: 0 12px !important;
    }

    .input-area {
        padding: 0 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════

   BUTON SİSTEMİ — FINAL

   Light: PRIMARY = siyah bg (#050816) + beyaz yazı

          SECONDARY = beyaz bg + siyah yazı + border

   Dark:  PRIMARY = beyaz bg (#ECECEC) + siyah yazı

          SECONDARY = siyah bg + beyaz yazı + border

══════════════════════════════════════════════════════════ */
/* ── LIGHT TEMA PRIMARY ── */
[data-theme="light"] .btn-primary, [data-theme="light"] .btn-topbar-register, [data-theme="light"] .btn-sidebar-login, [data-theme="light"] .btn-sidebar-register-sm, [data-theme="light"] .mobile-header-register-btn, [data-theme="light"] .btn-auth, [data-theme="light"] .btn-send:not(:disabled), [data-theme="light"] .sb-upgrade-btn, [data-theme="light"] .pl-btn-use {
    background: #3a3530 !important;
    color: #f5f0eb !important;
    -webkit-text-fill-color: #f5f0eb !important;
    border: none !important;
}

[data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-topbar-register:hover, [data-theme="light"] .btn-sidebar-login:hover, [data-theme="light"] .btn-sidebar-register-sm:hover, [data-theme="light"] .mobile-header-register-btn:hover, [data-theme="light"] .btn-auth:hover, [data-theme="light"] .btn-send:hover:not(:disabled), [data-theme="light"] .sb-upgrade-btn:hover, [data-theme="light"] .pl-btn-use:hover {
    background: #2a2520 !important;
    color: #f5f0eb !important;
    -webkit-text-fill-color: #f5f0eb !important;
}

/* ── LIGHT TEMA SECONDARY ── */
[data-theme="light"] .btn-secondary, [data-theme="light"] .btn-topbar-login, [data-theme="light"] .btn-sidebar-login-sm, [data-theme="light"] .mobile-header-login-btn, [data-theme="light"] .pl-btn-copy, [data-theme="light"] .btn-ghost-sm {
    background: #f0ebe5 !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    border: 1px solid #c8c2bb !important;
}

[data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-topbar-login:hover, [data-theme="light"] .btn-sidebar-login-sm:hover, [data-theme="light"] .mobile-header-login-btn:hover, [data-theme="light"] .pl-btn-copy:hover, [data-theme="light"] .btn-ghost-sm:hover {
    background: #e4dfd8 !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    border-color: #b0aaa3 !important;
}

/* ── DARK TEMA PRIMARY ── */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-topbar-register, [data-theme="dark"] .btn-sidebar-login, [data-theme="dark"] .btn-sidebar-register-sm, [data-theme="dark"] .mobile-header-register-btn, [data-theme="dark"] .btn-auth, [data-theme="dark"] .btn-send:not(:disabled), [data-theme="dark"] .sb-upgrade-btn, [data-theme="dark"] .pl-btn-use {
    background: #d4d4d4 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: none !important;
}

[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-topbar-register:hover, [data-theme="dark"] .btn-sidebar-login:hover, [data-theme="dark"] .btn-sidebar-register-sm:hover, [data-theme="dark"] .mobile-header-register-btn:hover, [data-theme="dark"] .btn-auth:hover, [data-theme="dark"] .btn-send:hover:not(:disabled), [data-theme="dark"] .sb-upgrade-btn:hover, [data-theme="dark"] .pl-btn-use:hover {
    background: #f0f0f0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* ── DARK TEMA SECONDARY ── */
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-topbar-login, [data-theme="dark"] .btn-sidebar-login-sm, [data-theme="dark"] .mobile-header-login-btn, [data-theme="dark"] .pl-btn-copy, [data-theme="dark"] .btn-ghost-sm {
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    border: 1px solid #333333 !important;
}

[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-topbar-login:hover, [data-theme="dark"] .btn-sidebar-login-sm:hover, [data-theme="dark"] .mobile-header-login-btn:hover, [data-theme="dark"] .pl-btn-copy:hover, [data-theme="dark"] .btn-ghost-sm:hover {
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #666666 !important;
}

/* ══════════════════════════════════════════════════════════

   TÃÆ'Å“M BUTONLAR — FINAL OVERRIDE

   Light: siyah bg + beyaz yazı / beyaz bg + siyah yazı

   Dark:  beyaz bg + siyah yazı / siyah bg + beyaz yazı

══════════════════════════════════════════════════════════ */
/* ── BASE — tÃÆ'¼m butonlara ortak ── */
button, .btn, [class*="btn-"], [class*="-btn"], a[class*="btn-"], a[class*="-btn"] {
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .14s ease, color .14s ease, border-color .14s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* ── LIGHT — PRIMARY (dark bg + white text) ── */
[data-theme="light"] .btn-primary, [data-theme="light"] .btn-topbar-register, [data-theme="light"] .btn-sidebar-login, [data-theme="light"] .btn-sidebar-register-sm, [data-theme="light"] .mobile-header-register-btn, [data-theme="light"] .btn-auth, [data-theme="light"] .btn-send:not(:disabled), [data-theme="light"] .sb-upgrade-btn, [data-theme="light"] .sb-renew-btn, [data-theme="light"] .pl-btn-use, [data-theme="light"] .btn-deep-think.active, [data-theme="light"] .btn-web-search.active, [data-theme="light"] .btn-pwa-install, [data-theme="light"] .pwa-promo-install, [data-theme="light"] .tip-banner-cta, [data-theme="light"] .guest-cta-link, [data-theme="light"] .btn-primary-sm {
    background: #3a3530 !important;
    color: #f5f0eb !important;
    -webkit-text-fill-color: #f5f0eb !important;
    border: none !important;
}

[data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-topbar-register:hover, [data-theme="light"] .btn-sidebar-login:hover, [data-theme="light"] .btn-sidebar-register-sm:hover, [data-theme="light"] .mobile-header-register-btn:hover, [data-theme="light"] .btn-auth:hover, [data-theme="light"] .btn-send:hover:not(:disabled), [data-theme="light"] .sb-upgrade-btn:hover, [data-theme="light"] .sb-renew-btn:hover, [data-theme="light"] .pl-btn-use:hover, [data-theme="light"] .btn-pwa-install:hover, [data-theme="light"] .pwa-promo-install:hover, [data-theme="light"] .tip-banner-cta:hover, [data-theme="light"] .btn-primary-sm:hover {
    background: #2a2520 !important;
    color: #f5f0eb !important;
    -webkit-text-fill-color: #f5f0eb !important;
}

/* ── LIGHT — SECONDARY (white bg + black text) ── */
[data-theme="light"] .btn-secondary, [data-theme="light"] .btn-topbar-login, [data-theme="light"] .btn-sidebar-login-sm, [data-theme="light"] .mobile-header-login-btn, [data-theme="light"] .pl-btn-copy, [data-theme="light"] .btn-ghost-sm, [data-theme="light"] .btn-icon, [data-theme="light"] .btn-tool, [data-theme="light"] .sidebar-icon-btn, [data-theme="light"] .btn-copy-code, [data-theme="light"] .btn-download-code, [data-theme="light"] .btn-preview-code, [data-theme="light"] .btn-edit-code, [data-theme="light"] .msg-action-btn, [data-theme="light"] .conv-action-btn, [data-theme="light"] .pl-tab-btn, [data-theme="light"] .pl-cat-btn, [data-theme="light"] .pl-page-btn, [data-theme="light"] .speed-picker-btn, [data-theme="light"] .modal-close, [data-theme="light"] .pl-modal-close, [data-theme="light"] .btn-deep-think:not(.active), [data-theme="light"] .btn-web-search:not(.active), [data-theme="light"] .tb-model-btn {
    background: var(--bg) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #cccccc6b !important;
}

[data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-topbar-login:hover, [data-theme="light"] .btn-sidebar-login-sm:hover, [data-theme="light"] .mobile-header-login-btn:hover, [data-theme="light"] .pl-btn-copy:hover, [data-theme="light"] .btn-ghost-sm:hover, [data-theme="light"] .btn-icon:hover, [data-theme="light"] .btn-tool:hover, [data-theme="light"] .sidebar-icon-btn:hover, [data-theme="light"] .btn-copy-code:hover, [data-theme="light"] .btn-download-code:hover, [data-theme="light"] .btn-preview-code:hover, [data-theme="light"] .btn-edit-code:hover, [data-theme="light"] .msg-action-btn:hover, [data-theme="light"] .conv-action-btn:hover, [data-theme="light"] .pl-tab-btn:hover, [data-theme="light"] .pl-cat-btn:hover, [data-theme="light"] .pl-page-btn:hover, [data-theme="light"] .speed-picker-btn:hover, [data-theme="light"] .tb-model-btn:hover {
    background: #F0F0F0 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    border-color: #999999 !important;
}

/* ── LIGHT — ACTIVE STATE ── */
[data-theme="light"] .pl-tab-btn.active, [data-theme="light"] .pl-cat-btn.active, [data-theme="light"] .pl-page-btn.active {
    background: #3a3530 !important;
    color: #f5f0eb !important;
    -webkit-text-fill-color: #f5f0eb !important;
    border-color: #3a3530 !important;
}

/* ── DARK — PRIMARY (white bg + black text) ── */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-topbar-register, [data-theme="dark"] .btn-sidebar-login, [data-theme="dark"] .btn-sidebar-register-sm, [data-theme="dark"] .mobile-header-register-btn, [data-theme="dark"] .btn-auth, [data-theme="dark"] .btn-send:not(:disabled), [data-theme="dark"] .sb-upgrade-btn, [data-theme="dark"] .sb-renew-btn, [data-theme="dark"] .pl-btn-use, [data-theme="dark"] .btn-deep-think.active, [data-theme="dark"] .btn-web-search.active, [data-theme="dark"] .btn-pwa-install, [data-theme="dark"] .pwa-promo-install, [data-theme="dark"] .tip-banner-cta, [data-theme="dark"] .guest-cta-link, [data-theme="dark"] .btn-primary-sm {
    background: #d4d4d4 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: none !important;
}

[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-topbar-register:hover, [data-theme="dark"] .btn-sidebar-login:hover, [data-theme="dark"] .btn-sidebar-register-sm:hover, [data-theme="dark"] .mobile-header-register-btn:hover, [data-theme="dark"] .btn-auth:hover, [data-theme="dark"] .btn-send:hover:not(:disabled), [data-theme="dark"] .sb-upgrade-btn:hover, [data-theme="dark"] .sb-renew-btn:hover, [data-theme="dark"] .pl-btn-use:hover, [data-theme="dark"] .btn-pwa-install:hover, [data-theme="dark"] .pwa-promo-install:hover, [data-theme="dark"] .tip-banner-cta:hover, [data-theme="dark"] .btn-primary-sm:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ── DARK — SECONDARY (dark bg + white text) ── */
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-topbar-login, [data-theme="dark"] .btn-sidebar-login-sm, [data-theme="dark"] .mobile-header-login-btn, [data-theme="dark"] .pl-btn-copy, [data-theme="dark"] .btn-ghost-sm, [data-theme="dark"] .btn-icon, [data-theme="dark"] .btn-tool, [data-theme="dark"] .sidebar-icon-btn, [data-theme="dark"] .btn-copy-code, [data-theme="dark"] .btn-download-code, [data-theme="dark"] .btn-preview-code, [data-theme="dark"] .btn-edit-code, [data-theme="dark"] .msg-action-btn, [data-theme="dark"] .conv-action-btn, [data-theme="dark"] .pl-tab-btn, [data-theme="dark"] .pl-cat-btn, [data-theme="dark"] .pl-page-btn, [data-theme="dark"] .speed-picker-btn, [data-theme="dark"] .modal-close, [data-theme="dark"] .pl-modal-close, [data-theme="dark"] .btn-deep-think:not(.active), [data-theme="dark"] .btn-web-search:not(.active), [data-theme="dark"] .tb-model-btn {
    background: transparent !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    border: 1px solid #333333 !important;
}

[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-topbar-login:hover, [data-theme="dark"] .btn-sidebar-login-sm:hover, [data-theme="dark"] .mobile-header-login-btn:hover, [data-theme="dark"] .pl-btn-copy:hover, [data-theme="dark"] .btn-ghost-sm:hover, [data-theme="dark"] .btn-icon:hover, [data-theme="dark"] .btn-tool:hover, [data-theme="dark"] .sidebar-icon-btn:hover, [data-theme="dark"] .btn-copy-code:hover, [data-theme="dark"] .btn-download-code:hover, [data-theme="dark"] .btn-preview-code:hover, [data-theme="dark"] .btn-edit-code:hover, [data-theme="dark"] .msg-action-btn:hover, [data-theme="dark"] .conv-action-btn:hover, [data-theme="dark"] .pl-tab-btn:hover, [data-theme="dark"] .pl-cat-btn:hover, [data-theme="dark"] .pl-page-btn:hover, [data-theme="dark"] .speed-picker-btn:hover, [data-theme="dark"] .tb-model-btn:hover {
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    border-color: #444444 !important;
}

/* ── DARK — ACTIVE STATE ── */
[data-theme="dark"] .pl-tab-btn.active, [data-theme="dark"] .pl-cat-btn.active, [data-theme="dark"] .pl-page-btn.active {
    background: #d4d4d4 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #d4d4d4 !important;
}

/* ── ÃÆ'–ZEL BOYUTLAR — dokunmadan bırak ── */
.btn-send {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-send:disabled {
    opacity: .3 !important;
    cursor: not-allowed !important;
}

.btn-icon, .btn-tool, .sidebar-icon-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

.btn-copy-code, .btn-download-code, .btn-preview-code, .btn-edit-code, .msg-action-btn, .conv-action-btn {
    border: none !important;
    background: transparent !important;
}

[data-theme="light"] .btn-copy-code, [data-theme="light"] .btn-download-code, [data-theme="light"] .btn-preview-code, [data-theme="light"] .btn-edit-code, [data-theme="light"] .msg-action-btn, [data-theme="light"] .conv-action-btn {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

[data-theme="dark"] .btn-copy-code, [data-theme="dark"] .btn-download-code, [data-theme="dark"] .btn-preview-code, [data-theme="dark"] .btn-edit-code, [data-theme="dark"] .msg-action-btn, [data-theme="dark"] .conv-action-btn {
    color: #999999 !important;
    -webkit-text-fill-color: #999999 !important;
}

[data-theme="light"] .btn-copy-code:hover, [data-theme="light"] .btn-download-code:hover, [data-theme="light"] .btn-preview-code:hover, [data-theme="light"] .btn-edit-code:hover, [data-theme="light"] .msg-action-btn:hover, [data-theme="light"] .conv-action-btn:hover {
    background: #F0F0F0 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    border: none !important;
}

[data-theme="dark"] .btn-copy-code:hover, [data-theme="dark"] .btn-download-code:hover, [data-theme="dark"] .btn-preview-code:hover, [data-theme="dark"] .btn-edit-code:hover, [data-theme="dark"] .msg-action-btn:hover, [data-theme="dark"] .conv-action-btn:hover {
    background: #2A2A2A !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
}

/* ══════════════════════════════════════════════════════════

   TOPBAR — ChatGPT gibi şeffaf, border yok

══════════════════════════════════════════════════════════ */
.topbar, [data-theme="light"] .topbar, [data-theme="dark"] .topbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.topbar.scrolled, [data-theme="light"] .topbar.scrolled, [data-theme="dark"] .topbar.scrolled {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* gx-extras butonlar tema uyumlu */
.gx-topbar-icon-btn, .gx-topbar-mini-btn, .gx-export-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text3) !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background .12s, color .12s !important;
}

.gx-topbar-icon-btn:hover, .gx-topbar-mini-btn:hover, .gx-export-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.gx-session-timer, .gx-font-display {
    font-size: .75rem !important;
    color: var(--text3) !important;
    background: transparent !important;
}

/* ══ TOPBAR ÃÆ'¼st boÅŸluk sıfırla ══ */
.topbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

.chat-main, .page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════

   MOBÄ°L — TÃÆ'¼m sayfa container'ları iÃÆ'§in evrensel dÃÆ'¼zeltme

   pricing-main, settings-main, profile-main, vb.

══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* TÃÆ'¼m ÃÆ'¶zel main container'lar tam ekran flex column */ .pricing-main, .settings-main, .profile-main, .main-content {
        width: 100% !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Topbar bu container'larda da sabit yÃÆ'¼kseklik */
    .pricing-main > .topbar, .settings-main > .topbar, .profile-main > .topbar, .main-content > .topbar {
        flex-shrink: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    /* Ä°ÃÆ'§erik alanı kalan alanı doldursun ve scroll etsin */
    .pricing-main > .pricing-layout, .settings-main > .settings-layout, .profile-main > .profile-layout, .main-content > .page-main, .main-content > main.page-main {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* app-with-sidebar mobilde tam ekran */
    .app-with-sidebar {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        inset: 0 !important;
    }

    /* Sidebar mobilde gizli, aÃÆ'§Ä±lınca gÃÆ'¶rÃÆ'¼nÃÆ'¼r */
    .app-with-sidebar > .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        z-index: 500 !important;
        transform: translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    }

    .app-with-sidebar > .sidebar.open, body.sidebar-open .app-with-sidebar > .sidebar {
        transform: translateX(0) !important;
        box-shadow: 8px 0 32px rgba(0,0,0,.2) !important;
    }

    /* main-content sidebar'ın yanında tam genişlik */
    .app-with-sidebar > .main-content, .app-with-sidebar > .pricing-main, .app-with-sidebar > .settings-main, .app-with-sidebar > .profile-main {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Sidebar overlay */
    #sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 499;
    }

    #sidebar-overlay.show, #sidebar-overlay.active {
        display: block;
    }

    /* Topbar bildirim paneli mobilde tam geniÅŸlik */
    .tb-notif-panel {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 16px 16px !important;
        z-index: 1000 !important;
    }

    /* tb-page-title topbar'da gÃÆ'¶rÃÆ'¼nÃÆ'¼r */
    .tb-page-title {
        font-size: .875rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }
}

.chat-main, .page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════

   MOBÄ°L TAM EKRAN UYGULAMA LAYOUT — TEMÄ°Z SÃÆ'Å“RÃÆ'Å“M

   Composer altta sabit, mesaj alanı scroll edilebilir

   body position:fixed KULLANILMAZ — scroll bozar

══════════════════════════════════════════════════════════ */
/* Yatay taÅŸma engeli — tÃÆ'¼m cihazlar */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Mesaj alanı her zaman scroll edilebilir */
#messages, .messages-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sayfa iÃÆ'§erikleri scroll */
.page-main:not(.voice-page) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
    /* HTML/body — yatay taşma engeli, dikey scroll serbest */ html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        height: 100% !important;
        /* position:fixed KULLANMA — scroll kırar */
    }

    /* TÃÆ'¼m elementler box-sizing */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* Sidebar + main wrapper — tam ekran flex */
    .app-with-sidebar {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        min-height: 100dvh !important;
    }

    /* Ana iÃÆ'§erik — flex column, tam yÃÆ'¼kseklik */
    .main-content {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    /* Chat ana alanı — flex column */
    .chat-main {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Mesaj alanı — kalan yÃÆ'¼ksekliÄŸi doldur, scroll */
    #messages, .messages-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding-bottom: 8px !important;
    }

    /* Input wrapper + input area — altta sabit */
    .input-wrapper {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        bottom: auto !important;
        z-index: 10 !important;
        background: var(--bg, #fff) !important;
    }

    [data-theme="dark"] .input-wrapper {
        background: var(--bg, #050816) !important;
    }

    .input-area {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: env(safe-area-inset-bottom, 4px) !important;
    }

    /* Composer box — tam genişlik */
    .composer-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Composer toolbar — yatay scroll, scrollbar gizli */
    .composer-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }

    .composer-toolbar::-webkit-scrollbar {
        display: none !important;
    }

    /* Textarea — 16px (iOS otomatik zoom engeli) */
    #message-input, textarea, input[type="text"], input[type="search"], input[type="email"], select {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100% !important;
    }

    /* Topbar — shrink etme */
    .topbar, header.topbar, .inner-topbar {
        flex-shrink: 0 !important;
        z-index: 200 !important;
    }

    /* Mesaj baloncukları taşma engeli */
    .message, .message-inner, .message-body, .message-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-break: break-word !important;
    }

    /* Kod blokları — yatay scroll */
    pre, pre code {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* Mobilde gereksiz elementleri gizle */
    .composer-char-count, #composer-char-count, #char-count {
        display: none !important;
    }

    /* Sidebar aÃÆ'§Ä±kken scroll kilitle */
    body.sidebar-open {
        overflow: hidden !important;
    }
}

/* iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .input-wrapper {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}

/* ══════════════════════════════════════════════════════════

   MOBÄ°L CHAT LAYOUT — EN YÃÆ'Å“KSEK ÃÆ'–NCELÄ°K

   body > sidebar + main.chat-main yapısı iÃÆ'§in

   Mesaj alanı scroll, composer altta sabit

══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* body: yatay taÅŸma engeli, dikey scroll serbest */ html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* chat-main: tam ekran flex column */
    body > main.chat-main, .chat-main {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mesaj alanı: kalan yÃÆ'¼ksekliÄŸi doldur, scroll */
    body > main.chat-main #messages, body > main.chat-main .messages-container, .chat-main #messages, .chat-main .messages-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 8px !important;
    }

    /* Input wrapper: altta sabit, shrink etme */
    body > main.chat-main .input-wrapper, .chat-main .input-wrapper {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: var(--v3-bg, #fff) !important;
        padding-bottom: env(safe-area-inset-bottom, 4px) !important;
        z-index: 50 !important;
    }

    /* Input area: tam geniÅŸlik */
    body > main.chat-main .input-area, .chat-main .input-area {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Composer box: tam geniÅŸlik */
    .chat-main .composer-box {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Composer toolbar: yatay scroll, butonlar gizlenmesin */
    .chat-main .composer-toolbar {
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-width: 100% !important;
    }

    .chat-main .composer-toolbar::-webkit-scrollbar {
        display: none !important;
    }

    /* TÃÆ'¼m toolbar butonları gÃÆ'¶rÃÆ'¼nÃÆ'¼r */
    .chat-main .composer-tools-left .btn-tool {
        display: inline-flex !important;
    }

    /* Textarea: 16px (iOS zoom engeli) */
    .chat-main #message-input {
        font-size: 16px !important;
    }

    /* Topbar: shrink etme */
    .chat-main .topbar, .chat-main header {
        flex-shrink: 0 !important;
    }
}

/* ── gx-work-bar-btn / gx-work-model-pill: öne getir ─────── */
.gx-work-top-row {
    position: relative !important;
    z-index: 2 !important;
}

.gx-work-top-row #gx-work-textarea {
    position: relative !important;
    z-index: 1 !important;
}

.gx-work-bar-btn,
.gx-work-model-pill {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
}

/* Textarea'nın butonların üstüne binmesini engelle */
.gx-work-top-row .gx-work-bar-btn,
.gx-work-top-row .gx-work-model-pill {
    isolation: isolate;
}

/* ── Eklentiler dropdown öne getir ────────────────────────── */
/* Dropdown panelin kendisi — body'ye taşınır, position:fixed ile gösterilir */
#gx-work-ekl-menu {
    z-index: 999999 !important;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    padding: 0;
    min-width: min(380px, 92vw);
    max-width: min(420px, 92vw);
    overflow: hidden;
}

[data-theme="dark"] #gx-work-ekl-menu {
    background: #1e1e26 !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* ── sidebar-toggle-btn: sadece mobilde göster ────────────── */
@media (min-width: 1025px) {
    .btn-icon.sidebar-toggle-btn,
    .sidebar-toggle-btn {
        display: none !important;
    }
}

/* ── Safari topbar z-index fix ────────────────────────────── */
/* Safari'de position:sticky z-index sorununu çöz */
header.topbar,
#topbar,
.topbar {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 200 !important;
    isolation: isolate;
}

/* Safari'de parent overflow sorunu için */
.app-layout,
.app-with-sidebar,
.main-content,
.chat-main {
    overflow-x: clip;
}

/* ── Welcome screen küçük ekran sığdırma ──────────────────── */
@media (max-height: 700px) {
    .welcome-screen {
        padding: 12px 16px 8px !important;
        justify-content: flex-start !important;
    }
    .welcome-logo-mark {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }
    .welcome-screen h1 {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
    }
    .welcome-subtitle {
        font-size: .85rem !important;
        margin-bottom: 12px !important;
    }
    .capability-cards {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .cap-card {
        padding: 8px 10px !important;
    }
    
    .cap-card-icon {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 5px !important;
    }
    .guest-banner {
        margin-bottom: 10px !important;
        padding: 6px 12px !important;
    }
}

@media (max-width: 480px) {
    .capability-cards {
        grid-template-columns: 1fr !important;
    }
    .welcome-screen {
        padding: 12px 12px 8px !important;
    }
}