/* Master Ryadom iPhone PWA only, QA 2026-11-04.
   Desktop handset preview MUST behave as a mobile viewport inside #root,
   even if CSS @media queries see a 1920px desktop window. */
#root,#root main,#root .page,#root .page>.wrap {min-width:0}
#root main,#root .page {max-width:100%}
#root .page>.wrap {width:calc(100% - 30px);max-width:100%}
#root .page .page-head {max-width:100%;min-width:0;flex-wrap:wrap;align-items:flex-start;gap:12px}
#root .page .page-head>div {min-width:0;max-width:100%}
#root .page .content-title {overflow-wrap:anywhere;font-size:24px}
#root .page .page-head p {font-size:12px;line-height:1.45}
#root .page .card,#root .page .panel,#root .page .service-card,#root .page .order-card {max-width:100%;min-width:0}

/* Single-column account and master layouts within the 440px phone shell. */
#root .profile-modern-layout,#root .master-profile-grid {display:grid;grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;gap:14px}
#root .profile-main-column,#root .profile-modern-layout>*,#root .master-profile-grid>* {width:100%;min-width:0;max-width:100%}
#root .profile-details,#root .profile-actions-card {padding:18px 16px;border-radius:19px}
#root .profile-cover {width:100%;max-width:100%;overflow:hidden}
#root .profile-mini-metrics {margin-inline:16px}
#root .profile-mini-metrics>div {min-width:0}
#root .profile-mini-metrics strong,#root .profile-mini-metrics b {overflow-wrap:anywhere}
#root .profile-readonly,#root .profile-shortcuts {grid-template-columns:minmax(0,1fr);gap:10px}
#root .profile-card-title {flex-wrap:wrap;gap:10px}
#root .profile-card-title>div {min-width:0}
#root .profile-form .form-grid,#root .master-profile-form .form-grid {grid-template-columns:minmax(0,1fr);gap:10px}
#root .profile-form .field,#root .profile-form input,#root .profile-form select {min-width:0;max-width:100%;width:100%}
#root .profile-actions {gap:8px}
#root .profile-actions .btn {flex:1 1 140px;min-width:0;white-space:normal}
#root .master-metrics,#root .master-orders-grid {grid-template-columns:minmax(0,1fr)}
#root .profile-cover h2 {overflow-wrap:anywhere}

/* Chat and support: show one pane at a time, never the desktop split-screen. */
#root .messenger,#root .support-content .messenger {
  display:flex!important;flex-direction:column;position:relative;box-sizing:border-box;
  grid-template-columns:none;width:100%;max-width:100%;min-width:0;
  height:clamp(360px,calc(100dvh - 240px),650px);min-height:0;
  border-radius:18px;overflow:hidden;background:#fff;color:#143c2e;
}
#root .messenger .threads,#root .support-content .messenger .threads {
  display:block;flex:1;min-height:0;width:100%;min-width:0;max-width:100%;overflow-y:auto;
  border:0;color:#173b30;background:#fff;
}
#root .messenger .conversation,#root .support-content .messenger .conversation {
  display:none;flex:1;flex-direction:column;width:100%;min-width:0;max-width:100%;height:100%;min-height:0;overflow:hidden;background:#fff;color:#173b30;
}
#root .messenger.chat-open .threads,#root .support-content .messenger.chat-open .threads {display:none!important}
#root .messenger.chat-open .conversation,#root .support-content .messenger.chat-open .conversation {display:flex!important}
#root .messenger .threads-head,#root .messenger .thread-title,#root .messenger .conversation-head,
#root .messenger .empty,#root .messenger .empty-mini {color:#173b30}
#root .messenger .thread,#root .messenger .threads-head {min-width:0;max-width:100%}
#root .messenger .thread-sub {color:#687e72;overflow-wrap:anywhere}
#root .messenger .conversation-head {min-width:0;word-break:break-word}
#root .messenger .back-mobile {display:inline-flex!important;align-items:center;justify-content:center;color:#076d4d}
#root .messenger .message-area {flex:1;min-height:0;overflow-y:auto;padding:12px}
#root .messenger .message {max-width:90%}
#root .messenger .composer-shell {min-width:0;padding:8px}
#root .messenger .composer {min-width:0;max-width:100%}
#root .messenger .composer textarea {min-width:0;flex:1}

/* Native-feeling modal forms, including Create Order, sign-in, and support. */
.modal-backdrop {padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.modal-backdrop .modal,.modal-backdrop .modal-wide {
  box-sizing:border-box;width:min(440px,100%)!important;max-width:min(440px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 16px;border-radius:20px;color:#173b30;background:#fff;
}
.modal-backdrop .form-grid {grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.modal-backdrop .field {min-width:0;max-width:100%;margin-bottom:10px}
.modal-backdrop input,.modal-backdrop textarea,.modal-backdrop select {width:100%;min-width:0;max-width:100%;font-size:16px!important}
.modal-backdrop .modal-head {position:relative;align-items:flex-start;gap:9px}
.modal-backdrop .modal-head>div {min-width:0;max-width:calc(100% - 42px)}
.modal-backdrop .modal-head h2 {font-size:21px;line-height:1.18;overflow-wrap:anywhere}
.modal-backdrop .modal-head p {font-size:12px;line-height:1.4}
.modal-backdrop .form-actions {display:flex;flex-wrap:wrap;gap:8px}
.modal-backdrop .form-actions>.btn {flex:1 1 130px;min-width:0;white-space:normal}
.modal-backdrop #order-photos {font-size:13px!important}

/* Mobile viewport smaller than 390px; keyboard focus remains accessible. */
@media(max-width:390px){
 #root .profile-mini-metrics {margin-inline:12px}
 #root .profile-details,#root .profile-actions-card {padding:15px 12px}
 .modal-backdrop .modal,.modal-backdrop .modal-wide {padding:15px 12px}
}