/* Conversation workspace: the conversation stays central on every screen. */
body.engaged:has(#conversation:not([hidden])){height:100dvh!important;overflow:hidden!important;background:radial-gradient(ellipse at 65% 0,#10263f55,transparent 60%),#060f1c!important;font-size:14px!important}
body.engaged:has(#conversation:not([hidden])) header{height:70px!important;width:100%;max-width:1400px!important;padding:16px 28px!important;border-bottom:1px solid #22364b!important}
body.engaged:has(#conversation:not([hidden])) header .brand img{width:136px}
body.engaged:has(#conversation:not([hidden])) main{display:flex!important;flex-direction:column!important;width:100%;max-width:1200px!important;height:calc(100dvh - 70px)!important;padding:12px 28px 16px!important;gap:0!important;min-height:0}
body.engaged:has(#conversation:not([hidden])) .presence{display:none!important}
body.engaged:has(#conversation:not([hidden])) #app{display:flex!important;flex:1!important;flex-direction:column!important;min-height:0;min-width:0}
body.engaged:has(#conversation:not([hidden])) nav{display:flex!important;height:58px!important;flex:0 0 58px!important;margin:0 0 16px!important;border:1px solid #233e58!important;border-radius:12px!important;background:#0b1b2c!important;overflow-x:auto!important}
body.engaged:has(#conversation:not([hidden])) nav button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1 0 20%!important;width:auto!important;height:58px!important;font-size:13px!important;padding:10px!important}
body.engaged:has(#conversation:not([hidden])) nav button:before{width:21px!important;height:21px!important;margin:0!important}
body.engaged:has(#conversation:not([hidden])) #conversation{display:flex!important;flex-direction:column!important;flex:1;min-height:0}
body.engaged:has(#conversation:not([hidden])) #mobile-first-step{display:none!important}
body.engaged:has(#conversation:not([hidden])) #choices:not(:empty){flex:0 1 auto!important;max-height:35dvh!important;overflow:auto;padding:0 10px}
body.engaged:has(#conversation:not([hidden])) #chat-area{display:flex!important;flex:1;min-height:0;flex-direction:column;overflow:hidden;width:100%;max-width:840px;margin:0 auto}
#chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;text-align:center;padding:26px 12px}
.chat-welcome-orb{display:block;flex-shrink:0;width:58px;height:58px;border:2px solid #76d7ff;border-radius:50%;box-shadow:0 0 17px #2397ff88,inset 0 0 20px #5960fb55,0 8px 24px #0077ff22;margin-bottom:28px}
#chat-welcome h2{font-size:clamp(25px,3vw,37px);font-weight:550;line-height:1.2;letter-spacing:-1px;margin:0 0 15px;color:#eef5ff}
#chat-welcome p{font-size:14px;line-height:1.6;color:#839dbb;margin:0 0 28px}
.chat-suggestions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.chat-suggestions button{padding:12px 15px;border:1px solid #29425e;border-radius:12px;background:#0d2034;color:#b8cbe3;font-size:12px;line-height:1.4}
.chat-suggestions button:hover{border-color:#5b9ccb;background:#132d46}
body.engaged:has(#conversation:not([hidden])) #messages{flex:1;max-height:none!important;min-height:0;padding:10px 18px 24px!important;overflow:auto;scrollbar-width:thin;scrollbar-color:#274563 transparent}
body.engaged:has(#conversation:not([hidden])) #messages:empty{display:none}
body.engaged:has(#conversation:not([hidden])) #messages p{max-width:100%!important;margin:18px 0 32px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;font-size:16px!important;line-height:1.8!important;white-space:pre-wrap;color:#dbe6f4}
body.engaged:has(#conversation:not([hidden])) #messages p.user{width:fit-content;max-width:80%!important;margin-left:auto!important;padding:14px 20px!important;background:#182d46!important;border:1px solid #29415c!important;border-radius:20px 20px 5px 20px!important;color:#edf4ff}
body.engaged:has(#conversation:not([hidden])) #messages p:before,body.engaged:has(#conversation:not([hidden])) #messages p:after{display:none!important}
body.engaged:has(#conversation:not([hidden])) #messages small{font-size:10px!important;letter-spacing:1.5px!important;color:#77bcec;margin:0 0 10px!important;font-weight:650}
body.engaged:has(#conversation:not([hidden])) #messages .user small{display:none}
body.engaged:has(#conversation:not([hidden])) #chat-form{position:static!important;flex:0 0 auto!important;display:flex;align-items:flex-end!important;min-height:78px;gap:14px!important;margin:0!important;padding:16px!important;border:1px solid #36516e!important;border-radius:22px!important;background:#102136!important;box-shadow:0 10px 32px #0003}
body.engaged:has(#conversation:not([hidden])) #chat-form:focus-within{border-color:#68b3e1!important}
body.engaged:has(#conversation:not([hidden])) #chat-form:before{display:none!important}
body.engaged:has(#conversation:not([hidden])) #chat-form textarea{flex:1;width:100%;min-height:42px!important;max-height:180px!important;padding:8px 4px!important;font-size:15px!important;line-height:1.6!important;resize:none;border:0!important;outline:none;background:none;color:#e6f0ff}
body.engaged:has(#conversation:not([hidden])) #chat-form button{width:42px!important;height:42px!important;flex:0 0 42px;padding:0!important;border-radius:12px!important;background:#90cbfa!important;font-size:23px!important;color:#08203b}
body.engaged:has(#conversation:not([hidden])) #chat-form button:before{display:none!important}
body.engaged:has(#conversation:not([hidden])) #chat-area>small{display:block!important;text-align:center;font-size:10px!important;color:#7790ac;line-height:1.5;padding:10px 12px 0}
#chat-thinking{padding:8px 18px 14px;color:#91b8db;font-size:13px}
#chat-thinking:before{content:'';display:inline-block;width:6px;height:6px;background:#7dccff;border-radius:50%;margin-right:9px;box-shadow:0 0 10px #2b9eff}
@media(max-width:760px){body.engaged:has(#conversation:not([hidden])) header{height:56px!important;padding:12px 16px!important}body.engaged:has(#conversation:not([hidden])) main{height:calc(100dvh - 56px)!important;padding:8px 12px max(10px,env(safe-area-inset-bottom))!important}body.engaged:has(#conversation:not([hidden])) header .brand img{width:110px}body.engaged:has(#conversation:not([hidden])) nav{height:61px!important;flex-basis:61px!important;margin-bottom:8px!important}body.engaged:has(#conversation:not([hidden])) nav button{flex:0 0 33.333%!important;height:61px!important;flex-direction:column;gap:5px;font-size:10px!important}#chat-welcome{padding:15px 6px}.chat-welcome-orb{width:42px;height:42px;margin-bottom:20px}#chat-welcome p{font-size:13px;margin-bottom:18px}.chat-suggestions{gap:8px}.chat-suggestions button{font-size:11px;padding:10px}body.engaged:has(#conversation:not([hidden])) #messages{padding:8px 8px 16px!important}body.engaged:has(#conversation:not([hidden])) #messages p{font-size:15px!important;line-height:1.7!important}body.engaged:has(#conversation:not([hidden])) #messages p.user{max-width:90%!important}body.engaged:has(#conversation:not([hidden])) #chat-form{min-height:66px;padding:10px!important;border-radius:18px!important}body.engaged:has(#conversation:not([hidden])) #chat-area>small{font-size:9px!important;padding-top:7px}}

/* Larger, more readable chat typography. */
#chat-welcome h2{font-size:clamp(32px,3.5vw,46px)}
#chat-welcome p{font-size:17px}
.chat-suggestions button{font-size:14px}
body.engaged:has(#conversation:not([hidden])) #messages p{font-size:19px!important;line-height:1.75!important}
body.engaged:has(#conversation:not([hidden])) #messages small{font-size:12px!important}
body.engaged:has(#conversation:not([hidden])) #chat-form textarea{font-size:18px!important}
body.engaged:has(#conversation:not([hidden])) #chat-area>small{font-size:12px!important}
#chat-thinking{font-size:15px}
@media(max-width:760px){#chat-welcome h2{font-size:30px}#chat-welcome p{font-size:15px}.chat-suggestions button{font-size:13px}body.engaged:has(#conversation:not([hidden])) #messages p{font-size:17px!important;line-height:1.7!important}body.engaged:has(#conversation:not([hidden])) #messages small{font-size:11px!important}body.engaged:has(#conversation:not([hidden])) #chat-form textarea{font-size:17px!important}body.engaged:has(#conversation:not([hidden])) #chat-area>small{font-size:10px!important}}

/* Compact phone workspace. */
@media(max-width:600px){
  body.engaged:has(#conversation:not([hidden])) header{padding:10px!important;gap:7px!important}
  body.engaged:has(#conversation:not([hidden])) header .brand img{width:82px!important}
  body.engaged:has(#conversation:not([hidden])) header>div{gap:4px!important}
  body.engaged:has(#conversation:not([hidden])) main{padding:8px 10px max(8px,env(safe-area-inset-bottom))!important}
  body.engaged:has(#conversation:not([hidden])) nav{height:58px!important;flex-basis:58px!important;overflow:hidden!important}
  body.engaged:has(#conversation:not([hidden])) nav button{flex:1 1 25%!important;min-width:0!important;width:25%!important;height:58px!important;padding:5px 2px!important;gap:3px!important;font-size:8.5px!important;white-space:normal!important;line-height:1.15!important}
  body.engaged:has(#conversation:not([hidden])) nav button:before{width:19px!important;height:19px!important}
  #chat-welcome{justify-content:flex-start;overflow-y:auto;padding:12px 6px 16px}
  .chat-welcome-orb{width:38px;height:38px;margin:2px 0 14px}
  #chat-welcome h2{font-size:26px;line-height:1.12;margin-bottom:10px}
  #chat-welcome p{font-size:13px;line-height:1.5;margin-bottom:14px}
  .chat-suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
  .chat-suggestions button{min-width:0;padding:9px 7px;font-size:11px;line-height:1.25}
  .chat-suggestions button:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(230px,100%)}
  #video-chat-help{padding:13px!important;margin:12px 0 0!important}
  #video-chat-help p{margin:5px 0 0!important;font-size:12px!important;line-height:1.45!important}
  body.engaged:has(#conversation:not([hidden])) #chat-form{min-height:60px;padding:8px 9px!important;border-radius:16px!important}
  body.engaged:has(#conversation:not([hidden])) #chat-form textarea{min-height:38px!important;font-size:15px!important;line-height:1.45!important}
  body.engaged:has(#conversation:not([hidden])) #chat-form button{width:40px!important;height:40px!important;flex-basis:40px!important}
  body.engaged:has(#conversation:not([hidden])) #chat-area>small{font-size:8.5px!important;padding:6px 8px 0!important}
}