/* Keep the owner terminal in the same centered mobile canvas as the user terminal. */
@media (min-width: 500px) {
  html {
    background: #2f2f2f !important;
    overflow-y: auto !important;
  }

  body:is(
    [data-owner-production-page="true"],
    [data-owner-production-preview="true"],
    [data-payease-production-page="true"]
  ) {
    width: 402px !important;
    min-width: 402px !important;
    max-width: 402px !important;
    min-height: 874px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
    position: relative !important;
  }

  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > header[class*="fixed"],
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > nav[class*="fixed"],
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > footer[class*="fixed"],
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > .fixed,
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > .bottom-nav,
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) header.fixed,
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) nav.fixed,
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) footer.fixed,
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) [class~="fixed"][class*="bottom-"],
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) [class~="fixed"][class*="top-"] {
    width: 402px !important;
    max-width: 402px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* The shared chat shell is fixed by CSS rather than a utility class. */
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > [data-owner-chat-content] {
    width: 402px !important;
    max-width: 402px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Keep standalone conversations within the same centered owner page canvas. */
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) > [data-owner-chat-content][data-shared-im-chat-shell="owner-standalone"] {
    inset: 0 auto 0 50% !important;
    width: min(100%, 402px) !important;
    min-width: 0 !important;
    max-width: 402px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) [class~="w-screen"],
  body:is([data-owner-production-page="true"], [data-owner-production-preview="true"], [data-payease-production-page="true"]) [style*="100vw"] {
    width: 402px !important;
    max-width: 402px !important;
  }
}

.qs-owner-business-icon-slot {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
  line-height: 1;
}

.qs-owner-business-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* Standard bottom navigation (owner): unified visual truth across all pages */
.qs-owner-bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;
  height: 4rem;
  background-color: rgb(255 255 255 / 1);
  border-top: 1px solid rgb(238 238 238 / 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}
nav.qs-owner-bottom-nav {
  justify-content: space-around;
  padding-left: 16px;
  padding-right: 16px;
}
.qs-owner-bottom-nav-inline {
  position: static;
}
.qs-owner-bottom-nav > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(93 63 60 / 1);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.qs-owner-bottom-nav > a:hover {
  background-color: transparent;
}
.qs-owner-bottom-nav > a:active {
  transform: scale(0.9);
}
.qs-owner-bottom-nav > a.text-primary {
  color: rgb(174 0 17 / 1);
}
.qs-owner-bottom-nav .font-label-md {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.qs-owner-bottom-nav .text-label-md {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.qs-owner-bottom-nav .font-bold {
  font-weight: 700;
}

/* Keep short tile labels on one line inside 4/5-column icon grids (owner) */
.grid.grid-cols-4 > div > .text-label-md,
.grid.grid-cols-5 > div > .text-label-md {
  white-space: nowrap;
}

/* 页面状态工具类（owner SPA 通用）：面板显隐与滑入/淡出动画依赖。
   历史 Tailwind 编译缺失导致 hidden/invisible/opacity-0/translate-y-full/pointer-events-none 失效，
   所有依赖这些类的面板/叠加层恒可见。此处按标准 Tailwind 语义补齐。 */
.hidden{display:none}
.invisible{visibility:hidden}
.pointer-events-none{pointer-events:none}
.opacity-0{opacity:0}
.translate-y-full{transform:translateY(100%)}

/* ===== 共享分段胶囊 tab（消息中心风格，业主端通用）=====
   用法：容器 class="qs-owner-tabs"，每个选项 class="qs-owner-tab"，
   选中项额外加 class="active"；数量角标用 .qs-owner-tab-count。
   行为（切换/过滤/计数）由各页面控制器自行绑定。 */
.qs-owner-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px 10px;
  overflow-x: auto;
  background: #f5f5f5;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.qs-standard-tabs {
  /* Asset: 标准 Tab. Keep the legacy qs-owner-tabs class for compatibility. */
}
.qs-owner-tabs::-webkit-scrollbar {
  display: none;
}
.qs-owner-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #6b5b57;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.qs-owner-tab.active {
  background: #ffffff;
  color: #d71920;
  font-weight: 700;
  border-color: #f0f0f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.qs-owner-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #eeeeee;
  color: #6b5b57;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
}

/* ===== 资产库：胶囊导航（v1） =====
   结构：容器 .qs-capsule-nav，直接子项为 button/a；active 为选中态。 */
.qs-capsule-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.qs-capsule-nav::-webkit-scrollbar { display: none; }
.qs-capsule-nav > button,
.qs-capsule-nav > a {
  flex: 0 0 auto;
  padding: 6px 16px;
  border: 1px solid #EEF0F3;
  border-radius: 999px;
  background: #fff;
  color: #5D3F3C;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.qs-capsule-nav > .active,
.qs-capsule-nav > [aria-selected="true"] {
  border-color: #D71920;
  background: #D71920;
  color: #fff;
}
.qs-owner-tab.active .qs-owner-tab-count {
  background: #d71920;
  color: #ffffff;
}

/* 独立聊天页（语音版）桌面端按手机比例：整页 402px 画布居中，外围深色背景 */
@media (min-width: 500px) {
  body:is(
    [data-owner-production-page="true"],
    [data-owner-production-preview="true"],
    [data-payease-production-page="true"]
  ) .qs-im-chat-root-standalone {
    left: 50% !important;
    right: auto !important;
    width: 402px !important;
    min-width: 402px !important;
    max-width: 402px !important;
    transform: translateX(-50%) !important;
  }
}

/* 独立聊天页背景按原设计：整页白底（含消息区与输入区） */
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone,
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone .qs-im-chat-shell,
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone [data-im-role="messages"],
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone [data-im-role="composer"] {
  background: #ffffff !important;
}

/* 独立聊天页发送按钮按主题色（红）显示 */
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone .qs-im-composer-send {
  background: #d71920 !important;
  color: #ffffff;
}

/* 独立聊天页消息区按原始页 1:1：左右 16px（px-container-margin）、行间 20px（space-y-section-gap） */
body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone [data-im-role="messages"] {
  padding: 0 16px !important;
}

body:is(
  [data-owner-production-page="true"],
  [data-owner-production-preview="true"],
  [data-payease-production-page="true"]
) .qs-im-chat-root-standalone [data-im-role="messages"] > * + * {
  margin-top: 20px;
}