/* =============================================================================
   Ela Web Prototype — shared chat styles
   -----------------------------------------------------------------------------
   Companion to ela-chat.js: the sidebar-history delete affordance, the
   composer attachment strip, attachments inside chat bubbles, the offline
   note, and the word-by-word reveal used for Ela's replies. Linked by every
   web-prototype page that renders the live history or a wired composer.
   ============================================================================= */

/* ===========================================================================
   SIDEBAR HISTORY — real items are interactive: hover surfaces a delete
   button (the DS `.chat-history__close` slot, hidden by the sidebar variant).
   =========================================================================== */
.chat-history--sidebar .chat-history__item {
  position: relative;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--br-sm);
  transition: background 120ms ease;
}
/* The hover pill bleeds 6px past the row via negative margins, but
   `.app__recent` is the scroll container (overflow-y:auto) and would clip it
   on the left/right. Widen the scrollport by the same amount and pad the
   content back, so alignment is unchanged while the pill renders in full. */
.app__recent {
  margin-left: -6px;
  margin-right: -6px;
  padding-left: 6px;
  padding-right: 6px;
}
.chat-history--sidebar .chat-history__item:hover,
.chat-history--sidebar .chat-history__item:focus-visible { background: var(--bg-secondary); }
.chat-history--sidebar .chat-history__item:focus-visible {
  outline: 2px solid var(--fg-brand);
  outline-offset: -2px;
}
.chat-history--sidebar .chat-history__item.is-active { background: var(--bg-secondary); }

/* Delete — sits on the row's right edge, revealed on hover / keyboard focus.
   visibility:hidden (not just opacity) so the invisible button can't swallow
   stray clicks on the row's right edge and delete without warning. */
.chat-history--sidebar .chat-history__close {
  display: inline-flex;              /* sidebar variant hides it — bring it back */
  width: 22px;
  height: 22px;
  border-radius: var(--br-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.chat-history--sidebar .chat-history__item:hover .chat-history__close,
.chat-history--sidebar .chat-history__item:focus-within .chat-history__close {
  opacity: 1;
  visibility: visible;
}
.chat-history--sidebar .chat-history__close:hover { color: var(--color-red-500); }
.chat-history--sidebar .chat-history__close .icon { font-size: 11px; }
/* No hover on touch — keep the delete always visible there instead. */
@media (hover: none) {
  .chat-history--sidebar .chat-history__close { opacity: 1; visibility: visible; }
}

.chat-history__empty {
  margin: 4px 0 0;
  font-size: var(--fz-s);
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* The user card's divider (its border-top) should sit flush at the end of the
   scroll area. The per-page rule leaves a 12px margin above the border, which
   reads as dead space between the last conversation and the divider — drop it
   so `.app__recent` (flex:1) reclaims the height and scrolls right to the line. */
.app__sidebar .app__user { margin-top: 0; }

/* While ela-chat.js restores the saved sidebar state on load (data-no-anim on
   .app, removed after first paint), suppress the slide/pad transitions so the
   sidebar appears already in place instead of animating in on every page. */
.app[data-no-anim],
.app[data-no-anim] .app__sidebar,
.app[data-no-anim] .app__main,
.app[data-no-anim] .app__rail,
.app[data-no-anim] .app__scrim { transition: none !important; }

/* The whole collapsed rail expands the sidebar (wired in ela-chat.js), so the
   strip reads as clickable — a faint tint on hover signals it, and the
   existing logo→expand-button crossfade (web.css) still does the rest. The
   avatar keeps its own (unchanged) hover/link affordance, not this tint. */
/* Subtle lift on hover: the raised/active surface (a step lighter than the
   canvas). Rounded on the left corners only — the strip hugs the left edge and
   stays square where the sidebar slides out from. The avatar keeps its own
   (unchanged) affordance. */
.app__rail { cursor: pointer; border-radius: var(--br-l) 0 0 var(--br-l); transition: background 120ms ease; }
.app__rail:hover { background: var(--bg-active); }
.app__rail-user { cursor: pointer; }

/* ===========================================================================
   COMPOSER ATTACHMENTS — chips above the composer body (inside .input root).
   =========================================================================== */
.attach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}
/* Empty strip is [hidden] — without this, display:flex would win over the
   attribute and the zero-height strip still opens the .input root's 8px gap. */
.attach-strip[hidden] { display: none; }
.attach-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* A freshly picked file settles in rather than popping into the strip. */
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
@starting-style {
  .attach-chip { opacity: 0; transform: scale(0.95); }
}
.attach-chip__thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--br-m);
  object-fit: cover;
  display: block;
  border: 1px solid var(--stroke-shine-highlight);
  box-shadow: var(--shadow-1);
  background: var(--bg-tertiary);
}
.attach-chip--file {
  padding: 8px 12px;
  border-radius: var(--br-full);
  background: var(--bg-active);
  border: 1px solid var(--stroke-secondary);
  box-shadow: var(--shadow-1);
  font-size: var(--fz-s);
  color: var(--text-secondary);
}
.attach-chip--file .icon { font-size: 12px; color: var(--text-tertiary); }
.attach-chip__name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--stroke-shine-highlight);
  border-radius: var(--br-full);
  background: var(--bg-active);
  color: var(--text-secondary);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: color 120ms ease;
}
.attach-chip__remove:hover { color: var(--color-red-500); }
.attach-chip__remove .icon { font-size: 9px; }

/* ===========================================================================
   THREAD ATTACHMENTS — images / file chips rendered with a user message.
   =========================================================================== */
.chat-msg__atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 6px;
}
.chat-msg__att-img {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--br-m);
  display: block;
  border: 1px solid var(--stroke-shine-highlight);
  box-shadow: var(--shadow-1);
  background: var(--bg-tertiary);
}
.chat-msg__att-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--br-full);
  background: var(--bg-active);
  border: 1px solid var(--stroke-secondary);
  font-size: var(--fz-s);
  color: var(--text-secondary);
}
.chat-msg__att-file .icon { font-size: 12px; color: var(--text-tertiary); }

/* A user turn that carries attachments stacks them above the bubble. */
.chat-msg--user.has-atts { flex-wrap: wrap; }

/* ===========================================================================
   OFFLINE NOTE — quiet hint under a mock reply when /api/ela-chat is unreachable.
   =========================================================================== */
.chat-note {
  margin: -6px 0 0 37px;              /* tucks under the Ela text, past the badge */
  font-size: var(--fz-xs);
  line-height: 1.4;
  color: var(--text-tertiary);
}
.chat-note .icon { font-size: 10px; margin-right: 4px; }

/* ===========================================================================
   WORD REVEAL — Ela's replies fade in word by word (ported from the quizzes).
   =========================================================================== */
.chat-msg .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  animation: ela-word-in 0.35s var(--ease-out) both;
}
@keyframes ela-word-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ela-word-fade {
  to { opacity: 1; }
}
/* Reduced motion: gentler, not zero. Words still fade in, but nothing rises —
   the old 0.01ms duration kept the stagger and made each word hard-pop. */
@media (prefers-reduced-motion: reduce) {
  .chat-msg .word { transform: none; animation-name: ela-word-fade; }
  .attach-chip { transition: opacity var(--dur-base) ease; }
}

/* ===========================================================================
   SIDEBAR USER CARD — compact trinity score (rendered by the identity sync
   in ela-chat.js in place of the old "Level" line). One dot + value per
   life area, colored with the topic tokens.
   =========================================================================== */
.app__user-trinity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.app__user-trinity-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.app__user-trinity-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--br-full);
  background: var(--trinity-dot, var(--text-tertiary));
}
.app__user-trinity-item--love     { --trinity-dot: var(--fg-topic-dating); }
.app__user-trinity-item--health   { --trinity-dot: var(--fg-topic-health); }
.app__user-trinity-item--business { --trinity-dot: var(--fg-topic-business); }