/* Technical Assistant: the chat-specific pieces only.
   Everything else (tokens, type scale, .btn, .card, .field, header, footer)
   comes from the site's own stylesheet, inlined in the page exactly as every
   other page on hefestus-cannabis.com does it. Do not redefine brand tokens
   here: if a color is needed, use the site variable.

   Contrast measured, not eyeballed (same discipline as the age gate), and
   measured against the WORST-CASE backdrop: the hero's lightest gradient stop
   plus its mid-blue radial highlight plus the card's own white veil, computed
   as rgb(73,85,111). The site's usual on-dark secondary text, rgba(223,224,220,.72),
   only reaches 3.8:1 there, so secondary text on this page is solid --pale (5.7:1)
   and hierarchy is carried by size and weight instead of opacity. */

[hidden]{display:none!important}

/* ---------- the panel (a site .card that must not behave like a link tile) ---------- */
.ta-panel{max-width:760px}
.ta-panel:hover{transform:none;box-shadow:none;border-color:var(--line)}
.ta-panel h3{margin-bottom:.4rem}
.ta-panel-note{font-size:.95rem;color:var(--pale);max-width:56ch}

.ta-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- access code ---------- */
.ta-lock-row{display:flex;gap:.7rem;align-items:stretch}
.ta-lock-row input{flex:1;min-width:0}
.ta-lock-row .btn{flex-shrink:0}

/* Alerts carry their meaning in the wording and the accent rule, not in the text
   colour: a tinted salmon only measured 3.6:1 on the worst-case backdrop. */
.ta-alert{
  margin-top:.9rem;font-size:.92rem;color:var(--pale);font-weight:500;
  border-left:2px solid var(--orange);padding-left:.8rem;
}

/* ---------- chat ---------- */
.ta-chat{display:flex;flex-direction:column}
.ta-chat-head{border-bottom:1px solid var(--line);padding-bottom:1rem}

.ta-messages{
  display:flex;flex-direction:column;gap:.85rem;
  min-height:220px;max-height:52vh;overflow-y:auto;
  padding:1.2rem .1rem;scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){.ta-messages{scroll-behavior:auto}}

.ta-msg{
  max-width:86%;border-radius:3px;padding:.75rem 1rem;
  font-size:.98rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;
}
.ta-msg-bot{
  align-self:flex-start;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--pale);
}
.ta-msg-user{align-self:flex-end;background:var(--sage-ink);color:#fff}
.ta-msg-error{
  align-self:flex-start;background:transparent;
  border:1px dashed var(--orange);color:var(--pale);
}

.ta-typing{
  align-self:flex-start;color:var(--pale);
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .1rem;
}
.ta-typing::after{content:"";animation:ta-dots 1.2s steps(4,end) infinite}
@keyframes ta-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.ta-typing::after{content:"...";animation:none}}

/* ---------- composer (uses the site's .field input treatment) ---------- */
.ta-composer{
  display:flex;gap:.7rem;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:1.1rem;
}
.ta-composer textarea{
  flex:1;min-width:0;resize:none;max-height:9rem;
  font-family:inherit;font-size:1rem;line-height:1.5;
  padding:.85rem 1rem;border-radius:3px;
  border:1px solid rgba(45,57,84,.22);background:#fff;color:var(--ink);
}
.ta-composer textarea:focus{outline:2px solid var(--mint);outline-offset:1px;border-color:var(--mint)}
.ta-composer .btn{flex-shrink:0}
.ta-composer .btn:disabled{opacity:.55;cursor:wait}
.ta-composer textarea:disabled{opacity:.7}

.ta-fine{
  margin-top:1.6rem;max-width:70ch;
  font-size:.85rem;line-height:1.65;color:var(--pale);
}

@media(max-width:600px){
  .ta-msg{max-width:96%}
  .ta-lock-row{flex-direction:column}
  .ta-lock-row .btn{justify-content:center}
  .ta-messages{max-height:58vh}
}