/*
 * Mobile Mitarbeiter-Webversion im Browser (WM)
 *
 * Diese Paritaetsschicht entspricht dem abgenommenen iOS-/Android-Stand vom
 * 14.07.2026. Sie wird erst aktiv, wenn employee-mobile-overrides.js den
 * Browserbetrieb bestaetigt. Native WebViews und die PC-Webversion bleiben
 * dadurch unveraendert.
 */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  html[data-mobile-web-runtime="browser"][data-device="phone"] {
    --mobile-content-gap: 24px;
    --mobile-shell-top: max(12px, env(safe-area-inset-top, 0px));
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body:not(.chat-active) .view.active {
    box-sizing: border-box !important;
    padding-top: var(--mobile-content-gap) !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body:not(.chat-active) .view.active > .section-title:first-child {
    margin-top: 0 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] #homecare-mobile-web-bottom-mask {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--nav-h) + var(--safe-bottom) + 64px) !important;
    background: linear-gradient(
      180deg,
      rgba(207, 170, 183, 0) 0,
      rgba(207, 170, 183, 0.38) 18px,
      rgba(207, 170, 183, 0.86) 36px,
      #cfaab7 48px,
      #cfaab7 100%
    ) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 190 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.keyboard-open #homecare-mobile-web-bottom-mask,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-composing #homecare-mobile-web-bottom-mask {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body:not(.chat-active) .view-container {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 72px) !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat > .section-title {
    display: none !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active .view-container {
    position: fixed !important;
    top: calc(var(--mobile-shell-top) + 74px + 20px) !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 40px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat.active {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-view {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #chat-contacts-panel {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: min(42%, 320px) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #chat-contacts-panel .chat-panel-head {
    min-height: 58px !important;
    padding: 9px 12px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #chat-contacts-panel .chat-contacts {
    display: none !important;
    min-height: 0 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #chat-contacts-panel.contacts-open .chat-contacts {
    display: block !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-panel:last-child {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-panel:last-child .chat-panel-head {
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 62px !important;
    padding: 10px 14px 9px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-messages {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 12px !important;
    gap: 8px !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.mobile-web-chat-has-messages.chat-active #view-chat .chat-messages::before {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-compose {
    position: relative !important;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 8px !important;
    padding: 9px !important;
    padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-compose textarea {
    min-height: 46px !important;
    max-height: 82px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    resize: none !important;
    font-size: 16px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active #view-chat .chat-compose .btn {
    min-height: 46px !important;
    border-radius: 18px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing .view-container,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open .view-container {
    top: calc(var(--mobile-shell-top) + 74px + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(min(var(--keyboard-inset), 42vh) + 8px) !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #chat-contacts-panel,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #chat-contacts-panel {
    display: none !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #view-chat .chat-view,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #view-chat .chat-view {
    gap: 0 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #view-chat .chat-panel:last-child,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #view-chat .chat-panel:last-child {
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 24px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #view-chat .chat-panel:last-child .chat-panel-head,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #view-chat .chat-panel:last-child .chat-panel-head {
    min-height: 54px !important;
    padding: 8px 12px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #view-chat .chat-messages,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #view-chat .chat-messages {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.chat-composing #view-chat .chat-compose,
  html[data-mobile-web-runtime="browser"][data-device="phone"] body.chat-active.keyboard-open #view-chat .chat-compose {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    padding: 8px !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] #view-chat .chat-status.sent {
    color: #8e7480 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] #view-chat .chat-status.delivered {
    color: #b98d99 !important;
  }

  html[data-mobile-web-runtime="browser"][data-device="phone"] #view-chat .chat-status.read {
    color: #16a34a !important;
  }
}