/* The native wrapper already keeps the WebView inside system bars. */
:root { --app-safe-top:env(safe-area-inset-top,0px); --app-safe-bottom:env(safe-area-inset-bottom,0px); --app-safe-left:env(safe-area-inset-left,0px); --app-safe-right:env(safe-area-inset-right,0px); }
html.native-webview { --app-safe-top:0px; --app-safe-bottom:0px; --app-safe-left:0px; --app-safe-right:0px; }
html.app-booting .bottom-nav-surface { visibility:hidden; }
/* The login page must fill its container independently of the selected language. */
#screen-content.auth-content > .auth-screen-v2 { width: 100%; min-width: 0; }
.auth-screen-v2 .auth-main { width: 100%; max-width: 480px; margin-inline: auto; }
.auth-screen-v2 .auth-intro { text-align: start; }
.auth-screen-v2 .auth-intro h1,
.auth-screen-v2 .auth-stage-copy { overflow-wrap: anywhere; hyphens: auto; }
.auth-screen-v2 .auth-topline .brand-lockup { max-width: 100%; }
.auth-screen-v2 .auth-topline small { white-space: normal; overflow-wrap: anywhere; }
.auth-screen-v2 .auth-stage-head > span { min-width: 0; overflow-wrap: anywhere; }
.auth-screen-v2 .auth-stage-head > span:last-child { text-align: end; }
.auth-screen-v2 .auth-stage-copy > span { flex-wrap: wrap; }
#container-app .auth-screen-v2 .auth-google-button { min-width: 0; padding: 12px 16px; }
#container-app .auth-screen-v2 #google-sign-in-label {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; line-height: 1.4;
}
.auth-screen-v2 .auth-trust-note > span { min-width: 0; overflow-wrap: anywhere; }

/* Phones use native document scrolling; fixed-height inner scrollers fight iOS keyboards. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 1024px) {
  html, body {
    width: 100%; height: auto; min-height: 100%;
    margin: 0; overflow: visible;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  }
  html { overflow-x: clip; scroll-padding-block: 20px 100px; }
  body[class] { display: block; min-height: 100vh; min-height: 100svh; padding: 0 !important; background: #f8faf9; overflow-x: clip; }
  body[class] > main {
    display: block; width: 100%; min-width: 0;
    height: auto; min-height: 100vh; min-height: 100svh;
    padding: 0 !important;
  }
  .preview-header, .camera-hole, .android-status-bar, .android-home-pill { display: none !important; }
  #container-app.pixel-shell, #container-app.fullscreen-shell, #container-app.tablet-shell {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: none; min-width: 0;
    height: auto; min-height: 100vh; min-height: 100svh; overflow: visible;
    border: 0; border-radius: 0; box-shadow: none; transition: none;
    padding: var(--app-safe-top, 0px) var(--app-safe-right, 0px) calc(82px + var(--app-safe-bottom, 0px)) var(--app-safe-left, 0px);
    background: #f8faf9;
  }
  #app-viewport {
    display: block; flex: none;
    min-width: 0; min-height: 0; width: 100%;
    overflow: visible; height: auto;
  }
  #screen-content { flex: 1 0 auto; min-width: 0; width: 100%; padding: 20px clamp(16px, 5vw, 24px) 24px; }
  #screen-content > *, #modal-container > * { min-width: 0; max-width: 100%; }
  #screen-content.auth-content { display: flex; padding: 0 !important; }
  #container-app .bottom-nav-surface {
    position: fixed; left: var(--app-safe-left, 0px); right: var(--app-safe-right, 0px); bottom: 0; top: auto;
    transition: none; animation: none;
    display: flex; align-items: center; justify-content: space-around; flex: none; z-index: 30;
    width: auto; min-width: 0; height: calc(70px + var(--app-safe-bottom, 0px));
    padding: 0 8px var(--app-safe-bottom, 0px);
  }
  .bottom-nav-item { display: flex; flex: 1 1 0; min-width: 0; min-height: 48px; align-items: center; justify-content: center; flex-direction: column; }
  .bottom-nav-item > span { font-size: 11px; }
  .bottom-nav-item > svg { flex: none; width: 20px; height: 20px; }

  /* iOS zooms focused fields below 16px; keep browser pinch zoom available. */
  #container-app input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  #container-app textarea, #container-app select {
    min-width: 0; max-width: 100%; font-size: 16px !important;
    line-height: 1.5; scroll-margin-block: 20px;
  }
  #container-app textarea { display: block; width: 100%; resize: vertical; }
  .order-form-control .order-form-input { flex: 1 1 0; width: 0; }
  .order-form-field, .order-form-control, .selected-service-card,
  .ticket-create-page, .ticket-create-section, .ticket-composer,
  .ticket-create-section-head > div, .ticket-message, .ticket-conversation { min-width: 0; max-width: 100%; }
  .ticket-create-section-head > div { flex: 1; }
  .ticket-create-section-head p, .ticket-context-hint, .ticket-message-help,
  .ticket-message p, .profile-identity-copy, .screenshot-selected small { overflow-wrap: anywhere; }
  .selected-service-card-tier strong { overflow-wrap: anywhere; }
  .selected-service-card-bottom { flex-wrap: wrap; }
  .selected-service-card-price { margin-left: auto; }
  .order-form-field-heading { flex-wrap: wrap; }
  .profile-identity-copy > span { display: block; overflow-wrap: anywhere; }
  .ticket-composer textarea, #ticket-desc { min-height: 136px; padding: 13px 14px; }

  #modal-container {
    position: fixed; inset: auto 0 auto;
    top: var(--mobile-visible-top, 0px);
    height: 100vh; height: 100dvh; height: var(--mobile-visible-height, 100vh);
    pointer-events: none; z-index: 50;
  }
  .tools-sheet, .profile-info-sheet, .receipt-sheet, .service-sheet, .ticket-picker-sheet {
    min-width: 0; max-height: calc(100% - 12px);
    padding-bottom: calc(20px + var(--app-safe-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  #toast-container.app-toast-region { position: fixed; bottom: calc(82px + var(--app-safe-bottom, 0px)); }
  .auth-mode #toast-container.app-toast-region { bottom: calc(16px + var(--app-safe-bottom, 0px)); }
  #container-app.mobile-keyboard-open .bottom-nav-surface { display: none; }
  .mobile-keyboard-open #toast-container.app-toast-region {
    bottom: auto; top: calc(var(--mobile-visible-top, 0px) + var(--mobile-visible-height, 100dvh) - 72px);
  }
  #container-app.auth-mode, #container-app.legal-mode { padding-bottom: 0; }
  #container-app.mobile-keyboard-open { padding-bottom: calc(24px + var(--mobile-keyboard-inset, 0px)); }
  #container-app textarea { overscroll-behavior-y: auto; }
  html.mobile-modal-open, body.mobile-modal-open { overflow: hidden; }

  /* Login content follows the centered brand and language selector. */
  .auth-screen-v2 {
    flex: none; min-height: calc(100svh - var(--app-safe-top, 0px)); min-width: 0; overflow: visible;
    padding: 24px clamp(20px, 5.5vw, 28px) calc(20px + var(--app-safe-bottom, 0px));
  }
  .auth-screen-v2 .auth-topline { flex: none; min-height: 43px; }
  .auth-screen-v2 .auth-main {
    flex: 1 0 auto; justify-content: center; justify-content: safe center;
    gap: 22px; padding: 0; min-width: 0;
  }
  .auth-screen-v2 .auth-main > * { flex-shrink: 0; min-width: 0; width: 100%; }
  .auth-screen-v2 .auth-intro { padding-inline: 0; }
  .auth-screen-v2 .auth-intro h1 { max-width: 100%; font-size: clamp(29px, 8vw, 36px); line-height: 1.15; }
  .auth-screen-v2 .auth-intro > p:last-child { max-width: 100%; font-size: 13px; line-height: 1.65; margin-top: 12px; }
  .auth-screen-v2 .auth-stage { min-height: 0; padding: 18px; }
  .auth-screen-v2 .auth-stage-main { gap: 14px; margin-top: 18px; margin-bottom: 4px; }
  .auth-screen-v2 .auth-stage-ring { width: clamp(100px, 30vw, 124px); height: clamp(100px, 30vw, 124px); }
  .auth-screen-v2 .auth-stage-copy > strong { font-size: 15px; }
  #container-app .auth-screen-v2 .auth-google-button { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 54px; padding: 12px 16px; font-size: 14px; }
  .auth-trust-note { align-items: flex-start; font-size: 11px; }
  .auth-trust-note svg { margin-top: 1px; }
}

@media (max-width: 370px) {
  .workspace-topbar .brand-lockup img { width: 30px; height: 30px; }
  .workspace-topbar .brand-lockup { gap: 7px; }
  .workspace-topbar-actions { gap: 4px; }
  .auth-screen-v2 .auth-stage { padding: 15px; }
  .auth-screen-v2 .auth-stage-main { gap: 10px; }
  .auth-stage-head { font-size: 8px; letter-spacing: .07em; }
  .auth-screen-v2 .auth-stage-copy > strong { font-size: 14px; }
  .auth-screen-v2 .auth-intro h1 { font-size: 28px; }
}
@media (max-height: 650px) and (max-width: 1024px) {
  .auth-screen-v2 { padding-top: 16px; }
  .auth-screen-v2 .auth-main { justify-content: flex-start; gap: 17px; padding-top: 24px; }
}
.auth-email-login { width:100%; min-width:0; margin-top:14px; color:#536b60; }
.auth-email-login > summary { cursor:pointer; text-align:center; font-size:13px; font-weight:600; padding:12px; border-radius:12px; }
.auth-email-login > summary:focus-visible { outline:2px solid #719783; outline-offset:2px; }
.auth-email-login form { display:grid; gap:14px; margin-top:10px; padding:18px; border:1px solid #dce6df; border-radius:18px; background:#fff; }
.auth-email-login label { display:grid; gap:7px; font-size:13px; font-weight:600; }
.auth-email-login input { width:100%; min-width:0; min-height:48px; padding:12px; border:1px solid #dce6df; border-radius:10px; background:#f7faf8; color:#26333d; font:inherit; font-size:16px; box-sizing:border-box; }
.auth-email-login button { width:100%; min-height:48px; }
.auth-email-login .auth-sign-in-error { margin:0; }