/* ============================================================
   WATAM — AI CHATBOT (site tasarımına uygun)
   Cam efekt + gradyan + mobil uyumlu
   ============================================================ */
#wai-fab{
  position:fixed;
  right:22px;bottom:22px;
  z-index:500;
  width:60px;height:60px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(120deg,#8b5cf6 0%,#f59e0b 55%,#22d3ee 100%);
  background-size:200% 200%;
  animation:waiGrad 6s ease infinite;
  color:#fff;font-size:1.55rem;font-weight:900;
  cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 12px 36px rgba(245,158,11,.45),0 0 0 6px rgba(139,92,246,.12);
  transition:transform .3s,box-shadow .3s;
  font-family:inherit;
}
@keyframes waiGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#wai-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 48px rgba(245,158,11,.6),0 0 0 8px rgba(139,92,246,.16)}
#wai-fab .wai-dot{
  position:absolute;top:2px;right:2px;
  width:13px;height:13px;border-radius:50%;
  background:#34d399;border:2px solid #050510;
  box-shadow:0 0 10px #34d399;
  animation:waiBlink 1.8s ease infinite;
}
@keyframes waiBlink{0%,100%{opacity:1}50%{opacity:.4}}
#wai-fab.open{font-size:1.3rem}

#wai-panel{
  position:fixed;
  right:22px;bottom:94px;
  z-index:500;
  width:min(384px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 140px));
  min-height:420px;
  display:flex;flex-direction:column;
  background:rgba(10,10,28,.82);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(139,92,246,.18);
  opacity:0;visibility:hidden;
  transform:translateY(24px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),visibility .35s;
}
#wai-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.wai-head{
  position:relative;
  padding:16px 18px;
  background:linear-gradient(140deg,rgba(139,92,246,.22),transparent 45%,rgba(245,158,11,.18));
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;gap:12px;
}
.wai-head::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(120deg,#8b5cf6,#f59e0b,#22d3ee);background-size:200% 200%;animation:waiGrad 4s ease infinite}
.wai-ava{
  width:42px;height:42px;border-radius:13px;flex:0 0 42px;
  background:linear-gradient(120deg,#8b5cf6,#f59e0b,#22d3ee);
  display:grid;place-items:center;font-weight:900;font-size:1.2rem;color:#fff;
  box-shadow:0 0 18px rgba(245,158,11,.5);
}
.wai-head-txt{flex:1;min-width:0}
.wai-head-txt b{display:block;font-size:.92rem;letter-spacing:.02em}
.wai-head-txt span{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#6ee7b7}
.wai-head-txt span::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:waiBlink 1.6s ease infinite}
.wai-model{
  font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;cursor:pointer;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#6ee7b7;
}
.wai-gear{
  width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#fff;font-size:.95rem;cursor:pointer;
  transition:background .3s,transform .3s;
}
.wai-gear:hover{background:rgba(255,255,255,.12);transform:rotate(30deg)}
.wai-close{
  width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#fff;font-size:1rem;cursor:pointer;
  transition:background .3s;
}
.wai-close:hover{background:rgba(255,255,255,.12)}

#wai-msgs{
  flex:1;overflow-y:auto;
  padding:16px 14px;
  display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(245,158,11,.5) transparent;
}
#wai-msgs::-webkit-scrollbar{width:6px}
#wai-msgs::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8b5cf6,#f59e0b);border-radius:8px}
.wai-msg{max-width:86%;padding:11px 14px;border-radius:15px;font-size:.86rem;line-height:1.6;word-break:break-word}
.wai-msg.bot{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-bottom-left-radius:5px;color:#f4f5ff;
}
.wai-msg.user{
  align-self:flex-end;
  background:linear-gradient(120deg,rgba(139,92,246,.85),rgba(245,158,11,.85));
  border-bottom-right-radius:5px;color:#fff;font-weight:500;
}
.wai-msg.bot a{
  color:#22d3ee;text-decoration:underline;text-underline-offset:2px;font-weight:600;
}
.wai-msg.bot a:hover{color:#fbbf24}
.wai-links{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.wai-link-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border-radius:11px;font-size:.78rem;font-weight:700;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.32);color:#fcd34d;
  text-decoration:none;transition:background .3s,transform .3s;
}
.wai-link-btn:hover{background:rgba(245,158,11,.2);transform:translateX(3px)}
.wai-link-btn.live{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.4);color:#6ee7b7}
.wai-src{
  margin-top:8px;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(120deg,#8b5cf6,#f59e0b,#22d3ee);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.wai-set{
  position:absolute;inset:0;z-index:5;
  background:rgba(5,5,16,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.wai-set-card{
  width:100%;background:rgba(14,14,34,.95);
  border:1px solid rgba(245,158,11,.35);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.wai-set-card b{font-size:.9rem}
.wai-set-card p{font-size:.78rem;color:#9b9fb5;line-height:1.6}
.wai-set-card p b{color:#fcd34d}
.wai-set-card input{
  padding:11px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:.8rem;outline:none;
}
.wai-set-card input:focus{border-color:rgba(245,158,11,.7);box-shadow:0 0 0 4px rgba(245,158,11,.15)}
.wai-set-row{display:flex;gap:8px}
.wai-set-row button{
  flex:1;padding:10px;border-radius:11px;border:none;cursor:pointer;
  background:linear-gradient(120deg,#8b5cf6,#f59e0b);color:#fff;
  font-family:inherit;font-size:.8rem;font-weight:700;
}
.wai-set-row button.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.wai-set-hint{font-size:.66rem;color:#62677f;letter-spacing:.04em}
.wai-typing{display:inline-flex;gap:5px;padding:4px 2px}
.wai-typing i{width:7px;height:7px;border-radius:50%;background:#f59e0b;animation:waiTp 1.2s ease infinite}
.wai-typing i:nth-child(2){animation-delay:.15s;background:#8b5cf6}
.wai-typing i:nth-child(3){animation-delay:.3s;background:#22d3ee}
@keyframes waiTp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}

.wai-suggest{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 14px 10px;
}
.wai-suggest button{
  font-family:inherit;font-size:.72rem;font-weight:700;
  padding:7px 13px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#cbd0e4;
  transition:border-color .3s,background .3s,color .3s;
}
.wai-suggest button:hover{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.12);color:#fff}

.wai-input{
  display:flex;gap:9px;padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(6,6,18,.5);
}
.wai-input input{
  flex:1;min-width:0;
  padding:12px 17px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#fff;
  font-family:inherit;font-size:.85rem;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.wai-input input::placeholder{color:#62677f}
.wai-input input:focus{border-color:rgba(245,158,11,.7);box-shadow:0 0 0 4px rgba(245,158,11,.15)}
.wai-input button{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(120deg,#8b5cf6,#f59e0b,#22d3ee);background-size:200% 200%;
  animation:waiGrad 5s ease infinite;color:#fff;font-size:1.1rem;
  box-shadow:0 6px 20px rgba(245,158,11,.4);transition:transform .3s;
}
.wai-input button:hover{transform:scale(1.08)}
.wai-input button:disabled{opacity:.5;cursor:wait;transform:none}
.wai-foot{padding:0 0 10px;text-align:center;font-size:.62rem;letter-spacing:.08em;color:#62677f}
.wai-foot b{background:linear-gradient(120deg,#8b5cf6,#f59e0b,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

@media (max-width:560px){
  #wai-fab{right:16px;bottom:16px;width:56px;height:56px}
  #wai-panel{right:16px;left:16px;width:auto;bottom:84px;height:min(560px,calc(100vh - 120px))}
}
@media (prefers-reduced-motion:reduce){
  #wai-fab,#wai-panel,.wai-head::before,.wai-input button{animation:none!important}
  #wai-panel{transition:none}
}