/* ================================================================
   TORK Chat Widget — tork-widget.css  v6
   FAB ve chat penceresi AYRI position:fixed — flex container YOK
   Her cihazda transform:scale popup, tam ekran ASLA
   ================================================================ */

:root {
    --tw-cyan:   #00cfff;
    --tw-cyan2:  #00f0c8;
    --tw-green:  #00ff88;
    --tw-red:    #ff4444;
    --tw-bg:     rgba(5, 8, 20, 1.0); /* Tam opak — sayfa içeriği görünmesin */
    --tw-bg2:    rgba(10, 14, 39, 0.97);
    --tw-border: rgba(0, 207, 255, 0.22);
    --tw-radius: 20px;
    --tw-tr:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --tw-shadow:
        0 0 0 1px rgba(0, 240, 200, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(0, 207, 255, 0.10);
    --safe-bot: env(safe-area-inset-bottom, 0px);
    --safe-rgt: env(safe-area-inset-right,  0px);

    /* Sabitler — JS ile senkronize */
    --fab-size:   60px;
    --fab-bottom: 20px;
    --fab-right:  20px;
    --gap:        10px;
}

/* ================================================================
   FAB — Bağımsız fixed
   ================================================================ */
.tork-toggle-btn {
    position: fixed;
    bottom: calc(var(--fab-bottom) + var(--safe-bot));
    right:  calc(var(--fab-right)  + var(--safe-rgt));
    z-index: 10500;

    width:  var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tw-cyan), var(--tw-cyan2));
    border: none;
    box-shadow: 0 6px 24px rgba(0, 207, 255, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed; /* tekrar — spesifik */
    transition: transform .2s ease, box-shadow .2s ease;
    animation: twFabPulse 3s ease-in-out infinite;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tork-toggle-btn img {
    width: 100%; height: 100%;
    object-fit: cover; display: block; pointer-events: none;
}

.tork-toggle-btn:hover  { transform: scale(1.08); animation: none; box-shadow: 0 10px 32px rgba(0,207,255,.7); }
.tork-toggle-btn:active { transform: scale(0.93); }

@keyframes twFabPulse {
    0%,100% { box-shadow: 0 6px 24px rgba(0,207,255,.55), 0 0 0 0   rgba(0,207,255,.3); }
    50%      { box-shadow: 0 8px 32px rgba(0,207,255,.65), 0 0 0 10px rgba(0,207,255,0); }
}

/* Okunmamış rozet */
.tork-unread-badge {
    position: absolute; top: -3px; right: -3px;
    background: var(--tw-red); color: #fff;
    font-size: .6rem; font-weight: 700; font-family: system-ui, sans-serif;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: none; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid #050814;
    animation: twBadgePop .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.tork-unread-badge.visible { display: flex; }
@keyframes twBadgePop { from{transform:scale(0)} to{transform:scale(1)} }

/* ================================================================
   CHAT PENCERESİ — Bağımsız fixed, FAB'ın hemen üstünde
   JS, bottom değerini FAB yüksekliğine göre hesaplar
   ================================================================ */
.tork-chat-window {
    position: fixed;
    /* bottom: --fab-bottom(20) + --fab-size(60) + --gap(10) = 90px */
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--gap) + var(--safe-bot));
    right:  calc(var(--fab-right) + var(--safe-rgt));
    z-index: 10499; /* FAB'ın biraz altında */

    width: 310px;

    /* Yükseklik: sabit değerler, dvh/svh YOK */
    max-height: 460px;

    background: var(--tw-bg);
    border: 1.5px solid var(--tw-border);
    border-radius: var(--tw-radius);
    box-shadow: var(--tw-shadow);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Kapalı */
    transform-origin: bottom right;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.34,1.56,.64,1), opacity .26s ease;
}

.tork-chat-window.tw-open {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}

.tork-chat-window.tw-closing {
    transform: scale(0.88) translateY(10px);
    opacity: 0;
    transition: transform .18s cubic-bezier(.4,0,1,1), opacity .18s ease;
    pointer-events: none;
}

/* ── Header ── */
.tw-header {
    background: linear-gradient(135deg, rgba(0,207,255,.14), rgba(0,240,200,.07));
    border-bottom: 1px solid rgba(0,207,255,.15);
    padding: 11px 13px;
    display: flex; align-items: center; gap: 9px;
    flex-shrink: 0;
}

.tw-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(0,207,255,.45);
    background: rgba(0,207,255,.08);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
    box-shadow: 0 0 12px rgba(0,207,255,.3);
}
.tw-avatar img { width:100%; height:100%; object-fit:cover; display:block; }

.tw-info { flex:1; min-width:0; }
.tw-info h4 {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: .88rem; font-weight: 700; color: var(--tw-cyan);
    letter-spacing: 1.5px; line-height: 1.2; margin: 0;
}
.tw-status { display:flex; align-items:center; gap:4px; margin-top:2px; }
.tw-dot {
    width:6px; height:6px; border-radius:50%;
    background: var(--tw-green); box-shadow: 0 0 6px var(--tw-green);
    flex-shrink:0; animation: twDotPulse 2s ease-in-out infinite;
}
@keyframes twDotPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.tw-status-text { font-size:.64rem; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tw-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.tw-btn {
    width:28px; height:28px; border-radius:50%;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.55); font-size:.76rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:var(--tw-tr); touch-action:manipulation;
    -webkit-tap-highlight-color:transparent; line-height:1; font-family:inherit;
}
.tw-btn:hover { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.tw-btn.tw-tts-on { background:rgba(0,207,255,.15); border-color:var(--tw-cyan); color:var(--tw-cyan); }
.tw-btn-close { background:rgba(255,68,68,.07); border-color:rgba(255,68,68,.22); color:rgba(255,100,100,.75); }
.tw-btn-close:hover { background:rgba(255,68,68,.2); border-color:var(--tw-red); color:var(--tw-red); transform:rotate(90deg); }

/* ── Hızlı sorular ── */
.tw-quick {
    padding: 6px 10px; display:flex; gap:5px; flex-shrink:0;
    border-bottom:1px solid rgba(0,207,255,.07); background:rgba(0,0,0,.1);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    flex-wrap: nowrap; /* tek satır yatay scroll */
}
.tw-quick::-webkit-scrollbar { display:none; }
.tw-quick-btn {
    background:rgba(0,207,255,.05); border:1px solid rgba(0,207,255,.2);
    border-radius:14px; color:rgba(0,207,255,.85); font-size:.66rem;
    padding:3px 9px; cursor:pointer; font-family:inherit;
    transition:var(--tw-tr); touch-action:manipulation;
    -webkit-tap-highlight-color:transparent; white-space:nowrap; flex-shrink:0;
}
.tw-quick-btn:hover,.tw-quick-btn:active {
    background:rgba(0,207,255,.15); border-color:var(--tw-cyan); color:#fff;
}

/* ── Mesaj alanı — sabit yükseklik (Kefi: 240px) ── */
.tw-body {
    height: 220px;   /* sabit — flex:1 değil */
    flex-shrink: 0;
    padding: 10px 11px 6px;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 8px;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.tw-body::-webkit-scrollbar { width:3px; }
.tw-body::-webkit-scrollbar-track { background:transparent; }
.tw-body::-webkit-scrollbar-thumb { background:rgba(0,207,255,.2); border-radius:3px; }

/* Mesaj balonları */
.tw-msg { display:flex; flex-direction:column; max-width:88%; animation:twMsgIn .22s ease-out; }
@keyframes twMsgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.tw-msg.tw-user  { align-self:flex-end;  align-items:flex-end;  }
.tw-msg.tw-bot   { align-self:flex-start; align-items:flex-start; }
.tw-msg-row { display:flex; align-items:flex-end; gap:5px; }
.tw-msg.tw-user .tw-msg-row { flex-direction:row-reverse; }
.tw-msg-avatar { width:22px; height:22px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid rgba(0,207,255,.3); }
.tw-msg-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.tw-bubble { padding:7px 11px; font-size:.82rem; line-height:1.5; word-break:break-word; position:relative; }
.tw-msg.tw-bot  .tw-bubble { background:rgba(255,255,255,.04); border:1px solid rgba(0,207,255,.14); color:rgba(255,255,255,.88); border-radius:4px 16px 16px 16px; }
.tw-msg.tw-user .tw-bubble { background:linear-gradient(135deg,rgba(0,207,255,.22),rgba(0,240,200,.12)); border:1px solid rgba(0,207,255,.32); color:rgba(255,255,255,.95); border-radius:16px 4px 16px 16px; }
.tw-msg.tw-error .tw-bubble { background:rgba(255,68,68,.08); border:1px solid rgba(255,68,68,.25); color:#ff9090; border-radius:4px 16px 16px 16px; }
.tw-bubble a { color:var(--tw-cyan); }
.tw-time { font-size:.58rem; color:rgba(255,255,255,.25); margin-top:2px; padding:0 2px; user-select:none; }
.tw-msg.tw-user .tw-time { text-align:right; }
.tw-copy-btn {
    position:absolute; top:3px; right:3px; width:18px; height:18px;
    border-radius:4px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.4); font-size:.55rem; cursor:pointer;
    display:none; align-items:center; justify-content:center; line-height:1;
}
.tw-bubble:hover .tw-copy-btn { display:flex; }

/* Typing */
.tw-typing { display:flex; align-items:center; gap:4px; padding:5px 1px; }
.tw-typing span { width:6px; height:6px; border-radius:50%; background:var(--tw-cyan); display:inline-block; animation:twBounce 1.1s ease-in-out infinite; opacity:.7; }
.tw-typing span:nth-child(2) { animation-delay:.18s; }
.tw-typing span:nth-child(3) { animation-delay:.36s; }
@keyframes twBounce { 0%,80%,100%{transform:scale(.65);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Karakter sayacı */
.tw-char-count { font-size:.58rem; color:rgba(255,255,255,.2); text-align:right; padding:0 11px 3px; flex-shrink:0; min-height:12px; }
.tw-char-count.tw-warn { color:rgba(255,200,0,.6); }
.tw-char-count.tw-over { color:rgba(255,68,68,.85); }

/* ── Input alanı ── */
.tw-input-area {
    padding: 8px 10px;
    padding-bottom: calc(8px + var(--safe-bot));
    border-top: 1px solid rgba(0,207,255,.1);
    display:flex; gap:6px; align-items:center;
    background:rgba(0,0,0,.22); flex-shrink:0;
}
.tw-input {
    flex:1; min-width:0; padding:7px 11px;
    background:rgba(255,255,255,.04); border:1px solid rgba(0,207,255,.18);
    border-radius:18px; color:#fff;
    font-size: 16px; /* iOS zoom önleme — 16px altı yakınlaştırır */
    font-family:'Exo 2', system-ui, sans-serif;
    outline:none; -webkit-appearance:none; appearance:none;
}
.tw-input:focus { border-color:rgba(0,207,255,.5); background:rgba(0,207,255,.03); }
.tw-input::placeholder { color:rgba(255,255,255,.3); font-size:.8rem; }

.tw-mic-btn {
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,207,255,.07); border:1px solid rgba(0,207,255,.22);
    color:var(--tw-cyan); font-size:.85rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:var(--tw-tr); touch-action:manipulation; font-family:inherit;
}
.tw-mic-btn:hover { background:rgba(0,207,255,.15); }
.tw-mic-btn.tw-recording { background:rgba(255,50,50,.15); border-color:#ff5050; color:#ff5050; animation:twRecordPulse .8s ease-in-out infinite alternate; }
@keyframes twRecordPulse { from{box-shadow:0 0 6px rgba(255,50,50,.3)} to{box-shadow:0 0 18px rgba(255,50,50,.6)} }

.tw-send-btn {
    width:34px; height:34px;
    background:linear-gradient(135deg,var(--tw-cyan),var(--tw-cyan2));
    border:none; border-radius:50%; color:#071942;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:var(--tw-tr); touch-action:manipulation;
}
.tw-send-btn:hover:not(:disabled) { transform:scale(1.1); box-shadow:0 0 16px rgba(0,207,255,.5); }
.tw-send-btn:active:not(:disabled) { transform:scale(0.93); }
.tw-send-btn:disabled { opacity:.35; cursor:not-allowed; }
.tw-send-btn svg { pointer-events:none; }

/* ================================================================
   Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .tork-chat-window,.tw-msg,.tork-toggle-btn { animation:none !important; transition:none !important; }
    .tw-dot,.tw-typing span { animation:none !important; }
}

/* ================================================================
   MOBİL CHAT — ANEKS MEDYA
   Belge önerisine göre: translateY açılış animasyonu
   Selektörler tork-widget.css'e uyarlandı
   ================================================================ */
@media (max-width: 768px) {

    /* FAB — küçük ve sabit köşe */
    .tork-toggle-btn {
        width: 52px !important;
        height: 52px !important;
        bottom: 16px !important;
        right: 16px !important;
        z-index: 10501 !important;
    }

    /* Chat penceresi: popup değil, aşağıdan yukarı kayan panel */
    .tork-chat-window {
        position: fixed !important;
        /* JS tarafından set edilecek bottom yerine fixed konum */
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 90px !important; /* FAB'ın üstünde */
        width: auto !important;
        max-width: none !important;

        /* Yükseklik: viewport - navigation - FAB alanı */
        max-height: calc(100svh - 170px) !important;

        /* Tam opak arka plan */
        background: rgba(5, 8, 20, 1.0) !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;

        border-radius: 16px !important;
        border: 1.5px solid rgba(0, 207, 255, 0.3) !important;

        /* scale yerine translateY animasyonu — daha doğal mobil his */
        transform-origin: bottom center !important;
        z-index: 10500 !important;
    }

    /* Mesaj alanı: esnek, klavyeye uyumlu */
    .tw-body {
        height: auto !important;
        flex: 1 1 0 !important;
        min-height: 120px !important;
        max-height: none !important;
    }

    /* Input: alt safe area */
    .tw-input-area {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hızlı sorular: grid, 2 sütun */
    .tw-quick {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
    }
    .tw-quick-btn {
        flex: 1 1 auto !important;
    }
}