/* One compact header and wider working area on touch devices. */
.mobile-menu-logout{display:none}.attachment-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #e6a6ae;border-radius:50%;background:#fff0f2;color:#bf2442;font-size:28px;line-height:1;cursor:pointer}.attachment-remove:focus-visible{outline:3px solid #1d74c2;outline-offset:2px}.chat-new-file,.photo-editor{position:relative}.chat-new-file .attachment-remove,.photo-editor .attachment-remove{position:absolute;right:4px;top:4px}.attachment-selection{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.attachment-selection span{min-width:0;overflow-wrap:anywhere;flex:1}.chat-compose-row{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:end;gap:6px}.chat-attach-menu{position:relative;min-width:0}.chat-attach-menu>summary{display:flex;list-style:none;font-size:30px;cursor:pointer;width:44px;height:44px;min-height:44px}.chat-attach-menu>summary::-webkit-details-marker{display:none}.chat-attach-options{position:absolute;bottom:52px;left:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;z-index:35;width:202px;max-width:calc(100vw - 24px);padding:12px;border:1px solid #b8d6ee;border-radius:12px;background:white;box-shadow:0 5px 24px #173f7230}.chat-attach-options .chat-icon{width:48px;height:48px;min-height:48px;min-width:48px}.chat-attach-options small{width:100%;font-size:12px;color:#55748e}.chat-compose-row>textarea{width:100%;min-width:0}.chat-attach-options [hidden]{display:none!important}.chat-image img,.chat-new-file img,.photo-editor img{image-orientation:from-image;object-fit:contain!important;max-width:100%}.chat-image img{width:auto!important;height:auto!important;max-height:420px}.chat-new-file img{height:auto!important;max-height:140px}.photo-editor img{height:200px}.chat-compose-compact .chat-new-files{max-height:190px;overflow-y:auto}.chat-attach-menu:not([open])>.chat-attach-options{display:none}
@media(max-width:1100px){
 .app .sidebar{position:relative!important;display:flex!important;align-items:center;justify-content:space-between;gap:8px;width:100%!important;min-height:62px;height:auto;padding:7px 12px!important;border-right:0;border-bottom:1px solid #d4e4f2;overflow:visible!important;z-index:40}.app .sidebar>.brand{margin:0!important;padding:0;flex:0 1 auto;gap:8px;min-width:0}.app .brand-logo{width:32px;height:32px}.app .brand>span{font-size:19px;letter-spacing:.1em}.app .brand-sub{font-size:8px}.app .sidebar-bottom{display:none}.app .workspace{margin-left:0!important;width:100%;min-width:0}.app .topbar{display:none!important}.app .menu-accordion{position:static;width:auto;margin:0}.app .menu-summary{display:flex!important;align-items:center;min-height:46px;padding:8px 12px;gap:8px;font-size:17px;border:1px solid #c6dcef;border-radius:9px;background:#edf6ff;cursor:pointer;list-style:none}.app .menu-summary .menu-current{display:none}.app .menu-accordion>nav,.app .menu-accordion>.nav-label,.app .mobile-menu-logout{position:relative;background:white}.app .menu-accordion[open]{position:absolute;left:0;right:0;top:0;padding:7px 12px 12px;background:white;border-bottom:1px solid #c4d8eb;box-shadow:0 5px 20px #173f7220;max-height:85dvh;overflow:auto}.app .menu-accordion[open]>.menu-summary{width:max-content;margin-left:auto}.app .menu-accordion .nav-link{min-height:56px;font-size:19px;margin:6px 0;padding:10px 14px;background:#f0f7fd;border:1px solid #deebf6;border-radius:9px;display:flex!important}.app .menu-accordion .nav-link.selected{background:#dcefff}.app .mobile-menu-logout{display:block;padding-top:10px}.app .mobile-menu-logout .button{width:100%;min-height:48px}.app .main{padding:14px 10px 24px}.app .page-heading .eyebrow{display:none}.app .page-heading{margin-bottom:14px}.punch-person>.status{font-size:23px!important;line-height:1.3;min-height:46px;padding:9px 12px;border-radius:12px;white-space:nowrap}.punch-person{gap:10px;flex-wrap:wrap}.punch-person>.status{margin-left:auto}.chat-thread-page.app .main{padding:4px 5px!important}.chat-thread-page .page-heading,.chat-thread-page footer{display:none!important}.chat-thread-page .chat-shell{width:100%;max-width:none}.chat-thread-page .chat-thread-heading{padding:4px 2px;min-height:48px;margin:0;gap:6px}.chat-thread-page .chat-thread-heading h1{font-size:20px;margin:0;min-width:0;overflow-wrap:anywhere}.chat-thread-page .chat-thread-heading p{font-size:12px;margin:0}.chat-thread-page .team-participants{margin:0 2px;font-size:12px}.chat-thread-page .team-participants>summary{min-height:24px}.chat-thread-page .chat-stream{padding:8px 5px;margin-top:4px;margin-bottom:4px}.chat-thread-page .chat-compose-compact{padding:5px!important;margin:0}.chat-thread-page .chat-compose-row{gap:5px}.chat-thread-page .chat-compose-row>textarea{font-size:17px;padding:10px 8px}.chat-thread-page .contact-main{padding:4px 5px!important}.chat-thread-page .contact-header{min-height:42px;padding:6px 10px}.chat-thread-page .contact-header img{max-width:165px;height:auto}.chat-thread-page .contact-header>span{display:none}.chat-thread-page .chat-bubble p{font-size:17px;line-height:1.5}.chat-thread-page .chat-message{max-width:98%}.chat-thread-page .chat-message-meta{gap:5px}.chat-thread-page .chat-message-meta time{font-size:11px}.chat-thread-page .chat-image img{max-height:360px}
}
@media(max-width:1100px){.app .sidebar{flex-direction:row!important}.app .sidebar>.brand{width:auto}.chat-thread-page .chat-shell .chat-attach-options{max-width:calc(100vw - 24px)}}
@media(max-width:360px){.app .brand-sub{display:none}.app .brand>span{font-size:17px}.app .sidebar{padding-left:8px!important;padding-right:8px!important}.app .menu-summary{font-size:16px;padding:8px}.punch-person>.status{font-size:21px!important}.chat-thread-page .chat-compose-row{gap:3px}}
@media print{.mobile-menu-logout,.attachment-remove,.chat-attach-menu{display:none!important}}
/* Keep item gaps compact and enlarge the full clickable area on touch devices. */
@media(max-width:1100px){
 .app .sidebar .menu-accordion nav{display:flex;flex-direction:column;gap:4px;padding:6px 0 2px}
 .app .sidebar .menu-accordion .nav-link{min-height:64px;margin:0;padding:14px 12px;line-height:1.35;gap:12px}
 .app .mobile-menu-logout{padding-top:6px}
 .punch-person>.status.working{display:inline-flex;align-items:center;gap:7px}
 .punch-person>.status.working:before{font-size:1em;line-height:1;margin-right:0}
 .chat-keyboard-open.app .sidebar,.chat-keyboard-open .contact-header,.chat-keyboard-open .team-participants,.chat-keyboard-open .chat-staff-tools,.chat-keyboard-open .chat-thread-heading p{display:none!important}
 .chat-keyboard-open .chat-thread-heading{margin:0;padding:0 2px;min-height:44px}
 .chat-keyboard-open .chat-new-files{max-height:80px}
}

/* Bound photos to the timeline width, independently of message/text width. */
.chat-stream{container-type:inline-size}
.chat-image{width:fit-content;max-width:min(100%,360px,60vw)}
.chat-stream .chat-image img{width:auto!important;height:auto!important;max-width:min(100%,360px,60vw);max-height:min(540px,90vw);object-fit:contain!important}
@supports(width:1cqw){.chat-stream .chat-image{max-width:min(100%,360px,60cqw)}.chat-stream .chat-image img{max-width:min(100%,360px,60cqw);max-height:min(540px,90cqw)}}

/* Give photo links a definite width so their intrinsic file dimensions do not
   widen the surrounding bubble. Text keeps its own natural wrapping width. */
.chat-stream .chat-bubble{width:max-content;max-width:100%;padding:8px 10px}
.chat-stream .chat-image{width:min(var(--chat-photo-native-width,360px),360px,60vw,calc(540px * var(--chat-photo-ratio,1)),calc(90vw * var(--chat-photo-ratio,1)));max-width:100%}
.chat-stream .chat-image img{width:100%!important;height:auto!important;max-width:100%;max-height:none}
@supports(width:1cqw){.chat-stream .chat-image{width:min(var(--chat-photo-native-width,360px),360px,60cqw,calc(540px * var(--chat-photo-ratio,1)),calc(90cqw * var(--chat-photo-ratio,1)));max-width:100%}}

/* Only while a touch keyboard is open, anchor the entire conversation to the
   measured visual viewport. The stream takes the remaining space above input. */
html.chat-keyboard-open,body.chat-keyboard-open{overflow:hidden!important;overscroll-behavior:none}
@media(max-width:1100px){
 .chat-keyboard-open .chat-shell[data-chat-thread]{position:fixed!important;top:var(--chat-keyboard-top,0px)!important;left:var(--chat-keyboard-left,0px)!important;right:auto!important;bottom:auto!important;width:var(--chat-keyboard-width,100%)!important;height:var(--chat-keyboard-height,100dvh)!important;max-width:none!important;min-height:0!important;margin:0!important;padding:4px 5px 5px;box-sizing:border-box;z-index:100;background:#f5f8fc;display:flex;flex-direction:column;gap:4px;overflow:hidden}
 .chat-keyboard-open .chat-thread-heading{flex:0 0 auto;min-height:44px;padding:0 2px;overflow:visible}
 .chat-keyboard-open .chat-thread-heading>div{min-width:0}
 .chat-keyboard-open .chat-thread-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .chat-keyboard-open .chat-stream{flex:1 1 0!important;min-height:0!important;height:0!important;max-height:none!important;min-width:0;margin:0!important;overflow-y:auto;overflow-anchor:none}
 .chat-keyboard-open .chat-compose{flex:0 0 auto;min-width:0;margin:0!important}
 .chat-keyboard-open .chat-new-files{max-height:min(60px,20vh);overflow-y:auto}
 .chat-keyboard-open .chat-compose-feedback{max-height:2.8em;overflow-y:auto}
 .chat-keyboard-small .chat-thread-heading,.chat-keyboard-small .chat-new-files{display:none!important}
}

/* v2.5.2: signed-in employee name beside the touch menu. */
.mobile-login-name{display:none}
@media(max-width:1100px){.app .sidebar>.mobile-login-name{display:block;flex:1 1 auto;min-width:0;margin-left:auto;text-align:right;font-size:16px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;color:#244969}.app .sidebar>.menu-accordion{flex:0 0 auto}}
@media(max-width:360px){.app .sidebar>.brand>span{display:none}.app .sidebar>.mobile-login-name{font-size:15px}}

/* v2.5.3: compact MENU label; retain the touch target height. */
@media(max-width:1100px){.app .menu-summary{font-size:15px;padding:8px;gap:6px;min-height:46px}.app .mobile-menu-label{white-space:nowrap}}

/* iOS can pan the root despite overflow:hidden during keyboard presentation.
   Lock the document itself; only the timeline/input scroll in the visible box. */
@media(max-width:1100px){
 html.chat-ios-keyboard,body.chat-ios-keyboard{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;overflow:hidden!important;overscroll-behavior:none!important}
 .chat-ios-keyboard.app .workspace,.chat-ios-keyboard.app .main,.chat-ios-keyboard .contact-main{margin:0!important;padding:0!important;min-height:0!important;height:100%!important;overflow:hidden!important}
 .chat-ios-keyboard .chat-stream,.chat-ios-keyboard .chat-compose textarea{overscroll-behavior:contain}
}