/* ═══════════════════════════════════════════════════════════════
   AGENT Q — Gemini-strip UX
   ═══════════════════════════════════════════════════════════════ */

/* ── BACKDROP ────────────────────────────────────────────────── */
.aq-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1298;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  pointer-events:none;
}
.aq-backdrop.open{opacity:1;visibility:visible;pointer-events:all;}

/* ── LAUNCHER (fixed bottom-right always) ────────────────────── */
.aq-launcher{
  position:fixed;right:1.1rem;bottom:7rem;
  z-index:1300;
}
.aq-btn{
  width:3rem;height:3rem;border-radius:50%;border:none;
  background:#0b0b0b;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  animation:aqPulse 3s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s;
  position:relative;
}
.aq-btn:hover{transform:scale(1.08);box-shadow:0 0 22px rgba(26,111,255,0.65);animation:none;}
@keyframes aqPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(26,111,255,0.35),0 4px 14px rgba(26,111,255,0.35);}
  50%{box-shadow:0 0 0 9px rgba(26,111,255,0),0 4px 22px rgba(26,111,255,0.55);}
}
.aq-notif{
  position:absolute;top:-3px;right:-3px;
  width:10px;height:10px;background:#00C97B;
  border-radius:50%;border:2px solid #0b0b0b;
  animation:aqBlink 2s ease-in-out infinite;display:none;
}
@keyframes aqBlink{50%{opacity:.35;}}

/* ══════════════════════════════════════════════════════════════
   POPUP — LARGE SCREEN (≥500px)
   Bottom-center, max 60vh response area
   ══════════════════════════════════════════════════════════════ */
.aq-popup{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%) translateY(calc(100% + 6px));
  width:min(520px, 96vw);
  background:#111314;
  border-radius: 10px;
  box-shadow:0 -4px 50px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.07);
  display:flex;flex-direction:column;
  overflow:hidden;
  opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.32,.72,0,1),
             opacity .25s ease,visibility .25s;
  z-index:1299;
}
.aq-popup.open{
  translateX(-50%) translateY(-10%);
  opacity:1;visibility:visible;
}

/* drag handle pill */
.aq-drag-pill{
  width:36px;height:4px;
  background:rgba(255,255,255,0.18);
  border-radius:2px;
  margin:12px auto 4px;
  flex-shrink:0;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.aq-header{
  display:flex;align-items:center;gap:10px;
  padding:6px 18px 10px;
  flex-shrink:0;
}
.aq-header-icon{
  width:28px;height:28px;border-radius:50%;
  background:#000;border:1px solid rgba(26,111,255,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px rgba(26,111,255,0.45);overflow:hidden;
}
.aq-header-icon img{width:28px;height:28px;object-fit:cover;border-radius:50%;}
.aq-header-label{
  flex:1;font-family:system-ui;font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.75);letter-spacing:.5px;
}
.aq-header-status{display:flex;align-items:center;gap:5px;margin-right:6px;}
.aq-status-dot{width:6px;height:6px;border-radius:50%;background:#00C97B;animation:aqBlink 2s ease-in-out infinite;}
.aq-status-text{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:1px;color:rgba(255,255,255,0.38);}
.aq-close-btn{
  background:none;border:none;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.4);cursor:pointer;
  transition:background .15s,color .15s;
}
.aq-close-btn:hover{background:rgba(255,255,255,0.09);color:#fff;}

/* ── RESPONSE SCROLL AREA — max 60vh on large screens ───────── */
.aq-messages{
  flex:1;overflow-y:auto;
  max-height:60vh;
  padding:4px 20px 8px;
  display:flex;flex-direction:column;gap:0;
  scroll-behavior:smooth;
}
.aq-messages::-webkit-scrollbar{width:2px;}
.aq-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:2px;}

/* ── WELCOME STATE (inside scroll area, only on open) ────────── */
.aq-welcome{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:14px 8px 6px;
  animation:aqFadeIn .4s ease both;
}
.aq-welcome-icon{
  width:52px;height:52px;border-radius:50%;background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 28px rgba(26,111,255,0.5);margin:0 auto 14px;
}
.aq-welcome-icon img{width:52px;height:52px;object-fit:cover;}
.aq-welcome-title{font-family:system-ui;font-size:21px;letter-spacing:3px;color:#fff;margin-bottom:3px;}
.aq-welcome-sub{font-family:'JetBrains Mono',monospace;font-size:8px;color:#5CC4FF;letter-spacing:2px;margin-bottom:10px;}
.aq-welcome-desc{font-family:system-ui;font-size:13px;color:rgba(255,255,255,0.48);line-height:1.6;margin-bottom:0;max-width:340px;}

/* ── QUICK PILLS ROW — above input, outside scroll area ─────── */
.aq-quick-row{
  flex-shrink:0;
  display:flex;gap:8px;
  overflow-x:auto;
  padding:10px 18px 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.aq-quick-row::-webkit-scrollbar{display:none;}
.aq-quick{
  white-space:nowrap;
  font-family:system-ui;font-size:12px;
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  padding:7px 14px;border-radius:999px;
  cursor:pointer;flex-shrink:0;
  transition:background .18s,border-color .18s,transform .15s;
}
.aq-quick:hover{
  background:rgba(26,111,255,0.18);
  border-color:rgba(77,184,255,0.4);
  transform:translateY(-1px);
}

/* ── CONVERSATION TURNS ──────────────────────────────────────── */
.aq-turn{
  display:flex;flex-direction:column;
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,0.06);
  animation:aqTurnIn .3s cubic-bezier(.22,.68,0,1.2) both;
}
.aq-turn:first-child{border-top:none;}
@keyframes aqTurnIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.aq-user-echo{
  font-family:system-ui;font-size:11px;
  color:rgba(255,255,255,0.33);
  margin-bottom:8px;padding-left:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── RESPONSE TEXT — flowing paragraphs, no bubbles ─────────── */
.aq-response{
  font-family:system-ui;font-size:15px;line-height:1.72;
  color:rgba(255,255,255,0.88);
  display:flex;flex-direction:column;gap:0;
}
.aq-response p{
  margin:0 0 12px;
  opacity:0;animation:aqParaIn .4s ease forwards;
}
.aq-response p:last-child{margin-bottom:0;}
.aq-response ul{margin:0 0 12px;padding-left:20px;}
.aq-response li{
  margin-bottom:5px;
  opacity:0;animation:aqParaIn .4s ease forwards;
}
.aq-response strong{color:#fff;font-weight:700;}
.aq-response em{color:rgba(92,196,255,0.9);}

.aq-response p:nth-child(1),.aq-response li:nth-child(1){animation-delay:.04s;}
.aq-response p:nth-child(2),.aq-response li:nth-child(2){animation-delay:.14s;}
.aq-response p:nth-child(3),.aq-response li:nth-child(3){animation-delay:.24s;}
.aq-response p:nth-child(4),.aq-response li:nth-child(4){animation-delay:.34s;}
.aq-response p:nth-child(5),.aq-response li:nth-child(5){animation-delay:.44s;}
.aq-response p:nth-child(6),.aq-response li:nth-child(6){animation-delay:.54s;}
.aq-response p:nth-child(7),.aq-response li:nth-child(7){animation-delay:.64s;}
.aq-response p:nth-child(8),.aq-response li:nth-child(8){animation-delay:.74s;}
@keyframes aqParaIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── ACTION ROW ──────────────────────────────────────────────── */
.aq-actions{
  display:flex;align-items:center;gap:2px;
  margin-top:12px;padding-bottom:14px;
}
.aq-act-btn{
  background:none;border:none;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.38);
  cursor:pointer;transition:background .15s,color .15s;
}
.aq-act-btn:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);}
.aq-act-btn svg{width:17px;height:17px;fill:currentColor;}
.aq-act-spacer{flex:1;}
.aq-disclaimer{font-family:system-ui;font-size:11px;color:rgba(255,255,255,0.22);}

/* ── TYPING INDICATOR ────────────────────────────────────────── */
.aq-typing-turn{
  padding:16px 0 10px;
  animation:aqFadeIn .25s ease both;
}
.aq-typing{display:flex;gap:5px;align-items:center;}
.aq-tdot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(92,196,255,0.7);
  animation:aqTdot 1.3s ease-in-out infinite;
}
.aq-tdot:nth-child(2){animation-delay:.18s;}
.aq-tdot:nth-child(3){animation-delay:.36s;}
@keyframes aqTdot{0%,60%,100%{opacity:.2;transform:scale(.65);}30%{opacity:1;transform:scale(1);}}
@keyframes aqFadeIn{from{opacity:0;}to{opacity:1;}}

/* ── INPUT STRIP ─────────────────────────────────────────────── */
.aq-input-strip{
  flex-shrink:0;
  padding:10px 14px 16px;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.06);
}
.aq-input-pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:0 10px 0 16px;
  transition:border-color .2s,box-shadow .2s;
}
.aq-input-pill:focus-within{
  border-color:rgba(77,184,255,0.42);
  box-shadow:0 0 0 3px rgba(26,111,255,0.09);
}
#aqInput{
  flex:1;background:none;border:none;outline:none;
  color:#fff;font-family:system-ui;font-size:14px;
  padding:12px 0;resize:none;
  max-height:90px;line-height:1.45;scrollbar-width:none;
}
#aqInput::placeholder{color:rgba(255,255,255,0.3);}
#aqInput::-webkit-scrollbar{display:none;}
.aq-send{
  width:36px;height:36px;flex-shrink:0;
  background:#1A6FFF;border:none;border-radius:50%;
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  box-shadow:0 0 10px rgba(26,111,255,0.35);
}
.aq-send:hover:not(:disabled){background:#2A7FFF;box-shadow:0 0 18px rgba(26,111,255,0.55);}
.aq-send:disabled{opacity:.28;cursor:not-allowed;}
.aq-send svg{width:15px;height:15px;fill:#fff;}
.aq-strip-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px 0;
}
.aq-footer-text{font-family:system-ui;font-size:10px;color:rgba(255,255,255,0.18);}
.aq-char-counter{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.5px;
  color:rgba(255,255,255,0.2);transition:color .2s;
}

/* scanlines */
.aq-popup::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(26,111,255,0.003) 2px,rgba(26,111,255,0.003) 4px);
  border-radius:24px 24px 0 0;z-index:0;
}
.aq-popup > *{position:relative;z-index:1;}

/* ══════════════════════════════════════════════════════════════
   MOBILE — full screen (<500px)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:499px){
  .aq-popup{
    width:100%;
    max-height:100dvh;
    border-radius:0;
    bottom:0;left:0;right:0;
    transform:translateX(0) translateY(100%);
  }
  .aq-popup.open{
    transform:translateX(0) translateY(0);
  }
  .aq-drag-pill{display:none;}
  .aq-messages{
    max-height:none;
    flex:1;
  }
  .aq-response{font-size:16px;}
  .aq-quick{font-size:13px;padding:9px 16px;}
  #aqInput{font-size:15px;}
  .aq-welcome-title{font-size:24px;}
}