/* ============================================================
   MEDSY — AI ELEMENTS
   Modern AI-feature UI: an ask/prompt bar, an assistant answer
   card, and a small AI badge. Forest→mint identity with a subtle
   "intelligent" sheen. Token-driven, reduced-motion safe.
   ============================================================ */

/* ---------- AI BADGE ---------- */
.ai-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:var(--r-pill);
  background:var(--grad-primary);color:#fff;line-height:1}
.ai-badge.soft{background:var(--mint-100);color:var(--forest);border:1px solid var(--line-mint)}
.ai-badge .v-icon{width:1.05em;height:1.05em}

/* ---------- AI PROMPT (ask bar) ---------- */
.ai-prompt{border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);
  padding:14px 14px 12px;transition: border-color var(--dur-control),box-shadow var(--dur-control);position:relative;overflow:hidden}
.ai-prompt::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad-spark);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition: opacity var(--dur-control) var(--ease-standard);pointer-events:none}
.ai-prompt.focused{border-color:transparent;box-shadow:var(--shadow-md)}
.ai-prompt.focused::before{opacity:1}
.ai-prompt-row{display:flex;align-items:flex-end;gap:10px}
.ai-prompt-spark{flex:none;width:34px;height:34px;border-radius:10px;background:var(--mint-100);border:1px solid var(--line-mint);
  display:grid;place-items:center;color:var(--forest)}
.ai-prompt-spark .v-icon{width:19px;height:19px}
.ai-prompt-field{flex:1;border:none;outline:none;background:none;font:inherit;font-size:1rem;color:var(--ink);
  resize:none;line-height:1.5;max-height:160px;padding:6px 0}
.ai-prompt-field::placeholder{color:var(--ink-faint)}
.ai-prompt-send{flex:none;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--grad-primary);color:#fff;box-shadow:0 6px 16px -8px rgba(6,58,40,.5);transition: transform var(--dur-control) var(--ease-spring),opacity var(--dur-hover)}
.ai-prompt-send:hover:not(:disabled){transform:translateY(-2px) scale(1.04)}
.ai-prompt-send:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.55)}
.ai-prompt-send:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.ai-prompt-send .v-icon{width:19px;height:19px}
.ai-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ai-chip{display:inline-flex;align-items:center;gap:.45em;background:var(--mint-50);border:1px solid var(--line-mint);
  color:var(--forest);border-radius:var(--r-pill);padding:.45em .9em;font-size:.84rem;font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap;transition: var(--dur-hover) var(--ease-standard)}
.ai-chip:hover{background:var(--mint-100);transform:translateY(-1px)}
.ai-chip .v-icon{width:14px;height:14px;color:var(--forest-300)}

/* ---------- AI ANSWER ---------- */
.ai-answer{display:flex;gap:14px;background:var(--grad-soft);border:1px solid var(--line-mint);border-radius:var(--r-lg);padding:18px 20px}
.ai-answer-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--grad-primary);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-xs)}
.ai-answer-avatar .v-icon{width:20px;height:20px}
.ai-answer-body{flex:1;min-width:0}
.ai-answer-name{display:flex;align-items:center;gap:8px;font-weight:var(--fw-bold);color:var(--text-strong);font-size:.92rem;margin-bottom:6px}
.ai-answer-text{font-size:.96rem;line-height:1.62;color:var(--text-body)}
.ai-answer-text p{margin:0 0 .7em}.ai-answer-text p:last-child{margin-bottom:0}
.ai-answer-sources{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.ai-source{display:inline-flex;align-items:center;gap:.4em;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.3em .75em;font-size:.78rem;color:var(--forest);font-weight:var(--fw-medium);white-space:nowrap;text-decoration:none}
.ai-source:hover{border-color:var(--line-mint);background:var(--mint-50)}
.ai-source .v-icon{width:13px;height:13px;color:var(--forest-300)}
.ai-answer-actions{display:flex;gap:4px;margin-top:14px}
.ai-act{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface-card);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition: var(--dur-hover) var(--ease-standard)}
.ai-act:hover{border-color:var(--line-mint);background:var(--mint-50);color:var(--forest)}
.ai-act:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.ai-act .v-icon{width:16px;height:16px}

/* streaming caret + typing dots */
.ai-caret{display:inline-block;width:8px;height:1.05em;background:var(--forest);border-radius:2px;vertical-align:text-bottom;margin-left:2px;animation: ai-blink 1s steps(2) infinite}
@keyframes ai-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.ai-typing{display:inline-flex;gap:4px;align-items:center}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--forest-300);animation: ai-bounce 1.2s var(--ease-emphasized) infinite}
.ai-typing span:nth-child(2){animation-delay:.15s}.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes ai-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .ai-prompt,.ai-prompt::before,.ai-prompt-send,.ai-chip,.ai-act{transition: none!important}
  .ai-caret,.ai-typing span{animation: none!important}
}


/* ============================================================
   PRESS STATES — prompt, chips, sources and actions
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.ai-prompt-send:active:not(:disabled){transform:translateY(1px) scale(.94)}
.ai-chip:active,.ai-act:active{transform:translateY(1px) scale(.95)}
.ai-source:active{transform:scale(.98)}