.chat-screen { background:#f4f7f7; color:#102d3b; min-height:100dvh; }
.chat-screen.active { height:100dvh; min-height:0; overflow:hidden; }
.chat-page-heading { display:none !important; }
.chat-page { width:100%; height:100dvh; padding:18px 22px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.chat-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:0 0 auto; }
.chat-page-heading h1 { margin:2px 0 0; font-size:clamp(1.5rem,2vw,2.1rem); font-weight:800; }
.chat-page-heading p { margin:2px 0 0; color:#667a86; font-size:.88rem; }
.chat-eyebrow { display:flex; align-items:center; gap:6px; color:#087f6d; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.chat-eyebrow svg { width:15px; height:15px; }
.chat-heading-actions,.chat-realtime-status { display:flex; align-items:center; gap:10px; }
.chat-realtime-status { padding:7px 10px; border:1px solid #d6e5e2; border-radius:999px; background:#fff; font-size:.72rem; color:#667a86; }
.chat-realtime-status>span { width:8px; height:8px; border-radius:50%; background:#f59e0b; }
.chat-realtime-status[data-state="connected"]>span { background:#10a37f; box-shadow:0 0 0 4px #dff5ed; }
.chat-realtime-status[data-state="reconnecting"]>span,.chat-realtime-status[data-state="disconnected"]>span { background:#ef4444; }
.chat-unread-alert { min-width:0; height:34px; padding:0 9px; display:flex; align-items:center; gap:6px; border:1px solid #d6e5e2; border-radius:999px; background:#fff; color:#607580; cursor:pointer; font:800 .68rem Inter,sans-serif; white-space:nowrap; transition:.15s ease; }
.chat-unread-alert svg { flex:0 0 auto; width:15px; height:15px; }
.chat-unread-alert strong { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#e5efed; color:#607580; font-size:.65rem; }
.chat-unread-alert.has-unread { border-color:#e4aa36; background:#fff8e7; color:#9a5b00; box-shadow:0 0 0 3px rgba(228,170,54,.1); }
.chat-unread-alert.has-unread svg { color:#d67b00; }
.chat-unread-alert.has-unread strong { background:#dc8505; color:#fff; }
.chat-unread-alert.is-active { border-color:#087f6d; background:#087f6d; color:#fff; box-shadow:0 0 0 3px rgba(8,127,109,.16); }
.chat-unread-alert.is-active svg { color:#fff; }
.chat-unread-alert.is-active strong { background:#fff; color:#087f6d; }
.chat-back-button { display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; border:1px solid #b9d1cc; border-radius:10px; background:#fff; color:#087f6d; font-weight:700; }
.chat-back-button svg { width:17px; }
.chat-workspace { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(245px,300px) minmax(400px,1fr) minmax(220px,270px); border:1px solid #d7e4e2; border-radius:17px; background:#fff; box-shadow:0 14px 34px rgba(24,54,67,.08); overflow:hidden; }
.chat-workspace-actions { grid-column:1 / -1; min-height:48px; padding:6px 11px 6px 16px; display:flex; align-items:center; justify-content:flex-end; gap:10px; border-bottom:1px solid #dfe9e7; background:#fbfdfd; }
.chat-conversations-panel,.chat-details-panel { min-width:0; display:flex; flex-direction:column; background:#fbfdfd; }
.chat-conversations-panel { position:relative; border-right:1px solid #dfe9e7; }
.chat-panel-title { display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; padding:14px 8px 8px 10px; }
.chat-panel-title>div { display:flex; align-items:center; gap:4px; min-width:0; }
.chat-panel-title>div:first-child { flex:1 1 auto; overflow:hidden; }
.chat-panel-title strong { min-width:0; overflow:hidden; font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-panel-title span { display:grid; place-items:center; min-width:23px; height:23px; padding:0 6px; border-radius:999px; background:#e1f3ee; color:#087f6d; font-size:.7rem; font-weight:800; }
.chat-panel-actions { flex:0 0 auto; display:flex; align-items:center; gap:1px; }.chat-panel-title button { flex:0 0 27px; width:27px; height:30px; }.chat-panel-title button,.chat-details-head button { display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#52707b; }.chat-details-head button { width:32px; height:32px; }
.chat-panel-title button:hover,.chat-details-head button:hover { background:#e8f3f0; color:#087f6d; }
.chat-panel-title button.is-active { background:#dff3ed; color:#087f6d; }
.chat-panel-title svg,.chat-details-head svg { width:17px; }
.chat-agent-filter { margin:0 12px 9px; padding:8px 9px; border:1px solid #d3e2df; border-radius:10px; background:#f3f9f7; }
.chat-agent-filter[hidden] { display:none; }
.chat-agent-filter>label { display:block; margin-bottom:4px; color:#58717b; font-size:.62rem; font-weight:800; text-transform:uppercase; }
.chat-agent-filter>div { display:flex; align-items:center; gap:5px; }
.chat-agent-filter select { flex:1; min-width:0; height:32px; padding:0 28px 0 9px; border:1px solid #c9dcd8; border-radius:8px; background:#fff; color:#274752; font-size:.7rem; font-weight:700; outline:0; }
.chat-agent-filter select:focus { border-color:#20a88e; box-shadow:0 0 0 2px rgba(32,168,142,.1); }
.chat-agent-filter button { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:0; border-radius:8px; background:#e4f2ee; color:#087f6d; }
.chat-agent-filter button[hidden] { display:none; }
.chat-agent-filter button svg { width:14px; height:14px; }
.chat-workspace-actions .chat-channel-tabs { flex:1 1 auto; min-width:0; height:36px; margin-right:auto; display:flex; align-items:flex-end; gap:4px; overflow-x:auto; scrollbar-width:thin; }
.chat-channel-tabs button { min-width:0; max-width:260px; height:34px; padding:0 11px; display:flex; align-items:center; gap:6px; border:1px solid #d3e2df; border-bottom-color:#cbded9; border-radius:9px 9px 0 0; background:#eef5f3; color:#526f78; cursor:pointer; font-size:.68rem; font-weight:800; white-space:nowrap; }
.chat-channel-tabs button:hover { border-color:#9ecfc4; background:#f7fcfa; color:#087f6d; }
.chat-channel-tabs button.is-active { height:36px; border-color:#087f6d; border-bottom-color:#fff; background:#fff; color:#087f6d; box-shadow:0 -2px 7px rgba(8,127,109,.08); }
.chat-channel-tabs button svg { flex:0 0 auto; width:14px; }.chat-channel-tabs button span { overflow:hidden; text-overflow:ellipsis; }
.chat-channel-avatar { flex:0 0 auto; width:18px; height:18px; border-radius:50%; object-fit:cover; background:#dcebe7; }
.chat-channel-avatar-fallback { display:none; }
.chat-channel-tabs button.has-no-avatar .chat-channel-avatar { display:none; }
.chat-channel-tabs button.has-no-avatar .chat-channel-avatar-fallback { display:block; }
.chat-channel-unread { flex:0 0 auto; min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#0aa37f; color:#fff; font-size:.61rem; font-weight:900; line-height:1; box-shadow:0 1px 3px rgba(7,91,74,.22); }
.chat-channel-unread[hidden] { display:none; }
.chat-channel-tabs button.has-unread { border-color:#68bca9; }
.chat-channel-tabs-empty { display:flex; align-items:center; padding:0 10px; color:#758a92; font-size:.68rem; font-weight:700; }
.chat-search { height:40px; margin:0 12px 9px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid #d3e2df; border-radius:10px; background:#fff; }
.chat-search:focus-within { border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }
.chat-search svg { width:16px; color:#6b818b; }
.chat-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:.79rem; }
.chat-filters { padding:0 6px 10px; display:grid; grid-template-columns:max-content max-content max-content 29px; align-items:center; justify-content:start; gap:3px; overflow:hidden; }
.chat-filters button { min-width:0; padding:6px 5px; border:1px solid #d7e4e2; border-radius:999px; background:#fff; color:#607580; font-size:.61rem; font-weight:700; white-space:nowrap; }
.chat-filters button.is-active { border-color:#087f6d; background:#087f6d; color:#fff; }
.chat-filters .chat-call-history-open { width:29px; height:29px; padding:0; display:grid; place-items:center; border-color:#b9d9d2; color:#087f6d; }
.chat-filters .chat-call-history-open:hover { border-color:#087f6d; background:#edf8f5; }
.chat-filters .chat-call-history-open svg { width:14px; height:14px; }
.chat-active-filters { margin:0 7px 8px; padding:6px 7px; display:flex; align-items:center; justify-content:space-between; gap:6px; border:1px solid #9fcfc4; border-radius:9px; background:#e7f5f1; color:#087f6d; }
.chat-active-filters[hidden] { display:none; }
.chat-active-filters>span { min-width:0; display:flex; align-items:center; gap:5px; font-size:.61rem; }
.chat-active-filters>span svg { flex:0 0 auto; width:13px; height:13px; }
.chat-active-filters>span strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-active-filters>button { flex:0 0 auto; min-height:25px; padding:0 7px; display:flex; align-items:center; gap:3px; border:0; border-radius:7px; background:#087f6d; color:#fff; cursor:pointer; font:800 .58rem Inter,sans-serif; }
.chat-active-filters>button svg { width:12px; height:12px; }
.chat-conversation-list { flex:1; min-height:0; overflow-y:auto; }
.chat-conversation-list.is-refreshing { opacity:.94; transition:opacity .12s ease; }
.chat-conversation { width:100%; padding:11px 12px; display:flex; align-items:center; gap:10px; border:0; border-bottom:1px solid #edf2f1; background:transparent; text-align:left; transition:.15s ease; }
.chat-conversation:hover { background:#f0f8f6; }
.chat-conversation.is-active { background:#e4f4ef; box-shadow:inset 3px 0 #087f6d; }
.chat-conversation.is-cross-channel-transfer { background:#fff6df; box-shadow:inset 3px 0 #d88716; }
.chat-conversation.is-cross-channel-transfer:hover { background:#ffefc7; }
.chat-conversation.is-cross-channel-transfer.is-active { background:#ffe9b5; box-shadow:inset 4px 0 #c66f0a; }
.chat-list-avatar,.chat-contact-avatar,.chat-details-avatar { display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:linear-gradient(145deg,#d9f1ea,#bee3d9); color:#087f6d; font-weight:800; }
.chat-list-avatar { width:39px; height:39px; font-size:.75rem; }
.chat-list-copy { flex:1; min-width:0; }
.chat-list-line { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.chat-list-name { display:flex; align-items:center; gap:4px; min-width:0; }
.chat-list-name strong { min-width:0; }
.chat-list-line strong,.chat-list-line small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-line strong { font-size:.78rem; }
.chat-list-line time { flex:none; color:#8698a0; font-size:.62rem; }
.chat-list-line small { color:#687e88; font-size:.69rem; }
.chat-list-line b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#10a37f; color:#fff; font-size:.6rem; }
.chat-list-meta { margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.chat-list-meta .chat-list-agent { margin-top:0; }
.chat-channel-badge { max-width:58%; padding:2px 6px; overflow:hidden; border-radius:999px; background:#e7f4f1; color:#087f6d; font-size:.56rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.chat-sankhya-badge { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; border-radius:999px; background:#e2f6ef; color:#07836f; vertical-align:middle; }
.chat-sankhya-badge.is-compact { width:15px; height:15px; }
.chat-sankhya-badge svg { width:12px; height:12px; stroke-width:2.4; }
.chat-sankhya-badge.is-compact svg { width:11px; height:11px; }
.chat-contact-heading>strong { display:flex; align-items:center; gap:5px; min-width:0; }
.chat-load-more { margin:8px 12px 12px; padding:8px; border:1px solid #c9dcd8; border-radius:9px; background:#fff; color:#087f6d; font-size:.7rem; font-weight:700; }
.chat-list-empty,.chat-list-error { min-height:240px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#6d828c; }
.chat-list-empty svg { width:30px; margin-bottom:10px; color:#9ab1b7; }
.chat-list-empty strong,.chat-list-error strong { color:#314d59; font-size:.8rem; }
.chat-list-empty span,.chat-list-error span { margin-top:5px; font-size:.68rem; }
.chat-list-error button { margin-top:10px; border:0; background:none; color:#087f6d; font-size:.7rem; font-weight:800; }
.chat-conversation-skeleton { height:62px; padding:11px 12px; display:grid; grid-template-columns:39px 1fr; grid-template-rows:12px 9px; gap:8px 10px; border-bottom:1px solid #edf2f1; }
.chat-conversation-skeleton i,.chat-conversation-skeleton span,.chat-conversation-skeleton b { border-radius:999px; background:linear-gradient(90deg,#edf2f1,#f8faf9,#edf2f1); background-size:200%; animation:chat-shimmer 1.2s infinite; }
.chat-conversation-skeleton i { grid-row:1/3; border-radius:50%; }.chat-conversation-skeleton span { width:72%; }.chat-conversation-skeleton b { width:90%; }
@keyframes chat-shimmer { to { background-position:-200% 0; } }
.chat-main-panel { min-width:0; min-height:0; position:relative; overflow:hidden; background:#eef5f3; }
.chat-empty-state { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#71848d; }
.chat-empty-state>span { display:grid; place-items:center; width:68px; height:68px; margin-bottom:15px; border-radius:22px; background:#dff1ec; color:#087f6d; }.chat-empty-state svg { width:31px; }
.chat-empty-state strong { color:#173a47; font-size:1rem; }.chat-empty-state p { margin:5px 0; font-size:.75rem; }
.chat-active-view { height:100%; min-height:0; overflow:hidden; display:flex; flex-direction:column; background:#eef5f3; }
.chat-active-header { min-height:60px; padding:9px 13px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #dce8e6; background:#fff; }
.chat-contact-avatar { width:38px; height:38px; font-size:.72rem; }.chat-contact-heading { flex:1; min-width:0; display:flex; flex-direction:column; }.chat-contact-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }.chat-contact-heading span { color:#6d828c; font-size:.66rem; }
.chat-contact-heading>small { margin-top:2px; overflow:hidden; color:#087f6d; font-size:.58rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.chat-details-toggle,.chat-mobile-back { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#52707b; }.chat-details-toggle:hover,.chat-mobile-back:hover { background:#e8f3f0; color:#087f6d; }.chat-details-toggle svg,.chat-mobile-back svg { width:18px; }.chat-mobile-back { display:none; }
.chat-call-start { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #b9d9d2; border-radius:10px; background:#edf8f5; color:#087f6d; cursor:pointer; transition:.15s ease; }
.chat-call-start:hover { border-color:#087f6d; background:#dff3ed; transform:translateY(-1px); }
.chat-call-start:disabled { opacity:.5; cursor:not-allowed; transform:none; }.chat-call-start svg { width:17px; height:17px; }
.chat-call-start[data-loading="true"] { opacity:.7; }
.chat-window-notice { padding:7px 12px; border-bottom:1px solid #f3dda6; background:#fff8e5; color:#9a6508; font-size:.68rem; font-weight:700; }
.chat-message-list { flex:1 1 0; min-height:0; overscroll-behavior:contain; overflow-y:auto; padding:18px clamp(14px,3vw,38px); background-color:#eef5f3; background-image:linear-gradient(rgba(238,248,245,.32),rgba(238,248,245,.32)),url('/chat-wallpaper.png'); background-size:auto,760px auto; background-repeat:repeat; background-position:center top; }
.chat-message { display:flex; margin:5px 0; }.chat-message.is-outbound { justify-content:flex-end; }.chat-bubble { position:relative; max-width:min(72%,620px); padding:8px 10px 5px; border:1px solid #dce7e5; border-radius:11px 11px 11px 3px; background:#fff; box-shadow:0 2px 4px rgba(25,55,67,.05); overflow-wrap:anywhere; }.chat-message.is-outbound .chat-bubble { border-color:#bfe2d8; border-radius:11px 11px 3px 11px; background:#dff5ed; }.chat-bubble p { margin:0; font-size:.78rem; line-height:1.42; }.chat-bubble footer { margin-top:3px; display:flex; justify-content:flex-end; align-items:center; gap:4px; color:#7f939b; font-size:.57rem; }.chat-message-status { color:#4f8d82; font-weight:900; letter-spacing:-2px; }.chat-message-status.is-read { color:#168bd2; }.chat-message-status.is-failed { color:#dc2626; letter-spacing:0; }.chat-template-message,.chat-unsupported { display:flex; align-items:center; gap:7px; font-size:.73rem; }.chat-template-message svg,.chat-unsupported svg { width:17px; }.chat-reaction { font-size:1.5rem; }
.chat-internal-event { display:flex; justify-content:center; margin:10px 0; text-align:center; }
.chat-internal-event>span { max-width:min(90%,520px); padding:5px 10px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; border:1px solid #cbded9; border-radius:999px; background:rgba(247,251,250,.94); color:#526d76; box-shadow:0 1px 3px rgba(25,55,67,.06); }
.chat-internal-event svg { width:13px; height:13px; color:#087f6d; }
.chat-internal-event strong { color:#31525d; font-size:.64rem; }
.chat-internal-event time { color:#71858e; font-size:.57rem; }
.chat-system-notice { width:min(88%,560px); margin:4px auto 13px; padding:10px 12px; display:flex; align-items:flex-start; gap:9px; border:1px solid #d5e5e1; border-radius:10px; background:rgba(255,255,255,.94); box-shadow:0 2px 5px rgba(22,49,59,.08); color:#4c6671; }.chat-system-notice.is-closed { border-color:#f0d39a; background:#fffaf0; }.chat-system-notice>svg { flex:0 0 auto; width:18px; color:#087f6d; }.chat-system-notice.is-closed>svg { color:#b87914; }.chat-system-notice div { min-width:0; display:flex; flex-direction:column; gap:2px; }.chat-system-notice strong { color:#24434f; font-size:.69rem; }.chat-system-notice span { font-size:.65rem; line-height:1.35; }
.chat-document,.chat-image-placeholder { min-width:210px; padding:9px; display:flex; align-items:center; gap:9px; border:0; border-radius:8px; background:rgba(255,255,255,.7); color:#23434f; text-align:left; }.chat-document svg,.chat-image-placeholder svg { width:25px; color:#087f6d; }.chat-document span { display:flex; flex-direction:column; min-width:0; }.chat-document strong { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }.chat-document small { color:#71858e; font-size:.6rem; }
.chat-image-preview { display:block; width:min(250px,60vw); height:190px; padding:0; overflow:hidden; border:0; border-radius:9px; background:#dfecea; cursor:zoom-in; }
.chat-image-preview img { display:block; width:100%; height:100%; object-fit:contain; }
.chat-media-shell { position:relative; overflow:hidden; display:flex; align-items:center; gap:9px; color:#6d868c; background:#edf4f2; border-radius:8px; }.chat-media-shell::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:chat-media-shimmer 1.35s ease-in-out infinite; }.chat-media-shell svg { z-index:1; width:18px; margin-left:10px; color:#6b9189; }.chat-media-shell span { width:60%; height:5px; border-radius:999px; background:#d1e0dc; }.chat-media-shell.is-audio { width:min(280px,65vw); height:36px; }.chat-media-shell.is-video { width:min(300px,65vw); aspect-ratio:16/9; justify-content:center; }.chat-media-shell.is-video svg { width:28px; margin:0; }.chat-media-shell.is-video span { display:none; }@keyframes chat-media-shimmer { to { transform:translateX(100%); } }.chat-audio { width:min(280px,65vw); height:36px; }.chat-video { width:min(300px,65vw); max-height:280px; border-radius:8px; background:#dfeae7; }
.chat-history-loader { height:18px; display:flex; align-items:center; justify-content:center; gap:4px; opacity:0; transition:opacity .15s ease; }.chat-message-list.is-loading-history .chat-history-loader { opacity:1; }.chat-history-loader span { width:5px; height:5px; border-radius:50%; background:#10a37f; animation:chat-history-dots .8s infinite alternate; }.chat-history-loader span:nth-child(2){animation-delay:.15s}.chat-history-loader span:nth-child(3){animation-delay:.3s}@keyframes chat-history-dots{to{transform:translateY(-4px);opacity:.35}}.chat-message-empty,.chat-messages-loading { height:100%; display:flex; align-items:center; justify-content:center; color:#71858e; font-size:.74rem; }.chat-message-empty.is-error { color:#b42318; }.chat-messages-loading { gap:5px; }.chat-messages-loading span { width:7px; height:7px; border-radius:50%; background:#10a37f; animation:chat-dots .9s infinite alternate; }.chat-messages-loading span:nth-child(2){animation-delay:.2s}.chat-messages-loading span:nth-child(3){animation-delay:.4s}@keyframes chat-dots{to{transform:translateY(-7px);opacity:.35}}
.chat-new-message-button { position:absolute; right:18px; bottom:76px; padding:7px 11px; display:flex; align-items:center; gap:5px; border:0; border-radius:999px; background:#087f6d; color:#fff; box-shadow:0 5px 14px rgba(8,127,109,.25); font-size:.66rem; font-weight:700; }.chat-new-message-button svg { width:14px; }
.chat-composer-feedback { flex:0 0 auto; min-height:0; padding:0 14px; background:#fff; color:#4f736d; font-size:.62rem; }.chat-composer-feedback:not(:empty) { padding-top:5px; }.chat-composer-feedback.is-error { color:#c1261c; }
.chat-composer { flex:0 0 auto; padding:9px 11px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:7px; border-top:1px solid #dce8e6; background:#fff; }.chat-composer textarea { flex:1; min-width:0; min-height:38px; max-height:128px; padding:10px 12px; resize:none; overflow-y:auto; border:1px solid #d4e2df; border-radius:11px; outline:0; font:inherit; font-size:.76rem; line-height:1.35; }.chat-composer textarea:focus { border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }
.chat-composer-reply { flex:0 0 100%; min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr) 30px; align-items:center; gap:7px; padding:6px 7px; border-left:3px solid #087f6d; border-radius:8px; background:#edf7f4; color:#274651; }.chat-composer-reply[hidden] { display:none; }.chat-composer-reply > span { display:grid; place-items:center; color:#087f6d; }.chat-composer-reply svg { width:15px; height:15px; }.chat-composer-reply div { min-width:0; display:flex; flex-direction:column; }.chat-composer-reply strong,.chat-composer-reply small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-composer-reply strong { color:#087f6d; font-size:.65rem; }.chat-composer-reply small { color:#58727b; font-size:.62rem; }.chat-composer-reply button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#58727b; cursor:pointer; }.chat-composer-reply button:hover { background:#dcefe9; color:#087f6d; }
.chat-icon-button,.chat-send-button,.chat-template-button { height:38px; border:0; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#52707b; background:#edf5f3; }.chat-icon-button { width:38px; flex:0 0 38px; }.chat-icon-button svg,.chat-send-button svg { width:18px; }.chat-template-button { padding:0 10px; gap:5px; color:#087f6d; font-size:.67rem; font-weight:700; }.chat-template-button svg { width:16px; }.chat-send-button { width:40px; flex:0 0 40px; background:#087f6d; color:#fff; }.chat-send-button:disabled { opacity:.45; }.chat-attachment-wrap { position:relative; }.chat-attachment-menu { position:absolute; left:0; bottom:47px; z-index:10; width:150px; padding:5px; border:1px solid #d5e3e0; border-radius:11px; background:#fff; box-shadow:0 10px 25px rgba(22,51,64,.16); }.chat-attachment-menu button { width:100%; padding:8px; display:flex; align-items:center; gap:8px; border:0; border-radius:7px; background:transparent; color:#314d59; text-align:left; font-size:.7rem; }.chat-attachment-menu button:hover { background:#eaf5f2; }.chat-attachment-menu svg { width:16px; color:#087f6d; }
.chat-recording { flex:0 0 auto; padding:9px 12px; display:flex; align-items:center; gap:9px; border-top:1px solid #dce8e6; background:#fff; font-size:.7rem; }.chat-recording-dot { width:9px; height:9px; border-radius:50%; background:#ef4444; animation:chat-pulse 1s infinite; }@keyframes chat-pulse{50%{opacity:.35}}.chat-recording>span:nth-of-type(2){flex:1;color:#6d828c}.chat-recording button { padding:7px 10px; border:1px solid #cbded9; border-radius:8px; background:#fff; color:#087f6d; font-size:.66rem; font-weight:700; }.chat-recording button:last-child { border-color:#087f6d; background:#087f6d; color:#fff; }
.chat-details-panel { border-left:1px solid #dfe9e7; transition:width .2s ease,opacity .2s ease; }.chat-details-panel.is-collapsed { width:0; min-width:0; opacity:0; overflow:hidden; border:0; }.chat-details-head { height:54px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e1eae8; }.chat-details-head strong { font-size:.78rem; }.chat-details-empty { padding:30px 15px; text-align:center; color:#80929a; font-size:.7rem; }.chat-details-content { padding:18px 14px; text-align:center; overflow-y:auto; }.chat-details-avatar { width:60px; height:60px; margin:0 auto 9px; font-size:1rem; }.chat-details-content h2 { margin:0; font-size:.92rem; }.chat-details-content>p { margin:3px 0 17px; color:#70848d; font-size:.68rem; }.chat-details-list { margin:0; text-align:left; }.chat-details-list div { padding:9px 0; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #e8efed; }.chat-details-list dt { color:#70848d; font-size:.64rem; }.chat-details-list dd { margin:0; max-width:60%; overflow-wrap:anywhere; color:#294753; font-size:.67rem; font-weight:700; }.chat-status-field { margin-top:15px; display:flex; flex-direction:column; gap:6px; color:#607680; text-align:left; font-size:.64rem; font-weight:700; }.chat-status-field select { height:38px; padding:0 9px; border:1px solid #ccded9; border-radius:9px; background:#fff; color:#173a47; font-weight:700; }.chat-future-data { margin-top:18px; padding:12px; border-radius:11px; background:#eff7f5; text-align:left; }.chat-future-data strong { color:#087f6d; font-size:.67rem; }.chat-future-data p { margin:4px 0 0; color:#738790; font-size:.62rem; line-height:1.45; }
.chat-details-content h2 { display:flex; align-items:center; justify-content:center; gap:5px; }
.chat-call-history { display:block; padding:0; background:transparent; }
.chat-call-history-button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid #d6e5e1; border-radius:11px; background:#fff; color:#21414b; text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.chat-call-history-button:hover { border-color:#8fc9bb; background:#f1faf7; transform:translateY(-1px); }
.chat-call-history-button>span { min-width:0; display:flex; align-items:center; gap:9px; }.chat-call-history-button>span>svg { width:18px; height:18px; flex:0 0 auto; color:#087f6d; }.chat-call-history-button>span>span { min-width:0; display:grid; gap:2px; }
.chat-call-history-button b { color:#21414b; font-size:.68rem; }.chat-call-history-button small { color:#758a92; font-size:.58rem; }.chat-call-history-button>svg { width:16px; height:16px; flex:0 0 auto; color:#6f898f; }
.chat-call-history-list { display:grid; gap:7px; margin-top:9px; }.chat-call-history-list article { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #dce9e6; border-radius:9px; background:#fff; }
.chat-call-history-list article>svg { width:16px; height:16px; color:#087f6d; }.chat-call-history-list article.is-failed>svg,.chat-call-history-list article.is-missed>svg,.chat-call-history-list article.is-rejected>svg { color:#d0443d; }
.chat-call-history-list span { min-width:0; display:grid; gap:2px; }.chat-call-history-list b { color:#294753; font-size:.66rem; }.chat-call-history-list small { color:#758a92; font-size:.58rem; }
.chat-call-event { display:flex; width:100%; margin:7px 0; }.chat-call-event.is-outbound { justify-content:flex-end; }.chat-call-event.is-inbound { justify-content:flex-start; }
.chat-call-event-card { width:min(72%,340px); min-width:220px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid #d6e5e1; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(18,50,60,.08); color:#173843; }
.chat-call-event.is-outbound .chat-call-event-card { background:#dff4ed; border-color:#b9ded3; }.chat-call-event-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#173f3b; color:#fff; }.chat-call-event-icon svg { width:18px; height:18px; }.chat-call-event-copy { min-width:0; display:grid; gap:2px; }.chat-call-event-copy strong { font-size:.76rem; line-height:1.2; }.chat-call-event-copy small { color:#58727b; font-size:.65rem; line-height:1.2; }.chat-call-event-card time { align-self:end; white-space:nowrap; color:#6f858d; font-size:.58rem; }.chat-call-event-card.is-missed .chat-call-event-icon,.chat-call-event-card.is-rejected .chat-call-event-icon,.chat-call-event-card.is-failed .chat-call-event-icon { background:#f7e4e2; color:#c9362f; }.chat-call-event-card.is-missed .chat-call-event-copy small,.chat-call-event-card.is-rejected .chat-call-event-copy small,.chat-call-event-card.is-failed .chat-call-event-copy small { color:#b42318; }

@media (max-width:640px) { .chat-call-event-card { width:min(88%,330px); min-width:0; grid-template-columns:34px minmax(0,1fr) auto; padding:8px; }.chat-call-event-icon { width:32px; height:32px; } }

.whatsapp-call-overlay[hidden],.whatsapp-call-panel [hidden] { display:none!important; }
.whatsapp-call-overlay { position:fixed; z-index:5000; inset:0; display:grid; place-items:center; padding:18px; background:rgba(7,27,33,.66); backdrop-filter:blur(5px); }
.whatsapp-call-panel { position:relative; width:min(390px,100%); padding:30px 26px 25px; display:flex; flex-direction:column; align-items:center; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:linear-gradient(155deg,#075e54,#063f3b); box-shadow:0 26px 70px rgba(0,0,0,.34); color:#fff; text-align:center; }
.whatsapp-call-close { position:absolute; top:14px; right:14px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }.whatsapp-call-close svg { width:18px; }
.whatsapp-call-avatar { width:78px; height:78px; display:grid; place-items:center; margin-bottom:13px; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:0 0 0 8px rgba(255,255,255,.06); }.whatsapp-call-avatar svg { width:32px; height:32px; }
.whatsapp-call-eyebrow { margin:0 0 6px; color:#8ee0cb; font-size:.69rem; font-weight:800; letter-spacing:.15em; }.whatsapp-call-panel h2 { margin:0 0 18px; font-size:1.18rem; }.whatsapp-call-panel>strong { max-width:100%; overflow-wrap:anywhere; font-size:1.35rem; }.whatsapp-call-panel>span:not(.whatsapp-call-avatar) { margin-top:5px; color:#bdd8d3; font-size:.78rem; }
.whatsapp-call-status { min-height:20px; margin:20px 0 5px; color:#d8ebe7; font-size:.82rem; }.whatsapp-call-panel time { font-size:1.25rem; font-variant-numeric:tabular-nums; font-weight:800; }
.whatsapp-call-panel #whatsapp-call-channel { max-width:100%; font-size:.7rem; font-weight:700; }
.whatsapp-call-actions { width:100%; display:flex; justify-content:center; gap:14px; margin-top:25px; }.whatsapp-call-actions button { min-width:104px; min-height:54px; padding:8px 14px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:15px; color:#fff; cursor:pointer; font:700 .76rem Inter,sans-serif; transition:.15s ease; }.whatsapp-call-actions button:hover { transform:translateY(-2px); filter:brightness(1.08); }.whatsapp-call-actions button svg { width:19px; height:19px; }.whatsapp-call-actions .is-primary { background:#14a17e; }.whatsapp-call-actions .is-danger { background:#d64941; }.whatsapp-call-actions button:not(.is-primary):not(.is-danger) { background:rgba(255,255,255,.15); }.whatsapp-call-actions button.is-active { background:#e09a2b; }.whatsapp-call-actions .is-wide { width:100%; }
.whatsapp-call-transfer-picker { width:100%; margin-top:16px; padding:13px; border-radius:14px; background:rgba(255,255,255,.1); text-align:left; }.whatsapp-call-transfer-picker[hidden] { display:none!important; }.whatsapp-call-transfer-picker label { display:block; margin-bottom:7px; color:#d8ebe7; font-size:.7rem; font-weight:800; }.whatsapp-call-transfer-picker select { width:100%; min-height:42px; border:0; border-radius:9px; padding:0 10px; background:#fff; color:#173843; }.whatsapp-call-transfer-picker>div { display:flex; gap:8px; margin-top:10px; }.whatsapp-call-transfer-picker button { min-height:38px; flex:1; border:0; border-radius:9px; padding:7px 9px; cursor:pointer; font-size:.7rem; font-weight:800; }.whatsapp-call-transfer-picker button:last-child { color:#fff; background:#14a17e; }
.whatsapp-call-toast { position:fixed; z-index:5100; left:50%; bottom:25px; max-width:min(420px,calc(100vw - 30px)); transform:translateX(-50%); padding:12px 16px; border-radius:11px; background:#173a47; box-shadow:0 12px 32px rgba(0,0,0,.25); color:#fff; font:700 .75rem Inter,sans-serif; }
.whatsapp-call-history-modal[hidden] { display:none!important; }.whatsapp-call-history-modal { position:fixed; z-index:4990; inset:0; display:grid; place-items:center; padding:18px; background:rgba(7,27,33,.58); backdrop-filter:blur(4px); }
.whatsapp-call-history-dialog { width:min(520px,100%); max-height:min(680px,calc(100dvh - 36px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid #d7e5e2; border-radius:19px; background:#fff; box-shadow:0 24px 70px rgba(5,31,38,.26); }
.whatsapp-call-history-dialog>header { display:flex; align-items:center; gap:11px; padding:18px 20px; border-bottom:1px solid #e1ebe9; }.whatsapp-call-history-dialog>header>span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#e7f5f1; color:#087f6d; }.whatsapp-call-history-dialog>header svg { width:18px; }.whatsapp-call-history-dialog>header div { flex:1; min-width:0; }.whatsapp-call-history-dialog small { color:#087f6d; font-size:.59rem; font-weight:800; letter-spacing:.12em; }.whatsapp-call-history-dialog h2 { margin:2px 0 0; color:#14323d; font-size:1.08rem; }.whatsapp-call-history-dialog>header button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:#f1f6f5; color:#526d76; cursor:pointer; }
.whatsapp-call-history-global { min-height:180px; padding:14px; overflow-y:auto; }.whatsapp-call-history-global>.chat-call-history-list { margin:0; }.whatsapp-call-history-global .chat-call-history-list article { padding:11px; }.whatsapp-call-history-global .chat-call-history-list strong { color:#173843; font-size:.74rem; }.whatsapp-call-history-empty { min-height:180px; display:grid; place-content:center; justify-items:center; gap:8px; color:#789098; text-align:center; }.whatsapp-call-history-empty svg { width:28px; height:28px; }
.chat-bubble.has-reaction { margin-bottom:11px; }.chat-reaction-badge { position:absolute; bottom:-12px; left:8px; z-index:1; min-width:22px; min-height:22px; padding:1px 5px; display:flex; align-items:center; justify-content:center; border:1px solid #d7e4e1; border-radius:999px; background:#fff; box-shadow:0 2px 5px rgba(22,51,64,.14); font-size:.85rem; line-height:1; letter-spacing:1px; }.chat-message.is-outbound .chat-reaction-badge { right:8px; left:auto; }
.chat-message { position:relative; }.chat-message-actions { position:absolute; top:-9px; right:-12px; z-index:7; opacity:0; pointer-events:none; transition:opacity .16s ease; }.chat-message.is-outbound .chat-message-actions { right:auto; left:-12px; }.chat-message:hover .chat-message-actions,.chat-message:focus-within .chat-message-actions,.chat-message-actions.is-open { opacity:1; pointer-events:auto; }.chat-message-action-toggle { width:25px; height:25px; display:grid; place-items:center; border:1px solid #d5e3e0; border-radius:50%; background:#fff; color:#57717a; box-shadow:0 2px 6px rgba(25,55,67,.12); cursor:pointer; }.chat-message-action-toggle:hover,.chat-message-action-toggle[aria-expanded="true"] { border-color:#98d8c7; background:#eaf7f3; color:#087f6d; }.chat-message-action-toggle svg { width:15px; height:15px; }.chat-message-reaction-menu { box-sizing:border-box; position:absolute; top:auto; bottom:29px; left:0; z-index:8; display:block; width:230px; max-width:calc(100vw - 28px); padding:4px; overflow:hidden; border:1px solid #d4e3df; border-radius:14px; background:#fff; box-shadow:0 8px 20px rgba(22,51,64,.18); }.chat-message.is-outbound .chat-message-reaction-menu { right:0; left:auto; }.chat-message-reaction-menu[hidden],.chat-message-reaction-more[hidden] { display:none; }.chat-message-reaction-quick { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; }.chat-message-reaction-more { box-sizing:border-box; width:100%; padding-top:3px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:1px; border-top:1px solid #edf2f1; }.chat-message-reaction-menu button { width:100%; min-width:0; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; font-size:.95rem; cursor:pointer; }.chat-message-reaction-menu button:hover { background:#e9f6f1; transform:translateY(-1px); }.chat-message-reaction-menu .chat-message-reaction-more-toggle { color:#54717a; font-size:1.2rem; font-weight:800; }.chat-message-reaction-menu .chat-message-reply-action { width:100%; height:34px; margin-top:3px; padding:0 9px; display:flex; align-items:center; justify-content:flex-start; gap:7px; border-top:1px solid #e5eeec; border-radius:0 0 9px 9px; color:#294753; font-size:.7rem; font-weight:700; }.chat-message-reaction-menu .chat-message-reply-action svg { width:15px; height:15px; }.chat-message-reaction-menu .chat-message-reply-action:hover { transform:none; }
.chat-message-reply-quote { width:100%; min-width:120px; max-width:100%; margin-bottom:6px; padding:6px 8px; display:flex; flex-direction:column; gap:2px; overflow:hidden; border:0; border-left:3px solid #087f6d; border-radius:6px; background:rgba(255,255,255,.78); font:inherit; text-align:left; }.chat-message.is-inbound .chat-message-reply-quote { border-left-color:#4aa7d8; background:#f2f6f7; }.chat-message-reply-quote[data-chat-reply-target] { cursor:pointer; transition:background .16s ease,box-shadow .16s ease; }.chat-message-reply-quote[data-chat-reply-target]:hover,.chat-message-reply-quote[data-chat-reply-target]:focus-visible { outline:0; background:#e7f3f0; box-shadow:0 0 0 2px rgba(8,127,109,.14); }.chat-message-reply-quote strong,.chat-message-reply-quote span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-message-reply-quote strong { color:#087f6d; font-size:.62rem; }.chat-message-reply-quote span { color:#506b74; font-size:.68rem; }.chat-message.is-reply-target .chat-bubble { animation:chat-reply-target-flash 1.35s ease; }@keyframes chat-reply-target-flash{0%,100%{box-shadow:0 2px 4px rgba(25,55,67,.05)}25%,70%{box-shadow:0 0 0 4px rgba(8,127,109,.3),0 5px 16px rgba(8,127,109,.2)}}
.chat-reaction { display:flex; align-items:center; gap:6px; color:#547077; }.chat-reaction span { font-size:1.25rem; line-height:1; }.chat-reaction small { font-size:.67rem; font-weight:700; }.chat-emoji-wrap { position:relative; flex:0 0 auto; }.chat-emoji-menu { position:absolute; right:0; bottom:47px; z-index:10; width:205px; padding:7px; border:1px solid #d5e3e0; border-radius:11px; background:#fff; box-shadow:0 10px 25px rgba(22,51,64,.16); }.chat-emoji-primary,.chat-emoji-more { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }.chat-emoji-more { margin-top:5px; padding-top:5px; border-top:1px solid #e3ecea; }.chat-emoji-more[hidden] { display:none; }.chat-emoji-menu button { height:32px; border:0; border-radius:7px; background:transparent; font-size:1.05rem; cursor:pointer; }.chat-emoji-menu button:hover { background:#eaf5f2; }.chat-emoji-more-toggle { color:#087f6d; font-size:1.3rem!important; font-weight:800; }
.chat-future-data:not(.is-verified) { background:#f4f7f6; }
.chat-future-data strong { display:flex; align-items:center; gap:5px; }
.chat-future-data:not(.is-verified) strong { color:#657982; }
.chat-future-data strong svg { width:14px; height:14px; }
.chat-future-data p b { color:#294753; }
.chat-sankhya-links { margin-top:5px; display:flex; flex-direction:column; gap:6px; }
.chat-sankhya-links p { margin:0; padding-top:6px; border-top:1px solid rgba(8,127,109,.12); }
.chat-sankhya-links p:first-child { padding-top:0; border-top:0; }
.chat-link-partner-button { min-height:31px; margin-top:10px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid #9dcec3; border-radius:8px; background:#fff; color:#087f6d; font-size:.64rem; font-weight:800; cursor:pointer; }
.chat-link-partner-button:hover { border-color:#087f6d; background:#eaf7f3; }
.chat-link-partner-button svg { width:14px; height:14px; }
.chat-media-modal,.chat-template-modal,.chat-contact-modal { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:18px; background:rgba(10,27,34,.66); }.chat-media-modal[hidden],.chat-template-modal[hidden],.chat-contact-modal[hidden] { display:none; }.chat-media-dialog { position:relative; max-width:min(900px,95vw); max-height:90vh; padding:12px; border-radius:14px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.28); }.chat-media-dialog>button { position:absolute; right:18px; top:18px; z-index:1; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:rgba(8,27,34,.76); color:#fff; }.chat-media-dialog img,.chat-media-dialog video { display:block; max-width:calc(95vw - 24px); max-height:calc(90vh - 24px); border-radius:9px; }
.chat-media-dialog:has(.chat-media-zoom-stage) { width:min(1080px,96vw); height:min(90vh,820px); box-sizing:border-box; background:#10191d; }
.chat-media-dialog:has(.chat-media-zoom-stage)>#chat-media-preview { width:100%; height:100%; min-width:0; min-height:0; }
.chat-media-zoom-stage { width:100%; height:100%; overflow:auto; display:flex; align-items:flex-start; justify-content:flex-start; border-radius:9px; overscroll-behavior:contain; }
.chat-media-zoom-stage img { flex:0 0 auto; display:block; max-width:none; max-height:none; margin:auto; object-fit:contain; transition:width .14s ease,height .14s ease; }
.chat-media-zoom-stage img.is-zoomed { cursor:grab; }
.chat-media-zoom-controls { position:absolute; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:rgba(8,27,34,.82); box-shadow:0 5px 18px rgba(0,0,0,.25); }
.chat-media-zoom-controls[hidden] { display:none; }
.chat-media-zoom-controls button { min-width:38px; height:34px; display:grid; place-items:center; padding:0 9px; border:0; border-radius:999px; background:transparent; color:#fff; font-weight:800; }
.chat-media-zoom-controls button:hover { background:rgba(255,255,255,.14); }
.chat-media-zoom-controls svg { width:18px; height:18px; }
.chat-upload-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; }.chat-upload-actions[hidden] { display:none; }.chat-upload-actions button { min-height:38px; padding:0 16px; border:1px solid #b8d9d2; border-radius:9px; background:#fff; color:#087f6d; font:700 .76rem Inter,sans-serif; }.chat-upload-actions button:last-child { border-color:#087f6d; background:#087f6d; color:#fff; }
.chat-template-dialog { width:min(900px,96vw); max-height:90vh; display:flex; flex-direction:column; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.25); }.chat-template-dialog>header,.chat-template-dialog>footer { padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e2ebe9; }.chat-template-dialog>header span { color:#087f6d; font-size:.62rem; font-weight:800; letter-spacing:.1em; }.chat-template-dialog h2 { margin:2px 0 0; font-size:1.2rem; }.chat-template-dialog>header button { border:0; background:none; color:#5d737d; }.chat-template-dialog>.chat-search { margin-top:12px; }.chat-template-body { flex:1; min-height:0; display:grid; grid-template-columns:300px 1fr; border-top:1px solid #edf2f1; }.chat-template-list,.chat-template-config { min-height:260px; max-height:55vh; overflow-y:auto; padding:12px; }.chat-template-list { border-right:1px solid #e1eae8; }.chat-template-list button { width:100%; padding:10px; display:flex; flex-direction:column; gap:3px; border:1px solid #dce7e5; border-radius:9px; background:#fff; color:#294753; text-align:left; margin-bottom:7px; }.chat-template-list button:hover { border-color:#20a88e; background:#eff8f5; }.chat-template-list strong { font-size:.72rem; }.chat-template-list span,.chat-template-list small { color:#71858e; font-size:.61rem; }.chat-template-config>strong { font-size:.86rem; }.chat-template-preview { margin:10px 0; padding:12px; border-radius:10px; background:#e9f5f1; color:#294753; font-size:.72rem; line-height:1.5; }.chat-template-config label { display:flex; flex-direction:column; gap:5px; margin-top:9px; color:#607680; font-size:.64rem; font-weight:700; }.chat-template-config input { height:38px; padding:0 10px; border:1px solid #cbded9; border-radius:8px; }.chat-template-dialog>footer { border-top:1px solid #e2ebe9; border-bottom:0; }.chat-template-dialog>footer span { color:#b42318; font-size:.65rem; }.chat-template-dialog>footer button { padding:9px 15px; border:0; border-radius:9px; background:#087f6d; color:#fff; font-size:.7rem; font-weight:800; }.chat-template-dialog>footer button:disabled { opacity:.45; }
.chat-contact-dialog { width:min(440px,96vw); display:flex; flex-direction:column; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.25); }.chat-contact-dialog>header,.chat-contact-dialog>footer { padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e2ebe9; }.chat-contact-dialog>header span { color:#087f6d; font-size:.62rem; font-weight:800; letter-spacing:.1em; }.chat-contact-dialog h2 { margin:2px 0 0; font-size:1.15rem; }.chat-contact-dialog>header button { border:0; background:none; color:#5d737d; }.chat-contact-body { padding:15px 17px; display:flex; flex-direction:column; gap:11px; }.chat-contact-body>p { margin:0; padding:10px; display:flex; align-items:flex-start; gap:8px; border-radius:9px; background:#eef8f5; color:#4e6c74; font-size:.68rem; line-height:1.42; }.chat-contact-body>p svg { flex:0 0 auto; width:16px; color:#087f6d; }.chat-contact-body label { display:flex; flex-direction:column; gap:5px; color:#4d6870; font-size:.66rem; font-weight:800; }.chat-contact-body input { height:40px; padding:0 10px; border:1px solid #cbded9; border-radius:9px; font:inherit; color:#173a47; }.chat-contact-body input:focus { outline:0; border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }.chat-contact-dialog>footer { border-top:1px solid #e2ebe9; border-bottom:0; }.chat-contact-dialog>footer span { flex:1; color:#b42318; font-size:.64rem; }.chat-contact-dialog>footer button { min-height:38px; padding:0 12px; border:0; border-radius:9px; background:#087f6d; color:#fff; font-size:.7rem; font-weight:800; }.chat-contact-dialog>footer button:disabled { opacity:.5; }
.chat-contact-body { min-height:0; max-height:65dvh; overflow-y:auto; }.chat-contact-body select { width:100%; min-height:42px; padding:0 10px; border:1px solid #cbded9; border-radius:9px; background:#fff; color:#173a47; font:inherit; font-size:.72rem; }.chat-contact-body select:focus { outline:0; border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }
.chat-partner-results { max-height:220px; overflow-y:auto; border:1px solid #d6e4e1; border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(22,51,64,.1); }.chat-partner-results[hidden] { display:none; }.chat-partner-results button { width:100%; padding:10px 11px; display:flex; flex-direction:column; gap:3px; border:0; border-bottom:1px solid #e8efed; background:#fff; color:#173a47; text-align:left; cursor:pointer; }.chat-partner-results button:last-child { border-bottom:0; }.chat-partner-results button:hover,.chat-partner-results button:focus { outline:0; background:#edf8f5; }.chat-partner-results strong { font-size:.7rem; }.chat-partner-results span,.chat-partner-loading { color:#6b8089; font-size:.62rem; }.chat-partner-loading { display:block; padding:12px; text-align:center; }.chat-partner-loading.is-error { color:#bd2a23; }
.chat-selected-partner { position:relative; padding:11px 92px 11px 12px; display:flex; flex-direction:column; gap:3px; border:1px solid #bfe0d9; border-radius:10px; background:#edf8f5; }.chat-selected-partner[hidden] { display:none; }.chat-selected-partner span { color:#668078; font-size:.57rem; font-weight:800; letter-spacing:.06em; }.chat-selected-partner strong { color:#087f6d; font-size:.73rem; }.chat-selected-partner button { position:absolute; right:9px; top:50%; transform:translateY(-50%); padding:6px 8px; border:1px solid #9dcec3; border-radius:7px; background:#fff; color:#087f6d; font-size:.61rem; font-weight:800; cursor:pointer; }
@media (max-width:1100px) { .chat-workspace { grid-template-columns:minmax(230px,285px) minmax(380px,1fr); }.chat-details-panel { position:absolute; z-index:12; right:22px; top:76px; bottom:18px; width:270px; border:1px solid #d9e6e3; border-radius:13px; box-shadow:0 18px 40px rgba(20,48,61,.18); }.chat-details-panel.is-collapsed { width:0; } }
@media (max-width:820px) { .chat-page { padding:10px; }.chat-page-heading { padding-left:45px; }.chat-page-heading p,.chat-realtime-status strong,.chat-back-button span { display:none; }.chat-realtime-status { padding:8px; }.chat-workspace { grid-template-columns:minmax(230px,300px) 1fr; }.chat-template-button span { display:none; }.chat-template-button { width:38px; padding:0; }.chat-details-panel { right:10px; top:68px; bottom:10px; } }
@media (max-width:640px) { .chat-page { height:100dvh; min-height:0; padding:7px; gap:7px; overflow:hidden; }.chat-page-heading { min-height:38px; padding-left:42px; }.chat-page-heading h1 { font-size:1.15rem; }.chat-eyebrow { display:none; }.chat-workspace { display:block; position:relative; min-height:0; border-radius:12px; }.chat-conversations-panel,.chat-main-panel { position:absolute; inset:0; height:auto; min-height:0; }.chat-main-panel { transform:translateX(100%); transition:transform .2s ease; }.chat-workspace.has-conversation .chat-main-panel { transform:translateX(0); }.chat-workspace.has-conversation .chat-conversations-panel { visibility:hidden; }.chat-mobile-back { display:grid; }.chat-active-header { min-height:54px; }.chat-details-toggle { display:none; }.chat-details-panel { display:none; }.chat-message-list { padding:13px 10px; }.chat-bubble { max-width:86%; }.chat-composer { gap:5px; padding:7px; padding-bottom:max(7px,env(safe-area-inset-bottom)); }.chat-icon-button { width:35px; flex-basis:35px; }.chat-template-button { width:35px; }.chat-send-button { width:37px; flex-basis:37px; }.chat-template-body { grid-template-columns:1fr; }.chat-template-list { max-height:230px; border-right:0; border-bottom:1px solid #e1eae8; }.chat-template-config { min-height:200px; }.chat-template-dialog { max-height:94dvh; }.chat-document { min-width:180px; } }
@media (max-width:640px) { .chat-call-start { flex-basis:34px; width:34px; height:34px; }.whatsapp-call-overlay { align-items:end; padding:10px; }.whatsapp-call-panel { width:100%; padding:25px 18px 20px; border-radius:22px; }.whatsapp-call-avatar { width:66px; height:66px; }.whatsapp-call-actions button { min-width:0; flex:1; min-height:52px; padding:7px 10px; } }
@media (max-width:640px) { .whatsapp-call-history-modal { align-items:end; padding:8px; }.whatsapp-call-history-dialog { max-height:82dvh; border-radius:18px; }.whatsapp-call-history-dialog>header { padding:15px; } }

@media (max-width:640px) {
  .chat-page { padding:4px; padding-left:max(42px,env(safe-area-inset-left)); gap:0; }
  .chat-workspace-actions { min-height:42px; height:42px; padding:4px 6px 4px 10px; }
  .chat-workspace-actions::before { font-size:.78rem; }
  .chat-workspace-actions .chat-realtime-status { padding:6px; }
  .chat-workspace-actions .chat-back-button { height:32px; padding:0 9px; }
  .chat-workspace-actions .chat-back-button span { display:none; }
  .chat-conversations-panel,.chat-main-panel { inset:42px 0 0; }
}

/* Confirmação de leitura: dois tiques em azul forte, sem selo. */
.chat-message-status.is-pending { color:#79908a; letter-spacing:0; }
.chat-message-status.is-read { color:#008ee6; }
.chat-message-failure { margin:6px -10px -5px; padding:7px 10px; display:flex; align-items:flex-start; gap:6px; border-top:2px solid #dc2626; border-radius:0 0 3px 11px; background:#fff1f2; color:#b42318; line-height:1.3; letter-spacing:0; }
.chat-message-failure>span { flex:0 0 15px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:#dc2626; color:#fff; font-size:.6rem; font-weight:900; }
.chat-message-failure div { min-width:0; display:flex; flex-direction:column; gap:1px; }
.chat-message-failure strong { font-size:.66rem; }
.chat-message-failure small { font-size:.61rem; font-weight:600; overflow-wrap:anywhere; }

/* Atendimento por agente, fila sem atendente e administração de acesso. */
.chat-list-agent { display:block; margin-top:3px; overflow:hidden; color:#087f6d; font-size:.58rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-agent.is-unassigned { color:#b87914; }
.chat-transfer-badge { flex:0 0 auto; padding:2px 6px; border-radius:999px; background:#f4c36b; color:#74420a; font-size:.54rem; font-weight:800; }
.chat-pipeline-badge { flex:0 0 auto; width:16px; height:16px; display:inline-grid; place-items:center; border-radius:5px; }
.chat-pipeline-badge svg { width:11px; height:11px; stroke-width:2.25; }
.chat-pipeline-badge.is-pending { background:#fff2cf; color:#b87914; }
.chat-pipeline-badge.is-linked { border:1px solid var(--pipeline-border); background:var(--pipeline-bg); color:var(--pipeline-color); }
.pipeline-color-0 { --pipeline-color:#087f6d; --pipeline-bg:#e0f4ed; --pipeline-border:#adddce; }
.pipeline-color-1 { --pipeline-color:#2563a7; --pipeline-bg:#e7f0fc; --pipeline-border:#b9d0ef; }
.pipeline-color-2 { --pipeline-color:#7a4fb3; --pipeline-bg:#f0e9fa; --pipeline-border:#d4c0ec; }
.pipeline-color-3 { --pipeline-color:#bd6518; --pipeline-bg:#fff0df; --pipeline-border:#f1c89d; }
.pipeline-color-4 { --pipeline-color:#b83a61; --pipeline-bg:#fbe8ef; --pipeline-border:#edb9ca; }
.pipeline-color-5 { --pipeline-color:#337b3c; --pipeline-bg:#e9f5e8; --pipeline-border:#bcdcbc; }
.pipeline-color-6 { --pipeline-color:#376f83; --pipeline-bg:#e6f2f5; --pipeline-border:#b8d5dd; }
.pipeline-color-7 { --pipeline-color:#8a651c; --pipeline-bg:#f9f0d9; --pipeline-border:#e5cf94; }
.chat-contact-heading>span { display:flex; align-items:center; gap:7px; }
.chat-contact-heading b { max-width:170px; padding:2px 6px; overflow:hidden; border-radius:999px; background:#e6f4f0; color:#087f6d; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-assignment-button { min-height:31px; padding:0 9px; border:0; border-radius:8px; background:#087f6d; color:#fff; font:800 .63rem Inter,sans-serif; }
.chat-assignment-button.is-light { border:1px solid #bad7d1; background:#fff; color:#087f6d; }
.chat-agent-modal { position:fixed; inset:0; z-index:1850; display:grid; place-items:center; padding:16px; background:rgba(10,31,39,.62); backdrop-filter:blur(3px); }
.chat-agent-dialog { width:min(440px,96vw); max-height:90dvh; padding:18px; overflow:auto; border-radius:16px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.26); }
.chat-agent-dialog.is-wide { width:min(920px,96vw); }
.chat-agent-dialog>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.chat-agent-dialog>header span { color:#087f6d; font-size:.62rem; font-weight:800; letter-spacing:.1em; }
.chat-agent-dialog h2 { margin:2px 0 0; font-size:1.15rem; }
.chat-agent-dialog>header>button { border:0; background:none; color:#59717b; font-size:1.4rem; }
.chat-agent-dialog>label { display:flex; flex-direction:column; gap:5px; margin:10px 0; color:#4f6973; font-size:.66rem; font-weight:800; }
.chat-agent-dialog input,.chat-agent-dialog select { min-height:40px; padding:0 10px; border:1px solid #cbded9; border-radius:9px; font:inherit; }
.chat-agent-dialog>small { color:#70848d; font-size:.64rem; }
.chat-agent-feedback { min-height:18px; color:#bd2a23; font-size:.65rem; }
.chat-agent-dialog>footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.chat-agent-dialog>footer button,.chat-agent-users button { min-height:36px; padding:0 12px; border:1px solid #bcd8d2; border-radius:8px; background:#fff; color:#087f6d; font-weight:800; }
.chat-agent-dialog>footer button:last-child,.chat-agent-users button { border-color:#087f6d; background:#087f6d; color:#fff; }
.chat-agent-dialog>footer button.is-light { border-color:#e4b75e; background:#fff8e8; color:#8c5d05; }
.chat-agent-users { display:flex; flex-direction:column; gap:7px; }
.chat-agent-users form { padding:9px; display:grid; grid-template-columns:minmax(180px,1.2fr) 1fr 1fr auto; align-items:center; gap:7px; border:1px solid #dce8e5; border-radius:10px; }
.chat-agent-enabled { display:flex; align-items:center; gap:7px; }
.chat-agent-enabled input { min-height:auto; }
.chat-agent-enabled span { display:flex; flex-direction:column; }
.chat-agent-enabled strong { font-size:.7rem; }.chat-agent-enabled small { color:#71858e; font-size:.6rem; }
.chat-agent-users em { grid-column:1/-1; color:#087f6d; font-size:.6rem; font-style:normal; }
.chat-agent-dialog.is-wide { width:min(760px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; overflow:hidden; background:#f7fbfa; }
.chat-agent-dialog.is-wide>header { margin:0; padding:18px 20px; border-bottom:1px solid #d9e8e4; background:#fff; }
.chat-agent-dialog.is-wide>header h2 { margin-top:2px; }
.chat-settings-intro { margin:0; padding:14px 20px; border-bottom:1px solid #d9e8e4; color:#4f6973; font-size:.76rem; line-height:1.45; background:#eef8f5; }
.chat-agent-dialog.is-wide>.chat-settings-search { flex-direction:row; margin:14px 20px 0; min-height:40px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid #cbded9; border-radius:9px; background:#fff; color:#5d7680; }
.chat-settings-search svg { width:16px; }
.chat-agent-dialog.is-wide .chat-settings-search input { width:100%; min-height:0; padding:0; border:0; outline:0; background:transparent; font-size:.76rem; }
.chat-agent-dialog.is-wide .chat-agent-users { max-height:calc(100vh - 185px); padding:14px 20px 20px; overflow:auto; gap:12px; }
.chat-agent-dialog.is-wide .chat-agent-users form { display:block; padding:14px; border-color:#d5e5e1; background:#fff; box-shadow:0 1px 2px rgba(9,77,68,.04); }
.chat-agent-user-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-agent-user-head>b { padding:4px 8px; border-radius:999px; color:#087f6d; background:#e1f4ef; font-size:.61rem; }
.chat-agent-dialog.is-wide .chat-agent-users fieldset { margin:13px 0 0; padding:10px; border:1px solid #dce8e5; border-radius:8px; }
.chat-agent-dialog.is-wide .chat-agent-users legend { padding:0 4px; color:#4f6973; font-size:.63rem; font-weight:800; }
.chat-agent-channel-options { display:flex; flex-wrap:wrap; gap:8px; }
.chat-agent-channel-options label { display:flex; align-items:center; gap:6px; min-height:32px; padding:0 9px; border:1px solid #cfe2dc; border-radius:7px; color:#235560; font-size:.68rem; font-weight:700; }
.chat-agent-channel-options input { min-height:auto; margin:0; accent-color:#087f6d; }
.chat-agent-profile-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.chat-agent-dialog.is-wide .chat-agent-profile-fields input { width:100%; }
.chat-agent-dialog.is-wide .chat-agent-users footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.chat-agent-dialog.is-wide .chat-agent-users footer em { margin-right:auto; }
.chat-agent-all-channels { margin:13px 0 0; padding:9px 10px; border-radius:8px; color:#087f6d; background:#e8f6f2; font-size:.68rem; font-weight:700; }
.chat-settings-empty { margin:20px 0; color:#71858e; font-size:.73rem; text-align:center; }
@media (max-width:640px) {
  .chat-assignment-button { padding:0 6px; font-size:.57rem; }
  .chat-contact-heading b { max-width:105px; }
  .chat-agent-users form { grid-template-columns:1fr; }
  .chat-agent-users em { grid-column:auto; }
  .chat-agent-dialog.is-wide>header,.chat-settings-intro,.chat-agent-dialog.is-wide .chat-agent-users { padding-left:14px; padding-right:14px; }
  .chat-agent-dialog.is-wide>.chat-settings-search { margin-left:14px; margin-right:14px; }
  .chat-agent-profile-fields { grid-template-columns:1fr; }
}

/* Template aprovado e resposta de botão, no padrão visual de uma mensagem marcada. */
.chat-template-message { display:block; min-width:260px; max-width:min(520px,100%); overflow:hidden; border:1px solid #c8ddd7; border-radius:9px; background:#fff; }
.chat-template-body-content { padding:9px 10px 7px; }
.chat-template-body-content strong { display:block; margin-bottom:5px; color:#173a47; font-size:.73rem; }
.chat-template-body-content p { margin:0; color:#294753; font-size:.75rem; }
.chat-template-body-content small { display:block; margin-top:7px; color:#71858e; font-size:.61rem; }
.chat-template-buttons { display:flex; flex-direction:column; border-top:1px solid #dfe9e7; }
.chat-template-buttons span { min-width:0; padding:8px 10px; display:flex; align-items:center; justify-content:center; gap:5px; color:#087f6d; text-align:center; font-size:.68rem; font-weight:800; overflow-wrap:anywhere; }
.chat-template-buttons svg { width:13px; height:13px; flex:0 0 auto; }
.chat-template-buttons span + span { border-top:1px solid #dfe9e7; }
.chat-template-message em { display:flex; align-items:center; gap:4px; padding:5px 9px; border-top:1px solid #edf2f1; background:#f4f8f7; color:#6b8188; font-size:.56rem; font-style:normal; }
.chat-template-message em svg { width:12px; height:12px; color:#087f6d; }
.chat-template-reply { min-width:130px; display:flex; flex-direction:column; gap:3px; padding:7px 9px; border-left:3px solid #18a37e; border-radius:7px; background:#fff; color:#23434f; }
.chat-message.is-inbound .chat-template-reply { border-color:#4aa7d8; }
.chat-template-reply span { display:flex; align-items:center; gap:4px; color:#67808a; font-size:.58rem; font-weight:700; }
.chat-template-reply span svg { width:12px; height:12px; color:#087f6d; }
.chat-template-reply strong { color:#173a47; font-size:.78rem; line-height:1.3; }
.chat-shared-contact { min-width:245px; overflow:hidden; border:1px solid #d9e8e4; border-radius:9px; background:#fff; }
.chat-shared-contact-main { min-height:66px; padding:11px 12px; display:flex; align-items:center; gap:10px; }
.chat-shared-contact-avatar { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#e5f4ef; color:#087f6d; font-size:.77rem; font-weight:800; }
.chat-shared-contact-main>span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.chat-shared-contact strong { overflow:hidden; color:#173a47; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-shared-contact small { color:#6e858d; font-size:.64rem; }
.chat-shared-contact-action { width:100%; min-height:34px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-top:1px solid #dce9e5; background:transparent; color:#0b9b67; cursor:pointer; font:800 .7rem Inter,sans-serif; }
.chat-shared-contact-action:hover:not(:disabled) { background:#effaf5; }.chat-shared-contact-action:disabled { cursor:default; opacity:.55; }
.chat-shared-contact-action svg { width:14px; height:14px; }
.chat-message.is-outbound .chat-shared-contact { border-color:#0b6d53; background:#145e46; }
.chat-message.is-outbound .chat-shared-contact-main strong { color:#fff; }
.chat-message.is-outbound .chat-shared-contact-main small { color:#c8e6dc; }
.chat-message.is-outbound .chat-shared-contact-avatar { background:#083e36; color:#8be0c7; }
.chat-message.is-outbound .chat-shared-contact-action { border-color:rgba(255,255,255,.15); color:#2bdd8c; }
.chat-conversation-context-menu { position:fixed; z-index:1700; width:190px; padding:5px; border:1px solid #d7e5e2; border-radius:10px; background:#fff; box-shadow:0 14px 34px rgba(18,49,60,.2); }
.chat-conversation-context-menu button { width:100%; min-height:36px; display:flex; align-items:center; gap:8px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:#294753; cursor:pointer; font:700 .7rem Inter,sans-serif; text-align:left; }
.chat-conversation-context-menu button:hover { background:#edf7f4; }.chat-conversation-context-menu button.is-danger { color:#bd2a23; }.chat-conversation-context-menu button.is-danger:hover { background:#fff0ef; }.chat-conversation-context-menu svg { width:15px; height:15px; }
.chat-delete-modal { position:fixed; inset:0; z-index:1800; display:grid; place-items:center; padding:18px; background:rgba(12,34,42,.58); backdrop-filter:blur(3px); }
.chat-delete-dialog { width:min(390px,100%); padding:22px; border:1px solid #d8e5e2; border-radius:16px; background:#fff; box-shadow:0 24px 58px rgba(10,30,38,.28); }
.chat-delete-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff0ee; color:#c5372d; }.chat-delete-icon svg { width:21px; height:21px; }
.chat-rename-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#e7f6f1; color:#087f6d; }.chat-rename-icon svg { width:21px; height:21px; }
.chat-delete-dialog h2 { margin:13px 0 6px; color:#173a47; font-size:1.05rem; }.chat-delete-dialog>p { margin:0; color:#5f7680; font-size:.75rem; line-height:1.5; }.chat-delete-feedback { min-height:19px; display:block; margin-top:10px; color:#bd2a23; font-size:.67rem; font-weight:700; }
.chat-delete-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }.chat-delete-dialog footer button { min-height:38px; padding:0 13px; border:1px solid #bcd8d2; border-radius:9px; background:#fff; color:#087f6d; cursor:pointer; font:800 .72rem Inter,sans-serif; }.chat-delete-dialog footer button:last-child { border-color:#c5372d; background:#c5372d; color:#fff; }.chat-delete-dialog footer button:disabled { cursor:wait; opacity:.65; }
.chat-rename-dialog label { display:grid; gap:6px; margin-top:14px; color:#35545f; font:800 .7rem Inter,sans-serif; }.chat-rename-dialog input { width:100%; min-height:42px; padding:0 11px; border:1px solid #bcd8d2; border-radius:9px; color:#173a47; font:700 .84rem Inter,sans-serif; }.chat-rename-dialog input:focus { outline:2px solid rgba(8,127,109,.17); border-color:#087f6d; }.chat-rename-dialog footer button:last-child { border-color:#087f6d; background:#087f6d; }

/* Barra de navegação integrada visualmente ao painel do atendimento. */
.chat-page { gap:0; padding:12px 16px; }
.chat-page-heading { min-height:50px; padding:6px 10px 6px 15px; border:1px solid #d7e4e2; border-bottom:1px solid #dfe9e7; border-radius:17px 17px 0 0; background:#fbfdfd; }
.chat-page-heading>div:first-child { display:none; }
.chat-heading-actions { width:100%; justify-content:flex-end; }
.chat-workspace { border-top:0; border-radius:0 0 17px 17px; }

@media (max-width:820px) {
  .chat-page { padding:7px; }
  .chat-page-heading { min-height:44px; padding:5px 7px 5px 11px; }
}

@media (max-width:640px) {
  .chat-page { padding:4px; }
  .chat-page-heading { min-height:42px; padding:4px 6px 4px 10px; }
  .chat-realtime-status { padding:7px; }
  .chat-back-button { height:32px; padding:0 9px; }
}

/* Layout mobile final: painel centralizado e compositor sempre visível. */
.chat-page,.chat-workspace { box-sizing:border-box; }

/* O compositor faz parte de uma linha fixa: somente o histórico pode crescer/rolar. */
.chat-workspace { grid-template-rows:48px minmax(0,1fr); }
.chat-workspace-actions { grid-row:1; }
.chat-conversations-panel,.chat-main-panel,.chat-details-panel { grid-row:2; min-height:0; }
.chat-active-view { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto auto; }
.chat-active-header { grid-row:1; }.chat-window-notice { grid-row:2; }.chat-message-list { grid-row:3; }.chat-composer-feedback { grid-row:4; }.chat-recording { grid-row:5; }.chat-composer { grid-row:6; }

@media (max-width:640px) {
  body.has-global-sidebar .screen.chat-screen.active:not(#home-screen):not(#login-screen),.chat-screen,.chat-screen.active { box-sizing:border-box; width:100%; max-width:100%; height:var(--chat-resting-height,100dvh); min-height:0; margin:0; padding-top:0 !important; overflow:hidden; }
  .chat-page { width:100%; max-width:100%; height:var(--chat-resting-height,100dvh); min-width:0; min-height:0; padding:4px; overflow:hidden; }
  .chat-workspace { width:100%; max-width:100%; height:100%; min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:42px minmax(0,1fr); position:relative; border-top:1px solid #d7e4e2; border-radius:12px; overflow:hidden; }
  .chat-workspace-actions { grid-column:1; grid-row:1; min-width:0; min-height:42px; height:42px; padding:4px 6px 4px 48px; }
  .chat-workspace-actions::before { font-size:.78rem; }
  .chat-workspace-actions .chat-realtime-status { padding:6px; }
  .chat-workspace-actions .chat-unread-alert { padding:0 7px; }
  .chat-workspace-actions .chat-unread-alert>span { display:none; }
  .chat-workspace-actions .chat-back-button { height:32px; padding:0 9px; }
  .chat-workspace-actions .chat-back-button span { display:none; }
  .chat-conversations-panel,.chat-main-panel { box-sizing:border-box; grid-column:1; grid-row:2; position:relative; inset:auto; width:100%; max-width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
  .chat-main-panel { transform:translateX(100%); transition:transform .2s ease; }
  .chat-workspace.has-conversation .chat-main-panel { transform:translateX(0); }
  .chat-workspace.has-conversation .chat-conversations-panel { visibility:hidden; }
  .chat-active-view { box-sizing:border-box; position:absolute; inset:0; width:100%; max-width:100%; height:100%; min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto auto auto; overflow:hidden; }
  .chat-active-view>* { box-sizing:border-box; min-width:0; max-width:100%; }
  .chat-active-header { width:100%; grid-row:1; flex:0 0 54px; min-width:0; min-height:54px; gap:5px; padding-inline:7px; overflow:hidden; }
  .chat-active-header .chat-contact-avatar { width:34px; height:34px; }
  .chat-contact-heading { min-width:0; }
  .chat-contact-heading strong,.chat-contact-heading span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-assignment-button { flex:0 0 auto; min-width:0; padding-inline:6px; white-space:nowrap; }
  .chat-window-notice { grid-row:2; }
  .chat-message-list { width:100%; grid-row:3; min-width:0; min-height:0; padding:13px 10px; overflow-x:hidden; overflow-y:auto; }
  .chat-composer-feedback { grid-row:4; }
  .chat-recording { grid-row:5; }
  .chat-composer { grid-row:6; }
  .chat-composer-feedback,.chat-recording,.chat-composer { flex-shrink:0; }
  .chat-composer { width:100%; min-width:0; position:relative; z-index:3; gap:5px; padding:7px; padding-bottom:max(7px,env(safe-area-inset-bottom)); overflow:visible; }
  .chat-composer textarea { flex:1 1 0; width:0; min-width:0; min-height:36px; }
  .chat-message { box-sizing:border-box; width:100%; min-width:0; max-width:100%; touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none!important; user-select:none!important; }
  .chat-bubble,.chat-bubble * { -webkit-touch-callout:none; -webkit-user-select:none!important; user-select:none!important; }
  .chat-message a,.chat-message button,.chat-message input,.chat-message textarea,.chat-message audio,.chat-message video { -webkit-touch-callout:default; -webkit-user-select:auto; user-select:auto; }
  .chat-bubble,.chat-template-message,.chat-shared-contact { box-sizing:border-box; min-width:0; max-width:calc(100% - 4px); }
  .chat-shared-contact { width:min(245px,100%); }
  .chat-message-actions,.chat-message:hover .chat-message-actions,.chat-message:focus-within .chat-message-actions { top:0; right:0; opacity:0; pointer-events:none; }
  .chat-message.is-inbound .chat-message-actions { right:auto; left:0; }
  .chat-message.is-outbound .chat-message-actions { right:0; left:auto; }
  .chat-message-actions.is-open,.chat-message:hover .chat-message-actions.is-open,.chat-message:focus-within .chat-message-actions.is-open { opacity:1; pointer-events:auto; }
  .chat-message-action-toggle { display:none; }
  .chat-message-reaction-menu { top:auto; bottom:0; right:0; left:auto; max-width:calc(100vw - 28px); }
  .chat-message.is-inbound .chat-message-reaction-menu { right:auto; left:0; }
  .chat-message.is-outbound .chat-message-reaction-menu { right:0; left:auto; }
}

@media (max-width:390px) {
  .chat-active-header { gap:4px; padding-inline:5px; }
  .chat-active-header .chat-contact-avatar { width:31px; height:31px; }
  .chat-contact-heading strong { font-size:.75rem; }
  .chat-contact-heading b { max-width:76px; padding-inline:4px; }
  .chat-assignment-button { padding-inline:5px; font-size:.53rem; }
  .chat-composer { gap:4px; padding-inline:5px; }
  .chat-icon-button,.chat-template-button { width:32px; flex-basis:32px; }
  .chat-send-button { width:34px; flex-basis:34px; }
}

/* Nova conversa: parceiro e telefones cadastrados no Sankhya. */
.chat-contact-dialog { width:min(780px,96vw); max-height:92dvh; border-radius:22px; }
.chat-contact-dialog>header { padding:20px 24px 16px; }
.chat-contact-dialog>header span { font-size:.68rem; }
.chat-contact-dialog h2 { font-size:1.55rem; }
.chat-contact-dialog>header p { margin:5px 0 0; color:#657b85; font-size:.76rem; }
.chat-contact-dialog>header button { width:34px; height:34px; display:grid; place-items:center; cursor:pointer; }
.chat-contact-dialog>header button svg { width:22px; height:22px; }
.chat-contact-body { max-height:68dvh; padding:18px 24px; gap:14px; }
.chat-contact-notice { padding:15px 17px; display:flex; align-items:center; gap:14px; border-radius:13px; background:#edf8f5; color:#506b74; font-size:.72rem; line-height:1.45; }
.chat-contact-notice>svg { flex:0 0 auto; width:28px; height:28px; color:#087f6d; }
.chat-contact-notice>span { display:flex; flex-direction:column; gap:2px; }
.chat-contact-notice strong { color:#087f6d; font-size:.82rem; }
.chat-manual-contact-toggle { min-height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; align-self:flex-start; border:1px dashed #8ecbbc; border-radius:9px; background:#fff; color:#087f6d; font-size:.68rem; font-weight:800; cursor:pointer; }
.chat-manual-contact-toggle:hover,.chat-manual-contact-toggle.is-active { border-style:solid; border-color:#087f6d; background:#eaf7f3; }
.chat-manual-contact-toggle svg { width:16px; height:16px; }
.chat-manual-contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border:1px solid #a9d8ce; border-radius:12px; background:#f5fbf9; }
.chat-manual-contact-fields[hidden] { display:none; }
.chat-manual-contact-fields>strong,.chat-manual-contact-fields>small { grid-column:1/-1; }
.chat-manual-contact-fields>strong { color:#075f54; font-size:.8rem; }
.chat-manual-contact-fields>small { margin-top:-7px; color:#6c838b; font-size:.61rem; }
.chat-manual-contact-fields label { min-width:0; display:flex; flex-direction:column; gap:5px; color:#4f6973; font-size:.66rem; font-weight:800; }
.chat-manual-contact-fields input { min-height:40px; padding:0 10px; border:1px solid #cbded9; border-radius:9px; background:#fff; color:#173a47; font:inherit; }
.chat-manual-contact-fields input:focus { outline:0; border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }
.chat-contact-section-title { margin-bottom:-7px; color:#294753; font-size:.78rem; }
.chat-contact-body>p { padding:13px 15px; font-size:.76rem; }
.chat-contact-body>p svg { width:20px; height:20px; }
.chat-selected-partner { min-height:72px; padding:14px 170px 14px 72px; justify-content:center; gap:4px; border-radius:12px; }
.chat-selected-partner-icon { position:absolute; left:14px; top:50%; width:46px; height:46px; display:grid; place-items:center; transform:translateY(-50%); border-radius:50%; background:#e2f3ee; color:#087f6d; }
.chat-selected-partner-icon svg { width:23px; height:23px; }
.chat-selected-partner-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.chat-selected-partner-copy small { color:#668078; font-size:.59rem; font-weight:800; letter-spacing:.06em; }
.chat-selected-partner-copy strong { overflow:hidden; color:#075f54; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-selected-partner button { right:14px; min-height:38px; padding:0 12px; display:flex; align-items:center; gap:7px; border-radius:9px; font-size:.67rem; }
.chat-selected-partner button svg { width:16px; height:16px; }
.chat-link-contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chat-link-contact-fields[hidden] { display:none; }
.chat-link-contact-fields label small { color:#789097; font-size:.58rem; font-weight:600; }
.chat-partner-contact-field { display:flex; flex-direction:column; gap:8px; }
.chat-partner-contact-field[hidden] { display:none; }
.chat-partner-contact-field>strong { color:#294753; font-size:.78rem; }
.chat-contact-field-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-contact-field-heading>strong { color:#294753; font-size:.78rem; }
.chat-contact-field-heading>button { min-height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid #9dcec3; border-radius:8px; background:#fff; color:#087f6d; font-size:.64rem; font-weight:800; cursor:pointer; }
.chat-contact-field-heading>button:hover { border-color:#087f6d; background:#eaf7f3; }
.chat-contact-field-heading>button svg { width:14px; height:14px; }
.chat-new-sankhya-contact { padding:14px; display:flex; flex-direction:column; gap:12px; border:1px solid #a9d8ce; border-radius:12px; background:#f5fbf9; }
.chat-new-sankhya-contact[hidden] { display:none; }
.chat-new-sankhya-contact-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.chat-new-sankhya-contact-heading>span { display:flex; flex-direction:column; gap:2px; }
.chat-new-sankhya-contact-heading strong { color:#075f54; font-size:.8rem; }
.chat-new-sankhya-contact-heading small { color:#6c838b; font-size:.61rem; }
.chat-new-sankhya-contact-heading>button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; background:#e5f3ef; color:#53717a; cursor:pointer; }
.chat-new-sankhya-contact-heading>button svg { width:15px; height:15px; }
.chat-new-sankhya-contact-fields { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:9px; }
.chat-new-sankhya-contact-fields label { min-width:0; display:grid; grid-template-rows:16px 40px; align-items:center; gap:5px; }
.chat-new-sankhya-contact-fields label>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-new-sankhya-contact-fields label small { color:#789097; font-size:.58rem; font-weight:600; }
.chat-new-sankhya-contact-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.chat-new-sankhya-contact-actions>span { flex:1; color:#b42318; font-size:.63rem; }
.chat-new-sankhya-contact-actions>button { min-height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; background:#087f6d; color:#fff; font-size:.66rem; font-weight:800; cursor:pointer; }
.chat-new-sankhya-contact-actions>button:disabled { opacity:.55; }
.chat-new-sankhya-contact-actions>button svg { width:14px; height:14px; }
.chat-pipeline-field select,.chat-contact-body select { min-height:42px; padding:0 10px; border:1px solid #cbded9; border-radius:9px; background:#fff; color:#173a47; font:inherit; font-weight:700; }
.chat-pipeline-field select:focus,.chat-contact-body select:focus { outline:0; border-color:#20a88e; box-shadow:0 0 0 3px rgba(32,168,142,.1); }
.chat-pipeline-field small { color:#71858e; font-size:.61rem; font-weight:500; line-height:1.35; }
.chat-bitrix-data.is-pending { background:#fff8e8; }
.chat-bitrix-data.is-pending>em { display:block; margin:7px 0; color:#9b6507; font-size:.61rem; font-style:normal; line-height:1.35; }
.chat-bitrix-heading { display:flex; align-items:center; gap:5px; }
.chat-bitrix-heading>small { min-width:16px; height:16px; display:inline-grid; place-items:center; border-radius:999px; background:#dff2ed; color:#087f6d; font-size:.52rem; }
.chat-bitrix-history-button { width:19px; height:19px; display:grid; place-items:center; padding:0; border:1px solid #bad7d1; border-radius:5px; background:#fff; color:#087f6d; cursor:pointer; }
.chat-bitrix-history-button:hover { background:#eaf7f3; }
.chat-bitrix-history-button svg { width:12px; height:12px; }
.chat-bitrix-pipeline-list { margin:7px 0; display:flex; flex-direction:column; gap:5px; }
.chat-bitrix-pipeline-list a { padding:7px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--pipeline-border); border-left:4px solid var(--pipeline-color); border-radius:8px; background:var(--pipeline-bg); color:#294753; text-decoration:none; }
.chat-bitrix-pipeline-list b { overflow:hidden; color:var(--pipeline-color); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-bitrix-pipeline-list small { flex:0 0 auto; color:color-mix(in srgb,var(--pipeline-color) 72%,#526a74); font-size:.56rem; }
.chat-bitrix-history-dialog { width:min(520px,96vw); }
.chat-bitrix-history-loading,.chat-bitrix-history-empty { margin:4px 0; color:#668078; font-size:.72rem; line-height:1.45; }
.chat-bitrix-history-empty.is-error { color:#b42318; }
.chat-bitrix-history-list { display:flex; flex-direction:column; gap:8px; }
.chat-bitrix-history-list article { padding:10px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; border:1px solid var(--pipeline-border); border-left:4px solid var(--pipeline-color); border-radius:9px; background:var(--pipeline-bg); }
.chat-bitrix-history-list article>div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-bitrix-history-list b { overflow:hidden; color:var(--pipeline-color); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-bitrix-history-list small,.chat-bitrix-history-list time { color:#5f7881; font-size:.61rem; }
.chat-bitrix-history-list article>span { align-self:start; padding:3px 6px; border-radius:999px; background:#fff; color:var(--pipeline-color); font-size:.58rem; font-weight:800; text-align:right; }
.chat-bitrix-history-list time { grid-column:1/-1; }
.chat-partner-contacts { display:flex; flex-direction:column; gap:7px; }
.chat-partner-contact-option { width:100%; min-height:58px; padding:9px 13px; display:grid; grid-template-columns:20px 26px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid #d5e3e0; border-radius:10px; background:#fff; color:#173a47; text-align:left; cursor:pointer; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.chat-partner-contact-option:hover { border-color:#7fc4b4; background:#f7fbfa; }
.chat-partner-contact-option.is-selected { border-color:#087f6d; background:#f1faf7; box-shadow:0 0 0 2px rgba(8,127,109,.08); }
.chat-contact-radio { width:18px; height:18px; border:1.5px solid #9ab0b8; border-radius:50%; }
.chat-partner-contact-option.is-selected .chat-contact-radio { border:5px solid #087f6d; }
.chat-partner-contact-option>svg { width:23px; height:23px; color:#20ad54; }
.chat-contact-option-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-contact-option-copy strong { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-contact-option-copy small { overflow:hidden; color:#71858e; font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-partner-contact-option em { padding:5px 8px; border-radius:7px; background:#fff1d6; color:#805b16; font-size:.61rem; font-style:normal; font-weight:800; white-space:nowrap; }
.chat-partner-contact-option em.is-primary { background:#def5ed; color:#087f6d; }
.chat-partner-contact-option em.is-financial { background:#deeffb; color:#1475ab; }
.chat-contact-dialog>footer { padding:15px 24px; }
.chat-contact-dialog>footer button { min-height:42px; padding:0 16px; display:flex; align-items:center; gap:7px; }
.chat-contact-dialog>footer button svg { width:17px; height:17px; }
.chat-contact-dialog>footer .chat-contact-cancel { border:1px solid #b9cbc7; background:#fff; color:#294753; }

@media (max-width:640px) {
  .chat-contact-modal { padding:8px; }
  .chat-contact-dialog { width:100%; max-height:96dvh; }
  .chat-contact-dialog>header { padding:14px; }
  .chat-contact-dialog h2 { font-size:1.2rem; }
  .chat-contact-body { max-height:72dvh; padding:12px 14px; }
  .chat-selected-partner { padding:12px 12px 58px 62px; }
  .chat-selected-partner-icon { left:10px; width:40px; height:40px; }
  .chat-selected-partner button { left:12px; right:12px; top:auto; bottom:10px; justify-content:center; transform:none; }
  .chat-link-contact-fields { grid-template-columns:1fr; }
  .chat-manual-contact-fields { grid-template-columns:1fr; }
  .chat-new-sankhya-contact-fields { grid-template-columns:1fr; }
  .chat-contact-field-heading { align-items:flex-start; }
  .chat-partner-contact-option { grid-template-columns:18px 22px minmax(0,1fr); gap:8px; }
  .chat-partner-contact-option em { grid-column:3; justify-self:start; }
  .chat-contact-dialog>footer { padding:11px 14px; flex-wrap:wrap; }
  .chat-contact-dialog>footer span { flex-basis:100%; }
  .chat-contact-dialog>footer button { width:100%; justify-content:center; }
}