.materials-panel[data-active-type="layer-ai"], .materials-panel[data-active-type="resource-library"] { overflow: hidden; }
.materials-grid.design-ai-panel { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; padding: 16px; overflow: hidden; }
.design-ai-heading { font-size: 18px; font-weight: 700; margin: 0; }
.design-ai-messages, .design-ai-library { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.design-ai-messages { overflow-anchor: none; }
.design-ai-messages .ai-agent-bubble { font-size: 14px; padding: 12px; overflow-wrap: anywhere; }
.design-ai-composer { flex: 0 0 auto; border-top: 1px solid #e7e3f2; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 55%; overflow-y: auto; }
.design-ai-input-box { flex: 0 0 auto; border: 1px solid #d9d2ec; border-radius: 16px; padding: 10px; margin: 3px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
/* 复用首页 AI 入口的浅紫光晕，在滚动侧栏中为外圈留出空间。 */
.design-ai-input-box:hover, .design-ai-input-box:focus-within { border-color: rgba(132, 111, 235, .46); box-shadow: 0 18px 38px rgba(15, 23, 42, .07), 0 0 0 3px rgba(132, 111, 235, .14); }
@supports (color: color-mix(in oklch, white, black)) {
  .design-ai-input-box:hover, .design-ai-input-box:focus-within { border-color: color-mix(in oklch, var(--ring, #846feb) 46%, white); box-shadow: 0 18px 38px rgba(15, 23, 42, .07), 0 0 0 3px color-mix(in oklch, var(--ring, #846feb) 14%, transparent); }
}
.design-ai-input { position: relative; display: block; width: 100%; min-height: 82px; max-height: 180px; overflow-y: auto; border: 0; border-radius: 0; padding: 0 0 8px; font-size: 14px; line-height: 1.7; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.design-ai-input, .design-ai-input:focus, .design-ai-input:focus-visible { outline: none; box-shadow: none; }
.design-ai-input[data-empty="true"]::before { position: absolute; top: 0; left: 0; right: 0; content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
.design-ai-input[aria-disabled="true"] { cursor: default; }
.design-ai-input .design-ai-chip, .ai-agent-bubble > .design-ai-chip { vertical-align: middle; margin: 1px 2px; white-space: nowrap; }
.design-ai-attachment { width: 48px; height: 48px; object-fit: contain; border: 1px solid #e6e1f0; border-radius: 8px; }
/* 图片 chip 沿用 AI Agent 的紧凑尺寸，基图与参考照片使用明确标签。 */
.design-ai-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; }
.design-ai-chips[hidden] { display: none; }
.design-ai-chip { display: inline-flex; align-items: center; height: 22px; min-width: 0; max-width: min(168px, 100%); border: 1px solid rgba(203, 213, 225, .92); border-radius: 8px; background: #fff; color: #39364c; box-shadow: 0 1px 2px #23203908; overflow: hidden; }
.design-ai-chip-trigger { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 100%; padding: 0 6px 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.design-ai-chip .design-ai-attachment { width: 18px; height: 18px; flex: 0 0 18px; border: 0; border-radius: 4px; object-fit: cover; }
.design-ai-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; }
.design-ai-chip-remove { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; flex: 0 0 20px; border: 0; padding: 0; background: transparent; color: #777387; font-size: 16px; cursor: pointer; }
.design-ai-chip-remove:disabled { opacity: .48; cursor: default; }
.design-ai-chip:focus-within { border-color: #9680de; }
.design-ai-chip-trigger:focus-visible, .design-ai-chip-remove:focus-visible { outline: 1px solid #9680de; outline-offset: -2px; }
.design-ai-chip-preview { position: fixed; z-index: 110; padding: 8px; box-sizing: border-box; border: 1px solid #e7e3f2; border-radius: 12px; background: #fff; pointer-events: none; }
.design-ai-chip-preview .design-ai-image { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.ai-agent-bubble .design-ai-chips { margin-top: 8px; margin-bottom: 0; }
.design-ai-composer-actions, .design-ai-resource-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.design-ai-resource-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.design-ai-resource-actions .design-ai-button { width: 100%; min-width: 0; min-height: 54px; margin: 0; line-height: 18px; overflow-wrap: anywhere; }
.design-ai-target-choices { margin-top: 8px; }
.design-ai-target-choices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.design-ai-target-choices-grid .design-ai-button { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.design-ai-composer-actions { align-items: center; justify-content: space-between; padding-top: 8px; }
/* 沿用首页 AI 输入区的色板与胶囊按钮，缩小到侧栏尺寸。 */
.design-ai-composer-button { display: inline-flex; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--bm-border, #e2e2f2); border-radius: 9999px; background: var(--bm-primary-soft, #eeeafd); color: var(--secondary-foreground, #3b3464); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms; }
.design-ai-composer-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.design-ai-composer-button:hover:not(:disabled) { border-color: var(--bm-primary, #846feb); }
.design-ai-composer-button:focus-visible { outline: 2px solid var(--bm-focus-ring, #846feb); outline-offset: 2px; }
.design-ai-composer-button--send:not(:disabled) { border-color: var(--bm-primary, #846feb); background: var(--bm-primary, #846feb); color: var(--bm-primary-foreground, #fff); }
.design-ai-composer-button--send:hover:not(:disabled) { border-color: var(--bm-primary-hover, #6a57d1); background: var(--bm-primary-hover, #6a57d1); }
.design-ai-composer-button:disabled { color: var(--bm-text-soft, #77768d); cursor: not-allowed; }
.design-ai-composer-button--send:disabled { border-color: transparent; }
.design-ai-button { border: 1px solid #d9d2ec; border-radius: 8px; padding: 8px 10px; font-size: 13px; background: #f6f3ff; color: #654cbb; cursor: pointer; }
.design-ai-button:hover:not(:disabled) { background: #ede7ff; }
.design-ai-button:focus-visible { outline: 2px solid #8065df; outline-offset: 2px; }
.design-ai-button:disabled { opacity: .48; cursor: default; }
.design-ai-quick { position: fixed; z-index: 65; box-shadow: 0 3px 12px #30234c22; background: #fff; }
.design-ai-quick[hidden] { display: none; }
.design-ai-image { display: block; width: 100%; height: auto; max-height: 220px; aspect-ratio: auto 1 / 1; object-fit: contain; border-radius: 8px; }
.design-ai-image, .design-ai-attachment { background-color: #fff; background-image: conic-gradient(#efedf5 25%, transparent 0 50%, #efedf5 0 75%, transparent 0); background-size: 12px 12px; }
.design-ai-result, .design-ai-resource { padding: 12px; border: 1px solid #e7e3f2; border-radius: 12px; margin-bottom: 14px; }
.design-ai-generation-preview { position: relative; isolation: isolate; overflow: hidden; height: 200px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f1f1f1; }
.design-ai-generation-preview .ai-agent-generation-placeholder { --ai-agent-dot-field-width: 78%; --ai-agent-dot-field-height: 72%; --ai-agent-dot-field-top: 50%; --ai-agent-dot-column-gap: 4px; --ai-agent-dot-row-gap: 4px; }
.design-ai-generation-resolution { position: absolute; z-index: 2; top: 10px; right: 10px; max-width: calc(100% - 20px); overflow-wrap: anywhere; padding: 4px 7px; border: 1px solid #e5e7eb; border-radius: 6px; background: #ffffffd9; color: #6b7280; font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.design-ai-generation-label { margin: 10px 0 0; width: fit-content; max-width: 100%; color: #6a57a1; font-size: 13px; font-weight: 600; line-height: 1.6; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .design-ai-generation-label { background: linear-gradient(110deg, #6a57a1 35%, #c0aef1 48%, #6a57a1 61%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: design-ai-generation-shine 3s ease-in-out infinite; }
}
@keyframes design-ai-generation-shine { 0%, 18% { background-position: 100% 0; } 82%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .design-ai-generation-label { animation: none; } }
@media (forced-colors: active) { .design-ai-generation-label { background: none; color: CanvasText; } }
.design-ai-generation .design-ai-muted { margin-top: 8px; }
.design-ai-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.design-ai-result-actions .design-ai-button { width: 100%; min-width: 0; min-height: 38px; margin: 0; }
.design-ai-resource-name { font-weight: 600; font-size: 14px; margin: 8px 0 4px; overflow-wrap: anywhere; }
.design-ai-muted { color: #777387; font-size: 12px; line-height: 1.65; margin: 0; }
.design-ai-empty { color: #777387; font-size: 14px; line-height: 1.8; padding: 20px 0; }
.design-ai-error { color: #a83434; padding: 10px; background: #fff1f1; border-radius: 8px; font-size: 13px; }
.design-ai-notice, .design-ai-task { font-size: 13px; color: #6a57a1; padding: 8px; background: #f3efff; border-radius: 8px; }
.materials-panel:not([data-active-type="layer-ai"]):not([data-active-type="resource-library"]) .design-ai-panel { display: grid; height: auto; }
@media (max-width: 767px) {
  .materials-grid.design-ai-panel { min-height: 48vh; height: calc(72dvh - 74px); padding: 12px; }
  .design-ai-composer { max-height: 55%; }
  .design-ai-quick { z-index: 39; }
}

.bm-mobile-layout #materialsPanel[data-active-type="layer-ai"],
.bm-mobile-layout #materialsPanel[data-active-type="resource-library"] {
  display: flex;
  flex-direction: column;
  height: min(76dvh, 680px) !important;
  max-height: calc(100dvh - 140px);
  overflow: hidden !important;
}
.bm-mobile-layout #materialsPanel .mobile-sheet-header { flex: 0 0 auto; }
.bm-mobile-layout #materialsPanel .materials-grid.design-ai-panel {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 6px 0 0;
}
.bm-mobile-layout .design-ai-composer { max-height: 62%; }
.bm-mobile-layout .design-ai-heading { display: none; }