/* Client conversation. Theme and accents follow the same preferences as the workspace. */
.client-workspace .auth-overlay-custom { height: var(--client-viewport-height, 100dvh); padding: 20px 12px; overflow-y: auto; }
.client-workspace .auth-card-custom { width: min(100%, 460px); max-width: 460px; max-height: 100%; overflow-y: auto; padding: 28px; background: var(--bg-card); color: var(--text-main); gap: 12px; border: 1px solid var(--border-color); }
.auth-welcome-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 4px; border-radius: 15px; background: var(--sent-bg); color: var(--accent-text); font-size: 24px; }
.auth-step-label { color: var(--accent-text); text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.client-workspace .auth-card-custom h2 { color: var(--text-main); }
.client-workspace .auth-card-custom p { color: var(--text-muted); line-height: 1.7; margin-bottom: 8px; }
#auth-form { display: flex; flex-direction: column; gap: 9px; }
#auth-form label { font-size: 11px; font-weight: 700; display: block; margin-bottom: 2px; }
#auth-form [data-signup-only] { display: flex; flex-direction: column; gap: 9px; }
#auth-form .auth-fields-row { flex-direction: row; gap: 12px; }
.auth-fields-row > div { flex: 1; min-width: 0; }
.client-workspace .auth-card-custom input { display: block; width: 100%; min-width: 0; height: 44px; padding: 12px; background: var(--bg-input); border-color: var(--border-color); color: var(--text-main); font-size: 14px; }
.client-workspace .auth-card-custom input:focus { background: var(--bg-input); }
.client-workspace .auth-card-custom input[aria-invalid=true] { border-color: #ef4444; }
.client-workspace .auth-card-custom button { font-size: 12px; padding: 13px; margin-top: 6px; color: var(--action-text); }
.client-workspace .auth-card-custom button.secondary { background: var(--bg-input); color: var(--text-main); margin-top: 0; }
.client-workspace .auth-card-custom button:disabled { opacity: .6; cursor: wait; }
#auth-error { color: #ef4444; font-size: 12px; line-height: 1.6; text-align: center; }
@media (max-width: 480px) {
    .client-workspace .auth-card-custom { padding: 22px 18px; }
    .client-workspace .auth-card-custom input { font-size: 16px; }
    #auth-form .auth-fields-row { flex-direction: column; }
}
:root { --navbar-color: #0b132b; }
.client-workspace {
    --bg-body: #eef2f6; --bg-card: #ffffff; --bg-input: #f5f7fa;
    --text-main: #203047; --text-muted: #5b6778; --border-color: #e2e8f0;
    --conversation-bg: #f7f9fc; --accent-text: color-mix(in srgb, var(--primary-color) 55%, #163344);
    --sent-bg: color-mix(in srgb, var(--primary-color) 11%, #ffffff);
    --sent-border: color-mix(in srgb, var(--primary-color) 23%, #e2e8f0);
    --nav-text: #ffffff; --action-text: #ffffff;
    height: 100vh; height: var(--client-viewport-height, 100dvh); min-height: 0; margin: 0;
    padding: 28px 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: var(--text-main); background: var(--bg-body);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px;
    background-image: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--primary-color) 5%, transparent), transparent 65%);
    color-scheme: light;
}
:root[data-client-theme="dark"] .client-workspace, .client-workspace.dark-mode {
    --bg-body: #0c121c; --bg-card: #161e2b; --bg-input: #1b2534;
    --text-main: #e9eef6; --text-muted: #a0aec1; --border-color: #2a3647;
    --conversation-bg: #111925; --accent-text: color-mix(in srgb, var(--primary-color) 55%, #ffffff);
    --sent-bg: color-mix(in srgb, var(--primary-color) 19%, #16242a);
    --sent-border: color-mix(in srgb, var(--primary-color) 29%, #243240);
    color-scheme: dark;
}
.client-workspace *, .client-workspace *::before, .client-workspace *::after { box-sizing: border-box; }
.client-workspace button, .client-workspace textarea, .client-workspace input { font-family: inherit; }
.client-workspace button { cursor: pointer; }
.client-workspace [hidden] { display: none !important; }
.client-workspace :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.client-shell { width: min(100%, 900px); height: min(100%, 850px); display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.client-topbar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-shrink: 0; min-height: 68px; padding: 12px 18px; border-radius: 16px; background: var(--navbar-color); color: var(--nav-text); }
.client-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-brand-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--nav-text) 9%, transparent); }
.client-brand strong { display: block; font-size: 13px; font-weight: 700; }
.client-brand div > span { display: block; margin-top: 4px; font-size: 10px; opacity: .7; }
.client-preferences { display: flex; align-items: center; gap: 8px; }
.client-nav-button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--nav-text) 16%, transparent); border-radius: 10px; background: transparent; color: inherit; font-size: 16px; }
.client-nav-button:hover, .client-nav-button[aria-expanded="true"] { background: color-mix(in srgb, var(--nav-text) 10%, transparent); }
.client-own-profile { max-width: 190px; font-size: 12px; }
#client-own-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-own-avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; background: color-mix(in srgb, var(--nav-text) 12%, transparent); }
.client-own-avatar img { width: 100%; height: 100%; object-fit: cover; }
.client-appearance-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; width: 308px; max-width: calc(100vw - 24px); padding: 20px; border: 1px solid var(--border-color); border-radius: 16px; color: var(--text-main); background: var(--bg-card); box-shadow: 0 18px 54px #00000024; max-height: calc(var(--client-viewport-height, 100dvh) - 90px); overflow-y: auto; }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.appearance-heading button { width: 32px; height: 32px; border: 0; border-radius: 8px; color: var(--text-muted); background: var(--bg-input); }
.client-appearance-panel p { font-size: 11px; line-height: 1.7; color: var(--text-muted); margin: 3px 0 18px; }
.appearance-label { font-size: 11px; font-weight: 600; }
.client-theme-options { display: flex; gap: 8px; margin: 9px 0 17px; }
.client-theme-options button { min-height: 42px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-main); font-size: 12px; }
.client-theme-options button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--sent-bg); color: var(--accent-text); }
.appearance-color { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; font-size: 12px; }
.appearance-color small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.appearance-color input { width: 42px; height: 36px; border: 1px solid var(--border-color); border-radius: 8px; padding: 3px; background: var(--bg-input); cursor: pointer; }
.appearance-reset { min-height: 38px; width: 100%; margin-top: 6px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12px; }
.appearance-statement { display: block; margin-top: 10px; color: var(--accent-text); font-size: 12px; font-weight: 600; text-align: center; }
.client-workspace .client-chat-wrapper { width: 100%; max-width: none; height: auto; flex: 1; min-height: 0; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-card); overflow: hidden; box-shadow: 0 14px 50px #14253e0a; }
.client-workspace .client-chat-header { padding: 20px 26px; gap: 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-card); flex-shrink: 0; }
.client-workspace .header-support-info { gap: 13px; min-width: 0; }
.header-support-info > div:last-child { min-width: 0; }
.conversation-eyebrow { display: block; margin-bottom: 5px; font-size: 9px; letter-spacing: 1.5px; font-weight: 600; color: var(--text-muted); }
.client-workspace .support-avatar { width: 48px; height: 48px; flex: 0 0 48px; background: var(--sent-bg); color: var(--accent-text); border: 1px solid var(--sent-border); box-shadow: none; font-size: 23px; }
.client-workspace #support-agent-name { margin: 0; font-size: 17px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); }
.client-workspace .status-online { margin: 3px 0 0; font-size: 10px; color: var(--accent-text); }
.client-workspace .pulse-dot { width: 6px; height: 6px; margin-right: 5px; background: var(--accent-text); box-shadow: none; animation: none; }
.client-workspace .header-ticket { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.client-workspace .btn-profile-client { display: flex; gap: 7px; align-items: center; justify-content: center; min-width: 42px; min-height: 40px; padding: 9px 13px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-muted); font-size: 11px; font-weight: 500; box-shadow: none; }
.client-workspace .btn-profile-client:hover { background: var(--bg-input); color: var(--accent-text); border-color: var(--sent-border); }
.client-workspace #chat-container { min-height: 0; background: var(--conversation-bg); overflow: hidden; display: flex; flex-direction: column; }
.client-workspace #chat-log { padding: 26px 30px; gap: 20px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.client-workspace #chat-log:empty::before { content: 'Seu atendimento começa aqui.\A Aguarde enquanto conectamos você.'; white-space: pre-line; color: var(--text-muted); text-align: center; font-size: 12px; line-height: 2; margin: auto; }
.client-workspace .stream-message-row { max-width: 80%; margin-top: 0; gap: 10px; min-width: 0; }
.client-workspace .msg-avatar { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; flex-shrink: 0; margin-top: 25px; }
.client-workspace .msg-balloon-wrap { min-width: 0; }
.client-workspace .msg-meta-inline { gap: 8px; margin-bottom: 6px; align-items: center; }
.client-workspace .msg-author { color: var(--text-muted); line-height: 1.4; }
.client-workspace .msg-time { font-size: 9px; color: var(--text-muted); }
.client-workspace .msg-bubble, .client-workspace .received .msg-bubble { padding: 13px 16px; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 14px 14px 14px 4px; box-shadow: 0 2px 4px #00000003; line-height: 1.8; font-size: 12px; overflow-wrap: anywhere; }
.client-workspace .sent .msg-bubble { background: var(--sent-bg); border-color: var(--sent-border); color: var(--text-main); border-radius: 14px 14px 4px 14px; box-shadow: none; }
.client-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.client-workspace .mensagem { max-width: 80%; padding: 13px 16px; font-size: 12px; line-height: 1.8; border-radius: 14px; box-shadow: none; white-space: pre-wrap; }
.client-workspace .mensagem.recebida { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); align-self: flex-start; }
.client-workspace .mensagem.enviada { background: var(--sent-bg); color: var(--text-main); border: 1px solid var(--sent-border); align-self: flex-end; }
.client-workspace .mensagem.sistema { align-self: center; width: auto; max-width: 100%; padding: 5px 13px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 10px; text-align: center; }
.client-workspace .msg-attachment-file { background: color-mix(in srgb, var(--accent-text) 4%, transparent); border: 1px solid var(--sent-border); border-radius: 10px; padding: 13px; color: var(--text-main); font-size: 11px; text-decoration: none; }
.client-workspace .msg-attachment-file i { color: var(--accent-text); font-size: 21px; }
.client-workspace .msg-attachment-file span { overflow-wrap: anywhere; min-width: 0; }
.client-workspace .msg-attachment-img { max-width: 100%; }
.client-workspace .custom-audio-player, .client-workspace .sent .custom-audio-player { --audio-accent: var(--accent-text); width: 288px; gap: 12px; padding: 2px 0; }
.client-workspace .custom-audio-player .btn-audio-play { background: var(--bg-card); color: var(--accent-text); border-color: var(--sent-border); box-shadow: none; }
.client-workspace .audio-player-heading { font-size: 10px; }
.client-workspace .audio-player-footer .audio-transcribe { min-height: 32px; font-size: 11px; }
.client-workspace .audio-speed-hint { display: none; }
.client-workspace .custom-audio-player .audio-time-info > span:last-child { display: none; }
.client-workspace .audio-transcript { background: color-mix(in srgb, var(--bg-card) 35%, transparent); }
.client-workspace #status-digitacao { position: static; flex-shrink: 0; padding: 8px 30px; background: var(--conversation-bg); color: var(--text-muted); font-size: 11px; box-shadow: none; }
.client-new-messages { position: absolute; right: 20px; bottom: 14px; z-index: 2; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sent-border); border-radius: 10px; color: var(--accent-text); background: var(--bg-card); box-shadow: 0 4px 16px #00000012; font-size: 11px; }
.client-workspace .font-chip-btn.active { color: var(--accent-text); background: var(--sent-bg); border-color: var(--accent-text); box-shadow: none; }
.client-workspace .save-customizer-btn { color: var(--action-text); background: var(--primary-color); box-shadow: none; }
.client-composer { flex-shrink: 0; padding: 16px 24px 12px; background: var(--bg-card); border-top: 1px solid var(--border-color); }
.client-workspace #input-container { padding: 5px; gap: 5px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-input); align-items: flex-end; }
.client-workspace #input-container:focus-within { border-color: var(--accent-text); }
.client-workspace #chat-message-input { display: block; min-width: 0; flex: 1; width: 0; resize: none; height: 42px; max-height: 124px; min-height: 42px; line-height: 22px; padding: 10px 8px; border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; color: var(--text-main); font-size: 13px; }
.client-workspace #chat-message-input::placeholder { color: var(--text-muted); opacity: .9; }
.client-workspace .attach-btn { width: 42px; height: 42px; min-width: 42px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--text-muted); background: transparent; font-size: 19px; }
.client-workspace .attach-btn:hover { color: var(--accent-text); background: var(--sent-bg); }
.client-workspace #chat-message-submit { width: 42px; height: 42px; min-width: 42px; flex-shrink: 0; border: 0; border-radius: 10px; box-shadow: none; background: var(--primary-color); color: var(--action-text); font-size: 17px; }
.client-workspace button:disabled { cursor: default; opacity: .45; }
.client-composer-hint { display: flex; justify-content: space-between; gap: 12px; margin: 9px 2px 0; color: var(--text-muted); font-size: 9px; }
.client-composer-hint kbd { font-family: inherit; }
.client-composer-hint i { margin-right: 5px; color: var(--accent-text); }
.client-workspace .audio-recording-bar { min-width: 0; flex: 1; background: var(--bg-input); border: 0; box-shadow: none; padding: 4px 8px; height: 42px; }
.client-workspace .recording-waves { flex: 1; min-width: 0; }
.client-workspace .auth-overlay-custom { background: color-mix(in srgb, var(--bg-body) 92%, transparent); backdrop-filter: blur(8px); padding: 16px; }
.client-workspace .auth-card-custom { width: min(100%, 390px); padding: 30px; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: 0 16px 60px #00000018; }
.client-workspace .auth-card-custom h2 { color: var(--text-main); font-size: 20px; line-height: 1.5; }
.client-workspace .auth-card-custom p { color: var(--text-muted); line-height: 1.8; font-size: 12px; }
.client-workspace .auth-card-custom label { display: block; margin: 10px 0 7px; font-size: 11px; font-weight: 600; text-align: left; }
.client-workspace .auth-card-custom input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-main); border-radius: 10px; padding: 13px; }
.client-workspace .auth-card-custom button { background: var(--primary-color); color: var(--action-text); border-radius: 10px; box-shadow: none; min-height: 44px; }
.client-workspace .auth-card-custom button.secondary { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); }
.client-workspace .bot-option { padding: 11px 15px; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--sent-border); border-radius: 10px; text-align: left; font-size: 12px; }
.client-workspace .bot-option:hover { background: var(--sent-bg); }
.client-workspace .new-attendance-button { background: var(--primary-color); color: var(--action-text); border: 0; padding: 12px 18px; border-radius: 10px; font-size: 12px; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 680px) {
    .client-workspace { padding: 0; background: var(--conversation-bg); }
    .client-shell { width: 100%; height: 100%; gap: 0; }
    .client-topbar { min-height: calc(60px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-radius: 0; gap: 8px; }
    .client-brand { gap: 8px; }
    .client-brand-icon { display: none; }
    .client-brand strong { font-size: 11px; }
    .client-brand div > span { font-size: 9px; margin-top: 3px; }
    .client-own-profile { padding: 5px; width: 40px; }
    #client-own-name { display: none; }
    .client-preferences { gap: 6px; }
    .client-appearance-panel { right: 12px; }
    .client-workspace .client-chat-wrapper { border: 0; border-radius: 0; box-shadow: none; }
    .client-workspace .client-chat-header { padding: 14px 16px; gap: 10px; }
    .client-workspace .header-support-info { gap: 10px; flex: 1; }
    .client-workspace .support-avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .conversation-eyebrow { font-size: 8px; margin-bottom: 3px; letter-spacing: 1px; }
    .client-workspace #support-agent-name { font-size: 15px; max-width: 100%; }
    .client-workspace .header-ticket { gap: 6px; }
    .client-workspace .btn-profile-client { padding: 0; width: 42px; height: 42px; font-size: 16px; }
    .client-workspace .btn-profile-client span { display: none; }
    .client-workspace #chat-log { padding: 18px 14px; gap: 18px; }
    .client-workspace .stream-message-row { max-width: 92%; gap: 7px; }
    .client-workspace .msg-avatar { width: 25px; height: 25px; flex-basis: 25px; border-radius: 8px; }
    .client-workspace .msg-bubble { padding: 11px 13px; font-size: 13px; }
    .client-workspace .custom-audio-player { width: 260px; max-width: 100%; }
    .client-workspace .custom-audio-player .btn-audio-play { width: 40px; height: 40px; flex-basis: 40px; }
    .client-workspace .custom-audio-player .audio-speed { min-height: 36px; }
    .client-composer { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
    .client-workspace #input-container { gap: 2px; padding: 4px; border-radius: 12px; }
    .client-workspace #chat-message-input { font-size: 16px; padding: 10px 5px; }
    .client-workspace .attach-btn { width: 38px; min-width: 38px; }
    .client-composer-hint { display: none; }
    .client-workspace #status-digitacao { padding: 7px 16px; }
    .client-workspace .profile-modal-overlay { height: var(--client-viewport-height, 100dvh); padding: 16px 12px; }
    .client-workspace .custom-editor-dialog { flex-direction: column; width: 100%; max-width: 100%; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
    .client-workspace .editor-close-btn { position: sticky; top: 12px; margin: 12px 12px -44px auto; flex-shrink: 0; }
    .client-workspace .custom-editor-sidebar { width: 100%; padding: 54px 20px 20px; overflow: visible; flex-shrink: 0; border-right: 0; }
    .client-workspace .custom-preview-column.split-view-mode { width: 100%; min-width: 0; flex-shrink: 0; overflow: visible; padding: 20px; }
    .client-workspace .split-profile-card { width: 100%; min-width: 0; }
    .client-workspace .profile-card-left-poster { display: none; }
    .client-workspace .profile-card-right-info { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .client-workspace *, .client-workspace *::before, .client-workspace *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.attendance-rating{margin:18px auto;padding:20px;max-width:390px;border:1px solid var(--border-color,#dfe7ee);border-radius:14px;background:var(--bg-panel,#ffffff);color:var(--text-primary,#172b3c);font-family:system-ui,sans-serif;text-align:center}.attendance-rating strong{font-size:14px}.attendance-rating p{font-size:11px;line-height:1.7;opacity:.75;margin:8px 0}.rating-options{display:flex;justify-content:center;gap:10px;margin-top:14px}.rating-options button{width:42px;height:42px;border-radius:10px;border:1px solid var(--primary-color,#127c6e);background:transparent;color:var(--primary-color,#127c6e);font:700 14px system-ui;cursor:pointer}.rating-options button:hover{background:var(--primary-color,#127c6e);color:white}.rating-options button:disabled{opacity:.5;cursor:default}body.dark-mode .attendance-rating{background:#18252d;color:#edf5f7;border-color:#30434e}