/* ============================================================================
   FARMSys — chat message primitives
   Shared by the partner chat and the vendor popup. Both render these class
   names from JS, so the rules cannot live in either page's own sheet.
   Load this wherever chat-core.js loads.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.chat__system{
  font-family:var(--font-mono);
  font-size:.8125rem;
  line-height:1.7;
  color:#00e5ff66;
}
.chat__system > * + *{margin-top:.375rem}

/* Gutter + block, not bubbles: the label column is the terminal prompt. */
.msg{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;
  padding:1rem .25rem;
  font-family:var(--font-mono);
  font-size:.875rem;
  line-height:1.75;
}
.msg + .msg{border-top:1px solid #00e5ff0d}
.msg__tag{font-size:.75rem;line-height:1.75;white-space:nowrap}
.msg__text{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}

.msg--user .msg__tag{color:#00e5ff44}
.msg--user .msg__text{color:#fff}
.msg--ai .msg__tag{color:var(--cyan)}
.msg--ai .msg__text{color:var(--text-body)}
.msg--error .msg__tag{color:var(--amber)}
.msg--error .msg__text{color:var(--text-body)}

.msg__tools{
  grid-column:2;
  display:flex;gap:.25rem;margin-top:.5rem;
  opacity:0;transition:opacity .15s ease;
}
.msg:hover .msg__tools,
.msg:focus-within .msg__tools{opacity:1}
.msg__tool{
  padding:.1875rem .5rem;border:1px solid #00e5ff1a;background:transparent;
  color:#00e5ff66;font-family:var(--font-mono);font-size:.6875rem;
  cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.msg__tool:hover{color:var(--cyan);border-color:#00e5ff44}

.chat__dots{display:inline-flex;align-items:center;gap:.375rem;height:1.75em}
.chat__dots i{
  width:.375rem;height:.375rem;border-radius:9999px;background:var(--cyan);
  opacity:.25;animation:chatDot 1.2s ease-in-out infinite;
}
.chat__dots i:nth-child(2){animation-delay:.18s}
.chat__dots i:nth-child(3){animation-delay:.36s}
@keyframes chatDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  .chat__dots i{animation:none;opacity:.7}
}