/* ============================================================
   MESSAGE BUBBLES
   ============================================================ */
@keyframes msgSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg {
  /* Bubbles size to their content, not to the column — a two-word reply in a
     full-width pill is the thing that made the old chat read as a log. */
  width: fit-content;
  max-width: 76%;
  padding: 10px 14px;
  margin: 10px 0;
  line-height: 1.55;
  word-wrap: break-word;
  position: relative;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  animation: msgSlideIn 0.24s ease forwards;
}

/* User messages keep the bubble; ARIA messages run full width. */
.msg.user {
  background: var(--accent);
  color: #fff;
  margin-left: auto;
  border: none;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.msg.aria {
  /* Overrides the fit-content width the bubbles use. ARIA messages run the
     full column, and a block child with no intrinsic width — a visualization
     frame, a table — would otherwise collapse to nothing under fit-content. */
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 14px 16px 10px 16px;
  margin-left: 0;
  color: var(--text);
}

/* The sender label used to be an absolutely positioned ::before while the
   real .msgSender element was display:none. That left .msgHeader with only
   one visible child, so its space-between pushed the action buttons to the
   left, straight underneath the floating label. Using the real element puts
   the name and the buttons on one row, which is what the layout expects. */
.msgSender {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  line-height: 1;
}

.msg.user .msgSender {
  color: rgba(255, 255, 255, 0.75);
}

.msgTimestamp {
  font-size: 0.6rem;
  color: var(--text-3);
  letter-spacing: 0;
  line-height: 1;
}

.msg.user .msgTimestamp {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   INPUT BAR
   ============================================================ */
#inputBar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 2;
  gap: 8px;
}

#userInput {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  outline: none;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
  caret-color: var(--accent);
}

#userInput::placeholder {
  color: var(--text-3);
  letter-spacing: 0;
}

#userInput:focus {
  border-color: var(--accent-text);
}

#sendBtn {
  border-radius: var(--r-full);
}

/* VOICE BUTTONS */
.voiceBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A flex container drops the whitespace between the icon and the label, so
     the gap has to be declared. Matches .primaryBtn / .secondaryBtn. */
  gap: 6px;
  padding: 8px 12px;
  min-height: 34px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.72rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.voiceBtn:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

#callModeBtn.active {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
  animation: callPulse 1.6s ease-in-out infinite;
}

@keyframes callPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

#ttsBtn.active,
#vttBtn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* VOICE WAVE */
#voiceWave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 6px;
}

#voiceWave span {
  display: inline-block;
  width: 3px;
  height: 4px;
  background: var(--accent);
  border-radius: var(--r-full);
}

/* Active wave bars: driven by JS; fallback animation */
#voiceWave.active span:nth-child(1) {
  animation: wave 0.6s 0s ease-in-out infinite alternate;
}
#voiceWave.active span:nth-child(2) {
  animation: wave 0.6s 0.1s ease-in-out infinite alternate;
}
#voiceWave.active span:nth-child(3) {
  animation: wave 0.6s 0.2s ease-in-out infinite alternate;
}
#voiceWave.active span:nth-child(4) {
  animation: wave 0.6s 0.1s ease-in-out infinite alternate;
}
#voiceWave.active span:nth-child(5) {
  animation: wave 0.6s 0.3s ease-in-out infinite alternate;
}
#voiceWave.active span:nth-child(6) {
  animation: wave 0.6s 0.05s ease-in-out infinite alternate;
}

@keyframes wave {
  from {
    height: 4px;
    opacity: 0.5;
  }
  to {
    height: 22px;
    opacity: 1;
  }
}

/* ============================================================
   EMPTY / NEW CHAT STATE
   Shows when a fresh chat has zero messages — welcome + suggestions
   ============================================================ */
.emptyChatState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
  gap: 14px;
  text-align: center;
  animation: emptyFadeIn 0.4s ease-out;
}
@keyframes emptyFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.emptyChatLogo {
  font-family: var(--font-display, var(--font-serif));
  font-size: 3.4rem;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 0;
}
.emptyChatLogo .bootLogoA,
.emptyChatLogo .bootLogoR,
.emptyChatLogo .bootLogoI,
.emptyChatLogo .bootLogoA2 {
  color: inherit;
  text-shadow: none;
}
.emptyChatGreeting {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.emptyChatPrompt {
  font-size: 1.5rem;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.emptyChatSuggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin-top: 14px;
}
.emptyChatSuggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr),
    transform var(--tr), color var(--tr);
  text-align: left;
  font-family: inherit;
}
.emptyChatSuggestion:hover {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
  transform: translateY(-1px);
}
.emptyChatSuggestion:active {
  transform: translateY(0);
}
.emptyChatIcon {
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--text-3);
  display: flex;
  align-items: center;
  transition: color var(--tr);
}
.emptyChatSuggestion:hover .emptyChatIcon {
  color: var(--accent-text);
}
.emptyChatLabel {
  flex: 1;
}
.emptyChatHint {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--text-3);
  letter-spacing: 0;
}
.emptyChatHint kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--font-mono-stack);
  font-size: 0.72rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
}