/* ═══════════════════════════════════════════════════════════
   NUMEX AI PRO — PROFESYONEL ARAYÜZ CSS
   Sıfırdan yazılmış, modern ve temiz Numex arayüz kalitesi
   ═══════════════════════════════════════════════════════════ */

/* ── CSS DEĞİŞKENLERİ ── */
:root {
    --f: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 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.05);
    --b2: rgba(255,255,255,0.09);
    --b3: rgba(255,255,255,0.14);

    --ac: #00c9a7;
    --ac2: #2ee0c0;
    --acg: rgba(0,201,167,0.2);
    --acb: rgba(0,201,167,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(1100px, 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.05);
    --b2: rgba(255,255,255,0.09);
    --b3: rgba(255,255,255,0.14);
    --ac: #00c9a7;
    --ac2: #2ee0c0;
    --acg: rgba(0,201,167,0.2);
    --acb: rgba(0,201,167,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.38 !important;
    pointer-events: none !important;
    filter: grayscale(0.5);
    position: relative;
    cursor: not-allowed !important;
}
.tool-disabled::after {
    content: '🔒';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    opacity: 0.7;
    pointer-events: none;
}

/* ── 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(0,201,167,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: #00c9a7; 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: 99; 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); }
.voice-ring-logo svg { fill: currentColor; stroke: none; 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;
    width: 100%;
    max-width: 100vw;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
}

@keyframes numexLogoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Logo: sadece düşünce akışında 180° döner, cevap gelince durur */
@keyframes numexLogoSpin180 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}
/* Ortadaki logo: hafif parlama — PNG gibi durmasın */
@keyframes numexLogoGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(0,201,167,0.15)); }
    50% { filter: brightness(1.08) drop-shadow(0 0 18px rgba(0,201,167,0.35)); }
}
body.thinking-flow-active .numex-logo {
    animation: numexLogoSpin180 2s ease-in-out infinite;
}
.numex-logo {
    display: block;
    object-fit: contain;
    transform-origin: 50% 50%;
}
.sb-logo-icon .numex-logo { width: 32px; height: 32px; border-radius: 10px; }
.topbar-home-link .home-logo-mark .numex-logo { width: 22px; height: 22px; border-radius: 6px; }
/* Ana sayfa üst bar logosu: sürekli yavaş 180° dönüş (yaklaşık 8 saniye döngü) */
.numex-logo-topbar {
    animation: numexLogoSpin180 8s ease-in-out infinite;
}
/* Ana sayfa ortasındaki logo: sakin 180° sağa/sola salınım. */
.numex-logo-welcome {
    animation: numexLogoSpin180 8s ease-in-out infinite;
}
.wl-glyph { cursor: help; }
.wl-glyph:hover .numex-logo-welcome { filter: brightness(1.1) drop-shadow(0 0 20px rgba(0,201,167,0.4)); }
.msg-avatar .numex-logo { width: 100%; height: 100%; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
    body.thinking-flow-active .numex-logo { animation: none; }
    .numex-logo-topbar,
    .numex-logo-welcome { animation: none; }
}


/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
/* SIDEBAR-FIX: açılma/kapanma animasyonu */
.sidebar {
    width: 280px;
    border-right: 1px solid rgba(255,255,255,0.05);
    min-width: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #080810 0%, #0a0a12 100%);
    border-right: 1px solid var(--b);
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1), min-width 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    overflow: hidden;
    z-index: 50;
    flex-shrink: 0;
    opacity: 1;
}
.sidebar.collapsed {
    width: 0;
    border-right: none;
    min-width: 0;
    border-right: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
/* Kullanıcı mesajı düzenleme kutusu — önceden inline style'da var olmayan
   --border/--bg-tertiary/--text-primary değişkenlerine bağlıydı, bu yüzden
   arka plan/kenarlık hiç uygulanmıyor, koyu temada çıplak/varsayılan tarayıcı
   kutusu gibi görünüyordu. */
.msg-edit-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius, 12px);
    border: 1px solid var(--b2);
    background: var(--s2);
    color: var(--t);
    font: inherit;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.msg-edit-input:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px rgba(0,201,167,0.15);
}
.msg-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* Kaydet/İptal önceden stil verilmeyen çıplak <button> idi ("mt" sınıfı boştu) */
.msg-edit-actions .mt {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s ease;
}
.msg-edit-actions .mt-primary {
    background: var(--ac);
    color: #06110c;
    border-color: var(--ac);
}
.msg-edit-actions .mt-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.msg-edit-actions .mt-secondary {
    background: var(--s2);
    color: var(--t2);
    border-color: var(--b2);
}
.msg-edit-actions .mt-secondary:hover { background: var(--s3); color: var(--t); }

/* Sidebar kapalıyken main tam genişlesin */
.sidebar.collapsed ~ .main {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* SIDEBAR-FIX: kapanırken taşma önleme */
.sidebar .sb-header,
.sidebar .sb-new-chat,
.sidebar .sb-search,
.sidebar .sb-footer { white-space: nowrap; }

/* Header */
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    /* SIDEBAR-FIX */ border-bottom: none;
    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: 10px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    font-size: 0; /* N veya metin kalmasın, sadece img */
}
.sb-logo-icon svg,
.sb-logo-icon .numex-logo {
    width: 32px; height: 32px;
    display: block;
}
.sb-logo-text {
    font-size: 15px; font-weight: 700; color: #e8e8e8;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.sb-badge {
    background: rgba(0,201,167,0.12);
    border: 1px solid rgba(0,201,167,0.28);
    color: #00c9a7;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
    margin-left: 7px; vertical-align: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sb-close {
    width: 28px; height: 28px;
    /* SIDEBAR-FIX */ border-radius: 8px;
    background: none; border: none;
    color: var(--t3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    /* SIDEBAR-FIX */ transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
/* SIDEBAR-FIX */ .sb-close:hover { color: var(--t2); background: rgba(255,255,255,0.06); }
.sb-close svg { width: 15px; height: 15px; }
.sidebar.collapsed .sb-close svg { transform: rotate(180deg); }

/* Yeni Sohbet — SIDEBAR-FIX */
.sb-new-chat {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 12px 0;
    padding: 11px 16px; /* SIDEBAR-FIX */
    background: linear-gradient(135deg, rgba(0,201,167,0.15), rgba(0,201,167,0.05)); /* SIDEBAR-FIX */
    border: 1px solid rgba(0,201,167,0.25); /* SIDEBAR-FIX */
    border-radius: 12px; /* SIDEBAR-FIX */
    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 {
    border-color: rgba(0,201,167,0.45); /* SIDEBAR-FIX */
    background: linear-gradient(135deg, rgba(0,201,167,0.22), rgba(0,201,167,0.1)); /* SIDEBAR-FIX */
    box-shadow: 0 4px 16px rgba(0,201,167,0.15); /* SIDEBAR-FIX */
    transform: translateY(-1px); /* SIDEBAR-FIX */
    color: #fff;
}
.sb-new-chat:active { transform: scale(0.98); } /* SIDEBAR-FIX */
.sb-new-chat svg { flex-shrink: 0; width: 16px; height: 16px; } /* SIDEBAR-FIX */

/* Geçici Konuşma — Yeni Sohbet ile AYNI hiza/geometri, ama ikincil (sade) görünüm.
   sb-login-btn'in full-bleed teal kutusunu ezip nizama sokuyoruz. */
.sb-temp-chat.sb-login-btn {
    width: auto;
    margin: 8px 12px 0;
    padding: 10px 16px;
    border-radius: 12px;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: #b8c2d4;
    font-size: 13px;
    font-weight: 500;
}
.sb-temp-chat.sb-login-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: #fff;
}
.sb-temp-chat.sb-login-btn svg { width: 16px; height: 16px; opacity: 0.7; }

/* Arama — SIDEBAR-FIX */
.sb-search {
    display: flex; align-items: center; gap: 9px;
    margin: 8px 12px 0;
    padding: 10px 13px; /* daha ferah — "ince çizgi" hissi gitsin */
    background: rgba(255,255,255,0.03); /* SIDEBAR-FIX */
    border: 1px solid rgba(255,255,255,0.07); /* SIDEBAR-FIX */
    border-radius: 12px; /* SIDEBAR-FIX — üstteki kümeyle aynı yarıçap */
    transition: all 0.2s var(--e);
    flex-shrink: 0;
}
.sb-search:focus-within {
    border-color: rgba(0,201,167,0.28); /* SIDEBAR-FIX — yumuşak */
    background: rgba(255,255,255,0.05); /* SIDEBAR-FIX */
    box-shadow: 0 0 0 4px rgba(0,201,167,0.06); /* SIDEBAR-FIX — daha geniş, daha soluk */
}
.sb-search svg { width: 14px; height: 14px; stroke: var(--t3); flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s; } /* SIDEBAR-FIX */
.sb-search:focus-within svg { opacity: 0.8; } /* SIDEBAR-FIX */
.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: rgba(255,255,255,0.25); } /* SIDEBAR-FIX */

/* 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: 10.5px; /* SIDEBAR-FIX */
    font-weight: 700; /* SIDEBAR-FIX */
    color: rgba(255,255,255,0.25); /* SIDEBAR-FIX */
    text-transform: uppercase;
    letter-spacing: 0.08em; /* SIDEBAR-FIX */
    padding: 14px 18px 6px; /* SIDEBAR-FIX */
    user-select: none;
}
.sb-group-label:first-child,
.sb-body > .sb-group-label:first-of-type {
    padding-top: 8px;
}
.sb-group-note {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    padding: 0 18px 8px;
    line-height: 1.35;
}
.chat-list { padding: 0 6px; }

/* Sabitlenmiş bölümü — varsayılan gizli, JS dolu olduğunda gösterir */
.sb-pinned-label { display: none; }
#pinnedList:not(:empty) { display: block; }
.sb-pinned-label.sb-section-visible { display: block; }

/* Fotoğraflar bölümü — her zaman görünür (düzenleme için açık) */
.sb-photo-label,
.sb-photo-note { display: block; }
#photoList { display: block; }

/* 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: 6px;
    color: #666;
    font-size: 13px;
    position: relative;
}
.chat-item:hover {
    background: rgba(255,255,255,0.04); /* SIDEBAR-FIX */
    color: #aaa;
    border-radius: 10px; /* SIDEBAR-FIX */
    transition: all 0.15s; /* SIDEBAR-FIX */
}
.chat-item.active {
    background: rgba(0,201,167,0.12); /* SIDEBAR-FIX */
    border-left: 3px solid #00c9a7; /* SIDEBAR-FIX */
    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;
    color: rgba(255,255,255,0.2); /* SIDEBAR-FIX: pasif ikon rengi */
}
.chat-item .ci-icon-wrap svg { width: 15px; height: 15px; stroke: currentColor; }
.chat-item.active .ci-icon-wrap { opacity: 1; color: #00c9a7; } /* SIDEBAR-FIX: aktif ikon mavi */
.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 photo folders */
.photo-folder-block {
    margin: 4px 4px 8px;
}
.photo-folder-head {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: rgba(230,237,243,0.88);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.photo-folder-head:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
}
.photo-folder-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.photo-folder-icon {
    font-size: 14px;
    line-height: 1;
}
.photo-folder-right {
    font-size: 11px;
    color: rgba(255,255,255,0.58);
}
.photo-folder-items {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 1px dashed rgba(255,255,255,0.09);
}
.photo-folder-items.is-hidden {
    display: none;
}
.photo-entry {
    margin-bottom: 3px;
}
.photo-thumb-wrap {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px;
    overflow: hidden;
    background: #121622;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 1 !important;
}
.photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-entry-meta {
    font-size: 10px;
    opacity: 0.65;
    margin-top: 2px;
}
.photo-entry-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.photo-action-btn {
    position: static !important;
    width: 24px !important;
    height: 22px !important;
}
.photo-more-row {
    justify-content: center;
}
.photo-more-btn {
    position: static !important;
    width: auto !important;
    min-width: 132px;
    height: 28px !important;
    padding: 0 10px;
    display: inline-flex !important;
}

/* Sidebar Footer — SIDEBAR-FIX */
.sb-footer {
    padding: 12px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Ana buton: Giriş Yap */
.sb-login-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0,201,167,0.14), rgba(0,201,167,0.06));
    border: 1px solid rgba(0,201,167,0.22);
    border-radius: 10px;
    color: #d0d8e8;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.sb-login-btn:hover {
    border-color: rgba(0,201,167,0.42);
    background: rgba(0,201,167,0.18);
    color: #fff;
}
.sb-login-btn svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }

/* İkincil buton: Dış API — kompakt link stili */
.sb-login-btn.sb-secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.07);
    color: #4a5870;
    font-size: 12px;
    padding: 7px 14px;
}
.sb-login-btn.sb-secondary:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: #8a9bb0;
}
.sb-login-btn.sb-secondary svg { width: 14px; height: 14px; }

.sb-plan-info {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px 0;
    font-size: 11.5px;
    color: #3d4e62;
    white-space: nowrap;
}
.sb-plan-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.sb-plan-dot.free { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.4); }
.sb-plan-dot.pro  { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.4); }
.sb-upgrade-link {
    margin-left: auto;
    font-size: 11px;
    color: rgba(52,201,138,0.55);
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}
.sb-upgrade-link:hover { color: #34c98a; }

/* AUTH-MODAL: Centered auth modal (replaces sidebar dropdown) */
.auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.auth-backdrop.open {
    opacity: 1;
    pointer-events: all;
}
.auth-modal {
    width: 100%;
    max-width: 420px;
    margin: 20px;
    background: linear-gradient(180deg, #0e1019 0%, #0a0c14 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    position: relative;
}
.auth-backdrop.open .auth-modal {
    transform: none;
}
/* AUTH-MODAL: Logo & branding */
.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #9ca3b4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}
.auth-close:hover {
    background: rgba(255,255,255,0.08);
    color: #e8edf8;
}
.auth-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: transparent;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-logo svg {
    width: 48px;
    height: 48px;
    display: block;
}
.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: #e8edf8;
    text-align: center;
    margin: 0 0 8px;
}
.auth-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin: 0 0 28px;
}
/* AUTH-MODAL: Giriş butonları */
.auth-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #d1d5db;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}
.auth-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.auth-btn:active {
    transform: scale(0.98);
}
.auth-btn-google {
    background: rgba(0,201,167,0.08);
    border-color: rgba(0,201,167,0.18);
}
.auth-btn-google:hover {
    background: rgba(0,201,167,0.14);
    border-color: rgba(0,201,167,0.3);
}
/* AUTH-MODAL: Method icons (SVG) */
.sb-auth-method-icon.auth-icon-google,
.sb-auth-method-icon.auth-icon-gh,
.sb-auth-method-icon.auth-icon-mail,
.sb-auth-method-icon.auth-icon-phone {
    min-width: 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}
.sb-auth-method-icon.auth-icon-google svg,
.sb-auth-method-icon.auth-icon-gh svg,
.sb-auth-method-icon.auth-icon-mail svg,
.sb-auth-method-icon.auth-icon-phone svg {
    flex-shrink: 0;
}
.sb-auth-method-icon.auth-icon-gh { color: #9ca3b4; }
.sb-auth-method-icon.auth-icon-mail,
.sb-auth-method-icon.auth-icon-phone { color: #9ca3b4; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.2);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}
.auth-plans-link {
    text-align: center;
    font-size: 13px;
    color: rgba(52,201,138,0.7);
    text-decoration: underline;
    display: block;
    margin-top: 4px;
    transition: color 0.15s;
}
.auth-plans-link:hover {
    color: #34c98a;
}
/* AUTH-MODAL: Footer */
.auth-footer {
    margin-top: 24px;
}
.auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.2);
    text-align: center;
}
.auth-security svg {
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.2);
}
.auth-links {
    font-size: 11px;
    color: rgba(255,255,255,0.15);
    text-align: center;
    margin-top: 8px;
}
.auth-links a {
    color: inherit;
    text-decoration: none;
}
.auth-links a:hover {
    color: rgba(255,255,255,0.4);
}
/* AUTH-MODAL: Mobil */
@media (max-width: 640px) {
    .auth-modal {
        max-width: none;
        margin: 12px;
        padding: 28px 20px 24px;
        border-radius: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .auth-btn {
        padding: 12px 16px;
        font-size: 13.5px;
    }
}

/* Sidebar auth panel (inline, non-blocking) - legacy, artık modal kullanılıyor */
.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(0,201,167,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(0,201,167,0.3);
    box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,201,167,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(0,201,167,0.1);
    border: 1px solid rgba(0,201,167,0.2);
}
.sb-auth-brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c9a7;
    box-shadow: 0 0 10px rgba(0,201,167,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(0,201,167,.14);
    border-color: rgba(0,201,167,.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(0,201,167,.2);
    border-color: rgba(0,201,167,.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;
}

/* Telefon ile giriş - adım 1 & 2 */
.sb-auth-options { display: block; max-height: 320px; overflow-y: auto; }
.sb-auth-btn-email, .sb-auth-btn-phone {
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
}
.sb-auth-btn-email:hover, .sb-auth-btn-phone:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
}
.sb-auth-phone-view { margin-top: 4px; }
.sb-auth-email-signup-btn { background: transparent !important; border: none; color: var(--text-muted); font-size: 12px; margin-top: 6px; }
.sb-auth-email-signup-btn:hover { color: var(--accent); }
.sb-auth-phone-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.sb-auth-country-code {
    width: 72px;
    flex-shrink: 0;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text, #dbe5ff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.sb-auth-country-code:focus {
    outline: none;
    border-color: var(--accent, #00c9a7);
    box-shadow: 0 0 0 2px rgba(0,201,167,0.2);
}
.sb-auth-phone-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text, #dbe5ff);
    font-size: 14px;
    font-family: inherit;
}
.sb-auth-phone-input::placeholder { color: #6b7a9a; }
.sb-auth-phone-input:focus {
    outline: none;
    border-color: var(--accent, #00c9a7);
    box-shadow: 0 0 0 2px rgba(0,201,167,0.2);
}
.sb-auth-phone-error, .sb-auth-otp-error {
    font-size: 12px;
    color: #ef4444;
    margin-bottom: 8px;
    min-height: 16px;
}
.sb-auth-send-btn, .sb-auth-verify-btn {
    width: 100%;
    margin-bottom: 6px;
}
.sb-auth-send-btn:disabled:not(.loading),
.sb-auth-verify-btn:disabled:not(.loading) {
    opacity: 0.6;
    cursor: not-allowed;
}
.sb-auth-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sb-auth-spin 0.6s linear infinite;
}
@keyframes sb-auth-spin { to { transform: rotate(360deg); } }
.sb-auth-back-link {
    display: inline-block;
    font-size: 12px;
    color: #8f9ab4;
    text-decoration: none;
    margin-top: 6px;
}
.sb-auth-back-link:hover { color: var(--accent, #00c9a7); }
.sb-auth-otp-info {
    font-size: 12px;
    color: #8f9ab4;
    margin-bottom: 12px;
}
.sb-auth-otp-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 8px;
}
.sb-auth-otp-digit {
    width: 36px;
    height: 42px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text, #dbe5ff);
    font-family: inherit;
}
.sb-auth-otp-digit:focus {
    outline: none;
    border-color: var(--accent, #00c9a7);
    box-shadow: 0 0 0 2px rgba(0,201,167,0.2);
}
@media (max-width: 480px) {
    .sb-auth-otp-digit { width: 32px; height: 40px; font-size: 16px; }
}
.sb-auth-otp-timer {
    font-size: 12px;
    color: #7f8aa8;
    margin-bottom: 4px;
}
.sb-auth-resend-link {
    display: inline-block;
    font-size: 12px;
    color: var(--accent, #00c9a7);
    text-decoration: none;
    margin-bottom: 10px;
}
.sb-auth-resend-link:hover { color: #6ba3f8; }
.sb-auth-resend-link.sb-auth-resend-disabled {
    color: #6b7a9a;
    pointer-events: none;
    cursor: default;
}

.sb-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}
.sb-user-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.sb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    position: relative;
    flex-shrink: 0;
}
.sb-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    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: #ccd5e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-plan-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #445060;
    margin-top: 2px;
}
.sb-chevron {
    width: 14px;
    height: 14px;
    color: #333;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.sb-user-card.open .sb-chevron { transform: rotate(180deg); }

.sb-user-menu {
    display: none;
    margin-top: 8px;
    padding: 6px;
    background: #0d1219;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    animation: sbMenuUp .18s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes sbMenuUp {
    from { opacity: 0; transform: translateY(6px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.sb-user-menu.open { display: flex; flex-direction: column; gap: 2px; }

.sb-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #8b949e;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.sb-menu-item::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s;
    border-radius: inherit;
}
.sb-menu-item:hover::before { opacity: 1; }
.sb-mi-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    transition: all .2s;
}
.sb-mi-icon svg {
    width: 16px;
    height: 16px;
}
.sb-mi-plans { background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(180,120,0,0.06)); border-color: rgba(255,215,0,0.15); color: #ffd700; }
.sb-mi-settings { background: linear-gradient(135deg, rgba(0,201,167,0.12), rgba(0,120,80,0.06)); border-color: rgba(0,201,167,0.12); color: #00c9a7; }
.sb-mi-help { background: linear-gradient(135deg, rgba(61,158,255,0.12), rgba(20,80,180,0.06)); border-color: rgba(61,158,255,0.12); color: #3d9eff; }
.sb-mi-keys { background: linear-gradient(135deg, rgba(139,111,255,0.12), rgba(80,40,200,0.06)); border-color: rgba(139,111,255,0.12); color: #8b6fff; }
.sb-mi-logout { background: linear-gradient(135deg, rgba(255,68,68,0.1), rgba(180,0,0,0.05)); border-color: rgba(255,68,68,0.12); color: #ff4444; }
.sb-mi-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}
.sb-mi-title {
    font-size: 13px;
    font-weight: 600;
    color: #dce6f0;
    line-height: 1.2;
}
.sb-mi-desc {
    font-size: 10px;
    color: #4a5870;
    line-height: 1.3;
}
.sb-menu-item:hover {
    background: #111820;
    border-color: rgba(255,255,255,0.06);
    color: #dce6f0;
    transform: translateX(2px);
}
.sb-menu-item:hover::before {
    background: linear-gradient(135deg, rgba(0,201,167,.04), transparent);
}
.sb-menu-item:hover .sb-mi-icon { transform: scale(1.05); }
.sb-menu-item.danger .sb-mi-title { color: #ff4444; }
.sb-menu-item.danger:hover {
    background: rgba(255,68,68,0.06);
    border-color: rgba(255,68,68,0.12);
    transform: translateX(2px);
}
.sb-menu-item.danger:hover::before {
    background: linear-gradient(135deg, rgba(255,68,68,.04), transparent);
}
.sb-menu-item.danger:hover .sb-mi-title { color: #ff6b6b; }
.sb-menu-item.danger:hover .sb-mi-icon { border-color: rgba(255,68,68,0.25); }

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


/* ═══════════════════════════════════════════
   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; }
.ctx-item-rag { color: var(--gr); }
.ctx-item-rag:hover { background: var(--grb); }

/* RAG — Önceki konuşma bağlandı göstergesi */
.rag-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 8px var(--pad-x, 16px);
    background: var(--grb);
    border: 1px solid rgba(62,207,142,0.25);
    border-radius: var(--radius);
    color: var(--gr);
    font-size: 12px;
    flex-shrink: 0;
}
.rag-indicator-icon { display: flex; align-items: center; }
.rag-indicator-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.rag-indicator-text { flex: 1; }
.rag-indicator-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: var(--tr);
}
.rag-indicator-close:hover { opacity: 1; background: rgba(0,0,0,0.15); }


/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */
.main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    position: relative;
    background: var(--bg);
    transition: flex 0.25s ease, width 0.25s ease;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--topbar-pad);
    border-bottom: none;
    background: transparent;
    flex-shrink: 0;
    z-index: 20;
    min-height: 48px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-right { position: relative; gap: 6px; }

/* 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 .home-brand-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.topbar-home-link .home-logo-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topbar-home-link .home-logo-mark svg,
.topbar-home-link .home-logo-mark .numex-logo {
    width: 22px;
    height: 22px;
    display: block;
}
.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(--t);
}
.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; }
/* Hub — dış bağlantı, diğer ikon butonlarla aynı boyut/şekil, sadece marka rengiyle ayırt edilir */
.tb-btn.tb-btn-hub { color: #00C9A7; text-decoration: none; }
.tb-btn.tb-btn-hub:hover { background: rgba(0,201,167,0.12); color: #00ffb3; }
/* Footer FOUC placeholder — auth çözülene kadar nötr, tıklanmaz görünsün */
.sb-user-card-loading { cursor: default; opacity: 0.5; pointer-events: none; }
.sb-user-card-loading .sb-avatar { background: rgba(255,255,255,0.06); }

/* Sağ üst "Yükselt" — free/anonim kullanıcıya (GPT/Gemini tarzı) */
.tb-upgrade {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,201,167,0.45);
    background: linear-gradient(135deg, rgba(0,201,167,0.16), rgba(0,201,167,0.06));
    color: #00ffb3; cursor: pointer;
    font-family: var(--fh); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
    white-space: nowrap; transition: var(--tr);
}
.tb-upgrade svg { width: 15px; height: 15px; }
.tb-upgrade:hover { background: linear-gradient(135deg, rgba(0,201,167,0.28), rgba(0,201,167,0.12)); border-color: rgba(0,201,167,0.7); transform: translateY(-1px); }
/* Ücretli kullanıcıda gizle */
body.plan-paid .tb-upgrade { display: none; }
@media (max-width: 560px) { .tb-upgrade span { display: none; } .tb-upgrade { padding: 0 10px; } }

/* Geçici konuşma (sol ray düğmesi): SADECE aktifken yeşil; değilse standart (yukarıda) */
#tempChatBtn.sb-temp-chat.active {
    background: rgba(0,201,167,0.16) !important;
    border-color: rgba(0,201,167,0.5) !important;
    color: #00ffb3 !important;
}
#tempChatBtn.sb-temp-chat.active svg { opacity: 1; }
#tempChatBtn.sb-temp-chat.active:hover { background: rgba(0,201,167,0.24) !important; }
/* Aktifken üstte ince ipucu şeridi */
body.temp-chat-on .topbar { box-shadow: inset 0 2px 0 rgba(0,201,167,0.55); }
.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: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--ac);
    color: var(--bg, #0d1117);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: none;
    box-sizing: border-box;
}
.tb-badge:not(:empty) { display: inline-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: 135;
    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: 9px 10px;
    border-bottom: 1px solid var(--b);
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}
.qa-item:last-child { border-bottom: 0; }
.qa-item-flat {
    border: 1px solid var(--b);
    border-radius: 10px;
    border-bottom: 1px solid var(--b);
}
.qa-item-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.qa-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
    color: #a9b8d1;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.qa-item-body { min-width: 0; flex: 1; }
.qa-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.qa-item-title {
    font-size: 12px;
    color: var(--t);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.qa-item-kind {
    flex-shrink: 0;
    font-size: 10px;
    color: #8aa4c7;
    border: 1px solid rgba(138,164,199,0.25);
    background: rgba(138,164,199,0.08);
    border-radius: 999px;
    padding: 1px 7px;
}
.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: 2px;
    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: 10.5px;
    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(0,201,167,.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-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mo-mult { font-size: 10px; font-weight: 600; color: var(--ac); letter-spacing: 0.02em; white-space: nowrap; }
.mo-mult.is-base { color: var(--t3); font-weight: 500; }
.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; width: 100%; min-width: 0; }

/* SPA iframe view (codex) — fill available space */
.numex-view-iframe {
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.numex-view-iframe iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  display: block;
  position: absolute;
  inset: 0;
}

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

.chat-area {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; position: relative;
}
.chat-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.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);
    flex: 1;
    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: 80px; height: 80px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wl-logo {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    margin: 0;
}
.wl-logo svg,
.wl-logo .numex-logo {
    width: 64px; height: 64px;
    display: block;
    border-radius: 16px;
    transition: filter 0.3s ease;
}
/* Üç halka farklı fazlarda aynı anda pulse edince logo "titreyip aşağı çöküyormuş" gibi
   görünüyordu. Tek, sakin bir halkaya indirildi; diğer ikisi kaldırıldı. */
.wl-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(0,201,167,0.1);
}
.wl-ring.r1 { inset: -10px; }
.wl-ring.r2, .wl-ring.r3 { display: none; }

.wl-title {
    font-size: 32px; font-weight: 800;
    color: var(--t);
    margin-bottom: 12px;
    letter-spacing: -0.03em;
    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: 24px;
}

.wl-char-label {
    font-size: 12px; font-weight: 600; color: var(--t2);
    margin-bottom: 10px; letter-spacing: .02em;
}
.wl-char-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    max-width: 520px; margin-bottom: 28px; justify-content: center;
}
.wl-char-pill {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--b);
    background: var(--s1);
    color: var(--t2);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--e);
}
.wl-char-pill:hover {
    background: var(--s2);
    border-color: var(--ac);
    color: var(--t);
}
.wl-char-pill-general {
    opacity: .85;
}

/* 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(0,201,167,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; }

/* ── DÜŞÜNCE AKIŞI ─────────────────────────────────── */
.thought-stream {
    flex: 1; min-width: 0;
    /* kutu yok — açık, hafif görünüm */
}
.thought-stream-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 8px;
    cursor: pointer;
    user-select: none;
}
.thought-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,201,167,0.65);
    flex-shrink: 0;
    animation: tPulse 1.8s ease-in-out infinite;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
@keyframes tPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,201,167,0.35); opacity: 0.7; }
    50%      { box-shadow: 0 0 0 5px rgba(0,201,167,0); opacity: 1; }
}
/* Tamamlandı: dolan/dolu yuvarlak animasyonu */
.thought-pulse.complete {
    animation: tFill 0.45s ease forwards;
}
@keyframes tFill {
    0%   { background: rgba(0,201,167,0.5); transform: scale(1); box-shadow: none; }
    50%  { background: #00c9a7; transform: scale(1.6); box-shadow: 0 0 0 4px rgba(0,201,167,0.25); }
    100% { background: #00c9a7; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(0,201,167,0.12); }
}
.thought-stream-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,201,167,0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.thought-stream-step {
    font-size: 11px;
    color: #4a5568;
    margin-left: auto;
    font-style: italic;
    transition: color 0.3s;
}
.thought-stream-step.done {
    color: rgba(0,201,167,0.7);
    font-style: normal;
}
.thought-stream-chevron {
    font-size: 9px;
    color: #4a5568;
    transition: transform 0.2s;
}
.thought-stream.collapsed .thought-stream-chevron { transform: rotate(-90deg); }
.thought-stream-body {
    padding: 0 0 4px;
    min-height: 1.6em;
    max-height: 1.6em;
    overflow: hidden;
    scrollbar-width: none;
}
.thought-stream-body::-webkit-scrollbar { display: none; }
.thought-text {
    font-size: 13px;
    line-height: 1.6;
    color: #5a6478;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-family: var(--f);
}
.thought-cursor {
    display: inline-block;
    width: 1.5px; height: 13px;
    background: rgba(0,201,167,0.5);
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: tBlink 0.9s step-end infinite;
}
@keyframes tBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.thought-stream.collapsed .thought-stream-body { display: none; }
.thought-stream.collapsed .thought-pulse { animation: none; opacity: 0.4; }
.thought-stream .thought-pulse.complete { opacity: 1; } /* tamamlandığında collapsed olsa da dolu görünsün */
.thought-stream.fade-out { animation: flowOut 0.35s ease forwards; }
@keyframes flowOut {
    to { opacity: 0; transform: translateY(-6px); height: 0; margin: 0; overflow: hidden; }
}

/* ── ARTIFACT KART (Claude inline kod penceresi) ──── */
.nx-artifact {
    margin: 14px 0;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    overflow: hidden;
    background: #0d1018;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.nx-artifact-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
}
.nx-artifact-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.nx-artifact-icon.lang-html  { background: rgba(228,74,37,0.15); }
.nx-artifact-icon.lang-css   { background: rgba(56,189,248,0.12); }
.nx-artifact-icon.lang-js,
.nx-artifact-icon.lang-javascript { background: rgba(234,179,8,0.12); }
.nx-artifact-icon.lang-python { background: rgba(0,201,167,0.13); }
.nx-artifact-icon.lang-other  { background: rgba(255,255,255,0.06); }
.nx-artifact-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #c9d1e0;
    font-family: var(--fm);
}
.nx-artifact-lang {
    font-size: 11px;
    color: #4a5568;
    margin-left: 2px;
}
.nx-artifact-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 3px;
}
.nx-atab {
    font-size: 11px; font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--f);
}
.nx-atab.active { background: rgba(255,255,255,0.08); color: #c9d1e0; }
.nx-atab:hover:not(.active) { color: #8b949e; }
.nx-artifact-acts {
    display: flex; gap: 6px; margin-left: 8px;
}
.nx-aact {
    font-size: 11px; font-weight: 500;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.03);
    color: #606878;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--f);
}
.nx-aact:hover { background: rgba(255,255,255,0.07); color: #a8b1c7; border-color: rgba(255,255,255,0.15); }
.nx-aact.primary { border-color: rgba(0,201,167,0.25); color: rgba(0,201,167,0.75); background: rgba(0,201,167,0.05); }
.nx-aact.primary:hover { background: rgba(0,201,167,0.1); color: #00c9a7; }
.nx-artifact-body {
    position: relative;
    max-height: 260px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.nx-artifact-body.expanded { max-height: none; }
.nx-artifact-body pre {
    margin: 0; padding: 14px 16px;
    overflow-x: auto; font-size: 13px;
    line-height: 1.6; color: #abb2c0;
    font-family: var(--fm);
    white-space: pre; tab-size: 2;
}
.nx-artifact-body code { font-family: var(--fm); font-size: 13px; }
.nx-artifact-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, #0d1018);
    pointer-events: none;
}
.nx-artifact-body.expanded .nx-artifact-fade { display: none; }
.nx-artifact-preview {
    display: none;
    width: 100%; height: 240px;
    border: none; background: #fff;
}
.nx-artifact-preview.active { display: block; }
.nx-artifact-expand {
    display: flex; justify-content: center;
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.nx-artifact-expand button {
    font-size: 11.5px;
    color: #4a5568;
    background: none; border: none;
    cursor: pointer; padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: var(--f);
}
.nx-artifact-expand button:hover { background: rgba(255,255,255,0.05); color: #8b949e; }

/* 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;
}

/* Drag & Drop Upload State */
.chat-drop-active {
    position: relative;
}
.chat-drop-active::after {
    content: "Belgeyi buraya bırakın";
    position: absolute;
    inset: -6px;
    background: rgba(0,201,167, 0.08);
    border: 2px dashed var(--ac);
    border-radius: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac);
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.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: none;
    background: var(--bg);
    display: flex; flex-direction: column;
    transition: width 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
    opacity: 0;
    pointer-events: none;
}
#mainSplit.canvas-open .canvas-panel,
body.canvas-panel-open .canvas-panel {
    border-left: 1px solid rgba(255,255,255,0.06);
    opacity: 1;
    pointer-events: auto;
}
#mainSplit.canvas-open {
    flex-direction: row;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-right: 50vw;
    box-sizing: border-box;
}
/* Panel body'de olduğu için viewport'a göre sabitlenir (body.canvas-panel-open) */
body.canvas-panel-open #canvasPanel {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 48px !important;
    bottom: 0 !important;
    z-index: 100 !important;
    pointer-events: auto !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;
    box-sizing: border-box;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}
#mainSplit.canvas-open #canvasPanel {
    /* mainSplit içindeyken de aynı stil (panel body'ye taşındığı için bu seçici yedek) */
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 48px !important;
    bottom: 0 !important;
    z-index: 100 !important;
    pointer-events: auto !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;
    box-sizing: border-box;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}
#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 - 280px) / 2); /* SIDEBAR-FIX */
}
.sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open #canvasPanel {
    width: calc((100vw - 280px) / 2) !important; /* SIDEBAR-FIX */
    min-width: calc((100vw - 280px) / 2) !important;
    max-width: calc((100vw - 280px) / 2) !important;
}
body:has(.sidebar:not(.collapsed)).canvas-panel-open #canvasPanel {
    width: calc((100vw - 280px) / 2) !important;
    min-width: calc((100vw - 280px) / 2) !important;
    max-width: calc((100vw - 280px) / 2) !important;
}
.sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open ~ .input-area {
    width: calc((100vw - 280px) / 2); /* SIDEBAR-FIX */
    max-width: calc((100vw - 280px) / 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,
#mainSplit.canvas-fullscreen .chat-area,
body.canvas-fullscreen .chat-area { display: none !important; }
#mainSplit.canvas-fullscreen {
    padding-right: 0 !important;
}
/* #canvasPanel is relocated to <body> at runtime by moveCanvasPanelToBody(),
   so it is no longer a descendant of #mainSplit — the selectors above never
   matched it. body.canvas-fullscreen (kept in sync by syncBodyCanvasFullscreen)
   is the one that actually reaches it. */
body.canvas-fullscreen #canvasPanel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !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 var(--b);
    background: var(--bg2);
    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: inline-flex; align-items: center; justify-content: center;
    transition: all .2s ease;
    position: relative;
    flex-shrink: 0;
}
.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 var(--b);
    padding: 0 8px;
    background: var(--bg2);
    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; width: 100%; min-width: 0; }
.cv-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--t3); font-size: 13px; text-align: center;
    overflow-y: auto;
}
.cv-empty-inner {
    max-width: 560px;
    padding: 24px 20px;
}
.cv-empty-demo {
    margin-bottom: 28px;
}
.cv-empty-demo-label {
    font-size: 11px;
    color: var(--t3);
    margin-bottom: 8px;
    text-align: center;
}
.cv-empty-demo-live-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg2, #161b22);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.cv-empty-demo-live {
    display: block;
    width: 100%;
    height: 200px;
    border: none;
    background: #0d1117;
}
.cv-empty-demo-tagline {
    margin-top: 16px;
    text-align: center;
}
.cv-empty-demo-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent, #00c9a7);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.cv-empty-demo-sub {
    font-size: 13px;
    color: var(--t2, #8b949e);
    line-height: 1.5;
    margin: 0;
}
.cv-empty-cta {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.cv-empty-hint {
    font-size: 13px;
    line-height: 1.5;
    color: var(--t3);
    margin-bottom: 10px;
}
.cv-empty-kbd {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 14px;
}
.cv-empty-cta .kbd {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--s2);
    border: 1px solid var(--b);
}
.cv-empty-action {
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--b, rgba(255,255,255,0.15));
    background: var(--s1, rgba(255,255,255,0.06));
    color: var(--t2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cv-empty-action:hover {
    background: rgba(0,201,167,0.1);
    color: var(--accent);
    border-color: rgba(0,201,167,0.3);
}
.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 var(--b);
    background: var(--bg2);
}
.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 var(--b2);
    background: var(--bg3);
    color: var(--t2);
    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: var(--bg);
    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-line-nums span.cv-line-error {
    color: #ef4444;
    background: rgba(239,68,68,0.08);
    border-left: 3px solid #ef4444;
    padding-left: 6px;
    margin-left: -6px;
}
.cv-code-scroller .cv-line-error-decoration {
    position: absolute;
    left: 0;
    width: 4px;
    background: #ef4444;
    border-radius: 0 2px 2px 0;
}
.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: var(--bg); }
.cv-device-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--b);
    background: var(--bg2);
}
.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-device-sep {
    width: 1px; height: 18px;
    background: rgba(255,255,255,0.12);
    margin: 0 6px;
}
.cv-edit-mode-btn {
    margin-left: 4px;
}
.cv-edit-mode-btn.active {
    background: rgba(0,201,167,0.14);
    color: #00c9a7;
    border-color: rgba(0,201,167,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 var(--b);
    background: var(--bg2);
    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(45,212,191,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: var(--bg);
    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: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(0,201,167,0.12), rgba(61,158,255,0.1), rgba(0,201,167,0.06));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none; z-index: 0;
    filter: blur(3px);
}
.input-wrap:focus-within .input-glow { opacity: 1; }

.input-box {
    background: var(--bg-input);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.05); /* TASARIM PASI: sert çizgi yerine fısıltı + derinlik */
    border-radius: var(--radius-xl);
    position: relative; z-index: 1;
    overflow: visible;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 44px -24px rgba(0,0,0,0.7);
}
.input-box:focus-within {
    border-color: rgba(0,201,167,0.3);
    box-shadow: 0 0 0 3px rgba(0,201,167,0.1), 0 18px 44px -24px rgba(0,0,0,0.7);
}
/* 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); }
.ta-wrap { position: relative; }
.msg-char-count {
    position: absolute;
    right: var(--pad-input);
    bottom: 6px;
    font-size: 11px;
    color: var(--t3);
    opacity: 0.7;
    pointer-events: none;
}
.msg-input-hints {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px var(--pad-input) 0;
}
.msg-hint-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--b2);
    background: rgba(255,255,255,0.03);
    color: #c5cfdd;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    cursor: pointer;
    transition: var(--tr);
}
.msg-hint-chip span {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0,201,167,0.18);
    color: #8db7ff;
    font-weight: 700;
    font-size: 11px;
}
.msg-hint-chip:hover {
    border-color: var(--ac2);
    color: #eef4ff;
    background: rgba(0,201,167,0.12);
}
.msg-hint-chip:focus-visible {
    outline: 2px solid var(--ac2);
    outline-offset: 2px;
    border-color: var(--ac2);
    color: #eef4ff;
}

.mention-menu {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 10px);
    min-width: 300px;
    max-width: 430px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 56;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(13,17,23,0.985);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    scrollbar-width: thin;
}
.mention-menu.open { display: block; }
.mention-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mention-menu-head span {
    font-size: 11px;
    color: #c6d2df;
    font-weight: 600;
}
.mention-menu-head small {
    font-size: 10px;
    color: #8b949e;
}
.mention-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #e6edf3;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}
.mention-menu-item:hover,
.mention-menu-item.sel {
    background: rgba(0,201,167,0.15);
    color: #d8fff2;
    border-color: rgba(0,201,167,0.35);
}
.mention-menu-item:focus-visible {
    outline: 2px solid rgba(0,201,167,0.5);
    outline-offset: 1px;
}
.mention-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mention-item-title {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mention-item-desc {
    font-size: 11px;
    color: #8b949e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mention-item-arrow {
    font-size: 11px;
    color: rgba(230,237,243,0.58);
}

/* ── Prompt Atölyesi (slash menu) ── */
.slash-menu {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 10px);
    min-width: 340px;
    max-width: 460px;
    max-height: 400px;
    overflow: hidden;
    display: none;
    z-index: 9999;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: #0d1219;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 -16px 48px rgba(0,0,0,0.55), 0 0 30px rgba(139,111,255,0.05);
    scrollbar-width: thin;
    animation: slashMenuUp .2s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes slashMenuUp {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.slash-menu.open { display: flex; flex-direction: column; }
.slash-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    flex-shrink: 0;
}
.slash-menu-head-inner { display: flex; flex-direction: column; gap: 2px; }
.slash-menu-head-title {
    font-size: 13px;
    font-weight: 700;
    color: #dce6f0;
    letter-spacing: -0.2px;
}
.slash-menu-head-sub {
    font-size: 11px;
    color: #4a5870;
}
.slash-menu-head-count {
    font-size: 10px;
    font-weight: 600;
    color: #4a5870;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.slash-menu-list {
    overflow-y: auto;
    padding: 6px;
    max-height: 340px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.slash-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.055);
    background: #111820;
    cursor: pointer;
    color: #dce6f0;
    text-align: left;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.slash-menu-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,201,167,.04), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.slash-menu-item:hover::before,
.slash-menu-item.sel::before { opacity: 1; }
.slash-menu-item:hover,
.slash-menu-item.sel {
    border-color: rgba(0,201,167,0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.slash-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.slash-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(0,201,167,0.12), rgba(0,120,80,0.06));
    border: 1px solid rgba(0,201,167,0.12);
}
.slash-item-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    z-index: 1;
}
.slash-menu-item .slash-cmd {
    font-size: 12px;
    font-weight: 600;
    color: #00c9a7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slash-menu-item .slash-title {
    font-size: 11px;
    color: #8b949e;
}
.slash-item-hint {
    font-size: 10px;
    color: #4a5870;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slash-item-arrow {
    font-size: 13px;
    color: #2a3548;
    flex-shrink: 0;
    z-index: 1;
    transition: all .2s;
}
.slash-menu-item:hover .slash-item-arrow,
.slash-menu-item.sel .slash-item-arrow { color: #00c9a7; transform: translateX(2px); }

.msg-legal-note {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.1px;
    color: rgba(225, 194, 128, 0.54);
    text-shadow: 0 0 8px rgba(225, 194, 128, 0.08);
}

.msg-legal-note.critical {
    color: rgba(255, 196, 122, 0.88);
    font-weight: 600;
}

.route-handoff-cta {
    margin-top: 10px;
}

.route-cta {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(0,201,167, 0.34);
    background: rgba(0,201,167, 0.1);
    color: #dcfff4;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.route-cta:hover {
    border-color: rgba(0,201,167, 0.58);
    background: rgba(0,201,167, 0.18);
    transform: translateY(-1px);
}

.route-cta-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.route-cta-hint {
    font-size: 11px;
    color: rgba(220, 255, 244, 0.82);
    line-height: 1.2;
}

.route-cta--pulse {
    animation: routeCtaPulse 1.2s ease-in-out infinite;
}

@keyframes routeCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,167, 0.14); }
    50% { box-shadow: 0 0 0 4px rgba(0,201,167, 0.02); }
}

/* File Chips */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 2px; }
.fchips:empty { display: none; padding: 0; }
.fchip {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 12px; color: var(--t2);
    max-width: 240px;
    transition: border-color 0.15s;
}
.fchip:hover { border-color: rgba(255,255,255,0.16); }
.fchip-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.fchip-thumb { width: 28px; height: 28px; flex-shrink: 0; object-fit: cover; border-radius: 6px; }
.fchip-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #c9d1e0; }
.fchip-meta { font-size: 10.5px; color: #4a5568; }
.fchip-rm {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    color: #50596a; font-size: 10px;
    transition: all 0.14s;
    font-family: var(--f);
}
.fchip-rm:hover { background: rgba(255,68,68,0.2); color: #ff4444; }

/* ── Kullanıcı mesajında dosya kartı ── */
.msg-file-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 280px;
}
.msg-file-icon { font-size: 22px; flex-shrink: 0; }
.msg-file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-file-name { font-size: 13px; font-weight: 500; color: #c9d1e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.msg-file-meta { font-size: 11px; color: #4a5568; }

/* 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: 8px var(--pad-input) 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
    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;
    overflow: visible;
}
/* Agent her zaman görünsün, satır atlamasın */
.ia-left > #agentModeToggle {
    flex-shrink: 0;
    order: 0;
}
.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(0,201,167,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% + 10px);
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: #0d1219;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 -20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(139,111,255,0.06);
    display: none;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    z-index: 9999;
    animation: toolsMenuUp .25s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes toolsMenuUp {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
}
.menu-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu-title {
    font-size: 13px;
    font-weight: 700;
    color: #dce6f0;
    letter-spacing: -0.2px;
}
.menu-sub {
    font-size: 11px;
    color: #4a5870;
}
/* .menu-search kaldırıldı — Araçlar menüsündeki "Araç ara..." kutusu silindi (2026-08-30) */
.tools-dd-wrap.open .tools-menu { display: flex; }
.tools-menu.show { display: flex !important; }
.tools-dd-wrap.open:focus-within .tools-menu { display: flex; }
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px;
}
.tools-menu .tool-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #111820;
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: all .2s;
    white-space: normal;
}
.tools-menu .tool-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.1);
}
.tools-menu .tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s;
}
.tools-menu .tool-card:hover::before { opacity: 1; }
.tools-menu .tool-card.web:hover { border-color: rgba(61,158,255,.3); }
.tools-menu .tool-card.web::before { background: linear-gradient(135deg, rgba(61,158,255,.05), transparent); }
.tools-menu .tool-card.kod:hover { border-color: rgba(255,140,66,.3); }
.tools-menu .tool-card.kod::before { background: linear-gradient(135deg, rgba(255,140,66,.05), transparent); }
.tools-menu .tool-card.ses:hover { border-color: rgba(0,201,167,.3); }
.tools-menu .tool-card.ses::before { background: linear-gradient(135deg, rgba(0,201,167,.05), transparent); }
.tools-menu .tool-card.gorsel:hover { border-color: rgba(139,111,255,.3); }
.tools-menu .tool-card.gorsel::before { background: linear-gradient(135deg, rgba(139,111,255,.05), transparent); }
.tools-menu .tool-card.on {
    border-color: rgba(61,158,255,.42);
    background: #162334;
}
.tools-menu .tc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.tools-menu .tool-card.web .tc-icon { background: linear-gradient(135deg, rgba(61,158,255,0.18), rgba(20,80,180,0.1)); border-color: rgba(61,158,255,0.2); }
.tools-menu .tool-card.kod .tc-icon { background: linear-gradient(135deg, rgba(255,140,66,0.18), rgba(180,60,0,0.1)); border-color: rgba(255,140,66,0.2); }
.tools-menu .tool-card.ses .tc-icon { background: linear-gradient(135deg, rgba(0,201,167,0.18), rgba(0,120,80,0.1)); border-color: rgba(0,201,167,0.2); }
.tools-menu .tool-card.gorsel .tc-icon { background: linear-gradient(135deg, rgba(139,111,255,0.18), rgba(80,40,200,0.1)); border-color: rgba(139,111,255,0.2); }
.tools-menu .tool-card.dusunce .tc-icon { background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(180,120,0,0.08)); border-color: rgba(255,215,0,0.15); }
.tools-menu .tool-card.belge .tc-icon { background: linear-gradient(135deg, rgba(61,158,255,0.14), rgba(20,60,140,0.1)); border-color: rgba(61,158,255,0.15); }
.tools-menu .tc-content {
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.tools-menu .tc-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #dce6f0;
    margin-bottom: 3px;
}
.tools-menu .tc-desc {
    display: block;
    font-size: 11px;
    color: #4a5870;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tools-menu .tc-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .4px;
    flex-shrink: 0;
}
.tools-menu .badge-new  { background: rgba(0,201,167,.15); color: #00c9a7; border: 1px solid rgba(0,201,167,.2); }
.tools-menu .badge-pro  { background: rgba(139,111,255,.15); color: #8b6fff; border: 1px solid rgba(139,111,255,.2); }
.tools-menu .badge-beta { background: rgba(255,140,66,.15); color: #ff8c42; border: 1px solid rgba(255,140,66,.2); }
.tools-menu .badge-hot  { background: rgba(255,77,141,.15); color: #ff4d8d; border: 1px solid rgba(255,77,141,.2); }
.tools-menu .usage-dots {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-top: 4px;
}
.tools-menu .u-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2a3548;
}
.tools-menu .u-dot.on {
    background: #00c9a7;
    box-shadow: 0 0 4px rgba(0,201,167,.65);
}
.tools-menu .tc-arrow {
    color: #2a3548;
    font-size: 16px;
    flex-shrink: 0;
    z-index: 1;
    transition: all .2s;
}
.tools-menu .tool-card:hover .tc-arrow { color: #8a9bb0; transform: translateX(2px); }
.tools-menu .tool-check {
    color: #3d9eff;
    opacity: 0;
    flex-shrink: 0;
    z-index: 1;
}
.tools-menu .tool-card.on .tool-check { opacity: 1; }
.menu-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,0.055);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-btns {
    display: flex;
    gap: 5px;
}
.footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #4a5870;
}
.kbd {
    padding: 2px 6px;
    background: #161e2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 10px;
    color: #8a9bb0;
}
.footer-btn {
    padding: 6px 11px;
    background: #161e2a;
    border: 1px solid rgba(0,201,167,0.2);
    border-radius: 7px;
    color: #8a9bb0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all .18s;
}
.footer-btn:hover {
    border-color: rgba(255,255,255,0.1);
    color: #dce6f0;
    background: #1c2535;
}
.footer-btn.accent {
    background: rgba(0,201,167,.1);
    border-color: rgba(0,201,167,.2);
    color: #00c9a7;
}
.footer-btn.accent:hover { background: rgba(0,201,167,.15); }
.tools-manage-ov { z-index: 1200; }
.tools-manage-panel {
    width: min(520px, calc(100vw - 24px));
    background: #0d1219;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 20px 56px rgba(0,0,0,.55);
    padding: 14px;
}
.tmh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.tmh-title {
    font-size: 15px;
    font-weight: 700;
    color: #dce6f0;
}
.tmh-sub {
    font-size: 12px;
    color: #6f7f96;
    margin-top: 2px;
}
.tm-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #111820;
    color: #dce6f0;
    font-size: 13px;
}
.tm-item input[type="checkbox"] {
    accent-color: #00c9a7;
    width: 15px;
    height: 15px;
}
.tm-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#tcCanvas.tc.canvas.icon-only {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    display: inline-flex !important;
    flex-shrink: 0 !important;
    margin-left: 6px;
    transition: background 0.15s var(--e), border-color 0.15s var(--e), color 0.15s var(--e);
}
#tcCanvas.tc.canvas.icon-only:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
}
#tcCanvas.tc.canvas.icon-only.on {
    border: 1px solid rgba(62,207,142,0.58);
    background: rgba(62,207,142,0.12);
    color: #95ffd9;
    filter: drop-shadow(0 0 9px rgba(62,207,142,0.45));
}
#tcCanvas.tc.canvas.icon-only.on:hover {
    background: rgba(62,207,142,0.18);
    border-color: rgba(62,207,142,0.65);
    color: #b5ffe8;
}

.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 {
        width: min(520px, calc(100vw - 16px));
        left: -4px;
    }
    .menu-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .menu-grid { grid-template-columns: 1fr; }
    .tm-list { grid-template-columns: 1fr; }
}
.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);
}
/* Ana chat model dropdown: yukarı açılır, içerik görünür */
.ia-right .model-inline {
    position: relative;
}
.ia-right .model-inline .model-dd {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    min-width: 260px;
    z-index: 10002;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transform: translateY(8px);
}
.ia-right .model-inline .model-dd.open {
    transform: translateY(0);
}
.ia-right .model-inline .model-dd .mo-name { color: #e8e8e8 !important; }
.ia-right .model-inline .model-dd .mo-desc { color: #8b949e !important; }
.ia-right .model-inline .model-dd .mo:hover { background: rgba(255,255,255,0.08); }
.ia-right .model-inline .model-dd .mo.sel { background: rgba(0,201,167,0.15); }
.ia-right .model-inline .model-dd .mo-check { color: var(--ac); }
/* Dosya / Mikrofon Butonları */
.ia-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer; color: #485060;
    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(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #8b949e; }
/* Agent toggle: tc mimarisi (Kanvas ile aynı aile), her zaman görünür ve tıklanabilir */
#agentModeToggle.tc.agent-toggle.icon-only {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    margin-left: 2px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.15s var(--e), border-color 0.15s var(--e), color 0.15s var(--e);
}
#agentModeToggle.tc.agent-toggle.icon-only:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
}
#agentModeToggle.tc.agent-toggle.icon-only.on {
    border: 1px solid rgba(0,201,167,0.5);
    background: rgba(0,201,167,0.12);
    color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(0,201,167,0.35));
}
#agentModeToggle.tc.agent-toggle.icon-only.on:hover {
    background: rgba(0,201,167,0.18);
    border-color: rgba(0,201,167,0.6);
    color: #7affc7;
}
#agentModeToggle.tc.agent-toggle.icon-only svg {
    width: 18px;
    height: 18px;
}
.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;
}
.think-btn.on {
    background: rgba(139, 92, 246, 0.15); /* Purple tint for AI thinking */
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}
.think-btn.on .mic-icon {
    transform: scale(1.1);
}
@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); }
}
.ia-btn .mic-logo,
.ia-btn .mic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out;
    transform-origin: center center;
}
.ia-btn .mic-logo svg {
    fill: currentColor;
    stroke: none;
}
.ia-btn .mic-icon svg {
    stroke: currentColor;
    fill: none;
}
.voice-chat-open-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text2);
    transition: background 0.15s var(--e), border-color 0.15s var(--e), color 0.15s var(--e);
}
.voice-chat-open-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--text);
}
.voice-chat-open-btn.on {
    background: rgba(0,212,170,0.12);
    border-color: rgba(0,212,170,0.4);
    color: #3ecf8e;
}
.voice-chat-open-btn.on:hover {
    background: rgba(0,212,170,0.18);
    border-color: rgba(0,212,170,0.5);
    color: #57f0ba;
}
/* Voice Engine - Kullanıcının verdiği kod birebir (scoped) */
.voice-conv-overlay { position: fixed; inset: 0; z-index: 1300; display: none; flex-direction: column; background: #040608; font-family: 'Outfit', sans-serif; color: #f1f5f9; overflow: hidden; }
.voice-conv-overlay.open { display: flex; }
.voice-conv-overlay.open.preparing { opacity: 0; pointer-events: none; }
.voice-conv-overlay.open { transition: opacity 0.2s ease; }

.voice-conv-overlay #particleCanvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.voice-conv-overlay .mesh-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; transition: opacity 1s ease; }
.voice-conv-overlay .mesh-blob { position: absolute; border-radius: 50%; filter: blur(120px); transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.voice-conv-overlay .mesh-blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,201,167,0.12), transparent 70%); top: 30%; left: 40%; transform: translate(-50%, -50%); }
.voice-conv-overlay .mesh-blob-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(6,182,212,0.08), transparent 70%); top: 60%; left: 60%; transform: translate(-50%, -50%); }
.voice-conv-overlay .mesh-blob-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,201,167,0.06), transparent 70%); top: 25%; left: 70%; transform: translate(-50%, -50%); }
.voice-conv-overlay.listening .mesh-blob-1 { width: 900px; height: 900px; background: radial-gradient(circle, rgba(0,201,167,0.2), transparent 70%); }
.voice-conv-overlay.listening .mesh-blob-2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(6,182,212,0.14), transparent 70%); }
.voice-conv-overlay.speaking .mesh-blob-1, .voice-conv-overlay.processing .mesh-blob-1 { width: 1100px; height: 1100px; background: radial-gradient(circle, rgba(0,201,167,0.28), transparent 70%); animation: vc-blob-drift 4s ease-in-out infinite; }
.voice-conv-overlay.speaking .mesh-blob-2, .voice-conv-overlay.processing .mesh-blob-2 { width: 800px; height: 800px; background: radial-gradient(circle, rgba(6,182,212,0.2), transparent 70%); animation: vc-blob-drift 5s ease-in-out infinite reverse; }
@keyframes vc-blob-drift { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-48%, -52%) scale(1.08); } }

.voice-conv-overlay .app-layout { position: relative; z-index: 10; flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.voice-conv-overlay .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: rgba(4, 6, 8, 0.7); backdrop-filter: blur(40px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,0.06); }
.voice-conv-overlay .topbar-left { display: flex; align-items: center; gap: 14px; }
.voice-conv-overlay .topbar-left .live-badge { margin-left: 4px; }
.voice-conv-overlay .logo { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.voice-conv-overlay .logo svg,
.voice-conv-overlay .logo .voice-overlay-logo { width: 38px; height: 38px; display: block; object-fit: contain; }
.voice-conv-overlay .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.03em; background: linear-gradient(135deg, #f1f5f9, #2dd4bf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.voice-conv-overlay .brand-sub { font-size: 10.5px; color: #64748b; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.voice-conv-overlay .topbar-center { display: flex; align-items: center; gap: 8px; }
.voice-conv-overlay .model-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(20, 30, 45, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; font-size: 11.5px; color: #64748b; font-weight: 500; }
.voice-conv-overlay .model-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #00c9a7; box-shadow: 0 0 8px rgba(0,201,167,0.4); animation: vc-pulse-glow 2s ease-in-out infinite; }
.voice-conv-overlay .live-badge { padding: 4px 10px; background: rgba(0,201,167,0.1); border: 1px solid rgba(0,201,167,0.2); border-radius: 100px; font-size: 10px; font-weight: 600; color: #2dd4bf; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.5s; }
.voice-conv-overlay.listening .live-badge, .voice-conv-overlay.speaking .live-badge, .voice-conv-overlay.processing .live-badge { opacity: 1; }
.voice-conv-overlay .topbar-right { display: flex; align-items: center; gap: 8px; }
.voice-conv-overlay .icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; }
.voice-conv-overlay .icon-btn:hover { background: rgba(20, 30, 45, 0.4); border-color: rgba(255,255,255,0.12); color: #f1f5f9; }
.voice-conv-overlay .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.voice-conv-overlay .main-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; }
.voice-conv-overlay .character-chip { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; background: rgba(12, 18, 28, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; margin-bottom: 10px; }
.voice-conv-overlay .character-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #047857, #00c9a7); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.voice-conv-overlay .character-name { font-size: 12px; font-weight: 500; color: #64748b; }
.voice-conv-overlay .character-name strong { color: #f1f5f9; font-weight: 600; }
.voice-conv-overlay.idle .character-chip { display: none; }

.voice-conv-overlay .orb-wrapper { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.voice-conv-overlay #orbCanvas { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); z-index: 0; }
.voice-conv-overlay .orb-sphere { position: relative; width: 160px; height: 160px; border-radius: 50%; z-index: 2; cursor: pointer; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.voice-conv-overlay .orb-sphere:hover { transform: scale(1.04); }
.voice-conv-overlay .orb-sphere:active { transform: scale(0.97); }
.voice-conv-overlay .orb-inner { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(45,212,191,0.15), transparent 50%), radial-gradient(circle at 70% 70%, rgba(6,182,212,0.1), transparent 50%), radial-gradient(circle at 50% 50%, #0f1a14, #070d0a); box-shadow: 0 0 60px rgba(0,201,167,0.08), inset 0 0 60px rgba(0,201,167,0.03), inset 0 -20px 40px rgba(0,0,0,0.4); overflow: hidden; transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.voice-conv-overlay .orb-inner::before { content: ''; position: absolute; top: 8%; left: 20%; width: 50%; height: 35%; background: radial-gradient(ellipse, rgba(255,255,255,0.08), transparent 70%); border-radius: 50%; transform: rotate(-15deg); }
.voice-conv-overlay.listening .orb-inner { background: radial-gradient(circle at 30% 25%, rgba(45,212,191,0.25), transparent 50%), radial-gradient(circle at 70% 70%, rgba(6,182,212,0.18), transparent 50%), radial-gradient(circle at 50% 50%, #142a20, #0a1510); box-shadow: 0 0 100px rgba(0,201,167,0.15); }
.voice-conv-overlay.speaking .orb-inner, .voice-conv-overlay.processing .orb-inner { background: radial-gradient(circle at 30% 25%, rgba(45,212,191,0.35), transparent 50%), radial-gradient(circle at 70% 70%, rgba(6,182,212,0.25), transparent 50%), radial-gradient(circle at 50% 50%, #1a3a28, #0d2018); box-shadow: 0 0 120px rgba(0,201,167,0.25); animation: vc-orb-breathe 2s ease-in-out infinite; }
@keyframes vc-orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.voice-conv-overlay .orb-symbol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; transition: transform 0.15s ease-out; transform-origin: center center; }
.voice-conv-overlay .orb-symbol svg { width: 38px; height: 38px; stroke: #00c9a7; fill: none; stroke-width: 1.4; opacity: 0.5; filter: drop-shadow(0 0 12px rgba(0,201,167,0.2)); }
.voice-conv-overlay .orb-symbol-logo svg { fill: #00c9a7; stroke: none; opacity: 0.7; }
.voice-conv-overlay.listening .orb-symbol svg { opacity: 0.85; stroke: #2dd4bf; filter: drop-shadow(0 0 20px rgba(0,201,167,0.4)); }
.voice-conv-overlay.listening .orb-symbol-logo svg { fill: #2dd4bf; opacity: 0.9; filter: drop-shadow(0 0 20px rgba(0,201,167,0.4)); }
.voice-conv-overlay.speaking .orb-symbol svg, .voice-conv-overlay.processing .orb-symbol svg { opacity: 1; stroke: #6ee7b7; filter: drop-shadow(0 0 30px rgba(0,201,167,0.5)); }
.voice-conv-overlay.speaking .orb-symbol-logo svg, .voice-conv-overlay.processing .orb-symbol-logo svg { fill: #6ee7b7; opacity: 1; filter: drop-shadow(0 0 30px rgba(0,201,167,0.5)); }
@keyframes vc-pulse-glow { 0%, 100% { box-shadow: 0 0 8px rgba(0,201,167,0.4); } 50% { box-shadow: 0 0 16px rgba(0,201,167,0.4); } }

.voice-conv-overlay .volume-meter-wrap { display: flex; justify-content: center; align-items: center; min-height: 32px; margin: 8px 0 4px; z-index: 5; }
.voice-conv-overlay .volume-meter { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 28px; opacity: 0; transition: opacity 0.4s; }
.voice-conv-overlay.listening .volume-meter, .voice-conv-overlay.speaking .volume-meter, .voice-conv-overlay.processing .volume-meter { opacity: 1; }
.voice-conv-overlay .vol-bar { width: 4px; min-height: 4px; background: #00c9a7; border-radius: 2px; transition: height 0.08s ease; }

.voice-conv-overlay .info-section { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.voice-conv-overlay .state-label { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #f1f5f9; }
.voice-conv-overlay .state-sublabel { font-size: 13px; color: #64748b; font-weight: 300; }
.voice-conv-overlay .session-timer { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #334155; letter-spacing: 0.08em; margin-top: 4px; opacity: 0; transition: opacity 0.4s; }
.voice-conv-overlay .session-timer.visible { opacity: 1; color: #00c9a7; }

.voice-conv-overlay .transcript-panel { width: 100%; max-width: 480px; min-height: 44px; max-height: 200px; padding: 12px 20px; background: rgba(12, 18, 28, 0.6); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; text-align: left; font-size: 14px; color: #64748b; line-height: 1.6; transition: all 0.5s; opacity: 0; transform: translateY(6px); margin-top: 6px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.voice-conv-overlay .transcript-panel.visible { opacity: 1; transform: translateY(0); }
.voice-conv-overlay .transcript-panel #transcriptText { display: block; word-wrap: break-word; white-space: pre-wrap; }
.voice-conv-overlay .transcript-panel .user-text { color: #f1f5f9; font-weight: 400; }
.voice-conv-overlay .transcript-panel .ai-text { color: #2dd4bf; font-weight: 400; }
.voice-conv-overlay .transcript-panel .label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #334155; margin-bottom: 4px; display: block; }

.voice-conv-overlay .controls-bar { padding: 16px 24px 48px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.voice-conv-overlay .ctrl-btn { width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); background: rgba(12, 18, 28, 0.6); backdrop-filter: blur(20px); color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.voice-conv-overlay .ctrl-btn:hover { border-color: rgba(255,255,255,0.12); background: #111822; color: #f1f5f9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.voice-conv-overlay .ctrl-btn.muted { border-color: rgba(239,68,68,0.3); color: #f87171; }
.voice-conv-overlay .ctrl-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.voice-conv-overlay .primary-action { height: 56px; padding: 0 36px; border-radius: 16px; border: none; background: linear-gradient(135deg, #00c9a7, #047857); color: #fff; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 40px rgba(0,201,167,0.15), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
.voice-conv-overlay .primary-action:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 60px rgba(0,201,167,0.25); }
.voice-conv-overlay .primary-action.stop-mode { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 0 40px rgba(239,68,68,0.15); }
.voice-conv-overlay .primary-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.voice-conv-overlay .footer-sep { margin: 0 6px; color: #334155; }
.voice-conv-overlay .footer-info .kbd { padding: 2px 6px; background: #111822; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; margin-left: 4px; }
.voice-conv-overlay .kbd { padding: 2px 8px; background: #111822; border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; }
.voice-conv-overlay .voice-model-badge { position: absolute; bottom: 10px; right: 20px; display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(20, 30, 45, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; font-size: 11px; color: #64748b; font-weight: 500; z-index: 50; }
.voice-conv-overlay .voice-model-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: #00c9a7; box-shadow: 0 0 6px rgba(0,201,167,0.4); }
.voice-conv-overlay .footer-info { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #334155; letter-spacing: 0.04em; display: flex; align-items: center; gap: 5px; z-index: 50; }
.voice-conv-overlay .footer-info svg { width: 10px; height: 10px; stroke: #334155; fill: none; stroke-width: 1.5; }

@media (max-width: 480px) {
  .voice-conv-overlay .orb-wrapper { width: 220px; height: 220px; }
  .voice-conv-overlay .orb-sphere { width: 130px; height: 130px; }
  .voice-conv-overlay #orbCanvas { inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); }
  .voice-conv-overlay .state-label { font-size: 18px; }
  .voice-conv-overlay .primary-action { height: 50px; padding: 0 28px; font-size: 13px; }
  .voice-conv-overlay .ctrl-btn { width: 46px; height: 46px; }
}

/* 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;
    color: #485060;
}
.send-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.send-btn:hover { background: rgba(0,201,167,0.08); border-color: rgba(0,201,167,0.2); color: #00c9a7; transform: translateY(-1px); }
.send-btn:active { transform: scale(0.96); }
.send-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
/* Yazı varsa gönder butonu aktif renk alır */
.send-btn.on {
    background: rgba(0,201,167,0.1);
    border-color: rgba(0,201,167,0.25);
    color: #00c9a7;
    box-shadow: 0 2px 12px rgba(0,201,167,0.12);
}
.send-btn.on:hover {
    background: rgba(0,201,167,0.16);
    box-shadow: 0 2px 18px rgba(0,201,167,0.2);
}
.send-btn.stop-mode {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 18px rgba(239,68,68,0.25);
}
.send-btn.stop-mode:hover { box-shadow: 0 4px 24px rgba(239,68,68,0.35); transform: translateY(-1px); }

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

/* ═══════════════════════════════════════════
   CHAT AREA OVERRIDE (User-provided design)
   ═══════════════════════════════════════════ */
.chat-area .chat-inner {
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 24px 88px; /* SPACING-FIX: alt 88px — son mesaj yarım kalmasın, tam görünsün */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-area .chat-inner:has(> .msg) { justify-content: flex-end; } /* SPACING-FIX: mesaj varken içerik aşağıya yaslanır */

.main-split.canvas-open .chat-area .chat-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 24px 24px 88px;
}
.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 + .msg { margin-top: 18px; } /* SPACING-FIX: farklı konuşmacılar arası 16-20px */
.chat-area .msg.user + .msg.user { margin-top: 10px; } /* SPACING-FIX: ardışık kullanıcı mesajları 8-12px */
.chat-area .msg.ai + .msg.ai { margin-top: 10px; } /* SPACING-FIX: ardışık AI mesajları 8-12px */
.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: 10px 0; /* SPACING-FIX: mesajlar arası 16-20px (10+10) — önce 16px vardı */
}
.chat-area .msg-avatar {
    width: 32px; /* MSG-FIX: AI ve kullanıcı ikisi de 32x32 */
    height: 32px;
    border-radius: 10px; /* MSG-FIX */
    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, #00c9a7 0%, #047857 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; } /* MSG-FIX */
.chat-area .msg-sender {
    font-size: 12px; /* MSG-FIX */
    font-weight: 600;
    color: #e8eaf0;
    margin-bottom: 0;
}
.chat-area .msg-badge {
    font-size: 9px; /* MSG-FIX: daha küçük ve yuvarlak */
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.10);
    padding: 2px 6px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}
.chat-area .msg-time {
    font-size: 12px;
    color: #5c6070;
    opacity: 0;
    transition: opacity 150ms;
}
.chat-area .msg:hover .msg-time { opacity: 0.85; }

.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: linear-gradient(135deg, rgba(77,142,246,0.15), rgba(77,142,246,0.08)); /* MSG-FIX: daha belirgin gradyan */
    border: 1px solid rgba(77,142,246,0.2); /* MSG-FIX */
    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: 12px 16px; /* MSG-FIX: kapsayıcı kutu hissi */
    background: rgba(17,20,32,0.5); /* MSG-FIX: hafif arka plan */
    border: 1px solid rgba(255,255,255,0.05); /* MSG-FIX */
    border-left: 3px solid rgba(77,142,246,0.4); /* MSG-FIX: sol kenar accent */
    border-radius: 4px 16px 16px 16px; /* MSG-FIX */
}
.chat-area .msg.ai .msg-bubble p { margin-bottom: 10px; } /* MSG-FIX: paragraflar arası 10px */
.chat-area .msg.ai .msg-bubble p:last-child { margin-bottom: 0; }

/* MSG-IMG: Premium Karanlık Tema Media Card */
/* ── Audio mesaj kartı ── */
.msg-audio-card {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background: #0e1118;
    overflow: hidden;
    max-width: 340px;
}
.msg-audio-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.msg-audio-icon { font-size: 22px; flex-shrink: 0; }
.msg-audio-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.msg-audio-title { font-size: 13px; font-weight: 600; color: #c9d1e0; }
.msg-audio-sub { font-size: 11px; color: #4a5568; }
.msg-audio-dl {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,201,167,0.1);
    border: 1px solid rgba(0,201,167,0.2);
    color: rgba(0,201,167,0.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; text-decoration: none;
    transition: all 0.15s; flex-shrink: 0;
}
.msg-audio-dl:hover { background: rgba(0,201,167,0.18); color: #00c9a7; }
.msg-audio-player {
    display: block; width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    height: 44px;
}

.chat-area .msg-img-card {
  position: relative;
  display: inline-block;
  max-width: 90%;
  max-height: 400px;
  min-height: 180px;
  overflow: hidden;
  border-radius: 16px;
  background: #0B0F1A;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 25px 50px -12px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chat-area .msg-img-group:hover.msg-img-card {
  transform: scale(1.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 30px 60px -15px rgba(0,0,0,0.6);
}
@media (min-width: 768px) {
  .chat-area .msg-img-card { max-width: 672px; }
}
.chat-area .msg-img-card .msg-img-main {
  width: 100%;
  max-height: 400px;
  height: auto;
  object-fit: cover;
  display: block;
  vertical-align: bottom;
  opacity: 0.95;
  transition: opacity 0.3s ease;
}
.chat-area .msg-img-group:hover .msg-img-main {
  opacity: 1;
}
/* Skeleton: resmin boyutunda parlayan pulse placeholder */
.chat-area .msg-img-skeleton {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, rgba(55,65,81,0.3) 0%, rgba(75,85,99,0.5) 50%, rgba(55,65,81,0.3) 100%);
  background-size: 200% 100%;
  animation: msg-img-shimmer 2s ease-in-out infinite;
  border-radius: 16px;
  pointer-events: none;
}
.chat-area .msg-img-skeleton.loaded {
  display: none;
}
.chat-area .msg-img-load-failed {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0,0,0,0.6);
  border-radius: 16px;
  color: var(--t2);
  font-size: 14px;
}
.chat-area .msg-img-load-failed button {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--b2);
  background: var(--bg4);
  color: var(--t);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-area .msg-img-load-failed button:hover {
  background: var(--bg3);
}
@keyframes msg-img-shimmer {
  0%, 100% { opacity: 0.6; background-position: 200% 0; }
  50% { opacity: 1; background-position: -200% 0; }
}
/* Gradient overlay: ikon paneli arkasında resmi karartır */
.chat-area .msg-img-ctrl-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 80px;
  background: linear-gradient(135deg, transparent 30%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.3s ease;
}
.chat-area .msg-img-group:hover .msg-img-ctrl-overlay {
  opacity: 1;
}
/* Overlay: resmin SAĞ ÜST İÇ köşesinde, sadece hover'da görünür */
.chat-area .msg-img-group .msg-img-ctrls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}
.chat-area .msg-img-group:hover .msg-img-ctrls {
  opacity: 1;
}
.chat-area .msg-img-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #d6dbea;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.chat-area .msg-img-btn:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.08);
}
.chat-area .msg-img-btn:active {
  transform: scale(0.95);
}
.chat-area .msg-img-more-wrap { position: relative; }
.chat-area .msg-img-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #0f1422;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: none;
  z-index: 100;
}
.chat-area .msg-img-more-wrap.open .msg-img-more-menu { display: block; }
.chat-area .msg-img-more-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #d6dbea;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 150ms;
}
.chat-area .msg-img-more-menu button:hover {
  background: rgba(255,255,255,0.08);
}
/* Lightbox: tıklayınca tam ekran, arka plan blur */
.msg-img-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
}
.msg-img-fs-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.msg-img-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-img-fs-close:hover { background: rgba(255,255,255,0.25); }

/* Footer: Numex AI Vision · çözünürlük | saat */
.chat-area .msg-img-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  font-size: 10px;
  color: rgba(156,163,175,0.95);
  font-weight: 500;
}
.chat-area .msg-img-meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chat-area .msg-img-time {
  opacity: 0.85;
}

.chat-area .msg-actions {
    margin-top: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    opacity: 0.15;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, color 150ms ease, background 150ms ease;
}
/* Streaming sırasında boş placeholder — görünmez */
.chat-area .msg-actions.msg-actions-pending {
    display: none;
}
/* İlk token gelmeden balonu gizle — düşünce akışı öne çıksın */
.msg.stream-pending {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    margin: 0;
}
.chat-area .msg.ai:first-of-type .msg-actions { opacity: 1; } /* ACTION-FIX: ilk AI mesajında butonlar her zaman görünsün */
.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;
    border-left: 1px solid rgba(255,255,255,0.08); /* ACTION-FIX: ikon grubu ile Kanvasta Göster arası ayırıcı */
    padding-left: 10px;
    margin-left: 4px;
}
.chat-area .msg:hover .msg-actions {
    opacity: 1; /* ACTION-FIX: hover'da tam görünür */
}
.chat-area .msg-error-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-area .msg-retry-btn {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0,201,167,0.35);
    background: rgba(0,201,167,0.08);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.chat-area .msg-retry-btn:hover {
    background: rgba(0,201,167,0.15);
    border-color: rgba(0,201,167,0.5);
}
.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.menu-open .msg-action-btn.action-more { background: var(--bg3); color: var(--t); } /* ACTION-FIX: üç nokta menü açıkken buton aktif görünsün */
.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(255,181,181,0.4); /* ACTION-FIX: border daha belirgin */
    background: rgba(239,68,68,0.12);
    opacity: 0.4; /* ACTION-FIX: Kanvasta Göster — hover olmadan hafif görünsün */
}
.chat-area .msg-action-text.canvas-hot:hover { opacity: 1; } /* ACTION-FIX */
.chat-area .msg-actions-right { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 10px; margin-left: 2px; } /* ACTION-FIX: kopyala-sesli grubu ile beğen-beğenme grubu arası dikey ayırıcı */
.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;
    bottom: calc(100% + 8px);
    top: 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 60ms 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; }
/* Body'de açılan menü (portal) – .chat-area dışında aynı stil */
body > .msg-more-menu {
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.16);
    background: #0f1422; padding: 8px; min-width: 230px;
}
body > .msg-more-menu .msg-more-head { font-size: 11px; color: #8b93a7; padding: 2px 8px 8px; }
body > .msg-more-menu .msg-more-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    text-align: left; background: transparent; color: #c9cfdd; border: none; border-radius: 9px;
    padding: 8px 9px; font-size: 12px; cursor: pointer;
}
body > .msg-more-menu .msg-more-item .mi-left { display: inline-flex; align-items: center; gap: 8px; }
body > .msg-more-menu .msg-more-item .mi-hint { font-size: 11px; color: #7d8599; }
body > .msg-more-menu .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;
}
body > .msg-more-menu .msg-more-item:hover { background: rgba(255,255,255,0.06); }
body > .msg-more-menu .msg-more-item.danger { color: #fca5a5; }
body > .msg-more-menu .msg-more-sep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,0.08); }
@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) — welcome alanına uyumlu, büyütülmüş */
.today-history-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto 20px;
    padding: 14px 16px 12px;
    border-radius: 12px;
    background: var(--bg1, #161b22);
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.today-history-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.today-history-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #dbeafe;
}
.today-history-brief-head { margin-bottom: 4px; }
.today-history-brief-open {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-history-dismiss {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    font-size: 14px;
}
.today-history-dismiss:hover { background: var(--s2); color: var(--t2); }
.today-history-date {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 0;
}
.today-history-mini-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.today-history-mini-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.45;
}
.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: 12.5px;
    min-width: 44px;
}
.today-history-holiday {
    font-size: 13px;
    color: #86efac;
    margin-bottom: 8px;
}
.today-history-empty {
    font-size: 13px;
    color: var(--t3);
}
.today-history-card-actions {
    margin-top: 8px;
    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: 12px;
    padding: 5px 10px;
    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: 11000;
    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 — Numex 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, #00c9a7, #047857);
    box-shadow: 0 0 12px rgba(0,201,167,0.15);
}
.msg-avatar.ai-avatar svg,
.msg-avatar.ai-avatar .numex-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.msg-avatar.user-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: rgba(255,255,255,0.95); }
.msg-avatar.user-avatar .user-avatar-default-icon { width: 18px; height: 18px; opacity: 0.95; flex-shrink: 0; }

.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); }
.chat-area .msg.ai .msg-bubble ul li { cursor: pointer; border-radius: 6px; padding: 4px 8px; margin-left: -8px; transition: background 0.15s ease; }
.chat-area .msg.ai .msg-bubble ul li:hover { background: rgba(0,201,167, 0.08); color: rgba(232,234,240,0.95); }

.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ı — SPACING-FIX: üst 12px, alt 8px */
.date-sep,
.chat-area .date-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 8px 0; /* SPACING-FIX */
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    color: #555;
    letter-spacing: 0.04em;
}
.date-sep::before,
.date-sep::after,
.chat-area .date-separator::before,
.chat-area .date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.05);
}

/* STREAMING CURSOR */
.msg-bubble.streaming::after { display: none; } /* stream-cursor span ile yapılıyor */
.msg-bubble.done::after { display: none; }

/* Claude-benzeri inline streaming cursor */
.stream-cursor {
    display: inline-block;
    width: 2px; height: 1.1em;
    background: rgba(0,201,167,0.75);
    vertical-align: text-bottom;
    margin-left: 1px;
    border-radius: 1px;
    animation: sCursorBlink 0.85s step-end infinite;
}
@keyframes sCursorBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Bubble streaming → done geçiş yumuşatma */
.msg-bubble.done {
    animation: bubbleDone 0.15s ease-out both;
}
@keyframes bubbleDone {
    from { opacity: 0.85; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════════════
   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; }
}

/* 1024px – Tablet: sidebar drawer, ana alan tam genişlik */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        height: 100vh;
        height: 100dvh;
        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);
        /* GÜVENLİK: .collapsed'ten kalan opacity/pointer-events sızıntısına karşı
           acık durumda görünürlük ve tıklanabilirlik zorunlu kılınır. */
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .sidebar.collapsed {
        transform: translateX(-100%);
    }
    /* NOT: karartma katmanı SADECE .mob-ov (#mobOv) ile yönetilir — buradaki ikinci
       ::before katmanı kaldırıldı. İki katman aynı anda z-index:99'da çakışınca hem
       "buğulu" görünüyordu hem de üstteki ::before'ın onclick'i olmadığı için dışarı
       tıklayınca sidebar kapanmıyordu. */
    .main {
        width: 100%;
        min-width: 0;
    }
    .app-layout,
    .main-split,
    .chat-area {
        min-width: 0;
        overflow-x: hidden;
    }
    /* Canvas açıkken tablette input tam genişlik */
    #mainSplit.canvas-open ~ .input-area,
    .sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open ~ .input-area {
        width: 100% !important;
        max-width: none !important;
    }
    .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, 220px); }
    .topbar-home-link .home-title,
    .topbar-home-link .home-sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .numex-view-active,
    #view-main {
        min-width: 0;
        overflow-x: hidden;
    }
}

/* 900px – Tablet yatay / küçük laptop */
@media (max-width: 900px) {
    .sug-grid { grid-template-columns: 1fr; }
    #mainSplit.canvas-open {
        padding-right: 0 !important;
    }
    .main-split.canvas-open .canvas-panel,
    #mainSplit.canvas-open #canvasPanel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        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; }
    #mainSplit.canvas-open ~ .input-area,
    .sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open ~ .input-area {
        width: 100% !important;
        max-width: none !important;
    }
}

/* 768px – Tablet dikey / mobil */
@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; }

    .topbar-more-dd {
        max-width: calc(100vw - 24px);
        right: 0;
        left: auto;
    }
    .numex-view-active,
    #view-main {
        min-width: 0;
        overflow-x: hidden;
    }

    .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);
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .sidebar.collapsed { transform: translateX(-100%); }
    /* SIDEBAR-FIX: karartma katmanı SADECE .mob-ov (#mobOv, JS ile .show eklenir) ile
       yönetilir. Önceden burada ikinci bir ::before overlay da vardı; ikisi üst üste
       binince görünüm "buğulu/bulanık" oluyor ve tıklamalar #mobOv'a ulaşmayıp sidebar
       kapanmıyordu. Tek katmana indirildi. */

    .app-layout, .main, .main-split, .chat-area { min-width: 0; overflow-x: hidden; }
    .main { width: 100%; }
    .chat-scroll { overflow-x: hidden; }
    #mainSplit.canvas-open ~ .input-area,
    .sidebar:not(.collapsed) ~ .main #mainSplit.canvas-open ~ .input-area {
        width: 100% !important;
        max-width: none !important;
    }
    .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: 64px; height: 64px; margin-bottom: 16px; }
    .wl-logo { width: 52px; height: 52px; }
    .wl-logo svg,
    .wl-logo .numex-logo { width: 52px; height: 52px; }
    .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: 16px; max-width: 100%; }
    .wl-char-label { font-size: 11px; margin-bottom: 8px; }
    .wl-char-row { gap: 6px; margin-bottom: 20px; }
    .wl-char-pill { padding: 6px 12px; font-size: 11px; }
    .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); }
    #agentModeToggle.tc.agent-toggle.icon-only { width: 42px; height: 42px; min-width: 42px; min-height: 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; } /* Mobil tarayıcı 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
   Agent (#agentModeToggle) GİZLENMEZ – her zaman görünür kalır.
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    #tcCanvas,
    #tcCode,
    #tcImg,
    .mo-code,
    .btn-codex { display: none !important; }
    #agentModeToggle { display: inline-flex !important; visibility: visible !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: #00c9a7;
  --accent-bg: rgba(0,201,167,0.1);
  --accent-glow: rgba(0,201,167,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);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.settings-ov {
  position: fixed;
  inset: 0;
  background: rgba(7,8,13,0.75);
  backdrop-filter: blur(8px) saturate(1.2);
  z-index: 1000;
  padding: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s var(--ease, cubic-bezier(.4,0,.2,1));
}
.settings-ov.open { display: flex; opacity: 1; pointer-events: all; }
#settingsOv.settings-ov { display: none; align-items: center; justify-content: center; }
#promptLibOv.settings-ov {
  z-index: 10100;
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#promptLibOv.settings-ov.open {
  display: flex !important;
  opacity: 1;
  pointer-events: all;
  animation: promptLibFadeIn .2s ease both;
}
@keyframes promptLibFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#settingsOv.settings-ov.open { display: flex; opacity: 1; pointer-events: all; z-index: 10050; }
.settings-ov .settings-panel {
  background: var(--s0, #10121a);
  border: 1px solid var(--border2, rgba(255,255,255,0.12));
  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);
  color: var(--text, #d8dce8);
}
#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);
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
@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(0,201,167,.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 {
  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 24px 8px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  background: transparent;
  pointer-events: auto;
}
#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 .sidebar-sep-advanced {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
#settingsOv .settings-tab-advanced .tab-label { opacity: .95; }
#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(0,201,167,.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;
  pointer-events: auto;
}
#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 .numex-support-chat-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--s1); }
#settingsOv .numex-support-msg-list { min-height: 120px; max-height: 220px; overflow-y: auto; padding: 12px 14px; }
#settingsOv .numex-support-msg { margin-bottom: 10px; }
#settingsOv .numex-support-msg.user .numex-support-msg-bubble { background: var(--s2); border: 1px solid var(--border2); border-radius: 10px; padding: 8px 12px; font-size: 13px; max-width: 90%; }
#settingsOv .numex-support-msg.admin .numex-support-msg-bubble { background: rgba(61,158,255,.12); border: 1px solid rgba(61,158,255,.25); border-radius: 10px; padding: 8px 12px; font-size: 13px; max-width: 90%; margin-left: auto; }
#settingsOv .numex-support-msg-meta { font-size: 11px; color: var(--text3); margin-top: 4px; }
#settingsOv .numex-support-send-row { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); align-items: flex-end; }
#settingsOv .numex-support-input { flex: 1; min-height: 52px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 13px; resize: vertical; font-family: inherit; }
#settingsOv .numex-support-input:focus { outline: none; border-color: var(--accent); }
#settingsOv .sg-dev-block { padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
#settingsOv .s-dev-note { margin-top: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; font-size: 11.5px; color: var(--text3); line-height: 1.55; }
#settingsOv .s-dev-note-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: 6px; opacity: .9; }
#settingsOv .s-dev-note p { margin: 0; }
#settingsOv .s-dev-note code { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text2); }
#settingsOv .s-dev-note a { color: var(--accent); text-decoration: none; }
#settingsOv .s-dev-note a:hover { text-decoration: underline; }
#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(0,201,167,.12); color: var(--accent); border: 1px solid rgba(0,201,167,.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(0,201,167,.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(0,201,167,.3); }
#settingsOv .s-btn-primary:hover { background: #2ee0c0; box-shadow: 0 4px 18px rgba(0,201,167,.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);
  pointer-events: auto;
}

#settingsOv .import-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 18px;
  border: 2px dashed var(--border2);
  border-radius: 12px;
  background: var(--s1);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
#settingsOv .import-drop-zone:hover,
#settingsOv .import-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-bg);
}
#settingsOv .import-drop-zone .import-drop-text {
  font-size: 13px;
  color: var(--text3);
}
#settingsOv .import-drop-zone:hover .import-drop-text,
#settingsOv .import-drop-zone.drag-over .import-drop-text {
  color: var(--accent);
}

/* 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 (Numex flow) */
.chat-area .msg.ai .msg-bubble {
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(232, 234, 240, 0.95);
  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;
}
.chat-area .msg.ai .msg-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.chat-area .msg.ai .msg-bubble th,
.chat-area .msg.ai .msg-bubble td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  font-size: 13.5px;
}
.chat-area .msg.ai .msg-bubble th {
  background: rgba(255,255,255,0.04);
  color: rgba(232, 234, 240, 0.94);
  font-weight: 600;
}
.chat-area .msg.ai .msg-bubble tr:last-child td {
  border-bottom: none;
}
.chat-area .msg.ai .msg-bubble blockquote {
  margin: 10px 0 14px;
  padding: 9px 12px;
  border-left: 2px solid rgba(0,201,167,0.6);
  background: rgba(0,201,167,0.06);
  border-radius: 0 8px 8px 0;
  color: rgba(232, 234, 240, 0.9);
}

/* 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: none;
}
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: transparent;
  border-bottom: none;
}

/* Prompt library */
.prompt-lib-panel {
  width: min(820px, 92vw);
  max-width: 820px;
  border-radius: 18px;
  background: #0d1219;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(139,111,255,0.06);
  overflow: hidden;
}
.prompt-lib-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  background: transparent;
  padding: 16px 20px;
  gap: 12px;
}
.prompt-lib-hdr-left { flex: 1; min-width: 0; }
.prompt-lib-hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prompt-lib-panel .s-hdr-title {
  font-size: 15px;
  font-weight: 700;
  color: #dce6f0;
  letter-spacing: -0.3px;
}
.prompt-lib-panel .s-hdr-sub {
  font-size: 11px;
  color: #4a5870;
  margin-top: 2px;
}
.prompt-lib-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #161e2a;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 8px;
  width: 180px;
  transition: all .2s;
}
.prompt-lib-search:focus-within {
  border-color: rgba(0,201,167,0.25);
  background: #1c2535;
}
.prompt-lib-search svg { color: #4a5870; flex-shrink: 0; }
.prompt-lib-search input {
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  color: #dce6f0;
  width: 100%;
}
.prompt-lib-search input::placeholder { color: #2a3548; }
.prompt-lib-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  color: #8b949e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.prompt-lib-close:hover {
  background: rgba(255,68,68,0.12);
  border-color: rgba(255,68,68,0.25);
  color: #ff4444;
}
.prompt-lib-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  min-height: 380px;
}
.prompt-lib-cats {
  border: none;
  border-right: 1px solid rgba(255,255,255,0.055);
  border-radius: 0;
  background: rgba(255,255,255,0.015);
  padding: 10px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prompt-lib-cats .cat-item {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #8b949e;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-family: inherit;
}
.prompt-lib-cats .cat-item:hover {
  background: rgba(255,255,255,0.04);
  color: #dce6f0;
}
.prompt-lib-cats .cat-item.active {
  border-color: rgba(0,201,167,0.2);
  background: rgba(0,201,167,0.08);
  color: #00c9a7;
  font-weight: 600;
}
.prompt-lib-list {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 12px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.prompt-item {
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 10px;
  background: #111820;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.prompt-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,201,167,.04), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.prompt-item:hover::before { opacity: 1; }
.prompt-item:hover {
  border-color: rgba(0,201,167,0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.pt-title {
  color: #dce6f0;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.pt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.pt-body {
  flex: 1;
  min-width: 0;
}
.pt-preview {
  margin-top: 5px;
  color: #4a5870;
  font-size: 12px;
  line-height: 1.5;
}
.pt-use {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #2a3548;
  transition: all .2s;
  white-space: nowrap;
}
.prompt-item:hover .pt-use {
  color: #00c9a7;
  transform: translateX(2px);
}
.pt-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-level {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .3px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.pt-level-easy {
  background: rgba(0,201,167,0.12);
  color: #00c9a7;
  border: 1px solid rgba(0,201,167,0.18);
}
.pt-level-mid {
  background: rgba(61,158,255,0.12);
  color: #3d9eff;
  border: 1px solid rgba(61,158,255,0.18);
}
.pt-level-adv {
  background: rgba(139,111,255,0.12);
  color: #8b6fff;
  border: 1px solid rgba(139,111,255,0.18);
}
.pt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pt-copy {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--t3);
  transition: all .18s;
  display: flex;
  align-items: center;
}
.pt-copy:hover {
  background: rgba(0,201,167,0.08);
  border-color: rgba(0,201,167,0.2);
  color: #00c9a7;
}
.pt-usage-count {
  font-size: 9px;
  color: var(--t3);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--fm);
}
.cat-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--t3);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--fm);
}
.cat-item.active .cat-count {
  background: rgba(0,201,167,0.1);
  color: #00c9a7;
}
@media (max-width: 600px) {
  .prompt-lib-wrap {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .prompt-lib-cats {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
  }
  .prompt-lib-cats .cat-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Product onboarding */
.product-onb-panel {
  width: min(560px, 94vw);
  max-width: 560px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--b2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
}
#numexOnboardingOv .s-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--b2);
}
#numexOnboardingOv .s-hdr-title {
  font-family: var(--font-head, var(--font, 'Outfit', sans-serif));
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t);
}
#numexOnboardingOv .s-hdr-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--t2);
}
#numexOnboardingOv .s-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all .18s ease;
}
#numexOnboardingOv .s-close:hover {
  border-color: var(--b2);
  background: var(--s2);
  color: var(--t);
}
.product-onb-body {
  min-height: 320px;
  display: flex;
  align-items: flex-start;
  padding: 18px 24px 8px;
}
.onb-hero {
  width: 100%;
  border: 1px solid var(--b2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--s2), var(--s1));
  padding: 16px;
}
.onb-slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--acg);
  background: var(--acb);
  color: var(--ac);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}
.onb-slide-tag span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac);
}
.onb-title {
  margin-top: 12px;
  color: var(--t);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.onb-desc {
  margin-top: 8px;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.6;
}
.onb-body { margin-top: 14px; }
.onb-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.onb-feature {
  border: 1px solid var(--b2);
  border-radius: 11px;
  background: var(--s2);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.onb-feature span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--acb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.onb-feature div { min-width: 0; }
.onb-feature b {
  display: block;
  color: var(--t);
  font-size: 12px;
}
.onb-feature small {
  display: block;
  color: var(--t2);
  font-size: 10px;
}
.onb-feature em {
  margin-left: auto;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--ac);
  background: var(--acb);
  border: 1px solid var(--acg);
  border-radius: 6px;
  padding: 2px 6px;
}
.onb-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onb-step {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--b);
  padding-bottom: 10px;
}
.onb-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.onb-step i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--acg);
  background: var(--acb);
  color: var(--ac);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onb-step b {
  color: var(--t);
  font-size: 13px;
}
.onb-step small {
  display: block;
  color: var(--t2);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 3px;
}
.onb-step code {
  display: inline-block;
  margin-top: 6px;
  color: var(--ac);
  background: var(--bg3);
  border: 1px solid var(--b2);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11px;
}
.onb-plan {
  border: 1px solid var(--acg);
  background: linear-gradient(135deg, var(--acb), rgba(0,201,167,.08));
  border-radius: 12px;
  padding: 12px;
}
.onb-plan-name {
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 700;
}
.onb-plan-title {
  margin-top: 5px;
  color: var(--t);
  font-size: 18px;
  font-weight: 700;
}
.onb-plan-desc {
  margin-top: 4px;
  color: var(--t2);
  font-size: 12px;
}
.onb-perks {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.onb-perks li {
  color: var(--t2);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.onb-perks li b { color: var(--t); }
.onb-perks li span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--ac);
  border: 1px solid var(--acg);
  background: var(--acb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.onb-inline-btn {
  margin-top: 12px;
  border: 1px solid var(--acg);
  background: var(--acb);
  color: var(--t);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.onb-inline-btn:hover { transform: translateY(-1px); }
.product-onb-dots {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.onb-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--b2);
  transition: all .18s ease;
}
.onb-dot.active {
  width: 20px;
  background: var(--ac);
  box-shadow: 0 0 8px var(--acg);
}
.product-onb-footer {
  margin-top: 6px;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--b2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onb-hide-btn {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: var(--t2);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.onb-hide-btn:hover {
  color: var(--t);
}
#numexOnboardingOv .btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
#numexOnboardingOv .s-btn {
  padding: 9px 18px;
  min-height: 38px;
  border-radius: 9px;
  font-family: var(--font, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
}
#numexOnboardingOv .s-btn-primary {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #09101f;
  box-shadow: 0 10px 24px var(--acg);
}
#numexOnboardingOv .s-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px var(--acg);
}
#numexOnboardingOv .s-btn-secondary {
  background: var(--s2);
  color: var(--t);
  border-color: var(--b2);
}
#numexOnboardingOv .s-btn-secondary:hover {
  border-color: var(--acg);
  background: var(--s1);
}
@media (max-width: 560px) {
  .product-onb-body { min-height: 360px; padding: 14px; }
  .onb-title { font-size: 20px; }
  .onb-feature-grid { grid-template-columns: 1fr; }
  .product-onb-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #numexOnboardingOv .btn-row {
    justify-content: flex-end;
  }
}

/* Product onboarding v2 */
#numexOnboardingOv .product-onb-panel {
  width: min(620px, 96vw);
  max-width: 620px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #111921;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03);
}
#numexOnboardingOv .s-hdr {
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
#numexOnboardingOv .s-hdr::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #00c9a7, #00d4ff, #00c9a7);
  background-size: 200% 100%;
  animation: onbHdrShimmer 3s linear infinite;
}
@keyframes onbHdrShimmer { to { background-position: 200% 0; } }
#numexOnboardingOv .s-hdr-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
#numexOnboardingOv .s-hdr-sub {
  margin-top: 5px;
  color: #8b949e;
  font-size: 13px;
}

.product-onb-dots {
  margin: 0;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: stretch;
}
.onb-step-pill {
  border: 1px solid transparent;
  background: transparent;
  color: #6e7f92;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .22s ease;
}
.onb-step-pill .n {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.onb-step-pill.active {
  color: #00c9a7;
  background: rgba(0,201,167,0.08);
  border-color: rgba(0,201,167,0.2);
}
.onb-step-pill.active .n {
  background: #00c9a7;
  color: #0d1117;
}
.onb-step-pill.completed {
  color: #00c9a7;
}
.onb-step-pill.completed .n {
  background: rgba(0,201,167,0.16);
  color: #00c9a7;
}
.onb-step-connector {
  flex: 1;
  min-width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}
.onb-step-connector.active { background: #00c9a7; }

.product-onb-body {
  min-height: 330px;
  padding: 22px 28px 10px;
}
.onb-v2-step-label {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  color: #00c9a7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.onb-v2 .onb-desc code,
.onb-tip-box code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #c7d2e0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 1px 6px;
}
.onb-char-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.onb-char-card {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: #162029;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-char-card span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onb-char-card b { color: #e6edf3; font-size: 13px; }
.onb-char-card small { display: block; color: #8b949e; font-size: 11px; margin-top: 1px; }

.onb-tip-box {
  margin-top: 14px;
  border: 1px solid rgba(0,201,167,0.16);
  background: rgba(0,201,167,0.05);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.onb-tip-box span { font-size: 14px; margin-top: 1px; }
.onb-tip-box p {
  margin: 0;
  color: #a9b5c5;
  font-size: 12.5px;
  line-height: 1.5;
}
.onb-tip-box b { color: #00c9a7; }

.onb-ready {
  text-align: center;
  padding: 8px 0 0;
}
.onb-ready-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  margin: 0 auto 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #00c9a7;
  background: rgba(0,201,167,0.09);
  border: 1px solid rgba(0,201,167,0.22);
}
.onb-ready-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #e6edf3;
}
.onb-ready p {
  margin: 8px auto 0;
  max-width: 400px;
  color: #8b949e;
  font-size: 13px;
  line-height: 1.55;
}
.onb-ready-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.product-onb-footer {
  padding: 13px 28px 16px;
}
#numexOnboardingOv .s-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .onb-step-pill .t { display: none; }
  .product-onb-dots { padding: 12px 16px; }
  .product-onb-body { padding: 16px; }
}
@media (max-width: 560px) {
  .onb-char-grid,
  .onb-feature-grid {
    grid-template-columns: 1fr;
  }
}

.emergency-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: emergencyFadeIn 0.3s ease;
}

.emergency-banner.hidden {
  display: none;
}

.emergency-content {
  background: #1a1a2e;
  border: 1px solid #e74c3c;
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
}

.emergency-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
}

.emergency-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.emergency-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.emergency-text {
  color: #aaa;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.emergency-numbers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.emergency-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.emergency-btn:hover {
  opacity: 0.85;
}

.emergency-btn.primary {
  background: #2ecc71;
  color: #fff;
}

.emergency-btn.secondary {
  background: #3498db;
  color: #fff;
}

.emergency-btn.danger {
  background: #e74c3c;
  color: #fff;
}

.emergency-btn span {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}

.emergency-btn small {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

.emergency-continue {
  background: none;
  border: 1px solid #555;
  color: #aaa;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.emergency-continue:hover {
  border-color: #888;
  color: #fff;
}

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

/* ============================================================
   AutoSuggestions � Takip sorusu �nerileri
   ============================================================ */
/* Devam soruları — hover'da beliren yapı (Kanvasta Göster ile aynı mantık) */
.numex-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  animation: suggFadeIn 0.25s ease;
  opacity: 0.2;
  transition: opacity 0.25s ease;
}
.chat-area .msg.ai:hover .numex-suggestions,
.chat-area .msg.ai .numex-suggestions:hover {
  opacity: 1;
}
@keyframes suggFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.2; }
}
.numex-suggestions-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.numex-suggestion-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
  line-height: 1.35;
}
.numex-suggestion-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border2);
  color: var(--text);
}
.numex-suggestion-chip:active {
  background: rgba(255,255,255,0.06);
}

/* Gizli özellik: 6 ay sonra tekrar açılacak (sadece UI gizlenir, chat'ten resim isteği çalışır) */
.numex-hidden-6mo { display: none !important; }

/* Launch polish: ana ekran güven ve başlangıç deneyimi */
.topbar-home-link {
    padding: 2px 4px;
}
.topbar-home-link .home-logo-mark {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 10px rgba(0,201,167,0.16));
}
.topbar-home-link .home-logo-mark .numex-logo {
    width: 26px;
    height: 26px;
}
.topbar-home-link .home-title {
    font-size: 14.5px;
    letter-spacing: 0.075em;
}
.topbar-home-link .home-sub {
    color: rgba(232,234,240,0.62);
}
.welcome {
    padding-top: clamp(28px, 6vh, 72px);
}
.welcome .wl-glyph {
    margin-bottom: 22px;
}
.welcome .wl-title {
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 800;
}
.welcome .wl-highlight {
    background: linear-gradient(135deg, #36f0ba, #72a7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.welcome .wl-sub {
    max-width: 560px;
    color: rgba(232,234,240,0.62);
    margin-bottom: 18px;
}
/* Butonlar öncesinde küçük bir etiket — aksi halde başlıktan kopuk/"alakasız" duruyorlardı */
.starter-prompts-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(232,234,240,0.4);
    margin-bottom: 10px;
}
.starter-prompts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 840px;
    margin-top: 0;
    margin-bottom: 14px;
}
.starter-prompt {
    border: none !important; /* TASARIM PASI: çizgi yerine yumuşak dolgu yüzey */
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(235, 238, 245, 0.9) !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font: 500 13px/1.3 var(--f) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.starter-prompt:hover,
.starter-prompt:focus-visible {
    background: rgba(0,201,167, 0.08) !important;
    border-color: rgba(0,201,167, 0.35) !important;
    color: #00ffb3 !important;
    box-shadow: 0 4px 16px rgba(0,201,167, 0.2) !important;
    transform: translateY(-2px) !important;
    outline: none;
}
.welcome .chars-title {
    color: rgba(232,234,240,0.6);
    font-weight: 600;
}
.welcome .char-chip,
.welcome .suggest-card {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.input-area .ia-btn[data-tip] {
    position: relative;
}
.input-area .ia-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,12,18,0.96);
    color: var(--t2);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 11px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    transition: opacity .16s ease, transform .16s ease;
}
.input-area .ia-btn[data-tip]:hover::after,
.input-area .ia-btn[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.input-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: min(820px, calc(100% - 24px));
    margin: 7px auto 0;
    color: rgba(232,234,240,0.58);
}
.input-disclaimer::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #00c9a7;
    box-shadow: 0 0 10px rgba(0,201,167,0.65);
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .starter-prompts {
        gap: 6px;
        margin-top: 10px;
    }
    .starter-prompt {
        font-size: 11px;
        padding: 7px 10px;
    }
}

#sidebarToggleBtn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #00c9a7 !important;
    box-shadow: 0 0 10px rgba(0,201,167, 0.08);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#sidebarToggleBtn:hover {
    background: rgba(0,201,167, 0.08) !important;
    border-color: rgba(0,201,167, 0.35) !important;
    color: #00ffb3 !important;
    box-shadow: 0 0 16px rgba(0,201,167, 0.2);
    transform: scale(1.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   GPT-tarzı KAPALI SIDEBAR İKON RAYI (yalnız masaüstü ≥769px)
   Kapalıyken sidebar tamamen gizlenmek yerine 60px'lik dar bir ikon şeridi
   olur: üstte genişlet, yeni sohbet, ara, altta kullanıcı. Mobilde (≤768px)
   eski davranış korunur (translateX ile tamamen gizli) — bu blok sadece
   masaüstünde geçerli. RAIL-FIX
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .sidebar.collapsed {
    width: 60px !important;
    min-width: 60px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible;
    border-right: 1px solid var(--b);
  }
  /* Rayda main taşmasın */
  .sidebar.collapsed ~ .main {
    width: auto;
    max-width: calc(100% - 60px);
  }
  /* İpuçları ikonun SAĞINDA — kapalı rayda üstte-ortalı tooltip ekranın soluna
     taşıyordu (Yeni Sohbet / Geçici Konuşma). Sağa alıp dikey ortalıyoruz. RAIL-FIX */
  .sidebar.collapsed [data-tip]::after {
    left: calc(100% + 12px);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Metin / giriş kutusu / sohbet listesi / ikincil footer butonları gizli → sade ikon */
  .sidebar.collapsed .sb-logo-row,
  .sidebar.collapsed .sb-new-chat > span,
  .sidebar.collapsed .sb-search input,
  .sidebar.collapsed .sb-body,
  .sidebar.collapsed .sb-secondary,
  .sidebar.collapsed .sb-plan-info,
  .sidebar.collapsed .sb-login-btn > span {
    display: none !important;
  }
  /* Üst: genişlet oku ortalı */
  .sidebar.collapsed .sb-header {
    padding: 12px 0 8px;
    justify-content: center;
  }
  .sidebar.collapsed .sb-close {
    margin: 0 auto;
  }
  /* Yeni sohbet + ara → 40px kare ikon buton */
  .sidebar.collapsed .sb-new-chat,
  .sidebar.collapsed .sb-search {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    margin: 6px auto;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
  }
  .sidebar.collapsed .sb-search { margin-top: 2px; }
  .sidebar.collapsed .sb-search svg { opacity: 0.7; }
  /* Alt: kullanıcı / giriş ikonu ortalı */
  .sidebar.collapsed .sb-footer {
    padding: 10px 0 12px;
    align-items: center;
  }
  .sidebar.collapsed .sb-login-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    gap: 0;
  }
}

/* ═══ RAIL-FIX-2: hamburger ikonu + giriş-yapmış kullanıcı kartı (yalnız rayda) ═══ */
/* Üst kontrol: açık sidebar'da chevron, kapalı rayda hamburger */
.sb-close-ham { display: none; }
@media (min-width: 769px) {
  .sidebar.collapsed .sb-close-chevron { display: none !important; }
  .sidebar.collapsed .sb-close-ham { display: block; }
  .sidebar.collapsed .sb-close svg { transform: none !important; } /* eski 180° rotate iptal */

  /* Giriş yapmış kullanıcı: rayda sadece avatar; detay/chevron/menü gizli */
  .sidebar.collapsed .sb-user-details,
  .sidebar.collapsed .sb-user-card .sb-chevron,
  .sidebar.collapsed .sb-user-menu { display: none !important; }
  .sidebar.collapsed .sb-user-card {
    width: 40px; height: 40px;
    padding: 0; margin: 0 auto; gap: 0;
    justify-content: center;
    cursor: pointer;
  }
  .sidebar.collapsed .sb-avatar { margin: 0; }
}

/* ═══ RAIL-FIX-3: GPT-sadeliği — kutusuz ikonlar, dar ray, yan popup kullanıcı menüsü ═══ */
@media (min-width: 769px) {
  .sidebar.collapsed { width: 56px !important; min-width: 56px !important; }
  .sidebar.collapsed ~ .main { max-width: calc(100% - 56px); }

  /* Yeni sohbet + ara: kutu/kenarlık/gölge YOK — sade ikon, hafif hover */
  .sidebar.collapsed .sb-new-chat,
  .sidebar.collapsed .sb-search {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 3px auto !important;
    border-radius: 8px;
    color: var(--t2);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .sidebar.collapsed .sb-new-chat:hover,
  .sidebar.collapsed .sb-search:hover {
    background: rgba(255,255,255,0.07) !important;
    color: var(--t) !important;
    transform: none !important;
  }
  .sidebar.collapsed .sb-new-chat svg,
  .sidebar.collapsed .sb-search svg { width: 20px !important; height: 20px !important; opacity: 0.9; }
  .sidebar.collapsed .sb-search svg { stroke: currentColor; }

  /* Boşlukları daralt */
  .sidebar.collapsed .sb-header { padding: 10px 0 2px; }
  .sidebar.collapsed .sb-new-chat { margin-top: 8px !important; }
  .sidebar.collapsed .sb-footer { padding: 6px 0 12px; border-top: none; }

  /* Avatar: yuvarlak, sade */
  .sidebar.collapsed .sb-user-card { width: 38px !important; height: 38px !important; }
  .sidebar.collapsed .sb-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; }

  /* Kullanıcı menüsü: GPT gibi rayın YANINDA sabit popup (iki-adım yok) */
  .sidebar.collapsed .sb-user-menu.open {
    display: block !important;
    position: fixed !important;
    left: 60px !important;
    bottom: 14px !important;
    width: 258px !important;
    max-width: calc(100vw - 72px);
    z-index: 300 !important;
    background: #12121c;
    border: 1px solid var(--b);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.55);
  }
}

/* ═══ RAIL-FIX-4: çift hamburger giderme — masaüstünde topbar hamburger'ı gizle ═══ */
/* Rail kendi üst kontrolünü (chevron/hamburger) taşıyor; topbar'daki ikinci
   hamburger (#sidebarToggleBtn) masaüstünde gereksiz → gizle. Mobilde kalır
   (orada sidebar tamamen gizli, açmak için topbar butonu şart). */
@media (min-width: 769px) {
  #sidebarToggleBtn { display: none !important; }
}

/* ═══════════ #10 — Bu sohbetteki dosyalar (composer butonu + popover) ═══════════ */
.files-dd-wrap { position: relative; display: inline-flex; }
.files-btn { position: relative; }
.files-btn .files-count {
    position: absolute; top: -3px; right: -3px;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    background: var(--gr, #3ecf8e); color: #06231a;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
    border-radius: 8px; pointer-events: none;
}
.files-pop {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
    width: 280px; max-height: 320px; overflow-y: auto;
    background: var(--bg2, #1a1d24); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    z-index: 1200; padding: 6px;
}
.files-pop.open { display: block; }
.files-pop-head { font-size: 11px; font-weight: 600; color: #9aa1b3; padding: 6px 8px 8px; }
.files-pop-empty { font-size: 12px; color: #6b7280; padding: 8px; text-align: center; }
.files-pop-list { display: flex; flex-direction: column; gap: 2px; }
.files-pop-item {
    display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px;
    text-decoration: none; color: inherit; cursor: pointer; transition: background 0.15s;
}
.files-pop-item:hover { background: rgba(255,255,255,0.06); }
.files-pop-item .fp-ic { font-size: 16px; flex: 0 0 auto; }
.files-pop-item .fp-info { display: flex; flex-direction: column; min-width: 0; }
.files-pop-item .fp-name { font-size: 13px; color: var(--t, #e6e8ee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-pop-item .fp-meta { font-size: 11px; color: #8b949e; }
body.theme-light .files-pop, body[data-theme="acik"] .files-pop { background: #fff; border-color: rgba(0,0,0,0.1); }
body.theme-light .files-pop-item .fp-name, body[data-theme="acik"] .files-pop-item .fp-name { color: #1a1d24; }

/* ═══════════ #5 — Sohbet arama modalı (Ctrl+K) ═══════════ */
.chat-search-ov {
    display: none; position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
    align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.chat-search-ov.open { display: flex; }
.chat-search-modal {
    width: min(620px, 92vw); max-height: 66vh; display: flex; flex-direction: column;
    background: var(--bg2, #1a1d24); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); overflow: hidden;
}
.cs-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cs-input-row .cs-ic { width: 18px; height: 18px; color: #9aa1b3; flex: 0 0 auto; }
.cs-input-row input { flex: 1; background: none; border: none; outline: none; color: var(--t, #e6e8ee); font-size: 15px; }
.cs-input-row input::placeholder { color: #6b7280; }
.cs-esc { font-size: 10px; color: #8b949e; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; padding: 2px 6px; }
.cs-results { overflow-y: auto; padding: 6px; }
.cs-empty { padding: 24px; text-align: center; color: #6b7280; font-size: 13px; }
.cs-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.cs-item:hover, .cs-item.active { background: rgba(255,255,255,0.07); }
.cs-item-ic { width: 16px; height: 16px; color: #8b949e; flex: 0 0 auto; margin-top: 2px; }
.cs-item-body { min-width: 0; flex: 1; }
.cs-item-title { font-size: 14px; color: var(--t, #e6e8ee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-item-sn { font-size: 12px; color: #8b949e; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-light .chat-search-modal, body[data-theme="acik"] .chat-search-modal { background: #fff; border-color: rgba(0,0,0,0.1); }
body.theme-light .cs-item-title, body[data-theme="acik"] .cs-item-title { color: #1a1d24; }
body.theme-light .cs-input-row input, body[data-theme="acik"] .cs-input-row input { color: #1a1d24; }

/* ═══ Numex Ailesi — kalıcı sidebar erişimi (footer DIŞINDA, login-bağımsız) ═══
   TASARIM PASI (2026-08-29): eski hâli hardcoded TEAL'di → mavi/mono arayüzde tek yeşil öğe =
   renk uyumsuzluğu. Artık app accent'iyle (var(--ac)) uyumlu + margin-top:auto ile kullanıcının
   hemen üstüne (dibe) gruplanıyor (rayda tepeye kaçıyordu). */
.sb-family-btn {
    width: auto;
    margin: 12px 12px 10px; /* aramadan NEFES alsın — üst kümeyle aynı 12px ritim */
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    color: var(--t2);
}
.sb-family-btn svg { opacity: 0.7; color: var(--t3); }
.sb-family-btn:hover {
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: var(--t);
}
.sb-family-btn:hover svg { color: var(--ac); opacity: 1; }
/* Kapalı rayda: diğer ikonlarla aynı sadelik — nötr ikon, hover'da accent, arama altında */
.sidebar.collapsed .sb-family-btn {
    margin: 4px auto 2px;
    background: none;
    border-color: transparent;
}