/* Keep the transcript inside the visible window, even when messages are tall. */
html,body{width:100%;height:100%;overflow:hidden}
body{-webkit-text-size-adjust:100%}
#desk{position:fixed;left:0;top:var(--chat-top,0px);width:100%;height:100vh;height:var(--chat-height,100dvh);min-height:0}
main,#sidebar{height:100%;min-height:0;min-width:0}
body.visitor main{margin:0 auto}
#messages,#conversations{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#messages{scroll-behavior:auto}
#messages:focus{outline:none}
#messages:focus-visible{outline:2px solid #20a996;outline-offset:-2px}
.chat-header,#composer,.powered{flex:0 0 auto}
.session-notice{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 16px 10px;padding:12px 16px;border:1px solid #dbe9e5;border-radius:10px;background:#edf7f3;color:#476c62;text-align:center;line-height:1.6}
.session-notice .primary{padding:8px 16px;white-space:nowrap}
.closed-tag{display:inline-block;margin-left:6px;padding:1px 5px;background:#edf1f4;color:#82919b;border-radius:4px;font-size:10px;font-weight:400;white-space:nowrap}
.end-conversation{margin-left:auto;margin-right:10px;padding:8px 10px;border:1px solid #e2e8eb;border-radius:7px;background:white;color:#8b6370;font-size:12px}
.end-conversation:hover{background:#fff4f4}
.list-label{display:flex;align-items:center;flex-wrap:wrap}
.cleanup-open{margin-left:auto;padding:4px 0 4px 10px;font-size:12px;color:#6c7e89}
.cleanup-dialog{width:min(440px,calc(100vw - 24px));padding:24px}
.cleanup-dialog p{line-height:1.8;color:#7a8791;font-size:13px}
.cleanup-dialog label{display:block;margin:18px 0 8px;font-size:13px}
.cleanup-dialog input,.cleanup-dialog select{width:100%;border:1px solid #dfe7eb;border-radius:7px;padding:10px;background:#fff;color:#304a57;font-size:16px}
.cleanup-dialog footer{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
.cleanup-dialog button{display:inline-block;margin:0}
.danger{background:#b45353}
.danger:hover{background:#9f4545}
#cleanupError{margin-top:12px;color:#aa4e48;font-size:13px;line-height:1.7}
.chat-header>div:not(.avatar){min-width:0}
.visitor-context{flex:0 0 auto;padding:7px 30px;color:#738895;background:#fff;border-bottom:1px solid #e8eef1;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.conv-location{margin:-3px 0 5px;font-size:12px;line-height:1.5;color:#476c62;overflow-wrap:anywhere}
.conv-ip{margin:0 0 7px;font-size:11px;line-height:1.5;color:#7a8e98;overflow-wrap:anywhere}
.chat-header h2,.chat-header p{overflow-wrap:anywhere}
.connection{flex-shrink:0;white-space:nowrap}
.message>div:not(.avatar){min-width:0;max-width:min(540px,calc(100% - 42px))}
.bubble{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.bubble img{max-width:100%;height:auto;object-fit:contain}
.powered{line-height:1.5;padding:0 8px calc(8px + env(safe-area-inset-bottom,0px));letter-spacing:0}
.powered a{display:inline-block}
#login{height:var(--chat-height,100dvh);min-height:0;overflow-y:auto;display:flex;padding:24px 12px}
.login-card{flex-shrink:0;margin:auto}
dialog{max-height:calc(var(--chat-height,100dvh) - 24px);overflow:auto}
dialog img{max-height:calc(var(--chat-height,100dvh) - 100px);object-fit:contain}
@media(max-width:750px){
  .visitor-context{padding:6px 14px}
  .chat-header{min-height:64px;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));gap:10px}
  #messages{padding:12px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .message{margin:14px 0}
  .bubble{padding:10px 12px;line-height:1.7}
  .image-bubble{padding:5px}
  #composer{margin:0 10px 6px;margin-left:max(10px,env(safe-area-inset-left,0px));margin-right:max(10px,env(safe-area-inset-right,0px));padding:8px 12px}
  #composer textarea{font-size:16px;height:44px;margin-top:5px}
  #composer footer>span{display:none}
  #composer footer{justify-content:flex-end}
  #composer .primary{min-height:40px;padding:8px 20px}
  .tools{gap:12px}
  .welcome{margin:24px auto}
  .welcome h2{font-size:20px}
  .powered{font-size:10px}
  .login-card input{font-size:16px}
}
@media(max-height:500px){
  .chat-header{min-height:48px;padding:7px 12px;padding-top:calc(7px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .chat-header p{display:none}
  #composer{padding:5px 10px;margin-bottom:4px}
  #composer textarea{height:34px;margin-top:3px}
  #composer .tools{height:22px}
  #composer .primary{min-height:34px;padding:6px 16px}
  .powered{padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
}