/* Final interaction layer: compact panels, readable text and 44px hit targets. */
body #conversation[open],body[data-office-view="camera"] #conversation[open]{position:fixed;inset:var(--office-header-bottom,88px) 16px auto auto;margin:0;width:min(352px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - var(--office-header-bottom,88px) - 20px);padding:12px;border-radius:18px;overflow:auto;z-index:8;box-shadow:0 12px 40px #183d3326;background:#fbfdf9f5;gap:8px}
body #conversation[open] .dialog-head{position:static;padding:0;gap:10px;align-items:center;flex-shrink:0}
body #conversation .dialog-head h2{font-size:14px;line-height:1.35;margin:2px 0;overflow-wrap:anywhere}
body #conversation .dialog-head small{font-size:9px;letter-spacing:.1em}
.conversation-portrait{margin:0;flex:0 0 64px;max-width:64px;text-align:center}
body #conversation canvas#conversation-face{position:static;inset:auto;width:64px;height:64px;border-radius:12px;background:#e3ebe5;touch-action:auto}
.conversation-portrait figcaption{font-size:9px;color:#567167;white-space:nowrap}
.conversation-window-actions{display:flex;flex-direction:column;gap:0;margin-left:auto}
body #conversation .conversation-window-actions button{padding:0;width:44px;height:44px;border:0;background:transparent;font-size:22px}
#conversation-body{display:flex;flex-direction:column;gap:8px;min-height:0}
#conversation.is-minimized #conversation-body{display:none}
body #conversation.is-minimized[open]{width:min(320px,calc(100vw - 16px))}
.conversation-toolbar{display:flex;gap:6px}.conversation-toolbar button{flex:1;font-size:12px;padding:6px}
body #conversation #connection{font-size:11px;line-height:1.45;padding:8px;margin:0}
body #conversation #messages{min-height:76px;max-height:25dvh;padding:2px;flex:1 1 auto;scrollbar-gutter:auto;font-size:13px}
body #conversation .message{padding:9px 11px;max-width:96%;margin:6px 0;line-height:1.45}
body #conversation .message.user{margin-left:auto}
body #conversation #chat-form{position:static;padding:8px 0 0;gap:6px}
body #conversation #message{min-height:44px;max-height:100px;padding:9px;font-size:16px;resize:vertical}
body #conversation #send{padding:8px;font-size:12px;min-height:44px}
body #conversation #office-voice{padding:8px;max-height:170px;overflow:auto;gap:6px}
body #conversation #office-voice .live-talk{padding:7px 12px;font-size:12px;min-height:44px;flex:1}
body #conversation #office-voice>p{font-size:11px;margin:0}
body #conversation .compact-voice-options{flex-basis:100%;font-size:12px}
body #conversation summary{cursor:pointer;min-height:44px;padding:10px 6px;font-size:12px;list-style-position:inside}
body #conversation details[open]>summary{margin-bottom:4px}
body #conversation details button{font-size:12px;padding:6px 8px}
body #conversation #conversation-options .staff{display:flex;gap:4px;flex-wrap:wrap}
body #conversation #conversation-workflow{margin:6px 0 0;width:100%}
body #conversation .conversation-leave-room{display:none}
body #conversation #conversation-sign-in{font-size:12px;min-height:44px}
body #conversation #conversation-body>.note{font-size:10px;margin:0}
body[data-chat-open] #office-movement{left:16px;right:auto}
body[data-chat-open] footer{left:196px;right:390px}
#directory{width:min(278px,calc(100vw - 24px));padding:16px}
#directory h1,#directory>.eyebrow,#office-intro{display:none}
@media(max-width:700px){
 body #conversation[open],body[data-office-view="camera"] #conversation[open]{inset:auto 8px 8px;width:calc(100vw - 16px);height:auto;max-height:49dvh;padding:10px;border-radius:18px}
 body #conversation.is-minimized[open]{inset:auto 8px 8px auto;max-height:120px}
 body #conversation .dialog-head h2{font-size:13px}
 body #conversation .conversation-window-actions{flex-direction:row}
 body #conversation .conversation-portrait{flex-basis:48px;max-width:48px}
 body #conversation canvas#conversation-face{width:48px;height:48px}
 body #conversation #messages{min-height:64px;max-height:18dvh;flex-shrink:0}
 body[data-chat-open] #office-movement{display:none}
 body[data-chat-open] footer{bottom:calc(49dvh + 16px);left:8px;right:8px;max-width:calc(100vw - 16px);font-size:11px;pointer-events:none}
 body[data-chat-open] footer p{max-height:28px}
}
@media(max-height:480px) and (min-width:701px){body #conversation[open]{top:8px;max-height:calc(100dvh - 16px)}body #conversation #messages{max-height:90px}}
#office-movement-tip{position:fixed;left:16px;top:var(--office-header-bottom,88px);z-index:4;display:flex;align-items:center;gap:8px;width:min(310px,calc(100vw - 32px));padding:8px 10px;background:#fafffaf0;border:1px solid #d2e1d8;border-radius:12px;box-shadow:0 4px 18px #193d3120;font-size:12px;line-height:1.4}#office-movement-tip button{flex-shrink:0;min-width:44px;min-height:44px;padding:0;font-size:20px}body:has(#directory:not([hidden])) #office-movement-tip{display:none}
/* Empty signed-out chats should not reserve the space of a full conversation. */
body #conversation #messages:empty{display:none}
body #conversation:has(#message:disabled) #chat-form{display:none}
body #conversation:has(#message:disabled) #office-voice>p{display:none}
body #conversation[open]{max-height:min(540px,calc(100dvh - var(--office-header-bottom,88px) - 20px))}
@media(max-width:700px){body #conversation[open],body[data-office-view="camera"] #conversation[open]{max-height:49dvh}}

/* A visit reveals the desk first. Talking is an explicit action, separate from travel. */
#room-arrival-actions{position:fixed;left:16px;bottom:62px;z-index:4;display:flex;gap:6px;padding:6px;background:#f8fcf6f5;border:1px solid #bdcec5;border-radius:14px;box-shadow:0 4px 18px #193d3120}
#room-arrival-actions[hidden]{display:none}
#room-arrival-actions button{min-width:64px;min-height:44px;padding:6px 12px;font-size:13px;touch-action:manipulation}
#room-arrival-talk{background:#244c41;color:#fff;border-color:#244c41}
body[data-room-ready] #office-movement-tip{display:none}
/* Header/actions and composer stay outside the scrollable conversation content. */
body #conversation[open],body[data-office-view="camera"] #conversation[open]{overflow:hidden;gap:6px}
body #conversation .dialog-head{flex:0 0 auto;min-height:48px}
body #conversation .conversation-window-actions{flex-direction:row}
body #conversation>.conversation-toolbar{flex:0 0 auto}
body #conversation #conversation-body{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding-right:2px}
body #conversation>#chat-form{flex:0 0 auto;margin:0;padding:4px 0 0;background:#fbfdf9}
body #conversation>#chat-form #message{max-height:72px}
body #conversation.is-minimized>.conversation-toolbar,body #conversation.is-minimized>#chat-form{display:none}
body #conversation:has(#message:disabled) #office-voice{display:none}
body #conversation .conversation-portrait{flex-basis:48px;max-width:48px}
body #conversation canvas#conversation-face{width:48px;height:48px}
@media(max-width:700px){
 #room-arrival-actions{left:8px;right:8px;bottom:8px;justify-content:stretch}
 #room-arrival-actions button{flex:1;min-width:0}
 body[data-room-ready]:not([data-room-walking]) #office-movement{display:none}
 body[data-room-ready][data-room-walking]:not([data-chat-open]) #office-movement{bottom:72px;max-height:calc(100dvh - var(--office-header-bottom,88px) - 84px)}
 body[data-room-ready]:not([data-chat-open]) footer{left:8px;right:8px;bottom:74px;max-width:none;pointer-events:none}
 body[data-room-ready]:not([data-chat-open]) footer p{max-height:28px}
 body #conversation[open],body[data-office-view="camera"] #conversation[open]{max-height:min(58dvh,calc(100dvh - var(--office-header-bottom,88px) - 12px));padding:8px;gap:5px}
 body #conversation .dialog-head small,body #conversation .conversation-portrait figcaption{display:none}
 body #conversation .dialog-head h2{font-size:12px;line-height:1.2}
 body #conversation #connection{padding:5px;font-size:11px}
 body #conversation #messages{min-height:44px;max-height:none;flex-shrink:0}
 body #conversation #conversation-body{gap:5px}
 body #conversation summary{padding:8px 4px}
 body[data-chat-open] footer{bottom:calc(58dvh + 12px)}
}