/* ==========================================================================
   zealcoder — chat widget (js/chatbot.js)
   Reuses the site's existing CSS variables (css/style.css) so it never
   looks like a bolted-on third-party widget. As of Sprint 9 it also reuses
   the ZealCat Design System tokens/utilities (Sprint 7 — .zc-slot,
   .zc-slot-grid, .zc-slot-glow, .zc-anim-idle/.zc-anim-hover) so the
   launcher/panel read as the same placeholder character as the hero and
   loading screen, not a separate icon. Gemini call logic in js/chatbot.js
   is untouched by this pass — only markup/CSS around it changed.
   ========================================================================== */

.zc-chat-launcher{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:80;
  width:104px; height:112px; border-radius:28px;
  background:transparent; border:0; cursor:pointer;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 13px 20px rgba(0,0,0,.48));
  transition:transform 0.25s ease, filter 0.25s ease, width .2s ease, height .2s ease;
}
.zc-chat-launcher:hover{ transform:translateY(-4px); filter:drop-shadow(0 17px 25px rgba(90,31,201,.48)); }
.zc-chat-launcher:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
.zc-chat-launcher::after{
  content:""; position:absolute; right:9px; bottom:10px; width:10px; height:10px;
  border:2px solid var(--bg); border-radius:50%; background:#55e6a5;
  box-shadow:0 0 12px rgba(85,230,165,.8);
}
.zc-chat-hint{
  position:fixed; right:7.4rem; bottom:3.35rem; z-index:79;
  padding:.55rem .78rem; border:1px solid rgba(34,211,245,.28); border-radius:999px;
  background:rgba(7,8,22,.9); color:var(--text); backdrop-filter:blur(12px);
  font-family:'JetBrains Mono',monospace; font-size:.7rem; white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.zc-chat-hint.is-visible{ opacity:1; transform:translateX(0); }

/* Launcher icon: a small ZealCat glass slot (same tokens as the hero/loading
   placeholders) instead of the flat logo image. */
.zc-chat-icon-open{ width:100%; height:100%; pointer-events:none; border:0; background:transparent; box-shadow:none; overflow:visible; }
.zc-chat-icon-open .zc-slot-grid,
.zc-chat-icon-open .zc-slot-glow{ display:none; }
.zc-chat-icon-open .zc-art-wrap{ position:relative; z-index:1; width:100%; height:100%; }

/* Header icon pose swap (face ↔ wave) when the panel opens/closes —
   a plain crossfade between two official art crops, not a transform. */
.zc-chat-head-icon .zc-art{ transition:opacity 0.25s ease; }
.zc-chat-launcher svg.zc-chat-icon-close{ width:22px; height:22px; }
.zc-chat-launcher .zc-chat-icon-close{ display:none; }
.zc-chat-launcher[aria-expanded="true"] .zc-chat-icon-open{ display:none; }
.zc-chat-launcher[aria-expanded="true"] .zc-chat-icon-close{ display:block; }
.zc-chat-launcher[aria-expanded="true"]{
  width:52px; height:52px; border-radius:50%; background:var(--gradient);
  box-shadow:0 10px 30px rgba(90,31,201,.4); filter:none;
}
.zc-chat-launcher[aria-expanded="true"]::after{ display:none; }

/* Premium glass panel — built from the same --zc-glass-* tokens as the
   hero's ZealCat slot, so it feels like part of one system rather than a
   generic chat-widget template. */
.zc-chat-panel{
  position:fixed; right:1.4rem; bottom:8.6rem; z-index:80;
  width:min(376px, calc(100vw - 2.8rem)); height:min(560px, calc(100vh - 8rem));
  background:
    var(--zc-glass-bg),
    linear-gradient(var(--bg-elevated), var(--bg-elevated));
  border:1px solid var(--line); border-radius:var(--zc-radius-md);
  display:flex; flex-direction:column; overflow:hidden;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,62,240,0.14), var(--zc-glass-shadow);
  opacity:0; transform:translateY(14px) scale(0.97); pointer-events:none;
  transition:opacity 0.25s var(--zc-ease), transform 0.25s var(--zc-ease);
}
.zc-chat-panel[hidden]{ display:none; }
.zc-chat-launcher[aria-expanded="true"] + .zc-chat-panel{ bottom:5.3rem; }
.zc-chat-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient);
}
.zc-chat-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.zc-chat-head{
  position:relative;
  display:flex; align-items:center; gap:0.7rem; padding:1rem 1.1rem 0.9rem;
  border-bottom:1px solid var(--line);
}
.zc-chat-head-icon{
  width:52px; height:56px; flex-shrink:0; border-radius:var(--zc-radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--zc-glass-bg); border:var(--zc-glass-border);
}
.zc-chat-head-icon .zc-art-wrap{ width:100%; height:100%; }
.zc-chat-head-copy{ min-width:0; flex:1; }
.zc-chat-head .zc-chat-title{ font-family:'JetBrains Mono',monospace; font-size:0.9rem; letter-spacing:0.02em; color:var(--text); }
.zc-chat-head .zc-chat-subtitle{ font-size:0.74rem; color:var(--text-muted); margin-top:0.15rem; }
.zc-chat-close, .zc-chat-reset{
  width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; color:var(--text-muted);
  background:rgba(150,150,200,.04); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.zc-chat-close:hover, .zc-chat-reset:hover{ color:var(--text); border-color:rgba(34,211,245,.35); background:rgba(34,211,245,.06); }
.zc-chat-close svg, .zc-chat-reset svg{ width:17px; height:17px; }

/* Quick-action row: shortcuts to the pages/profiles the floating assistant
   was originally meant to surface, now layered onto the existing chatbot
   instead of replacing it. Deliberately its own class (not .chip) so it
   stays scoped to the widget and can't be affected by chip styling used
   elsewhere on the site (Kaynaklar filters, İletişim, etc.). */
.zc-chat-quick{
  display:flex; flex-wrap:wrap; gap:0.45rem; padding:0.75rem 1rem;
  border-bottom:1px solid var(--line);
}
.zc-quick-btn{
  flex:0 0 auto; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.01em;
  color:var(--text-muted); text-decoration:none;
  padding:0.4rem 0.75rem; border-radius:20px;
  border:1px solid var(--line); background:var(--bg-card);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.zc-quick-btn:hover, .zc-quick-btn:focus-visible{
  border-color:var(--purple); color:var(--text); transform:translateY(-1px);
  outline:none;
}

.zc-chat-prompts{
  display:grid; grid-template-columns:1fr; gap:.42rem; padding:.65rem 1rem;
  border-bottom:1px solid var(--line); background:rgba(9,11,27,.38);
}
.zc-prompt-btn{
  width:100%; max-width:none; border:1px solid rgba(34,211,245,.2); border-radius:9px;
  padding:.42rem .65rem; background:rgba(34,211,245,.045); color:var(--text-muted);
  font:500 .68rem/1.35 'Inter',sans-serif; text-align:left; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.zc-prompt-btn:hover, .zc-prompt-btn:focus-visible{
  color:var(--text); border-color:rgba(34,211,245,.48); background:rgba(34,211,245,.09); outline:none;
}

.zc-chat-body{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.7rem; }
.zc-chat-msg{ max-width:85%; font-size:0.86rem; line-height:1.5; padding:0.6rem 0.8rem; border-radius:10px; white-space:pre-wrap; }
.zc-chat-msg.zc-from-bot{ align-self:flex-start; background:var(--bg-card); border:1px solid var(--line); color:var(--text); }
.zc-chat-msg.zc-from-user{ align-self:flex-end; background:var(--gradient); color:#08090f; font-weight:500; }
.zc-chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:0.6rem 0.8rem; }
.zc-chat-typing span[aria-hidden]{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:zcTyping 1.1s infinite ease-in-out; }
.zc-chat-typing span[aria-hidden]:nth-of-type(3){ animation-delay:0.15s; }
.zc-chat-typing span[aria-hidden]:nth-of-type(4){ animation-delay:0.3s; }
@keyframes zcTyping{ 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.zc-chat-form{ display:flex; gap:0.5rem; padding:0.8rem; border-top:1px solid var(--line); background:var(--bg-card); }
.zc-chat-input{
  flex:1; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:0.86rem; padding:0.55rem 0.7rem; resize:none;
}
.zc-chat-input:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
.zc-chat-send{
  background:var(--gradient); border:none; border-radius:8px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:filter 0.2s ease;
}
.zc-chat-send:hover{ filter:brightness(1.12); }
.zc-chat-send:disabled{ opacity:0.5; cursor:not-allowed; }
.zc-chat-send svg{ width:16px; height:16px; }
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}

@media (prefers-reduced-motion: reduce){
  .zc-chat-panel, .zc-chat-launcher, .zc-quick-btn{ transition:none; }
  .zc-chat-typing span[aria-hidden]{ animation:none; }
  .zc-chat-icon-open.zc-anim-idle{ animation:none; }
}

@media (max-width:480px){
  .zc-chat-panel{ right:0.7rem; left:0.7rem; width:auto; bottom:7.5rem; height:min(540px, calc(100vh - 9rem)); }
  .zc-chat-launcher{ right:1rem; bottom:1rem; width:72px; height:78px; }
  .zc-chat-hint{ right:5.5rem; bottom:2.3rem; }
  .zc-chat-launcher[aria-expanded="true"]{ width:48px; height:48px; }
  .zc-chat-launcher[aria-expanded="true"] + .zc-chat-panel{ bottom:4.8rem; }
}