/* GENERATED FILE — DO NOT EDIT.
   Source: 08_demo_builds/shared/trinity-chat.css
   Regenerate: python3 08_demo_builds/tools/sync_shared.py
   Edits here are lost on the next sync. */
/* =============================================================================
   TRINITY CHAT — docked intake surface for RetainerFund and FamilyLawPath
   =============================================================================
   Remandly already carries its own intake chat inside step 8 of app.html, and
   that markup is frozen for film capture. This file is for the two platforms
   that had no chat client at all.

   Every colour here is a token. Nothing is hard-coded, so the panel picks up
   each platform's accent from tokens.css without a per-platform stylesheet.
   Text on a filled accent uses --accent-fg, never white, because white on the
   FamilyLawPath green and on the Remandly orange both fail contrast.

   The panel is docked, not modal. A modal would cover the page it is meant to
   be explaining, and on this demo the page behind is the argument.
   ============================================================================= */

/* -- launcher --------------------------------------------------------------- */
.tc-launch {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-fg);
  font: inherit;
  font-size: var(--fs-14, 14px);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 180ms ease, opacity 180ms ease;
}
.tc-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.tc-launch:active { transform: translateY(0); }
.tc-launch svg { flex: none; }
.tc-launch[hidden] { display: none; }

/* -- panel ------------------------------------------------------------------ */
.tc-panel {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 61;
  width: min(400px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  /* Opens from the launcher corner rather than fading in from nowhere. */
  transform-origin: 100% 100%;
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease;
}
.tc-panel.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .tc-panel, .tc-launch { transition: opacity 120ms linear; }
  .tc-panel { transform: none; }
}

.tc-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
}
.tc-head-txt { min-width: 0; flex: 1; }
.tc-title {
  margin: 0;
  font-size: var(--fs-14, 14px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.tc-sub {
  margin: 3px 0 0;
  font-size: var(--fs-11, 11px);
  line-height: 1.45;
  color: var(--text-muted);
}
.tc-x {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.tc-x:hover { background: var(--surface-3); color: var(--text-primary); }

/* -- log -------------------------------------------------------------------- */
.tc-log {
  flex: 1;
  min-height: 180px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.tc-msg { display: flex; }
.tc-ai { justify-content: flex-start; }
.tc-me { justify-content: flex-end; }
.tc-bubble {
  margin: 0;
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: var(--fs-14, 14px);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tc-ai .tc-bubble {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 5px;
  color: var(--text-primary);
}
.tc-me .tc-bubble {
  background: var(--accent-fill);
  border-bottom-right-radius: 5px;
  color: var(--accent-fg);
}

/* Three dots while the model is thinking. This is the only place the demo is
   allowed to show waiting, and it never becomes an error. */
.tc-wait { display: flex; gap: 5px; align-items: center; padding: 14px; }
.tc-wait i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: tc-pulse 1.1s ease-in-out infinite;
}
.tc-wait i:nth-child(2) { animation-delay: 0.16s; }
.tc-wait i:nth-child(3) { animation-delay: 0.32s; }
@keyframes tc-pulse {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-wait i { animation: none; opacity: 0.55; }
}

/* -- composer --------------------------------------------------------------- */
.tc-foot {
  border-top: 1px solid var(--hairline);
  padding: 12px 14px 14px;
  background: var(--surface-1);
}
.tc-input {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-14, 14px);
  line-height: 1.5;
}
.tc-input::placeholder { color: var(--text-faint); }
.tc-input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
  border-color: transparent;
}
.tc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-top: 10px;
}
.tc-hint {
  font-size: var(--fs-11, 11px);
  line-height: 1.4;
  color: var(--text-muted);
  min-width: 0;
}
.tc-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.tc-send {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-fill);
  color: var(--accent-fg);
  font: inherit;
  font-size: var(--fs-14, 14px);
  font-weight: 600;
  cursor: pointer;
}
.tc-send[disabled] { opacity: 0.55; pointer-events: none; }

/* Voice. Secondary by design: the written channel is the one that always
   works, and the spoken one is the flourish on top of it. */
.tc-voice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tc-voice:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--accent-text);
}
.tc-voice-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}
.tc-voice.is-live .tc-voice-dot { background: var(--accent-text); }

/* Host for the ElevenLabs agent widget. Zero height until something mounts,
   so an absent widget leaves no gap and no empty box on screen. */
.tc-voice-host:empty { display: none; }
.tc-voice-host {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* -- narrow screens --------------------------------------------------------- */
@media (max-width: 560px) {
  .tc-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
  }
  .tc-launch { right: 12px; bottom: 12px; }
}