/*
 * Kobalt tema — sohbet ana sayfası (index.html).
 *
 * GERİ ALMA: index.html <head> içindeki tek satırlık
 *   <link rel="stylesheet" href="/static/css/theme_kobalt.css?...">
 * kaldırılırsa sayfa eski görünümüne döner. index.html'deki JS satır içi renkleri
 * var(--bk-*, eski_değer) biçimindedir; bu dosya yokken eski değerler kullanılır.
 *
 * Renk dili: krom mavisi — parlak krom gradyanlı başlık, mavi tonlu yüzeyler, kobalt vurgu
 * (arka plan çizimindeki #3d6fe0 ile aynı aile). --bk-header bir gradyandır: yalnız background'da kullan.
 * Açık mod sabit (kullanıcı kararı, 2026-10-01). Koyu token'lar <html data-theme="dark"> ile
 * hâlâ açılabilir; OS'a göre otomatik için seçiciyi @media (prefers-color-scheme: dark) { :root } yap.
 * RTL (ar): yalnız mantıksal özellikler (inline-start/end) kullanılır.
 */

:root {
    color-scheme: light;
    --bk-page: #dce7f7;
    --bk-surface: #fbfdff;
    --bk-surface-2: #f0f5fd;
    --bk-surface-3: #e4edfa;
    --bk-border: #d3e0f3;
    --bk-border-strong: #b3c7e6;
    --bk-text: #12213a;
    --bk-text-2: #3c4f6e;
    --bk-text-3: #586b8a;
    --bk-accent: #2a5bd0;
    --bk-accent-hover: #1f4ab3;
    --bk-accent-soft: #e8effc;
    --bk-accent-border: #b9cdf3;
    --bk-accent-text: #163f9c;
    --bk-on-accent: #ffffff;
    --bk-header: linear-gradient(180deg, #4a7ce6 0%, #2b5bc8 48%, #224ead 52%, #1d4499 100%);
    --bk-header-text: #f3f6fb;
    --bk-header-border: rgba(255, 255, 255, 0.28);
    --bk-user-bubble: #2a5bd0;
    --bk-bot-bubble: #eef4fd;
    --bk-danger: #c62828;
    --bk-danger-hover: #a51f1f;
    --bk-success: #1f7a43;
    --bk-warning-bg: #fff4d6;
    --bk-warning-border: #f0c75e;
    --bk-warning-text: #6b4500;
    --bk-overlay: rgba(10, 15, 25, 0.55);
    --bk-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.10);
    --bk-focus: 0 0 0 3px rgba(26, 79, 196, 0.22);

    /* Simgeler (çizgi, 24px ızgara) — mask ile currentColor alır */
    --bk-ico-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5-6.5a3 3 0 0 0-6-6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5-6.5'/%3E%3C/svg%3E");
    --bk-ico-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8h.01M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zM3 16l5-5c.93-.9 2.07-.9 3 0l5 5M14 14l1-1c.93-.9 2.07-.9 3 0l3 3'/%3E%3C/svg%3E");
    --bk-ico-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h1a2 2 0 0 0 2-2 1 1 0 0 1 1-1h6a1 1 0 0 1 1 1 2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2M9 13a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3C/svg%3E");
    --bk-ico-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10l4.55-2.27A1 1 0 0 1 21 8.62v6.76a1 1 0 0 1-1.45.89L15 14M3 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    --bk-ico-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2M9 12h6M9 16h6'/%3E%3C/svg%3E");
    --bk-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
    --bk-ico-analysis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 9h4M10 3v6l-4.5 8.5A2.4 2.4 0 0 0 7.6 21h8.8a2.4 2.4 0 0 0 2.1-3.5L14 9V3'/%3E%3C/svg%3E");
    --bk-ico-makeup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14M6 4v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4M6 12h12'/%3E%3C/svg%3E");
    --bk-ico-troubleshoot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.24 3.96 2.47 17.5a2 2 0 0 0 1.73 3h15.6a2 2 0 0 0 1.73-3L13.76 3.96a2 2 0 0 0-3.52 0z'/%3E%3C/svg%3E");
    --bk-ico-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zM8 7h8v3H8zM8 14v.01M12 14v.01M16 14v.01M8 17v.01M12 17v.01M16 17v.01'/%3E%3C/svg%3E");
    --bk-ico-process: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E");
    /* Marka işareti: kobalt kare içinde hekzagon "banyo" (metal kafesi), alt yarısı biriken
       kaplama, üstünde metal iyonu */
    --bk-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231a4fc4'/%3E%3Cpath d='M16 6.5l8.2 4.75v9.5L16 25.5l-8.2-4.75v-9.5z' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M7.8 16.6h16.4v4.15L16 25.5l-8.2-4.75z' fill='white'/%3E%3Ccircle cx='16' cy='11.6' r='2.1' fill='white'/%3E%3C/svg%3E");
}

/* Koyu mod kapalı: yalnız açıkça istenirse */
@media all {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --bk-page: #0b1830;
        --bk-surface: #12264a;
        --bk-surface-2: #0f2041;
        --bk-surface-3: #1a3260;
        --bk-border: #25427a;
        --bk-border-strong: #36599a;
        --bk-text: #eaf1ff;
        --bk-text-2: #bdd0f0;
        --bk-text-3: #93acd4;
        --bk-accent: #3d6fe0;
        --bk-accent-hover: #4f80ec;
        --bk-accent-soft: #1b3566;
        --bk-accent-border: #3a5fa8;
        --bk-accent-text: #a9c4ff;
        --bk-header: linear-gradient(180deg, #3d6fe0 0%, #2550b4 48%, #1e4499 52%, #193a85 100%);
        --bk-header-border: rgba(255, 255, 255, 0.22);
        --bk-user-bubble: #3d6fe0;
        --bk-bot-bubble: #183058;
        --bk-danger: #ff8a80;
        --bk-danger-hover: #ffb3ab;
        --bk-success: #6fcf97;
        --bk-warning-bg: #3a2c0c;
        --bk-warning-border: #7a5a14;
        --bk-warning-text: #f5d38a;
        --bk-overlay: rgba(0, 0, 0, 0.65);
        --bk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
        --bk-focus: 0 0 0 3px rgba(79, 127, 230, 0.35);
    }
}

/* ---------- Sayfa ve kart ---------- */

body {
    background-color: var(--bk-page);
    background-image: url('/static/img/bg-kaplama.svg?v=3');
    color: var(--bk-text);
}

.container {
    background: var(--bk-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--bk-border);
    border-radius: 18px;
    box-shadow: var(--bk-shadow);
}

/* Üst gezinme (site_nav.js) — bu sayfada grafit/kobalt */
.site-nav {
    background: var(--bk-header);
    border-bottom-color: var(--bk-header-border);
}

.site-nav-lang option {
    color: var(--bk-text);
    background-color: var(--bk-surface);
}

.site-nav-btn[aria-current="page"] {
    background: rgba(47, 98, 214, 0.45);
    border-color: rgba(120, 160, 240, 0.8);
}

/* ---------- Başlık ---------- */

.header {
    background: var(--bk-header);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bk-header-text);
    border-bottom: 1px solid var(--bk-header-border);
}

.header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 650;
    letter-spacing: -0.3px;
}

.header h1::before {
    content: '';
    flex: none;
    width: 30px;
    height: 30px;
    background: var(--bk-mark) center / contain no-repeat;
}

/* Emoji simgeleri gizle; düğmeler yalnız metinle daha sade */
.header-controls .login-btn > span:first-child:not(:only-child) {
    display: none;
}

.login-btn {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--bk-header-border);
    border-radius: 10px;
    color: var(--bk-header-text);
}

.login-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    transform: none;
    box-shadow: none;
}

.login-btn:focus-visible {
    outline: 2px solid var(--bk-header-text);
    outline-offset: 2px;
}

/* Eski açılır giriş formu (kullanılıyorsa koyu modda okunur kalsın) */
.login-dropdown {
    background: var(--bk-surface);
    color: var(--bk-text);
    border: 1px solid var(--bk-border);
}

.login-form input {
    background: var(--bk-surface);
    color: var(--bk-text);
    border-color: var(--bk-border-strong);
}

/* ---------- Kenar çubuğu (konuşma geçmişi) ---------- */

.sidebar {
    background: var(--bk-surface-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-inline-end: 1px solid var(--bk-border);
}

.sidebar-header {
    background: transparent;
    border-bottom: 1px solid var(--bk-border);
}

.sidebar-toggle {
    color: var(--bk-text);
    font-weight: 600;
}

.sidebar-toggle:hover {
    background: var(--bk-surface-3);
}

.sidebar-toggle:focus-visible {
    outline-color: var(--bk-accent);
}

.sidebar-chevron {
    border-color: var(--bk-text-2);
}

.sidebar-count {
    background: var(--bk-accent);
    color: var(--bk-on-accent);
}

.new-chat-btn {
    background: var(--bk-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bk-text);
    border: 1px solid var(--bk-border-strong);
    font-weight: 600;
}

.new-chat-btn:hover {
    background: var(--bk-accent-soft);
    border-color: var(--bk-accent-border);
    color: var(--bk-accent-text);
    transform: none;
    box-shadow: none;
}

.history-item {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid transparent;
    color: var(--bk-text);
}

.history-item:hover {
    background: var(--bk-surface-3);
    border-color: var(--bk-border);
}

.history-item.active {
    background: var(--bk-accent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--bk-accent);
    color: var(--bk-on-accent);
}

/* ---------- Sohbet alanı ---------- */

.chat-area {
    background: var(--bk-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Boş sohbette karşılama dikey ortada; içerik taşarsa auto kenar boşluğu 0'a düşer, kırpılmaz */
.welcome-message {
    margin-block: auto;
    color: var(--bk-text-2);
}

.welcome-message::before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    background: var(--bk-mark) center / contain no-repeat;
}

.welcome-message h2 {
    color: var(--bk-text);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.4px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.welcome-message p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto 4px;
}

.example-chips {
    max-width: 760px;
    margin: 24px auto 0;
}

.example-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: start;
    padding: 10px 14px;
    border: 1px solid var(--bk-border-strong);
    border-radius: 12px;
    background: var(--bk-surface);
    color: var(--bk-text);
    font-size: 13.5px;
    line-height: 1.35;
}

.example-chip:hover {
    background: var(--bk-accent-soft);
    border-color: var(--bk-accent-border);
    color: var(--bk-accent-text);
}

.example-chip:focus-visible {
    outline: 2px solid var(--bk-accent-text);
    outline-offset: 2px;
}

.chip-ico {
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--bk-accent);
    -webkit-mask: var(--bk-ico-analysis) center / contain no-repeat;
    mask: var(--bk-ico-analysis) center / contain no-repeat;
}

.example-chip:hover .chip-ico {
    background: currentColor;
}

.chip-ico-makeup { -webkit-mask-image: var(--bk-ico-makeup); mask-image: var(--bk-ico-makeup); }
.chip-ico-troubleshoot { -webkit-mask-image: var(--bk-ico-troubleshoot); mask-image: var(--bk-ico-troubleshoot); }
.chip-ico-calc { -webkit-mask-image: var(--bk-ico-calc); mask-image: var(--bk-ico-calc); }
.chip-ico-process { -webkit-mask-image: var(--bk-ico-process); mask-image: var(--bk-ico-process); }

/* Misafir bandı: mor kutu yerine giriş kutusunun altında ince bir davet satırı.
   DOM'da .chat-container'dan sonra gelir (odak/okuma sırası = görsel sıra); tema yokken
   index.html'deki order:-1 onu eskisi gibi üste taşır. */
.chat-area .guest-info-band {
    order: 0;
    margin: 0;
    padding: 10px 20px;
    border: 0;
    border-top: 1px solid var(--bk-border);
    border-radius: 0;
    background: var(--bk-surface-2);
    color: var(--bk-text-2);
    font-size: 13px;
    line-height: 1.45;
}

.guest-info-band .guest-info-text strong {
    color: var(--bk-text);
    font-weight: 600;
}

.guest-info-band .guest-info-cta {
    background: transparent;
    color: var(--bk-accent-text);
    border: 1px solid var(--bk-accent-border);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
}

.guest-info-band .guest-info-cta:hover {
    opacity: 1;
    background: var(--bk-accent-soft);
}

.guest-info-band .guest-info-cta:focus-visible {
    outline: 2px solid var(--bk-accent-text);
    outline-offset: 2px;
}

/* Misafire teknik ayar gösterme (varsayılan açık kalır) */
.main-content.guest-mode .stream-toggle-label {
    display: none;
}

.lab-firm-context-band {
    background: var(--bk-accent-soft);
    border-color: var(--bk-accent-border);
    color: var(--bk-text-2);
}

.lab-firm-context-band .lab-firm-context-text strong {
    color: var(--bk-accent-text);
}

.lab-firm-context-clear {
    background: var(--bk-surface);
    color: var(--bk-accent-text);
    border-color: var(--bk-accent-border);
}

.lab-firm-context-clear:hover {
    background: var(--bk-accent-soft);
}

/* ---------- Mesajlar ---------- */

.message.bot .message-text-wrapper {
    border: 1px solid var(--bk-border);
}

/* Dış .message-content artık yalnız taşıyıcı: eski çerçeve/iç boşluk balonu çift çerçeveletmesin */
.message.user .message-content,
.message.bot .message-content {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    padding: 0;
}

.message.user .message-attachments-wrapper,
.message-attachments .attachment-file-name {
    color: var(--bk-text);
}

.message-text-wrapper .md-heading {
    color: var(--bk-text);
    border-bottom-color: var(--bk-border);
}

.message-text-wrapper .md-hr {
    border-top-color: var(--bk-border);
}

.message-text-wrapper a {
    color: var(--bk-accent-text);
}

.message-text-wrapper table {
    font-variant-numeric: tabular-nums;
}

/* Avatarlar: emoji yerine marka işareti (asistan) ve kullanıcı simgesi */
.message-avatar {
    font-size: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.message.bot .message-avatar {
    background: var(--bk-mark) center / contain no-repeat;
    border: 0;
    border-radius: 9px;
}

.message.user .message-avatar {
    background: var(--bk-accent-soft);
    border: 1px solid var(--bk-accent-border);
}

.message.user .message-avatar::before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--bk-accent-text);
    -webkit-mask: var(--bk-ico-user) center / contain no-repeat;
    mask: var(--bk-ico-user) center / contain no-repeat;
}

.user-copy-btn {
    background: var(--bk-surface);
    border-color: var(--bk-border-strong);
    color: var(--bk-text-2);
    box-shadow: none;
}

.user-copy-btn:hover:not(.copied) {
    background: var(--bk-surface-3);
    border-color: var(--bk-border-strong);
}

.message-sources {
    border-top-color: var(--bk-border);
    color: var(--bk-text-2);
}

.message-sources-title {
    color: var(--bk-text);
}

.message-source-confidence {
    color: var(--bk-text-3);
}

/* ---------- Düşünce zinciri ---------- */

.thinking-chain-container {
    background: var(--bk-accent-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--bk-accent-border);
}

.thinking-chain-title {
    color: var(--bk-accent-text);
}

.thinking-indicator {
    border-color: var(--bk-accent-border);
    border-top-color: var(--bk-accent);
}

.thinking-chain-content {
    color: var(--bk-text-2);
}

.thinking-step::before {
    color: var(--bk-accent-text);
}

/* ---------- Banyo hesap aracı ---------- */

.bath-calc-widget {
    background: var(--bk-accent-soft);
    border-color: var(--bk-accent-border);
    color: var(--bk-text);
}

.bath-calc-widget h4,
.bath-calc-guide strong {
    color: var(--bk-text);
}

.bath-calc-guide {
    background: var(--bk-surface);
    color: var(--bk-text-2);
}

.bath-calc-row select,
.bath-calc-row input[type="number"],
.bath-calc-table input {
    background: var(--bk-surface);
    color: var(--bk-text);
    border: 1px solid var(--bk-border-strong);
}

.bath-calc-table th,
.bath-calc-table td {
    border-color: var(--bk-border);
}

.bath-calc-table th {
    background: var(--bk-surface-3);
}

.bath-calc-buttons .btn-hesapla {
    background: var(--bk-accent);
    color: var(--bk-on-accent);
}

/* ---------- Giriş alanı ---------- */

.chat-input-container {
    background: var(--bk-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--bk-border);
}

/* Metin kutusu + Gönder tek çerçevede */
.chat-input-wrapper {
    align-items: flex-end;
    padding: 6px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border-strong);
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input-wrapper:focus-within {
    border-color: var(--bk-accent);
    box-shadow: var(--bk-focus);
}

.chat-input {
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bk-text);
}

.chat-input::placeholder {
    color: var(--bk-text-3);
}

.chat-input:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.send-btn {
    background: var(--bk-accent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bk-on-accent);
    border: 1px solid var(--bk-accent);
    border-radius: 10px;
    letter-spacing: 0;
}

.send-btn:hover:not(:disabled) {
    background: var(--bk-accent-hover);
    border-color: var(--bk-accent-hover);
    transform: none;
    box-shadow: none;
}

.send-btn:focus-visible {
    outline: 2px solid var(--bk-accent-text);
    outline-offset: 2px;
}

.input-attachments {
    border-top: 0;
    padding-top: 0;
    align-items: center;
}

.attachment-btn {
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--bk-border);
    border-radius: 999px;
    color: var(--bk-text-2);
    font-size: 13px;
}

.attachment-btn:hover {
    background: var(--bk-surface-3);
    border-color: var(--bk-border-strong);
    color: var(--bk-text);
    transform: none;
    box-shadow: none;
}

.attachment-btn:focus-within,
.attachment-btn:focus-visible {
    outline: 2px solid var(--bk-accent-text);
    outline-offset: 2px;
}

/* Emoji yerine çizgi simge */
.attachment-btn > span:first-child {
    display: inline-flex;
    font-size: 0;
}

.attachment-btn > span:first-child::before {
    content: '';
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--bk-ico-clip) center / contain no-repeat;
    mask: var(--bk-ico-clip) center / contain no-repeat;
}

#attachBtnImage > span:first-child::before { -webkit-mask-image: var(--bk-ico-photo); mask-image: var(--bk-ico-photo); }
#attachBtnVideo > span:first-child::before { -webkit-mask-image: var(--bk-ico-video); mask-image: var(--bk-ico-video); }
#attachBtnCamera > span:first-child::before { -webkit-mask-image: var(--bk-ico-camera); mask-image: var(--bk-ico-camera); }
#attachBtnAnaliz > span:first-child::before { -webkit-mask-image: var(--bk-ico-clipboard); mask-image: var(--bk-ico-clipboard); }

.attachment-item {
    background: var(--bk-surface-2);
    border-color: var(--bk-border);
    color: var(--bk-text-2);
}

.attachment-remove {
    color: var(--bk-danger);
}

.attachment-remove:hover {
    color: var(--bk-danger-hover);
}

.stream-toggle-label {
    color: var(--bk-text-3);
}

.stream-toggle-label input {
    accent-color: var(--bk-accent);
}

.chat-api-error {
    background: var(--bk-warning-bg);
    border-color: var(--bk-warning-border);
    color: var(--bk-warning-text);
}

/* ---------- Mobil (index.html'deki kırılımlarla aynı) ---------- */

@media (max-width: 768px) {
    .container {
        border-radius: 14px;
    }

    /* Telefonda geçmiş paneli sohbetin üstünde: yan çizgi yok, alt ayraç token rengiyle */
    .sidebar {
        border-inline-end: 0;
        border-bottom: 1px solid var(--bk-border);
    }

    .header h1::before {
        width: 24px;
        height: 24px;
    }

    .welcome-message::before {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }

    .welcome-message h2 {
        font-size: 1.35rem;
    }

    .welcome-message p {
        font-size: 14px;
    }

    .example-chips {
        gap: 8px;
        margin-top: 18px;
    }

    .example-chip {
        width: 100%;
    }

    /* Kart, üst gezinme (site_nav: body padding-top 60px) altında ekrana sığsın; aksi halde
       en alttaki misafir daveti ve Kayıt düğmesi kaydırmadan görünmüyordu */
    body.site-nav-active .container {
        height: calc(100vh - 68px - env(safe-area-inset-top, 0px));
        height: calc(100dvh - 68px - env(safe-area-inset-top, 0px));
    }

    .chat-area .guest-info-band {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
        padding: 8px 12px;
        gap: 10px;
    }

    /* Telefonda en fazla 3 satır; düğme yanında kalır */
    .guest-info-band .guest-info-text {
        flex: 1 1 0;
        font-size: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    .guest-info-band .guest-info-cta {
        flex: none;
        display: inline-block;
        width: auto;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
        border-radius: 8px;
    }

    .chat-input-wrapper {
        padding: 4px;
    }
}

@media (max-width: 640px) {
    /* Admin rol önizleme bandı nav'ı iki satıra çıkarır (padding-top 116px) */
    body.site-nav-active.site-nav-previewing .container {
        height: calc(100vh - 124px - env(safe-area-inset-top, 0px));
        height: calc(100dvh - 124px - env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 480px) {
    .container {
        border-radius: 10px;
    }

    body.site-nav-active .container {
        height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
        height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
    }

    body.site-nav-active.site-nav-previewing .container {
        height: calc(100vh - 120px - env(safe-area-inset-top, 0px));
        height: calc(100dvh - 120px - env(safe-area-inset-top, 0px));
    }

    .header h1 {
        gap: 8px;
    }

    .header h1::before {
        width: 22px;
        height: 22px;
    }

    .chat-area .guest-info-band {
        padding: 8px 10px;
    }
}