/* ═══════════════════════════════════════════════════
   VİZZİ WIDGET CSS — Vizyon Göz Hastanesi
   Tüm stiller #vizzi-widget altında scope'landı.
   ═══════════════════════════════════════════════════ */

#vizzi-widget {
  --vz-accent:       #6a0dad;
  --vz-glow:         rgba(106,13,173,.22);
  --vz-gold:         #d4af37;
  --vz-gold-lt:      #f9e295;
  --vz-gold-grad:    linear-gradient(135deg,#d4af37 0%,#f9e295 50%,#b8860b 100%);
  --vz-glass:        rgba(255,255,255,.97);
  --vz-text:         #1a1a2e;
  --vz-muted:        #999;
  --vz-bot-bg:       #f8f5ff;
  --vz-bot-border:   rgba(106,13,173,.07);
  --vz-online:       #22c55e;
  --vz-user-bg:      linear-gradient(135deg,#6a0dad,#4a0080);
  --vz-input-bg:     #ffffff;
  --vz-input-border: rgba(106,13,173,.12);
  --vz-header-bg:    rgba(255,255,255,.92);
  --vz-spd:          .35s;
  font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Dark theme */
#vizzi-widget[data-theme="dark"] {
  --vz-glass:        rgba(16,12,26,.98);
  --vz-text:         #f0eeff;
  --vz-muted:        #666;
  --vz-bot-bg:       #1e1830;
  --vz-bot-border:   rgba(106,13,173,.2);
  --vz-input-bg:     #1e1830;
  --vz-input-border: rgba(106,13,173,.3);
  --vz-header-bg:    rgba(16,12,26,.95);
}

/* Scrollbar */
#vizzi-widget .chat-box::-webkit-scrollbar { width:4px; }
#vizzi-widget .chat-box::-webkit-scrollbar-track { background:transparent; }
#vizzi-widget .chat-box::-webkit-scrollbar-thumb { background:rgba(106,13,173,.25); border-radius:10px; }

/* Reset */
#vizzi-widget *, #vizzi-widget *::before, #vizzi-widget *::after { box-sizing:border-box; }

/* ── LAUNCHER ── */
.vizzi-launcher {
  position:fixed; bottom:90px; left:8px;
  width:110px; height:110px;
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; z-index:1002;
  transition:all .5s cubic-bezier(.19,1,.22,1);
  filter:drop-shadow(0 12px 30px var(--vz-glow));
}
.vizzi-launcher img { width:100%; height:auto; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.vizzi-launcher:hover img { transform:scale(1.12) rotate(6deg); }
.vizzi-launcher.chat-open { bottom:18px; left:18px; width:52px; height:52px; filter:drop-shadow(0 4px 12px var(--vz-glow)); }
.vizzi-launcher.chat-open:hover img { transform:scale(1.08); }

.close-badge {
  display:none; position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; background:var(--vz-gold-grad);
  border-radius:50%; font-size:13px; font-weight:900; color:#2a1000;
  align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(212,175,55,.5);
}
.vizzi-launcher.chat-open .close-badge { display:flex; }

/* ── BUBBLE ── */
.vizzi-bubble {
  position:absolute; top:-50px; left:4px;
  background:#fff; color:var(--vz-accent);
  padding:8px 15px; border-radius:50px;
  font-size:12.5px; font-weight:700;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(106,13,173,.18), 0 0 0 1px rgba(106,13,173,.08);
  animation:vzbf 3.5s ease-in-out infinite; z-index:1003;
}
.vizzi-bubble::after {
  content:''; position:absolute; bottom:-6px; left:18px;
  width:0; height:0;
  border-left:6px solid transparent; border-right:3px solid transparent; border-top:7px solid #fff;
}
@keyframes vzbf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.bubble-hidden { display:none !important; }

/* ── CHAT CONTAINER ── */
.chat-container {
  position:fixed; bottom:32px; left:32px;
  width:390px; max-width:calc(100vw - 64px);
  height:660px; max-height:82vh;
  background:var(--vz-glass);
  border-radius:28px;
  box-shadow:0 40px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(106,13,173,.08), inset 0 1px 0 rgba(255,255,255,.5);
  display:none; flex-direction:column; z-index:1001; overflow:hidden;
  backdrop-filter:blur(40px) saturate(200%); -webkit-backdrop-filter:blur(40px) saturate(200%);
  animation:vzpop .5s cubic-bezier(.34,1.56,.64,1);
  transition:background var(--vz-spd);
  direction:ltr;
}
@keyframes vzpop { from{opacity:0;transform:scale(.88) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }

@media (max-width:500px) {
  .chat-container { bottom:0!important; left:0!important; width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; border-radius:0!important; }
  .vizzi-launcher.chat-open { bottom:12px!important; left:12px!important; }
}

/* ── HEADER ── */
.chat-header {
  padding:16px 16px 12px;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--vz-header-bg);
  border-bottom:1px solid rgba(106,13,173,.06);
  transition:background var(--vz-spd);
  position:relative; flex-shrink:0;
}
.header-left { display:flex; align-items:center; gap:11px; }
.header-avatar {
  width:42px; height:42px; border-radius:13px; overflow:hidden;
  background:linear-gradient(135deg,#6a0dad,#4a0080);
  box-shadow:0 6px 20px var(--vz-glow); flex-shrink:0;
}
.header-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.header-info h2 {
  font-size:16px; font-weight:900; letter-spacing:-.4px;
  background:linear-gradient(135deg,var(--vz-accent),var(--vz-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1.1; margin:0; padding:0;
}
.status-area {
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:var(--vz-muted); font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; margin-top:2px;
}
.status-dot {
  width:7px; height:7px; background:var(--vz-online); border-radius:50%;
  animation:vzpulse 2s infinite; flex-shrink:0;
}
@keyframes vzpulse { 0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.2)} 50%{box-shadow:0 0 0 4px rgba(34,197,94,.12)} }
.header-actions { display:flex; align-items:center; gap:5px; }
.icon-btn {
  width:32px; height:32px; border-radius:10px;
  background:rgba(106,13,173,.07);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--vz-muted); padding:0;
}
.icon-btn svg { width:16px; height:16px; stroke:currentColor; }
.icon-btn:hover { background:rgba(106,13,173,.14); transform:scale(1.06); color:var(--vz-accent); }
.close-btn-header:hover { transform:rotate(90deg) scale(1.06)!important; }

/* ── LANG MENU ── */
.lang-menu {
  position:absolute; top:64px; right:16px;
  background:var(--vz-glass); border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.15), 0 0 0 1px rgba(106,13,173,.08);
  padding:6px; z-index:200; display:none; flex-direction:column; gap:3px;
  backdrop-filter:blur(20px);
  animation:vzmpop .2s cubic-bezier(.34,1.56,.64,1);
}
.lang-menu.open { display:flex; }
@keyframes vzmpop { from{opacity:0;transform:scale(.9) translateY(-8px)} to{opacity:1;transform:scale(1) translateY(0)} }
.lang-option {
  display:flex; align-items:center; gap:9px; padding:8px 13px;
  border-radius:9px; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--vz-text); transition:background .15s; white-space:nowrap;
}
.lang-option:hover { background:rgba(106,13,173,.08); }
.lang-option.active { background:rgba(106,13,173,.1); color:var(--vz-accent); }

/* ── KARŞILAMA EKRANI ── */
.vizzi-welcome {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 24px; overflow-y:auto;
  background:radial-gradient(ellipse at 50% 0%, rgba(106,13,173,.06) 0, transparent 70%);
}
.welcome-mascot {
  width:84px; height:84px; margin-bottom:10px;
  filter:drop-shadow(0 10px 20px rgba(106,13,173,.25));
  animation:vzmbob 3s ease-in-out infinite;
}
@keyframes vzmbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.welcome-title {
  font-size:18px; font-weight:900;
  background:linear-gradient(135deg,var(--vz-accent),var(--vz-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:5px; text-align:center;
}
.welcome-subtitle {
  font-size:12.5px; color:var(--vz-muted); text-align:center;
  margin-bottom:18px; line-height:1.55; max-width:250px;
}
.welcome-form { width:100%; display:flex; flex-direction:column; gap:10px; }
.welcome-field { display:flex; flex-direction:column; gap:5px; }
.welcome-label { font-size:10.5px; font-weight:700; color:var(--vz-accent); letter-spacing:.6px; text-transform:uppercase; }
.welcome-input {
  background:var(--vz-input-bg); border:1.5px solid var(--vz-input-border);
  border-radius:12px; padding:10px 13px; font-size:14px;
  font-family:inherit; color:var(--vz-text);
  outline:none; transition:border-color .2s, box-shadow .2s; width:100%;
}
.welcome-input:focus { border-color:rgba(106,13,173,.4); box-shadow:0 0 0 3px rgba(106,13,173,.08); }
.welcome-input::placeholder { color:rgba(106,13,173,.25); }
.welcome-select {
  background:var(--vz-input-bg); border:1.5px solid var(--vz-input-border);
  border-radius:12px; padding:10px 38px 10px 13px; font-size:14px;
  font-family:inherit; color:var(--vz-text);
  outline:none; width:100%; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a0dad' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.welcome-select:focus { border-color:rgba(106,13,173,.4); box-shadow:0 0 0 3px rgba(106,13,173,.08); }
.welcome-start-btn {
  padding:12px; border-radius:13px;
  background:linear-gradient(135deg,var(--vz-accent),#9b2de8);
  color:#fff; border:none; cursor:pointer;
  font-size:14px; font-weight:700; font-family:inherit;
  box-shadow:0 8px 24px rgba(106,13,173,.35);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.welcome-start-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(106,13,173,.45); }
.welcome-skip {
  font-size:12px; color:var(--vz-muted); text-align:center;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.welcome-skip:hover { color:var(--vz-accent); }

/* ── CHAT BOX ── */
.chat-box {
  flex:1; padding:14px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(106,13,173,.03) 0, transparent 60%),
    radial-gradient(ellipse at 90% 90%, rgba(212,175,55,.03) 0, transparent 60%);
  scroll-behavior:smooth; min-height:0;
}
.vz-msg-wrap {
  display:flex; align-items:flex-end; gap:8px; max-width:90%;
  animation:vzmsg .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vzmsg { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.vz-bot-wrap   { align-self:flex-start; }
.vz-user-wrap  { align-self:flex-end; flex-direction:row-reverse; }
.vz-msg-avatar { width:28px; height:28px; border-radius:9px; overflow:hidden; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,.1); }
.vz-msg-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.vz-msg-content { display:flex; flex-direction:column; }
.vz-bot-wrap  .vz-msg-content { align-items:flex-start; }
.vz-user-wrap .vz-msg-content { align-items:flex-end; }
.vz-message {
  padding:11px 14px; font-size:13.5px; line-height:1.7;
  color:var(--vz-text); transition:background var(--vz-spd), color var(--vz-spd);
  text-align:left !important;
}
.vz-message p { margin-bottom:.35em; color:inherit; text-align:left !important; }
.vz-message p:last-child { margin-bottom:0; }
.vz-message strong { font-weight:700; }
.vz-message ul, .vz-message ol { padding-left:1.2em; margin:.35em 0; }
.vz-message li { margin-bottom:.2em; }
.vz-bot-msg {
  background:var(--vz-bot-bg); border-radius:16px 16px 16px 3px;
  box-shadow:0 3px 14px rgba(106,13,173,.06);
  border:1px solid var(--vz-bot-border);
}
.vz-user-msg {
  background:var(--vz-user-bg); color:#fff;
  border-radius:16px 16px 3px 16px;
  box-shadow:0 6px 20px var(--vz-glow);
}
.vz-user-msg p { color:#fff; }
.vz-msg-time { font-size:10px; color:var(--vz-muted); margin-top:3px; font-weight:600; padding:0 3px; }

/* ── TYPING ── */
.vz-typing {
  display:flex; align-items:center; gap:5px; padding:12px 14px;
  background:var(--vz-bot-bg); border-radius:16px 16px 16px 3px;
  border:1px solid var(--vz-bot-border); box-shadow:0 3px 14px rgba(106,13,173,.06);
  width:fit-content;
}
.vz-dot {
  width:7px; height:7px; background:var(--vz-accent); border-radius:50%; opacity:.5;
  animation:vzdot 1.4s infinite ease-in-out both;
}
.vz-dot:nth-child(1){animation-delay:-.32s}
.vz-dot:nth-child(2){animation-delay:-.16s}
@keyframes vzdot { 0%,80%,100%{transform:scale(.5);opacity:.3} 40%{transform:scale(1);opacity:1} }

/* ── INPUT ── */
.vizzi-input-wrapper { padding:4px 14px 14px; flex-shrink:0; }
.vizzi-input-area {
  background:var(--vz-input-bg); padding:5px 5px 5px 13px;
  display:flex; gap:7px; align-items:center; border-radius:16px;
  border:1.5px solid var(--vz-input-border);
  box-shadow:0 4px 20px rgba(106,13,173,.07), inset 0 1px 0 rgba(255,255,255,.5);
  transition:border-color .2s, box-shadow .2s;
}
.vizzi-input-area:focus-within { border-color:rgba(106,13,173,.4); box-shadow:0 4px 24px var(--vz-glow); }
.vizzi-img-btn {
  width:34px; height:34px; border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--vz-accent); cursor:pointer; flex-shrink:0;
  transition:all .2s; border:1px solid rgba(106,13,173,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.vizzi-img-btn svg { width:16px; height:16px; stroke:currentColor; }
.vizzi-img-btn:hover { background:#f5f0ff; transform:scale(1.06); }
.vizzi-input-box {
  flex:1; border:none; background:transparent; outline:none;
  font-size:14px; font-family:inherit; color:var(--vz-text); padding:6px 0; min-width:0;
}
.vizzi-input-box::placeholder { color:rgba(106,13,173,.28); }
.vizzi-send-btn {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--vz-accent),#9b2de8);
  border-radius:12px; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(106,13,173,.4);
  transition:all .2s cubic-bezier(.34,1.56,.64,1); flex-shrink:0;
}
.vizzi-send-btn svg { width:16px; height:16px; stroke:currentColor; }
.vizzi-send-btn:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(106,13,173,.5); }
.vizzi-send-btn:active { transform:scale(.93); }
.vizzi-send-btn:disabled { opacity:.5; transform:none; cursor:not-allowed; }
.vizzi-legal {
  font-size:10px; color:var(--vz-muted); text-align:center;
  padding:0 18px 12px; font-weight:500; opacity:.7; flex-shrink:0;
}