/*
 * Mobile layout fixes
 *
 * Load this file after style.css.  The selectors intentionally cover both
 * real narrow viewports and the admin phone simulator (body.viewport-mobile).
 * Desktop layout and component-level horizontal scrolling are left alone.
 */

/* 桌面維持原有工具列配置；手機才把相同控制項整理成三排。 */
#tab-watchlist :is(.watchlist-summary-row, .watchlist-filter-row, .watchlist-more-tools) {
  display: contents;
}
#tab-watchlist .watchlist-more-toggle { display: none; }
#tab-watchlist .watchlist-count-short { display: none; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-count-full { display: none; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-count-short { display: inline; }

body[data-mobile-chrome="1"] #tab-watchlist .export-bar {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: var(--ui-control-gap) !important;
  padding: var(--ui-safe-inset);
  overflow: visible;
}
body[data-mobile-chrome="1"] #tab-watchlist .export-bar :is(.btn, .view-btn, .export-buyer-input) {
  height: var(--ui-control-height) !important;
  border-radius: var(--ui-radius-square) !important;
}
body[data-mobile-chrome="1"] #tab-watchlist .export-bar :is(.btn, .view-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-summary-row {
  display: flex;
  align-items: center;
  gap: var(--ui-control-gap);
  width: 100%;
  min-width: 0;
  height: var(--ui-control-height);
}
body[data-mobile-chrome="1"] #tab-watchlist #watchlistCount {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-view-controls {
  flex: 0 0 auto;
  margin-left: 0 !important;
  gap: var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-view-controls .view-btn {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  min-width: var(--ui-control-height);
  padding: 0;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: stretch;
  gap: var(--ui-control-gap);
  width: 100%;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-watchlist #watchlistFilterGroup {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  margin-left: 0 !important;
}
body[data-mobile-chrome="1"] #tab-watchlist #watchlistFilterGroup .btn {
  flex: 1 1 0;
  min-width: 0;
  height: var(--ui-control-height);
  padding: 0 2px;
  font-size: .72rem;
  white-space: nowrap;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-filter-long { display: none; }
#tab-watchlist .watchlist-filter-short { display: none; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-filter-short { display: inline; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ui-control-height);
  padding: 0 4px;
  white-space: nowrap;
  font-size: .75rem;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-more-tools { display: none; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-more-tools.is-open {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-control-gap);
  width: 100%;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-more-tools > .btn {
  min-width: 0;
  height: var(--ui-control-height);
  margin: 0 !important;
  padding: 0 4px;
  font-size: .75rem;
  white-space: nowrap;
}
body[data-mobile-chrome="1"] #tab-watchlist #btnOpenShopeeQueueModal { grid-column: 1 / -1; }
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-export-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-left: 0 !important;
  gap: var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-watchlist .watchlist-export-row > * { height: var(--ui-control-height); }
body[data-mobile-chrome="1"] #tab-watchlist #buyerName { flex: 1 1 0; min-width: 0; }
body[data-mobile-chrome="1"] #tab-watchlist #btnExportOrder { flex: 0 0 auto; white-space: nowrap; padding: 0 8px; }
body[data-mobile-chrome="1"] #tab-watchlist #btnQuickOrder { flex: 1 1 auto; }

@media (max-width: 768px) {
  :is(#phoneMockScreen, #pageContent, #tab-watchlist, #tab-stockwatch, #tab-groupchat) {
    min-width: 0;
    max-width: 100%;
  }

  #pageContent {
    overflow-x: clip;
  }
}

body.viewport-mobile :is(#phoneMockScreen, #pageContent, #tab-watchlist, #tab-stockwatch, #tab-groupchat) {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #pageContent {
  overflow-x: clip;
}

/* Watchlist / restock toolbars: each logical group gets a bounded row. */
@media (max-width: 768px) {
  :is(#tab-watchlist, #tab-stockwatch) .export-bar {
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }

  :is(#tab-watchlist, #tab-stockwatch) .export-bar > * {
    min-width: 0;
    max-width: 100%;
  }

  :is(#tab-watchlist, #tab-stockwatch) .export-bar .btn-group {
    flex-wrap: wrap;
  }

  :is(#tab-watchlist, #tab-stockwatch) .export-bar .ms-auto {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
    min-width: 0;
    flex-wrap: wrap;
  }

  :is(#tab-watchlist, #tab-stockwatch) .export-bar .ms-auto > * {
    min-width: 0;
    max-width: 100%;
  }

  #tab-watchlist .export-buyer-input {
    flex: 1 1 120px;
    width: auto !important;
  }

  #tab-watchlist #btnExportOrder {
    flex: 0 1 auto;
    white-space: normal;
  }
}

body.viewport-mobile :is(#tab-watchlist, #tab-stockwatch) .export-bar {
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

body.viewport-mobile :is(#tab-watchlist, #tab-stockwatch) .export-bar > * {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile :is(#tab-watchlist, #tab-stockwatch) .export-bar .btn-group {
  flex-wrap: wrap;
}

body.viewport-mobile :is(#tab-watchlist, #tab-stockwatch) .export-bar .ms-auto {
  flex: 1 1 100%;
  width: 100%;
  margin-left: 0 !important;
  min-width: 0;
  flex-wrap: wrap;
}

body.viewport-mobile :is(#tab-watchlist, #tab-stockwatch) .export-bar .ms-auto > * {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #tab-watchlist .export-buyer-input {
  flex: 1 1 120px;
  width: auto !important;
}

body.viewport-mobile #tab-watchlist #btnExportOrder {
  flex: 0 1 auto;
  white-space: normal;
}

/* 補貨監控：檢視模式是一組，語言／宣傳操作是另一組，避免單顆按鈕落單。 */
@media (max-width: 768px) {
  #tab-stockwatch .export-bar > .d-flex {
    flex: 1 1 150px;
    margin-left: 0 !important;
  }
  #tab-stockwatch .export-bar > .btn-toggle-lang,
  #tab-stockwatch .export-bar > .btn-promo-mode {
    flex: 1 1 135px;
    margin: 0 !important;
  }
}
body.viewport-mobile #tab-stockwatch .export-bar > .d-flex {
  flex: 1 1 150px;
  margin-left: 0 !important;
}
body.viewport-mobile #tab-stockwatch .export-bar > .btn-toggle-lang,
body.viewport-mobile #tab-stockwatch .export-bar > .btn-promo-mode {
  flex: 1 1 135px;
  margin: 0 !important;
}

/* Group channels stay a horizontal scroller, but never widen the page. */
@media (max-width: 768px) {
  #tab-groupchat .groupchat-layout,
  #tab-groupchat .groupchat-sidebar,
  #tab-groupchat .groupchat-main,
  #tab-groupchat .groupchat-box,
  #tab-groupchat .card-body,
  #groupChatMessages {
    min-width: 0;
    max-width: 100%;
  }

  #tab-groupchat .groupchat-layout {
    overflow-x: hidden;
  }

  #tab-groupchat #groupChannelsList {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
  }

  #tab-groupchat #groupChannelsList .channel-btn {
    min-width: max-content;
    max-width: none;
  }

  #tab-groupchat .pinned-cards-section {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #tab-groupchat .pinned-carousel {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
}

body.viewport-mobile #tab-groupchat .groupchat-layout,
body.viewport-mobile #tab-groupchat .groupchat-sidebar,
body.viewport-mobile #tab-groupchat .groupchat-main,
body.viewport-mobile #tab-groupchat .groupchat-box,
body.viewport-mobile #tab-groupchat .card-body,
body.viewport-mobile #groupChatMessages {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #tab-groupchat .groupchat-layout {
  overflow-x: hidden;
}

body.viewport-mobile #tab-groupchat #groupChannelsList {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
}

body.viewport-mobile #tab-groupchat #groupChannelsList .channel-btn {
  min-width: max-content;
  max-width: none;
}

body.viewport-mobile #tab-groupchat .pinned-cards-section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.viewport-mobile #tab-groupchat .pinned-carousel {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

/* In-chat product cards: headers/actions may wrap, while card content shrinks. */
@media (max-width: 768px) {
  #tab-groupchat .social-card,
  #tab-groupchat .chat-bubble,
  #tab-groupchat .chat-bubble-container {
    min-width: 0;
    max-width: 100%;
  }

  #tab-groupchat .social-card-header {
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  #tab-groupchat .social-card-type {
    flex: 1 1 120px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #tab-groupchat .social-card-header > div {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  #tab-groupchat .social-card-body,
  #tab-groupchat .social-card-body > .d-flex,
  #tab-groupchat .social-card-body .flex-grow-1 {
    min-width: 0;
    max-width: 100%;
  }

  #tab-groupchat .social-card-title,
  #tab-groupchat .social-card-note {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #tab-groupchat .social-card-price,
  #tab-groupchat .hybrid-payment-badge {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #tab-groupchat .social-card-progress {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #tab-groupchat .social-card-progress > .d-flex {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  #tab-groupchat .social-card-body > .btn,
  #tab-groupchat .social-card-body > .d-flex:last-child,
  #tab-groupchat .social-card-body .btn-group {
    min-width: 0;
    max-width: 100%;
  }

  #tab-groupchat .social-card-body .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

body.viewport-mobile #tab-groupchat .social-card,
body.viewport-mobile #tab-groupchat .chat-bubble,
body.viewport-mobile #tab-groupchat .chat-bubble-container {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #tab-groupchat .social-card-header {
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

body.viewport-mobile #tab-groupchat .social-card-type {
  flex: 1 1 120px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.viewport-mobile #tab-groupchat .social-card-header > div {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

body.viewport-mobile #tab-groupchat .social-card-body,
body.viewport-mobile #tab-groupchat .social-card-body > .d-flex,
body.viewport-mobile #tab-groupchat .social-card-body .flex-grow-1 {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #tab-groupchat .social-card-title,
body.viewport-mobile #tab-groupchat .social-card-note {
  word-break: normal;
  overflow-wrap: anywhere;
}

body.viewport-mobile #tab-groupchat .social-card-price,
body.viewport-mobile #tab-groupchat .hybrid-payment-badge {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.viewport-mobile #tab-groupchat .social-card-progress {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.viewport-mobile #tab-groupchat .social-card-progress > .d-flex {
  flex-wrap: wrap;
  gap: 4px 8px;
}

body.viewport-mobile #tab-groupchat .social-card-body > .btn,
body.viewport-mobile #tab-groupchat .social-card-body > .d-flex:last-child,
body.viewport-mobile #tab-groupchat .social-card-body .btn-group {
  min-width: 0;
  max-width: 100%;
}

body.viewport-mobile #tab-groupchat .social-card-body .btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 真手機與管理員手機預覽：商品列所有可見操作共用同一基線。 */
body[data-mobile-chrome="1"] .product-sub-tabs .product-sub-tab.active,
body[data-mobile-chrome="1"] .product-sub-tabs :is(#btnMobileSearch, #btnScrape, #btnToggleSeriesCollapse, #btnShowWelcomeGuide) {
  box-sizing: border-box !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
  line-height: 1;
  border-radius: var(--ui-radius-square) !important;
}
body[data-mobile-chrome="1"] .product-sub-tabs :is(#btnMobileSearch, #btnScrape, #btnToggleSeriesCollapse, #btnShowWelcomeGuide) {
  width: var(--ui-control-height) !important;
  min-width: var(--ui-control-height) !important;
  padding: 0 !important;
  flex: 0 0 var(--ui-control-height);
}
body[data-mobile-chrome="1"] .product-sub-tabs :is(#btnToggleSeriesCollapse, #btnShowWelcomeGuide) i {
  margin: 0 !important;
}
body[data-mobile-chrome="1"] .product-sub-tabs .product-toolbar-actions {
  min-width: 0;
  gap: var(--ui-control-gap) !important;
}
@media (max-width: 430px) {
  body[data-mobile-chrome="1"] .product-sub-tabs #productCount { display: none; }
}

/* 後台資料表只在自身區塊橫向捲動，不能撐寬整個頁面。 */
#tab-admin .admin-widget,
#tab-admin .admin-section,
#adminUserList,
#adminAdminList,
#tab-admin .admin-user-table-scroll {
  min-width: 0;
  max-width: 100%;
}
#tab-admin .admin-user-table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
#tab-admin .admin-dashboard-toolbar {
  gap: var(--ui-control-gap);
  flex-wrap: wrap;
}
#tab-admin .admin-dashboard-description { min-width: 0; }
#tab-admin .admin-dashboard-toolbar > .btn {
  flex: 0 0 auto;
  min-height: var(--ui-control-height);
  white-space: nowrap;
  border-radius: var(--ui-radius-square);
}
@media (max-width: 768px) {
  #adminUserList .admin-user-table { min-width: 760px; }
  #adminAdminList .admin-user-table { min-width: 580px; }
  #tab-admin .admin-dashboard-toolbar { align-items: stretch !important; }
  #tab-admin .admin-dashboard-description { flex: 1 1 100%; flex-wrap: wrap; }
  #tab-admin .admin-dashboard-toolbar > .btn { margin-left: 0; }
}
body.viewport-mobile #adminUserList .admin-user-table { min-width: 760px; }
body.viewport-mobile #adminAdminList .admin-user-table { min-width: 580px; }
body.viewport-mobile #tab-admin .admin-dashboard-toolbar { align-items: stretch !important; }
body.viewport-mobile #tab-admin .admin-dashboard-description { flex: 1 1 100%; flex-wrap: wrap; }

/* 後台手機預覽不是獨立 viewport：Bootstrap 的 xl/md 斷點仍看桌面視窗。
   以 mobile-chrome 狀態統一覆寫，真實手機與管理員預覽才會得到相同寬度。 */
body[data-mobile-chrome="1"] #tab-admin,
body[data-mobile-chrome="1"] #tab-admin .admin-panel,
body[data-mobile-chrome="1"] #tab-admin .admin-section {
  min-width: 0;
  max-width: 100%;
}
body[data-mobile-chrome="1"] #adminWidgetGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(var(--ui-control-gap) * 2);
  margin: 0;
}
body[data-mobile-chrome="1"] #adminWidgetGrid > .admin-widget {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
}
body[data-mobile-chrome="1"] #tab-admin .admin-section {
  padding: var(--ui-safe-inset);
  border-radius: var(--ui-radius-square);
}
body[data-mobile-chrome="1"] #tab-admin :is(.form-control, .form-select, .input-group-text, .btn, .visitor-stat-card, .ship-method-card, .ship-method-note, .publish-url-box) {
  border-radius: var(--ui-radius-square) !important;
}
body[data-mobile-chrome="1"] #tab-admin :is(.form-control, .form-select, .input-group) {
  min-width: 0;
  max-width: 100%;
}
body[data-mobile-chrome="1"] #tab-admin .admin-dashboard-description > span:last-child,
body[data-mobile-chrome="1"] #tab-admin .admin-drag-handle > .fa-grip-vertical,
body[data-mobile-chrome="1"] #tab-admin .admin-drag-handle > .d-flex > .fa-grip-vertical {
  display: none;
}
body[data-mobile-chrome="1"] #tab-admin .admin-drag-handle {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--ui-control-gap);
  cursor: default;
}
body[data-mobile-chrome="1"] #tab-admin .admin-drag-handle > .d-flex:first-child {
  min-width: 0;
  flex: 1 1 100%;
}
body[data-mobile-chrome="1"] #tab-admin .admin-section-title {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
body[data-mobile-chrome="1"] #adminVisitorStats > .col-6 {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
}
body[data-mobile-chrome="1"] #adminVisitorStats .visitor-stat-card {
  min-width: 0;
  height: 100%;
  padding: 8px 4px;
}
body[data-mobile-chrome="1"] #adminVisitorStats .visitor-stat-num {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-mobile-chrome="1"] #adminVisitorStats .visitor-stat-label {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-control-gap) !important;
  align-items: end;
}
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div:nth-child(1) { grid-area: 1 / 1; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div:nth-child(3) { grid-area: 1 / 2; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > #btnSavePricing { grid-area: 3 / 1 / 4 / 3; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > #pricingSaveNote { grid-area: 4 / 1 / 5 / 3; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div { min-width: 0; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields .input-group { width: 100% !important; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div:nth-child(2) > .d-flex { min-width: 0; }
body[data-mobile-chrome="1"] #tab-admin .admin-pricing-fields > div:nth-child(2) .input-group { flex: 1 1 auto; }
body[data-mobile-chrome="1"] #tab-admin :is(.admin-pricing-fields, .admin-bank-fields) .btn {
  min-height: var(--ui-control-height);
  white-space: nowrap;
}
body[data-mobile-chrome="1"] #tab-admin .admin-bank-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-admin .admin-bank-fields > div,
body[data-mobile-chrome="1"] #tab-admin .admin-bank-fields > .btn {
  width: 100% !important;
  min-width: 0 !important;
}
body[data-mobile-chrome="1"] #tab-admin :is(.admin-marquee-actions, .admin-bot-actions) {
  flex: 1 1 100%;
  flex-wrap: wrap;
  min-width: 0;
  margin-left: 0 !important;
  gap: var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-admin :is(.admin-marquee-actions, .admin-bot-actions) :is(.btn, .form-select) {
  min-height: var(--ui-control-height);
  white-space: nowrap;
}
body[data-mobile-chrome="1"] #tab-admin .admin-bot-actions .form-select {
  flex: 1 1 120px;
  width: auto !important;
}
body[data-mobile-chrome="1"] #tab-admin [data-widget-id="widget-ai-analytics"] .row > .col-6 {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-admin [data-widget-id="widget-ai-analytics"] .row > .col-md-6 {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-admin .bot-stat-card { padding: 8px 4px; }
body[data-mobile-chrome="1"] #tab-admin .bot-stat-val:not(#botKpiTopPath) {
  font-size: 1.25rem;
  white-space: nowrap;
  word-break: normal;
}
body[data-mobile-chrome="1"] #tab-admin :is(.ship-method-card, .bot-panel-card) {
  min-width: 0;
  padding: var(--ui-safe-inset);
}
body[data-mobile-chrome="1"] #tab-admin .admin-deploy-actions {
  gap: var(--ui-control-gap) !important;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-admin .admin-deploy-actions .publish-url-box {
  width: 100%;
  min-width: 0;
  padding: var(--ui-control-gap);
}
body[data-mobile-chrome="1"] #tab-admin .publish-url-box code { overflow-wrap: anywhere; }
body[data-mobile-chrome="1"] #tab-admin .admin-deploy-actions > .btn {
  flex: 1 1 130px;
  min-height: var(--ui-control-height);
  white-space: nowrap;
}
body[data-mobile-chrome="1"] #tab-admin .table-responsive {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
body[data-mobile-chrome="1"] #tab-admin #pkgTable { min-width: 380px; }
body[data-mobile-chrome="1"] #tab-admin #slsPkgTable { min-width: 520px; }
body[data-mobile-chrome="1"] #tab-admin .bot-table { min-width: 430px; }
body[data-mobile-chrome="1"] #tab-admin .ship-method-card details .row > .col-6 {
  flex: 0 0 100%;
  width: 100%;
}

/* 短手機／分割視窗：聊天訊息區跟隨可視高度，不再強制占 300px。 */
body[data-mobile-chrome="1"] #groupChatBody {
  flex: 0 0 auto;
  height: min(55dvh, 480px) !important;
  max-height: min(55dvh, 480px);
  min-height: min(300px, 35dvh);
}

/* 聊天商品卡與表情操作各占自己的欄位；卡內文字不得穿過 12px 安全內距。 */
body[data-mobile-chrome="1"] #tab-groupchat .chat-msg-row { min-width: 0; width: 100%; }
body[data-mobile-chrome="1"] #tab-groupchat .chat-msg-header {
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px var(--ui-control-gap);
}
body[data-mobile-chrome="1"] #tab-groupchat .chat-bubble-container:has(.chat-card-wrap) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: var(--ui-control-gap);
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-groupchat .chat-bubble-container .chat-card-wrap {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
body[data-mobile-chrome="1"] #tab-groupchat .chat-bubble-container .msg-reaction-trigger {
  grid-column: 2;
  grid-row: 1;
  margin-top: 6px;
}
body[data-mobile-chrome="1"] #tab-groupchat .chat-bubble-container .chat-msg-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
body[data-mobile-chrome="1"] #tab-groupchat .chat-card-wrap > .social-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
body[data-mobile-chrome="1"] #tab-groupchat .social-card-body {
  box-sizing: border-box;
  padding: var(--ui-safe-inset);
}
body[data-mobile-chrome="1"] #tab-groupchat .social-card-body > .d-flex,
body[data-mobile-chrome="1"] #tab-groupchat .social-card-body .flex-grow-1 {
  min-width: 0;
  max-width: 100%;
}
body[data-mobile-chrome="1"] #tab-groupchat .hybrid-payment-badge {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  border-radius: var(--ui-radius-square);
}
body[data-mobile-chrome="1"] #tab-groupchat .group-buy-card .social-card-body .align-items-baseline {
  flex-wrap: wrap;
  min-width: 0;
  gap: 4px var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-groupchat .social-card-progress > .d-flex > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 360px) {
  body[data-mobile-chrome="1"] #tab-groupchat .social-card-body > .d-flex:has(.social-card-img-wrap) {
    flex-wrap: wrap;
  }
}

/* 日間手機：聊天商品卡沿用淺色 surface，價格與付款標籤需改用深色字。
   置頂卡的深色背景是刻意設計，不在此覆寫。 */
body.theme-light[data-mobile-chrome="1"] #tab-groupchat .chat-card-wrap .social-card-price {
  color: #92400e !important;
}
body.theme-light[data-mobile-chrome="1"] #tab-groupchat .chat-card-wrap .hybrid-payment-badge {
  color: #78350f !important;
}
body.theme-light[data-mobile-chrome="1"] #tab-groupchat .chat-card-wrap .hybrid-payment-badge .highlight-amount {
  color: #92400e;
}

/* 後台區塊分隔線原為透明白色，日間淺底上無法辨識。 */
body.theme-light[data-mobile-chrome="1"] #tab-admin .admin-drag-handle {
  border-bottom-color: var(--border);
}

/* 買家報價：真手機與手機預覽使用同一版型，桌面報價維持原樣。 */
body[data-mobile-chrome="1"] :is(#tab-quotes, #quotesList, .quote-card, .quote-card-actions,
  .buyer-quote-action-row, .buyer-quote-price-group, .buyer-quote-btn-group, .quote-change-form) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
body[data-mobile-chrome="1"] #tab-quotes .quote-card {
  width: 100%;
  padding: var(--ui-safe-inset);
}
body[data-mobile-chrome="1"] #tab-quotes .quote-card-date { margin-left: auto; }
body[data-mobile-chrome="1"] #tab-quotes .quote-items-grid { max-width: 100%; }
body[data-mobile-chrome="1"] #tab-quotes .quote-card-actions { gap: var(--ui-control-gap); }
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-control-gap);
}
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-price-group {
  width: 100%;
  overflow-wrap: anywhere;
}
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-btn-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-control-gap);
  width: 100%;
}
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-btn-group > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: var(--ui-control-height);
  margin: 0;
  padding-inline: 4px;
  white-space: nowrap;
  border-radius: var(--ui-radius-square);
}
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-btn-group > .btn-quote-confirm {
  grid-column: 1 / -1;
  grid-row: 1;
}
body[data-mobile-chrome="1"] #tab-quotes .quote-change-form { width: 100%; }
body[data-mobile-chrome="1"] #tab-quotes .quote-change-form textarea { width: 100%; min-width: 0; font-size: 1rem; }
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-change-actions {
  flex-direction: column;
  align-items: stretch !important;
  gap: var(--ui-control-gap) !important;
}
body[data-mobile-chrome="1"] #tab-quotes .buyer-quote-change-actions > .btn { min-height: var(--ui-control-height); }

/* 明細、修改品項、收件資訊：內容在視窗內捲動，表單與操作保留安全距離。 */
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) .modal-content {
  min-width: 0;
  max-height: calc(100dvh - 16px);
  border-radius: var(--ui-radius-square);
}
body.viewport-mobile :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) .modal-content {
  max-height: min(calc(100dvh - 16px), calc(var(--mobile-h, 852px) - 16px));
}
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) :is(.modal-header, .modal-body, .modal-footer) {
  min-width: 0;
  padding-inline: var(--ui-safe-inset);
}
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) .modal-footer {
  gap: var(--ui-control-gap);
  padding-bottom: max(var(--ui-safe-inset), env(safe-area-inset-bottom));
}
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailModal, #quoteEditModal, #orderShipModal) .modal-footer > .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--ui-control-height);
  margin: 0;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
  border-radius: var(--ui-radius-square);
}
body[data-mobile-chrome="1"] :is(#quoteBuyerDetailConfirm, #shipModalConfirm, #btnQuoteEditSave) {
  order: -1;
  flex-basis: 100% !important;
}
body[data-mobile-chrome="1"] :is(#quoteEditModal, #orderShipModal) :is(.form-control, textarea) {
  min-width: 0;
  max-width: 100%;
  font-size: 1rem;
  border-radius: var(--ui-radius-square);
}

/* 商品明細改為「商品／數量與小計」兩層，避免三欄在 320px 擠掉名稱或金額。 */
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table,
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table tbody { display: block; width: 100%; }
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--ui-control-gap);
  padding-block: var(--ui-control-gap);
  border-bottom: 1px solid var(--border);
}
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table td {
  display: block;
  min-width: 0;
  padding: 2px 0;
  border: 0;
}
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table td:first-child { grid-column: 1 / -1; }
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table td:nth-child(2) { text-align: left !important; }
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .buyer-quote-items-table td[data-label]::before {
  content: attr(data-label) " ";
  color: var(--text-muted);
}
body[data-mobile-chrome="1"] #quoteBuyerDetailBody > .d-flex,
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .p-3 .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 2px var(--ui-control-gap);
}
body[data-mobile-chrome="1"] #quoteBuyerDetailBody .p-3 { padding: var(--ui-safe-inset) !important; }

/* 編輯品項改為逐項操作卡，數量與刪除鈕不再與長商品名搶同一行。 */
body[data-mobile-chrome="1"] #quoteEditModal .table-responsive { overflow-x: visible; min-width: 0; }
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table,
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table tbody { display: block; width: 100%; }
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table thead { display: none; }
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ui-control-height);
  gap: var(--ui-control-gap);
  padding: var(--ui-safe-inset);
  margin-bottom: var(--ui-control-gap);
  border: 1px solid var(--border);
  background: var(--surface);
}
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table td {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table td:nth-child(2) { display: flex; align-items: center; gap: var(--ui-control-gap); }
body[data-mobile-chrome="1"] #quoteEditModal .buyer-quote-edit-table td:nth-child(2)::before { content: "數量"; color: var(--text-muted); }
body[data-mobile-chrome="1"] #quoteEditModal .quote-edit-qty { min-height: var(--ui-control-height); }
body[data-mobile-chrome="1"] #quoteEditModal .quote-edit-remove {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
}

/* 「新增品項」共用搜尋視窗也要留在手機內，長商品名可完整換行。 */
body[data-mobile-chrome="1"] #productPickerModal .modal-content {
  min-width: 0;
  max-height: calc(100dvh - 16px);
  border-radius: var(--ui-radius-square);
}
body.viewport-mobile #productPickerModal .modal-content {
  max-height: min(calc(100dvh - 16px), calc(var(--mobile-h, 852px) - 16px));
}
body[data-mobile-chrome="1"] #productPickerModal :is(.modal-header, .modal-body, .modal-footer) {
  min-width: 0;
  padding-inline: var(--ui-safe-inset);
}
body[data-mobile-chrome="1"] #productPickerModal .product-picker-row { min-width: 0; gap: var(--ui-control-gap) !important; }
body[data-mobile-chrome="1"] #productPickerModal .product-picker-row > .flex-grow-1 { min-width: 0; overflow-wrap: anywhere; }
body[data-mobile-chrome="1"] #productPickerModal .product-picker-row .text-truncate {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}