/* Matched-contact actions. */
#contact-controls{width:100%}
.provider-call-card #contact-controls{margin-bottom:20px}
.contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:17px 0 0}
.contact-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:46px;padding:11px 12px;border:1px solid #dce2ff;border-radius:12px;background:#ecefff;color:#202c8b;font-size:14px;font-weight:500;line-height:1.5}
.contact-button>svg{height:19px;width:19px;flex:none}
.contact-button .badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:50px;background:#3455ff;color:#fff;font-size:12px;font-weight:600;line-height:1;flex:none}
.contact-button:hover{background:#e1e7ff;filter:none}
body.simple-mode .contact-actions .contact-button{border-color:#ffffff80;background:#ffffff0a;color:#fff}
body.simple-mode .contact-actions .contact-button:hover{background:#ffffff18}
body.simple-mode .contact-actions .contact-button .badge{background:#fff;color:#3455ff}
body.simple-mode .contact-actions .contact-button:focus-visible{outline-color:#fff}

/* The native dialog supplies the outer frame and close control. */
.contact-dialog{display:flex;flex-direction:column;min-width:0;max-width:100%;max-height:calc(100svh - 100px);overflow:hidden;text-align:left;color:#151a30}
.contact-header{display:flex;align-items:center;gap:11px;min-width:0;flex:none;padding-right:35px;margin:0 0 9px}
.contact-header .avatar{height:45px;width:45px;font-size:14px;flex:none}
.contact-header>div{min-width:0}
.contact-header h2,.contact-header strong{display:block;color:#151a30;font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.4px;margin:0;padding:0;overflow-wrap:break-word}
.contact-header small{display:block;color:#626b80;font-size:14px;line-height:1.5;margin-top:3px}
.contact-privacy{display:flex;align-items:center;gap:7px;flex:none;font-size:14px;line-height:1.6;color:#626b80;margin:0 0 14px}
.contact-privacy svg{width:15px;height:15px;flex:none;color:#626f97}
.contact-dialog .contact-note{font-size:14px;line-height:1.6;color:#626b80;margin:12px 0 0;flex:none}
.contact-dialog button:focus-visible,.contact-dialog textarea:focus-visible{outline:2px solid #3455ff;outline-offset:3px}
body.simple-mode .contact-dialog .contact-button{background:#ecefff;border-color:#dce2ff;color:#202c8b}
body.simple-mode .contact-dialog .contact-button .badge{background:#3455ff;color:#fff}

/* Message history. */
.contact-thread{display:flex;flex-direction:column;gap:10px;flex:1 1 200px;min-width:0;min-height:100px;max-height:min(35svh,260px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid #e1e6f1;border-radius:13px;background:#f8f9fd;padding:13px}
.contact-message{align-self:flex-start;width:fit-content;max-width:88%;min-width:0;border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.65;color:#27314e;background:#edf0f7;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left}
.contact-message.is-mine{align-self:flex-end;background:#3455ff;color:#fff;border-bottom-right-radius:4px}
.contact-message.is-theirs{align-self:flex-start;background:#edf0f7;color:#27314e;border-bottom-left-radius:4px}
.contact-message p{font-size:14px;line-height:1.65;color:inherit;white-space:pre-wrap;margin:0}
.contact-message-time{display:block;font-size:12px;line-height:1.5;color:#626b80;margin-top:5px;white-space:normal;text-align:right}
.contact-message.is-mine .contact-message-time{color:#f1f3ff}
.contact-empty{align-self:center;margin:auto;padding:20px 8px;text-align:center;font-size:14px;line-height:1.7;color:#626b80;max-width:300px}
.contact-empty p{font-size:14px;line-height:1.7;color:inherit;margin:0}

/* Composer and ready-to-use replies. */
.contact-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px;min-width:0;flex:none;margin:13px 0 0}
.contact-compose textarea,.contact-compose #contact-message{width:100%;min-width:0;min-height:49px;max-height:100px;resize:vertical;padding:11px 12px;border:1px solid #cbd4e6;border-radius:11px;background:#fff;color:#151a30;font-size:16px;font-weight:400;line-height:1.5;margin:0}
.contact-compose textarea::placeholder{color:#768099}
.contact-compose button[type=submit]{display:flex;align-items:center;justify-content:center;gap:6px;min-width:49px;min-height:49px;padding:12px;border:1px solid #3455ff;border-radius:11px;background:#3455ff;color:#fff;font-size:14px;font-weight:500;line-height:1.5;box-shadow:none}
.contact-compose button[type=submit] svg{width:20px;height:20px;flex:none}
.contact-compose button[type=submit]:hover{background:#2543dc;border-color:#2543dc;filter:none}
.contact-compose button[type=submit]:disabled{background:#dfe4f2;border-color:#dfe4f2;color:#63718f;opacity:1}
.contact-quick-actions{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;flex:none;padding:0 0 5px;margin:10px 0 0}
.contact-quick-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none;padding:9px 11px;border:1px solid #dce2ff;border-radius:50px;background:#f4f6ff;color:#202c8b;font-size:14px;font-weight:400;line-height:1.5;white-space:nowrap}
.contact-quick-actions button:hover{background:#e8edff;filter:none}

/* Call state and controls. */
.contact-call-card{display:flex;flex-direction:column;align-items:center;max-width:400px;width:100%;padding:17px 0 5px;margin:0 auto;text-align:center;color:#151a30}
.contact-call-icon{display:flex;align-items:center;justify-content:center;width:76px;height:76px;flex:none;border:1px solid #dce2ff;border-radius:50%;background:#ecefff;color:#3455ff;margin:0 0 20px}
.contact-call-icon svg{width:31px;height:31px;flex:none}
.contact-call-card h2,.contact-call-card strong{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.6px;color:#151a30;padding:0;margin:0 0 9px}
.contact-call-status{font-size:15px;line-height:1.65;color:#626b80;margin:0 0 22px;text-align:center}
.contact-call-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;margin:0}
.contact-call-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;min-height:49px;padding:12px 16px;border:1px solid #dce2ff;border-radius:12px;background:#ecefff;color:#202c8b;font-size:14px;font-weight:500;line-height:1.5}
.contact-call-button svg{height:20px;width:20px;flex:none}
.contact-call-button.is-answer{border-color:#3455ff;background:#3455ff;color:#fff}
.contact-call-button.is-end{border-color:#f0d2d6;background:#fff0f1;color:#a23d46}
.contact-call-button:hover{filter:brightness(.97)}

/* Incoming-call banner. */
.contact-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;padding:13px 14px;border:1px solid #dce2ff;border-radius:13px;background:#ecefff;color:#202c8b;text-align:left;margin:16px 0 0}
.contact-banner>div{min-width:0}
.contact-banner strong{display:block;font-size:15px;font-weight:600;line-height:1.4;color:inherit;overflow-wrap:break-word}
.contact-banner small,.contact-banner p{display:block;font-size:14px;line-height:1.5;color:inherit;margin:3px 0 0}
.contact-banner>svg{height:21px;width:21px;flex:none}
.contact-banner button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none;padding:10px 12px;border:1px solid #3455ff;border-radius:10px;background:#3455ff;color:#fff;font-size:14px;font-weight:500;line-height:1.4}
body.simple-mode .contact-banner{border-color:#ffffff80;background:#ffffff0a;color:#fff}
body.simple-mode .contact-banner button{background:#fff;border-color:#fff;color:#3455ff}
.contact-note{font-size:14px;line-height:1.65;text-align:center;color:#626b80;margin:13px 0 0}
body.simple-mode .contact-note{color:#f1f3ff}
body.simple-mode .contact-dialog .contact-note{color:#626b80}

/* Small screens retain room for the thread and close control. */
@media(max-width:620px){.contact-dialog{max-height:calc(100svh - 86px)}.contact-header{gap:9px;padding-right:33px}.contact-header h2,.contact-header strong{font-size:19px}.contact-thread{padding:11px}.contact-message{max-width:91%;padding:9px 11px}.contact-call-icon{width:68px;height:68px;margin-bottom:17px}}
@media(max-width:360px){.contact-actions{gap:8px}.contact-button{padding:10px 9px;gap:6px}.contact-header .avatar{height:40px;width:40px;font-size:13px}.contact-thread{padding:10px;gap:9px}.contact-compose{gap:7px}.contact-compose button[type=submit]{padding:11px;min-width:46px}.contact-call-button{min-width:98px;padding-left:13px;padding-right:13px}.contact-banner{padding:12px;gap:8px}.contact-banner button{padding:10px}}
@media(max-height:650px){.contact-thread{min-height:80px;max-height:30svh}.contact-privacy{margin-bottom:10px}.contact-call-card{padding-top:9px}.contact-call-icon{width:60px;height:60px;margin-bottom:14px}.contact-call-status{margin-bottom:17px}.contact-dialog .contact-note{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.contact-dialog,.contact-message,.contact-call-icon{scroll-behavior:auto;animation:none;transition:none}}