/* chat.css - Professional chat styles.
   SINGLE OWNER of .chat-panel: base + responsive rules all live here (they
   previously straddled core.css and this file, which made the load order in
   app.html load-bearing). */

/* Chat panel — grid row 5 of .main-screen (below the orb band, above the
   bottom hint). Its HEIGHT is grid-driven: the row is fit-content(26dvh)
   (30dvh short screens, 24dvh portrait — see core.css), so the panel sizes to
   its messages up to the cap and the old per-breakpoint max-height:*vh rules
   are gone. Width leaves a gutter so the panel clears the fixed bottom-corner
   controls (logout / camera) at narrow widths. */
.chat-panel {
  grid-row: 5;
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  width: min(700px, calc(100% - 9rem));
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  box-sizing: border-box;
  z-index: var(--z-cards);
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow: hidden;
  /* The parent .main-screen is pointer-events: none; the panel must always
     stay clickable. */
  pointer-events: auto;
  /* Opaque background so orb / audio bar never show through */
  background: color-mix(in srgb, var(--kuyil-bg) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--kuyil-line) 60%, transparent);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* Hidden (idle/greeting): display:none collapses the fit-content grid row to
   zero, so the orb recenters in the full column instead of leaving a reserved
   empty slot. */
.chat-panel.hidden {
  display: none;
}

/* Chat panel visibility while the kiosk is active (moved from
   kiosk-states.css so this file owns every .chat-panel rule). */
body[data-kiosk-mode="active"] .chat-panel {
  opacity: 1;
  pointer-events: auto;
}

/* Chat window - compact, professional with shadow fade and auto-scroll.
   flex: 1 + min-height: 0 makes it fill the panel and scroll internally. */
#chat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* Top padding pushes the first message clear of the fade zone below, so it
     stays fully readable when the chat isn't scrolled (the "Hello, how are
     you?" line was being dimmed by the mask). */
  padding: 1.75rem var(--space-3) var(--space-2);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--kuyil-text) 15%, transparent) transparent;
  justify-content: flex-start;
  scroll-behavior: smooth;
  /* Older messages fade as they scroll up under the top edge. Kept short
     (≈1.75rem) and aligned with the padding above so the newest messages are
     never dimmed — only content that actually scrolls past the top fades. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.4) 0.75rem,
    #000 1.75rem
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.4) 0.75rem,
    #000 1.75rem
  );
}

#chat::-webkit-scrollbar {
  width: 4px;
}

#chat::-webkit-scrollbar-track {
  background: transparent;
}

#chat::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* Chat line (message row) - compact */
.chat-line {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
  padding: var(--space-1) 0;
  animation: fade-in-up 0.25s ease;
  flex-shrink: 0;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sender label (You / Kuyil) - compact */
.chat-sender {
  font-size: var(--text-xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--kuyil-text) 50%, transparent);
  min-width: 2.5rem;
  text-align: right;
  flex-shrink: 0;
  padding-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03125rem;
  line-height: 1.5;
}

.chat-sender.user {
  color: var(--accent-cyan);
}

.chat-sender.assistant {
  color: var(--accent-violet);
}

/* Message bubble - compact, professional */
.chat-bubble {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, var(--kuyil-text) 8%, transparent);
  border-radius: 0.625rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  line-height: 1.5;
  color: color-mix(in srgb, var(--kuyil-text) 95%, transparent);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  white-space: pre-wrap;
}

/* User message styling */
.chat-line.user .chat-bubble {
  background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
}

/* Listening placeholder — dimmed, italic, pulsing dot */
.listening-placeholder-bubble {
  color: color-mix(in srgb, var(--accent-cyan) 50%, transparent) !important;
  font-style: italic;
  border-style: dashed !important;
}

.listening-placeholder-bubble span::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.3em;
  margin-bottom: 0.1em;
  background: color-mix(in srgb, var(--accent-cyan) 50%, transparent);
  border-radius: 50%;
  vertical-align: middle;
  animation: listening-pulse 1.2s ease-in-out infinite;
}

@keyframes listening-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Assistant message styling */
.chat-line.assistant .chat-bubble {
  background: color-mix(in srgb, var(--accent-violet) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-violet) 15%, transparent);
}

/* Thinking indicator */
.chat-line.thinking .chat-bubble {
  background: rgba(255, 255, 255, 0.04);
  font-style: italic;
  color: color-mix(in srgb, var(--kuyil-text) 50%, transparent);
}

/* Active (speaking) indicator — tinted by the speaking state colour. */
.chat-line-active .chat-bubble {
  border-color: color-mix(in srgb, var(--state-speaking) 40%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--state-speaking) 10%, transparent);
}

/* Chat placeholder styles */
.chat-placeholder {
  text-align: center;
  padding: var(--space-5);
  color: color-mix(in srgb, var(--kuyil-text) 40%, transparent);
  font-size: var(--text-base);
}

.chat-placeholder.hidden {
  display: none;
}

#chat-placeholder.hidden {
  display: none;
}

/* Focus/hover states for interactivity */
.chat-bubble:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

/* =====================================================================
   Aura CAPTION mode — the kiosk default. The conversation renders as large
   fading captions under the orb (last exchange only, sliced in ChatPanel):
   no boxed panel, no bubbles, no blur. A soft bottom scrim + text shadow
   keep contrast against the aurora without a panel (handbook 24, A11Y-040).
   The 'hotel' layout variant keeps the full transcript panel above.
   ===================================================================== */
.chat-panel--captions {
  background: radial-gradient(
    60% 100% at 50% 100%,
    color-mix(in srgb, var(--kuyil-bg) 55%, transparent),
    transparent
  );
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: min(880px, calc(100% - 9rem));
}

.chat-panel--captions #chat {
  mask-image: none;
  -webkit-mask-image: none;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  overflow: hidden;
  justify-content: flex-end;
  scrollbar-width: none;
}

.chat-panel--captions .chat-line {
  justify-content: center;
}

.chat-panel--captions .chat-bubble {
  flex: 0 1 auto;
  background: none;
  border: none !important;
  padding: 0;
  text-align: center;
  text-wrap: balance;
}

.chat-panel--captions .chat-bubble:hover {
  background: none;
}

/* Visitor line — quieter, above the assistant caption. */
.chat-panel--captions .chat-line.user .chat-bubble {
  font-size: var(--text-lg);
  font-weight: 400;
  color: color-mix(in srgb, var(--kuyil-text) 62%, transparent);
}

/* Assistant caption — the primary reading surface, sized for distance. */
.chat-panel--captions .chat-line.assistant .chat-bubble {
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.35;
  color: var(--kuyil-text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  font-style: normal;
}

.chat-panel--captions .chat-placeholder {
  padding: var(--space-3);
}

/* =====================================================================
   Responsive .chat-panel rules (same canonical breakpoints — see the comment
   block at the top of core.css). HEIGHT is owned by the grid row caps in
   core.css; only width/padding/radius vary here.
   ===================================================================== */
@media (max-width: 900px) {
  .chat-panel {
    /* Gutter clears the fixed bottom-corner controls (logout / camera). */
    width: calc(100% - 9rem);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }
}

@media (max-height: 700px) {
  .chat-panel {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .chat-panel {
    width: calc(100% - 7rem);
    padding: var(--space-2);
    border-radius: 10px;
  }
}

/* Portrait kiosks / tablets: chat docks across the bottom as a full-width bar
   (small side gutter), above the corner controls reserved by the main-screen
   bottom padding (core.css portrait block). */
@media (orientation: portrait) {
  .chat-panel {
    width: calc(100% - 1.5rem);
    max-width: none;
  }
}