/* Shared mobile chrome only. Page-specific density belongs to its scoped sheet.
   Important layered rules replace legacy unlayered overrides without repeating
   classes to escalate selector specificity. */
@layer mobile-shared {
  @media(max-width:880px) {
    html.yp-m { --yp-mobile-safe-top:env(safe-area-inset-top,0px); }
    body.yp-mobile-shell {
      --yp-mobile-header:calc(52px + var(--yp-mobile-safe-top));
      padding-top:var(--yp-mobile-header) !important;
    }
    body.yp-mobile-shell #yp-mobile-tabs {
      height:var(--yp-mobile-header) !important;
      padding-top:var(--yp-mobile-safe-top) !important;
      padding-left:max(6px,env(safe-area-inset-left)) !important;
      padding-right:max(6px,env(safe-area-inset-right)) !important;
    }
    body.yp-mobile-shell .layout { height:calc(100dvh - var(--yp-mobile-header)) !important; }
    body.yp-mobile-shell #yp-pet-panel.yp-pet-panel--open {
      top:var(--yp-mobile-header) !important;
      height:calc(100dvh - var(--yp-mobile-header) - var(--yp-keyboard-inset,0px)) !important;
    }
    body.yp-mobile-shell .main-area > .content {
      padding-bottom:calc(var(--yp-mobile-composer-height,0px) + 16px + env(safe-area-inset-bottom,0px)) !important;
    }
    #yp-mobile-tabs :is(a,button) { touch-action:manipulation; }
    #yp-mobile-tabs .yp-mobile-search { min-height:40px !important; }
    #yp-drawer .si-name { font-size:14px !important; line-height:1.45 !important; }
    #yp-drawer .side-item { min-height:44px !important; }
    #yp-drawer .yp-drawer-links a { font-size:13px !important; min-height:40px !important; }
    body :is(.yp-market-calendar-date,.yp-market-weekday) { font-size:12px !important; line-height:1.4 !important; }
    body .yp-tablewrap { max-width:100% !important; min-width:0 !important; overflow-x:auto !important; }
    body .yp-table-scroll-region { scrollbar-width:thin !important; overscroll-behavior-x:contain; }
    body .yp-tablewrap.is-scrollable::before {
      content:"左右滑动查看完整列 →"; display:block; position:sticky; left:0;
      width:fit-content; padding:3px 6px; color:#737b87; font-size:11px; line-height:18px;
    }
    body .yp-table-scroll-region:focus-visible { outline:2px solid #d92d32 !important; outline-offset:-2px; }
    /* Prevent iOS focus zoom only on text entry; compact filters stay compact. */
    body :is(input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],textarea):focus {
      font-size:max(16px,1em) !important;
    }
    body .yp-date-trigger { min-height:36px !important; height:36px !important; gap:6px !important; }
    body :is(.yp-date-trigger-label,.yp-date-trigger-value) { font-size:12px !important; font-weight:400 !important; }
    body .yp-date-popover { overflow-y:auto !important; overscroll-behavior:contain; }
    body .yp-date-head { grid-template-columns:32px 32px minmax(0,1fr) 32px 32px !important; }
    body .yp-date-nav { width:32px !important; height:34px !important; min-height:34px !important; }
    body .yp-date-day { height:32px !important; min-height:32px !important; font-size:13px !important; }
    body .yp-date-status { font-size:11px !important; }
    body .yp-date-today { min-height:32px !important; }
    body :is(.yp-date-nav,.yp-date-day,.yp-date-today):focus-visible { outline:2px solid #d92d32 !important; outline-offset:-2px; }
    body .yp-date-day.is-selected { background:#fff1f1 !important; color:#c52e35 !important; border-color:#e5b9bd !important; }
  }
}

/* Composer listboxes: full descriptions and consistent mobile selection states. */
@layer mobile-shared {
  @media(max-width:880px) {
    /* A selected Skill gets its own line; the draft keeps the full text width. */
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) .yp-pet-query-wrap {
      grid-column:1 / -1 !important; grid-row:1 !important;
      display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:4px !important;
    }
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) .yp-pet-active-skill-wrap {
      align-self:flex-start !important; max-width:100% !important; min-height:32px !important;
    }
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) .yp-pet-active-skill { font-size:13px !important; }
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) .yp-pet-input {
      flex:none !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important;
    }
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) :is(.yp-pet-skill-add-wrap,.yp-pet-attachment-wrap,.yp-pet-voice,.yp-pet-send,.yp-pet-usage-wrap) { grid-row:2 !important; }
    body .yp-pet-inputrow:has(.yp-pet-active-skill-wrap:not([hidden])) .yp-pet-usage-wrap { grid-column:3 !important; justify-content:flex-end !important; }
  }
  @media(max-width:1024px) {
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) {
      box-sizing:border-box !important; background:#fff !important; color:#343a43 !important;
      border:1px solid #e5e8ed !important; border-radius:8px !important; padding:6px !important;
      box-shadow:0 4px 16px rgba(39,43,51,.1) !important;
      overflow:auto !important; overscroll-behavior:contain !important; scrollbar-width:thin !important;
    }
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) [role="option"] {
      min-height:44px !important; padding:9px 10px !important; border-radius:5px !important;
      color:#343a43 !important; background:#fff !important; font-size:13px !important; font-weight:400 !important;
      line-height:1.45 !important;
    }
    body .yp-pet-active-skill-menu > b,
    body .yp-pet-active-skill-menu button strong { font-size:13px !important; font-weight:500 !important; white-space:normal !important; }
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) small {
      font-size:12px !important; line-height:1.5 !important; color:#657080 !important;
      white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere !important;
    }
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) [role="option"]:hover { background:#f7f8fa !important; }
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) [role="option"][aria-selected="true"] { background:#fff1f1 !important; color:#c52e35 !important; }
    body .yp-pet-active-skill-menu button > i { background:#f4f5f7 !important; color:#657080 !important; font-weight:500 !important; }
    body .yp-pet-active-skill-menu button[aria-selected="true"] > i { background:#fff1f1 !important; color:#c52e35 !important; }
    body .yp-pet-active-skill-menu button em { color:#c52e35 !important; }
    body :is(.yp-pet-active-skill-menu,.yp-pet-mode-menu) [role="option"]:focus-visible { outline:2px solid #d92d32 !important; outline-offset:-2px !important; }
  }
}