/* Isolated iPhone chat layout. Loaded after the main styles to avoid cascade conflicts. */
@media(max-width:760px){
  body:has(#chatView.is-visible){overflow:hidden!important}
  body:has(#chatView.is-visible) .app-shell{position:fixed!important;left:0!important;right:0!important;top:var(--mobile-chat-viewport-top,0px)!important;height:var(--mobile-chat-viewport-height,100dvh)!important;min-height:0!important;overflow:hidden!important}
  body:has(#chatView.is-visible) .main{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
  body:has(#chatView.is-visible) .topbar{position:relative!important;top:auto!important;flex:0 0 auto!important}
  #chatView.is-visible{height:0!important;min-height:0!important;flex:1 1 auto!important;overflow:hidden!important}
  #chatView.is-visible .list-pane{height:100%!important;min-height:0!important;overflow-y:auto!important}
  #chatView.mobile-detail .conversation-pane{display:flex!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  #chatView.mobile-detail .conversation-head{position:relative!important;top:auto!important;flex:0 0 auto!important;background:#fff!important;z-index:2}
  #chatView.mobile-detail .message-area{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #chatView.mobile-detail .composer{position:relative!important;bottom:auto!important;flex:0 0 auto!important;z-index:2;padding:8px 10px max(8px,env(safe-area-inset-bottom))!important;background:#fff!important}
  #chatView.mobile-detail .composer textarea{height:44px!important;min-height:44px!important;max-height:44px!important;padding:7px 9px!important;font-size:16px!important}
  #chatView.mobile-detail .composer-actions{margin-top:6px!important}
  body.mobile-chat-keyboard .topbar{display:none!important}
  body.mobile-chat-keyboard #chatView.mobile-detail .conversation-head{min-height:56px!important;flex-wrap:nowrap!important;align-items:center!important;padding-block:7px!important}
  body.mobile-chat-keyboard #chatView.mobile-detail .conversation-head-actions{display:none!important}

  /* Keep the customer context visible without letting the controls dominate the chat. */
  #chatView.mobile-detail .conversation-head{min-height:88px!important;padding:7px 10px!important;align-items:center!important;gap:5px 7px!important}
  #chatView.mobile-detail .conversation-head>.avatar{width:38px!important;height:38px!important}
  #chatView.mobile-detail .conversation-head>div:not(.conversation-head-actions){align-self:center!important}
  #chatView.mobile-detail .conversation-head h3{font-size:14px!important}
  #chatView.mobile-detail .conversation-head p{font-size:10px!important}
  #chatView.mobile-detail .conversation-head-actions{grid-template-columns:1.35fr repeat(3,minmax(0,1fr))!important;gap:4px!important}
  #chatView.mobile-detail .conversation-head-actions button,
  #chatView.mobile-detail .conversation-head-actions .chat-status-button,
  #chatView.mobile-detail .conversation-head-actions .automated-toggle{height:34px!important;padding:0 4px!important;border-radius:8px!important;font-size:10px!important;letter-spacing:-.02em!important}
  #chatView.mobile-detail .conversation-head-actions .automated-toggle{border-color:#76c98f!important;background:#effbf2!important;color:#08783a!important}
  #chatView.mobile-detail .conversation-head-actions .needs-action{border-color:#e5bb65!important;background:#fff8e7!important;color:#865b00!important}
  #chatView.mobile-detail .conversation-head-actions .resolved{border-color:#76b9d4!important;background:#eef8fc!important;color:#17627f!important}
  #chatView.mobile-detail .conversation-head-actions #chatSearchButton{border-color:#aab6c8!important;background:#f4f6fa!important;color:#44516a!important}

  /* Give each composer tool a recognizable purpose at a glance. */
  #chatView.mobile-detail .chat-tool-button{height:38px!important;min-height:38px!important;border-width:1px!important}
  #chatView.mobile-detail .button-template{border-color:#baa9e8!important;background:#f5f1ff!important;color:#6543a5!important}
  #chatView.mobile-detail .button-sticker{border-color:#e8c77a!important;background:#fff9e8!important;color:#876000!important}
  #chatView.mobile-detail .button-attachment{border-color:#84bdd5!important;background:#eff9fd!important;color:#176782!important}
}