/* Liquid Glass, customer chat. Kept separate from the legacy stylesheet so
   the visual system is intentional rather than a stack of small overrides. */
:root {
  --liquid-ink: #16352d;
  --liquid-muted: #557168;
  --liquid-white: rgba(255, 255, 255, .60);
  --liquid-line: rgba(255, 255, 255, .72);
  --liquid-shadow: 0 18px 42px rgba(22, 67, 52, .15);
}

html, body { background: #e7f0ed; }
body {
  background:
    radial-gradient(90rem 52rem at -16% -18%, color-mix(in srgb, var(--chat-theme) 30%, white), transparent 62%),
    radial-gradient(62rem 42rem at 110% 112%, color-mix(in srgb, var(--chat-theme) 18%, #d8e6ef), transparent 66%),
    #e7f0ed;
}

.chat-container {
  position: relative;
  isolation: isolate;
  background: rgba(244, 250, 247, .42);
  border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
}

.chat-header {
  min-height: 70px;
  background: rgba(18, 72, 55, .52);
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,35,24,.12);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.chat-header::before { opacity: .9; filter: blur(18px); }
.chat-header::after { background: linear-gradient(120deg, rgba(255,255,255,.28), transparent 38%, rgba(255,255,255,.05) 70%); }
.header-content { min-height: 58px; }
.ai-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 16px rgba(0,43,29,.14);
}
.ai-avatar img, .ai-avatar img.ai-avatar-img { border-radius: 11px; }
.header-info h1 { font-size: 17px; font-weight: 680; text-shadow: 0 1px 1px rgba(0,0,0,.12); }
.header-info { min-width: 0; }
.channel-subtitle { margin: 3px 0 0; color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tts-toggle, .handoff-toggle {
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -9px 18px rgba(0,25,17,.10);
}
.intent-toggle { background: rgba(255,255,255,.26); }
.human-toggle { background: rgba(5,38,27,.28); }
.tts-toggle:hover, .handoff-toggle:hover { background: rgba(255,255,255,.33); }

.messages-area {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.32)),
    transparent;
}
.message { margin-bottom: 20px; }
.message-avatar {
  border: 1px solid rgba(255,255,255,.84);
  background: rgba(255,255,255,.62);
  box-shadow: 0 7px 16px rgba(22,67,52,.12);
}
.message-bubble {
  border: 1px solid var(--liquid-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 24px rgba(27,78,60,.10);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.message.ai .message-bubble {
  color: var(--liquid-ink);
  background: rgba(255,255,255,.58);
}
.message.user .message-bubble {
  color: #fff;
  background: color-mix(in srgb, var(--chat-theme) 74%, #123f31);
  border-color: rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px color-mix(in srgb, var(--chat-theme) 24%, transparent);
}
.message-time { color: var(--liquid-muted); }
.welcome-section .quick-questions { margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.welcome-section .quick-question {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--chat-theme) 24%, white);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  color: color-mix(in srgb, var(--chat-theme) 78%, #17352d);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.welcome-section .quick-question:hover { background: color-mix(in srgb, var(--chat-theme) 10%, white); }
.message.ai .message-bubble .welcome-section a.quick-question,
.message.ai .message-bubble .welcome-section a.quick-question:hover {
  text-decoration: none;
}

.chat-authority-panel {
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 14px;
  background: rgba(255,255,255,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  position: relative;
  z-index: 1;
}
.intent-conversation-panel {
  position: relative;
  z-index: 10;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--chat-theme) 38%, white);
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(24,74,55,.13);
}
.intent-sheet-form-button { margin-top: 0; }
.intent-conversation-panel > .intent-sheet-form-button { margin-top: 8px; }
.chat-ai-note { color: rgba(43,72,62,.76); }
.chat-source-badge { color: #176a46; background: rgba(230,255,242,.76); }

.input-area {
  margin: 0 14px 14px;
  width: auto;
  padding: 9px 10px;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 18px;
  background: rgba(255,255,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 28px rgba(25,74,57,.14);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.message-input {
  border-color: transparent;
  border-radius: 13px;
  background: rgba(255,255,255,.56);
  color: var(--liquid-ink);
  box-shadow: inset 0 1px 1px rgba(22,67,52,.07);
}
.message-input:focus { border-color: transparent; box-shadow: inset 0 1px 1px rgba(22,67,52,.07), 0 0 0 3px color-mix(in srgb, var(--chat-theme) 19%, transparent); }
.message-input::placeholder { color: #5d776e; }
.voice-button, .send-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 14px;
}
.voice-button { background: rgba(255,255,255,.68); }
.send-button {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--chat-theme) 82%, #063c2b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -12px 20px rgba(0,31,20,.14), 0 8px 16px color-mix(in srgb, var(--chat-theme) 25%, transparent);
}
.send-button::after {
  content: "";
  position: absolute;
  inset: 1px 1px 46% 1px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  pointer-events: none;
}
.send-button svg { position: relative; z-index: 1; }

@media (min-width: 769px) {
  .chat-container { max-width: 1280px; margin: 20px auto; height: calc(100vh - 40px); border-radius: 24px; }
  .chat-header { border-radius: 23px 23px 0 0; }
  .input-area { margin: 0 18px 18px; }
}
@media (max-width: 520px) {
  .chat-header { min-height: 64px; }
  .ai-avatar { width: 42px; height: 42px; }
  .input-area { margin: 0 8px 8px; border-radius: 16px; }
  .voice-button, .send-button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-radius: 13px; }
}
@media (prefers-reduced-transparency: reduce) {
  .chat-container, .chat-header, .message-bubble, .input-area, .chat-authority-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Keep answer metadata, intent actions and QR feedback in one vertical rail. */
.message-content { min-width: 0; }
.chat-authority-panel, .intent-conversation-panel, .intent-share-panel { width: 100%; max-width: 100%; clear: both; box-sizing: border-box; }
.chat-authority-panel { display: flex; flex-direction: column; gap: 8px; }
.chat-authority-panel .chat-product-cards, .chat-authority-panel .chat-ai-note { margin: 0; }
.chat-next-actions, .intent-conversation-actions { position: relative; z-index: 1; }
.intent-conversation-actions button { min-height: 36px; }

/* Intent actions are a single control family: equal height prevents the
   confirmation, full-form and secondary actions from visually competing. */
.intent-conversation-panel .chat-action-button {
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  padding: 0 10px;
  white-space: nowrap;
}
.intent-conversation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .82fr) minmax(0, 1.25fr);
  align-items: stretch;
  gap: 8px;
}
.intent-conversation-actions .chat-action-button,
.intent-conversation-panel > .intent-sheet-form-button { width: 100%; }
.intent-conversation-actions .intent-sheet-form-button { margin-top: 0; }
.intent-conversation-note { margin: 8px 0 12px; color: var(--text-secondary, #64748b); font-size: 13px; line-height: 1.55; }
.intent-share-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.intent-qr-download { min-height: 36px; height: 36px; padding: 0 12px; white-space: nowrap; }
@media (max-width: 520px) {
  .channel-subtitle { font-size: 10px; }
  .intent-conversation-panel .chat-action-button { padding: 0 6px; font-size: 11px; }
}