.customer-experience-dialog { width: min(580px, 100%); }
.customer-experience-dialog h2 { margin: 0; font-size: 23px; line-height: 1.4; }
.customer-experience-kicker { margin: 0 0 4px; color: var(--color-muted); font-size: 12px; letter-spacing: .04em; }
.customer-experience-dialog .modal-header { align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 18px; }
.customer-experience-dialog .modal-body { padding-top: 20px; }
.customer-experience-dialog [hidden] { display: none !important; }
.customer-experience-dialog .button { min-height: 44px; margin-top: 14px; }
.customer-experience-dialog button:focus-visible, .customer-experience-dialog select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.customer-experience-message { padding: 13px 15px; margin: 16px 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); color: var(--color-text); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.customer-experience-message.is-error { color: var(--color-danger); }
.customer-experience-message.is-success { color: var(--color-success); }
.customer-current-pickup { display: grid; gap: 7px; margin: 18px 0; padding: 15px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); }
.customer-current-pickup span { color: var(--color-muted); font-size: 12px; }
.customer-current-pickup strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.customer-trace-timeline { list-style: none; margin: 24px 0 8px; padding: 0 0 0 7px; }
.customer-trace-timeline li { position: relative; margin-left: 1px; padding: 0 0 24px 22px; border-left: 1px solid var(--color-border); }
.customer-trace-timeline li:last-child { padding-bottom: 4px; border-left-color: transparent; }
.customer-trace-timeline li::before { content: ''; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-muted); box-shadow: 0 0 0 4px var(--color-surface); }
.customer-trace-timeline li:first-child::before { background: var(--color-success); }
.customer-trace-timeline time { display: block; margin-bottom: 6px; color: var(--color-muted); font-size: 12px; }
.customer-trace-timeline p { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 480px) { .customer-experience-modal { padding: 12px; } .customer-experience-dialog { max-height: calc(100dvh - 24px); } .customer-experience-dialog .modal-header { padding: 18px 16px; } .customer-experience-dialog .modal-body { padding: 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .customer-experience-modal *, .customer-experience-modal *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }