/* Route-scoped geometry for buyer and seller mobile customer service.
 * This stylesheet uses its own owner marker/variables so legacy keyboard
 * helpers can remain loaded for unrelated dialogs without changing them. */
@media (max-width: 768px), (pointer: coarse) {
  html[data-gsfc-customer-keyboard-owner="buyer"],
  html[data-gsfc-customer-keyboard-owner="buyer"] body,
  html[data-gsfc-customer-keyboard-owner="seller"],
  html[data-gsfc-customer-keyboard-owner="seller"] body {
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html[data-gsfc-customer-keyboard-owner="buyer"] #app,
  html[data-gsfc-customer-keyboard-owner="seller"] #app {
    min-height: 0 !important;
    height: 100% !important;
  }

  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service {
    position: fixed !important;
    inset: var(--gsfc-customer-viewport-top, 0px) 0 auto 0 !important;
    width: 100% !important;
    height: var(--gsfc-customer-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--gsfc-customer-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service > .gsfc-service-messages,
  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service > .content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service > .safe-bottom,
  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service .safe-bottom {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-bottom: var(--gsfc-customer-keyboard-safe-bottom, max(10px, env(safe-area-inset-bottom, 0px))) !important;
  }

  html[data-gsfc-customer-keyboard-owner="seller"] .service-box[data-v-864b89f2],
  html[data-gsfc-customer-keyboard-owner="seller"] .service-box {
    position: fixed !important;
    inset: var(--gsfc-customer-viewport-top, 0px) 0 auto 0 !important;
    width: 100% !important;
    height: var(--gsfc-customer-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--gsfc-customer-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-gsfc-customer-keyboard-owner="seller"] .service-box[data-v-864b89f2] > .content,
  html[data-gsfc-customer-keyboard-owner="seller"] .service-box > .content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  html[data-gsfc-customer-keyboard-owner="seller"] .service-box[data-v-864b89f2] > .bottomBox,
  html[data-gsfc-customer-keyboard-owner="seller"] .service-box > .bottomBox {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-bottom: var(--gsfc-customer-keyboard-safe-bottom, max(10px, env(safe-area-inset-bottom, 0px))) !important;
  }

  html[data-gsfc-customer-keyboard-owner="buyer"] .safe-bottom textarea,
  html[data-gsfc-customer-keyboard-owner="buyer"] .safe-bottom input,
  html[data-gsfc-customer-keyboard-owner="seller"] .bottomBox textarea,
  html[data-gsfc-customer-keyboard-owner="seller"] .bottomBox input {
    font-size: max(16px, 1em) !important;
  }
}

@media (min-width: 769px) {
  /* A coarse-pointer tablet can still use the mobile surface. */
  html[data-gsfc-customer-keyboard-owner="buyer"] .mobile-customer-service,
  html[data-gsfc-customer-keyboard-owner="seller"] .service-box {
    height: var(--gsfc-customer-viewport-height, 100dvh) !important;
  }
}