/* chatbot.css - conversational intake panel for the System-1 executor.
   Classic stylesheet, no dependencies. Matches the executor.css palette.
   Visible focus everywhere, logical tab order follows the DOM order. */

.s1c-chat {
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: #f8fafc;
}

.s1c-chat .s1c-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.s1c-chat .s1c-lede {
  margin: 0 0 1rem;
  color: #334155;
}

/* Trust line: live counter next to the guarantee copy. */
.s1c-chat .s1c-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.s1c-chat .s1c-netcount {
  font-variant-numeric: tabular-nums;
}

.s1c-chat .s1c-draftbadge {
  margin-left: auto;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Message list: capped height, scrolls as the run narrates. */
.s1c-chat .s1c-log {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 26rem;
  overflow-y: auto;
}

.s1c-chat .s1c-msg {
  display: flex;
}

.s1c-chat .s1c-bot {
  justify-content: flex-start;
}

.s1c-chat .s1c-user {
  justify-content: flex-end;
}

.s1c-chat .s1c-bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.s1c-chat .s1c-bot .s1c-bubble {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-bottom-left-radius: 0.2rem;
  color: #0f172a;
}

.s1c-chat .s1c-user .s1c-bubble {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-bottom-right-radius: 0.2rem;
  color: #0f172a;
}

.s1c-chat .s1c-bubble p {
  margin: 0 0 0.5rem;
}

.s1c-chat .s1c-bubble p:last-child {
  margin-bottom: 0;
}

.s1c-chat .s1c-status .s1c-bubble {
  background: #f1f5f9;
  border-style: dashed;
  color: #475569;
}

.s1c-chat .s1c-error .s1c-bubble {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #7f1d1d;
}

/* Chips: real buttons, pill style, roving tabindex in JS. */
.s1c-chat .s1c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.s1c-chat .s1c-chip {
  border: 1px solid #94a3b8;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  color: #0f172a;
}

.s1c-chat .s1c-chip:hover {
  border-color: #2563eb;
  color: #1d4ed8;
}

.s1c-chat .s1c-chip:focus-visible,
.s1c-chat .s1c-pastetoggle:focus-visible,
.s1c-chat .s1c-textarea:focus-visible,
.s1c-chat .btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Action row under the log. */
.s1c-chat .s1c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.s1c-chat .s1c-pastetoggle {
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: #1d4ed8;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}

.s1c-chat .s1c-paste .s1c-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  border: 1px solid #94a3b8;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: #ffffff;
  color: #0f172a;
}

@media (max-width: 40rem) {
  .s1c-chat .s1c-bubble {
    max-width: 95%;
  }
}

/* ---- Prod launch refinements: ledger palette, tactile chips, trust pulse.
   Signature micro-interaction is deliberately small; calm everywhere else.
   Animations on transform/opacity only. No em dashes. ---- */

/* Ledger palette: teal for action/focus, paper/ink surfaces. */
.s1c-chat .s1c-chip:hover { border-color: #0e6e64; color: #0a4f48; }
.s1c-chat .s1c-chip:focus-visible,
.s1c-chat .s1c-pastetoggle:focus-visible,
.s1c-chat .s1c-textarea:focus-visible,
.s1c-chat .btn:focus-visible { outline: 3px solid #0e6e64; outline-offset: 2px; }
.s1c-chat .s1c-pastetoggle { color: #0a4f48; }
.s1c-chat .s1c-trust { background: #e2efec; border-color: #0e6e64; }
.s1c-chat .s1c-user .s1c-bubble { background: #e2efec; border-color: #0e6e64; }

/* Tactile chips: 44px targets, sub-200ms press. */
.s1c-chat .s1c-chip {
  min-height: 44px;
  transition: transform 120ms ease-out, border-color 120ms ease-out;
}
.s1c-chat .s1c-chip:active { transform: scale(0.97); }
.s1c-chat .s1c-actions .btn { min-height: 44px; }

/* Message stagger: 60ms fade-slide as the conversation grows. */
.s1c-chat .s1c-msg {
  animation: s1cmsgin 200ms ease-out both;
  animation-delay: calc(var(--s1-i, 0) * 60ms);
}
@keyframes s1cmsgin {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Trust badge pulse when a step completes. */
.s1c-chat .s1c-trust.s1-pulse { animation: s1cpulse 300ms ease-out; }
@keyframes s1cpulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .s1c-chat .s1c-msg { animation: none; }
  .s1c-chat .s1c-trust.s1-pulse { animation: none; }
  .s1c-chat .s1c-chip { transition: none; }
  .s1c-chat .s1c-chip:active { transform: none; }
}

@media (max-width: 24.375rem) {
  .s1c-chat { padding: 1rem; }
  .s1c-chat .s1c-draftbadge { margin-left: 0; }
}

/* ---- Persistent refinement (2026-10-05): text row, typing indicator,
   gap list, docked-at-panel spacing. Radius tiers per the brief:
   chips/inputs 10px, panel 14px. Ledger teal accent only. ---- */

/* The chat docks at panel level beside the review cards and results. */
.s1c-chat.s1c-docked {
  margin-top: 1.25rem;
}

/* Refinement text row: input + send, same chip language as quick mode. */
.s1c-chat .s1c-textrow {
  display: flex;
  gap: 0.5rem;
}

.s1c-chat .s1c-textinput {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #94a3b8;
  background: #ffffff;
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.s1c-chat .s1c-textinput::placeholder {
  color: #64748b;
}

.s1c-chat .s1c-textinput:focus {
  border-color: #0e6e64;
}

.s1c-chat .s1c-textinput:focus-visible {
  outline: 3px solid #0e6e64;
  outline-offset: 2px;
}

.s1c-chat .s1c-send {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid #0e6e64;
  border-radius: 0.625rem;
  background: #0e6e64;
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}

.s1c-chat .s1c-send:hover {
  background: #0a4f48;
  border-color: #0a4f48;
}

.s1c-chat .s1c-send:focus-visible {
  outline: 3px solid #0e6e64;
  outline-offset: 2px;
}

/* Typing indicator: three dots, brief and honest, always resolves. */
.s1c-chat .s1c-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.9rem;
}

.s1c-chat .s1c-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #0e6e64;
  opacity: 0.3;
  animation: s1cdot 900ms ease-in-out infinite;
}

.s1c-chat .s1c-dot:nth-child(2) { animation-delay: 150ms; }
.s1c-chat .s1c-dot:nth-child(3) { animation-delay: 300ms; }

@keyframes s1cdot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Gap-analysis list inside a bot bubble. */
.s1c-chat .s1c-gaplist {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.s1c-chat .s1c-gaplist li {
  margin-bottom: 0.3rem;
}

.s1c-chat .s1c-gaplist li:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .s1c-chat .s1c-dot { animation: none; opacity: 0.6; }
}