.experience-assistant { margin-top: 22px; padding: 24px; scroll-margin-top: 24px; }
.experience-assistant .card-heading { align-items: flex-start; gap: 16px; }
.experience-assistant .card-heading > div { display: block; min-width: 0; }
.experience-assistant .small-muted, .jd-screenshot-dialog .small-muted, .jd-screenshot-actions .small-muted { white-space: normal; overflow-wrap: anywhere; }
.experience-assistant h2, .experience-assistant h3 { margin: 0 0 10px; }
.experience-assistant h2 { font-size: 18px; font-weight: 650; }
.experience-assistant h3 { font-size: 15px; }
.assistant-material label { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; }
.assistant-material select { width: 100%; min-width: 0; padding: 11px 12px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--settings-control, var(--paper)); }
.assistant-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; }
.assistant-conversation, .assistant-material { min-width: 0; }
.assistant-messages { min-height: 200px; max-height: 460px; overflow-y: auto; padding: 4px 8px 12px 0; }
.assistant-message { padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; background: var(--soft); border: 1px solid var(--line); }
.assistant-message strong { font-size: 12px; color: var(--muted); }
.assistant-message p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.assistant-message.is-user { background: var(--theme-soft); margin-left: 24px; }
.assistant-material .material-fields { display: grid; gap: 12px; margin: 12px 0; }
.assistant-material :is(input, textarea) { margin: 0; }
.experience-assistant textarea, .jd-screenshot-dialog textarea { width: 100%; resize: vertical; }
.experience-assistant form label { display: block; margin-bottom: 8px; }
.experience-assistant .materials-actions { margin-top: 10px; }
.jd-screenshot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 7px 0; }
.jd-screenshot-actions button { font-size: 12px; }
.jd-screenshot-dialog { width: min(820px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; }
.screenshot-preview { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; margin-top: 18px; }
.screenshot-preview img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; }
.screenshot-preview label { display: grid; gap: 8px; min-width: 0; }
.screenshot-preview:not(:has(img:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.screenshot-picker input { width: 100%; min-width: 0; }
.screenshot-picker { display: grid; gap: 8px; }
@media (max-width: 760px) { .assistant-layout, .screenshot-preview { grid-template-columns: minmax(0, 1fr); } .assistant-messages { max-height: 360px; } .experience-assistant { padding: 17px; } .experience-assistant .card-heading { flex-wrap: wrap; } }