/* ===================== ASK OPS · widget ===================== */
.askops{font-family:'Inter',sans-serif}
.askops *{box-sizing:border-box}

/* ---- Launcher ---- */
.askops-launcher{
  position:fixed; right:24px; bottom:24px; z-index:9000;
  width:62px; height:62px; border-radius:50%;
  background:linear-gradient(180deg, rgba(0,8,20,0.95), rgba(0,15,35,0.95));
  border:1px solid rgba(243,213,154,.55);
  color:#f3d59a; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 38px rgba(0,0,0,.55), 0 0 0 0 rgba(243,213,154,.4), inset 0 1px 0 rgba(243,213,154,.15);
  transition:transform .35s ease, box-shadow .45s ease, border-color .35s ease;
}
.askops-launcher:hover{
  transform:translateY(-3px) scale(1.04);
  border-color:#f3d59a;
  box-shadow:0 22px 46px rgba(0,0,0,.6), 0 0 0 6px rgba(243,213,154,.12);
}
.askops-launcher-icon{width:26px; height:26px; position:relative; z-index:2}
.askops-launcher-pulse{
  position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(243,213,154,.5);
  animation:askopsPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes askopsPulse{
  0%   {transform:scale(.92); opacity:.7}
  70%  {transform:scale(1.25); opacity:0}
  100% {transform:scale(1.25); opacity:0}
}
.askops-launcher-label{
  position:absolute; right:74px; top:50%;
  background:linear-gradient(180deg, rgba(0,8,20,.95), rgba(0,15,35,.95));
  border:1px solid rgba(243,213,154,.35);
  color:#f3d59a;
  font-family:'Space Grotesk',sans-serif;
  font-size:10.5px; letter-spacing:.24em; padding:7px 12px; border-radius:99px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.askops-launcher:hover .askops-launcher-label{
  opacity:1; transform:translateY(-50%) translateX(0);
}
.askops-launcher.has-nudge .askops-launcher-label{
  animation:askopsNudge 6s ease-in-out forwards;
}
@keyframes askopsNudge{
  0%   {opacity:0; transform:translateY(-50%) translateX(8px)}
  6%   {opacity:1; transform:translateY(-50%) translateX(0)}
  90%  {opacity:1}
  100% {opacity:0; transform:translateY(-50%) translateX(8px)}
}
.askops-launcher.is-hidden{
  opacity:0; pointer-events:none; transform:scale(.6) translateY(20px);
  transition:opacity .25s ease, transform .25s ease;
}

/* ---- Panel ---- */
.askops-panel[hidden]{display:none !important}
.askops-panel{
  position:fixed; right:24px; bottom:24px; z-index:9100;
  width:380px; max-width:calc(100vw - 32px);
  height:580px; max-height:calc(100vh - 48px);
  background:
    linear-gradient(180deg, rgba(0,8,20,0.96), rgba(0,15,35,0.94)),
    radial-gradient(ellipse at 50% 0%, rgba(243,213,154,.10), transparent 65%);
  border:1px solid rgba(243,213,154,.25);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  transform:translateY(20px) scale(.98); opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.askops-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, #f3d59a, transparent);
  opacity:.7; pointer-events:none;
}
.askops-panel.is-open{transform:translateY(0) scale(1); opacity:1}

.askops-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px 14px;
  border-bottom:1px dashed rgba(255,255,255,.10);
  font-family:'Space Grotesk',sans-serif;
}
.askops-tag{
  display:flex; align-items:center; gap:10px;
  color:#f3d59a; font-weight:600;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
}
.askops-dot{
  width:7px; height:7px; border-radius:50%;
  background:#56e0a0; box-shadow:0 0 10px #56e0a0;
  animation:askopsBlink 2s ease-in-out infinite;
}
@keyframes askopsBlink{0%,100%{opacity:1} 50%{opacity:.5}}
.askops-close{
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.75); font-size:24px; line-height:1;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.askops-close:hover{background:rgba(255,255,255,.08); color:#fff}

/* ---- Conversation log ---- */
.askops-log{
  flex:1 1 auto; overflow-y:auto; padding:18px 16px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:rgba(243,213,154,.25) transparent;
}
.askops-log::-webkit-scrollbar{width:6px}
.askops-log::-webkit-scrollbar-thumb{background:rgba(243,213,154,.25); border-radius:3px}

.askops-msg{display:flex; gap:10px; align-items:flex-end; animation:askopsIn .35s ease both}
@keyframes askopsIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.askops-msg-bot{justify-content:flex-start}
.askops-msg-user{justify-content:flex-end}

.askops-avatar{
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(180deg, #f3d59a, #c79a4e);
  color:#001127;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.05em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(243,213,154,.25);
}

.askops-bubble{
  max-width:78%;
  padding:11px 14px; border-radius:14px;
  font-size:13.5px; line-height:1.5;
  color:#e6ebf2;
}
.askops-msg-bot .askops-bubble{
  background:rgba(243,213,154,.06);
  border:1px solid rgba(243,213,154,.18);
  border-bottom-left-radius:4px;
}
.askops-msg-user .askops-bubble{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-bottom-right-radius:4px;
  color:#fff; font-weight:500;
}

/* Typing indicator */
.askops-typing .askops-bubble{
  display:flex; gap:5px; padding:14px;
}
.askops-typing .askops-bubble span{
  width:6px; height:6px; border-radius:50%;
  background:#f3d59a; opacity:.4;
  animation:askopsDot 1.2s ease-in-out infinite;
}
.askops-typing .askops-bubble span:nth-child(2){animation-delay:.18s}
.askops-typing .askops-bubble span:nth-child(3){animation-delay:.36s}
@keyframes askopsDot{
  0%,80%,100%{transform:translateY(0); opacity:.4}
  40%{transform:translateY(-4px); opacity:1}
}

/* ---- Chips ---- */
.askops-chips{
  padding:12px 14px 8px;
  display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px dashed rgba(255,255,255,.10);
}
.askops-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px;
  background:rgba(243,213,154,.05);
  border:1px solid rgba(243,213,154,.35);
  border-radius:99px;
  color:#f3d59a;
  font-family:'Space Grotesk',sans-serif;
  font-size:11.5px; letter-spacing:.10em; font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation:askopsChipIn .35s ease both;
  animation-delay:var(--d, 0ms);
}
@keyframes askopsChipIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.askops-chip:hover{
  background:rgba(243,213,154,.14);
  border-color:#f3d59a;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(243,213,154,.15);
}
.askops-chip-icon{font-size:13px; line-height:1}

/* ---- Footer ---- */
.askops-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  border-top:1px dashed rgba(255,255,255,.08);
  font-family:'Space Grotesk',sans-serif;
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:#8a96a8;
}
.askops-restart{
  background:transparent; border:none; cursor:pointer;
  color:#b9c2d1;
  font-family:'Space Grotesk',sans-serif;
  font-size:9px; letter-spacing:.22em; font-weight:600;
  transition:color .2s ease;
}
.askops-restart:hover{color:#f3d59a}

/* ---- Mobile ---- */
@media (max-width: 600px){
  .askops-launcher{right:16px; bottom:16px; width:56px; height:56px}
  .askops-launcher-label{display:none}
  .askops-panel{
    right:0; left:0; bottom:0; top:0;
    width:100vw; max-width:100vw;
    height:100vh; max-height:100vh;
    border-radius:0;
  }
  .askops-bubble{font-size:14px; max-width:82%}
}

@media (prefers-reduced-motion: reduce){
  .askops-launcher-pulse, .askops-dot, .askops-typing .askops-bubble span{animation:none}
  .askops-panel, .askops-msg, .askops-chip{transition:none; animation:none}
}
