.chat-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.chat-heading>div{flex:1;min-width:0}
.chat-heading h1{margin:0;overflow-wrap:anywhere}
.chat-heading p{margin:4px 0 0}
.chat-heading .icon{display:grid;place-items:center;flex:none;width:44px;height:44px;text-decoration:none}
.chat-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
.chat-actions a{display:grid;place-items:center;padding:10px;text-decoration:none;font-weight:700;border-radius:14px}
.chat-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.chat-row strong,.chat-row small{display:block;overflow-wrap:anywhere}
.chat-row small,.chat-row time{font-size:12px;color:var(--ink3)}
.chat-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e7efff;color:#1457ff;font-weight:800}
.chat-view .chat-heading h1{font-size:clamp(18px,5.6vw,25px)}
.chat-view .chat-heading p{font-size:12px}
.chat-history{min-height:min(240px,36dvh);max-height:50dvh;overflow:auto;overscroll-behavior:contain;background:#f0f5ff;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:9px}
.chat-empty{margin:auto;text-align:center;font-size:14px;color:#536582}
.chat-bubble{align-self:flex-start;max-width:87%;padding:9px 12px;border-radius:15px 15px 15px 4px;background:white;color:var(--ink);box-shadow:0 1px 3px #14285014}
.chat-bubble.mine{align-self:flex-end;background:#dbeafe;border-radius:15px 15px 4px 15px}
.chat-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.chat-bubble small{display:block;text-align:right;font-size:11px;color:#4e6280}
.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:end;margin-top:8px}
.chat-compose textarea{resize:vertical;min-height:44px;max-height:130px;margin:0;font:inherit;padding:10px 12px;border-radius:16px}
.chat-compose .icon{height:44px;width:44px}
.chat-invitation{display:grid;justify-items:center;text-align:center;gap:10px;padding:12px 0;overflow-wrap:anywhere}
.chat-invitation img{max-width:100%;height:auto}
.chat-invitation input{width:100%;min-width:0}
.chat-invitation :is(h1,p){margin:0}

.shell:has(.chat-view,.chat-lock-screen) :is(.top,.nav){display:none}
.shell:has(.chat-view,.chat-lock-screen){display:block}
.shell:has(.chat-view,.chat-lock-screen)>main{max-width:none;width:100%;margin:0;padding:0}
.chat-view{position:fixed;inset:0;z-index:10;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100dvh;background:#f6f8fc}
.chat-view .chat-heading{margin:0;padding:max(6px,env(safe-area-inset-top)) 6px 6px;gap:4px;background:white}
.chat-view .chat-heading .icon{background:none;border:0;color:#24344f}
.chat-view .chat-heading .chat-avatar{width:36px;height:36px;flex:none;margin-right:6px}
.chat-view .chat-settings{font-size:24px}
.chat-view .chat-history{border-radius:0;max-height:none;min-height:0;background:#e9f2ff radial-gradient(circle at 12px 12px,#c6dbf88c 1px,transparent 1.5px) 0 0/28px 28px}
.chat-view [data-chat-status]{margin:0;background:white;text-align:center;color:#41516d}
.chat-view [data-chat-status]:not(:empty){padding:5px 12px}
.chat-view .chat-compose{grid-template-columns:40px minmax(0,1fr) 40px 44px;gap:4px;margin:0;padding:6px 8px max(6px,env(safe-area-inset-bottom));background:white}
.chat-view .chat-compose .icon{width:100%;border:0}
.chat-view .chat-compose .icon:not(.chat-send){background:none;color:#263957}
.chat-view .chat-compose textarea{background:#eef2f8;border:0;resize:none}
.chat-view .chat-send{border-radius:50%;background:#1457ff;color:white}
.chat-view svg{width:22px;height:22px}
.chat-bubble audio{display:block;width:min(230px,55vw);height:38px}
.chat-bubble a{overflow-wrap:anywhere}
.chat-menu{display:grid;gap:2px}
.chat-menu :is(button,a){display:block;border:0;border-bottom:1px solid var(--line);text-align:left;background:white;color:#142849;padding:12px;text-decoration:none;font:inherit}
.chat-results p{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.chat-results small{color:#536582}
.chat-lock-screen{position:fixed;inset:0;z-index:10;background:#0b1b38;color:white;display:grid;align-content:center;justify-items:center;padding:24px}
.chat-lock-screen>a{position:absolute;top:16px;left:20px;color:white;font-size:28px}
.chat-lock-screen form{width:min(100%,320px)}
.chat-lock-screen label,.chat-lock-screen .hint{color:#e3edff}
.chat-call-overlay{position:absolute;inset:0;z-index:3;background:#0a1b3a;color:white;display:grid;grid-template-rows:1fr auto;align-items:center;text-align:center;padding:24px 14px max(28px,env(safe-area-inset-bottom))}
.chat-call-person .chat-avatar{margin:auto;background:#1457ff;color:white;width:84px;height:84px;font-size:36px}
.chat-call-person h2{color:white;margin:18px 0 5px}
.chat-call-person p,.chat-call-person time{color:#dce8ff}
.chat-call-actions{display:flex;justify-content:center;gap:9px}
.chat-call-actions button{background:#263653;color:white;border:0;min-width:0;display:grid;justify-items:center;gap:6px;padding:10px 8px;border-radius:16px;font-size:13px}
.chat-call-actions .call-end{background:#d52835}
.chat-call-actions .call-answer{background:#108049}
.call-end svg{transform:rotate(135deg)}

.chat-view{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.chat-view .chat-compose{grid-template-columns:36px minmax(0,1fr) 32px 36px 42px}
.chat-emoji-button{font-size:23px}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chat-emoji-grid button{font-size:26px;min-height:44px}
.chat-reply-draft:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px;background:#f5f8ff;border-left:3px solid #1457ff;color:#315181;font-size:13px}
.chat-reply-draft span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-draft button{flex:none}
.chat-bubble .chat-reply-action{border:0;background:none;padding:2px 0;font-size:11px;color:#2456a6}
.chat-bubble .chat-quote{display:block;width:100%;margin:0 0 5px;padding:4px 7px;text-align:left;border:0;border-left:3px solid #1457ff;border-radius:4px;background:#1457ff12;color:#274c84;font-size:12px;overflow-wrap:anywhere}
.modal-backdrop:has(.chat-menu){align-items:flex-start;justify-content:flex-end;padding:calc(env(safe-area-inset-top) + 45px) 8px 12px}
.dialog:has(.chat-menu){width:min(100%,300px);border-radius:16px}
.chat-record-wave{height:72px;display:flex;align-items:center;justify-content:center;gap:4px}
.chat-record-wave i{display:block;width:4px;height:var(--bar);border-radius:8px;background:#1457ff}
.chat-record-wave.recording i{animation:chat-record-beat .7s ease-in-out infinite alternate;animation-delay:calc(var(--beat) * -70ms)}
@keyframes chat-record-beat{from{transform:scaleY(.5)}to{transform:scaleY(1.45)}}
@media(prefers-reduced-motion:reduce){.chat-record-wave.recording i{animation:none}}

.chat-bubble .media-thumb{display:block;position:relative;width:min(210px,55vw);height:118px;margin:0 0 5px}
.chat-bubble .media-thumb img{width:100%;height:100%;object-fit:cover}
.chat-file-name{display:block;overflow-wrap:anywhere}
.chat-message-menu{display:grid;gap:2px}
.chat-message-menu :is(button,a){display:block;border:0;border-bottom:1px solid var(--line);text-align:left;background:white;color:#142849;padding:12px;text-decoration:none;font:inherit}
.chat-history{touch-action:pan-y}

.dontel-wordmark{font-size:12px;font-weight:750;color:#4e648a;letter-spacing:.08em;white-space:nowrap}
.chat-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.chat-actions button,.chat-actions a{min-height:44px}
.chat-view .chat-history{background:#f0f6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='140' viewBox='0 0 160 140'%3E%3Cg fill='none' stroke='%23c0d3ed' stroke-width='1' opacity='.58' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M15 20l25-9-8 24-5-10zm12 5l13-14M103 38c0-4 5-5 7-1 2-4 7-3 7 1 0 4-7 9-7 9s-7-5-7-9zM72 90l2-6 2 6 6 2-6 2-2 6-2-6-6-2zM120 105h17a5 5 0 0 1 5 5v7a5 5 0 0 1-5 5h-9l-6 5v-5h-2a5 5 0 0 1-5-5v-7a5 5 0 0 1 5-5z'/%3E%3Ccircle cx='46' cy='114' r='4'/%3E%3C/g%3E%3C/svg%3E")}
.chat-bubble p{font-size:17px;line-height:1.52}
.chat-sender{display:block;color:#265b9a;font-size:12px;font-weight:750;margin-bottom:3px;overflow-wrap:anywhere}
.chat-view .chat-compose .chat-send,.chat-view .chat-compose .chat-send:hover{border:0;border-radius:0;background:transparent;color:#1457ff;box-shadow:none}
.chat-view .chat-send svg{width:26px;height:26px}
.chat-bubble .media-thumb [aria-hidden="true"]:is(span){font-size:11px}
.chat-bubble .media-thumb[data-media-kind="image"] span{display:none}
.chat-emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:52dvh;overflow:auto;gap:4px}
.chat-emoji-grid .icon{padding:2px;min-width:0;min-height:40px}
.chat-message-menu .danger{color:#b52535}
.dontel-wait{text-align:center;padding:16px 10px 24px}
.dontel-wait .don-loading-dots{justify-content:center}
.dontel-spinner{display:block;width:42px;height:42px;margin:0 auto 12px;border:3px solid #dbe8fb;border-top-color:#1457ff;border-radius:50%;animation:dontel-spin .8s linear infinite}
@keyframes dontel-spin{to{transform:rotate(360deg)}}
.no-motion .dontel-spinner{animation:none}
@media(prefers-reduced-motion:reduce){.dontel-spinner{animation:none}}
audio[controls],video[controls]{direction:ltr}
.don-playback-progress{display:block;width:100%;height:4px;margin:5px 0;direction:ltr;appearance:none;border:0;border-radius:99px;background:#dae5f6;overflow:hidden;accent-color:#1457ff}
.don-playback-progress::-webkit-progress-bar{background:#dae5f6}
.don-playback-progress::-webkit-progress-value{background:#1457ff}
.don-playback-progress::-moz-progress-bar{background:#1457ff}

.dontel-voice-choice{display:grid;gap:8px}
.dontel-voice-choice button{display:flex;align-items:center;gap:13px;min-height:66px;text-align:left;background:#f1f6ff;color:#173868;border:1px solid #dfeaff;padding:11px 14px}
.dontel-voice-choice button:hover{background:#e4eeff}
.dontel-voice-choice svg{width:24px;height:24px;color:#1457ff;flex:none}
.dontel-voice-choice strong,.dontel-voice-choice small{display:block}
.dontel-voice-choice small{color:#526681;margin-top:3px;font-size:13px}
.chat-view [data-chat-dial][hidden]{display:none}
.chat-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.chat-actions :is(button,a){padding:8px 4px;font-size:clamp(12px,3.3vw,15px)}

.chat-call-overlay{isolation:isolate;position:absolute;display:grid;grid-template-rows:auto 1fr auto;align-items:stretch;padding:max(22px,env(safe-area-inset-top)) 20px max(42px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 33%,#152d5a 0%,#0a1936 52%,#07132b 100%);color:#fff}
.dontel-call-brand{font-size:12px;letter-spacing:.23em;font-weight:700;text-align:center;color:#a9bfe6}
.chat-call-person{align-self:center;padding-bottom:9dvh}
.chat-call-person .chat-avatar{width:clamp(90px,29vw,132px);height:clamp(90px,29vw,132px);font-size:42px;background:#1260ff;box-shadow:0 0 0 9px #2a6cf72e,0 0 0 18px #2a6cf716}
.chat-call-person h2{font-size:28px;font-weight:760;margin:27px 0 8px}
.chat-call-person p{font-size:15px;margin:0 0 14px}
.chat-call-person time{font-size:24px;font-variant-numeric:tabular-nums}
.chat-call-overlay[data-call-stage="ringing"] .chat-avatar,.chat-call-overlay[data-call-stage="incoming"] .chat-avatar{animation:dontel-call-pulse 1.75s ease-in-out infinite}
@keyframes dontel-call-pulse{50%{box-shadow:0 0 0 16px #2a6cf72c,0 0 0 27px #2a6cf70c}}
.chat-call-actions{align-items:flex-start;gap:clamp(10px,5vw,24px);padding-bottom:25px}
.chat-call-actions button,.chat-call-actions button:hover{position:relative;background:none;border:0;border-radius:50%;color:white;min-width:68px;padding:8px 2px;gap:14px}
.chat-call-actions button::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:#314260;z-index:-1}
.chat-call-actions button svg{width:27px;height:27px;margin:5px 0 4px}
.chat-call-actions .call-end::before{background:#ef404a}
.chat-call-actions .call-answer::before{background:#17a45a}
.chat-call-actions .call-end,.chat-call-actions .call-answer{background:none}
.dontel-call-banner{position:fixed;z-index:10010;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:8px;width:min(calc(100% - 20px),400px);padding:11px;border-radius:20px;background:#102348;color:white;box-shadow:0 14px 32px #06163252}
.dontel-call-banner-icon{display:grid;place-items:center;background:#2865ed;border-radius:50%;width:36px;height:36px}
.dontel-call-banner svg{width:19px;height:19px}
.dontel-call-banner strong,.dontel-call-banner small{display:block;overflow-wrap:anywhere}
.dontel-call-banner small{font-size:11px;color:#c6d7fa}
.dontel-call-banner button{border:0;border-radius:14px;background:#304566;color:white;padding:8px;min-height:38px}
.dontel-call-banner [data-incoming="yes"]{background:#16864c}
@media(prefers-reduced-motion:reduce){.chat-call-overlay .chat-avatar{animation:none!important}}

.chat-call-actions button[aria-pressed="true"]::before{background:#f1f5ff}
.chat-call-actions button[aria-pressed="true"] svg{color:#142b52}
.chat-call-actions .call-end::before{width:58px;height:58px}
.chat-call-actions .call-end svg{margin-top:8px;margin-bottom:7px}
.dontel-audio-route{min-height:20px;margin:12px auto 0!important;max-width:265px;color:#c3d3ef!important;font-size:13px!important}

.chat-bubble .dontel-large-emoji{display:flex;flex-wrap:wrap;gap:6px;font-size:clamp(34px,11vw,50px);line-height:1.25}
.dontel-large-emoji span{display:inline-block;animation:dontel-emoji-hop .64s ease 2;transform-origin:50% 95%}
.dontel-large-emoji span:nth-child(2){animation-delay:.08s}
.dontel-large-emoji span:nth-child(3){animation-delay:.16s}
@keyframes dontel-emoji-hop{25%{transform:translateY(-5px) rotate(-9deg) scale(1.08)}65%{transform:rotate(7deg)}}
.no-motion .dontel-large-emoji span{animation:none}
@media(prefers-reduced-motion:reduce){.dontel-large-emoji span{animation:none}}

.chat-bubble .media-thumb{display:grid;grid-template:1fr / 1fr;place-items:center;overflow:hidden}
.chat-bubble .media-thumb>img,.chat-bubble .media-thumb>.media-default{grid-area:1/1;min-width:0;min-height:0}
.chat-bubble .media-thumb>img{position:relative;z-index:1;object-fit:contain}
.chat-bubble .media-thumb>span{z-index:2}

.dontel-name-gate{position:fixed;inset:0;z-index:11000}
.dontel-name-gate .dialog header h2{margin-inline:auto;text-align:center}
.dontel-name-gate .dialog .body{overflow-y:auto}
.dontel-name-gate .dialog .art{width:100px;height:100px;margin:0 auto 8px}
.dontel-name-gate .auth-error:not([hidden]){display:block}

.dontel-enable-audio{margin-top:12px;min-height:42px;padding:8px 16px;background:#e9f1ff;color:#153367;border:0;border-radius:16px}
.dontel-room-arrival{position:fixed;z-index:900;top:calc(64px + env(safe-area-inset-top));left:50%;width:min(calc(100% - 28px),380px);transform:translateX(-50%);display:grid;grid-template-columns:34px minmax(0,1fr) 28px;gap:10px;align-items:center;padding:12px;background:#fff;border:1px solid #cfe2ff;border-radius:18px;box-shadow:0 12px 32px #182e532b;color:#102348;animation:dontel-arrival .28s ease-out}
.dontel-room-arrival i{display:grid;place-items:center;background:#e6f1ff;color:#1457ff;border-radius:50%;width:34px;height:34px;font-style:normal;font-weight:800}
.dontel-room-arrival :is(strong,small){display:block;overflow-wrap:anywhere}
.dontel-room-arrival small{color:#526681;margin-top:3px}
.dontel-room-arrival button{border:0;background:none;color:#526681;font-size:19px;padding:2px}
@keyframes dontel-arrival{from{opacity:0;transform:translate(-50%,-9px) scale(.96)}}
.no-motion .dontel-room-arrival{animation:none}
@media(prefers-reduced-motion:reduce){.dontel-room-arrival{animation:none}}

.dontel-arrival-modal{text-align:center;padding:10px 0 4px}
.dontel-arrival-modal i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin:auto;background:#e3f1ff;color:#1457ff;font-size:25px;font-style:normal;font-weight:800;animation:dontel-enter-check .36s ease-out}
.dontel-arrival-modal p{font-size:18px;font-weight:750;overflow-wrap:anywhere}
@keyframes dontel-enter-check{from{opacity:.2;transform:scale(.55)}75%{transform:scale(1.12)}}
.no-motion .dontel-arrival-modal i{animation:none}
@media(prefers-reduced-motion:reduce){.dontel-arrival-modal i{animation:none}}

.chat-view .chat-heading{min-height:64px;padding-inline:8px;gap:6px;border-bottom:1px solid #e4edf8}
.chat-view .chat-heading .chat-avatar{margin-right:2px;background:#e7f0ff;color:#1457ff}
.chat-view .dontel-room-heading{display:grid;min-width:0;gap:3px}
.chat-view .dontel-room-heading h1{margin:0;font-size:clamp(15px,4.6vw,21px);line-height:1.22;font-weight:760}
.chat-view .dontel-room-heading :is(h1,p){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-view .dontel-room-heading p{margin:0;color:#596b86;line-height:1.35}
.modal-backdrop:has(.dontel-arrival-modal){align-items:center;justify-content:center;padding:16px}
.dialog:has(.dontel-arrival-modal){width:min(100%,345px);border-radius:25px;padding:14px 8px 8px}
.dialog:has(.dontel-arrival-modal) header h2{font-size:19px;line-height:1.3}
.dialog:has(.dontel-arrival-modal) footer{border-top:0}
.dontel-arrival-modal{display:grid;justify-items:center;gap:9px;padding:8px 0 2px;text-align:center}
.dontel-arrival-mark{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:#e9f2ff;color:#1457ff;animation:dontel-enter-check .34s ease-out}
.dontel-arrival-mark svg{width:28px;height:28px}
.dontel-arrival-modal strong{max-width:100%;overflow-wrap:anywhere;color:#183456;font-size:21px;line-height:1.3}
.dontel-arrival-modal p{margin:0;font-size:13px;color:#5c6d87;font-weight:600}
.no-motion .dontel-arrival-mark{animation:none}
@media(prefers-reduced-motion:reduce){.dontel-arrival-mark{animation:none}}

.dontel-audio-picker{display:grid;gap:6px;margin:12px auto 0;max-width:250px;color:#d7e5fa;font-size:13px;text-align:left}
.dontel-audio-picker select{background:#eff5ff;color:#142b52;width:100%;min-height:42px}