/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH
   Consolidated touch/mobile behavior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TOUCH INTEGRATION
   Formerly 11-mobile-polish.css. Generic touch behavior now lives with the
   shared component primitives it affects.
   ═══════════════════════════════════════════════════════════════════════════ */

* {
  -webkit-tap-highlight-color: transparent;
}

#app-header,
#topbar,
#toolbar-row,
.dropdown,
.modal,
.modal-overlay,
.ui-panel-header,
.ui-shell-header,
.sp-header,
.header-action-btn,
.tb-btn,
.topbar-btn,
.dropdown-item,
.btn,
.hcp-swatch {
  -webkit-touch-callout: none;
}

button,
input,
textarea,
select,
[role="button"],
[role="menuitem"],
[role="option"],
[role="checkbox"],
[role="radio"],
[role="combobox"],
a,
label,
.header-action-btn,
.tb-btn,
.topbar-btn,
.dropdown-item,
.btn,
.sp-item,
.ui-close,
.sp-close,
.hcp-swatch,
.hcp-remove,
.topbar-title-btn,
.topbar-title-input,
.toolbar-scroll-wrap {
  touch-action: manipulation;
}

@media (any-hover: none) {
  .header-action-btn:hover:not(.is-hovered) {
    background: transparent;
    color: var(--text-sec);
  }
  .header-action-btn.is-active:hover:not(.is-hovered) {
    background: var(--fill-selected);
    color: var(--accent);
  }
  [data-theme="dark"] .header-action-btn.is-active:hover:not(.is-hovered) {
    background: rgba(var(--accent-rgb), .30);
    color: var(--accent-quiet);
  }
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

@media (pointer: coarse) {
  .header-action-btn:active {
    background: var(--fill-active);
    color: var(--text);
    transform: scale(0.92);
    transition: transform 60ms var(--ease), background 60ms var(--ease);
  }
  .header-action-btn.is-active:active {
    background: rgba(var(--accent-rgb), .18);
  }

  .dropdown-item:active {
    background: var(--fill-active);
    color: var(--text);
  }

  .btn--primary:active { filter: brightness(0.92); transform: scale(0.97); }
  .btn--secondary:active { background: var(--fill-active); transform: scale(0.97); }
  .btn--ghost:active { background: var(--fill-active); }

  .hcp-swatch:active {
    transform: scale(0.88);
    transition: transform 80ms var(--ease);
  }

  .header-action-btn { position: relative; }
  .header-action-btn::after {
    content: '';
    position: absolute;
    inset: -6px;
    min-width: 44px;
    min-height: 44px;
  }


  .ui-close {
    width: 44px;
    height: 44px;
  }

  .dropdown-item {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn {
    min-height: 44px;
  }

  .hcp-swatch {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 767px) {
  .header-action-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-lg);
  }
  .topbar-title-control {
    padding-inline: 10px;
    min-height: 40px;
  }
  .tb-style-select {
    width: auto;
    min-width: 136px;
    max-width: 180px;
    height: 44px;
  }
  .topbar-title-display-inner {
    gap: 6px;
  }
  .topbar-title-status {
    font-size: 10px;
  }

  #app-header .dropdown {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    transform-origin: top right;
    max-width: min(260px, 92vw);
    border-radius: var(--r-2xl);
  }
  .dropdown-item {
    min-height: 48px;
    padding: 12px var(--sp-4);
    font-size: 14px;
  }
  .dropdown-item svg {
    width: 16px;
    height: 16px;
  }
  .dropdown-section-label {
    padding: 10px var(--sp-4) 6px;
    font-size: 11px;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    max-height: 88svh;
    transform: translateY(100%);
    transition: transform var(--t-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-overlay.is-open .modal {
    transform: translateY(0);
  }
  .modal::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    margin: 12px auto 0;
    flex-shrink: 0;
  }
  .ui-shell-header,
  .modal-header {
    padding-top: 8px;
  }
  .ui-shell-footer,
  .modal-footer {
    flex-direction: column-reverse;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    gap: var(--sp-2);
  }
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 15px;
    border-radius: var(--r-lg);
  }
  .modal-overlay.is-open {
    padding-bottom: env(keyboard-inset-height, 0px);
  }

  #sp-temporary .ui-control {
    min-height: 44px;
    border-radius: var(--r-md);
    font-size: 16px;
  }
  #sp-temporary .sp-action-btn {
    min-height: 44px;
    font-size: 14px;
    border-radius: var(--r-md);
  }

  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  textarea {
    font-size: max(16px, 1em);
    border-radius: var(--r-md);
  }

  #search-query {
    font-size: 16px;
  }
  #search-query {
    height: 44px;
    padding: 0 var(--sp-3);
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
  .header-action-btn {
    width: 40px;
    height: 40px;
  }
  .dropdown-item {
    min-height: 44px;
    padding: 10px var(--sp-4);
  }
}

@media (display-mode: standalone) {
  #app-header {
    padding-top: env(safe-area-inset-top, 0px);
    min-height: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    flex-basis: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
  }

  #topbar {
    height: var(--topbar-h);
  }

  #sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    #toast-root {
      padding-bottom: 8px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  .dropdown,
  .modal,
  .modal-overlay,
  #overlay,
  .sp,
  .header-action-btn,
  .tb-btn,
  .topbar-btn {
    transition: none !important;
    animation: none !important;
  }
}

:root:is([dir="rtl"]) .topbar-actions {
  flex-direction: row-reverse;
}

:root:is([dir="rtl"]) .toolbar-inner {
  direction: rtl;
}

:root:is([dir="rtl"]) .temporary-sidebar-actions {
  flex-direction: row-reverse;
}