/* VCD AI Chat Widget Styles */
:root {
    --vcd-blue:   #4fc3f7;
    --vcd-purple: #9b59ff;
    --vcd-pink:   #f472b6;
    --vcd-dark:   #0d0d1a;
    --vcd-dark2:  #12122a;
    --vcd-dark3:  #1a1a35;
    --vcd-border: rgba(100, 80, 255, 0.25);
    --vcd-grad:      linear-gradient(135deg, #4fc3f7 0%, #9b59ff 50%, #f472b6 100%);
    --vcd-grad-text: linear-gradient(90deg,  #4fc3f7 0%, #9b59ff 50%, #f472b6 100%);
}

#vcd-ai-widget {
    position: fixed;
    z-index: 99999;
    font-family: -apple-system, 'Segoe UI', sans-serif;
}

#vcd-ai-widget.vcd-position-bottom-right { bottom: 24px; right: 24px; }
#vcd-ai-widget.vcd-position-bottom-left  { bottom: 24px; left:  24px; }

/* ── Toggle Button ── */
#vcd-ai-toggle {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--vcd-grad);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 24px rgba(155,89,255,0.5), 0 0 0 0 rgba(155,89,255,0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    animation: vcd-pulse 2.5s infinite;
    position: relative; z-index: 2;
}
#vcd-ai-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 30px rgba(244,114,182,0.6), 0 0 0 8px rgba(155,89,255,0.1);
    animation: none;
}
@keyframes vcd-pulse {
    0%   { box-shadow: 0 4px 24px rgba(155,89,255,0.5), 0 0 0 0   rgba(155,89,255,0.4); }
    70%  { box-shadow: 0 4px 24px rgba(155,89,255,0.3), 0 0 0 14px rgba(155,89,255,0); }
    100% { box-shadow: 0 4px 24px rgba(155,89,255,0.5), 0 0 0 0   rgba(155,89,255,0); }
}

.vcd-toggle-icon { color:#fff; display:none; width:26px; height:26px; }
.vcd-toggle-icon svg { width:100%; height:100%; }
.vcd-toggle-icon.vcd-icon-open  { display:flex; }
.vcd-toggle-icon.vcd-icon-close { display:none; }
#vcd-ai-widget.vcd-open .vcd-toggle-icon.vcd-icon-open  { display:none; }
#vcd-ai-widget.vcd-open .vcd-toggle-icon.vcd-icon-close { display:flex; }

/* ── Chat Window ── */
#vcd-ai-chat-window {
    position: absolute;
    bottom: 74px;
    width: 360px;
    /* Sabit yükseklik yerine max-height: mobil klavye açıldığında taşmaz */
    height: 520px;
    max-height: calc(100dvh - 110px);
    background: var(--vcd-dark);
    border-radius: 20px;
    border: 1px solid var(--vcd-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,89,255,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: vcd-slide-up 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.vcd-position-bottom-right #vcd-ai-chat-window { right:0; }
.vcd-position-bottom-left  #vcd-ai-chat-window { left:0; transform-origin: bottom left; }
#vcd-ai-widget.vcd-open #vcd-ai-chat-window { display:flex; }

@keyframes vcd-slide-up {
    from { opacity:0; transform: scale(0.85) translateY(20px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}

/* ── Header ── */
#vcd-ai-header {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(79,195,247,0.12) 0%, rgba(155,89,255,0.12) 50%, rgba(244,114,182,0.12) 100%);
    border-bottom: 1px solid var(--vcd-border);
    flex-shrink: 0;
}
.vcd-header-info { display:flex; align-items:center; gap:12px; }

/* ── AI ORB Avatar ── */
.vcd-avatar {
    width:40px; height:40px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    position:relative;
    overflow:visible;
}

.vcd-avatar-orb {
    width:34px; height:34px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #a78bfa 0%, #6d28d9 40%, #1e1b4b 100%);
    box-shadow:
        0 0 12px rgba(139,92,246,0.8),
        0 0 28px rgba(139,92,246,0.4),
        inset 0 1px 2px rgba(255,255,255,0.25);
    animation: vcd-orb-breathe 3s ease-in-out infinite;
    position:relative;
}

/* Dönen halka */
.vcd-avatar-orb::before {
    content:'';
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color: #4fc3f7;
    border-right-color: #9b59ff;
    animation: vcd-orb-spin 2.4s linear infinite;
}

/* Parlama noktası */
.vcd-avatar-orb::after {
    content:'';
    position:absolute;
    top:6px; left:8px;
    width:8px; height:5px;
    border-radius:50%;
    background: rgba(255,255,255,0.55);
    filter:blur(1px);
}

@keyframes vcd-orb-breathe {
    0%,100% { transform:scale(1);    box-shadow: 0 0 12px rgba(139,92,246,0.8), 0 0 28px rgba(139,92,246,0.4); }
    50%      { transform:scale(1.08); box-shadow: 0 0 20px rgba(167,139,250,1),  0 0 44px rgba(139,92,246,0.6); }
}
@keyframes vcd-orb-spin {
    to { transform:rotate(360deg); }
}

.vcd-header-text { display:flex; flex-direction:column; gap:2px; }
.vcd-bot-name {
    font-size:15px; font-weight:700;
    background: var(--vcd-grad-text);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:0.3px;
}
.vcd-status { font-size:11px; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:5px; }
.vcd-dot {
    width:7px; height:7px; border-radius:50%;
    background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,0.8);
    animation:vcd-blink 2s infinite;
}
@keyframes vcd-blink { 0%,100%{opacity:1} 50%{opacity:0.5} }

.vcd-clear-btn {
    background:none; border:1px solid var(--vcd-border); border-radius:8px;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:rgba(255,255,255,0.4); transition:all 0.2s; padding:0;
}
.vcd-clear-btn:hover { color:#fff; border-color:rgba(155,89,255,0.5); background:rgba(155,89,255,0.15); }
.vcd-clear-btn svg { width:15px; height:15px; }

/* ── Messages ── */
#vcd-ai-messages {
    flex:1; overflow-y:auto;
    padding:16px;
    display:flex; flex-direction:column; gap:12px;
    scroll-behavior:smooth;
    /* Mobil: içerik scroll'u widget dışına taşmasın */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
#vcd-ai-messages::-webkit-scrollbar       { width:4px; }
#vcd-ai-messages::-webkit-scrollbar-track { background:transparent; }
#vcd-ai-messages::-webkit-scrollbar-thumb { background:rgba(155,89,255,0.3); border-radius:2px; }

.vcd-message {
    display:flex; gap:8px;
    animation:vcd-msg-in 0.25s ease forwards;
    opacity:0; transform:translateY(6px);
}
@keyframes vcd-msg-in { to { opacity:1; transform:translateY(0); } }

.vcd-message.vcd-user { flex-direction:row-reverse; }

.vcd-msg-bubble {
    max-width:78%; padding:10px 14px; border-radius:16px;
    font-size:13.5px; line-height:1.55; word-break:break-word;
}
.vcd-message.vcd-bot .vcd-msg-bubble {
    background:var(--vcd-dark3); color:rgba(255,255,255,0.9);
    border:1px solid var(--vcd-border); border-bottom-left-radius:4px;
}
.vcd-message.vcd-user .vcd-msg-bubble {
    background:var(--vcd-grad); color:#fff;
    border-bottom-right-radius:4px;
    box-shadow:0 4px 14px rgba(155,89,255,0.3);
}

/* Typing */
.vcd-typing .vcd-msg-bubble { padding:12px 16px; display:flex; gap:5px; align-items:center; }
.vcd-typing-dot { width:7px; height:7px; border-radius:50%; background:var(--vcd-purple); animation:vcd-typing 1.2s infinite; }
.vcd-typing-dot:nth-child(2) { background:#4fc3f7; animation-delay:0.2s; }
.vcd-typing-dot:nth-child(3) { background:var(--vcd-pink); animation-delay:0.4s; }
@keyframes vcd-typing {
    0%,60%,100% { transform:translateY(0);   opacity:0.4; }
    30%          { transform:translateY(-6px); opacity:1; }
}

.vcd-error .vcd-msg-bubble {
    background:rgba(239,68,68,0.15)  !important;
    border-color:rgba(239,68,68,0.3) !important;
    color:#fca5a5 !important;
}

/* ── Input Area ── */
#vcd-ai-input-area {
    padding:12px 14px 10px;
    border-top:1px solid var(--vcd-border);
    background:var(--vcd-dark2);
    flex-shrink:0;
}
.vcd-input-wrapper {
    display:flex; align-items:flex-end; gap:8px;
    background:var(--vcd-dark3); border:1px solid var(--vcd-border);
    border-radius:14px; padding:8px 8px 8px 14px; transition:border-color 0.2s;
}
.vcd-input-wrapper:focus-within { border-color:rgba(155,89,255,0.6); box-shadow:0 0 0 3px rgba(155,89,255,0.1); }

#vcd-ai-input {
    flex:1; background:none; border:none; outline:none;
    color:rgba(255,255,255,0.9); font-size:13.5px; line-height:1.5;
    resize:none; max-height:100px; font-family:inherit; padding:0;
}
#vcd-ai-input::placeholder { color:rgba(255,255,255,0.3); }

#vcd-ai-send {
    width:36px; height:36px; border-radius:10px; border:none;
    background:var(--vcd-grad); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:opacity 0.2s, transform 0.15s;
}
#vcd-ai-send:hover  { opacity:0.85; transform:scale(1.05); }
#vcd-ai-send:active { transform:scale(0.95); }
#vcd-ai-send:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
#vcd-ai-send svg { width:16px; height:16px; }

.vcd-powered { text-align:center; font-size:10px; color:rgba(255,255,255,0.2); margin:7px 0 0; padding:0; }
.vcd-powered strong { background:var(--vcd-grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Mobile ── */
@media (max-width: 480px) {
    #vcd-ai-chat-window {
        width: calc(100vw - 32px);
        /* dvh: sanal klavye dahil gerçek görünür alan */
        height: calc(100dvh - 110px);
        max-height: calc(100dvh - 110px);
        bottom: 70px;
    }
    /* Klavye açıkken widget'ın altına kaymaması için */
    #vcd-ai-widget.vcd-open {
        bottom: env(safe-area-inset-bottom, 16px);
    }
    .vcd-position-bottom-right #vcd-ai-chat-window { right:0; }
    .vcd-position-bottom-left  #vcd-ai-chat-window { left:0; }
}

/* ── Inline Search Widget ── */
.vcd-inline-search {
    width:100%; max-width:680px; margin:0 auto;
    font-family:-apple-system,'Segoe UI',sans-serif;
}
.vcd-inline-wrapper {
    display:flex; align-items:center;
    background:#12122a; border:1.5px solid rgba(100,80,255,0.35);
    border-radius:50px; padding:8px 8px 8px 16px;
    transition:border-color 0.2s, box-shadow 0.2s;
    box-shadow:0 4px 24px rgba(155,89,255,0.12);
}
.vcd-inline-wrapper:focus-within {
    border-color:rgba(155,89,255,0.7);
    box-shadow:0 0 0 4px rgba(155,89,255,0.12), 0 4px 24px rgba(155,89,255,0.2);
}

/* ── Inline AI Orb ── */
.vcd-inline-orb-wrap {
    width:30px; height:30px; flex-shrink:0; margin-right:10px;
    display:flex; align-items:center; justify-content:center;
}
.vcd-inline-orb {
    width:22px; height:22px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #a78bfa 0%, #6d28d9 45%, #1e1b4b 100%);
    box-shadow: 0 0 8px rgba(139,92,246,0.8), 0 0 18px rgba(139,92,246,0.4);
    animation:vcd-orb-breathe 3s ease-in-out infinite;
    position:relative;
}
.vcd-inline-orb::before {
    content:'';
    position:absolute; inset:-4px; border-radius:50%;
    border:1.5px solid transparent;
    border-top-color:#4fc3f7; border-right-color:#9b59ff;
    animation:vcd-orb-spin 2.4s linear infinite;
}
.vcd-inline-orb::after {
    content:'';
    position:absolute; top:4px; left:5px;
    width:6px; height:4px; border-radius:50%;
    background:rgba(255,255,255,0.5); filter:blur(1px);
}

.vcd-inline-input {
    flex:1; background:none; border:none; outline:none;
    color:rgba(255,255,255,0.9); font-size:15px; line-height:1.5;
    padding:0; font-family:inherit;
}
.vcd-inline-input::placeholder { color:rgba(255,255,255,0.3); }

.vcd-inline-send {
    width:40px; height:40px; border-radius:50%; border:none;
    background:var(--vcd-grad); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-left:8px; transition:opacity 0.2s, transform 0.15s;
}
.vcd-inline-send:hover  { opacity:0.85; transform:scale(1.06); }
.vcd-inline-send:active { transform:scale(0.95); }
.vcd-inline-send:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.vcd-inline-send svg { width:17px; height:17px; }

.vcd-inline-response {
    margin-top:14px; background:#12122a;
    border:1px solid rgba(100,80,255,0.25); border-radius:16px;
    overflow:hidden; animation:vcd-slide-up 0.25s ease forwards;
}
.vcd-inline-response-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px;
    background:linear-gradient(135deg,rgba(79,195,247,0.10) 0%,rgba(155,89,255,0.10) 50%,rgba(244,114,182,0.10) 100%);
    border-bottom:1px solid rgba(100,80,255,0.18);
}
.vcd-inline-bot-name {
    font-size:13px; font-weight:700;
    background:var(--vcd-grad-text);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.vcd-inline-close { background:none; border:none; color:rgba(255,255,255,0.4); cursor:pointer; font-size:20px; line-height:1; padding:0 2px; transition:color 0.2s; }
.vcd-inline-close:hover { color:#fff; }
.vcd-inline-answer { padding:14px 16px; font-size:14px; line-height:1.65; color:rgba(255,255,255,0.88); min-height:40px; }
.vcd-inline-answer.vcd-inline-loading { display:flex; gap:6px; align-items:center; padding:18px 16px; }
.vcd-inline-answer.vcd-inline-error   { color:#fca5a5; }

.vcd-inline-dot { width:8px; height:8px; border-radius:50%; background:#9b59ff; animation:vcd-typing 1.2s infinite; }
.vcd-inline-dot:nth-child(2) { background:#4fc3f7; animation-delay:0.2s; }
.vcd-inline-dot:nth-child(3) { background:#f472b6; animation-delay:0.4s; }

@media (max-width:600px) {
    .vcd-inline-input   { font-size:14px; }
    .vcd-inline-wrapper { padding:6px 6px 6px 12px; }
}