/* WizardUx Chat/Interview Styles
 * Campfire-pattern messaging interface for AI interview steps
 * Desktop-first - DO NOT modify these base styles for mobile
 */

/* ==========================================================================
   CHAT STEP CONTAINER
   Full-height layout for chat within modal
   ========================================================================== */

.wizard-chat-step {
  height: 100%;
}

.wizard-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Turbo frame needs to fill container */
.wizard-chat-frame,
turbo-frame.wizard-chat-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ==========================================================================
   CHAT INTERFACE
   Three-part layout: messages (scrollable), typing indicator, input form
   ========================================================================== */

.wizard-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Allow flex shrinking */
}

/* ==========================================================================
   MESSAGES AREA
   Scrollable container for message history
   ========================================================================== */

.wizard-chat__messages {
  flex: 1;
  min-height: 0; /* Allow flex shrinking */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  /* Override any scroll-snap that prevents programmatic scrolling */
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  display: flex;
  flex-direction: column;
}

/* Messages container within scrollable area */
.wizard-chat__messages > .messages,
.wizard-chat__messages-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--wizard-spacing-half);
  /* Override grid display to use block for proper layout */
  display: block !important;
}

/* ==========================================================================
   INPUT WRAPPER
   Fixed at bottom, contains typing indicator and form
   ========================================================================== */

.wizard-chat__input-wrapper {
  flex: none;
  position: relative;
  background: var(--wizard-color-shade);
  border: none !important;
}

/* ==========================================================================
   TYPING INDICATOR
   Shows when bot is typing, positioned above input form
   Campfire pattern: minimal, above composer
   ========================================================================== */

.wizard-chat__typing-indicator {
  display: none;
  padding: 0.5em var(--wizard-spacing-inline) 0.5em calc(var(--wizard-spacing-inline) + 1vw);
  background: var(--wizard-color-shade);
  border: none !important;
  /* Override any absolute positioning from composer patterns */
  position: static !important;
  opacity: 1 !important;
  inset: auto !important;
}

.wizard-chat__typing-indicator.wizard-typing--active {
  display: flex;
  align-items: center;
}

.wizard-chat__typing-text {
  font-size: var(--wizard-text-small);
  color: var(--wizard-color-text-subtle);
  display: flex;
  align-items: center;
  gap: 0.5ch;
}

/* ==========================================================================
   INPUT FORM
   Campfire composer pattern: text input + send button
   ========================================================================== */

.wizard-chat__input {
  display: flex;
  align-items: center;
  gap: var(--wizard-spacing-inline);
  padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
}

.wizard-chat__input .input,
.wizard-chat__input-field {
  flex: 1;
}

.wizard-chat__input .btn,
.wizard-chat__submit {
  flex: none;
}

/* ==========================================================================
   MESSAGE STYLES
   Simplified message display for wizard context
   ========================================================================== */

.wizard-chat .message {
  --message-border-radius: 0.5em;
  padding: var(--wizard-spacing-half);
  /* Override messages.css which may hide messages until JS runs */
  visibility: visible;
}

/* Hide day separators in interview context */
.wizard-chat .message__day-separator {
  display: none;
}

/* Hide room indicator */
.wizard-chat .message__room {
  display: none;
}

/* Show timestamp but remove link styling */
.wizard-chat .message__permalink {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

/* Hide boosts/reactions in wizard context */
.wizard-chat .boosts,
.wizard-chat .message__boosts {
  display: none;
}

/* ==========================================================================
   CUSTOM MESSAGE STYLES
   For wizard-specific message rendering (not using shared message partial)
   ========================================================================== */

.wizard-message {
  display: flex;
  gap: var(--wizard-spacing-inline);
  padding: var(--wizard-spacing-half);
  margin-bottom: var(--wizard-spacing-half);
}

.wizard-message--bot {
  background: var(--wizard-color-border);
  border-radius: 0.5em;
}

.wizard-message--user {
  flex-direction: row-reverse;
}

.wizard-message__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wizard-color-text);
  color: var(--wizard-color-text-reversed);
  font-size: 0.875rem;
  font-weight: 600;
}

.wizard-message__avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.wizard-message__content {
  flex: 1;
  min-width: 0;
}

.wizard-message--user .wizard-message__content {
  text-align: right;
}

.wizard-message__body {
  line-height: 1.5;
}

.wizard-message__body strong {
  font-weight: 600;
}

/* ==========================================================================
   GREETING PLACEHOLDER
   Shown while AI is loading first response
   ========================================================================== */

.wizard-chat__greeting {
  padding: var(--wizard-spacing-inline);
}

.wizard-chat__greeting-message {
  line-height: 1.5;
}

.wizard-chat__greeting-message p {
  margin: 0;
}

.wizard-chat__greeting-message p + p {
  margin-top: 0.5em;
}