/* ==========================================================
   YOGERA — HELP ASSISTANT (chatbot widget)
   Used by: every page. A retrieval/keyword-matching assistant
   over a local knowledge base — not a connected AI model (no
   backend exists in this static prototype to call one safely).
   Presented honestly as "Yogera Assistant" rather than implying
   a live LLM, per the same transparency used for Tutorials/Blog.
   ========================================================== */

.yog-chat-launcher{
  position:fixed; right:22px; bottom:22px; z-index:180;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue), var(--purple));
  color:#fff; font-size:22px; border:none;
  box-shadow:0 10px 30px var(--blue-glow);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-comp) var(--ease);
}
.yog-chat-launcher:hover{ transform:scale(1.07); box-shadow:0 14px 38px var(--purple-glow); }
.yog-chat-launcher .yog-badge{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
  background:var(--success); border:2px solid var(--bg-void); animation:pulse-dot 1.8s ease-in-out infinite;
}
.yog-chat-launcher.is-open .icon-open{ display:none; }
.yog-chat-launcher:not(.is-open) .icon-close{ display:none; }

.yog-chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:180;
  width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 140px));
  background:var(--surface-raised); border:1px solid var(--line-strong); border-radius:var(--radius-xl, 22px);
  box-shadow:0 30px 70px var(--shadow-xl);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(0.97);
  transition:opacity var(--dur-comp) var(--ease), transform var(--dur-comp) var(--ease), visibility var(--dur-comp);
}
.yog-chat-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.yog-chat-head{
  display:flex; align-items:center; gap:10px; padding:16px 16px;
  background:linear-gradient(135deg, var(--blue), var(--purple)); color:#fff; flex-shrink:0;
}
.yog-chat-head .yog-avatar{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.yog-chat-head .yog-title{ font-weight:700; font-size:14.5px; line-height:1.2; }
.yog-chat-head .yog-sub{ font-size:11.5px; opacity:0.85; margin-top:1px; }
.yog-chat-head .yog-close{
  margin-left:auto; width:28px; height:28px; border-radius:50%; color:#fff; opacity:0.85;
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.yog-chat-head .yog-close:hover{ opacity:1; background:rgba(255,255,255,0.15); }

.yog-chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.yog-msg{ display:flex; gap:8px; max-width:88%; }
.yog-msg.bot{ align-self:flex-start; }
.yog-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.yog-msg .yog-bubble{
  padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.55;
}
.yog-msg.bot .yog-bubble{ background:var(--bg-deep); color:var(--text-primary); border-bottom-left-radius:4px; }
.yog-msg.user .yog-bubble{ background:linear-gradient(135deg, var(--blue), var(--purple)); color:#fff; border-bottom-right-radius:4px; }
.yog-msg .yog-bubble a{ color:var(--blue); font-weight:600; text-decoration:underline; }
.yog-msg.user .yog-bubble a{ color:#fff; }
.yog-msg .yog-bubble ul{ margin:6px 0 0 16px; padding:0; }
.yog-msg .yog-bubble li{ margin-bottom:3px; }

.yog-typing{ display:flex; gap:4px; padding:10px 13px; background:var(--bg-deep); border-radius:14px; border-bottom-left-radius:4px; width:fit-content; }
.yog-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:yog-bounce 1.2s ease-in-out infinite; }
.yog-typing span:nth-child(2){ animation-delay:0.15s; }
.yog-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes yog-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:0.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.yog-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; flex-shrink:0; }
.yog-chip{
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); color:var(--text-secondary); background:var(--surface);
  transition:all var(--dur-micro) var(--ease);
}
.yog-chip:hover{ border-color:var(--blue-glow); color:var(--blue); background:var(--blue-soft); }

.yog-chat-input-row{
  display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid var(--line); flex-shrink:0;
}
.yog-chat-input-row input{
  flex:1; padding:11px 14px; border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  background:var(--bg-deep); color:var(--text-primary); font-size:13.5px; font-family:inherit;
}
.yog-chat-input-row input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.yog-chat-input-row button{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue), var(--purple)); color:#fff; font-size:14px;
  transition:transform var(--dur-micro) var(--ease);
}
.yog-chat-input-row button:hover{ transform:scale(1.07); }

@media (max-width:480px){
  .yog-chat-launcher{ right:14px; bottom:14px; width:52px; height:52px; font-size:19px; }
  .yog-chat-panel{ right:10px; bottom:76px; width:calc(100vw - 20px); height:min(70vh, 520px); }
}