/* Canal do cliente (canal_web/cliente_canal.js): fila e horário, histórico, avaliação rápida, app e widget.
 * Usa as variáveis da tela do cliente (cliente_workspace.css), então segue tema claro/escuro e as cores escolhidas. */

/* Fila e horário ------------------------------------------------------------------------------------ */
.client-queue-status { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 26px; border-bottom: 1px solid var(--border-color); background: var(--sent-bg); color: var(--text-main); }
.client-queue-status[hidden] { display: none; }
.client-queue-status.is-closed { background: color-mix(in srgb, #f59e0b 10%, var(--bg-card)); }
.client-queue-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-card); color: var(--accent-text); font-size: 17px; border: 1px solid var(--sent-border); }
.client-queue-status.is-closed .client-queue-icon { color: #b45309; border-color: color-mix(in srgb, #f59e0b 35%, var(--border-color)); }
:root[data-client-theme="dark"] .client-queue-status.is-closed .client-queue-icon { color: #fbbf24; }
.client-queue-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.client-queue-text strong { font-size: 12.5px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.client-queue-text span { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.client-queue-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.client-queue-button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 9px; background: var(--primary-color); color: var(--action-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.client-queue-button.secondary { background: var(--bg-card); color: var(--accent-text); border: 1px solid var(--sent-border); }

/* Avaliação rápida ---------------------------------------------------------------------------------- */
.client-workspace .quick-rating { width: 100%; max-width: 400px; font-family: inherit; background: var(--bg-card); color: var(--text-main); border-color: var(--border-color); }
.client-workspace .quick-rating > p { color: var(--text-muted); opacity: 1; }
.quick-rating-options { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.quick-star { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: color-mix(in srgb, var(--text-muted) 70%, transparent); font-size: 28px; line-height: 1; }
.quick-star.is-on { color: #f59e0b; }
.quick-star:hover:not(:disabled) { background: var(--bg-input); }
.quick-thumb { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-input); color: var(--text-main); font-size: 13px; font-weight: 600; }
.quick-thumb i { font-size: 20px; }
.quick-thumb.is-on { border-color: var(--accent-text); background: var(--sent-bg); color: var(--accent-text); }
.quick-thumb:hover:not(:disabled) { border-color: var(--accent-text); }
.client-workspace .quick-star:disabled, .client-workspace .quick-thumb:disabled { opacity: 1; cursor: default; }
.client-workspace .quick-thumb:disabled:not(.is-on) { opacity: .55; }
.quick-rating-status { font-size: 11.5px; margin: 10px 0 0 !important; }
.quick-rating-status:empty { display: none; }
.quick-rating-extra { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.quick-rating-extra:empty { display: none; }
.quick-rating-extra label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.quick-rating-extra textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-main); font: inherit; font-size: 13px; resize: vertical; }
.quick-rating-extra textarea:focus { outline: none; border-color: var(--accent-text); }
.quick-rating-send, .quick-rating-survey { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.quick-rating-send { border: 0; background: var(--primary-color); color: var(--action-text); }
.quick-rating-survey { border: 1px solid var(--sent-border); background: transparent; color: var(--accent-text); }
.quick-rating-comment { margin: 0; font-size: 12px; font-style: italic; color: var(--text-muted); text-align: center; }

/* Botão do histórico e seção do app no painel de aparência ------------------------------------------------ */
.client-app-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); display: grid; gap: 8px; }
.client-app-section[hidden] { display: none; }
.client-app-section button { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-main); font-size: 12px; text-align: left; }
.client-app-section button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--sent-bg); color: var(--accent-text); }
.client-app-section button i { font-size: 15px; color: var(--accent-text); }
.client-app-section p { margin: 0 !important; }
#client-app-status:empty { display: none; }

/* Convite para instalar ---------------------------------------------------------------------------------- */
.client-install-banner { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 10px 14px; border: 1px solid var(--sent-border); border-radius: 14px; background: var(--bg-card); color: var(--text-main); box-shadow: 0 6px 22px #14253e10; }
.client-install-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: var(--sent-bg); color: var(--accent-text); font-size: 17px; }
.client-install-banner > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.client-install-banner strong { font-size: 12.5px; }
.client-install-banner span { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.client-install-accept, .client-install-dismiss { min-height: 36px; padding: 7px 12px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.client-install-accept { border: 0; background: var(--primary-color); color: var(--action-text); }
.client-install-dismiss { border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); }

/* Histórico ------------------------------------------------------------------------------------------------- */
.client-history { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; background: color-mix(in srgb, #0b132b 38%, transparent); }
.client-history[hidden] { display: none; }
.client-history-card { width: min(100%, 520px); height: var(--client-viewport-height, 100dvh); display: flex; flex-direction: column; background: var(--bg-card); color: var(--text-main); border-left: 1px solid var(--border-color); box-shadow: -18px 0 54px #00000024; }
.client-history-head { display: flex; align-items: center; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 18px 16px; border-bottom: 1px solid var(--border-color); }
.client-history-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-history-head button { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-main); font-size: 16px; }
.client-history-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--conversation-bg); }
.client-history-empty { margin: 32px auto; max-width: 300px; text-align: center; color: var(--text-muted); font-size: 12px; line-height: 1.8; }
.client-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.client-history-item { width: 100%; display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); color: var(--text-main); text-align: left; }
.client-history-item:hover { border-color: var(--sent-border); background: var(--sent-bg); }
.client-history-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.client-history-item-top strong { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-history-item-meta { font-size: 11px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.client-history-chip { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); }
.client-history-chip.is-aberto, .client-history-chip.is-espera, .client-history-chip.is-bot { background: var(--sent-bg); color: var(--accent-text); border-color: var(--sent-border); }
.client-history-detail { display: grid; gap: 14px; }
.client-history-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 0; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); }
.client-history-summary dt { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.client-history-summary dd { margin: 3px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }
.client-history-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-history-download { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 10px; background: var(--primary-color); color: var(--action-text); font-size: 12px; font-weight: 600; }
.client-history-download.secondary { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); }
.client-history-status { margin: 0; font-size: 11.5px; color: #dc2626; }
.client-history-status:empty { display: none; }
.client-history-conversation { display: flex; flex-direction: column; gap: 10px; }
.client-history-day { align-self: center; padding: 3px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 10px; }
.client-history-msg { max-width: 88%; align-self: flex-start; padding: 10px 13px; border: 1px solid var(--border-color); border-radius: 14px 14px 14px 4px; background: var(--bg-card); }
.client-history-msg.is-cliente { align-self: flex-end; background: var(--sent-bg); border-color: var(--sent-border); border-radius: 14px 14px 4px 14px; }
.client-history-msg.is-automacao { align-self: center; max-width: 100%; background: transparent; border-style: dashed; }
.client-history-msg.is-sistema { align-self: center; max-width: 100%; background: transparent; border-style: dotted; text-align: center; }
.client-history-msg header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 4px; font-size: 10.5px; color: var(--text-muted); }
.client-history-msg header strong { color: var(--text-main); font-size: 11px; }
.client-history-msg p { margin: 0; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.client-history-msg.is-deleted p { font-style: italic; color: var(--text-muted); }
.client-history-transcript { margin-top: 6px !important; font-size: 11.5px !important; color: var(--text-muted); }
.client-history-file { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--sent-border); border-radius: 10px; color: var(--text-main); font-size: 11.5px; text-decoration: none; overflow-wrap: anywhere; }
.client-history-file i { color: var(--accent-text); font-size: 18px; }
.client-history-file img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; }
.client-history-file:has(img) { padding: 4px; }
.client-history-rated { margin: 0; text-align: center; font-size: 12px; color: var(--text-muted); }
body.client-history-open { overflow: hidden; }

/* Widget (iframe no site da empresa) -------------------------------------------------------------------------- */
.client-embed-only { display: none; }
:root[data-canal-embed] .client-embed-only { display: inline-flex; }
:root[data-canal-embed] .client-workspace { padding: 0; background: var(--conversation-bg); }
:root[data-canal-embed] .client-shell { width: 100%; height: 100%; gap: 0; }
:root[data-canal-embed] .client-topbar { min-height: 58px; padding: 9px 12px; border-radius: 0; gap: 8px; }
:root[data-canal-embed] .client-brand-icon { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
:root[data-canal-embed] .client-brand strong { font-size: 12px; }
:root[data-canal-embed] .client-brand div > span { font-size: 9.5px; }
:root[data-canal-embed] .client-preferences { gap: 6px; }
:root[data-canal-embed] .client-own-profile { padding: 5px; width: 40px; }
:root[data-canal-embed] #client-own-name { display: none; }
:root[data-canal-embed] .client-workspace .client-chat-wrapper { border: 0; border-radius: 0; box-shadow: none; }
:root[data-canal-embed] .client-workspace .client-chat-header { padding: 12px 14px; gap: 10px; }
:root[data-canal-embed] .client-workspace .support-avatar { width: 40px; height: 40px; flex-basis: 40px; }
:root[data-canal-embed] .client-workspace #support-agent-name { font-size: 15px; }
:root[data-canal-embed] .client-workspace #chat-log { padding: 16px 14px; gap: 16px; }
:root[data-canal-embed] .client-workspace .stream-message-row { max-width: 92%; }
:root[data-canal-embed] .client-composer { padding: 10px 10px 10px; }
:root[data-canal-embed] .client-composer-hint { display: none; }
:root[data-canal-embed] .client-queue-status { padding: 10px 14px; }
:root[data-canal-embed] .client-history-card { width: 100%; border-left: 0; }
:root[data-canal-embed] .client-appearance-panel { right: 8px; }
:root[data-canal-embed] .client-workspace .auth-card-custom { position: relative; }
.client-workspace .auth-card-custom .auth-embed-close { position: absolute; top: 12px; right: 12px; width: 40px; min-height: 40px; height: 40px; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-muted); font-size: 15px; }

@media (max-width: 680px) {
    .client-queue-status { padding: 10px 14px; gap: 10px; }
    .client-install-banner { margin: 8px 10px 0; padding: 10px 12px; flex-wrap: wrap; }
    .client-install-banner > div { flex-basis: calc(100% - 50px); }
    .client-install-accept { margin-left: 46px; }
    .client-history-card { width: 100%; border-left: 0; }
}
@media (max-width: 420px) {
    .client-queue-status { flex-wrap: wrap; }
    .client-queue-actions { width: 100%; justify-content: flex-start; padding-left: 44px; }
    .client-brand > div > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .client-history-item, .quick-star, .quick-thumb { transition: none; }
}