/* assistant.css — floating "Ask" assistant (Phase 6). Higher-quality v2. */

#atb-ask {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

/* ---- launcher: subtle, see-through "?" that solidifies on hover ---- */
.ask-launch {
  display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: rgba(12, 122, 91, 0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; opacity: 0.82;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px -4px rgba(11, 31, 23, 0.28);
  transition: opacity .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ask-launch:focus-visible {
  opacity: 1; background: rgba(12, 122, 91, 0.97);
  box-shadow: 0 10px 24px -8px rgba(0, 75, 59, 0.55);
}
/* Only apply hover styling on devices that actually hover. On touch, a :hover
   rule makes the first tap a "hover" and needs a second tap to activate. */
@media (hover: hover) {
  .ask-launch:hover {
    opacity: 1; background: rgba(12, 122, 91, 0.97); transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0, 75, 59, 0.55);
  }
}
#atb-ask.open .ask-launch { display: none; }

/* ---- panel: refined card with animated open ---- */
.ask-panel {
  width: 384px; max-width: calc(100vw - 36px); height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid rgba(11, 31, 23, 0.08); border-radius: 20px;
  box-shadow: 0 1px 1px rgba(11,31,23,.04), 0 18px 48px -14px rgba(11, 31, 23, 0.42);
  display: none; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
}
#atb-ask.open .ask-panel {
  display: flex; animation: ask-in .22s cubic-bezier(.16,.84,.44,1);
}
@keyframes ask-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* header — gradient band + assistant glyph + title/subtitle */
.ask-head {
  display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  background: linear-gradient(135deg, var(--teal-deep, #0c7a5b) 0%, var(--teal, #0c9a73) 100%);
  color: #fff;
}
.ask-head .ask-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.ask-head .ask-ttl { flex: 1; min-width: 0; line-height: 1.2; }
.ask-head .ask-ttl b { display: block; font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.06rem; }
.ask-head .ask-ttl span { display: block; font-size: 11.5px; opacity: .85; margin-top: 1px; }
.ask-close {
  flex: none; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; transition: background .15s ease;
}
.ask-close:hover { background: rgba(255,255,255,.3); }

/* message log */
.ask-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface, #fbfcfb); }
.ask-msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; animation: ask-msg-in .2s ease; }
@keyframes ask-msg-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ask-msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(11,31,23,.08); color: var(--ink, #16241d); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(11,31,23,.04); }
.ask-msg.me  { align-self: flex-end; background: linear-gradient(135deg, var(--teal-deep, #0c7a5b), var(--teal, #0c9a73)); color: #fff; border-bottom-right-radius: 5px; }
.ask-msg.bot a { color: var(--teal-deep, #0c7a5b); text-decoration: underline; text-underline-offset: 2px; }
.ask-msg.bot strong { font-weight: 650; }

/* source chips */
.ask-src { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px; }
.ask-src a { font-size: 11px; color: var(--teal-deep, #0c7a5b); background: var(--teal-wash, #e8f3ef); border: 1px solid rgba(0,75,59,.16); border-radius: 99px; padding: 3px 10px; text-decoration: none; }
.ask-src a:hover { background: #dcebe5; }

/* suggested-question chips (under the intro) */
.ask-sugs { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ask-sug {
  font: 500 12.5px/1 inherit; color: var(--teal-deep, #0c7a5b); cursor: pointer;
  background: #fff; border: 1px solid rgba(0,75,59,.28); border-radius: 99px; padding: 8px 12px;
  transition: background .15s ease, border-color .15s ease;
}
.ask-sug:hover { background: var(--teal-wash, #e8f3ef); border-color: var(--teal, #0c9a73); }

/* animated typing indicator */
.ask-msg.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.ask-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute, #8a978f); display: inline-block; animation: ask-dot 1.2s infinite ease-in-out; }
.ask-msg.typing i:nth-child(2) { animation-delay: .2s; }
.ask-msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-dot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* input row */
.ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(11,31,23,.07); background: #fff; align-items: center; }
.ask-form input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 11px 15px; border: 1px solid rgba(11,31,23,.14);
  border-radius: 99px; font: 400 14px/1.2 inherit; color: var(--ink, #16241d); background: var(--surface, #fbfcfb);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ask-form input:focus { outline: none; border-color: var(--teal, #0c9a73); background: #fff; box-shadow: 0 0 0 3px var(--teal-wash, #e8f3ef); }
.ask-send { flex: none; border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-deep, #0c7a5b), var(--teal, #0c9a73)); color: #fff; display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease; }
.ask-send:hover { transform: scale(1.06); }
.ask-send:disabled { opacity: .45; cursor: default; transform: none; }

.ask-foot { padding: 9px 14px 12px; font-size: 10.5px; color: var(--ink-mute, #8a978f); line-height: 1.4; background: #fff; text-align: center; }
.ask-foot a { color: var(--teal-deep, #0c7a5b); }

@media (max-width: 480px) {
  #atb-ask { right: 14px; bottom: 14px; }
  .ask-panel { width: calc(100vw - 24px); height: 60vh; max-height: calc(100vh - 150px); }
  /* 16px stops iOS Safari auto-zooming when the field is focused. */
  .ask-form input { font-size: 16px; }
}