/* 统一布局层：最后加载，让聊天、商品、表单和弹窗共享可用空间。 */
:root { --chat-width: 1280px; --chat-gutter: clamp(20px, 3vw, 48px); --sidebar-width: 260px; }
html { -webkit-text-size-adjust: 100%; }
/* 外壳不作为隐形滚动容器，避免聚焦表单或转屏时整页被推走。 */
.app-shell { overflow: clip; }
.app-main, .chat-panel, .composer-wrap, .header-titles { min-width: 0; }
.chat-sidebar { width: var(--sidebar-width); flex-basis: var(--sidebar-width); }
.sidebar-collapsed .chat-sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
.messages, .composer-wrap, .chat-notice { width: min(100%, var(--chat-width)); padding-left: var(--chat-gutter); padding-right: var(--chat-gutter); }
.messages { padding-top: 28px; padding-bottom: 16px; }
.composer-wrap { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.app-header { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.conversation-title { max-width: 100%; }
.message-assistant .message-bubble { width: min(100%, 960px); max-width: 100%; }
.message[data-reply-layout="panel"] > .message-bubble { width: 100%; max-width: 100%; }
.message[data-reply-layout="text"] > .message-bubble { width: min(100%, 960px); max-width: 100%; }
.conversation-prose { max-width: 78ch; }
.message-user .message-bubble { max-width: min(85%, 760px); }
.message-bubble, .structured-reply, .reply-facts dd { overflow-wrap: anywhere; }
.quick-actions { overscroll-behavior-x: contain; min-width: 0; }
.quick-action { min-height: 44px; }
.advisor-actions, .preference-actions, .budget-retry { flex-wrap: wrap; }
.advisor-actions .quick-action, .preference-actions .quick-action, .budget-retry .quick-action { white-space: normal; max-width: 100%; }

/* 商品随实际容器宽度换列，收起侧栏后也会自动重排。 */
.product-cards, .activity-cards { width: 100%; max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; align-items: start; }
.product-cards:has(> :only-child), .activity-cards:has(> :only-child) { max-width: 520px; }
/* 推荐区按自己的实际宽度分 1/2/3 列，不依赖设备名称，侧栏变化后自动重排。
   最小 300px；宽屏下每列至少占三分之一，避免被挤成四张小卡。 */
.product-cards, .selection-candidates {
  display: grid; width: 100%; min-width: 0; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - 28px) / 3))), 1fr));
}
.selection-candidates:has(> :only-child) { max-width: 520px; }
.product-card { width: 100%; min-width: 0; border-radius: 16px; }
.product-link { padding: 16px 16px 12px; }
.product-main { gap: 14px; }
.product-image { width: 76px; height: 76px; flex-basis: 76px; border-radius: 10px; }
.product-title { font-size: 15px; line-height: 1.6; }
.product-reason { font-size: 12px; }
.product-price { font-size: 24px; }
.price-caption, .product-original-price { font-size: 11px; }
.product-bottom { min-height: 44px; }
.product-tags { top: 12px; }
.product-number { top: 12px; }
.product-detail-link { display: block; width: fit-content; margin-left: auto; min-height: 44px; padding-left: 12px; padding-right: 14px; }
.activity-card { min-width: 0; padding: 16px; }
.activity-card img { width: 76px; height: 76px; flex-basis: 76px; }
.reply-outfit { width: 100%; }
.outfit-form { max-width: 760px; }
.outfit-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.outfit-item .product-card { width: 100%; }
.outfit-heading { flex-wrap: wrap; }
.table-scroll { width: 100%; overscroll-behavior-x: contain; }
.report-table { font-size: 13px; }
.welcome-card { max-width: 740px; }
.welcome-card .example-queries { max-width: 560px; }
.welcome-card .prompt-chip { min-height: 54px; font-size: 14px; }
/* 宽屏欢迎页将角色和入口并排，避免键盘输入区挤掉四个功能入口。 */
@media (min-width: 900px) {
  .welcome-card { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); column-gap: 36px; text-align: left; margin-top: clamp(12px, 4vh, 48px); }
  .welcome-card .capability-bubble { grid-column: 1; grid-row: 1; }
  .welcome-avatar-stage { grid-column: 1; grid-row: 2 / 6; height: 260px; align-self: center; }
  .welcome-card > .welcome-eyebrow { grid-column: 2; grid-row: 2; align-self: end; }
  .welcome-title { grid-column: 2; grid-row: 3; }
  .welcome-card > .welcome-description { grid-column: 2; grid-row: 4; }
  .welcome-card .example-queries { grid-column: 2; grid-row: 5; width: 100%; margin: 16px 0 0; align-self: start; }
}

/* 竖屏视频内人物本身带有留白：放大实际画幅、收窄左列，把气泡放入
   视频顶部留白。只在视频解码就绪后启用，图片模式与播放失败回退保持原布局。 */
@media (min-width: 1200px) {
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) {
    --welcome-video-height: clamp(300px, 42vh, 360px);
    max-width: 720px;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) repeat(4, auto) minmax(0, 1fr);
    column-gap: 24px;
  }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .welcome-avatar-stage {
    grid-column: 1; grid-row: 1 / 7; width: 100%; height: var(--welcome-video-height);
    margin: 0; align-self: center;
  }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .capability-bubble {
    grid-column: 1; grid-row: 1 / 7; align-self: start; justify-self: center; z-index: 2;
    margin: max(0px, calc((var(--welcome-video-height) - 260px) * .15)) 0 0;
  }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .welcome-eyebrow { grid-row: 2; }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .welcome-title { grid-row: 3; }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .welcome-description { grid-row: 4; }
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) > .example-queries { grid-row: 5; }
}
@media (min-width: 1200px) and (max-height: 620px) {
  .welcome-card:has(#welcome-avatar[data-video-renderer="ready"]) {
    --welcome-video-height: 260px; margin-top: 8px;
  }
}

/* 平板使用抽屉侧栏，与 chat_interactions.js 的 1199px 分界保持一致。 */
@media (max-width: 1199px) {
  .chat-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: min(86vw, 320px); height: var(--app-height, 100dvh); transform: translateX(-100%); visibility: hidden; transition: transform .2s;
    padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); }
  .sidebar-collapsed .chat-sidebar { margin-left: 0; }
  .sidebar-open .chat-sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 29; width: 100%; height: 100%; border-radius: 0; background: #171c3559; backdrop-filter: blur(3px); }
  .new-chat-button kbd { display: none; }
  .message-user .message-actions { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --chat-gutter: clamp(24px, 4vw, 44px); }
  .app-header { min-height: 68px; padding-top: max(8px, env(safe-area-inset-top)); }
  .composer-wrap { padding-top: 10px; }
}
@media (min-width: 1600px) {
  :root { --chat-width: 1440px; --sidebar-width: 280px; }
  .reply-summary, .conversation-prose, .user-message-text { font-size: 16px; }
}

/* 桌面输入区独立限宽；消息列不随正在渲染的业务内容改变宽度。 */
@media (min-width: 1200px) {
  .composer-wrap, .chat-notice {
    width: min(100%, 900px); padding-left: 24px; padding-right: 24px;
  }
  .composer-wrap { padding-top: 4px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .composer-wrap .quick-actions { gap: 6px; padding: 0 0 6px; }
  .composer-wrap .quick-action { min-height: 34px; padding: 5px 10px; border-radius: 9px; }
  .composer { padding: 12px 16px 10px; border-radius: 20px; }
  .composer .message-input { height: 26px; min-height: 26px; max-height: 144px; font-size: 15px; line-height: 26px; }
  /* 焦点由外层输入容器展示，避免组件默认边框挤出单行滚动条。 */
  .composer .message-input, .composer .message-input:focus { border: 0; outline: none; box-shadow: none; }
  .composer-footer { margin-top: 4px; }
  .composer-mode { min-height: 36px; padding: 6px 8px; }
  .composer-actions .icon-button, .composer-actions .send-button { width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; }
  .composer-disclaimer { margin: 6px 0 0; }
}
/* 大屏触控设备保留足够的点击面积。 */
@media (min-width: 1200px) and (pointer: coarse) {
  .composer-wrap .quick-action, .composer-mode { min-height: 44px; }
  .composer-actions .icon-button, .composer-actions .send-button { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  .composer .message-input { font-size: 16px; }
}

/* 手机留出完整触控区域，表单字号避免 iOS 聚焦时自动放大。 */
@media (max-width: 767px) {
  :root { --chat-gutter: 16px; }
  .app-header { gap: 4px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .app-header .icon-button { width: 44px; height: 44px; flex-basis: 44px; padding: 11px; }
  .header-left { gap: 3px; }
  .header-actions { gap: 0; }
  .header-titles { flex: 1; }
  .conversation-title { font-size: 14px; }
  .messages { padding-top: 18px; }
  .message { margin-bottom: 22px; }
  .message-assistant .message-bubble { padding: 14px 12px; border-radius: 18px; }
  .message-user .message-bubble { max-width: 92%; }
  .product-cards, .activity-cards, .selection-candidates { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .product-link { padding: 12px; }
  .product-main { gap: 10px; }
  .product-image { width: 64px; height: 64px; flex-basis: 64px; }
  .product-title { font-size: 14px; }
  .product-price { font-size: 22px; }
  .activity-card { padding: 12px; }
  .composer-wrap { padding-top: 5px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .quick-actions { gap: 7px; }
  .quick-action { padding: 8px 11px; }
  .send-button { width: 44px; height: 44px; min-height: 44px; }
  .welcome-avatar-stage { width: min(240px, 100%); height: clamp(150px, 28dvh, 240px); }
  .welcome-card .example-queries { gap: 8px; }
  .welcome-card .prompt-chip { min-height: 48px; font-size: 12px; padding: 10px; }
  .reply-facts { padding: 12px; }
  .reply-facts > div { gap: 8px; }
  .reply-facts dt { min-width: 4em; max-width: 6em; }
  .metric-card { padding: 12px; }
  .metric-value { font-size: 21px; }
  .outfit-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 379px) {
  :root { --chat-gutter: 10px; }
  .capability-header-entry { display: none; }
  .header-subtitle { display: none; }
  .product-image { width: 56px; height: 56px; flex-basis: 56px; }
  .outfit-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .session-search input, .outfit-input, .answer-feedback select, .answer-feedback textarea, .ad-value, .pl-url { font-size: 16px; }
}

/* 所有模态框都根据当前可见高度收缩，长内容在框内滚动。 */
.pd-dialog, .ad-dialog { height: calc(var(--app-height, 100dvh) * .9); max-height: calc(var(--app-height, 100dvh) * .9); }
.pd-scroll, .ad-body, .capability-content { min-width: 0; min-height: 0; }
.pl-dialog, #session-delete-dialog { max-height: calc(var(--app-height, 100dvh) * .9); overflow-y: auto; overscroll-behavior: contain; }
#capability-dialog { height: min(790px, calc(var(--app-height, 100dvh) * .9)); max-height: calc(var(--app-height, 100dvh) * .9); }
.pd-close, .ad-close { width: 44px; height: 44px; min-height: 44px; flex-shrink: 0; }
.pd-footer { min-width: 0; }
.pd-footer-actions { min-width: 0; }
.ad-status, .pd-shop > div { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 800px) {
  .pd-footer { grid-template-columns: minmax(0, 1fr) minmax(220px, 400px); }
}
@media (max-width: 479px) {
  .pd-dialog, .ad-dialog { width: 94vw; max-width: 94vw; border-radius: 20px; }
  .pd-tabs { justify-content: space-around; gap: 8px; }
  .pd-tabs button { min-height: 44px; padding-left: 8px; padding-right: 8px; }
  .delete-dialog-actions { gap: 8px; }
  .delete-dialog-actions button { flex: 1; min-width: 0; }
}
/* 横屏手机与软键盘：保留对话空间，操作区不被挤到屏幕外。 */
@media (max-height: 520px) {
  .welcome-avatar-stage { height: 140px; }
  .composer-wrap { padding-top: 2px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .quick-actions { padding-bottom: 4px; }
  .composer { padding-top: 8px; padding-bottom: 6px; }
  .composer-footer { margin-top: 0; }
  .composer-disclaimer { display: none; }
  .pd-header { padding-top: 4px; }
  .pd-footer { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .pd-footer-note { display: none; }
  .capability-hero { display: none; }
}
html[data-keyboard-open="true"] .composer-wrap .quick-actions,
html[data-keyboard-open="true"] .composer-disclaimer { display: none; }
html[data-keyboard-open="true"] .message-input { max-height: 80px; }