/*
 * ========================================================================
 * Copyright Universidade Federal do Espirito Santo (Ufes)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see https://www.gnu.org/licenses/.
 *
 * This program is released under license GNU GPL v3+ license.
 *
 * ========================================================================
 */

body { margin: 0; background: color-mix(in srgb, var(--primary-color) 4%, #e0e0e0); color: color-mix(in srgb, var(--primary-color) 6%, #2c2c2c); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-image: linear-gradient(180deg, var(--page-banner-color) 0, var(--page-banner-color) 190px, transparent 190px); }
.chat-shell { max-width: 960px; height: calc(100dvh - 64px); min-height: 360px; margin: 32px auto; display: flex; flex-direction: column; background: color-mix(in srgb, var(--primary-color) 5%, #f6f6f6); border-radius: 22px; box-shadow: 0 18px 65px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 14%, #262626) 19%, transparent); }
/* Keep the outer shadow visible during branding; only the inner surface is hidden
   and clipped, so Safari reloads do not need to repaint a previously hidden shadow. */
.chat-surface { display: flex; flex-direction: column; flex: 1; min-height: 0; border-radius: inherit; overflow: hidden; }
.chat-header { display: flex; align-items: center; gap: 14px; padding: 20px 26px; color: white; background: linear-gradient(115deg, var(--header-color), var(--primary-color)); flex-shrink: 0; }
.assistant-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 18px; background: #ffffff20; border: 1px solid #ffffff35; }
.presence-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; background: #95edb3; border: 3px solid #086659; border-radius: 50%; }
.contact-info { min-width: 0; }
.contact-info h1 { font-size: 19px; font-weight: 650; letter-spacing: -.35px; margin: 0; }
.contact-info p { margin: 1px 0 0; color: color-mix(in srgb, var(--primary-color) 13%, #e2e2e2); font-size: 12px; }
button { padding: 10px 15px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--primary-color) 11%, #ececec); color: var(--primary-color); font-weight: 600; transition: background .15s, transform .15s; }
button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-color) 12%, #e0e0e0); }
button:active:not(:disabled) { transform: translateY(1px); }
#new-conversation { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #ffffff13; border: 1px solid #ffffff38; color: white; font-size: 12px; white-space: nowrap; }
#new-conversation:hover { background: #ffffff25; }
#new-conversation svg { width: 18px; height: 18px; }
#messages { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 38px; background-color: color-mix(in srgb, var(--primary-color) 6%, #ececec); background-image: var(--chat-background-image, none); background-size: 420px 340px; background-repeat: repeat; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary-color) 5%, #c0c0c0) transparent; }
.message { position: relative; width: fit-content; max-width: 78%; padding: 12px 16px 8px; margin: 0 0 18px; border-radius: 0 17px 17px; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 2px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 8%, #303030) 8%, transparent); }
.message::before { content: ''; position: absolute; top: 0; left: -8px; border-top: 10px solid white; border-left: 8px solid transparent; }
.message p { margin: 0; }
.assistant { background: white; border: 1px solid color-mix(in srgb, var(--primary-color) 4%, #e6e6e6); border-top: 0; }
.user { background: color-mix(in srgb, var(--primary-color) 22%, #e0e0e0); color: color-mix(in srgb, var(--primary-color) 9%, #2e2e2e); border-radius: 17px 0 17px 17px; margin-left: auto; min-width: 78px; }
.user::before { left: auto; right: -8px; border-left: 0; border-right: 8px solid transparent; border-top-color: color-mix(in srgb, var(--primary-color) 22%, #e0e0e0); }
.message a { color: var(--primary-color); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sender-label { display: block; color: var(--primary-color); font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.message-time { display: block; margin: 5px 0 0 22px; text-align: right; font-size: 10px; color: color-mix(in srgb, var(--primary-color) 4%, #6d6d6d); line-height: 1.2; }
.welcome { padding: 16px 20px; max-width: min(420px, 90%); white-space: normal; }
.name-prompt { margin-top: 12px; }
.name-prompt p { margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--primary-color) 4%, #747474); }
#name-form { margin-top: 12px; }
#display-name { width: 100%; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #dbdbdb); background: color-mix(in srgb, var(--primary-color) 8%, #fafafa); border-radius: 10px; font-size: 14px; color: color-mix(in srgb, var(--primary-color) 6%, #2c2c2c); }
.name-actions { display: flex; gap: 8px; margin-top: 10px; }
.name-actions button { font-size: 12px; padding: 9px 14px; }
#skip-name { background: transparent; color: color-mix(in srgb, var(--primary-color) 4%, #6b6b6b); }
.typing-dots { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 3px; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 4%, #909090); animation: typing-pulse 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: .16s; }
.typing-dots span:nth-child(3) { animation-delay: .32s; }
.pending { min-width: 65px; padding: 10px 14px; }
@keyframes typing-pulse { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
#session-notice, .privacy-banner { flex-shrink: 0; align-self: stretch; margin: 0; border-radius: 0; padding: 14px 24px; border-top: 1px solid color-mix(in srgb, var(--primary-color) 7%, #dddddd); background: color-mix(in srgb, var(--primary-color) 10%, #eaeaea); font-size: 13px; color: color-mix(in srgb, var(--primary-color) 11%, #424242); }
.composer { flex-shrink: 0; padding: 14px 24px 10px; background: color-mix(in srgb, var(--primary-color) 4%, #f8f8f8); border-top: 1px solid color-mix(in srgb, var(--primary-color) 4%, #e3e3e3); }
#question-form { display: flex; align-items: center; gap: 12px; }
textarea { flex: 1; min-width: 0; resize: none; min-height: 48px; max-height: 140px; padding: 12px 17px; border: 1px solid color-mix(in srgb, var(--primary-color) 4%, #e4e4e4); border-radius: 23px; background: white; box-shadow: 0 1px 2px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 8%, #303030) 2%, transparent); color: color-mix(in srgb, var(--primary-color) 7%, #303030); line-height: 1.5; }
textarea::placeholder { color: color-mix(in srgb, var(--primary-color) 4%, #898989); }
textarea:disabled { background: color-mix(in srgb, var(--primary-color) 4%, #efefef); cursor: not-allowed; }
#send { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: var(--primary-color); color: white; box-shadow: 0 3px 8px color-mix(in srgb, var(--primary-color) 15%, transparent); }
#send:hover:not(:disabled) { background: var(--primary-color); }
#send svg { width: 23px; height: 23px; }
footer { text-align: center; font-size: 10px; color: color-mix(in srgb, var(--primary-color) 4%, #818181); padding: 8px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.embedded .chat-shell { margin: 0; height: 100dvh; max-width: none; border-radius: 0; box-shadow: none; }
@media (max-width: 600px) {
  .chat-shell { margin: 0; height: 100dvh; border-radius: 0; }
  .chat-header { padding: 14px 16px; gap: 10px; }
  .assistant-avatar { width: 40px; height: 40px; border-radius: 14px; }
  .contact-info h1 { font-size: 16px; }
  .contact-info p { font-size: 10px; }
  #new-conversation { padding: 9px; font-size: 10px; gap: 4px; }
  #new-conversation svg { width: 15px; height: 15px; }
  #messages { padding: 22px 20px; }
  .message { max-width: 89%; }
  .welcome { max-width: 100%; padding: 15px; }
  .composer { padding: 10px 12px 8px; }
  #question-form { gap: 8px; }
  #session-notice, .privacy-banner { padding: 12px 16px; }
}
@media (max-width: 360px) { .chat-header { gap: 8px; padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .typing-dots span { animation: none; opacity: .7; } button { transition: none; } }

.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#emoji-toggle { border: 0; background: transparent; color: color-mix(in srgb, var(--primary-color) 9%, #4c4c4c); padding: 6px 8px; border-radius: 8px; font-size: 20px; cursor: pointer; }
#emoji-toggle span { font-size: 12px; vertical-align: middle; }
#character-count { color: color-mix(in srgb, var(--primary-color) 4%, #626262); font-size: 11px; text-align: right; }
#character-count.at-limit { color: #a03c20; font-weight: 600; }
.reply-preview:not([hidden]) { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#reply-summary { flex: 1; min-width: 0; }
#cancel-reply { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 7%, #e8e8e8); color: color-mix(in srgb, var(--primary-color) 9%, #4c4c4c); font-size: 24px; cursor: pointer; }
.message-quote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--primary-color); border-radius: 7px; background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 13%, #404040) 6%, transparent); white-space: normal; font-size: 12px; }
.message-quote strong { display: block; color: color-mix(in srgb, var(--primary-color) 13%, #404040); margin-bottom: 3px; }
.message-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: color-mix(in srgb, var(--primary-color) 4%, #5a5a5a); }
.reply-preview .message-quote { margin: 0; }
.reply-action { display: block; border: 0; background: transparent; color: color-mix(in srgb, var(--primary-color) 9%, #4c4c4c); font-size: 11px; padding: 5px 0; cursor: pointer; }
.reply-action:hover { text-decoration: underline; }
.composer button:disabled, .reply-action:disabled { opacity: .5; cursor: default; }

.assistant-avatar { background: #fff; overflow: visible; }
.assistant-avatar img { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: inherit; }
.contact-info { min-width: 0; }
.contact-info h1, #municipality-label { overflow-wrap: anywhere; }
.chat-shell button:disabled { cursor: default; }
.chat-shell .reaction-badge:disabled { opacity: 1; }
.reaction-action { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--primary-color) 7%, #dcdcdc); border-radius: 18px; background: #fff; color: color-mix(in srgb, var(--primary-color) 9%, #4c4c4c); font-size: 18px; cursor: pointer; }
.reply-action { display: inline-block; margin-right: 12px; }
.reaction-feedback { display: block; font-size: 11px; color: #685d36; white-space: normal; }
.reaction-feedback:empty { display: none; }

.name-prompt summary { color: color-mix(in srgb, var(--primary-color) 12%, #505050); cursor: pointer; font-size: 13px; }
.name-prompt summary span, .suggested-options summary span { color: color-mix(in srgb, var(--primary-color) 4%, #797979); font-size: 11px; font-weight: 400; margin-left: 4px; }
#cancel-reply { display: grid; place-items: center; padding: 0; line-height: 1; }
#cancel-reply svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.presence-dot { background: #34cf79; width: 13px; height: 13px; border: 2px solid white; }
.presence-dot.inactive { background: #93a39a; }
.message { max-width: min(78%, calc(100% - 80px)); margin-bottom: 24px; }
.message.has-reaction { margin-bottom: 34px; padding-bottom: 24px; }
.reaction-action { position: absolute; right: -40px; top: 50%; width: 32px; height: 32px; padding: 0; margin-top: -16px; box-shadow: 0 1px 4px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 9%, #2e2e2e) 8%, transparent); }
.user .reaction-action { right: auto; left: -40px; }
.reaction-badge { position: absolute; bottom: -14px; left: 10px; min-width: 34px; height: 28px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #e2e2e2); border-radius: 18px; background: #fff; font-size: 18px; line-height: 24px; box-shadow: 0 1px 3px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 9%, #2e2e2e) 14%, transparent); }
.user .reaction-badge { left: auto; right: 10px; }
.reaction-picker { position: fixed; z-index: 20; width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: 6px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #e2e2e2); border-radius: 22px; background: #fff; box-shadow: 0 5px 24px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 9%, #2e2e2e) 15%, transparent); white-space: normal; }
.quick-reactions { display: flex; flex-wrap: wrap; gap: 2px; }
.quick-reactions button { display: grid; place-items: center; padding: 0; border-radius: 50%; font-size: 23px; width: 36px; height: 38px; background: transparent; }
.quick-reactions button[aria-pressed=true] { background: color-mix(in srgb, var(--primary-color) 9%, #e2e2e2); }
.composer { position: relative; }
#emoji-picker:not([hidden]) { position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 20; width: min(360px, calc(100% - 24px)); box-shadow: 0 5px 24px color-mix(in srgb, color-mix(in srgb, var(--primary-color) 9%, #2e2e2e) 15%, transparent); }
.emoji-panel { padding: 10px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #e2e2e2); border-radius: 16px; background: #fff; width: 340px; max-width: 100%; color: color-mix(in srgb, var(--primary-color) 6%, #2c2c2c); }
.emoji-categories { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.emoji-categories button { padding: 4px; min-width: 30px; height: 34px; font-size: 18px; border-radius: 6px; background: transparent; }
.emoji-categories button[aria-pressed=true] { background: color-mix(in srgb, var(--primary-color) 12%, #ebebeb); border-bottom: 3px solid var(--primary-color); }
.emoji-panel input { display: block; width: 100%; margin: 8px 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--primary-color) 7%, #d4d4d4); border-radius: 20px; font-size: 14px; }
.emoji-heading { font-size: 12px; color: color-mix(in srgb, var(--primary-color) 4%, #6e6e6e); padding: 2px 0 7px; }
.emoji-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-height: min(220px, 30dvh); overflow-y: auto; gap: 2px; overscroll-behavior: contain; }
.emoji-grid button { display: grid; place-items: center; padding: 0; font-size: 25px; min-width: 0; height: 38px; background: transparent; border-radius: 8px; }
.emoji-grid button:hover { background: color-mix(in srgb, var(--primary-color) 7%, #e8e8e8); }
@media (max-width: 600px) { .message { max-width: calc(100% - 80px); } .welcome { max-width: 100%; } }

#emoji-toggle { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 48px; padding: 6px; background: transparent; color: color-mix(in srgb, var(--primary-color) 4%, #747474); }
#emoji-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.composer-toolbar { justify-content: flex-end; margin-bottom: 4px; }
.reaction-action { background: color-mix(in srgb, var(--primary-color) 6%, #f5f5f5); color: #7b8980; border: 0; box-shadow: none; font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .message > .reply-action, .message > .reaction-action { opacity: 0; pointer-events: none; transition: opacity .15s; }
  .message:hover > .reply-action, .message:hover > .reaction-action,
  .message:has(:focus-visible) > .reply-action, .message:has(:focus-visible) > .reaction-action { opacity: 1; pointer-events: auto; }
}
.welcome { max-width: min(420px, calc(100% - 80px)); }
.suggested-options { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--primary-color) 6%, #e2e2e2); white-space: normal; }
.suggested-options summary { cursor: pointer; color: color-mix(in srgb, var(--primary-color) 12%, #505050); font-size: 13px; font-weight: 600; }
.option-choices { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.helpfulness-prompt { margin-top: 12px; font-size: 13px; white-space: normal; }
.helpfulness-prompt p { margin-bottom: 6px; }
.helpfulness-prompt button, .engagement-prompt button { margin: 4px 6px 0 0; padding: 8px 12px; font-size: 13px; }
.engagement-prompt { margin: 8px 16px; padding: 12px; border: 1px solid #93a39a; border-radius: 12px; font-size: 13px; }
.initial-options { padding-top: 0; border-top: 0; }
.initial-options summary { font-weight: 400; }
.option-choices p { font-size: 12px; color: color-mix(in srgb, var(--primary-color) 4%, #6e6e6e); }
.option-choices button { text-align: left; font-size: 13px; padding: 10px 12px; }
.option-choices .decline-options { background: transparent; color: color-mix(in srgb, var(--primary-color) 4%, #6b6b6b); }
@media (hover: hover) and (pointer: fine) {
  .message:has(> .reaction-action)::after { content: ''; position: absolute; top: 0; bottom: 0; right: -78px; width: 78px; }
  .user:has(> .reaction-action)::after { right: auto; left: -78px; }
  .reaction-action { z-index: 1; }
}

.reaction-badge:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-color) 7%, #f8f8f8); }
.reaction-badge:active:not(:disabled) { transform: none; background: #fff; }

/* The typing placeholder is a status, not an interactive message. */
.message.pending > .reply-action,
.message.pending > .reaction-action,
.message.pending > .reaction-badge,
.message.pending > .reaction-picker,
.message.pending > .reaction-feedback,
.message.pending > .suggested-options { display: none; }
.message.pending::after { display: none; }

/* Reply and reaction share the same discreet toolbar outside each bubble. */
.message > .reply-action { position: absolute; right: -40px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0; padding: 0; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 6%, #f5f5f5); color: #7b8980; z-index: 1; }
.reply-action svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.message > .reaction-action { right: -76px; }
.user > .reply-action { right: auto; left: -76px; }
.user > .reaction-action { right: auto; left: -40px; }
.message.pending > .reply-action, .message.pending > .reaction-action { display: none; }

.message-receipt { display: inline-flex; vertical-align: middle; margin-left: 5px; color: #1683b8; }
.message-receipt svg { width: 18px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.conversation-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversation-area #messages { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
#scroll-latest { position: absolute; right: 20px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: white; color: #66736e; border: 1px solid color-mix(in srgb, var(--primary-color) 4%, #e3e3e3); box-shadow: 0 2px 8px #0002; display: grid; place-items: center; }
#scroll-latest svg, .header-icon svg, #voice-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-icon { background: transparent; color: white; border: 0; padding: 6px; }
.contact-info { flex: 1; }
#search-panel { display: flex; align-items: center; gap: 6px; padding: 10px; background: color-mix(in srgb, var(--primary-color) 8%, #f2f2f2); flex-wrap: wrap; }
#search-query { flex: 1; min-width: 100px; padding: 8px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #c6c6c6); border-radius: 8px; }
#search-count { font-size: 11px; }
#search-panel button { border: 0; background: transparent; padding: 6px; }
.message.search-match { box-shadow: inset 0 0 0 2px #d8b64c; }
.message.search-current { box-shadow: inset 0 0 0 3px #b3770c; }
#voice-toggle { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 11%, #ececec); color: color-mix(in srgb, var(--primary-color) 4%, #606060); border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #dbdbdb); }
#voice-toggle.recording { color: #b42332; background: #fde6e8; border-radius: 50%; }
#voice-status { margin: 0; font-size: 11px; color: color-mix(in srgb, var(--primary-color) 4%, #606060); }
#voice-status:not(:empty) { margin-bottom: 8px; }
.protocol-number { font-size: 12px; color: color-mix(in srgb, var(--primary-color) 7%, #555555); overflow-wrap: anywhere; }
#report-dialog { border: 0; border-radius: 18px; padding: 24px; max-width: min(480px, calc(100vw - 32px)); color: color-mix(in srgb, var(--primary-color) 8%, #333333); }
#report-dialog::backdrop { background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 16%, #272727) 44%, transparent); }
#report-dialog h2 { font-size: 19px; margin-top: 0; }
#report-dialog p { font-size: 13px; }
#report-form label { display: block; margin-top: 12px; }
#report-form select, #report-form textarea { width: 100%; padding: 9px; border: 1px solid color-mix(in srgb, var(--primary-color) 6%, #c3c3c3); border-radius: 8px; }
#report-form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
@media (max-width: 600px) { .chat-header { gap: 7px; padding: 12px; } #new-conversation span { display: none; } #new-conversation { padding: 8px; } .chat-header .contact-info h1 { font-size: 15px; } }

/* Keep icon-only controls centered, independent of the default button padding. */
.header-icon, #new-conversation { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; line-height: 1; }
#new-conversation { margin-left: 0; border: 0; border-radius: 50%; background: var(--primary-color); }
#new-conversation:hover:not(:disabled) { background: var(--primary-color); }
#new-conversation svg { display: block; width: 24px; height: 24px; }
#scroll-latest { padding: 0; line-height: 1; z-index: 5; }
#scroll-latest svg { display: block; width: 26px; height: 26px; }

#report-status { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 14px 20px; border-radius: 12px; background: #155d45; color: white; box-shadow: 0 4px 20px #0003; font-size: 14px; }
#report-status[data-state="error"] { background: #963b32; }

#report-status svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Link controls remain text-only when hovered. */
a:hover, .privacy-settings:hover:not(:disabled), #skip-name:hover:not(:disabled), .decline-options:hover:not(:disabled) { background: transparent; }

[data-theme="dark"] body { background: color-mix(in srgb, var(--primary-color) 10%, #191919); color: color-mix(in srgb, var(--primary-color) 5%, #ececec); background-image: none; }
[data-theme="dark"] .chat-shell, [data-theme="dark"] .composer { background: color-mix(in srgb, var(--primary-color) 7%, #2a2a2a); border-color: color-mix(in srgb, var(--primary-color) 5%, #414141); }
[data-theme="dark"] .chat-header { background: color-mix(in srgb, var(--primary-color) 7%, #2a2a2a); }
[data-theme="dark"] #messages { background-color: color-mix(in srgb, var(--primary-color) 12%, #121212); background-image: var(--chat-background-image, none); scrollbar-color: color-mix(in srgb, var(--primary-color) 4%, #5e5e5e) transparent; }
[data-theme="dark"] .assistant { background: color-mix(in srgb, var(--primary-color) 7%, #2a2a2a); border-color: color-mix(in srgb, var(--primary-color) 5%, #414141); }
[data-theme="dark"] .message::before { border-top-color: color-mix(in srgb, var(--primary-color) 7%, #2a2a2a); }
[data-theme="dark"] .user { background: color-mix(in srgb, var(--primary-color) 22%, #2e2e2e); color: color-mix(in srgb, var(--primary-color) 5%, #ececec); }
[data-theme="dark"] .user::before { border-top-color: color-mix(in srgb, var(--primary-color) 22%, #2e2e2e); }
[data-theme="dark"] .message a, [data-theme="dark"] .privacy-banner a { color: color-mix(in srgb, var(--primary-color) 18%, #adadad); }
[data-theme="dark"] .sender-label, [data-theme="dark"] .message-quote strong { color: color-mix(in srgb, var(--primary-color) 18%, #adadad); }
[data-theme="dark"] .message-time, [data-theme="dark"] footer, [data-theme="dark"] #character-count,
[data-theme="dark"] #voice-status, [data-theme="dark"] .name-prompt p,
[data-theme="dark"] .protocol-number, [data-theme="dark"] .privacy-settings,
[data-theme="dark"] #skip-name { color: color-mix(in srgb, var(--primary-color) 4%, #b4b4b4); }
[data-theme="dark"] textarea, [data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] #display-name, [data-theme="dark"] #search-query,
[data-theme="dark"] #report-form textarea, [data-theme="dark"] #report-form select { background: color-mix(in srgb, var(--primary-color) 7%, #363636); border-color: color-mix(in srgb, var(--primary-color) 5%, #505050); color: color-mix(in srgb, var(--primary-color) 5%, #ececec); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: color-mix(in srgb, var(--primary-color) 4%, #b2b2b2); }
[data-theme="dark"] button { background: color-mix(in srgb, var(--primary-color) 7%, #3b3b3b); color: color-mix(in srgb, var(--primary-color) 13%, #e3e3e3); }
[data-theme="dark"] button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-color) 6%, #4c4c4c); }
[data-theme="dark"] .header-icon, [data-theme="dark"] #emoji-toggle, [data-theme="dark"] #voice-toggle,
[data-theme="dark"] .privacy-settings, [data-theme="dark"] #skip-name { background: transparent; color: color-mix(in srgb, var(--primary-color) 5%, #c3c3c3); }
[data-theme="dark"] .privacy-settings:hover:not(:disabled), [data-theme="dark"] #skip-name:hover:not(:disabled),
[data-theme="dark"] .decline-options:hover:not(:disabled) { background: transparent; }
[data-theme="dark"] #new-conversation, [data-theme="dark"] #send { background: var(--primary-color); color: white; }
[data-theme="dark"] #scroll-latest, [data-theme="dark"] #report-dialog,
[data-theme="dark"] .privacy-banner, [data-theme="dark"] #search-panel { background: color-mix(in srgb, var(--primary-color) 7%, #2a2a2a); border-color: color-mix(in srgb, var(--primary-color) 5%, #505050); color: color-mix(in srgb, var(--primary-color) 5%, #ececec); }
[data-theme="dark"] .message-quote, [data-theme="dark"] #session-notice, [data-theme="dark"] .privacy-banner { background: color-mix(in srgb, var(--primary-color) 13%, #2b2b2b); color: color-mix(in srgb, var(--primary-color) 6%, #cecece); }
[data-theme="dark"] .message > .reply-action, [data-theme="dark"] .message > .reaction-action,
[data-theme="dark"] .reaction-badge, [data-theme="dark"] .reaction-picker,
[data-theme="dark"] #emoji-picker { background: color-mix(in srgb, var(--primary-color) 7%, #363636); border-color: color-mix(in srgb, var(--primary-color) 5%, #505050); color: color-mix(in srgb, var(--primary-color) 6%, #cecece); }
[data-theme="dark"] .emoji-grid button { background: transparent; }
[data-theme="dark"] .emoji-grid button:hover, [data-theme="dark"] .emoji-categories button[aria-pressed=true],
[data-theme="dark"] .quick-reactions button[aria-pressed=true] { background: color-mix(in srgb, var(--primary-color) 6%, #4c4c4c); }
[data-theme="dark"] .privacy-actions button { background: var(--primary-color); color: white; }
[data-theme="dark"] .name-prompt summary, [data-theme="dark"] .suggested-options summary { color: color-mix(in srgb, var(--primary-color) 18%, #adadad); }
[data-theme="dark"] .name-prompt summary span, [data-theme="dark"] .suggested-options summary span, [data-theme="dark"] .emoji-heading,
[data-theme="dark"] .option-choices p, [data-theme="dark"] .option-choices .decline-options { color: color-mix(in srgb, var(--primary-color) 4%, #b4b4b4); }
[data-theme="dark"] .emoji-panel { background: color-mix(in srgb, var(--primary-color) 7%, #363636); color: color-mix(in srgb, var(--primary-color) 5%, #ececec); border-color: color-mix(in srgb, var(--primary-color) 5%, #505050); }

.theme-control { position: relative; flex-shrink: 0; }
#theme-options { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 160px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 4px 20px #0003; }
#theme-options button { display: block; width: 100%; text-align: left; background: transparent; color: color-mix(in srgb, var(--primary-color) 6%, #2c2c2c); }
#theme-options button[aria-pressed="true"]::after { content: '✓'; float: right; margin-left: 14px; }
#theme-options button:hover { background: color-mix(in srgb, var(--primary-color) 6%, #f0f0f0); }
[data-theme="dark"] #theme-options { background: color-mix(in srgb, var(--primary-color) 7%, #363636); }
[data-theme="dark"] #theme-options button { color: color-mix(in srgb, var(--primary-color) 5%, #ececec); }
[data-theme="dark"] #theme-options button:hover { background: color-mix(in srgb, var(--primary-color) 6%, #4c4c4c); }
@media (max-width: 600px) {
  .chat-header { gap: 4px; }
  .chat-header .header-icon, .chat-header #new-conversation { width: 32px; height: 36px; flex-basis: 32px; }
}


/* Show guidance only when the message approaches its limit. */
#character-count { margin: 0 0 8px; text-align: left; font-size: 11px; color: #796127; }
#character-count.at-limit { color: #b53643; font-weight: 600; }
[data-theme="dark"] #character-count { color: #e4c57d; }
[data-theme="dark"] #character-count.at-limit { color: #ff929d; }

/* Keep privacy outside the conversation, within the viewport. */
.chat-shell { height: calc(100dvh - 96px); margin-bottom: 0; }
.privacy-footer { height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; }
.embedded .chat-shell { height: calc(100dvh - 32px); }
@media (max-width: 600px) { .chat-shell { height: calc(100dvh - 32px); } }

[data-theme="dark"] #voice-toggle { background: color-mix(in srgb, var(--primary-color) 7%, #363636); border-color: color-mix(in srgb, var(--primary-color) 5%, #505050); }
[data-theme="dark"] #voice-toggle.recording { background: #572e36; color: #ff9aab; border-color: #824754; }

#voice-toggle:not(.recording), [data-theme="dark"] #voice-toggle:not(.recording) { background: transparent; border-color: transparent; }
#voice-toggle:not(.recording):hover:not(:disabled), [data-theme="dark"] #voice-toggle:not(.recording):hover:not(:disabled) { background: #12866b; color: white; }

.message-input { position: relative; flex: 1; min-width: 0; }
.message-input #question { display: block; width: 100%; padding-right: 42px; }
#clear-message { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 5%, #e8e8e8) 50%, transparent); color: color-mix(in srgb, var(--primary-color) 4%, #6b6b6b); opacity: .7; }
#clear-message:hover:not(:disabled), #clear-message:focus-visible { opacity: 1; background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 6%, #dedede) 74%, transparent); }
#clear-message:active:not(:disabled) { transform: translateY(-50%); }
#clear-message svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-theme="dark"] #clear-message { background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 6%, #5a5a5a) 50%, transparent); color: color-mix(in srgb, var(--primary-color) 6%, #d9d9d9); }
[data-theme="dark"] #clear-message:hover:not(:disabled) { background: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 6%, #5a5a5a) 74%, transparent); }

/* Brand accents and readable interactive states for both color schemes. */
.chat-header { border-bottom: 3px solid var(--accent-color); }
#send, #new-conversation { background: var(--primary-color); color: white; }
#send:hover:not(:disabled), #new-conversation:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-color) 85%, black); }
#voice-toggle:not(.recording):hover:not(:disabled), [data-theme="dark"] #voice-toggle:not(.recording):hover:not(:disabled) { background: var(--primary-color); color: white; }
#theme-options button[aria-pressed="true"]::after { color: var(--accent-color); }
[data-theme="dark"] .sender-label, [data-theme="dark"] .message a,
[data-theme="dark"] .name-prompt summary, [data-theme="dark"] .suggested-options summary,
[data-theme="dark"] .message-quote strong, [data-theme="dark"] .privacy-banner a { color: color-mix(in srgb, var(--primary-color) 30%, white); }
[data-theme="dark"] #send, [data-theme="dark"] #new-conversation { background: var(--primary-color); color: white; }

body { background-repeat: no-repeat; }

/* A shared icon size and circular hit area across chat controls. */
:root { --icon-size: 24px; --icon-button-size: 40px; }
.header-icon, #new-conversation, #send, #voice-toggle, #emoji-toggle,
#cancel-reply, #clear-message, #scroll-latest, #search-panel button,
.message > .reply-action, .message > .reaction-action {
  width: var(--icon-button-size); height: var(--icon-button-size);
  min-width: var(--icon-button-size); min-height: var(--icon-button-size);
  flex: 0 0 var(--icon-button-size); padding: 0; border-radius: 50%; line-height: 1;
}
.header-icon svg, #new-conversation svg, #send svg, #voice-toggle svg, #emoji-toggle svg,
#cancel-reply svg, #clear-message svg, #scroll-latest svg, #search-panel button svg,
.reply-action svg, .reaction-action svg { display: block; width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }
.reaction-action svg, #search-panel button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#search-panel button { display: grid; place-items: center; }
.message > .reply-action, .message > .reaction-action { margin-top: calc(var(--icon-button-size) / -2); }
.message > .reply-action { right: calc(-1 * (var(--icon-button-size) + 8px)); }
.message > .reaction-action { right: calc(-1 * (var(--icon-button-size) * 2 + 12px)); }
.user > .reply-action { right: auto; left: calc(-1 * (var(--icon-button-size) * 2 + 12px)); }
.user > .reaction-action { right: auto; left: calc(-1 * (var(--icon-button-size) + 8px)); }
.message-input #question { padding-right: calc(var(--icon-button-size) + 18px); }
@media (hover: hover) and (pointer: fine) {
  .message:has(> .reaction-action)::after { width: calc(var(--icon-button-size) * 2 + 16px); right: calc(-1 * (var(--icon-button-size) * 2 + 16px)); }
  .user:has(> .reaction-action)::after { right: auto; left: calc(-1 * (var(--icon-button-size) * 2 + 16px)); }
}
@media (max-width: 600px) {
  :root { --icon-button-size: 32px; }
  .chat-header .header-icon, .chat-header #new-conversation { width: var(--icon-button-size); height: var(--icon-button-size); flex-basis: var(--icon-button-size); }
}

:root {
  --page-banner-color: color-mix(in srgb, var(--primary-color) 65%, white);
  --header-color: color-mix(in srgb, var(--primary-color) 85%, black);
}
.message-input #question { overflow-x: hidden; overflow-y: hidden; }

#emoji-toggle:hover:not(:disabled), [data-theme="dark"] #emoji-toggle:hover:not(:disabled) { background: #e5e7eb; color: #4b5563; }

/* Message actions use a compact 28px circle, including their hit area. */
.message > .reply-action, .message > .reaction-action {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  flex-basis: 28px; margin-top: -14px;
}
.message > .reply-action { right: -36px; }
.message > .reaction-action { right: -68px; }
.user > .reply-action { right: auto; left: -68px; }
.user > .reaction-action { right: auto; left: -36px; }
@media (hover: hover) and (pointer: fine) {
  .message:has(> .reaction-action)::after { width: 72px; right: -72px; }
  .user:has(> .reaction-action)::after { right: auto; left: -72px; }
}

/* Leave room around the glyph inside compact circular controls. */
.message > .reply-action svg, .message > .reaction-action svg,
#clear-message svg { width: 16px; height: 16px; }
#clear-message {
  width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  flex-basis: 24px; padding: 0;
}

/* Message actions keep their resting appearance on hover. */
.message > .reply-action:hover:not(:disabled),
.message > .reaction-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-color) 6%, #f5f5f5);
  color: #7b8980; text-decoration: none;
}
.message > .reaction-badge { border: 1px solid color-mix(in srgb, var(--primary-color) 8%, #e2e2e2); box-shadow: none; }
.message > .reaction-badge:hover:not(:disabled) { background: #fff; }
[data-theme="dark"] .message > .reply-action:hover:not(:disabled),
[data-theme="dark"] .message > .reaction-action:hover:not(:disabled),
[data-theme="dark"] .message > .reaction-badge:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-color) 7%, #363636);
  color: color-mix(in srgb, var(--primary-color) 6%, #cecece);
}

[data-theme="dark"] .message > .reaction-badge { border-color: color-mix(in srgb, var(--primary-color) 8%, #505050); }

/* Give citizen messages a distinct brand-colored surface and readable metadata. */
:root { --user-bubble-color: color-mix(in srgb, var(--primary-color) 75%, #18121e); }
[data-theme="dark"] { --user-bubble-color: color-mix(in srgb, var(--primary-color) 65%, #302438); }
.message.user { background: var(--user-bubble-color); color: #fff; }
.message.user::before { border-top-color: var(--user-bubble-color); }
.message.user .message-time { color: #eee8f2; }
.message.user a, .message.user .message-quote strong { color: #fff; }
.message.user .message-quote { background: #ffffff14; border-left-color: #ffffff80; color: #fff; }
.message.user .message-receipt { color: #8ddcff; }

/* The excerpt has its own text color; explicitly override it on dark user bubbles. */
.message.user .message-quote { background: #00000026; border-left-color: #ffffff99; }
.message.user .message-quote span { color: #fff; }
[data-theme="dark"] .message-quote span { color: #eae5ee; }
[data-theme="dark"] .message.user .message-quote span { color: #fff; }

/* Preserve readable history while making the ended conversation visually quieter. */
.chat-shell.is-inactive .conversation-area, .chat-shell.is-inactive .composer { filter: saturate(.25) contrast(.94) brightness(1.02); }
[data-theme="dark"] .chat-shell.is-inactive .conversation-area, [data-theme="dark"] .chat-shell.is-inactive .composer { filter: saturate(.25) brightness(.9); }
.chat-shell.is-inactive button:disabled,
.chat-shell.is-inactive #emoji-toggle:disabled,
.chat-shell.is-inactive #voice-toggle:disabled { cursor: not-allowed; }
.chat-shell.is-inactive .message > .reply-action,
.chat-shell.is-inactive .message > .reaction-action { display: none; }
.chat-shell.is-inactive .message::after { content: none; }

/* Configurable light palette; dark theme retains its contrasting surfaces. */
:root:not([data-theme="dark"]) body { background-color: var(--background-color, #f5f7f6); color: var(--text-color, #303b35); }
:root:not([data-theme="dark"]) .chat-shell,
:root:not([data-theme="dark"]) .composer,
:root:not([data-theme="dark"]) #messages { background-color: var(--background-color, #f5f7f6); }
:root:not([data-theme="dark"]) .message.assistant { background-color: var(--assistant-bubble-color, #fff); color: var(--text-color, #303b35); }
:root:not([data-theme="dark"]) .message.assistant::before { border-top-color: var(--assistant-bubble-color, #fff); }

/* Let the parent iframe shrink above a mobile keyboard without page overflow. */
body.embedded { overflow:hidden; }
.embedded .chat-shell { min-height:0; }
@media (max-width:600px) {
  #question, #display-name { font-size:16px; }
}
@media (max-height:550px) {
  .embedded .chat-header { padding-block:6px; }
  .embedded #messages { padding:12px 16px; }
  .embedded .composer { padding-block:6px; }
}

[data-theme="dark"] #session-notice, [data-theme="dark"] .privacy-banner { border-top-color: color-mix(in srgb, var(--primary-color) 5%, #505050); }

.mobile-controls .message > .reply-action,
.mobile-controls .message > .reaction-action { visibility:hidden; opacity:0; pointer-events:none; }
.mobile-controls .message.actions-visible > .reply-action,
.mobile-controls .message.actions-visible > .reaction-action { visibility:visible; opacity:1; pointer-events:auto; }
body.mobile-standalone { position:fixed; top:var(--visible-chat-top, 0px); left:0; width:100%; height:var(--visible-chat-height, 100dvh); overflow:hidden; }
.mobile-standalone .chat-shell { height:calc(var(--visible-chat-height, 100dvh) - 32px); min-height:0; margin:0 auto; }