/* ===========================================================================
   Ask CreditRead - the right-hand assistant panel.

   Shape is taken from the reference kit's chatbot screens (centred sparkle,
   suggestion chips, a rounded composer pinned to the bottom) but recoloured
   from their pastel pink/lavender to the CreditRead blues, and moved into a
   right-hand drawer so it sits beside the data it is talking about rather than
   replacing it.
   =========================================================================== */

/* -- launcher ------------------------------------------------------------ */
.ask-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;
  gap:10px;border:0;cursor:pointer;border-radius:var(--r-pill);padding:13px 20px 13px 16px;
  color:#fff;font-size:14px;font-weight:600;font-family:inherit;
  background:linear-gradient(135deg,var(--brand-800) 0%,var(--brand-700) 48%,var(--brand-400) 100%);
  box-shadow:0 10px 30px rgba(13,85,199,.34),0 2px 8px rgba(7,26,70,.2);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ask-fab:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(13,85,199,.42)}
.ask-fab:active{transform:translateY(0)}
.ask-fab svg{flex:0 0 20px}
.ask-fab .ping{position:absolute;inset:0;border-radius:var(--r-pill);
  box-shadow:0 0 0 0 rgba(24,188,235,.55);animation:ask-ping 2.6s var(--ease) infinite}
@keyframes ask-ping{0%{box-shadow:0 0 0 0 rgba(24,188,235,.5)}
  70%{box-shadow:0 0 0 16px rgba(24,188,235,0)}100%{box-shadow:0 0 0 0 rgba(24,188,235,0)}}
.ask-open .ask-fab{display:none}

/* -- drawer -------------------------------------------------------------- */
.ask-scrim{position:fixed;inset:0;background:rgba(7,26,70,.32);backdrop-filter:blur(2px);
  z-index:70;opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.ask-open .ask-scrim{opacity:1;pointer-events:auto}

/* width uses 100% (the containing block), NOT 100vw: 100vw includes the
   scrollbar, so on a narrow screen the off-canvas panel sat ~20px wider than
   the content area and its transform pushed the whole page sideways. */
.ask-panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:80;
  background:var(--card);border-left:1px solid var(--g200);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .26s var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
.ask-open .ask-panel{transform:translateX(0)}

.ask-head{padding:18px 20px 14px;border-bottom:1px solid var(--g200);display:flex;
  align-items:flex-start;gap:12px;
  background:radial-gradient(520px 160px at 8% 0%,rgba(24,188,235,.14),transparent 64%),
    radial-gradient(420px 180px at 96% 100%,rgba(13,85,199,.13),transparent 60%),var(--card)}
.ask-head .mark{width:38px;height:38px;border-radius:11px;flex:0 0 38px;display:grid;
  place-items:center;background:var(--brand-100)}
.ask-head h2{font-size:15.5px;font-weight:700}
.ask-head p{margin:2px 0 0;font-size:12px;color:var(--g500)}
.ask-close{margin-left:auto;border:0;background:none;color:var(--g400);cursor:pointer;
  padding:4px;border-radius:6px;line-height:0}
.ask-close:hover{background:var(--g100);color:var(--g700)}

/* -- log ----------------------------------------------------------------- */
.ask-log{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.ask-intro{text-align:center;padding:22px 8px 6px}
.ask-intro .spark{margin:0 auto 12px;width:46px;height:46px;border-radius:14px;display:grid;
  place-items:center;background:var(--brand-100)}
.ask-intro h3{font-size:16.5px;font-weight:700;margin-bottom:5px}
.ask-intro p{margin:0;font-size:12.5px;color:var(--g500);line-height:1.55}

.ask-msg{display:flex;flex-direction:column;gap:5px;max-width:100%}
.ask-who{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g400)}
.ask-bubble{border-radius:13px;padding:11px 14px;font-size:13.2px;line-height:1.6;
  overflow-wrap:anywhere}
.ask-msg.me{align-items:flex-end}
.ask-msg.me .ask-bubble{background:var(--brand-700);color:#fff;border-bottom-right-radius:5px}
.ask-msg.ai .ask-bubble{background:var(--g50);border:1px solid var(--g200);color:var(--g800);
  border-bottom-left-radius:5px}
.ask-bubble strong{color:var(--g900);font-weight:700}
.ask-msg.me .ask-bubble strong{color:#fff}

/* Replay control, one per answer, so any answer can be heard again and not
   only the newest. Quiet until wanted: it sits under the answer rather than
   beside it, and never competes with the figure the answer is about. */
.ask-replay{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:5px 10px;border:1px solid var(--g200);border-radius:var(--r-pill);
  background:var(--card);color:var(--g600);font:inherit;font-size:11.5px;
  font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.ask-replay:hover{border-color:var(--brand-400);color:var(--brand-700)}
.ask-replay[aria-pressed="true"]{background:var(--brand-700);border-color:var(--brand-700);
  color:#fff}
.ask-replay:focus-visible{outline:2px solid var(--brand-700);outline-offset:2px}

/* evidence - every answer shows what it was computed from */
.ask-ev{margin-top:9px;padding-top:9px;border-top:1px solid var(--g200);display:flex;
  flex-direction:column;gap:5px}
.ask-ev .lbl{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g400)}
.ask-ev div{font-size:11.5px;color:var(--g600);display:flex;gap:7px}
.ask-ev div i{flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:var(--brand-400);
  margin-top:7px}

.ask-typing{display:flex;gap:4px;padding:5px 2px}
.ask-typing i{width:6px;height:6px;border-radius:50%;background:var(--g300);
  animation:ask-bob 1.15s var(--ease) infinite}
.ask-typing i:nth-child(2){animation-delay:.16s}
.ask-typing i:nth-child(3){animation-delay:.32s}
@keyframes ask-bob{0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-4px);opacity:1}}

/* -- suggestions --------------------------------------------------------- */
.ask-sugg{padding:0 20px 12px;display:flex;flex-direction:column;gap:7px}
.ask-sugg .lbl{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g400);margin-bottom:1px}
.ask-chip{text-align:left;background:var(--card);border:1px solid var(--g300);color:var(--g700);
  border-radius:9px;padding:9px 12px;font-size:12.3px;font-weight:500;cursor:pointer;
  line-height:1.4;font-family:inherit;transition:border-color .15s var(--ease),color .15s var(--ease)}
.ask-chip:hover{border-color:var(--brand-600);color:var(--brand-600)}

/* -- composer ------------------------------------------------------------ */
.ask-foot{padding:12px 20px 16px;border-top:1px solid var(--g200);background:var(--card)}
.ask-bar{display:flex;align-items:center;gap:9px;border:1px solid var(--g300);
  border-radius:12px;padding:8px 8px 8px 14px;background:var(--card);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ask-bar:focus-within{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(21,112,239,.13)}
.ask-bar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13.2px;
  color:var(--g900);font-family:inherit}
.ask-bar input::placeholder{color:var(--g400)}
.ask-icon{width:36px;height:36px;border-radius:9px;border:0;cursor:pointer;display:grid;
  place-items:center;flex:0 0 36px;background:var(--g100);color:var(--g600);
  transition:background .15s var(--ease),color .15s var(--ease)}
.ask-icon:hover{background:var(--g200);color:var(--g900)}
.ask-icon.send{background:var(--brand-700);color:#fff}
.ask-icon.send:hover{background:var(--brand-600)}
.ask-icon[disabled]{opacity:.45;cursor:not-allowed}
.ask-icon.rec{background:var(--er);color:#fff;animation:ask-rec 1.3s var(--ease) infinite}
@keyframes ask-rec{0%,100%{box-shadow:0 0 0 0 rgba(240,68,56,.5)}
  60%{box-shadow:0 0 0 9px rgba(240,68,56,0)}}
.ask-hint{margin:9px 2px 0;font-size:10.8px;color:var(--g400);line-height:1.5}
.ask-hint b{color:var(--g600);font-weight:600}

/* live transcript while the mic is open */
.ask-live{margin:0 0 9px;padding:9px 12px;border-radius:10px;background:var(--er-bg);
  border:1px solid var(--er-bd);font-size:12.5px;color:var(--er-tx);display:flex;gap:9px}
.ask-live i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--er);
  margin-top:6px;animation:ask-bob 1.15s var(--ease) infinite}

@media (max-width:520px){
  .ask-panel{width:100vw}
  .ask-fab{right:16px;bottom:16px;padding:12px 17px 12px 14px;font-size:13.5px}
}