/* Phone-first layout overrides. Existing XGChat visual tokens stay in use. */
html{height:100%;width:100%;overflow:hidden}
body{height:var(--app-height,100dvh);width:100%;overscroll-behavior:none}
.fusion-app{height:calc(var(--app-height,100dvh) - 40px)}
.auth-wrap{max-height:calc(var(--app-height,100dvh) - 32px)}
.auth-form input,.settings-form input,.operator-form input,.operator-form select{font-size:16px;min-height:44px}
.view,.contact-list,.messages,.settings-view{overscroll-behavior:contain}
.contacts-pane,.conversation-pane,.conversation-head,.composer,.workspace-head{min-width:0}
.conversation-head,.composer,.workspace-head,.selection-bar{flex-shrink:0}
.message-column{min-width:0}
.primary,.history-btn,.emoji-panel button,.composer-tools button{min-height:44px}
.composer-tools button{min-width:44px;display:grid;place-items:center;padding:0}
.emoji-panel button{min-width:44px}
.message-select{width:28px;height:44px;flex:0 0 28px}
.send-btn{min-height:44px;min-width:88px}
.compose-row textarea{font-size:16px;resize:none;min-height:52px;max-height:110px}
.operator-form{flex-wrap:wrap;max-height:min(340px,45dvh);overflow-y:auto;flex-shrink:0}
.operator-form label{min-width:160px}
.operator-form button{min-height:44px}
.settings-form{width:calc(100% - 60px)}
.settings-status{overflow-wrap:anywhere}
.portal-toast{max-width:calc(100vw - 32px);text-align:center;line-height:1.5;pointer-events:none}
@media(max-width:1100px){
  body{padding:0}
  .fusion-app{width:100%;height:var(--app-height,100dvh);max-height:none;border-radius:0}
  .rail{width:68px}
  .rail-btn{width:52px}
  .contacts-pane{width:250px}
  .contacts-head{padding:22px 17px 17px}
  .contact-row{padding:14px 9px}
  .contact-heading h2{font-size:16px}
  .conversation-head{padding:15px 18px}
  .messages{padding:15px 18px}
  .composer{padding:10px 16px 12px}
  .workspace-head{padding:17px 20px}
}
@media(min-width:768px) and (max-width:900px){
  .contacts-pane{width:228px}
  .rail{width:62px;padding-left:5px;padding-right:5px}
  .conversation-head{padding:12px}
  .messages{padding:14px}
  .message-column{max-width:82%}
  .operator-form{gap:10px;padding:12px}
  .operator-form label{flex-basis:100%}
  .contact-search{margin-left:12px;margin-right:12px}
}
@media(max-width:767px), (max-height:500px) and (max-width:1023px){
  .fusion-app{flex-direction:column;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .rail{order:2;width:100%;flex:0 0 auto;flex-direction:row;padding:5px 8px max(5px,env(safe-area-inset-bottom));gap:4px;justify-content:space-around;border-right:0;border-top:1px solid var(--border-color);z-index:3}
  .rail > .brand-icon{display:none}
  .rail-bottom{display:contents}
  .rail-btn{width:auto;flex:1;max-width:100px;min-width:44px;min-height:52px;padding:5px 4px;gap:3px;border-radius:10px}
  .rail-btn span{font-size:11px}
  .rail-btn b{right:calc(50% - 25px);top:1px}
  .view{order:1;width:100%;flex:1 1 0;min-height:0}
  .contacts-pane{width:100%;border-right:0}
  .conversation-pane{display:none;width:100%}
  .chat-view.show-conversation .contacts-pane{display:none}
  .chat-view.show-conversation .conversation-pane{display:block}
  .mobile-only{display:block}
  .contacts-head{padding:22px 20px 16px}
  .contacts-head h1{font-size:22px}
  .contact-search{margin:0 16px 14px}
  .contact-search input{height:44px;font-size:16px;padding-left:39px}
  .contact-search svg{top:13px}
  .contact-list{padding:0 10px}
  .contact-row{min-height:78px;gap:13px;padding:14px 12px}
  .contact-info strong{max-width:100%;font-size:16px}
  .contact-info p{font-size:13px}
  .contact-line{margin-bottom:6px}
  .contact-meta time{font-size:11px}
  .self-card{padding:11px 18px}
  .conversation-head{padding:9px 10px;gap:8px;min-height:67px}
  #backContacts{font-size:32px;line-height:1;width:44px;height:44px;padding:0;flex-shrink:0}
  .conversation-head .avatar{width:35px;height:35px;border-radius:11px;font-size:16px}
  .contact-heading h2{font-size:16px}
  .contact-heading p{font-size:11px;line-height:1.4;margin-top:3px;overflow-wrap:anywhere}
  #operatorToggle{min-height:44px;padding:6px 8px;font-size:12px;max-width:85px;line-height:1.4}
  .messages{padding:12px}
  .message-row{gap:7px;margin:16px 0}
  .message-row .avatar{width:28px;height:28px;font-size:12px;flex-shrink:0}
  .message-column{max-width:calc(100% - 70px)}
  .bubble{font-size:15px;line-height:1.6;padding:11px 13px}
  .message-name,.message-time{font-size:11px}
  .bubble img{max-height:280px;width:auto;object-fit:contain}
  .composer{padding:5px 12px 10px}
  .composer-tools{min-height:44px}
  .composer-tools span{font-size:11px}
  .compose-row{margin-top:0;gap:10px;align-items:center}
  .compose-row textarea{font-size:16px;line-height:1.5;min-height:48px;max-height:96px;padding:9px 0}
  .send-btn{height:44px;min-width:78px;margin:0;padding:9px 12px;font-size:14px}
  .send-btn span{margin-left:6px}
  .compose-hint{display:none}
  .operator-form{padding:12px;gap:10px;max-height:45%;flex-shrink:1}
  .operator-form label{min-width:100%;flex-basis:100%}
  .selection-bar{padding:9px 12px;gap:7px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:13px}
  .selection-bar span{grid-column:1/-1}
  .selection-bar button{min-height:44px;padding:8px 5px;font-size:13px}
  .draft-notice{padding:8px 12px;gap:8px;font-size:12px}
  .draft-notice span{min-width:0;overflow-wrap:anywhere}
  .draft-notice button{min-height:44px}
  .workspace-head{min-height:70px;padding:12px 16px;gap:10px}
  .workspace-head h1{font-size:18px}
  .workspace-head p{font-size:11px;line-height:1.4;max-width:240px;margin-top:4px}
  .workspace-head button{font-size:12px;min-height:44px;flex-shrink:0}
  .settings-form{width:calc(100% - 32px);max-width:560px;margin:18px auto;padding:22px}
  .settings-form label{font-size:14px}
  .settings-form input{height:46px}
  .settings-form .primary{width:100%}
  .settings-status{margin:0 18px 24px;font-size:14px}
  .auth-wrap{width:calc(100% - 32px);max-width:430px;max-height:calc(var(--app-height,100dvh) - 24px);margin:12px;padding:26px}
  .auth-brand h1{font-size:24px}
  .auth-form label{font-size:14px}
  .auth-form input{height:46px}
  .auth-tabs button,.demo-accounts button{min-height:44px}
  .auth-brand p{margin-bottom:20px}
  .portal-toast{bottom:calc(75px + env(safe-area-inset-bottom));font-size:13px}
  .keyboard-open .rail{display:none}
  .keyboard-open .portal-toast{bottom:12px}
  .keyboard-open .composer-tools span{display:none}
}
@media(max-width:359px){
  .conversation-head{gap:5px;padding:7px}
  .conversation-head .avatar{display:none}
  .message-row .avatar{width:25px;height:25px}
  .message-column{max-width:calc(100% - 62px)}
  .composer-tools span{font-size:10px}
  .bubble{font-size:14px}
  .workspace-head{padding:10px 12px}
  .auth-wrap{padding:22px}
}
@media(max-height:500px) and (max-width:1023px){
  .rail{padding-top:3px;padding-bottom:max(3px,env(safe-area-inset-bottom))}
  .rail-btn{min-height:44px;padding:3px}
  .rail-btn span{display:none}
  .conversation-head{min-height:54px;padding-top:5px;padding-bottom:5px}
  .composer{padding:4px 12px 6px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:end}
  .composer-tools{display:flex;min-height:44px;gap:0}
  .composer-tools span{display:none}
  .compose-row{width:100%;gap:8px}
  .emoji-panel{position:absolute;bottom:100%;left:12px;max-width:calc(100vw - 24px)}
  .workspace-head{min-height:54px;padding-top:7px;padding-bottom:7px}
  .workspace-head p{display:none}
}
@media(pointer:coarse){
  button,.quiet,.rail-btn,.primary{touch-action:manipulation}
  .history-btn{min-width:160px}
}