#ddai-host{position:fixed;right:20px;bottom:20px;z-index:1000;font-family:'Noto Sans Thai',Tahoma,sans-serif;color:#142a3b}
#ddai-launcher{width:62px;height:62px;border:0;border-radius:20px;background:#d71932;color:#fff;box-shadow:0 8px 26px #142a3b45;font:700 14px 'Noto Sans Thai',Tahoma,sans-serif;cursor:pointer}
#ddai-launcher:focus-visible,#ddai-host button:focus-visible{outline:3px solid #366b9f;outline-offset:3px}
#ddai-unread{position:absolute;right:-4px;top:-6px;min-width:22px;height:22px;border-radius:50%;background:#142a3b;color:#fff;font:700 11px sans-serif;display:grid;place-items:center}
#ddai-unread[hidden],#ddai-mobile-unread[hidden],#ddai-panel[hidden],#ddai-recovery[hidden]{display:none!important}
#ddai-mobile-unread{position:absolute;right:3px;top:0;z-index:2;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#142a3b;color:#fff;font:700 10px/18px sans-serif;text-align:center}
#ddai-panel{box-sizing:border-box;position:absolute;right:0;bottom:74px;width:420px;height:min(700px,calc(100dvh - 110px));border:1px solid #dce4eb;border-radius:17px;overflow:hidden;background:white;box-shadow:0 18px 60px #142a3b45}
#ddai-frame{display:block;width:100%;height:100%;border:0}
#ddai-recovery{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#fff;text-align:center;color:#142a3b}
#ddai-recovery p{margin:0;font-size:16px}
#ddai-recovery a{display:inline-block;padding:11px 16px;border-radius:10px;background:#d71932;color:#fff;font-weight:700;text-decoration:none}
#ddai-recovery a:focus-visible{outline:3px solid #366b9f;outline-offset:3px}
.ddai-context-action{display:inline-grid!important;place-items:center;width:34px!important;height:34px!important;min-width:34px!important;margin:0 0 0 5px!important;padding:0!important;border:1px solid #d71932!important;border-radius:50%!important;background:#fff!important;color:#a3152b!important;font:700 10px 'Noto Sans Thai',Tahoma,sans-serif!important;cursor:pointer}
.ddai-context-action:hover{background:#fff1f3!important}

@media(max-width:1100px){
 body:has(#mobileService) #ddai-launcher{display:none}
 #ddai-host{bottom:calc(82px + env(safe-area-inset-bottom));right:12px}
 #ddai-panel{width:min(400px,calc(100vw - 24px));height:min(700px,calc(100dvh - 172px - env(safe-area-inset-bottom)))}
 body:has(#mobileService) #ddai-panel{position:fixed;right:12px;bottom:calc(56px + env(safe-area-inset-bottom));height:min(700px,calc(100dvh - 72px - env(safe-area-inset-bottom)))}
}

/* Narrow and short landscape screens need the full visible area for the header, messages and composer. */
@media(max-width:600px),(max-width:1100px) and (max-height:600px){
 #ddai-host{inset:auto 8px calc(82px + env(safe-area-inset-bottom)) auto}
 #ddai-launcher{width:54px;height:54px;border-radius:17px}
 #ddai-panel,body:has(#mobileService) #ddai-panel{position:fixed;left:8px;right:8px;top:calc(var(--ddai-viewport-top,0px) + max(8px,env(safe-area-inset-top)));bottom:auto;width:auto;height:calc(var(--ddai-viewport-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));border-radius:14px}
 body.ddai-open{overflow:hidden}
 body.ddai-open #mobileService{visibility:hidden}
}

@media(prefers-reduced-motion:reduce){#ddai-panel,#ddai-launcher{transition:none!important}}