#client-portal-chat.portal-chat{--surface:var(--s1,#192337);--surface2:var(--s2,#202b42);--text:var(--t1,#eef2ff);--text3:var(--t3,#9ba5c0);--border:var(--bd,#35415b)}
.portal-chat{background:var(--surface,#192337);color:var(--text,#eef2ff);border:1px solid var(--border,#35415b);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-height:440px;direction:rtl}
.pc-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border,#35415b)}
.pc-head strong{display:block;font-size:15px}.pc-head small{display:block;color:var(--text3,#9ba5c0);font-size:11px}.pc-live{margin-inline-start:auto;color:#46cda3;font-size:11px}
.pc-avatar{width:38px;height:38px;flex:none;border-radius:50%;background:#5b5be6;color:#fff;display:grid;place-items:center;font-weight:800;overflow:hidden}.pc-avatar img{width:100%;height:100%;object-fit:cover}.pc-avatar.pc-system{background:#252d49;border:1px solid #56608c}
.pc-messages{flex:1;max-height:58vh;min-height:290px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}.pc-empty{margin:auto;color:var(--text3,#9ba5c0)}
.pc-line{display:flex;align-items:flex-end;gap:8px;max-width:85%}.pc-line.mine{align-self:flex-start}.pc-line.theirs{align-self:flex-end;flex-direction:row-reverse}.pc-line .pc-avatar{width:29px;height:29px;font-size:12px}
.pc-bubble{padding:11px 13px;border-radius:14px;background:#25324e;line-height:1.7;overflow-wrap:anywhere;min-width:80px}.pc-line.mine .pc-bubble{background:#4d52bd;color:#fff}.pc-bubble small{display:block;font-size:10px;opacity:.7;margin-bottom:3px}.pc-bubble a{color:#84e1ff;text-decoration:underline}.pc-bubble button{background:transparent;color:inherit;border:1px solid currentColor;border-radius:8px;margin-top:7px;padding:5px 9px;cursor:pointer}
.pc-error{color:#ff858e;font-size:12px;padding:0 15px}.pc-error:empty{display:none}.pc-compose{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--border,#35415b)}.pc-compose textarea{flex:1;min-width:0;resize:vertical;max-height:120px;border:1px solid var(--border,#35415b);background:var(--surface2,#202b42);color:var(--text,#eef2ff);border-radius:10px;padding:9px;font:inherit}.pc-tool,.pc-send{border:1px solid var(--border,#35415b);background:var(--surface2,#202b42);color:var(--text,#eef2ff);border-radius:10px;min-height:38px;padding:0 10px;cursor:pointer}.pc-send{background:#6366f1;color:white}.pc-tool[hidden]{display:none}
.pc-compose[hidden]{display:none}
body.lm #client-portal-chat .pc-bubble{background:#e8eafa;color:#22243a}body.lm #client-portal-chat .pc-line.mine .pc-bubble{background:#4d52bd;color:#fff}
@media(max-width:600px){.pc-line{max-width:96%}.pc-compose{gap:5px}.pc-tool,.pc-send{padding:0 7px}}
.support-chat-layout{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:14px}.support-chat-list{border:1px solid var(--border,#35415b);border-radius:15px;padding:8px;max-height:600px;overflow:auto}.support-chat-contact{display:flex;align-items:center;gap:10px;width:100%;text-align:right;background:transparent;color:var(--text,#eef2ff);border:0;border-radius:10px;padding:10px;cursor:pointer;font:inherit}.support-chat-contact.active,.support-chat-contact:hover{background:var(--surface2,#25324e)}.support-chat-contact small{display:block;color:var(--text3,#9ba5c0);font-size:11px}.support-avatar{height:40px;width:40px;flex:none;border-radius:50%;background:#6665d9;color:#fff;display:grid;place-items:center;overflow:hidden}.support-avatar img{width:100%;height:100%;object-fit:cover}.support-avatar.system img{object-fit:contain;padding:3px}.support-thread-card{transition:transform .18s,border-color .18s}.support-thread-card:hover{transform:translateY(-2px)}
.support-avatar.system{background:linear-gradient(135deg,#535cf3,#8779ff);border-radius:12px;font-size:20px}.support-avatar.system img{object-fit:contain;padding:3px}
.support-thread-list{display:grid;gap:10px;max-width:900px}.support-thread-list .card{padding:14px 18px}.support-thread-dialog{display:flex;flex-direction:column;gap:12px;max-height:55vh;overflow:auto;margin-bottom:15px}.support-thread-line{display:flex;align-items:flex-end;gap:8px;max-width:90%}.support-thread-line.mine{align-self:flex-start}.support-thread-line.theirs{align-self:flex-end;flex-direction:row-reverse}.support-thread-line .support-avatar{width:30px;height:30px}.support-thread-bubble{padding:12px;border-radius:13px;background:var(--surface2,#25324e)}.support-thread-line.mine .support-thread-bubble{background:rgba(99,102,241,.28)}
@media(max-width:750px){.support-chat-layout{grid-template-columns:1fr}.support-chat-list{display:flex;overflow:auto;max-height:none}.support-chat-contact{min-width:170px}}

/* Shared conversation treatment for the owner and the client portal. */
.portal-chat{background:var(--surface,#192337);box-shadow:0 16px 44px rgba(4,9,24,.12)}
.pc-head{background:color-mix(in srgb,var(--surface2,#202b42) 66%,var(--surface,#192337));min-height:72px}
.pc-messages{background:color-mix(in srgb,var(--surface2,#202b42) 30%,var(--surface,#192337));gap:17px}
.pc-bubble{border:1px solid var(--border,#35415b);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.pc-line.mine .pc-bubble{border-color:transparent}
.pc-media{margin-top:8px;max-width:min(340px,60vw);font-size:11px;color:var(--text3,#9ba5c0)}
.pc-image{display:block;max-width:100%;max-height:310px;border-radius:10px;object-fit:contain;cursor:zoom-in}
.pc-media audio{display:block;width:min(320px,62vw);max-width:100%}
.pc-deleted{display:block;color:var(--text3,#9ba5c0);font-size:12px;font-style:normal}
.pc-bubble .pc-delete{display:inline-grid;place-items:center;margin-top:7px;width:29px;height:29px;border:1px solid var(--border,#35415b);border-radius:8px;background:var(--surface2,#202b42);color:var(--text,#eef2ff);cursor:pointer;opacity:.8;font-size:14px}
.pc-bubble .pc-delete:hover{opacity:1;color:#ff687b}
.pc-clear{margin-inline-start:4px;width:32px;height:32px;border:1px solid var(--border,#35415b);border-radius:9px;background:var(--surface,#192337);color:var(--text,#eef2ff);cursor:pointer}
.pc-clear:hover{color:#ff687b}
.pc-line.mine .pc-bubble{background:color-mix(in srgb,var(--ac,var(--accent,#6366f1)) 70%,var(--surface2,#202b42))}
body.lm #client-portal-chat .pc-line.mine .pc-bubble{background:color-mix(in srgb,var(--ac,#6366f1) 75%,white)}
.pc-delete-dialog{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:16px;background:rgba(5,9,19,.7)}
.pc-delete-card{width:min(360px,100%);padding:20px;border:1px solid var(--border,#35415b);border-radius:16px;background:var(--surface,#192337);color:var(--text,#eef2ff);box-shadow:0 20px 60px rgba(0,0,0,.28);text-align:right}
.pc-delete-card p{color:var(--text3,#9ba5c0)}.pc-delete-card .pc-preview-actions{flex-wrap:wrap}
.pc-recording,.pc-preview{padding:12px 16px;border-top:1px solid var(--border,#35415b);background:var(--surface2,#202b42)}
.pc-recording:not([hidden]){display:flex;align-items:center;gap:10px}
.pc-recording[hidden],.pc-preview[hidden]{display:none}
.pc-record-dot{width:9px;height:9px;border-radius:50%;background:#ff687b;box-shadow:0 0 0 4px rgba(255,104,123,.16);animation:pcPulse 1s infinite alternate}
.pc-wave{display:flex;align-items:center;gap:2px;height:28px;flex:1;overflow:hidden}
.pc-wave i{display:block;width:3px;height:7px;border-radius:3px;background:#7a80ff;animation:pcWave .8s ease-in-out infinite alternate}
.pc-wave i:nth-child(3n){animation-delay:.18s}.pc-wave i:nth-child(4n){animation-delay:.36s}.pc-wave i:nth-child(5n){animation-delay:.52s}
.pc-recording button,.pc-preview-actions button{border:1px solid var(--border,#35415b);border-radius:8px;padding:7px 11px;background:var(--surface,#192337);color:var(--text,#eef2ff);font:inherit;font-size:11px;cursor:pointer}
.pc-preview-label{font-size:11px;color:var(--text3,#9ba5c0);margin-bottom:6px}
.pc-preview audio{width:100%;height:38px}.pc-preview-actions{display:flex;gap:7px;margin-top:8px}.pc-preview-actions button:first-child{background:#6366f1;color:#fff;border-color:#6366f1}
@keyframes pcWave{to{height:26px}}@keyframes pcPulse{to{opacity:.45}}
@media(prefers-reduced-motion:reduce){.pc-wave i,.pc-record-dot{animation:none}}

/* User inbox: conversation list and the selected thread share one workspace. */
.support-conversation-layout{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:14px;min-height:540px}
.support-conversation-list{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:auto;max-height:72vh}
.support-thread-list{display:block;max-width:none}.support-thread-list .support-thread-card{border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0;padding:15px!important;margin:0;box-shadow:none!important}.support-thread-list .support-thread-card:hover{transform:none;background:var(--surface2)}
.support-conversation-pane{display:flex;flex-direction:column;min-width:0;min-height:540px;max-height:72vh;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.support-conversation-empty{display:grid;place-content:center;gap:8px;text-align:center;flex:1;color:var(--text3);font-size:12px}.support-conversation-empty i{font-size:32px;opacity:.55}.support-conversation-empty b{color:var(--text);font-size:15px}
.support-conversation-head{display:flex;align-items:center;gap:11px;padding:14px 17px;border-bottom:1px solid var(--border);background:var(--surface2)}.support-conversation-head strong,.support-conversation-head small{display:block}.support-conversation-head small{color:var(--text3);font-size:11px}
.support-conversation-pane .support-thread-dialog{flex:1;max-height:none;margin:0;padding:18px;gap:15px;background:color-mix(in srgb,var(--surface2) 30%,var(--surface))}.support-conversation-pane .support-thread-bubble{max-width:560px;box-shadow:0 3px 12px rgba(0,0,0,.07)}
.support-conversation-compose{display:flex;align-items:end;gap:9px;padding:12px;border-top:1px solid var(--border)}.support-conversation-compose textarea{flex:1;resize:vertical;min-height:43px}.support-conversation-compose button{flex:none}
@media(max-width:760px){.support-conversation-layout{grid-template-columns:1fr;min-height:0}.support-conversation-list{max-height:280px}.support-conversation-pane{min-height:320px;max-height:min(55dvh,520px)}.support-conversation-pane .support-thread-dialog{min-height:0;overscroll-behavior-y:contain}}