/* ============================================================================
   FARMSys — Business AI Chat
   Loads ONLY on the chat template. Every colour, font, radius and breakpoint
   comes from css/styles.css; nothing here redefines a token or duplicates an
   existing component. Breakpoints reused as-is: 640 / 768 / 1024.
   ========================================================================== */

/* ─── Utility the base sheet didn't need yet ──────────────────────────────── */

.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;
}

/* ─── Page intro (shorter than the home hero — the chat is the focal point) ── */

.chat-intro{
  position:relative;
  padding:9rem 1.5rem 3rem;
  background:var(--bg);
  overflow:hidden;
}
.chat-intro__bloom{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,229,255,.08) 0%,transparent 70%);
  pointer-events:none;
}
.chat-intro__inner{position:relative;z-index:10}
.chat-intro .head{margin-bottom:0}

/* ─── Chat section ────────────────────────────────────────────────────────── */

.chat-section{padding-top:2rem}

.chat__log{
  padding:1.25rem;
  min-height:11rem;
  max-height:55vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}

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

/* Messages ---------------------------------------------------------------- */

.msg{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-top:1.25rem;
  font-family:var(--font-mono);
  font-size:.875rem;
  line-height:1.625;
}
.msg__tag{
  flex-shrink:0;
  font-size:.75rem;
  line-height:1.625;
  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{
  border-left:1px solid #00e5ff22;
  padding-left:.75rem;
  margin-left:.125rem;
}
.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)}

/* Thinking indicator ------------------------------------------------------- */

.chat__dots{display:inline-flex;align-items:center;gap:.375rem;height:1.625em}
.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)}
}

/* Suggested questions ------------------------------------------------------ */

.chat__suggestions{
  padding:0 1.25rem 1.25rem;
  border-top:1px solid #00e5ff11;
  padding-top:1.25rem;
}
.chat__suggestions[hidden]{display:none}
.chat__suggestions-title{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:.75rem;
}
.chat__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chat__chip{
  padding:.375rem .75rem;
  border:1px solid #00e5ff33;
  background:#00e5ff08;
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  text-align:left;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.chat__chip:hover{border-color:var(--cyan);background:#00e5ff14}
.chat__chip[disabled]{opacity:.4;cursor:not-allowed}

/* Composer ----------------------------------------------------------------- */

.chat__composer{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:1rem 1.25rem;
  border-top:1px solid rgba(0,229,255,.2);
  background:var(--term-bar);
}
.chat__field{display:flex;align-items:flex-start;gap:.5rem;flex:1;min-width:0}
.chat__prompt{
  font-family:var(--font-mono);
  font-size:.875rem;
  line-height:1.5rem;
  color:#00e5ff44;
  padding-top:.5rem;
  white-space:nowrap;
  flex-shrink:0;
  display:none;
}
.chat__input{
  flex:1;
  min-width:0;
  width:100%;
  resize:none;
  max-height:8rem;
  padding:.5rem .75rem;
  background:var(--term-bg);
  border:1px solid #00e5ff33;
  border-radius:4px;
  color:#fff;
  font-family:var(--font-mono);
  font-size:1rem;          /* 16px keeps iOS Safari from zooming on focus */
  line-height:1.5rem;
  transition:border-color .2s ease;
}
.chat__input::placeholder{color:#4a7a82}
.chat__input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 1px #00e5ff44}
.chat__input:disabled{opacity:.5;cursor:not-allowed}

.chat__send{
  min-height:44px;      /* touch target */
  padding:.75rem 1.5rem;
  border:0;
  width:100%;
}
.chat__send[disabled]{opacity:.45;cursor:not-allowed}
.chat__send[disabled]:hover{background:var(--cyan)}

.chat__hint{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
}

/* Notes below the chat ------------------------------------------------------ */

.chat__notes{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75rem;
}
.chat__note{
  border:1px solid #00e5ff11;
  padding:1rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.625;
  color:var(--text-dim);
}
.chat__note-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  line-height:1rem;
  color:#fff;
  margin-bottom:.5rem;
}

/* ─── Breakpoints (existing ones only) ────────────────────────────────────── */

@media (min-width:640px){
  .chat__composer{flex-direction:row;align-items:flex-end}
  .chat__prompt{display:block}
  .chat__send{width:auto;flex-shrink:0}
  .chat__notes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:768px){
  .chat-intro{padding-top:11rem}
  .chat__log{min-height:15rem;max-height:60vh}
}

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