/* ═══════════════════════════════════════════════════════════
   NUMEX AI PRO — PROFESYONEL ARAYÜZ CSS
   Sıfırdan yazılmış, modern, temiz, ChatGPT/Claude kalitesi
   ═══════════════════════════════════════════════════════════ */

/* ── CSS DEĞİŞKENLERİ ── */
:root {
    --f: 'Outfit', system-ui, -apple-system, sans-serif;
    --fm: 'JetBrains Mono', 'Fira Code', monospace;
    --f2: 'DM Sans', var(--f);

    /* Renkler */
    --bg: #08080e;
    --bg2: #0c0c14;
    --bg3: #10101a;
    --bg4: #161622;
    --bg-input: rgba(12,14,21,0.95);

    --t: #e8eaf0;
    --t2: #9ca3b4;
    --t3: #555d72;
    --t4: #3a3f50;

    --b: rgba(255,255,255,0.06);
    --b2: rgba(255,255,255,0.09);
    --b3: rgba(255,255,255,0.14);

    --ac: #4f8ef7;
    --ac2: #6ba3f9;
    --acg: rgba(79,142,247,0.2);
    --acb: rgba(79,142,247,0.1);

    --gr: #3ecf8e;
    --grb: rgba(62,207,142,0.1);
    --pu: #a78bfa;
    --pub: rgba(167,139,250,0.1);
    --or: #f59e0b;
    --orb: rgba(245,158,11,0.1);
    --pk: #f472b6;
    --re: #ef4444;

    --s1: rgba(255,255,255,0.03);
    --s2: rgba(255,255,255,0.05);
    --s3: rgba(255,255,255,0.08);

    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 50px;

    --shadow: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);

    --e: cubic-bezier(0.4, 0, 0.2, 1);
    --e2: cubic-bezier(0.16, 1, 0.3, 1);
    --tr: 0.2s var(--e);

    /* Fluid responsive değişkenleri — tüm ekran boyutlarına otomatik uyum */
    --pad-x: clamp(10px, 2.5vw, 24px);
    --pad-y: clamp(8px, 1.5vh, 16px);
    --pad-input: clamp(10px, 2vw, 18px);
    --gap-toolbar: clamp(6px, 1.2vw, 12px);
    --input-max-w: min(900px, calc(100vw - 2 * var(--pad-x)));
    --chat-max-w: min(900px, calc(100vw - 2 * var(--pad-x)));
    --topbar-pad: clamp(6px, 1.5vw, 14px);
    --font-model: clamp(11px, 2.2vw, 13px);
    --font-ta: clamp(14px, 2.8vw, 16px);
}

/* Theme variants used by settings applyTheme() */
body.theme-lacivert,
body[data-theme="lacivert"] {
    --bg: #08080e;
    --bg2: #0c0c14;
    --bg3: #10101a;
    --bg4: #161622;
    --bg-input: rgba(12,14,21,0.95);
    --t: #e8eaf0;
    --t2: #9ca3b4;
    --t3: #555d72;
    --t4: #3a3f50;
    --b: rgba(255,255,255,0.06);
    --b2: rgba(255,255,255,0.09);
    --b3: rgba(255,255,255,0.14);
    --ac: #4f8ef7;
    --ac2: #6ba3f9;
    --acg: rgba(79,142,247,0.2);
    --acb: rgba(79,142,247,0.1);
}
body.theme-antrasit,
body[data-theme="antrasit"] {
    --bg: #0d1016;
    --bg2: #121722;
    --bg3: #171d2a;
    --bg4: #202938;
    --bg-input: rgba(18,23,34,0.95);
    --t: #edf2fb;
    --t2: #a9b6cc;
    --t3: #6f7f9a;
    --t4: #556179;
    --b: rgba(173,196,227,0.12);
    --b2: rgba(173,196,227,0.18);
    --b3: rgba(173,196,227,0.24);
    --ac: #00d4b8;
    --ac2: #4ae8d4;
    --acg: rgba(0,212,184,0.2);
    --acb: rgba(0,212,184,0.1);
}
body.theme-gri,
body[data-theme="gri"] {
    --bg: #15171b;
    --bg2: #1b1f25;
    --bg3: #242a33;
    --bg4: #2b3340;
    --bg-input: rgba(24,29,36,0.95);
    --t: #eef2f8;
    --t2: #b3bdcc;
    --t3: #7d899d;
    --t4: #616d82;
    --b: rgba(148,163,184,0.14);
    --b2: rgba(148,163,184,0.2);
    --b3: rgba(148,163,184,0.28);
    --ac: #2dd4aa;
    --ac2: #5eebc9;
    --acg: rgba(45,212,170,0.22);
    --acb: rgba(45,212,170,0.12);
}
body.theme-okyanus,
body[data-theme="okyanus"] {
    --bg: #081319;
    --bg2: #0d1a22;
    --bg3: #122430;
    --bg4: #173141;
    --bg-input: rgba(10,22,30,0.96);
    --t: #eff9ff;
    --t2: #b8d5e6;
    --t3: #7ea4bc;
    --t4: #5d8298;
    --b: rgba(125,211,252,0.16);
    --b2: rgba(125,211,252,0.24);
    --b3: rgba(125,211,252,0.32);
    --ac: #06b6d4;
    --ac2: #22d3ee;
    --acg: rgba(6,182,212,0.22);
    --acb: rgba(6,182,212,0.12);
}
body.theme-kirmizi,
body[data-theme="kirmizi"] {
    --bg: #190d0d;
    --bg2: #211212;
    --bg3: #2a1717;
    --bg4: #351d1d;
    --bg-input: rgba(28,15,15,0.95);
    --t: #fff2f2;
    --t2: #e6bcbc;
    --t3: #be8f8f;
    --t4: #9f7474;
    --b: rgba(248,113,113,0.16);
    --b2: rgba(248,113,113,0.24);
    --b3: rgba(248,113,113,0.32);
    --ac: #ef4444;
    --ac2: #f87171;
    --acg: rgba(239,68,68,0.22);
    --acb: rgba(239,68,68,0.12);
}
body.theme-light,
body[data-theme="acik"] {
    --bg: #e8edf5;
    --bg2: #dde5ef;
    --bg3: #f5f8fc;
    --bg4: #ffffff;
    --bg-input: rgba(245,248,252,0.98);
    --t: #0f172a;
    --t2: #334155;
    --t3: #64748b;
    --t4: #94a3b8;
    --b: rgba(15,23,42,0.12);
    --b2: rgba(15,23,42,0.18);
    --b3: rgba(15,23,42,0.26);
    --ac: #0ea5e9;
    --ac2: #0284c7;
    --acg: rgba(14,165,233,0.18);
    --acb: rgba(14,165,233,0.12);
    --s1: rgba(15,23,42,0.04);
    --s2: rgba(15,23,42,0.07);
    --s3: rgba(15,23,42,0.1);
}

/* Settings-driven utility classes */
body.numex-reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
body.numex-high-contrast .input-box,
body.numex-high-contrast .sug,
body.numex-high-contrast .msg.user .msg-bubble {
    border-width: 2px;
}
body.numex-focus-indicator *:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}
body.numex-compact .chat-inner { max-width: 820px; padding: 14px 20px 24px; }
body.numex-compact .msg-row { gap: 10px; padding: 6px 0; }
body.numex-density-compact .msg-row { padding: 4px 0; }
body.bubble-classic .msg.user .msg-bubble { border-radius: 10px; }
body.bubble-minimal .msg.user .msg-bubble {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}
body.hide-response-rating button[onclick*="likeMessage"],
body.hide-response-rating button[onclick*="dislikeMessage"] {
    display: none !important;
}
.tool-disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: var(--f);
    background: var(--bg);
    color: var(--t);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button { font-family: var(--f); }
::selection { background: rgba(79,142,247,0.25); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }


/* ═══════════════════════════════════════════
   AMBIENT & OVERLAYS
   ═══════════════════════════════════════════ */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.04; animation: ambFloat 20s ease-in-out infinite; }
.o1 { width: 600px; height: 600px; background: #4f8ef7; top: -15%; left: -10%; }
.o2 { width: 500px; height: 500px; background: #3ecf8e; bottom: -10%; right: -10%; animation-delay: -7s; }
.o3 { width: 400px; height: 400px; background: #a78bfa; top: 40%; left: 50%; animation-delay: -14s; }
@keyframes ambFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,30px) scale(0.95); } }

.mob-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mob-ov.show { opacity: 1; pointer-events: all; }

/* Voice Overlay */
.voice-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); z-index: 999; display: none; align-items: center; justify-content: center; }
.voice-ov.show { display: flex; }
.voice-modal { text-align: center; }
.voice-ring { width: 80px; height: 80px; border-radius: 50%; background: rgba(62,207,142,0.15); border: 2px solid var(--gr); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; animation: voicePulse 1.5s ease-in-out infinite; }
.voice-ring svg { width: 32px; height: 32px; color: var(--gr); }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(62,207,142,0.3); } 50% { box-shadow: 0 0 0 20px rgba(62,207,142,0); } }
.voice-text { font-size: 18px; font-weight: 600; color: var(--t); margin-bottom: 6px; }
.voice-sub { font-size: 13px; color: var(--t3); margin-bottom: 20px; }
.voice-cancel { padding: 8px 24px; border-radius: 10px; background: var(--s2); border: 1px solid var(--b2); color: var(--t2); cursor: pointer; font-size: 13px; font-weight: 500; transition: var(--tr); }
.voice-cancel:hover { background: var(--s3); color: var(--t); }


/* ═══════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════ */
.app-layout {
    display: flex;
    height: 100vh;
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar {
    width: 272px;
    min-width: 272px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #080810 0%, #0a0a12 100%);
    border-right: 1px solid var(--b);
    transition: width 0.28s var(--e), min-width 0.28s var(--e), opacity 0.2s;
    overflow: hidden;
    z-index: 50;
    flex-shrink: 0;
}
.sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}

/* Header */
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--b);
    flex-shrink: 0;
}
.sb-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sb-logo-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
    box-shadow: 0 0 20px rgba(59,130,246,0.2);
    flex-shrink: 0;
}
.sb-logo-text {
    font-size: 15px; font-weight: 700; color: #e8e8e8;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.sb-badge {
    font-size: 10px; font-weight: 600;
    color: var(--ac);
    background: var(--acb);
    padding: 2px 7px; border-radius: 4px;
    margin-left: 5px; vertical-align: middle;
    letter-spacing: 0.02em;
}
.sb-close {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: none; border: none;
    color: var(--t3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--tr); flex-shrink: 0;
}
.sb-close:hover { color: var(--t2); background: var(--s2); }
.sb-close svg { width: 15px; height: 15px; }
.sidebar.collapsed .sb-close svg { transform: rotate(180deg); }

/* Yeni Sohbet */
.sb-new-chat {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 12px 0;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(79,142,247,0.12), rgba(79,142,247,0.06));
    border: 1px solid rgba(79,142,247,0.18);
    border-radius: 11px;
    color: #ddd; font-size: 13px; font-weight: 500;
    font-family: var(--f); cursor: pointer;
    transition: all 0.2s var(--e);
    flex-shrink: 0;
    white-space: nowrap;
}
.sb-new-chat:hover {
    background: linear-gradient(135deg, rgba(79,142,247,0.2), rgba(79,142,247,0.1));
    border-color: rgba(79,142,247,0.35);
    color: #fff;
    box-shadow: 0 4px 16px rgba(79,142,247,0.1);
}
.sb-new-chat svg { flex-shrink: 0; }

/* Arama */
.sb-search {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 12px 4px;
    padding: 7px 11px;
    background: var(--s1);
    border: 1px solid var(--b);
    border-radius: 9px;
    transition: all 0.2s var(--e);
    flex-shrink: 0;
}
.sb-search:focus-within {
    border-color: rgba(79,142,247,0.3);
    background: var(--s2);
    box-shadow: 0 0 0 3px rgba(79,142,247,0.06);
}
.sb-search svg { width: 14px; height: 14px; stroke: var(--t3); flex-shrink: 0; }
.sb-search input {
    background: none; border: none; outline: none;
    color: var(--t2); font-size: 13px; width: 100%;
    font-family: var(--f);
}
.sb-search input::placeholder { color: var(--t4); }

/* Sohbet Listesi */
.sb-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--s3) transparent;
}
.sb-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px 6px;
    user-select: none;
}
.sb-group-label:first-child,
.sb-body > .sb-group-label:first-of-type {
    padding-top: 8px;
}
.chat-list { padding: 0 6px; }

/* Chat Item — buildSidebarItemHtml ile uyumlu */
.chat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 2px;
    color: #666;
    font-size: 13px;
    position: relative;
}
.chat-item:hover {
    background: rgba(255,255,255,0.04);
    color: #aaa;
}
.chat-item.active {
    background: rgba(79,142,247,0.08);
    color: #e0e0e0;
    font-weight: 500;
}

.chat-item .ci-icon-wrap {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}
.chat-item .ci-icon-wrap svg { width: 15px; height: 15px; }
.chat-item.active .ci-icon-wrap { opacity: 0.7; }
.chat-item .ci-body { flex: 1; min-width: 0; }
.chat-item .ci-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-item .ci-rename {
    display: none; width: 100%;
    background: var(--bg3); border: 1px solid var(--ac);
    border-radius: 5px; padding: 2px 6px;
    color: var(--t); font-size: 13px; font-family: var(--f);
    outline: none;
}
.chat-item.renaming .ci-text { display: none; }
.chat-item.renaming .ci-rename { display: block; }

.chat-item .ci-menu-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: none;
    color: #444;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.chat-item:hover .ci-menu-btn { display: flex; }
.chat-item .ci-menu-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #aaa;
}
.chat-item .ci-menu-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* Sidebar Footer */
.sb-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
}

.sb-login-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(79,142,247,0.12), rgba(79,142,247,0.06));
    border: 1px solid rgba(79,142,247,0.2);
    border-radius: 10px;
    color: #ddd;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.sb-login-btn:hover {
    background: linear-gradient(135deg, rgba(79,142,247,0.2), rgba(79,142,247,0.1));
    border-color: rgba(79,142,247,0.35);
}
.sb-login-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.sb-plan-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 0;
    font-size: 11px;
    color: #555;
}
.sb-plan-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.sb-plan-dot.free { background: #f59e0b; }
.sb-plan-dot.pro { background: #22c55e; }

/* Sidebar auth panel (inline, non-blocking) */
.sb-auth-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    margin-top: 0;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(19, 25, 42, 0.98), rgba(10, 14, 26, 0.98));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 20px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,142,247,0.08) inset;
    transform: translateY(8px) scale(0.985);
    transform-origin: bottom center;
    opacity: 0;
    overflow: hidden;
    z-index: 35;
    transition: max-height 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.36s cubic-bezier(0.22, 1.25, 0.3, 1), opacity 0.22s ease-out, border-color 0.22s ease, box-shadow 0.22s ease;
}
.sb-auth-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    border-color: rgba(79,142,247,0.3);
    box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,142,247,0.14) inset;
}
.sb-auth-panel-inner { padding: 12px; }
.sb-auth-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(13, 18, 31, 0.98);
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sb-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: #a8b3cf;
    background: rgba(79,142,247,0.1);
    border: 1px solid rgba(79,142,247,0.2);
}
.sb-auth-brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f8ef7;
    box-shadow: 0 0 10px rgba(79,142,247,0.7);
}
.sb-auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sb-auth-title {
    font-size: 14px;
    font-weight: 700;
    color: #dbe5ff;
}
.sb-auth-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #91a0bf;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.sb-auth-close:hover { background: rgba(255,255,255,0.06); color: #dbe5ff; }
.sb-auth-sub {
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #8f9ab4;
}
.sb-auth-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #dbe5ff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    transition: all 0.15s ease;
}
.sb-auth-btn + .sb-auth-btn { margin-top: 8px; }
.sb-auth-btn.primary {
    background: rgba(79,142,247,.14);
    border-color: rgba(79,142,247,.26);
}
.sb-auth-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-1px);
}
.sb-auth-btn.primary:hover {
    background: rgba(79,142,247,.2);
    border-color: rgba(79,142,247,.4);
}
.sb-auth-method-icon {
    min-width: 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    color: #cdd8f6;
}
.sb-auth-label { flex: 1; text-align: left; }
.sb-auth-go {
    color: #8da0c4;
    font-size: 16px;
    line-height: 1;
    margin-left: 2px;
}
.sb-auth-note {
    margin-top: 8px;
    font-size: 11px;
    color: #7f8aa8;
    text-align: center;
}

.sb-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.sb-user-card:hover { background: rgba(255,255,255,0.04); }
.sb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    position: relative;
    flex-shrink: 0;
}
.sb-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #0a0a14;
}
.sb-user-details { flex: 1; min-width: 0; }
.sb-user-name {
    font-size: 13px;
    font-weight: 500;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-plan-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
    margin-top: 1px;
}
.sb-chevron {
    width: 16px;
    height: 16px;
    color: #444;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.sb-user-card.open .sb-chevron { transform: rotate(180deg); }

.sb-user-menu {
    display: none;
    margin-top: 6px;
    padding: 4px;
    background: rgba(16,16,26,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
}
.sb-user-menu.open { display: block; }

.sb-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    transition: all 0.12s;
}
.sb-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.sb-menu-item:hover {
    background: rgba(255,255,255,0.05);
    color: #ddd;
}
.sb-menu-item.danger { color: #ef4444; }
.sb-menu-item.danger:hover { background: rgba(239,68,68,0.08); }

.sb-menu-sep {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 8px;
}


/* ═══════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════ */
.ctx-menu {
    position: fixed; z-index: 9999;
    background: var(--bg3);
    border: 1px solid var(--b2);
    border-radius: var(--radius);
    padding: 5px;
    min-width: 170px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    opacity: 0; pointer-events: none;
    transform: scale(0.95) translateY(-4px);
    transition: all 0.15s var(--e);
}
.ctx-menu.open { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); }
.ctx-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px; color: var(--t2);
    cursor: pointer; transition: var(--tr);
}
.ctx-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.ctx-item:hover { background: var(--s2); color: var(--t); }
.ctx-item.danger { color: var(--re); }
.ctx-item.danger:hover { background: rgba(239,68,68,0.1); }
.ctx-sep { height: 1px; background: var(--b); margin: 4px 6px; }


/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    position: relative;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--topbar-pad);
    border-bottom: 1px solid var(--b);
    background: rgba(8,8,14,0.75);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
    z-index: 20;
    min-height: 48px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 6px; }
.topbar-right { position: relative; }

/* Banner altı, sağ köşe — üst banden bağımsız 3 nokta */
.banner-sub {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 14px 6px;
    flex-shrink: 0;
    position: relative;
    min-height: 36px;
}
.topbar-home-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    height: auto;
    max-width: 260px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--tr);
    text-align: left;
}
.topbar-home-link:hover {
    background: transparent;
    opacity: 0.92;
}
.topbar-home-link .home-title {
    font-family: var(--fh);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.06em;
    color: var(--ac);
}
.topbar-home-link .home-sub {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--t3);
}

.tb-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: none; border: none;
    color: var(--t3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--tr);
    position: relative;
}
.tb-btn:hover { background: var(--s2); color: var(--t2); }
.tb-btn svg { width: 18px; height: 18px; }
.topbar-more-wrap { position: relative; }
.topbar-more-dd {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--bg3);
    border: 1px solid var(--b2);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 130;
    padding: 6px;
}
.topbar-more-dd.open { display: block; }
.topbar-more-item {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--t2);
    font-size: 12.5px;
    text-align: left;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--f);
}
.topbar-more-item:hover {
    background: var(--s2);
    color: var(--t);
}
.tb-badge {
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px;
    border-radius: 50%; background: var(--ac);
    display: none;
}
.tb-badge:not(:empty) { display: block; }

.notif-dd {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 390px;
    max-height: 430px;
    border-radius: 12px;
    background: var(--bg3);
    border: 1px solid var(--b2);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    display: none;
    overflow: hidden;
}
.notif-dd.open { display: block; }
.notif-dd-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--b);
    font-size: 12.5px;
    color: var(--t2);
}
.notif-dd-actions { display: inline-flex; align-items: center; gap: 6px; }
.notif-dd-filter {
    border: 1px solid var(--b2);
    background: transparent;
    color: var(--t3);
    border-radius: 8px;
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
}
.notif-dd-filter.active {
    color: var(--t);
    border-color: var(--ac);
    background: var(--acb);
}
.notif-unread-count {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    font-size: 10px;
    color: #fff;
    background: var(--ac);
    margin-left: 6px;
    padding: 0 4px;
    vertical-align: 1px;
}
.notif-dd-mark {
    border: 1px solid var(--b2);
    background: var(--s2);
    color: var(--t2);
    border-radius: 8px;
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
}
.notif-dd-mark:hover { color: var(--t); border-color: var(--ac); }
.notif-dd-close {
    border: 1px solid var(--b2);
    background: transparent;
    color: var(--t3);
    border-radius: 8px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    cursor: pointer;
}
.notif-dd-close:hover { color: var(--t); border-color: var(--ac); background: var(--s2); }
.notif-dd-list { max-height: 340px; overflow-y: auto; }
.notif-item {
    padding: 11px 12px;
    border-bottom: 1px solid var(--b);
    position: relative;
}
.notif-item.unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ac);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.notif-type-badge { font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; }
.notif-type-badge.info { color: #7cb7ff; border-color: rgba(124,183,255,.35); background: rgba(124,183,255,.12); }
.notif-type-badge.warning { color: #f9c35b; border-color: rgba(249,195,91,.35); background: rgba(249,195,91,.12); }
.notif-type-badge.urgent { color: #ff8a8a; border-color: rgba(255,138,138,.35); background: rgba(255,138,138,.12); }
.notif-item-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.notif-item-btn {
    border: 1px solid var(--b2);
    background: var(--s2);
    color: var(--t2);
    border-radius: 7px;
    font-size: 10.5px;
    padding: 2px 7px;
    cursor: pointer;
}
.notif-item-btn:hover { color: var(--t); border-color: var(--ac); }
.notif-item-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
.notif-item-title { font-size: 13px; color: var(--t); font-weight: 600; margin-bottom: 5px; }
.notif-item-msg { font-size: 12px; color: var(--t2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.notif-item-time { font-size: 10.5px; color: var(--t3); margin-top: 7px; }
.notif-dd-empty { padding: 18px 12px; font-size: 12px; color: var(--t3); text-align: center; }

.quick-assets-dd {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: min(72vh, 620px);
    background: var(--bg3);
    border: 1px solid var(--b2);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: none;
    overflow: hidden;
    z-index: 120;
}
.quick-assets-dd.open { display: block; }
.quick-assets-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border-bottom: 1px solid var(--b);
    font-size: 12.5px;
    color: var(--t);
    font-weight: 600;
}
.quick-assets-close {
    border: 1px solid var(--b2);
    background: transparent;
    color: var(--t2);
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
}
.quick-assets-sub {
    padding: 8px 12px;
    font-size: 11.5px;
    color: var(--t3);
    border-bottom: 1px solid var(--b);
}
.quick-assets-list {
    max-height: min(60vh, 480px);
    overflow: auto;
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quick-assets-empty {
    padding: 14px 12px;
    font-size: 12px;
    color: var(--t3);
    text-align: center;
    display: none;
}
.qa-sec {
    border: 1px solid var(--b);
    background: var(--s1);
    border-radius: 10px;
    overflow: hidden;
}
.qa-sec-h {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--b);
}
.qa-item {
    padding: 8px 10px;
    border-bottom: 1px solid var(--b);
}
.qa-item:last-child { border-bottom: 0; }
.qa-item-title {
    font-size: 12px;
    color: var(--t);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qa-item-snippet {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--t2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qa-item-actions {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qa-btn {
    border: 1px solid var(--b2);
    background: transparent;
    color: var(--t2);
    border-radius: 7px;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
}
.qa-btn:hover {
    color: var(--t);
    border-color: var(--ac);
}

.msg-verify-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--b2);
  background: var(--s1);
  color: var(--t2);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.2;
  margin-right: 6px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-verify-badge.pending {
  border-color: rgba(148,163,184,.35);
  color: var(--t3);
}
.msg-verify-badge.green {
  border-color: rgba(62,207,142,.35);
  color: #3ecf8e;
  background: rgba(62,207,142,.08);
}
.msg-verify-badge.yellow {
  border-color: rgba(245,158,11,.35);
  color: #f59e0b;
  background: rgba(245,158,11,.08);
}
.msg-verify-badge.red {
  border-color: rgba(239,68,68,.35);
  color: #ef4444;
  background: rgba(239,68,68,.08);
}

.conv-load-indicator {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 260;
  border: 1px solid rgba(79,142,247,.35);
  background: rgba(9,12,20,.96);
  color: #a7c6ff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11.5px;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
  display: none;
}
.conv-load-indicator.show { display: inline-flex; }

/* Model Selector */
.model-sel {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: var(--s1);
    border: 1px solid var(--b);
    border-radius: 9px;
    cursor: pointer;
    transition: var(--tr);
    position: relative;
    user-select: none;
}
.model-sel:hover { border-color: var(--b2); background: var(--s2); }
.model-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ac);
}
.model-name {
    font-size: var(--font-model); font-weight: 600;
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(85px, 22vw, 140px);
}
.model-arrow { color: var(--t3); transition: transform 0.2s; }

/* Model Dropdown */
.model-dd {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--bg3);
    border: 1px solid var(--b2);
    border-radius: var(--radius);
    min-width: 260px;
    padding: 5px;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: all 0.18s var(--e);
    z-index: 999;
}
.model-dd.open { opacity: 1; pointer-events: all; transform: translateY(0); }

.mo {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--tr);
}
.mo:hover { background: var(--s2); }
.mo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mo-info { flex: 1; }
.mo-name { font-size: 13px; font-weight: 600; color: var(--t); }
.mo-desc { font-size: 11px; color: var(--t3); margin-top: 1px; }
.mo-check { color: var(--ac); opacity: 0; flex-shrink: 0; }
.mo.sel .mo-check { opacity: 1; }
.mo.sel { background: var(--acb); }

/* Input bar model picker */
.ia-left .model-sel {
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.14);
}
.ia-left .model-name {
    font-size: 12px;
}
.ia-left .model-dd {
    top: auto;
    bottom: calc(100% + 8px);
    min-width: 240px;
    z-index: 10000;
}


/* ═══════════════════════════════════════════
   CHAT AREA & WELCOME
   ═══════════════════════════════════════════ */
.numex-view { display: none; flex-direction: column; flex: 1; min-height: 0; }
.numex-view-active { display: flex; }

.main-split { display: flex; flex: 1; min-height: 0; position: relative; }

.chat-area {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; position: relative;
}
.chat-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    scroll-behavior: smooth;
}
.chat-inner {
    max-width: var(--chat-max-w);
    width: 100%;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 20px) var(--pad-x) clamp(40px, 8vh, 60px);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Welcome Screen */
.welcome {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 20px;
    animation: fadeInUp 0.6s var(--e2);
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.wl-glyph {
    position: relative;
    width: 64px; height: 64px;
    margin-bottom: 28px;
}
.wl-logo {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #fff;
    position: relative; z-index: 2;
    margin: 4px auto;
    box-shadow: 0 0 40px rgba(59,130,246,0.2), 0 0 80px rgba(59,130,246,0.08);
}
.wl-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(79,142,247,0.1);
    animation: ringPulse 3s ease-in-out infinite;
}
.wl-ring.r1 { inset: -8px; animation-delay: 0s; }
.wl-ring.r2 { inset: -20px; animation-delay: 0.5s; }
.wl-ring.r3 { inset: -34px; animation-delay: 1s; }
@keyframes ringPulse { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.08; transform: scale(1.04); } }

.wl-title {
    font-size: 28px; font-weight: 700;
    color: var(--t);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.wl-highlight { color: var(--ac); }

.wl-sub {
    font-size: 15px; color: var(--t3);
    line-height: 1.6;
    max-width: 440px;
    margin-bottom: 36px;
}

/* Suggestion Grid */
.sug-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 520px;
    width: 100%;
}
.sug {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--s1);
    border: 1px solid var(--b);
    cursor: pointer;
    transition: all 0.22s var(--e);
    text-align: left;
}
.sug:hover {
    background: var(--s2);
    border-color: var(--b2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.sug-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sug-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.si-blue { background: rgba(79,142,247,0.1); color: var(--ac); }
.si-green { background: var(--grb); color: var(--gr); }
.si-purple { background: var(--pub); color: var(--pu); }
.si-amber { background: var(--orb); color: var(--or); }
.sug-body { min-width: 0; }
.sug-title { font-size: 13.5px; font-weight: 600; color: var(--t); margin-bottom: 2px; }
.sug-desc { font-size: 12px; color: var(--t3); line-height: 1.4; }

/* Typing Indicator */
.typing-row {
    display: none;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    max-width: 820px;
    margin: 0 auto;
}
.typing-row.show { display: flex; }
.thinking-flow { flex: 1; min-width: 0; }
.thinking-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
}
.thinking-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(79,142,247,0.15);
    border-top-color: rgba(79,142,247,0.7);
    border-radius: 50%;
    animation: spinThink 0.8s linear infinite;
}
@keyframes spinThink { to { transform: rotate(360deg); } }
.thinking-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.think-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(6px);
    animation: stepIn 0.3s ease-out forwards;
    position: relative;
}
.think-step::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 22px;
    bottom: -6px;
    width: 1px;
    background: rgba(255,255,255,0.06);
}
.think-step:last-child::before { display: none; }
.think-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(79,142,247,0.25);
    background: rgba(79,142,247,0.08);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.think-step.active .think-dot {
    border-color: rgba(79,142,247,0.5);
    background: rgba(79,142,247,0.15);
    box-shadow: 0 0 8px rgba(79,142,247,0.2);
}
.think-step.done .think-dot {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.12);
}
.think-text {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.think-step.active .think-text { color: #999; }
.think-step.done .think-text { color: #555; }
@keyframes stepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.thinking-flow.fade-out { animation: flowOut 0.4s ease forwards; }
@keyframes flowOut {
    to { opacity: 0; transform: translateY(-10px); height: 0; margin: 0; padding: 0; overflow: hidden; }
}

/* Stop & Scroll */
.stop-wrap {
    display: none; justify-content: center;
    padding: 8px; position: sticky; bottom: 0;
}
.stop-wrap.show { display: flex; }
.stop-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 18px;
    border-radius: 20px;
    background: var(--bg3);
    border: 1px solid var(--b2);
    color: var(--t2);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--f);
    transition: var(--tr);
}
.stop-btn:hover { background: var(--s3); color: var(--t); border-color: var(--re); }
.stop-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--re); }

.scroll-fab {
    position: absolute; bottom: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg3);
    border: 1px solid var(--b2);
    color: var(--t2); cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    transition: var(--tr);
    z-index: 10;
}
.scroll-fab.show { display: flex; }
.scroll-fab:hover { background: var(--s3); color: var(--t); }
.scroll-fab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }


/* ═══════════════════════════════════════════
   CANVAS PANEL
   ═══════════════════════════════════════════ */
.canvas-panel {
    width: 0; overflow: hidden;
    border-left: 1px solid rgba(255,255,255,0.06);
    background: #0c0c0f;
    display: flex; flex-direction: column;
    transition: width 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
    opacity: 0;
}
#mainSplit.canvas-open {
    flex-direction: row;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-right: 50vw;
}
#mainSplit.canvas-open #canvasPanel {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 48px !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    height: auto !important;
    min-height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-top: none !important;
    opacity: 1;
}
#mainSplit.canvas-open .chat-area { flex: 1; min-width: 0; min-height: 0; }
#mainSplit.canvas-open ~ .input-area {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 10;
    width: 50%;
    max-width: 50%;
    margin: 0;
}
.sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open {
    padding-right: calc((100vw - 272px) / 2);
}
.sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open #canvasPanel {
    width: calc((100vw - 272px) / 2) !important;
    min-width: calc((100vw - 272px) / 2) !important;
    max-width: calc((100vw - 272px) / 2) !important;
}
.sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open ~ .input-area {
    width: calc((100vw - 272px) / 2);
    max-width: calc((100vw - 272px) / 2);
}
#mainSplit:not(.canvas-open) ~ .input-area {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 10;
    width: auto;
    max-width: none;
    margin: 0;
}
.main-split.canvas-fullscreen .canvas-panel {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    border-left: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.main-split.canvas-fullscreen .chat-area { display: none; }
#mainSplit.canvas-fullscreen {
    padding-right: 0 !important;
}
#mainSplit.canvas-fullscreen #canvasPanel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
    z-index: 9999 !important;
}

/* Canvas acikken chat bolgesi solda hizalansin */
@media (min-width: 1025px) {
    .main-split.canvas-open .chat-inner {
        max-width: none;
        margin: 0;
        padding: 20px 20px 120px;
    }
    .main-split.canvas-open .msg-row,
    .main-split.canvas-open .typing-row {
        max-width: none;
        margin: 0;
    }
    .main-split.canvas-open .msg {
        padding: 10px 0;
    }
    .main-split.canvas-open .msg + .msg {
        margin-top: 8px;
    }
    .main-split.canvas-open .input-wrap,
    .main-split.canvas-open .ia-hint {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* input-area main-split disinda kardes oldugunda da sola yasla */
    .main-split.canvas-open ~ .input-area .input-wrap,
    .main-split.canvas-open + .input-area .input-wrap,
    .main-split.canvas-open ~ .input-area .ia-hint,
    .main-split.canvas-open + .input-area .ia-hint {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Canvas kapaliyken varsayilan merkeze donus kesin olsun */
    .main-split:not(.canvas-open) ~ .input-area .input-wrap,
    .main-split:not(.canvas-open) + .input-area .input-wrap,
    .main-split:not(.canvas-open) ~ .input-area .ia-hint,
    .main-split:not(.canvas-open) + .input-area .ia-hint {
        max-width: 900px;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

.canvas-resizer {
    width: 0;
    flex-shrink: 0;
    cursor: col-resize;
    position: relative;
    display: none;
    pointer-events: none;
}
.main-split.canvas-open .canvas-resizer {
    width: 0;
    display: none;
}
.main-split.canvas-fullscreen .canvas-resizer { display: none; }
.canvas-resizer::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.canvas-resizer:hover::before { opacity: 1; }

.cv-toolbar {
    height: 48px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(20,20,25,0.92);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}
.cv-toolbar-left { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-file-indicator {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    font-size: 12px; color: #d4d4d8; font-weight: 500;
    min-width: 0;
}
.cv-file-indicator span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-file-indicator svg { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }
.cv-lang-badge {
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #a78bfa;
    border: 1px solid rgba(167,139,250,0.3);
    background: rgba(167,139,250,0.14);
}
.cv-view-toggle {
    position: relative;
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.cv-toggle-slider {
    position: absolute;
    top: 3px; left: 3px;
    height: calc(100% - 6px);
    border-radius: 6px;
    background: #8b5cf6;
    box-shadow: 0 2px 12px rgba(139,92,246,0.35);
    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
}
.cv-tab {
    position: relative; z-index: 2;
    border: none; background: transparent;
    color: #71717a;
    font-size: 12px; font-weight: 600;
    border-radius: 6px;
    padding: 5px 14px; cursor: pointer;
    transition: color .18s;
}
.cv-tab.active { color: #fff; }
.cv-tab.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.cv-toolbar-right { display: flex; align-items: center; gap: 2px; }
.cv-tool-btn {
    width: 32px; height: 32px;
    border: none; background: transparent; color: #71717a;
    border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
    position: relative;
}
.cv-tool-btn:hover { color: #e4e4e7; background: rgba(255,255,255,0.06); transform: scale(1.05); }
.cv-tool-btn:active { transform: scale(.95); }
.cv-tool-btn svg { width: 15px; height: 15px; }
.cv-tool-btn::after {
    content: attr(data-tip);
    position: absolute;
    bottom: -30px; left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.09);
    background: #17171d;
    color: #d4d4d8;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: all .15s ease;
    z-index: 20;
}
.cv-tool-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.cv-file-tabs {
    height: 38px;
    display: flex; align-items: flex-end;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 8px;
    background: #101014;
    scrollbar-width: none;
    flex-shrink: 0;
}
.cv-file-tabs::-webkit-scrollbar { display: none; }
.cv-ftab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #71717a; font-size: 12px; font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.cv-ftab:hover { color: #e4e4e7; background: rgba(255,255,255,0.04); }
.cv-ftab.active { color: #e4e4e7; background: #15151c; border-color: rgba(255,255,255,0.06); }
.cv-ftab.active::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: #8b5cf6;
}
.cv-ftab-close {
    width: 15px; height: 15px; line-height: 14px;
    border: none; background: transparent; color: #52525b;
    border-radius: 4px; cursor: pointer;
}
.cv-ftab-close:hover { color: #e4e4e7; background: rgba(255,255,255,0.08); }

.cv-body { flex: 1; overflow: hidden; position: relative; }
.cv-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--t3); font-size: 13px; text-align: center;
}
.cv-code-wrap,.cv-preview { height: 100%; }
.cv-code-wrap { position: relative; display: flex; flex-direction: column; }
.cv-code-search {
    display: none; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(20,20,25,0.92);
}
.cv-code-search.show { display: flex; }
.cv-code-search input {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.03);
    color: #e4e4e7;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12px;
}
.cv-code-search span { font-size: 11px; color: #71717a; }
.cv-code-search button {
    border: none; background: transparent; color: #71717a;
    cursor: pointer; font-size: 14px;
}
.cv-code-copy-float {
    position: absolute; top: 10px; right: 14px; z-index: 8;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(20,20,25,0.95);
    color: #a1a1aa;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    opacity: 0; transform: translateY(-4px);
    transition: all .2s ease;
}
.cv-code-wrap:hover .cv-code-copy-float { opacity: 1; transform: translateY(0); }
.cv-code-scroller {
    flex: 1;
    display: grid;
    grid-template-columns: 52px 1fr;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.cv-code-scroller::-webkit-scrollbar { width: 8px; height: 8px; }
.cv-code-scroller::-webkit-scrollbar-thumb { background: #333; border-radius: 8px; }
.cv-line-nums {
    padding: 16px 0;
    background: #0c0c0f;
    position: sticky; left: 0; z-index: 2;
    text-align: right;
    user-select: none;
}
.cv-line-nums span {
    display: block;
    padding-right: 12px;
    font-family: var(--fm);
    font-size: 12px;
    line-height: 1.65;
    color: #52525b;
}
.cv-code {
    margin: 0; padding: 16px 16px 16px 12px;
    font-family: var(--fm); font-size: 13px; line-height: 1.65;
    color: #e4e4e7; white-space: pre;
}
.cv-code code { font-family: var(--fm) !important; }

.cv-preview { display: flex; flex-direction: column; background: #0f0f14; }
.cv-device-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(20,20,25,0.92);
}
.cv-device-btn {
    border: 1px solid transparent;
    background: transparent; color: #71717a;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
}
.cv-device-btn.active {
    background: rgba(139,92,246,0.14);
    color: #a78bfa;
    border-color: rgba(139,92,246,0.3);
}
.cv-preview-error {
    display: none;
    margin: 8px 10px 0;
    padding: 8px 10px;
    border-radius: 6px;
    color: #fca5a5;
    border: 1px solid rgba(248,113,113,0.22);
    background: rgba(248,113,113,0.1);
    font-size: 12px;
}
.cv-preview-error.show { display: block; }
.cv-preview-wrap {
    flex: 1; display: flex; align-items: flex-start; justify-content: center;
    overflow: auto; padding: 12px;
}
.cv-iframe-wrap {
    width: 100%; height: 100%;
    border-radius: 10px; overflow: hidden;
    background: #fff;
    transition: width .3s cubic-bezier(0.4,0,0.2,1);
}
.cv-iframe-wrap.mobile { width: 375px; max-width: 100%; }
.cv-iframe-wrap.tablet { width: 768px; max-width: 100%; }
.cv-iframe-wrap iframe { width: 100%; height: 100%; border: none; background: #fff; }

.cv-version-nav {
    height: 40px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(20,20,25,0.92);
    flex-shrink: 0;
}
.cv-vbtn {
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: transparent; color: #71717a;
    cursor: pointer;
}
.cv-vbtn:disabled { opacity: .35; cursor: not-allowed; }
.cv-version-dots { display: flex; align-items: center; gap: 4px; }
.cv-vdot {
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid #52525b; background: transparent;
    cursor: pointer;
}
.cv-vdot.active { background: #8b5cf6; border-color: #8b5cf6; }
.cv-version-label { min-width: 24px; text-align: center; font-size: 11px; color: #a1a1aa; font-weight: 600; }
.cv-diff-btn {
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: #71717a;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
}
.cv-diff-btn.active { background: rgba(139,92,246,0.14); color: #a78bfa; border-color: rgba(139,92,246,0.3); }
.cv-diff-add { display: block; background: rgba(52,211,153,0.1); }
.cv-diff-rem { display: block; background: rgba(248,113,113,0.1); text-decoration: line-through; opacity: 0.75; }

/* ═══════════════════════════════════════════
   CODE BLOCK ACTION BUTTONS (Mesaj içi)
   ═══════════════════════════════════════════ */
.code-block-wrap {
    margin: 12px 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(12,14,22,0.75);
}
.code-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.code-lang {
    font-family: var(--fm);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #8b93a9;
    text-transform: uppercase;
}
.code-hdr-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}
.code-cp,
.code-preview-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    color: #a8b1c7;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--f);
    line-height: 1;
    padding: 7px 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.code-cp:hover,
.code-preview-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: #e5e7eb;
    transform: translateY(-1px);
}
.code-preview-btn {
    border-color: rgba(139,92,246,0.35);
    color: #c4b5fd;
    background: rgba(139,92,246,0.1);
}
.code-preview-btn:hover {
    border-color: rgba(139,92,246,0.55);
    background: rgba(139,92,246,0.16);
    box-shadow: 0 0 0 1px rgba(139,92,246,0.25);
}
.code-block-wrap pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
}


/* ═══════════════════════════════════════════
   INPUT AREA
   ═══════════════════════════════════════════ */
.input-area {
    padding: var(--pad-y) var(--pad-x) max(16px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    background: linear-gradient(to top, var(--bg) 60%, transparent);
    box-sizing: border-box;
}
.input-wrap {
    max-width: var(--input-max-w);
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}
.input-glow {
    position: absolute; inset: -1px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(79,142,247,0.2), rgba(62,207,142,0.1), rgba(79,142,247,0.08));
    opacity: 0;
    transition: opacity 0.4s var(--e);
    pointer-events: none; z-index: 0;
    filter: blur(1px);
}
.input-wrap:focus-within .input-glow { opacity: 0; }

.input-box {
    background: var(--bg-input);
    backdrop-filter: blur(20px);
    border: 1px solid var(--b2);
    border-radius: var(--radius-xl);
    position: relative; z-index: 1;
    overflow: visible;
    transition: border-color 0.25s, box-shadow 0.25s;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.input-box:focus-within {
    border-color: var(--b2);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
/* Yazma alanında turkuaz çizgi/outline kaldırılır */
.input-area textarea:focus,
.input-area textarea:focus-visible {
    outline: none !important;
}
body.numex-focus-indicator .input-area textarea:focus-visible,
body.numex-focus-indicator .input-area .input-box:focus-within {
    outline: none !important;
}

/* Textarea */
.ta-wrap { padding: clamp(10px, 1.8vw, 14px) var(--pad-input) 4px; }
.ta-wrap textarea {
    width: 100%; background: transparent;
    border: none; outline: none; resize: none;
    font-family: var(--f2);
    font-size: var(--font-ta); line-height: 1.6;
    color: var(--t);
    max-height: 200px; min-height: 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--s3) transparent;
}
.ta-wrap textarea::placeholder { color: var(--t3); }

/* File Chips */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 0; }
.fchips:empty { display: none; padding: 0; }
.fchip {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 8px;
    background: var(--s2);
    border: 1px solid var(--b);
    font-size: 12px; color: var(--t2);
    max-width: 180px;
}
.fchip svg { width: 12px; height: 12px; stroke: var(--ac); fill: none; stroke-width: 2; flex-shrink: 0; }
.fchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fchip-x {
    width: 16px; height: 16px;
    border-radius: 50%; background: var(--s3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background 0.14s;
}
.fchip-x:hover { background: var(--re); }
.fchip-x svg { width: 8px; height: 8px; stroke: var(--t3); }

/* Voice Bar */
.vbar {
    display: none; align-items: center; gap: 11px;
    padding: 10px 15px;
    background: rgba(62,207,142,0.05);
    border-top: 1px solid rgba(62,207,142,0.1);
}
.vbar.show { display: flex; }
.vwave { display: flex; align-items: center; gap: 3px; height: 20px; }
.vwave span { display: block; width: 2.5px; border-radius: 3px; background: var(--gr); animation: vw 1.1s ease-in-out infinite; }
.vwave span:nth-child(1){height:5px}.vwave span:nth-child(2){height:14px;animation-delay:.1s}.vwave span:nth-child(3){height:8px;animation-delay:.2s}.vwave span:nth-child(4){height:18px;animation-delay:.3s}.vwave span:nth-child(5){height:7px;animation-delay:.4s}.vwave span:nth-child(6){height:12px;animation-delay:.5s}.vwave span:nth-child(7){height:5px;animation-delay:.6s}
@keyframes vw{0%,100%{transform:scaleY(1);opacity:.5}50%{transform:scaleY(1.7);opacity:1}}
.vbar-txt { font-size: 13px; color: var(--gr); flex: 1; }
.vbar-stop {
    background: transparent; border: 1px solid var(--b2);
    border-radius: 7px; color: var(--t3);
    font-family: var(--f); font-size: 12px;
    padding: 4px 11px; cursor: pointer;
    transition: var(--tr);
}
.vbar-stop:hover { color: var(--re); border-color: var(--re); }

/* ── TOOLBAR: Araçlar + Kanvas + Butonlar ── */
.ia-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-y) var(--pad-input) 10px;
    border-top: 0;
    gap: var(--gap-toolbar);
    position: relative;
    z-index: 8;
    flex-wrap: wrap;
}
.ia-left {
    display: flex; align-items: center;
    gap: var(--gap-toolbar); flex-wrap: wrap;
    flex: 1; min-width: 0;
    position: relative;
}
.ia-right {
    display: flex; align-items: center;
    gap: var(--gap-toolbar);
    flex-shrink: 0;
    min-width: 0;
}

/* Tool Chips */
.tc {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--s1);
    border: 1px solid var(--b);
    cursor: pointer;
    font-family: var(--f); font-size: 12px; font-weight: 500;
    color: var(--t3);
    transition: all 0.18s var(--e);
    user-select: none; white-space: nowrap;
}
.tc svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round;
    flex-shrink: 0;
}
.tc:hover { color: var(--t2); background: var(--s2); border-color: var(--b2); }
.tc.icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    justify-content: center;
    gap: 0;
}
.tc.icon-only svg { width: 14px; height: 14px; }

/* Aktif durumlar */
.tc.on { border-color: rgba(79,142,247,0.3); background: var(--acb); color: var(--ac); }
.tc.img.on { border-color: rgba(167,139,250,0.3); background: var(--pub); color: var(--pu); }
.tc.code.on { border-color: rgba(245,158,11,0.3); background: var(--orb); color: var(--or); }
.tc.canvas.on { border-color: rgba(62,207,142,0.3); background: var(--grb); color: var(--gr); }

/* Ayırıcı */
.tc-divider {
    width: 1px; height: 18px;
    background: var(--b);
    margin: 0 4px; flex-shrink: 0;
    display: none;
}

/* Tools dropdown */
.tools-dd-wrap {
    position: relative;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.tools-toggle {
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--t2);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.14);
    font-weight: 600;
}
.tools-toggle.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    justify-content: center;
    border: none;
    background: transparent;
    color: #5fa3ff;
    box-shadow: none;
}
.tools-toggle.icon-only:hover {
    background: rgba(10, 14, 26, 0.95);
    border: 1px solid rgba(95,163,255,0.22);
    color: #79b5ff;
    filter: drop-shadow(0 0 7px rgba(95,163,255,0.25));
}
.tools-toggle svg {
    width: 19px;
    height: 19px;
}
.tools-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 270px;
    padding: 5px;
    border-radius: var(--radius);
    border: 1px solid var(--b2);
    background: var(--bg3);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 9999;
}
.tools-dd-wrap.open .tools-menu { display: flex; }
.tools-menu.show { display: flex !important; }
.tools-dd-wrap:focus-within .tools-menu { display: flex; }
.tools-menu .tc {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border: none;
    color: var(--t2);
    min-height: 38px;
    border-radius: 8px;
    padding: 9px 10px;
    position: relative;
    gap: 10px;
}
.tools-menu .tc:hover {
    background: var(--s2);
}
.tools-menu .tc.on {
    background: var(--acb);
    color: var(--ac);
}
.tools-menu .tool-info { flex: 1; min-width: 0; }
.tools-menu .tool-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
}
.tools-menu .tool-desc {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--t3);
}
.tools-menu .tool-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tools-menu .td-web { background: #4f8ef7; }
.tools-menu .td-code { background: #f59e0b; }
.tools-menu .td-img { background: #a78bfa; }
.tools-menu .tool-check {
    color: var(--ac);
    opacity: 0;
    flex-shrink: 0;
}
.tools-menu .tc.on .tool-check { opacity: 1; }
.tools-menu .tc.on .tool-name { color: var(--ac); }
.tools-menu .tc.on .tool-desc { color: var(--t2); }
.tools-menu .tool-opt svg:not(.tool-check) { display: none; }

#tcCanvas.tc.canvas.icon-only {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(62,207,142,0.28);
    background: rgba(62,207,142,0.07);
    color: #57f0ba;
    box-shadow: inset 0 0 0 1px rgba(62,207,142,0.08);
    display: inline-flex !important;
    flex-shrink: 0 !important;
    margin-left: 6px;
}
#tcCanvas.tc.canvas.icon-only:hover {
    background: rgba(10, 14, 26, 0.95);
    border: 1px solid rgba(62,207,142,0.45);
    color: #7bffcf;
    filter: drop-shadow(0 0 8px rgba(62,207,142,0.32));
}
#tcCanvas.tc.canvas.icon-only.on {
    background: rgba(10, 14, 26, 0.98);
    border: 1px solid rgba(62,207,142,0.58);
    color: #95ffd9;
    filter: drop-shadow(0 0 9px rgba(62,207,142,0.45));
}

.ia-left .ia-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}
.ia-left .ia-btn svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 480px) {
    .tools-menu { min-width: 240px; }
}
.tools-active {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    flex-wrap: nowrap;
    max-width: 180px;
    overflow-x: auto;
    overflow-y: hidden;
}
.tools-active::-webkit-scrollbar { display: none; }
.tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--s2);
    border: 1px solid var(--b);
    color: var(--t2);
    font-size: 11.5px;
    white-space: nowrap;
}
.tool-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--t2);
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}
.tool-chip button {
    border: none;
    background: transparent;
    color: var(--t3);
    width: 14px;
    height: 14px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.tool-chip button:hover {
    color: var(--t);
    background: rgba(255,255,255,0.08);
}

/* Right-side model selector: free, no box */
.ia-right .model-inline.model-sel {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    gap: 5px;
}
.ia-right .model-inline.model-sel:hover {
    border: none;
    background: transparent;
}
.ia-right .model-inline .model-name {
    font-size: 12px;
    color: var(--t3);
    font-weight: 600;
}
.ia-right .model-inline .model-arrow {
    color: var(--t3);
}
.ia-right .model-inline .model-dd {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    min-width: 240px;
    z-index: 10000;
}
/* Dosya / Mikrofon Butonları */
.ia-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer; color: var(--ac);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s var(--e);
    flex-shrink: 0;
}
.ia-btn svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round;
}
.ia-btn:hover { background: rgba(79,142,247,0.09); border-color: rgba(79,142,247,0.2); color: var(--ac2); }
.ia-btn.mic-on { background: var(--grb); border-color: rgba(62,207,142,0.3); color: var(--gr); }
.ia-btn.listening {
    background: var(--grb);
    border-color: rgba(62,207,142,0.45);
    color: var(--gr);
    box-shadow: 0 0 0 0 rgba(62,207,142,0.35);
    animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
    0% { box-shadow: 0 0 0 0 rgba(62,207,142,0.35); }
    70% { box-shadow: 0 0 0 8px rgba(62,207,142,0.0); }
    100% { box-shadow: 0 0 0 0 rgba(62,207,142,0.0); }
}
.voice-chat-open-btn {
    background: rgba(0,212,170,0.10);
    border-color: rgba(0,212,170,0.26);
    color: #3ecf8e;
}
.voice-chat-open-btn:hover {
    background: rgba(0,212,170,0.16);
    border-color: rgba(0,212,170,0.34);
}
.voice-conv-overlay { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; }
.voice-conv-overlay.open { display: flex; }
.voice-conv-bg { position: absolute; inset: 0; background: radial-gradient(1100px 700px at 50% 42%, rgba(0,212,170,.12), transparent 70%), #090b14; }
.voice-conv-top, .voice-conv-bottom, .voice-conv-center { position: relative; z-index: 2; }
.voice-conv-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; }
.voice-conv-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); color: #9aa4bf; font-size: 12px; padding: 6px 12px; }
.voice-conv-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #00d4aa; box-shadow: 0 0 8px rgba(0,212,170,.4); }
.voice-conv-close { width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #d0d7eb; font-size: 22px; line-height: 1; cursor: pointer; }
.voice-conv-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.voice-conv-orb-wrap { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.voice-conv-orb-r {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(0,212,170,.2);
  animation: vcRing 13s linear infinite;
}
.voice-conv-orb-r::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00d4aa;
  top: -2px;
  left: 50%;
  margin-left: -2.5px;
  box-shadow: 0 0 10px rgba(0,212,170,.5);
  opacity: 0.7;
}
.voice-conv-orb-r.r1 { inset: 16px; }
.voice-conv-orb-r.r2 { inset: 0; opacity: .7; animation-duration: 17s; animation-direction: reverse; }
.voice-conv-orb-r.r3 { inset: -16px; opacity: .45; animation-duration: 24s; }
.voice-conv-overlay.listening .voice-conv-orb-r { border-color: rgba(0,212,170,.35); }
.voice-conv-overlay.listening .voice-conv-orb-r::after { opacity: 1; box-shadow: 0 0 14px rgba(0,212,170,.7); }
.voice-conv-overlay.speaking .voice-conv-orb-r::after { box-shadow: 0 0 16px rgba(0,212,170,.8); }
@keyframes vcRing { to { transform: rotate(360deg); } }
.voice-conv-orb { width: 148px; height: 148px; border-radius: 999px; border: 1px solid rgba(0,212,170,.26); background: radial-gradient(circle at 35% 30%, rgba(0,212,170,.16), rgba(7,10,18,.95) 70%); color: #00d4aa; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 40px rgba(0,212,170,.15); overflow: hidden; position: relative; }
.voice-conv-orb-canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.voice-conv-overlay.listening .voice-conv-orb { box-shadow: 0 0 70px rgba(0,212,170,.34), 0 0 140px rgba(0,212,170,.12); }
.voice-conv-overlay.speaking .voice-conv-orb { box-shadow: 0 0 90px rgba(0,212,170,.44), 0 0 180px rgba(0,212,170,.16); }
.voice-conv-status { font-size: 22px; font-weight: 600; color: #e7ecf8; }
.voice-conv-sub { font-size: 13px; color: #8a93aa; }
.voice-conv-transcript {
  margin-top: 6px;
  min-height: 22px;
  max-width: 560px;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  color: #b8c0d8;
  font-size: 14px;
  word-wrap: break-word;
  padding: 8px 12px;
  scrollbar-width: thin;
}
.voice-conv-bottom { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.voice-conv-bars { display: inline-flex; align-items: center; gap: 3px; height: 30px; }
.voice-conv-bars .bar { width: 3px; min-height: 4px; height: 4px; border-radius: 3px; background: rgba(0,212,170,.85); transition: height .08s ease; }
.voice-conv-row { display: inline-flex; align-items: center; gap: 12px; }
.voice-conv-ctrl, .voice-conv-main { border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #d3d9ea; padding: 10px 16px; font-size: 12px; cursor: pointer; }
.voice-conv-main { border-color: rgba(0,212,170,.35); color: #00d4aa; background: rgba(0,212,170,.10); }
.voice-conv-ctrl.danger { color: #ff8ea0; border-color: rgba(255,77,106,.32); background: rgba(255,77,106,.10); }

/* Gönder Butonu */
.send-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s var(--e);
    flex-shrink: 0;
}
.send-btn svg {
    width: 16px; height: 16px;
    stroke: var(--gr); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.send-btn:hover { background: rgba(62,207,142,0.09); border-color: rgba(62,207,142,0.3); transform: translateY(-1px); }
.send-btn:active { transform: scale(0.96); }
.send-btn:disabled { background: transparent; box-shadow: none; cursor: default; transform: none; border-color: transparent; }
.send-btn:disabled svg { stroke: var(--t3); }
.send-btn.on { background: transparent; }
.send-btn.stop-mode { background: linear-gradient(135deg, var(--re), #dc2626); box-shadow: 0 4px 18px rgba(239,68,68,0.2); }

/* Hint Bar */
.ia-hint { display: none; max-width: 900px; margin: 0 auto; }
.input-disclaimer {
    max-width: 820px;
    margin: 6px auto 0;
    padding: 0 6px;
    font-size: 11px;
    color: var(--t3);
    text-align: center;
    opacity: 0.9;
}
.ia-hint-l { display: flex; align-items: center; gap: 5px; }

/* ═══════════════════════════════════════════
   CHAT AREA OVERRIDE (User-provided design)
   ═══════════════════════════════════════════ */
.chat-area .chat-inner {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-split.canvas-open .chat-area .chat-inner {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px 100px;
}
.main-split.canvas-open .chat-area .msg-row,
.main-split.canvas-open .chat-area .typing-row {
    max-width: 100%;
    margin: 0;
}

.chat-area .msg {
    opacity: 0;
    animation: msgEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    z-index: 1;
}
.chat-area .msg.menu-open { z-index: 900; }
@keyframes msgEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-area .msg-row {
    gap: 16px;
    max-width: 100%;
    padding: 16px 0;
}
.chat-area .msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
    margin-top: 2px;
}
.chat-area .msg-avatar.ai,
.chat-area .msg-avatar.ai-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}
.chat-area .msg-avatar.user,
.chat-area .msg-avatar.user-avatar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

.chat-area .msg-content { gap: 4px; display: flex; flex-direction: column; max-width: none; }
.chat-area .msg-meta { display: flex; align-items: center; gap: 8px; }
.chat-area .msg-sender {
    font-size: 13px;
    font-weight: 600;
    color: #e8eaf0;
    margin-bottom: 0;
}
.chat-area .msg-badge {
    font-size: 10px;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.10);
    padding: 1px 7px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}
.chat-area .msg-time {
    font-size: 11px;
    color: #5c6070;
    opacity: 0;
    transition: opacity 150ms;
}
.chat-area .msg:hover .msg-time { opacity: 1; }

.chat-area .msg.user .msg-row { flex-direction: row-reverse; }
.chat-area .msg.user .msg-content { align-items: flex-end; }
.chat-area .msg.user .msg-bubble {
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 16px 16px 4px 16px;
    padding: 12px 20px;
    max-width: 75%;
    font-size: 14.5px;
    line-height: 1.65;
}
.chat-area .msg.ai .msg-bubble {
    font-size: 14.8px;
    line-height: 1.8;
    color: rgba(232, 234, 240, 0.92);
    padding: 4px 0;
}
.chat-area .msg.ai .msg-bubble p { margin-bottom: 0.75em; }
.chat-area .msg.ai .msg-bubble p:last-child { margin-bottom: 0; }

.chat-area .msg-actions {
    margin-top: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    opacity: 0.82;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, color 150ms ease, background 150ms ease;
}
.chat-area .msg-actions-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.chat-area .msg-actions-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.chat-area .msg:hover .msg-actions {
    opacity: 1;
}
.chat-area .msg-action-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9aa1b3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 0;
    transition: all 150ms;
}
.chat-area .msg-action-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
    fill: none;
}
.chat-area .msg-action-btn:hover {
    background: rgba(255,255,255,0.04);
    color: #d6dbea;
}
.chat-area .msg-action-btn span {
    display: none;
}
.chat-area .msg-action-btn.action-copy,
.chat-area .msg-action-btn.action-speak,
.chat-area .msg-action-btn.action-like,
.chat-area .msg-action-btn.action-dislike,
.chat-area .msg-action-btn.action-more { color: #9aa1b3; }
.chat-area .msg-action-text {
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
    color: #d6dbea;
    font-size: 11px;
    padding: 0 10px;
    min-width: 118px;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}
.chat-area .msg-action-text:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.24);
}
.chat-area .msg-action-text.canvas-hot {
    color: #ffb1b1;
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.12);
}
.chat-area .msg-more-wrap { position: relative; }
.chat-area .msg-more-wrap.open { z-index: 420; }
.chat-area .msg-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    bottom: auto;
    min-width: 230px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    background: #0f1422;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 16px 42px rgba(0,0,0,0.58);
    display: none;
    z-index: 430;
    isolation: isolate;
    opacity: 1;
    animation: msgMenuIn 140ms ease-out;
}
.chat-area .msg-more-head {
    font-size: 11px;
    color: #8b93a7;
    padding: 2px 8px 8px;
    letter-spacing: 0.03em;
}
.chat-area .msg-more-wrap.open .msg-more-menu { display: block; }
.chat-area .msg-more-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: #c9cfdd;
    border: none;
    border-radius: 9px;
    padding: 8px 9px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.chat-area .msg-more-item .mi-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.chat-area .msg-more-item .mi-hint {
    font-size: 11px;
    color: #7d8599;
}
.chat-area .msg-more-item svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.chat-area .msg-more-item:hover { background: rgba(255,255,255,0.06); }
.chat-area .msg-more-sep {
    height: 1px;
    margin: 6px 4px;
    background: rgba(255,255,255,0.08);
}
.chat-area .msg-more-item.danger { color: #fca5a5; }
@keyframes msgMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-area .code-block {
    margin: 16px 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    background: #0d0e14;
}
.chat-area .code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #16171f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-area .code-block__lang {
    font-family: var(--fm);
    font-size: 11px;
    color: #5c6070;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-area .code-block__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: #9ca0b0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
}
.chat-area .code-block .code-actions { display: flex; align-items: center; gap: 6px; }
.chat-area .code-block .code-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #9ca0b0;
}
.chat-area .code-block .code-actions button svg { width: 14px; height: 14px; }
.chat-area .code-block .code-actions button:hover { background: #1c1d28; color: #e8eaf0; border-color: rgba(255,255,255,0.14); }
.chat-area .code-block .code-actions button.copied { color: #22c55e; border-color: rgba(34,197,94,0.35); }
.chat-area .code-block__body { padding: 16px; overflow-x: auto; }
.chat-area .code-block__body pre { margin: 0; font-size: 13px; line-height: 1.65; }

.chat-area .web-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.chat-area .web-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    color: #b7bcc8;
}
.chat-area .web-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

.chat-area .think-block {
    margin-bottom: 10px;
    border-left: 2px solid rgba(99,102,241,0.36);
    padding-left: 12px;
}
.chat-area .think-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #b3b8c5;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
}
.chat-area .think-toggle:hover { color: #d2d7e3; }
.chat-area .think-body {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #9097a8;
}
.chat-area .think-toggle:not(.open) + .think-body { display: none; }
kbd {
    font-family: var(--fm);
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--s1);
    border: 1px solid var(--b2);
    color: var(--t3);
    box-shadow: 0 1px 0 var(--b2);
}
.hint-t { font-size: 11px; color: var(--t3); opacity: 0.5; }
.hint-d { font-size: 11px; color: var(--t3); opacity: 0.3; margin: 0 2px; }
.cc { font-size: 11px; color: var(--t3); opacity: 0.4; font-family: var(--fm); }
.cc.warn { color: var(--or); opacity: 1; }
.cc.over { color: var(--re); opacity: 1; }


/* ═══════════════════════════════════════════
   TARİHTE BUGÜN (TIH)
   ═══════════════════════════════════════════ */
.tih-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); z-index: 200; display: none; align-items: center; justify-content: center; }
.tih-ov.show { display: flex; }
.tih-panel { width: 520px; max-width: 95vw; max-height: 80vh; background: var(--bg3); border: 1px solid var(--b2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.tih-hdr { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--b); }
.tih-ic { font-size: 20px; }
.tih-htitle { font-size: 16px; font-weight: 700; color: var(--t); }
.tih-hdate { font-size: 12px; color: var(--t3); margin-top: 2px; }
.tih-xbtn { width: 30px; height: 30px; border-radius: 8px; background: none; border: none; color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--tr); }
.tih-xbtn:hover { background: var(--s2); color: var(--t2); }
.tih-xbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.tih-tabs { display: flex; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--b); }
.tih-tab { padding: 6px 12px; border-radius: 7px; background: none; border: none; color: var(--t3); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--f); transition: var(--tr); }
.tih-tab:hover { color: var(--t2); background: var(--s2); }
.tih-tab.active { color: var(--ac); background: var(--acb); }
.tih-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.tih-ev {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 2px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tih-ev:last-child { border-bottom: 0; padding-bottom: 4px; }
.tih-year {
    width: 44px;
    flex-shrink: 0;
    font-family: var(--fm);
    font-size: 12.5px;
    font-weight: 700;
    color: #6fb3ff;
    line-height: 1.35;
    opacity: 0.95;
}
.tih-ev-ttl {
    font-size: 14px;
    font-weight: 700;
    color: var(--t);
    line-height: 1.52;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.tih-ev-dsc {
    font-size: 12.8px;
    color: rgba(222, 229, 242, 0.88);
    line-height: 1.62;
}
.tih-catbadge {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--b2);
    background: var(--s1);
    color: var(--t3);
}
.tih-catbadge.h { color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); background: rgba(59, 130, 246, 0.13); }
.tih-catbadge.s { color: #86efac; border-color: rgba(134, 239, 172, 0.32); background: rgba(34, 197, 94, 0.12); }
.tih-catbadge.t { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.32); background: rgba(139, 92, 246, 0.12); }
.tih-catbadge.a { color: #fdba74; border-color: rgba(253, 186, 116, 0.34); background: rgba(249, 115, 22, 0.12); }
.tih-empty {
    font-size: 12px;
    color: var(--t3);
    text-align: center;
    padding: 14px 6px;
}
.tih-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--b); }
.tih-ask { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 10px; background: var(--ac); border: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--f); transition: var(--tr); }
.tih-ask:hover { background: var(--ac2); }
.tih-ask svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.tih-nav { display: flex; gap: 5px; }
.tih-nb { width: 32px; height: 32px; border-radius: 8px; background: var(--s1); border: 1px solid var(--b2); color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--tr); }
.tih-nb:hover { color: var(--t2); border-color: var(--b3); }
.tih-nb svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Today-in-history mini card (script.js compatibility) */
.today-history-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 14px;
    padding: 2px 0 4px;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.today-history-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.today-history-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #dbeafe;
}
.today-history-brief-head { margin-bottom: 2px; }
.today-history-brief-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.today-history-brief-open:hover .today-history-card-title { color: #bfdbfe; }
.today-history-brief-text {
    display: inline-block;
    max-width: 440px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-history-dismiss {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
}
.today-history-dismiss:hover { background: var(--s2); color: var(--t2); }
.today-history-date {
    font-size: 11px;
    color: var(--t3);
    margin-bottom: 0;
}
.today-history-mini-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
}
.today-history-mini-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--t2);
    line-height: 1.4;
}
.today-history-brief-line { cursor: pointer; }
.today-history-brief-line:hover { color: var(--t); }
.today-history-mini-list .today-history-year {
    color: var(--ac);
    font-family: var(--fm);
    font-size: 11.5px;
    min-width: 42px;
}
.today-history-holiday {
    font-size: 12px;
    color: #86efac;
    margin-bottom: 8px;
}
.today-history-empty {
    font-size: 12px;
    color: var(--t3);
}
.today-history-card-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}
.today-history-btn {
    border: 1px solid var(--b2);
    background: var(--s1);
    color: var(--t2);
    border-radius: 8px;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}
.today-history-btn:hover { background: var(--s2); color: var(--t); }


/* ═══════════════════════════════════════════
   KOD PANELİ
   ═══════════════════════════════════════════ */
.kod-panel { display: none; border-top: 1px solid var(--b); background: var(--bg2); }
.kod-panel.open { display: block; }
.kod-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--b); font-size: 14px; font-weight: 600; color: var(--t); }
.kod-panel-header button { background: none; border: none; color: var(--t3); cursor: pointer; font-family: var(--f); font-size: 13px; transition: var(--tr); }
.kod-panel-header button:hover { color: var(--t); }
.kod-panel-body { padding: 12px; }
.kod-panel-body textarea { width: 100%; min-height: 150px; background: var(--bg); border: 1px solid var(--b); border-radius: 10px; padding: 12px; color: var(--t); font-family: var(--fm); font-size: 13px; resize: vertical; outline: none; }
.kod-panel-body textarea:focus { border-color: var(--ac); }
.kod-panel-actions { display: flex; gap: 8px; margin-top: 10px; }
.kod-panel-actions button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--b); background: var(--s1); color: var(--t2); font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--f); transition: var(--tr); }
.kod-panel-actions button:hover { background: var(--s2); color: var(--t); }


/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast {
    position: fixed; top: 64px; right: 18px; z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: rgba(17,20,32,0.96);
    border: 1px solid var(--b2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    font-size: 13.5px; color: var(--t);
    opacity: 0; transform: translateY(-10px) scale(0.97);
    transition: all 0.22s var(--e2);
    pointer-events: none;
}
.toast.show { opacity: 1; transform: none; pointer-events: all; }
.toast-ic {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--grb);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.toast-ic svg { width: 11px; height: 11px; stroke: var(--gr); fill: none; stroke-width: 2.5; stroke-linecap: round; }


/* ═══════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════ */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--bg3); border: 1px solid var(--b2);
    color: var(--t); font-size: 11.5px;
    white-space: nowrap; padding: 5px 10px;
    border-radius: 8px;
    pointer-events: none; opacity: 0;
    transition: opacity 0.14s;
    z-index: 999;
    box-shadow: var(--shadow-lg);
    font-family: var(--f); font-weight: 400;
}
[data-tip]:hover::after { opacity: 1; }


/* ═══════════════════════════════════════════
   MESAJ YAPISI — Claude.ai Tarzı
   ═══════════════════════════════════════════ */
.msg {
    padding: 6px 0;
    animation: msgIn 0.25s ease-out;
}
.msg.message-wrapper {
    display: block;
    width: 100%;
}
.msg.message-wrapper.user {
    justify-content: initial;
    flex-direction: initial;
}
.msg.message-wrapper.ai {
    justify-content: initial;
    flex-direction: initial;
}
.msg.message-wrapper.ai .msg-ava-ai {
    order: initial;
}
.msg.message-wrapper.ai .msg-content-ai {
    order: initial;
    flex: initial;
    width: auto;
    max-width: none;
    margin: 0;
}
.msg.message-wrapper.user .msg-content,
.msg.message-wrapper.ai .msg-content {
    flex: 1;
    max-width: none;
}
.msg.message-wrapper.user .msg-content {
    margin-right: 0;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 0;
}

.msg-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}
.msg-avatar.ai-avatar {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 0 12px rgba(59,130,246,0.15);
}
.msg-avatar.user-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.msg-sender {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(170, 178, 190, 0.84);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.msg-content {
    flex: 1;
    min-width: 0;
    max-width: min(100%, 760px);
    overflow-x: hidden;
}

.msg-bubble {
    font-size: 15.2px;
    line-height: 1.78;
    color: rgba(232, 234, 240, 0.9);
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    max-width: 100%;
}

.msg.user .msg-bubble {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 16px 16px 4px 16px;
    padding: 12px 18px;
    display: inline-block;
    max-width: 85%;
}

.msg.ai .msg-bubble {
    background: transparent;
    border: none;
    padding: 0;
}

.msg-bubble p { margin: 0 0 12px 0; }
.msg-bubble p:last-child { margin-bottom: 0; }

.msg-bubble h1 { font-size: 17px; font-weight: 600; margin: 18px 0 8px; color: #e8eaf0; }
.msg-bubble h2 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; color: #e8eaf0; }
.msg-bubble h3 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; color: #ddd; }
.msg-bubble > h1:first-child,
.msg-bubble > h2:first-child,
.msg-bubble > h3:first-child { margin-top: 0; }

.msg-bubble ul, .msg-bubble ol { margin: 9px 0 13px; padding-left: 20px; }
.msg-bubble li { margin-bottom: 6px; line-height: 1.72; font-size: 14.4px; color: rgba(232,234,240,0.86); }
.msg-bubble li::marker { color: rgba(123, 179, 252, 0.46); }

.msg-live-plain {
    margin: 0;
    font-size: 15px;
    line-height: 1.76;
    color: rgba(232, 234, 240, 0.88);
    white-space: normal;
}

.msg-bubble strong { font-weight: 600; color: rgba(232,234,240,0.95); }
.msg-bubble em { font-style: italic; color: rgba(232,234,240,0.8); }

.msg-bubble code:not(pre code) {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 2px 7px;
    color: #c4b5fd;
}

.msg-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.msg.user:hover .msg-user-actions { opacity: 1; }
.msg-user-actions button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
    background: none;
    border: none;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.msg-user-actions button:hover { background: rgba(255,255,255,0.06); color: #aaa; }

/* ═══════════════════════════════════════════
   KOD BLOKLARI — Profesyonel
   ═══════════════════════════════════════════ */
.msg-bubble pre {
    margin: 14px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255,255,255,0.06);
}
.code-block-wrap {
    animation: codeReveal 0.24s ease-out;
    transform-origin: top;
}
@keyframes codeReveal {
    from { opacity: 0; transform: translateY(4px) scaleY(0.985); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.code-lang {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.code-actions { display: flex; gap: 4px; }
.code-actions button {
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #777;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.code-actions button:hover {
    background: rgba(255,255,255,0.08);
    color: #bbb;
    border-color: rgba(255,255,255,0.1);
}
.msg-bubble pre code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.65;
    padding: 16px 18px;
    color: rgba(232,234,240,0.85);
    overflow-x: auto;
    tab-size: 4;
    background: transparent;
    border: none;
    border-radius: 0;
}
.code-actions button svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Tarih ayırıcı */
.date-sep {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    font-size: 11px;
    font-weight: 500;
    color: #555;
    letter-spacing: 0.04em;
}
.date-sep::before,
.date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.05);
}

/* STREAMING CURSOR */
.msg-bubble.streaming::after {
    content: '';
    display: inline-block;
    width: 2px; height: 18px;
    background: rgba(79,142,247,0.7);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s steps(2) infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.msg-bubble.done::after { display: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE — Telefon, Tablet, Laptop, Monitor, Geniş TV
   Tüm ekran boyutlarına otomatik uyum
   ═══════════════════════════════════════════ */

/* Genel: overflow kontrolü */
html { overflow-x: hidden; }
body { max-width: 100vw; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* 1920px+ Geniş ekran TV */
@media (min-width: 1920px) {
    .input-wrap, .chat-inner { max-width: 1200px; }
}

/* 1440px+ Büyük monitor */
@media (min-width: 1440px) and (max-width: 1919px) {
    .input-wrap, .chat-inner { max-width: 1000px; }
}

/* 900px – Tablet yatay / küçük laptop */
@media (max-width: 900px) {
    .sug-grid { grid-template-columns: 1fr; }
    .main-split.canvas-open .canvas-panel {
        width: 100%; min-width: 0; max-width: 100%;
        border-left: none; border-top: 1px solid rgba(255,255,255,0.06);
    }
    .main-split.canvas-open { flex-direction: column; }
    .main-split.canvas-open .canvas-resizer { display: none; }
}

/* 768px – Tablet dikey */
@media (max-width: 768px) {
    /* Tarihte Bugün kartını mobilde gizle – alan tasarrufu */
    .today-history-card,
    #todayHistoryCard { display: none !important; }
    .banner-sub { display: none !important; }

    .sidebar {
        position: fixed; left: 0; top: 0;
        z-index: 100; height: 100vh;
        width: min(280px, 85vw); min-width: 240px;
        transform: translateX(-100%);
        transition: transform 0.3s var(--e);
        box-shadow: none;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,0.5); }
    .sidebar.collapsed { transform: translateX(-100%); }

    .app-layout, .main, .main-split, .chat-area { min-width: 0; overflow-x: hidden; }
    .main { width: 100%; }
    .chat-scroll { overflow-x: hidden; }
    .chat-inner { padding: clamp(12px, 3vw, 16px) var(--pad-x) clamp(24px, 6vh, 40px); }
    .chat-area .msg-row { padding: 10px 0; gap: 10px; }
    .chat-area .msg.user .msg-bubble { max-width: 92%; }
    .chat-area .msg.ai .msg-bubble { max-width: 100%; }
    .msg-content { overflow-wrap: break-word; word-break: break-word; }
    .msg-bubble { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .msg-bubble pre, .msg-bubble code { max-width: 100%; overflow-x: auto; }

    .input-area { padding: var(--pad-y) var(--pad-x); padding-bottom: max(var(--pad-y), env(safe-area-inset-bottom)); }
    .input-wrap { width: 100%; max-width: 100%; }
    .input-box { width: 100%; box-sizing: border-box; }
    .ia-toolbar { padding: clamp(6px, 1.5vw, 10px) var(--pad-input); gap: clamp(6px, 1.5vw, 10px); }
    .ia-left, .ia-right { gap: clamp(6px, 1.5vw, 10px); }
    .ia-left { flex-wrap: wrap; }
    .model-sel { padding: clamp(5px, 1.2vw, 8px) clamp(8px, 2vw, 12px); }
    .model-name { max-width: clamp(90px, 24vw, 140px); }

    .topbar { flex-wrap: wrap; gap: clamp(4px, 1vw, 8px); min-height: auto; }
    .topbar-left { min-width: 0; flex: 1; }
    .topbar-home-link { max-width: clamp(140px, 35vw, 200px); }
    .topbar-home-link .home-title, .topbar-home-link .home-sub {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Welcome ekranı mobilde compact */
    .welcome { padding: 16px 12px 24px; justify-content: flex-start; }
    .wl-glyph { width: 48px; height: 48px; margin-bottom: 16px; }
    .wl-logo { width: 42px; height: 42px; font-size: 18px; }
    .wl-ring.r1 { inset: -6px; }
    .wl-ring.r2 { inset: -14px; }
    .wl-ring.r3 { inset: -24px; }
    .wl-title { font-size: clamp(18px, 5vw, 22px); margin-bottom: 6px; }
    .wl-sub { font-size: 13px; margin-bottom: 20px; max-width: 100%; }
    .sug-grid { gap: 8px; max-width: 100%; }
    .sug { padding: 10px 12px; }
    .sug-icon { width: 30px; height: 30px; }
    .sug-icon svg { width: 15px; height: 15px; }
    .sug-title { font-size: 12px; }
    .sug-desc { font-size: 11px; }
    #server-down-banner { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* 600px – Büyük telefon yatay */
@media (max-width: 600px) {
    .ia-btn { width: clamp(36px, 9vw, 42px) !important; height: clamp(36px, 9vw, 42px) !important; }
    .ia-btn svg { width: clamp(16px, 4vw, 19px) !important; height: clamp(16px, 4vw, 19px) !important; }
    .tc.icon-only { width: clamp(36px, 9vw, 42px); height: clamp(36px, 9vw, 42px); }
}

/* 480px – Telefon */
@media (max-width: 480px) {
    .topbar-home-link { max-width: clamp(110px, 50vw, 150px); }
    .topbar-home-link .home-title { font-size: clamp(10px, 2.8vw, 12px); }
    .topbar-home-link .home-sub { font-size: clamp(8px, 2.2vw, 10px); }
    .msg-avatar { width: clamp(24px, 6vw, 28px); height: clamp(24px, 6vw, 28px); font-size: 10px; }
    .ta-wrap textarea { font-size: 16px; } /* iOS zoom önleme */
}

/* 360px – Küçük telefon */
@media (max-width: 360px) {
    .model-name { max-width: 75px; font-size: 11px; }
    .topbar-home-link .home-sub { display: none; }
}

/* ═══════════════════════════════════════════
   MOBİL: Kanvas, Codex vb. masaüstü özellikler gizlenir
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    #tcCanvas,
    #tcCode,
    #tcImg,
    .mo-code,
    .btn-codex { display: none !important; }
    .kod-panel.open { display: none !important; }
    #mainSplit.canvas-open .canvas-panel { display: none !important; }
}

/* ═══════════════════════════════════════════
   AYARLAR PANELİ – MOBİL RESPONSİVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    #settingsOv { padding: 0; align-items: stretch; }
    #settingsOv .settings-panel {
        max-width: none; width: 100%; height: 100%;
        max-height: 100dvh; max-height: 100vh;
        border-radius: 0; border-left: none; border-right: none;
        display: flex; flex-direction: column; min-height: 0;
    }
    #settingsOv .settings-layout { flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
    #settingsOv .settings-sidebar {
        width: 100%; flex-direction: row; flex-wrap: wrap; flex-shrink: 0;
        padding: 10px 12px; gap: 6px; border-right: none; border-bottom: 1px solid var(--border);
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        justify-content: flex-start; max-height: 140px;
    }
    #settingsOv .sidebar-sep { width: 100%; padding: 4px 8px 2px; font-size: 9px; flex-basis: 100%; }
    #settingsOv .settings-tab {
        padding: 10px 14px; font-size: 13px; white-space: nowrap;
        flex-shrink: 0; border-radius: 10px;
    }
    #settingsOv .settings-tab.active::before { display: none; }
    #settingsOv .settings-content-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
    #settingsOv .settings-content { padding: 16px 14px 24px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #settingsOv .sg { margin-bottom: 20px; }
    #settingsOv .theme-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    #settingsOv .theme-card span { font-size: 11px; padding: 6px 4px; }
    #settingsOv .sr { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
    #settingsOv .sr-body { flex: 1 1 100%; min-width: 0; }
    #settingsOv .sr .s-input,
    #settingsOv .sr .s-sel { width: 100%; min-width: 0; }
    #settingsOv .settings-footer { padding: 14px 16px; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
    #settingsOv .s-btn { padding: 10px 18px; min-height: 44px; }
}
@media (max-width: 480px) {
    #settingsOv .s-hdr { padding: 14px 16px; flex-wrap: wrap; }
    #settingsOv .s-hdr-title { font-size: 15px; }
    #settingsOv .settings-tab .tab-label { font-size: 12px; }
    #settingsOv #tab-kisisellestirme .sr .sr-body { flex: 1 1 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════
   MOBİL UYGULAMA GÖRÜNÜMÜ (app-like)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; height: 100%; }
    html, body { height: 100%; overflow: hidden; }
    body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
    .app-layout { height: 100dvh; height: 100%; min-height: -webkit-fill-available; display: flex; flex-direction: column; }
    .main { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; }
    .numex-view-active { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .main-split { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .chat-area { flex: 1; min-height: 0; overflow: hidden; }
    .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .topbar { padding-top: max(var(--topbar-pad), env(safe-area-inset-top)); flex-shrink: 0; }
    .input-area { padding-bottom: max(16px, env(safe-area-inset-bottom) + 8px); flex-shrink: 0; }
    .tb-btn, .ia-btn, .send-btn, .model-sel, .tc { min-height: 44px; }
    .tb-btn { min-width: 44px; }
    button, .tc, .model-sel, .s-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .input-disclaimer { font-size: 11px; padding: 4px 0 0; }
}


/* ═══════════════════════════════════════════
   SYNTAX HIGHLIGHTING (Kanvas + Mesajlar)
   ═══════════════════════════════════════════ */
.kw { color: #c792ea; }
.st { color: #c3e88d; }
.cm { color: #546e7a; }
.nu { color: #f78c6c; }
.fn { color: #82aaff; }

/* Final settings parity (source-matched and scoped) */
#settingsOv {
  --s0: #10121a;
  --s1: #161923;
  --s2: #1d2130;
  --s3: #252a3a;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #d8dce8;
  --text2: #8890a6;
  --text3: #525970;
  --accent: #4f8ef7;
  --accent-bg: rgba(79,142,247,0.1);
  --accent-glow: rgba(79,142,247,0.2);
  --green: #3ecf8e;
  --red: #e05252;
  --orange: #f59e0b;
  --font: "DM Sans", sans-serif;
  --font-head: "Outfit", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --ease: cubic-bezier(.4,0,.2,1);
  position: fixed;
  inset: 0;
  background: rgba(7,8,13,0.75);
  backdrop-filter: blur(8px) saturate(1.2);
  z-index: 1000;
  padding: 20px;
  animation: fadeIn .2s var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
#settingsOv.settings-ov { display: none; align-items: center; justify-content: center; }
#settingsOv.settings-ov.open { display: flex; opacity: 1; }
#settingsOv .settings-panel {
  background: var(--s0);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  transform: none;
  opacity: 1;
  color: var(--text);
  animation: slideUp .25s var(--ease);
}
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
#settingsOv .s-hdr {
  display: flex;
  align-items: center;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  background: transparent;
}
#settingsOv .s-hdr-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-bg);
  border: 1px solid rgba(79,142,247,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
#settingsOv .s-hdr-icon svg { width: 15px; height: 15px; stroke: var(--accent); }
#settingsOv .s-hdr-title {
  flex: 1;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}
#settingsOv .s-hdr-sub { font-size: 12px; color: var(--text3); margin-top: 1px; font-family: var(--font); }
#settingsOv .s-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
#settingsOv .s-close svg { width: 15px; height: 15px; }
#settingsOv .s-close:hover { background: var(--s2); border-color: var(--border); color: var(--text); }
#settingsOv .settings-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; background: transparent; }
#settingsOv .settings-sidebar {
  width: 188px;
  flex-shrink: 0;
  padding: 9px 8px 10px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  background: transparent;
}
#settingsOv .sidebar-sep {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 9px 11px 3px;
  margin: 0;
}
#settingsOv .settings-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  width: 100%;
  position: relative;
}
#settingsOv .settings-tab .tab-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  flex-shrink: 0;
}
#settingsOv .settings-tab .tab-icon svg { width: 14px; height: 14px; }
#settingsOv .settings-tab .tab-label { white-space: nowrap; }
#settingsOv .settings-tab:hover { color: var(--text); }
#settingsOv .settings-tab:hover .tab-icon { background: var(--s2); border-color: var(--border); }
#settingsOv .settings-tab.active { color: var(--text); font-weight: 500; border-left: none; box-shadow: none; background: transparent; }
#settingsOv .settings-tab.active .tab-icon { background: var(--accent-bg); border-color: rgba(79,142,247,.25); color: inherit; }
#settingsOv .settings-tab.active .tab-icon svg { stroke: var(--accent); }
#settingsOv .settings-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent);
}
#settingsOv .settings-content-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
#settingsOv .settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--s3) transparent;
  background: transparent;
}
#settingsOv .settings-content::-webkit-scrollbar { width: 4px; }
#settingsOv .settings-content::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 4px; }
#settingsOv .settings-tab-pane { display: none; animation: paneIn .18s var(--ease); }
#settingsOv .settings-tab-pane.active { display: block; }
@keyframes paneIn { from{opacity:0;transform:translateX(8px)} to{opacity:1;transform:none} }
#settingsOv .sg { margin-bottom: 26px; }
#settingsOv .sg:last-child { margin-bottom: 0; }
#settingsOv .sg-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}
#settingsOv .sg-desc { font-size: 12.5px; color: var(--text3); margin-top: -8px; margin-bottom: 12px; line-height: 1.5; }
#settingsOv .sr {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 12px;
  margin-bottom: 6px;
}
#settingsOv .sr:last-child { margin-bottom: 0; border-bottom: 0; }
#settingsOv .sr:hover { border-color: var(--border2); }
#settingsOv .sr-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
}
#settingsOv .sr-icon svg { width: 14px; height: 14px; stroke: var(--text2); }
#settingsOv .sr-body { flex: 1; min-width: 0; }
#settingsOv .sl { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
#settingsOv .sd { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
#settingsOv .s-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}
#settingsOv .s-badge.pro { background: rgba(245,158,11,.15); color: var(--orange); border: 1px solid rgba(245,158,11,.25); }
#settingsOv .s-badge.new { background: rgba(62,207,142,.12); color: var(--green); border: 1px solid rgba(62,207,142,.22); }
#settingsOv .s-badge.beta { background: rgba(79,142,247,.12); color: var(--accent); border: 1px solid rgba(79,142,247,.22); }
#settingsOv .toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--s3);
  border: 1px solid var(--border2);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
#settingsOv .toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text3);
  transition: transform .2s var(--ease), background .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
#settingsOv .toggle.on { background: var(--accent); border-color: var(--accent); }
#settingsOv .toggle.on::after { transform: translateX(18px); background: #fff; }
#settingsOv .seg-ctrl { display: inline-flex; background: var(--s2); border: 1px solid var(--border2); border-radius: 9px; padding: 3px; gap: 2px; }
#settingsOv .seg-btn { padding: 6px 14px; border-radius: 7px; background: transparent; border: none; color: var(--text2); font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; }
#settingsOv .seg-btn.active { background: var(--s0); color: var(--text); border: 1px solid var(--border2); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
#settingsOv .font-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  transition: font-size .2s;
}
#settingsOv .radio-group { display: flex; flex-direction: column; gap: 6px; }
#settingsOv .radio-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--s1); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
#settingsOv .radio-opt:hover { border-color: var(--border2); }
#settingsOv .radio-opt.selected { border-color: rgba(79,142,247,.35); background: var(--accent-bg); }
#settingsOv .radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#settingsOv .radio-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; }
#settingsOv .radio-opt.selected .radio-dot { border-color: var(--accent); }
#settingsOv .radio-opt.selected .radio-dot::after { opacity: 1; }
#settingsOv .radio-label { font-size: 13.5px; color: var(--text); }
#settingsOv .radio-desc { font-size: 12px; color: var(--text3); }
#settingsOv .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
#settingsOv .theme-card { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; text-align: center; background: var(--s1); }
#settingsOv .theme-card:hover { border-color: var(--border2); }
#settingsOv .theme-card.selected { border-color: var(--accent); }
#settingsOv .theme-prev { height: 42px; width: auto; border-radius: 0; }
#settingsOv .theme-card span { display: block; font-size: 11px; color: var(--text2); padding: 5px 4px 6px; font-weight: 400; }
#settingsOv .theme-card.selected span { color: var(--accent); }
#settingsOv .range-wrap { display: flex; align-items: center; gap: 10px; }
#settingsOv .range-wrap input[type="range"] { flex: 1; height: 4px; border-radius: 2px; appearance: none; background: var(--s3); accent-color: var(--accent); }
#settingsOv .range-val { font-size: 12px; font-family: var(--mono); color: var(--text2); min-width: 28px; text-align: right; }
#settingsOv .s-sel {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 30px 7px 10px;
  min-width: 120px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238890a6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .14s;
}
#settingsOv .s-sel:hover { border-color: var(--border2); }
#settingsOv .s-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#settingsOv .s-sel option { background: var(--s2); }
#settingsOv .s-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
#settingsOv .s-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#settingsOv .s-input::placeholder { color: var(--text3); }
#settingsOv .s-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
#settingsOv .kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--s1); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; }
#settingsOv .kbd-row:last-child { margin-bottom: 0; border-bottom: 0; }
#settingsOv .kbd-label { font-size: 13.5px; color: var(--text); }
#settingsOv .kbds { display: flex; gap: 4px; align-items: center; }
#settingsOv kbd { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 5px; background: var(--s2); border: 1px solid var(--border2); color: var(--text2); box-shadow: 0 1px 0 var(--border2); }
#settingsOv .api-key-wrap { position: relative; }
#settingsOv .api-key-wrap .s-input { font-family: var(--mono); font-size: 13px; padding-right: 80px; letter-spacing: .04em; }
#settingsOv .api-reveal-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-family: var(--font); background: var(--s3); border: 1px solid var(--border2); border-radius: 6px; padding: 3px 9px; cursor: pointer; color: var(--text2); transition: all .14s; }
#settingsOv .api-reveal-btn:hover { color: var(--text); border-color: var(--accent); }
#settingsOv .info-card { background: var(--s1); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
#settingsOv .info-card-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--s2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#settingsOv .info-card-icon svg { width: 16px; height: 16px; }
#settingsOv .info-card-body { flex: 1; min-width: 0; }
#settingsOv .info-card-title { font-size: 13.5px; font-weight: 500; color: var(--text); }
#settingsOv .info-card-val { font-size: 12px; color: var(--text3); margin-top: 2px; font-family: var(--mono); }
#settingsOv .info-card-val.numex-health-ok { color: var(--green); }
#settingsOv .info-card-val.numex-health-warn { color: var(--orange); }
#settingsOv .info-card-val.numex-health-err { color: var(--red); }
#settingsOv .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
#settingsOv .s-btn { padding: 8px 16px; border-radius: 9px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
#settingsOv .s-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
#settingsOv .s-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(79,142,247,.3); }
#settingsOv .s-btn-primary:hover { background: #6ba3f9; box-shadow: 0 4px 18px rgba(79,142,247,.4); }
#settingsOv .s-btn-secondary { background: var(--s2); color: var(--text2); border-color: var(--border2); }
#settingsOv .s-btn-secondary:hover { color: var(--text); border-color: var(--accent); }
#settingsOv .s-btn-danger { background: rgba(224,82,82,.1); color: var(--red); border-color: rgba(224,82,82,.25); }
#settingsOv .s-btn-danger:hover { background: rgba(224,82,82,.2); }
#settingsOv .s-btn-danger:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
#settingsOv .s-btn-ghost { background: transparent; color: var(--text2); border-color: var(--border2); }
#settingsOv .s-btn-ghost:hover { color: var(--text); background: var(--s2); }
#settingsOv .settings-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 22px;
  border-top: 1px solid var(--border);
  background: var(--s0);
}

/* Small parity fixes for API & Gelismis / Hakkinda sections */
#settingsOv #tab-api-gelismis .sr,
#settingsOv #tab-hakkinda .info-card {
  padding-top: 11px;
  padding-bottom: 11px;
}
#settingsOv #tab-kisisellestirme .sr .sr-body {
  flex: 0 0 185px;
  min-width: 140px;
}
#settingsOv #tab-kisisellestirme .sr .s-input,
#settingsOv #tab-kisisellestirme .sr .s-sel {
  flex: 1;
  width: auto;
  min-width: 0;
}
#settingsOv #tab-kisisellestirme .sr .s-textarea {
  min-height: 70px;
}
#settingsOv #tab-api-gelismis .sr-icon,
#settingsOv #tab-hakkinda .info-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
#settingsOv #tab-api-gelismis .sr-icon svg,
#settingsOv #tab-hakkinda .info-card-icon svg {
  width: 15px;
  height: 15px;
}
#settingsOv #tab-hakkinda .info-card-title { line-height: 1.25; }
#settingsOv #tab-hakkinda .info-card-val { line-height: 1.35; }
#settingsOv #tab-api-gelismis .btn-row .s-btn,
#settingsOv #tab-hakkinda .btn-row .s-btn {
  min-height: 34px;
  padding: 7px 14px;
}
#settingsOv .legal-inline-wrap {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--s1);
  overflow: hidden;
}
#settingsOv .legal-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
#settingsOv .legal-inline-head .sg-title {
  margin: 0;
}
#settingsOv .legal-inline-close {
  min-height: 30px;
  padding: 5px 12px;
}
#settingsOv .legal-inline-frame {
  width: 100%;
  height: 420px;
  border: 0;
  background: #fff;
}

@media (max-width: 900px) {
  #settingsOv { padding: 10px; }
}

/* Chat readability final override (Claude-like flow) */
.chat-area .msg.ai .msg-bubble {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(232, 234, 240, 0.92);
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
}
.chat-area .msg.ai .msg-bubble p { margin: 0 0 12px 0; }
.chat-area .msg.ai .msg-bubble p:last-child { margin-bottom: 0; }
.chat-area .msg.ai .msg-bubble h1,
.chat-area .msg.ai .msg-bubble h2,
.chat-area .msg.ai .msg-bubble h3,
.chat-area .msg.ai .msg-bubble h4 {
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(232, 234, 240, 0.95);
  margin: 18px 0 8px 0;
}
.chat-area .msg.ai .msg-bubble h1 { font-size: 17px; }
.chat-area .msg.ai .msg-bubble h2 { font-size: 16px; }
.chat-area .msg.ai .msg-bubble h3 { font-size: 15px; }
.chat-area .msg.ai .msg-bubble h4 { font-size: 14px; color: rgba(232, 234, 240, 0.82); }
.chat-area .msg.ai .msg-bubble ul,
.chat-area .msg.ai .msg-bubble ol { margin: 8px 0 12px 0; padding-left: 20px; }
.chat-area .msg.ai .msg-bubble li {
  margin-bottom: 6px;
  line-height: 1.72;
  color: rgba(232, 234, 240, 0.86);
}
.chat-area .msg.ai .msg-bubble ul li { list-style-type: "— "; }
.chat-area .msg.ai .msg-bubble strong {
  font-weight: 600;
  color: rgba(232, 234, 240, 0.95);
}
.chat-area .typing-row {
  max-width: 100%;
  margin: 0;
  padding: 10px 0 6px;
  gap: 16px;
  justify-content: flex-start;
}
.chat-area .typing-row .thinking-flow {
  max-width: 760px;
}
.chat-area .msg.ai .msg-bubble code:not(pre code) {
  font-family: var(--fm);
  font-size: 0.92em;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 1px;
  color: rgba(196, 181, 253, 0.82);
  font-weight: 400;
}

/* Light theme readability tuning (non-layout) */
body.theme-light #settingsOv,
body.theme-aciksade #settingsOv,
body[data-theme="acik"] #settingsOv,
body[data-theme="aciksade"] #settingsOv {
  --s0: #f8fbff;
  --s1: #f1f5fb;
  --s2: #e9eef7;
  --s3: #dde5f2;
  --border: rgba(15,23,42,0.12);
  --border2: rgba(15,23,42,0.2);
  --text: #0f172a;
  --text2: #334155;
  --text3: #475569;
  --accent: #0ea5e9;
  --accent-bg: rgba(14,165,233,0.12);
  --accent-glow: rgba(14,165,233,0.22);
  background: rgba(15,23,42,0.22);
}
body.theme-light #settingsOv .settings-panel,
body.theme-aciksade #settingsOv .settings-panel,
body[data-theme="acik"] #settingsOv .settings-panel,
body[data-theme="aciksade"] #settingsOv .settings-panel {
  box-shadow: 0 22px 58px rgba(15,23,42,0.22), 0 0 0 1px rgba(15,23,42,0.06);
}
body.theme-light #settingsOv .theme-card span,
body.theme-aciksade #settingsOv .theme-card span,
body[data-theme="acik"] #settingsOv .theme-card span,
body[data-theme="aciksade"] #settingsOv .theme-card span {
  color: #334155;
}

body.theme-light .msg-bubble,
body.theme-light .msg-live-plain,
body.theme-aciksade .msg-bubble,
body.theme-aciksade .msg-live-plain,
body[data-theme="acik"] .msg-bubble,
body[data-theme="acik"] .msg-live-plain,
body[data-theme="aciksade"] .msg-bubble,
body[data-theme="aciksade"] .msg-live-plain {
  color: #1e293b;
}
body.theme-light .msg-bubble h1,
body.theme-light .msg-bubble h2,
body.theme-light .msg-bubble h3,
body.theme-light .msg-bubble h4,
body.theme-aciksade .msg-bubble h1,
body.theme-aciksade .msg-bubble h2,
body.theme-aciksade .msg-bubble h3,
body.theme-aciksade .msg-bubble h4,
body[data-theme="acik"] .msg-bubble h1,
body[data-theme="acik"] .msg-bubble h2,
body[data-theme="acik"] .msg-bubble h3,
body[data-theme="acik"] .msg-bubble h4,
body[data-theme="aciksade"] .msg-bubble h1,
body[data-theme="aciksade"] .msg-bubble h2,
body[data-theme="aciksade"] .msg-bubble h3,
body[data-theme="aciksade"] .msg-bubble h4 {
  color: #0f172a;
}
body.theme-light .msg-bubble li,
body.theme-aciksade .msg-bubble li,
body[data-theme="acik"] .msg-bubble li,
body[data-theme="aciksade"] .msg-bubble li {
  color: #334155;
}
body.theme-light .msg-bubble strong,
body.theme-aciksade .msg-bubble strong,
body[data-theme="acik"] .msg-bubble strong,
body[data-theme="aciksade"] .msg-bubble strong {
  color: #0f172a;
}
body.theme-light .msg-bubble em,
body.theme-aciksade .msg-bubble em,
body[data-theme="acik"] .msg-bubble em,
body[data-theme="aciksade"] .msg-bubble em {
  color: #475569;
}
body.theme-light .chat-area .msg.ai .msg-bubble,
body.theme-aciksade .chat-area .msg.ai .msg-bubble,
body[data-theme="acik"] .chat-area .msg.ai .msg-bubble,
body[data-theme="aciksade"] .chat-area .msg.ai .msg-bubble {
  color: #1e293b;
}

body.theme-light .chat-area .msg-action-btn,
body.theme-aciksade .chat-area .msg-action-btn,
body[data-theme="acik"] .chat-area .msg-action-btn,
body[data-theme="aciksade"] .chat-area .msg-action-btn {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.12);
  color: #334155;
}
body.theme-light .chat-area .msg-action-btn:hover,
body.theme-aciksade .chat-area .msg-action-btn:hover,
body[data-theme="acik"] .chat-area .msg-action-btn:hover,
body[data-theme="aciksade"] .chat-area .msg-action-btn:hover {
  background: rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.2);
  color: #0f172a;
}

body.theme-light .chat-area .code-block,
body.theme-aciksade .chat-area .code-block,
body[data-theme="acik"] .chat-area .code-block,
body[data-theme="aciksade"] .chat-area .code-block {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.12);
}
body.theme-light .chat-area .code-block__header,
body.theme-aciksade .chat-area .code-block__header,
body[data-theme="acik"] .chat-area .code-block__header,
body[data-theme="aciksade"] .chat-area .code-block__header {
  background: #eef2f7;
  border-bottom-color: rgba(15,23,42,0.12);
}
body.theme-light .chat-area .code-block__lang,
body.theme-aciksade .chat-area .code-block__lang,
body[data-theme="acik"] .chat-area .code-block__lang,
body[data-theme="aciksade"] .chat-area .code-block__lang {
  color: #475569;
}
body.theme-light .chat-area .code-block__copy,
body.theme-light .chat-area .code-block .code-actions button,
body.theme-aciksade .chat-area .code-block__copy,
body.theme-aciksade .chat-area .code-block .code-actions button,
body[data-theme="acik"] .chat-area .code-block__copy,
body[data-theme="acik"] .chat-area .code-block .code-actions button,
body[data-theme="aciksade"] .chat-area .code-block__copy,
body[data-theme="aciksade"] .chat-area .code-block .code-actions button {
  border-color: rgba(15,23,42,0.15);
  color: #334155;
}
body.theme-light .chat-area .code-block .code-actions button:hover,
body.theme-aciksade .chat-area .code-block .code-actions button:hover,
body[data-theme="acik"] .chat-area .code-block .code-actions button:hover,
body[data-theme="aciksade"] .chat-area .code-block .code-actions button:hover {
  background: rgba(15,23,42,0.08);
  color: #0f172a;
  border-color: rgba(15,23,42,0.22);
}

/* Light theme shell bars (left sidebar + topbar) */
body.theme-light .sidebar,
body.theme-aciksade .sidebar,
body[data-theme="acik"] .sidebar,
body[data-theme="aciksade"] .sidebar {
  background: linear-gradient(180deg, #f4f8ff 0%, #ecf2fb 100%);
  border-right-color: rgba(15,23,42,0.12);
}
body.theme-light .sb-header,
body.theme-aciksade .sb-header,
body[data-theme="acik"] .sb-header,
body[data-theme="aciksade"] .sb-header {
  border-bottom-color: rgba(15,23,42,0.12);
}
body.theme-light .sb-logo-text,
body.theme-aciksade .sb-logo-text,
body[data-theme="acik"] .sb-logo-text,
body[data-theme="aciksade"] .sb-logo-text {
  color: #0f172a;
}
body.theme-light .sb-new-chat,
body.theme-aciksade .sb-new-chat,
body[data-theme="acik"] .sb-new-chat,
body[data-theme="aciksade"] .sb-new-chat,
body.theme-light .sb-login-btn,
body.theme-aciksade .sb-login-btn,
body[data-theme="acik"] .sb-login-btn,
body[data-theme="aciksade"] .sb-login-btn {
  color: #1e293b;
}
body.theme-light .sb-search,
body.theme-aciksade .sb-search,
body[data-theme="acik"] .sb-search,
body[data-theme="aciksade"] .sb-search {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.14);
}
body.theme-light .sb-search input,
body.theme-aciksade .sb-search input,
body[data-theme="acik"] .sb-search input,
body[data-theme="aciksade"] .sb-search input {
  color: #0f172a;
}
body.theme-light .sb-group-label,
body.theme-aciksade .sb-group-label,
body[data-theme="acik"] .sb-group-label,
body[data-theme="aciksade"] .sb-group-label {
  color: #64748b;
}
body.theme-light .chat-item,
body.theme-aciksade .chat-item,
body[data-theme="acik"] .chat-item,
body[data-theme="aciksade"] .chat-item {
  color: #334155;
}
body.theme-light .chat-item:hover,
body.theme-aciksade .chat-item:hover,
body[data-theme="acik"] .chat-item:hover,
body[data-theme="aciksade"] .chat-item:hover {
  background: rgba(15,23,42,0.06);
  color: #0f172a;
}
body.theme-light .chat-item.active,
body.theme-aciksade .chat-item.active,
body[data-theme="acik"] .chat-item.active,
body[data-theme="aciksade"] .chat-item.active {
  background: rgba(14,165,233,0.14);
  color: #0f172a;
}
body.theme-light .chat-item .ci-menu-btn,
body.theme-aciksade .chat-item .ci-menu-btn,
body[data-theme="acik"] .chat-item .ci-menu-btn,
body[data-theme="aciksade"] .chat-item .ci-menu-btn {
  color: #64748b;
}
body.theme-light .chat-item .ci-menu-btn:hover,
body.theme-aciksade .chat-item .ci-menu-btn:hover,
body[data-theme="acik"] .chat-item .ci-menu-btn:hover,
body[data-theme="aciksade"] .chat-item .ci-menu-btn:hover {
  background: rgba(15,23,42,0.08);
  color: #0f172a;
}
body.theme-light .sb-footer,
body.theme-aciksade .sb-footer,
body[data-theme="acik"] .sb-footer,
body[data-theme="aciksade"] .sb-footer {
  border-top-color: rgba(15,23,42,0.12);
}

body.theme-light .topbar,
body.theme-aciksade .topbar,
body[data-theme="acik"] .topbar,
body[data-theme="aciksade"] .topbar {
  background: rgba(246,250,255,0.88);
  border-bottom-color: rgba(15,23,42,0.12);
}

/* ═══════════════════════════════════════════
   PWA - Ana Ekrana Ekle Banner
   ═══════════════════════════════════════════ */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,15,30,0.98), rgba(10,15,30,0.99));
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pwaBannerIn 0.35s var(--e);
}
@keyframes pwaBannerIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.pwa-install-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 400px;
  width: 100%;
}
.pwa-install-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.pwa-install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-install-text strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--t);
}
.pwa-install-text span {
  font-size: 12px;
  color: var(--t3);
}
.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwa-install-btn {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--ac);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr);
}
.pwa-install-btn:hover {
  background: var(--ac2);
  transform: scale(1.02);
}
.pwa-install-manual {
  width: 36px; height: 36px;
  border-radius: 8px; background: var(--s2);
  border: 1px solid var(--b);
  color: var(--t2); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.pwa-install-manual:hover { background: var(--s3); color: var(--ac); }
.pwa-install-dismiss {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
}
.pwa-install-dismiss:hover {
  background: var(--s2);
  color: var(--t);
}