.dpd-modal-open { overflow: hidden; }
.dpd-modal-shell[hidden] { display: none !important; }
.dpd-modal-shell { inset: 0; position: fixed; z-index: 2000; }
.dpd-helper-launcher { bottom: 18px; position: fixed; right: 18px; z-index: 1900; }
/* Hide the floating Helper launcher whenever the modal is open (all viewports) — it just overlaps the open window. */
body.dpd-modal-open .dpd-helper-launcher { display: none !important; }
.dpd-helper-launcher__button { align-items: center; background: linear-gradient(180deg, #000000 0%, #000000 100%); border: 1px solid rgba(255, 242, 0, 0.42); border-radius: 999px; box-shadow: 0 14px 28px rgba(9, 15, 22, 0.24); color: #fff; display: inline-flex; gap: 10px; min-height: 54px; padding: 0 16px 0 12px; position: relative; }
.dpd-helper-launcher__pulse { background: rgba(255, 242, 0, 0.28); border-radius: 999px; inset: -6px; opacity: 0.42; pointer-events: none; position: absolute; z-index: 0; }
.dpd-helper-launcher__icon, .dpd-helper-launcher__copy { position: relative; z-index: 1; }
.dpd-helper-launcher__icon { align-items: center; background: #fff200; border-radius: 50%; color: #000000; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.dpd-helper-launcher__copy { display: grid; gap: 2px; justify-items: start; }
.dpd-helper-launcher__copy strong, .dpd-helper-launcher__copy span { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-helper-launcher__copy strong { font-size: 11px; }
.dpd-modal-backdrop { background: rgba(8, 12, 18, 0.58); border: 0; inset: 0; position: absolute; width: 100%; }
.dpd-modal-dialog { background: linear-gradient(180deg, #f8fafc 0%, #eef2f5 100%); border-left: 1px solid rgba(20, 26, 33, 0.08); box-shadow: -24px 0 48px rgba(9, 15, 22, 0.18); height: 100%; margin-left: auto; max-width: min(920px, 100vw); overflow: hidden; position: relative; width: 100%; }
.dpd-modal-header { align-items: center; background: rgba(248, 250, 252, 0.94); border-bottom: 1px solid rgba(17, 22, 27, 0.08); display: flex; justify-content: space-between; padding: 22px 28px; }
.dpd-modal-kicker { color: #6b747d; display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.24em; margin-bottom: 8px; text-transform: uppercase; }
.dpd-modal-header h2 { color: #14191f; font-size: clamp(24px, 2vw, 34px); letter-spacing: 0.06em; margin: 0; }
.dpd-modal-close { align-items: center; background: #000000; border: 0; border-radius: 999px; color: #fff; display: inline-flex; height: 44px; justify-content: center; width: 44px; }
.dpd-modal-body { height: calc(100% - 96px); overflow: auto; padding: 28px; }
.dpd-modal-loading { align-items: center; color: #47515b; display: flex; font-size: 14px; font-weight: 700; height: 100%; justify-content: center; letter-spacing: 0.18em; min-height: 180px; text-transform: uppercase; }
.dpd-modal-module { display: grid; gap: 20px; }
.dpd-modal-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpd-modal-card { background: #fff; border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 24px; box-shadow: 0 18px 36px rgba(11, 19, 29, 0.08); padding: 24px; }
.dpd-modal-card--content { grid-column: 1 / -1; }
.dpd-modal-card h4 { color: #12171d; font-size: 18px; letter-spacing: 0.08em; margin: 0 0 10px; text-transform: uppercase; }
.dpd-modal-card p, .dpd-modal-card li, .dpd-modal-richtext { color: #55606b; line-height: 1.65; }
.dpd-modal-button { align-items: center; background: #000000; border: 1px solid #000000; border-radius: 999px; color: #fff; display: inline-flex; font-size: 12px; font-weight: 700; gap: 8px; letter-spacing: 0.22em; min-height: 46px; padding: 0 20px; text-decoration: none; text-transform: uppercase; }
.dpd-modal-button--secondary { background: #ffffff; border-color: rgba(17, 22, 27, 0.16); color: #000000; }
.dpd-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dpd-modal-identity { align-items: center; display: flex; gap: 16px; }
.dpd-modal-identity .dpd-user-badge { box-shadow: 0 0 0 2px rgba(255, 242, 0, 0.44); }
.dpd-modal-identity h3 { color: #000000; font-size: 28px; letter-spacing: 0.06em; margin: 0 0 4px; }
.dpd-modal-identity p { margin: 0; }
.acc-avatar-grid--modal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.acc-avatar-grid--modal .acc-avatar-option { align-items: center; display: grid; gap: 10px; justify-items: center; min-height: 118px; padding: 16px 12px; }
.acc-avatar-caption { color: #47515b; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; line-height: 1.4; text-align: center; text-transform: uppercase; }
.acc-avatar-option--mark { background: linear-gradient(180deg, #fffefa 0%, #f6f0e4 100%); border: 1px solid #ddd2bc; border-radius: 18px; }
.acc-avatar-option--mark .acc-avatar-icon, .acc-avatar-option--mark .acc-avatar-initials { align-items: center; background: linear-gradient(180deg, #151b21 0%, #0d1116 100%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 24px rgba(17, 22, 27, 0.12); color: #f2d337; display: inline-flex; height: 52px; justify-content: center; width: 52px; }
.acc-avatar-option--mark .acc-avatar-initials { font-size: 15px; }
.acc-avatar-option--mark .acc-avatar-icon i { font-size: 18px; }
.acc-avatar-option--mark.is-active { background: linear-gradient(180deg, #fff8dd 0%, #f6ebc8 100%); border-color: #e0c66c; box-shadow: 0 18px 30px rgba(28, 20, 9, 0.14); }
.acc-palette-swatches--modal { gap: 12px; }
.dpd-modal-helper { margin-top: 14px; }
.dpd-support-hero { align-items: end; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); }
.dpd-support-hero h3 { color: #12171d; font-size: clamp(28px, 3vw, 40px); letter-spacing: 0.04em; margin: 0 0 10px; text-transform: uppercase; }
.dpd-support-hero__copy p { margin: 0; }
.dpd-support-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dpd-support-meta__item { background: rgba(17, 22, 27, 0.04); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 18px; display: grid; gap: 4px; min-width: 180px; padding: 12px 14px; }
.dpd-support-meta__item strong { color: #12171d; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.dpd-support-mode-switch { display: grid; gap: 10px; justify-items: stretch; }
.dpd-support-conversation-state { align-items: center; background: linear-gradient(135deg, #101820 0%, #162318 100%); border: 1px solid rgba(255, 242, 0, 0.42); border-radius: 24px; box-shadow: 0 18px 34px rgba(8, 13, 18, 0.16); color: #ffffff; display: flex; gap: 20px; justify-content: space-between; margin: 0 16px; padding: 18px 28px; }
.dpd-support-conversation-state[hidden] { display: none !important; }
.dpd-support-conversation-state__copy { display: grid; gap: 5px; min-width: 0; }
.dpd-support-conversation-state__copy span { color: #fff200; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-conversation-state__copy strong { color: #ffffff; font-size: 15px; line-height: 1.35; }
.dpd-support-conversation-state__copy small { color: rgba(255, 255, 255, 0.72); font-size: 12px; line-height: 1.4; }
.dpd-support-conversation-state__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dpd-support-conversation-state .dpd-modal-button { min-height: 38px; padding: 0 14px; }
.dpd-support-panel { display: grid; gap: 20px; }
.dpd-support-guide-shell { display: grid; gap: 18px; }
.dpd-support-guide-hero { display: grid; gap: 8px; }
.dpd-support-guide-hero h4 { margin: 0; }
.dpd-support-guide-hero p { margin: 0; }
.dpd-support-guide-steps { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.dpd-support-guide-step { align-items: flex-start; background: rgba(17, 22, 27, 0.03); border: 1px solid rgba(17, 22, 27, 0.07); border-radius: 20px; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
.dpd-support-guide-step__count { align-items: center; background: #fff200; border-radius: 50%; color: #000000; display: inline-flex; font-size: 12px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.dpd-support-guide-step strong { color: #12171d; display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 4px; text-transform: uppercase; }
.dpd-support-guide-step p { color: #55606b; line-height: 1.58; margin: 0; }
.dpd-support-guide-sections { display: grid; gap: 14px; }
.dpd-support-guide-card { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(17, 22, 27, 0.07); border-radius: 22px; display: grid; gap: 12px; padding: 18px; }
.dpd-support-guide-links { display: grid; gap: 10px; }
.dpd-support-guide-link { background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(17, 22, 27, 0.06); border-radius: 16px; display: grid; gap: 4px; padding: 14px; text-decoration: none; }
.dpd-support-guide-link strong { color: #12171d; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dpd-support-guide-link span { color: #58626c; line-height: 1.55; }
.dpd-support-assistant { display: grid; gap: 18px; }
.dpd-support-assistant__intro h4 { margin-bottom: 8px; }
.dpd-support-assistant__result-card { background: linear-gradient(180deg, #fdfefe 0%, #f2f7fb 100%); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 22px; display: grid; gap: 14px; padding: 18px; }
.dpd-support-assistant__eyebrow, .dpd-support-routing-preview__eyebrow { color: #6b747d; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-assistant__result-card h5 { color: #12171d; font-size: 24px; letter-spacing: 0.05em; margin: 0; text-transform: uppercase; }
.dpd-support-assistant__result-card p, .dpd-support-assistant__empty p { margin: 0; }
.dpd-support-assistant__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dpd-support-assistant__actions .dpd-modal-button { min-width: 0; }
.dpd-support-assistant__facts { display: grid; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.dpd-support-assistant__sections { display: grid; gap: 12px; margin-top: 16px; }
.dpd-support-assistant__section { background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 18px; display: grid; gap: 10px; padding: 14px 16px; }
.dpd-support-assistant__section-title { color: #596573; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-assistant__section-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.dpd-support-assistant__section-item { border-top: 1px solid rgba(17, 22, 27, 0.08); display: grid; gap: 4px; padding-top: 10px; }
.dpd-support-assistant__section-item:first-child { border-top: 0; padding-top: 0; }
.dpd-support-assistant__section-item span { color: #12171d; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dpd-support-assistant__section-item small { color: #47515b; font-size: 14px; line-height: 1.55; }
.dpd-support-assistant__fact { align-items: start; border-top: 1px solid rgba(17, 22, 27, 0.08); display: grid; gap: 6px; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); padding-top: 10px; }
.dpd-support-assistant__fact strong { color: #596573; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; margin: 0; overflow-wrap: anywhere; text-transform: uppercase; }
.dpd-support-assistant__fact span { color: #12171d; font-size: 14px; line-height: 1.5; }
.dpd-support-assistant__empty { background: rgba(17, 22, 27, 0.03); border: 1px dashed rgba(17, 22, 27, 0.12); border-radius: 22px; padding: 18px; }
.dpd-support-assistant__empty strong { color: #12171d; display: block; font-size: 16px; letter-spacing: 0.08em; margin-bottom: 8px; text-transform: uppercase; }
.dpd-support-chat-thread { display: grid; gap: 14px; }
.dpd-support-chat-bubble { border-radius: 26px; display: grid; gap: 12px; padding: 18px 20px; }
.dpd-support-chat-bubble--user { background: linear-gradient(135deg, #000000 0%, #1a2128 100%); box-shadow: 0 18px 30px rgba(10, 14, 18, 0.16); justify-self: end; max-width: min(78%, 620px); }
.dpd-support-chat-bubble--user .dpd-support-chat-bubble__eyebrow { color: rgba(255, 255, 255, 0.58); }
.dpd-support-chat-bubble--user p { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.45; margin: 0; }
.dpd-support-chat-bubble--assistant { background: linear-gradient(180deg, #fffef8 0%, #f4f8fb 100%); border: 1px solid rgba(17, 22, 27, 0.08); box-shadow: 0 20px 34px rgba(12, 18, 24, 0.09); }
.dpd-support-chat-bubble__meta { align-items: start; display: grid; gap: 10px; }
.dpd-support-chat-bubble__eyebrow { color: #6b747d; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-chat-bubble__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dpd-support-chat-bubble__tag { align-items: center; background: #fff200; border-radius: 999px; color: #000000; display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; min-height: 28px; padding: 0 12px; text-transform: uppercase; }
.dpd-support-chat-bubble__tag--muted { background: rgba(17, 22, 27, 0.06); color: #48525d; }
.dpd-support-chat-bubble--assistant h5 { color: #12171d; font-size: 24px; letter-spacing: 0.05em; margin: 0; text-transform: uppercase; }
.dpd-support-chat-bubble--assistant > p { color: #41505d; font-size: 15px; line-height: 1.7; margin: 0; }
.dpd-support-metric-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.dpd-support-metric { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; display: grid; gap: 8px; min-height: 88px; padding: 14px 16px; }
.dpd-support-metric__label { color: #616c77; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-support-metric__value { color: #000000; font-size: 24px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.dpd-support-ops-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpd-support-ops-card { background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 24px; box-shadow: 0 14px 26px rgba(10, 15, 20, 0.05); display: grid; gap: 14px; padding: 18px; }
.dpd-support-ops-card.is-emphasis { background: linear-gradient(180deg, #10161d 0%, #000000 100%); border-color: rgba(255, 242, 0, 0.36); }
.dpd-support-ops-card__eyebrow { color: #66717c; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-ops-card.is-emphasis .dpd-support-ops-card__eyebrow { color: rgba(255, 255, 255, 0.7); }
.dpd-support-ops-card__title { color: #000000; font-size: 18px; letter-spacing: 0.05em; margin: 0; text-transform: uppercase; }
.dpd-support-ops-card.is-emphasis .dpd-support-ops-card__title { color: #ffffff; }
.dpd-support-ops-card__copy { color: #4f5c67; font-size: 14px; line-height: 1.6; margin: 0; }
.dpd-support-ops-card.is-emphasis .dpd-support-ops-card__copy { color: rgba(255, 255, 255, 0.78); }
.dpd-support-ops-card.is-emphasis .dpd-support-metric { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }
.dpd-support-ops-card.is-emphasis .dpd-support-metric__label { color: rgba(255, 255, 255, 0.62); }
.dpd-support-ops-card.is-emphasis .dpd-support-metric__value { color: #fff200; }
.dpd-support-result-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.dpd-support-result-row { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; display: grid; gap: 12px; padding: 14px 16px; }
.dpd-support-result-row__header { align-items: start; display: flex; gap: 12px; justify-content: space-between; min-width: 0; }
.dpd-support-result-row__thumb { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; display: block; flex: 0 0 auto; height: 48px; object-fit: cover; width: 48px; }
.dpd-support-result-row--has-thumb .dpd-support-result-row__copy { flex: 1 1 auto; min-width: 0; }
/* Long-content safety (Cat 8 item 10). A flex child defaults to min-width:auto, so a
   long dealership name, an unbroken email, or a 40-character part number pushed the
   row wider than the modal instead of wrapping. min-width:0 lets it shrink; the
   overflow-wrap rules below let the string itself break. Previously these were only
   applied inside the chat-bubble variant. */
.dpd-support-result-row__copy { display: grid; gap: 6px; min-width: 0; }
.dpd-support-result-row__title { color: #000000; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; overflow-wrap: anywhere; text-transform: uppercase; }
.dpd-support-result-row__meta { color: #616d78; display: flex; flex-wrap: wrap; font-size: 12px; gap: 2px 8px; line-height: 1.5; }
.dpd-support-result-row__meta-item { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.dpd-support-result-row__meta-item + .dpd-support-result-row__meta-item::before { color: rgba(97, 109, 120, 0.6); content: "·"; margin-right: 8px; }
.dpd-support-result-row__status { align-items: center; border-radius: 999px; display: inline-flex; flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; min-height: 30px; padding: 0 12px; text-transform: uppercase; }
.dpd-support-result-row__status--healthy { background: rgba(48, 204, 165, 0.14); color: #159c78; }
.dpd-support-result-row__status--review { background: rgba(255, 242, 0, 0.18); color: #000000; }
.dpd-support-result-row__status--warning { background: rgba(255, 123, 89, 0.14); color: #ca5331; }
.dpd-support-result-row__note { color: #4f5c67; font-size: 13px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.dpd-support-result-row__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dpd-support-result-row__actions button.dpd-support-inline-link { appearance: none; cursor: pointer; font-family: inherit; }
.dpd-support-inline-link { align-items: center; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; color: #000000; display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; min-height: 34px; padding: 0 14px; text-decoration: none; text-transform: uppercase; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; }
.dpd-support-inline-link:hover, .dpd-support-inline-link:focus-visible { background: #fff200; border-color: #fff200; color: #000000; outline: none; transform: translateY(-1px); }
.dpd-support-dealer-detail { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(16, 24, 32, 0.1); border-radius: 16px; display: grid; gap: 12px; padding: 14px; }
.dpd-support-dealer-detail__header { display: grid; gap: 4px; }
.dpd-support-dealer-detail__header span { color: #66717c; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-support-dealer-detail__header strong { color: #101820; font-size: 16px; line-height: 1.2; }
.dpd-support-dealer-detail__grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dpd-support-dealer-detail__grid div { background: rgba(16, 24, 32, 0.035); border: 1px solid rgba(16, 24, 32, 0.07); border-radius: 12px; display: grid; gap: 4px; min-width: 0; padding: 10px; }
.dpd-support-dealer-detail__grid dt { color: #66717c; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; margin: 0; text-transform: uppercase; }
.dpd-support-dealer-detail__grid dd { color: #101820; font-size: 12px; font-weight: 700; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.dpd-support-routing-preview { background: rgba(17, 22, 27, 0.03); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 18px; display: grid; gap: 6px; padding: 16px; }
.dpd-support-routing-preview strong { color: #12171d; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.dpd-support-routing-preview p, .dpd-support-routing-preview__meta, .dpd-support-routing-preview__query { margin: 0; }
.dpd-support-routing-preview__meta, .dpd-support-routing-preview__query { color: #55606b; font-size: 12px; }
.dpd-support-search-row { display: grid; gap: 16px; }
.dpd-support-search { display: grid; gap: 10px; }
.dpd-support-search-hints { display: flex; flex-wrap: wrap; gap: 10px; }
.dpd-support-search-hint { align-items: center; background: rgba(255, 242, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; color: #000000; display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; min-height: 34px; padding: 0 14px; }
.dpd-support-search__label { color: #12171d; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-support-prompt-list { display: flex; flex-wrap: wrap; gap: 10px; }
.dpd-support-prompt { background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%); border: 1px solid rgba(17, 22, 27, 0.1); border-radius: 999px; color: #12171d; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; min-height: 38px; padding: 0 16px; text-transform: uppercase; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.dpd-support-prompt:hover, .dpd-support-prompt:focus-visible { border-color: rgba(255, 214, 10, 0.9); box-shadow: 0 10px 20px rgba(17, 22, 27, 0.08); outline: none; transform: translateY(-1px); }
.dpd-support-search input, .dpd-support-form input, .dpd-support-form select, .dpd-support-form textarea { background: #f8fafc; border: 1px solid rgba(17, 22, 27, 0.12); border-radius: 16px; color: #14191f; font-size: 14px; min-height: 52px; padding: 0 16px; width: 100%; }
.dpd-support-form textarea { min-height: 170px; padding-bottom: 14px; padding-top: 14px; resize: vertical; }
.dpd-support-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dpd-support-filter { background: #fff; border: 1px solid rgba(17, 22, 27, 0.12); border-radius: 999px; color: #14191f; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; min-height: 38px; padding: 0 16px; text-transform: uppercase; }
.dpd-support-filter.is-active { background: #000000; border-color: #000000; color: #fff; }
.dpd-support-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.dpd-support-answer-list, .dpd-support-faq-list { display: grid; gap: 14px; }
.dpd-support-answer-card { background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 20px; display: grid; gap: 10px; padding: 18px; }
.dpd-support-answer-card__label { color: #65717d; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-support-answer-card h5, .dpd-support-empty h5 { color: #12171d; font-size: 18px; letter-spacing: 0.05em; margin: 0; text-transform: uppercase; }
.dpd-support-answer-card p, .dpd-support-empty p, .dpd-support-faq p { margin: 0; }
.dpd-support-empty { background: rgba(17, 22, 27, 0.03); border: 1px dashed rgba(17, 22, 27, 0.14); border-radius: 20px; margin-top: 14px; padding: 18px; }
.dpd-support-faq { background: #f9fbfc; border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 18px; padding: 16px 18px; }
.dpd-support-faq summary { color: #12171d; cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; list-style: none; text-transform: uppercase; }
.dpd-support-faq summary::-webkit-details-marker { display: none; }
.dpd-support-faq[open] { background: #fff; }
.dpd-support-faq p { margin-top: 12px; }
.dpd-support-form-heading { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr); margin-bottom: 20px; }
.dpd-support-contact-note { background: linear-gradient(180deg, #12181f 0%, #0d1117 100%); border-radius: 20px; color: #fff; display: grid; gap: 6px; padding: 18px; }
.dpd-support-contact-note strong { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.dpd-support-form { display: grid; gap: 18px; }
.dpd-support-routing-preview--form { margin-bottom: 6px; }
.dpd-support-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpd-support-form label { display: grid; gap: 8px; }
.dpd-support-form label > span { color: #14191f; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.dpd-support-form-message { grid-column: 1 / -1; }
/* Identity note sits under the locked Name/Email pair, so it spans the grid like the message. */
.dpd-support-form-note { grid-column: 1 / -1; color: #5f6b7a; font-size: 12px; line-height: 1.4; margin: -8px 0 0; }
/* Locked because the server sets these from the account — tinted so it reads as fixed, but not
   greyed into illegibility (readonly, so the value still submits and stays selectable). */
.dpd-support-form-grid input[readonly] { background: rgba(17, 22, 27, 0.05); cursor: default; }
.dpd-support-form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.dpd-support-form-actions p { margin: 0; max-width: 460px; }
.dpd-support-form [data-dpd-profile-locked="true"] { background: #eef2f5 !important; color: #34404c !important; cursor: not-allowed; }
.dpd-support-profile-lock-note { align-items: center; color: #5d6975; display: flex; font-size: 12px; gap: 7px; margin: -4px 0 14px; }
.dpd-support-ticket-history { border: 1px solid #d8e0e7; border-radius: 14px; margin: 0 0 16px; overflow: hidden; }
.dpd-support-ticket-history__heading { align-items: center; background: #f4f7fa; display: flex; justify-content: space-between; padding: 10px 12px; }
.dpd-support-ticket-history__heading strong { color: #101820; font-size: 13px; }
.dpd-support-ticket-history__heading span { color: #65717d; font-size: 11px; }
.dpd-support-ticket-history__item { align-items: center; background: #fff; border: 0; border-top: 1px solid #e7ebef; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; padding: 10px 12px; text-align: left; width: 100%; }
.dpd-support-ticket-history__item:hover { background: #fffde8; }
.dpd-support-ticket-history__item.is-active { background: #fff9b8; box-shadow: inset 4px 0 0 #fff200; }
.dpd-support-ticket-history__item span { display: grid; gap: 2px; min-width: 0; }
.dpd-support-ticket-history__item strong { color: #101820; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpd-support-ticket-history__item small { color: #65717d; font-size: 11px; }
.dpd-support-ticket-history__item em { background: #d9fff5; border-radius: 999px; color: #075f49; font-size: 10px; font-style: normal; font-weight: 800; padding: 5px 8px; text-transform: uppercase; white-space: nowrap; }
.dpd-support-ticket-thread { background: #f7f9fb; border-top: 1px solid #d8e0e7; padding: 12px; }
.dpd-support-ticket-thread__heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.dpd-support-ticket-thread__heading strong { color: #101820; font-size: 13px; }
.dpd-support-ticket-thread__heading span { color: #5f6b76; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.dpd-support-ticket-thread__item { display: grid; gap: 9px; grid-template-columns: 10px minmax(0, 1fr); padding: 8px 0; }
.dpd-support-ticket-thread__dot { background: #0dceb0; border-radius: 50%; height: 8px; margin-top: 4px; width: 8px; }
.dpd-support-ticket-thread__item.is-status .dpd-support-ticket-thread__dot { background: #fff200; box-shadow: 0 0 0 1px #8a7900; }
.dpd-support-ticket-thread__item strong, .dpd-support-ticket-thread__item small { display: block; }
.dpd-support-ticket-thread__item strong { color: #101820; font-size: 12px; }
.dpd-support-ticket-thread__item small { color: #76818b; font-size: 10px; margin-top: 2px; }
.dpd-support-ticket-thread__item p { color: #34404c; font-size: 12px; line-height: 1.45; margin: 5px 0 0; white-space: pre-wrap; }
.dpd-support-form-status { border-radius: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 14px 16px; }
.dpd-support-form-status.is-pending { background: #fff6d9; color: #5c4900; }
.dpd-support-form-status.is-success { background: #e8f7ee; color: #175b32; }
.dpd-support-form-status.is-error { background: #fdecec; color: #9d2020; }
.dpd-support-guidance-list { display: grid; gap: 16px; }
.dpd-support-guidance-list strong { color: #12171d; display: block; font-size: 12px; letter-spacing: 0.18em; margin-bottom: 6px; text-transform: uppercase; }
@media (max-width: 900px) {
.dpd-modal-header, .dpd-modal-body { padding-left: 18px; padding-right: 18px; }
.dpd-modal-grid { grid-template-columns: 1fr; }
.dpd-support-hero, .dpd-support-grid, .dpd-support-ops-grid, .dpd-support-form-heading, .dpd-support-form-grid { grid-template-columns: 1fr; }
.dpd-support-assistant__fact { grid-template-columns: 1fr; }
.dpd-support-guide-step { grid-template-columns: 1fr; }
.acc-avatar-grid--modal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dpd-support-chat-bubble--user { max-width: 100%; }
}
@media (max-width: 580px) {
.dpd-helper-launcher { bottom: 16px; left: 16px; right: 16px; }
.dpd-helper-launcher__button { justify-content: center; width: 100%; }
.dpd-support-meta__item { min-width: 0; width: 100%; }
.acc-avatar-grid--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpd-support-prompt-list { display: grid; grid-template-columns: 1fr; }
.dpd-support-search-hints { display: grid; grid-template-columns: 1fr; }
.dpd-support-guide-card, .dpd-support-guide-link { padding: 14px; }
.dpd-support-chat-bubble { border-radius: 22px; padding: 16px; }
.dpd-support-chat-bubble--assistant h5 { font-size: 20px; }
.dpd-support-metric-strip { grid-template-columns: 1fr 1fr; }
.dpd-support-result-row__header { flex-direction: column; }
.dpd-support-result-row--has-thumb .dpd-support-result-row__header { align-items: center; flex-direction: row; }
}
@media (max-width: 767px) {
.dpd-helper-launcher { bottom: 8px !important; left: 8px !important; right: 8px !important; }
.dpd-helper-launcher__button { gap: 8px !important; justify-content: center !important; min-height: 48px !important; padding: 0 14px 0 10px !important; width: 100% !important; }
.dpd-helper-launcher__icon { height: 30px !important; width: 30px !important; }
.dpd-helper-launcher__copy strong { font-size: 10px !important; }
.dpd-helper-launcher__copy span { font-size: 8px !important; }
}
/* Support/design polish 3.1.64 */
.dpd-modal-button { border: 1px solid transparent; box-shadow: 0 12px 24px rgba(11, 16, 21, 0.12); justify-content: center; }
.dpd-modal-button--secondary { border-color: rgba(17, 22, 27, 0.1); }
.dpd-support-contact-note { align-content: start; min-height: 120px; }
.dpd-support-contact-note strong { color: #ffea00; font-size: 12px; }
.dpd-support-contact-note span { color: rgba(240, 245, 248, 0.92); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.dpd-support-routing-preview { background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 244, 248, 0.96)); }
.dpd-support-routing-preview strong { line-height: 1.3; }
.dpd-support-answer-card, .dpd-support-assistant__result-card { box-shadow: 0 18px 34px rgba(12, 18, 24, 0.08); }
.dpd-support-form input, .dpd-support-form select, .dpd-support-form textarea { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44); }
/* Launch closeout 3.1.78: account launcher continuity and stronger modal identity */
.dpd-modal-button, .dpd-modal-button:visited, .dpd-modal-button:hover, .dpd-modal-button:focus { text-decoration: none !important; }
.dpd-modal-button, .dpd-modal-button:visited { color: #ffffff !important; }
.dpd-modal-button--secondary, .dpd-modal-button--secondary:visited, .dpd-modal-button--secondary:hover, .dpd-modal-button--secondary:focus { color: #000000 !important; }
.dpd-modal-identity .dpd-user-badge--modal-identity { height: 64px !important; width: 64px !important; font-size: 22px !important; }
.dpd-modal-identity .dpd-user-badge--modal-identity img { height: 32px !important; max-height: 32px !important; max-width: 32px !important; width: 32px !important; }
.dpd-modal-account-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; }
.dpd-modal-account-fact { background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 16px; display: grid; gap: 6px; min-width: 0; padding: 12px 14px; }
.dpd-modal-account-fact span { color: #6a7681; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; }
.dpd-modal-account-fact strong { color: #000000; font-size: 15px; letter-spacing: 0.04em; line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 767px) {
.dpd-modal-account-facts { grid-template-columns: 1fr; }
}
/* Accessibility closeout 3.1.88: remove yellow-on-light helper text and tighten modal rhythm */
.dpd-support-guide-shell .dpd-modal-kicker, .dpd-support-guide-card .dpd-modal-kicker, .dpd-support-answer-card__label, .dpd-support-contact-note strong { color: #000000 !important; }
.dpd-support-guide-hero h4, .dpd-support-guide-step strong, .dpd-support-guide-link strong, .dpd-support-answer-card h5, .dpd-support-routing-preview strong { color: #000000 !important; }
.dpd-support-guide-hero p, .dpd-support-guide-step p, .dpd-support-guide-link span, .dpd-support-answer-card p, .dpd-support-empty p, .dpd-support-contact-note span, .dpd-support-routing-preview p { color: #445260 !important; }
/* Helper chat conversion 3.2.04 */
.dpd-support-hero { align-items: start; gap: 14px; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.85fr); }
.dpd-support-hero h3 { font-size: clamp(22px, 2.3vw, 30px); }
.dpd-support-mode-switch .dpd-modal-button { min-height: 42px; padding-left: 18px; padding-right: 18px; }
.dpd-support-workspace-shell { padding: 18px; }
.dpd-support-workspace { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); }
.dpd-support-workspace__main, .dpd-support-workspace__side { display: grid; gap: 18px; }
.dpd-support-workspace__side { align-self: start; position: sticky; top: 0; }
.dpd-support-search-card, .dpd-support-conversation-card, .dpd-support-admin-board { background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%); border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 24px; box-shadow: 0 18px 34px rgba(12, 18, 24, 0.08); padding: 22px; }
.dpd-support-search-card__intro, .dpd-support-conversation-card__intro, .dpd-support-admin-board__header { display: grid; gap: 8px; }
.dpd-support-search-card__intro h4 { color: #12171d; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0.04em; line-height: 1.08; margin: 0; text-transform: uppercase; }
.dpd-support-search-card__intro p, .dpd-support-conversation-card__intro p, .dpd-support-admin-board__header p { color: #4a5866; line-height: 1.6; margin: 0; }
.dpd-support-conversation-card__intro { border-bottom: 1px solid rgba(17, 22, 27, 0.08); margin-bottom: 18px; padding-bottom: 14px; }
.dpd-support-search-composer { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; }
.dpd-support-search-composer .dpd-modal-button { min-width: 104px; }
.dpd-support-search-composer input { font-size: 16px !important; font-weight: 700; min-height: 58px !important; }
.dpd-support-admin-board .dpd-support-ops-grid { grid-template-columns: 1fr; }
.dpd-support-admin-board__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dpd-support-secondary { background: #ffffff; border: 1px solid rgba(17, 22, 27, 0.08); border-radius: 24px; box-shadow: 0 10px 24px rgba(12, 18, 24, 0.05); padding: 18px 20px; }
.dpd-support-secondary > summary { color: #12171d; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; list-style: none; text-transform: uppercase; }
.dpd-support-secondary > summary::-webkit-details-marker { display: none; }
.dpd-support-grid--secondary { margin-top: 18px; }
.dpd-support-chat-session { display: grid; gap: 16px; }
.dpd-support-chat-session__panel, .dpd-support-chat-session__results { display: grid; gap: 14px; }
.dpd-support-chat-session__label { color: #6b747d; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.dpd-support-chat-bubble--welcome { background: rgba(17, 22, 27, 0.03); border: 1px solid rgba(17, 22, 27, 0.08); box-shadow: none; justify-self: start; max-width: min(74%, 560px); }
.dpd-support-chat-bubble--welcome p { color: #43525f; font-size: 14px; font-weight: 600; line-height: 1.6; margin: 0; }
.dpd-support-chat-bubble--assistant h5 { font-size: 20px; }
.dpd-support-chat-bubble--assistant > p { font-size: 14px; }
@media (max-width: 900px) {
.dpd-support-workspace { grid-template-columns: 1fr; }
.dpd-support-workspace__side { position: static; }
.dpd-support-search-composer { grid-template-columns: 1fr; }
.dpd-support-chat-bubble--welcome { max-width: 100%; }
}
.dpd-support-guide-steps { gap: 10px; }
.dpd-support-guide-step, .dpd-support-guide-link, .dpd-support-answer-card { gap: 8px; }
.dpd-support-guide-step p, .dpd-support-guide-link span, .dpd-support-answer-card p { line-height: 1.45 !important; }
/* Brand closeout 3.1.90: helper and modal lock to exact Dunlop yellow/black */
.dpd-helper-launcher, .dpd-helper-launcher__button, .dpd-helper-launcher__copy, .dpd-modal-dialog, .dpd-modal-dialog p, .dpd-modal-dialog li, .dpd-modal-dialog label, .dpd-modal-dialog input, .dpd-modal-dialog select, .dpd-modal-dialog textarea, .dpd-modal-dialog button, .dpd-modal-dialog strong, .dpd-modal-dialog span, .dpd-modal-dialog h2, .dpd-modal-dialog h3, .dpd-modal-dialog h4, .dpd-modal-dialog h5 { font-family: "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
.dpd-helper-launcher__button, .dpd-modal-button, .dpd-modal-close { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; }
.dpd-helper-launcher__icon { background: #fff200 !important; color: #000000 !important; }
.dpd-helper-launcher__pulse { background: rgba(255, 242, 0, 0.28) !important; }
.dpd-modal-header h2, .dpd-modal-account-fact strong, .dpd-support-guide-hero h4, .dpd-support-guide-step strong, .dpd-support-guide-link strong, .dpd-support-answer-card h5, .dpd-support-routing-preview strong, .dpd-support-answer-card__label, .dpd-support-contact-note strong, .dpd-modal-kicker { color: #000000 !important; }
.dpd-modal-button--secondary, .dpd-modal-button--secondary:visited, .dpd-modal-button--secondary:hover, .dpd-modal-button--secondary:focus { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.14) !important; color: #000000 !important; }
/* Final stabilization pass 4.0: helper authority block */
.dpd-modal-dialog, .dpd-modal-dialog * { font-family: "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
.dpd-support-hero { border-radius: 26px !important; padding: 18px !important; }
.dpd-support-hero__copy h3 { color: #000000 !important; font-family: "acumin-pro-condensed", "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: clamp(32px, 3vw, 44px) !important; line-height: 0.95 !important; margin-bottom: 8px !important; }
.dpd-support-hero__copy p { color: #536170 !important; font-size: 14px !important; line-height: 1.55 !important; max-width: 56ch !important; }
.dpd-support-meta { gap: 10px !important; margin-top: 12px !important; }
.dpd-support-meta__item { border-radius: 18px !important; min-height: 70px !important; padding: 12px !important; }
.dpd-support-mode-switch { align-content: start !important; gap: 10px !important; }
.dpd-support-mode-switch .dpd-modal-button { min-height: 44px !important; }
.dpd-support-workspace-shell { background: #f7f9fb !important; border-radius: 26px !important; padding: 18px !important; }
.dpd-support-workspace { align-items: start !important; gap: 16px !important; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr) !important; }
.dpd-support-search-card, .dpd-support-conversation-card, .dpd-support-admin-board, .dpd-support-secondary { border-radius: 22px !important; box-shadow: 0 14px 28px rgba(10, 16, 21, 0.06) !important; }
.dpd-support-search-card, .dpd-support-conversation-card { padding: 18px !important; }
.dpd-support-search-card__intro, .dpd-support-conversation-card__intro, .dpd-support-admin-board__header { gap: 6px !important; }
.dpd-support-search-card__intro h4 { color: #000000 !important; font-family: "acumin-pro-condensed", "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: clamp(24px, 2vw, 30px) !important; letter-spacing: 0.03em !important; line-height: 0.98 !important; }
.dpd-support-search-card__intro p, .dpd-support-conversation-card__intro p, .dpd-support-admin-board__header p { color: #536170 !important; font-size: 13px !important; line-height: 1.5 !important; }
.dpd-support-search-row { gap: 10px !important; }
.dpd-support-search-composer { gap: 10px !important; grid-template-columns: minmax(0, 1fr) auto !important; }
.dpd-support-search-composer input { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 18px !important; color: #000000 !important; min-height: 54px !important; padding: 0 18px !important; }
.dpd-support-search-composer .dpd-modal-button { align-self: stretch !important; min-width: 96px !important; }
.dpd-support-prompt-list, .dpd-support-filter-row { gap: 8px !important; }
.dpd-support-conversation-card__intro { align-items: center !important; display: flex !important; justify-content: space-between !important; padding-bottom: 12px !important; }
.dpd-support-assistant__result { background: #fbfcfd !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 18px !important; min-height: 280px !important; padding: 16px !important; }
.dpd-support-assistant__empty { gap: 6px !important; }
.dpd-support-assistant__empty strong { color: #000000 !important; font-family: "acumin-pro-condensed", "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 22px !important; letter-spacing: 0.03em !important; line-height: 1 !important; }
.dpd-support-assistant__empty p { color: #536170 !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; }
.dpd-support-chat-session { gap: 12px !important; }
.dpd-support-chat-session__label { color: #657381 !important; font-size: 9px !important; letter-spacing: 0.18em !important; }
.dpd-support-chat-session__panel, .dpd-support-chat-session__results { gap: 12px !important; }
.dpd-support-chat-bubble { border-radius: 20px !important; padding: 14px 16px !important; }
.dpd-support-chat-bubble--assistant h5 { font-family: "acumin-pro-condensed", "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 22px !important; line-height: 1 !important; }
.dpd-support-chat-bubble--assistant > p, .dpd-support-chat-bubble--welcome p { color: #536170 !important; font-size: 13px !important; line-height: 1.5 !important; }
.dpd-support-admin-board { background: #101820 !important; color: #ffffff !important; padding: 18px !important; position: sticky !important; top: 12px !important; }
.dpd-support-admin-board__header p, .dpd-support-admin-board .dpd-support-chat-session__label, .dpd-support-admin-board .dpd-support-answer-card p { color: rgba(255, 255, 255, 0.74) !important; }
.dpd-support-admin-board .dpd-support-ops-grid { gap: 10px !important; grid-template-columns: 1fr !important; }
.dpd-support-admin-board__actions { gap: 8px !important; }
.dpd-support-admin-board .dpd-modal-button--secondary { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; }
.dpd-support-secondary { padding: 16px 18px !important; }
.dpd-support-secondary > summary { color: #000000 !important; font-size: 11px !important; }
.dpd-support-grid--secondary { gap: 14px !important; margin-top: 14px !important; }
@media (max-width: 900px) {
.dpd-support-workspace { grid-template-columns: 1fr !important; }
.dpd-support-admin-board { position: static !important; }
}
@media (max-width: 767px) {
.dpd-support-workspace-shell, .dpd-support-search-card, .dpd-support-conversation-card, .dpd-support-admin-board, .dpd-support-secondary { border-radius: 20px !important; }
.dpd-support-search-composer { grid-template-columns: 1fr !important; }
.dpd-support-conversation-card__intro { align-items: start !important; display: grid !important; justify-content: start !important; }
}
/* Helper closeout: keep assistant panels usable and readable on light surfaces. */
.dpd-modal-dialog { max-height: 100vh !important; }
.dpd-modal-body { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; }
.dpd-modal-dialog .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-assistant__eyebrow, .dpd-modal-dialog .dpd-support-routing-preview__eyebrow, .dpd-modal-dialog .dpd-support-chat-bubble__eyebrow, .dpd-modal-dialog .dpd-support-chat-session__label, .dpd-modal-dialog .dpd-support-result-row__meta, .dpd-modal-dialog .dpd-support-result-row__note { color: #596573 !important; }
.dpd-modal-dialog .dpd-support-hero__copy .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-guide-hero .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-search-card__intro .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-conversation-card__intro .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-form label > span { color: #12171d !important; }
.dpd-modal-dialog .dpd-support-guide-hero h4, .dpd-modal-dialog .dpd-support-search-card__intro h4, .dpd-modal-dialog .dpd-support-conversation-card__intro h4, .dpd-modal-dialog .dpd-support-form-heading h4, .dpd-modal-dialog .dpd-support-answer-card h5, .dpd-modal-dialog .dpd-support-faq summary, .dpd-modal-dialog .dpd-support-routing-preview strong { color: #000000 !important; }
.dpd-modal-dialog .dpd-support-guide-hero p, .dpd-modal-dialog .dpd-support-search-card__intro p, .dpd-modal-dialog .dpd-support-conversation-card__intro p, .dpd-modal-dialog .dpd-support-form-heading p, .dpd-modal-dialog .dpd-support-answer-card p, .dpd-modal-dialog .dpd-support-faq p, .dpd-modal-dialog .dpd-support-routing-preview p, .dpd-modal-dialog .dpd-support-routing-preview__query, .dpd-modal-dialog .dpd-support-form-actions p { color: #445260 !important; }
.dpd-support-escalate-button { border-color: rgba(17, 22, 27, 0.18) !important; }
.dpd-modal-dialog .dpd-support-guide-card .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-guide-shell .dpd-modal-kicker, .dpd-modal-dialog .dpd-support-answer-card__label, .dpd-modal-dialog .dpd-support-contact-note strong { color: #596573 !important; }
.dpd-modal-dialog .dpd-support-guide-hero h4, .dpd-modal-dialog .dpd-support-guide-card h4, .dpd-modal-dialog .dpd-support-guide-step strong, .dpd-modal-dialog .dpd-support-guide-link strong { color: #12171d !important; }
/* Support assistant upgrade: chat-first routing, cleaner tabs, and contact handoff. */
.dpd-modal-dialog { max-width: min(1180px, calc(100vw - 44px)) !important; }
.dpd-modal-header { position: sticky !important; top: 0 !important; z-index: 20 !important; }
.dpd-modal-module--contact { background: #ffffff !important; gap: 18px !important; }
.dpd-modal-module--contact .dpd-support-hero { background: linear-gradient(135deg, #ffffff 0%, #f4f7fa 100%) !important; border: 1px solid rgba(17, 22, 27, 0.08) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(246px, 0.42fr) !important; min-height: 0 !important; }
.dpd-modal-module--contact .dpd-support-hero__copy h3 { letter-spacing: 0.02em !important; max-width: 14ch !important; }
.dpd-modal-module--contact .dpd-support-meta { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.dpd-modal-module--contact .dpd-support-meta__item { min-width: 0 !important; }
.dpd-modal-module--contact .dpd-support-mode-switch { align-self: stretch !important; background: #ffffff !important; border: 1px solid rgba(17, 22, 27, 0.08) !important; border-radius: 24px !important; display: grid !important; gap: 8px !important; padding: 10px !important; }
.dpd-modal-module--contact .dpd-support-mode-switch .dpd-modal-button { border-radius: 999px !important; justify-content: center !important; letter-spacing: 0.16em !important; min-height: 42px !important; padding: 0 14px !important; }
.dpd-modal-module--contact .dpd-support-mode-switch [aria-selected="true"] { background: #fff200 !important; border-color: #fff200 !important; color: #000000 !important; }
/* Teal pill is the in-thread handoff BUTTON's treatment. The nav tab of the same name is a
   tab, not a button — it keeps .dpd-support-tab styling so it matches Portal Guide/Request/
   Rep Info instead of reading as a call-to-action. */
.dpd-modal-module--contact .dpd-support-contact-handoff { background: #1fd6b1 !important; border-color: #1fd6b1 !important; color: #000000 !important; }
.dpd-modal-module--contact .dpd-support-workspace { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; }
.dpd-modal-module--contact .dpd-support-search-card { background: #ffffff !important; position: sticky !important; top: 18px !important; z-index: 2 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card { background: #ffffff !important; }
.dpd-modal-module--contact .dpd-support-assistant__result { background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important; max-height: none !important; }
.dpd-modal-module--contact .dpd-support-chat-thread { gap: 10px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble.is-previous { opacity: 0.72 !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user.is-previous { justify-self: end !important; max-width: min(68%, 520px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--assistant.is-previous { box-shadow: none !important; }
.dpd-modal-module--contact .dpd-support-assistant__actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.dpd-modal-module--contact .dpd-support-assistant__actions .dpd-modal-button { flex: 0 1 auto !important; }
.dpd-modal-module--contact .dpd-support-routing-preview { background: #ffffff !important; border: 1px solid rgba(17, 22, 27, 0.08) !important; border-radius: 18px !important; padding: 14px 16px !important; }
.dpd-modal-module--contact .dpd-support-admin-board { max-height: calc(100vh - 170px) !important; overflow: auto !important; }
.dpd-modal-module--contact .dpd-support-form-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.dpd-modal-module--contact .dpd-support-form-actions p { flex: 1 1 260px !important; margin: 0 !important; }
@media (max-width: 1100px) {
.dpd-modal-module--contact .dpd-support-hero, .dpd-modal-module--contact .dpd-support-workspace { grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-mode-switch { display: flex !important; flex-wrap: wrap !important; }
.dpd-modal-module--contact .dpd-support-mode-switch .dpd-modal-button { flex: 1 1 180px !important; }
.dpd-modal-module--contact .dpd-support-search-card, .dpd-modal-module--contact .dpd-support-admin-board { max-height: none !important; position: static !important; }
}
@media (max-width: 767px) {
.dpd-modal-dialog { max-width: 100vw !important; }
.dpd-modal-body { padding: 16px !important; }
.dpd-modal-module--contact .dpd-support-meta { grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-assistant__actions .dpd-modal-button, .dpd-modal-module--contact .dpd-support-form-actions .dpd-modal-button { width: 100% !important; }
}
/* DPD support helper UX pass - May 28 */
.dpd-modal-dialog { border-radius: 28px !important; max-height: min(92vh, 980px) !important; overflow: hidden !important; }
.dpd-modal-header { align-items: center !important; background: rgba(247, 250, 252, 0.98) !important; border-bottom: 1px solid rgba(16, 24, 32, 0.08) !important; min-height: 92px !important; padding: 22px 28px !important; }
.dpd-modal-header h2 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 0.96 !important; margin: 0 !important; }
.dpd-modal-body { max-height: calc(min(92vh, 980px) - 92px) !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 28px !important; }
.dpd-modal-module--contact .dpd-support-search-card { position: static !important; top: auto !important; z-index: 1 !important; }
.dpd-modal-module--contact .dpd-support-workspace-shell, .dpd-modal-module--contact .dpd-support-search-card, .dpd-modal-module--contact .dpd-support-conversation-card { overflow: visible !important; }
.dpd-modal-module--contact .dpd-support-workspace__main { display: grid !important; gap: 18px !important; min-width: 0 !important; }
.dpd-modal-module--contact .dpd-support-search-row { display: grid !important; gap: 14px !important; }
.dpd-modal-module--contact .dpd-support-search-composer { align-items: center !important; display: grid !important; gap: 10px !important; grid-template-columns: minmax(0, 1fr) auto !important; }
.dpd-modal-module--contact .dpd-support-search-composer input { background: #ffffff !important; border: 1px solid rgba(16, 24, 32, 0.14) !important; border-radius: 999px !important; min-height: 58px !important; padding: 0 22px !important; }
.dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button { min-height: 58px !important; min-width: 96px !important; }
.dpd-modal-module--contact .dpd-support-prompt-list, .dpd-modal-module--contact .dpd-support-filter-row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.dpd-modal-module--contact .dpd-support-prompt, .dpd-modal-module--contact .dpd-support-filter { border-radius: 999px !important; font-size: 11px !important; min-height: 38px !important; white-space: normal !important; }
.dpd-modal-module--contact .dpd-support-conversation-card { border: 1px solid rgba(16, 24, 32, 0.08) !important; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important; }
.dpd-modal-module--contact .dpd-support-chat-session { display: grid !important; gap: 18px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble { max-width: min(720px, 100%) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user { justify-self: end !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--assistant { justify-self: start !important; }
.dpd-modal-module--contact .dpd-support-chat-session__panel { background: #ffffff !important; border: 1px solid rgba(16, 24, 32, 0.08) !important; border-radius: 20px !important; display: grid !important; gap: 14px !important; padding: 16px !important; }
.dpd-modal-module--contact .dpd-support-admin-board { position: sticky !important; top: 12px !important; }
@media (max-width: 1100px) {
.dpd-modal-dialog { max-height: 94vh !important; }
.dpd-modal-body { max-height: calc(94vh - 86px) !important; }
.dpd-modal-module--contact .dpd-support-admin-board { position: static !important; }
}
@media (max-width: 767px) {
.dpd-modal-header { min-height: 78px !important; padding: 18px !important; }
.dpd-modal-body { max-height: calc(100vh - 78px) !important; padding: 16px !important; }
.dpd-modal-module--contact .dpd-support-search-composer { grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button { width: 100% !important; }
}
/* DPD support helper messaging correction - May 28 midday */
.dpd-modal-module--contact .dpd-support-workspace__main { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card { border-bottom: 0 !important; border-radius: 26px 26px 0 0 !important; box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08) !important; display: flex !important; flex-direction: column !important; min-height: min(540px, calc(92vh - 290px)) !important; order: 1 !important; padding: 18px 18px 0 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card__intro { align-items: center !important; border-bottom: 0 !important; display: flex !important; gap: 14px !important; justify-content: space-between !important; margin: 0 0 12px !important; padding: 0 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card__intro p { font-size: 13px !important; line-height: 1.4 !important; max-width: 320px !important; text-align: right !important; }
.dpd-modal-module--contact .dpd-support-assistant__result { background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(235, 241, 246, 0.98) 100%) !important; border: 1px solid rgba(16, 24, 32, 0.1) !important; border-radius: 22px 22px 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; flex: 1 1 auto !important; max-height: min(50vh, 520px) !important; min-height: 360px !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 18px !important; scroll-behavior: smooth !important; }
.dpd-modal-module--contact .dpd-support-assistant__empty { align-content: center !important; background: #ffffff !important; border: 1px dashed rgba(16, 24, 32, 0.16) !important; border-radius: 22px !important; display: grid !important; min-height: 240px !important; text-align: center !important; }
.dpd-modal-module--contact .dpd-support-search-card { background: #ffffff !important; border-top: 0 !important; border-radius: 0 0 26px 26px !important; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08) !important; margin: 0 !important; order: 2 !important; padding: 0 18px 18px !important; position: sticky !important; bottom: 0 !important; z-index: 4 !important; }
.dpd-modal-module--contact .dpd-support-search-card__intro { background: #f7fafc !important; border: 1px solid rgba(16, 24, 32, 0.08) !important; border-radius: 18px !important; margin: 0 0 12px !important; padding: 12px 14px !important; }
.dpd-modal-module--contact .dpd-support-search-card__intro h4 { font-size: 19px !important; line-height: 1 !important; margin: 2px 0 4px !important; }
.dpd-modal-module--contact .dpd-support-search-card__intro p { font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; }
.dpd-modal-module--contact .dpd-support-search-row { display: grid !important; gap: 12px !important; }
.dpd-modal-module--contact .dpd-support-search-composer { background: #f8fafc !important; border: 1px solid rgba(16, 24, 32, 0.12) !important; border-radius: 999px !important; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important; display: grid !important; gap: 8px !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 7px !important; }
.dpd-modal-module--contact .dpd-support-search-composer input { background: transparent !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; min-height: 46px !important; padding: 0 16px !important; }
.dpd-modal-module--contact .dpd-support-search-composer input:focus { outline: 2px solid rgba(31, 214, 177, 0.4) !important; outline-offset: 2px !important; }
.dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button { border-radius: 999px !important; min-height: 46px !important; min-width: 86px !important; }
.dpd-modal-module--contact .dpd-support-prompt-list, .dpd-modal-module--contact .dpd-support-filter-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.dpd-modal-module--contact .dpd-support-prompt, .dpd-modal-module--contact .dpd-support-filter { min-height: 34px !important; padding-left: 14px !important; padding-right: 14px !important; }
.dpd-modal-module--contact .dpd-support-chat-session { display: grid !important; gap: 16px !important; min-height: 100% !important; }
.dpd-modal-module--contact .dpd-support-chat-thread { align-content: end !important; display: grid !important; gap: 14px !important; min-height: 280px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble { border-radius: 22px !important; padding: 16px 18px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user { background: #101820 !important; border: 1px solid #101820 !important; color: #ffffff !important; justify-self: end !important; max-width: min(78%, 520px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome { background: #ffffff !important; border: 1px solid rgba(16, 24, 32, 0.1) !important; box-shadow: 0 16px 30px rgba(15, 23, 42, 0.07) !important; justify-self: start !important; max-width: min(84%, 680px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble.is-previous { opacity: 0.62 !important; }
.dpd-modal-module--contact .dpd-support-chat-session__panel { background: #ffffff !important; border: 1px solid rgba(16, 24, 32, 0.08) !important; border-radius: 20px !important; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06) !important; display: grid !important; gap: 12px !important; padding: 14px !important; }
.dpd-modal-module--contact .dpd-support-assistant__actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.dpd-modal-module--contact .dpd-support-routing-preview { margin: 0 !important; }
/* Support (rep) tab: the routing-preview box is margin:0 and .dpd-modal-actions has no top
   margin, so each card's buttons touched the contact box above them. Add breathing room. */
.dpd-modal-module--contact .dpd-support-panel[data-dpd-support-panel="rep"] .dpd-modal-actions { margin-top: 16px; }
@media (max-width: 900px) {
.dpd-modal-module--contact .dpd-support-conversation-card { min-height: 420px !important; }
.dpd-modal-module--contact .dpd-support-assistant__result { max-height: none !important; min-height: 300px !important; }
}
@media (max-width: 767px) {
.dpd-modal-module--contact .dpd-support-conversation-card { border-radius: 20px 20px 0 0 !important; min-height: 360px !important; padding: 14px 14px 0 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card__intro { display: grid !important; }
.dpd-modal-module--contact .dpd-support-conversation-card__intro p { max-width: none !important; text-align: left !important; }
.dpd-modal-module--contact .dpd-support-search-card { border-radius: 0 0 20px 20px !important; padding: 0 14px 14px !important; }
.dpd-modal-module--contact .dpd-support-search-composer { border-radius: 22px !important; grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user, .dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome { max-width: 100% !important; }
}
/* DPD helper messaging and shared context polish - May 28 final pass */
.dpd-helper-launcher { max-width: min(340px, calc(100vw - 28px)) !important; }
.dpd-helper-launcher__button { max-width: 100% !important; }
.dpd-helper-launcher[data-dpd-helper-last-query] .dpd-helper-launcher__copy span::after { content: " - Continue"; }
.dpd-helper-launcher.has-conversation-pending .dpd-helper-launcher__button { border-color: rgba(255, 242, 0, 0.72) !important; box-shadow: 0 16px 32px rgba(8, 13, 18, 0.24), 0 0 0 4px rgba(255, 242, 0, 0.12) !important; }
.dpd-helper-launcher.has-conversation-pending .dpd-helper-launcher__pulse { opacity: 0.72 !important; }
.dpd-helper-launcher.has-conversation-pending[data-dpd-helper-last-query] .dpd-helper-launcher__copy span::after { content: ""; }
.dpd-helper-launcher.has-ticket-pending .dpd-helper-launcher__button { border-color: rgba(255, 242, 0, 0.82) !important; box-shadow: 0 16px 32px rgba(8, 13, 18, 0.26), 0 0 0 4px rgba(255, 242, 0, 0.16) !important; }
.dpd-helper-launcher.has-ticket-pending[data-dpd-helper-last-query] .dpd-helper-launcher__copy span::after { content: ""; }
.dpd-modal-dialog { max-width: min(1180px, calc(100vw - 36px)) !important; }
.dpd-modal-module--contact .dpd-support-workspace { align-items: stretch !important; display: grid !important; gap: 18px !important; grid-template-columns: minmax(0, 1fr) minmax(310px, 370px) !important; }
.dpd-modal-module--contact .dpd-support-workspace__main { display: flex !important; flex-direction: column !important; gap: 0 !important; min-height: min(760px, calc(100vh - 190px)) !important; }
.dpd-modal-module--contact .dpd-support-conversation-card { border-radius: 26px 26px 0 0 !important; flex: 1 1 auto !important; min-height: 420px !important; order: 1 !important; padding-bottom: 0 !important; }
/* The composer is pinned to the BOTTOM of the conversation column. `top: auto` is load-bearing:
   an earlier rule sets `top: 18px` on this same element, and a sticky box with both offsets
   sticks at whichever edge it reaches first — so the composer could detach and ride the top of
   the scroll area instead of staying under the thread. */
.dpd-modal-module--contact .dpd-support-search-card { border-radius: 0 0 26px 26px !important; border-top: 0 !important; top: auto !important; bottom: 0 !important; box-shadow: 0 -18px 34px rgba(15, 23, 42, 0.05) !important; order: 2 !important; padding-top: 14px !important; position: sticky !important; z-index: 4 !important; }
.dpd-modal-module--contact .dpd-support-search-card h3 { font-size: clamp(24px, 3vw, 36px) !important; line-height: 1 !important; }
.dpd-modal-module--contact .dpd-support-search-composer { align-items: center !important; background: #fff !important; border: 1px solid rgba(16, 24, 32, 0.1) !important; border-radius: 999px !important; display: grid !important; gap: 10px !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 6px !important; }
.dpd-modal-module--contact .dpd-support-search-composer input { background: transparent !important; border: 0 !important; min-height: 46px !important; padding: 0 16px !important; }
.dpd-modal-module--contact .dpd-support-search-composer button { border-radius: 999px !important; min-height: 48px !important; min-width: 104px !important; }
.dpd-modal-module--contact .dpd-support-assistant__result { background: linear-gradient(180deg, #f8fafc, #eef3f6) !important; border: 1px solid rgba(16, 24, 32, 0.1) !important; border-radius: 22px !important; display: flex !important; flex-direction: column !important; max-height: min(54vh, 620px) !important; min-height: 360px !important; overflow: auto !important; padding: 18px !important; }
.dpd-modal-module--contact .dpd-support-chat-session { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 100% !important; }
.dpd-modal-module--contact .dpd-support-chat-thread { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 14px !important; justify-content: flex-end !important; min-height: 280px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble { border-radius: 22px !important; box-sizing: border-box !important; clear: both !important; width: fit-content !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user { align-self: flex-end !important; background: #101820 !important; color: #fff !important; margin-left: auto !important; max-width: min(78%, 560px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome { align-self: flex-start !important; background: #fff !important; color: #101820 !important; margin-right: auto !important; max-width: min(84%, 680px) !important; }
.dpd-modal-module--contact .dpd-support-chat-session__panel { background: #fff !important; border-radius: 20px !important; margin-top: 14px !important; }
.dpd-modal-module--contact .dpd-support-workspace__side { max-height: min(760px, calc(100vh - 190px)) !important; overflow: auto !important; position: sticky !important; top: 0 !important; }
@media (max-width: 920px) {
.dpd-modal-module--contact .dpd-support-workspace { grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-workspace__side { max-height: none !important; position: relative !important; }
.dpd-modal-module--contact .dpd-support-workspace__main { min-height: auto !important; }
.dpd-modal-module--contact .dpd-support-search-card { position: relative !important; }
}
@media (max-width: 640px) {
.dpd-modal-dialog { max-width: 100vw !important; }
.dpd-support-conversation-state { align-items: stretch; flex-direction: column; }
.dpd-support-conversation-state__actions { justify-content: stretch; }
.dpd-support-conversation-state__actions .dpd-modal-button { flex: 1 1 auto; }
.dpd-modal-module--contact .dpd-support-search-composer { border-radius: 24px !important; grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user, .dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome { max-width: 100% !important; }
}
/* DPD helper chat single-scroll repair - May 29 ASAP pass */
.dpd-modal-dialog { display: flex !important; flex-direction: column !important; height: min(100vh, 100dvh) !important; max-height: 100dvh !important; overflow: hidden !important; }
.dpd-modal-header { flex: 0 0 auto !important; }
.dpd-modal-body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; }
.dpd-modal-module--contact .dpd-support-workspace, .dpd-support-workspace { align-items: start !important; min-height: 0 !important; }
.dpd-modal-module--contact .dpd-support-workspace__main { height: auto !important; min-height: 0 !important; }
.dpd-modal-module--contact .dpd-support-conversation-card { min-height: 0 !important; padding-bottom: 18px !important; }
.dpd-modal-module--contact .dpd-support-search-card { bottom: auto !important; position: relative !important; z-index: 1 !important; }
.dpd-modal-module--contact .dpd-support-assistant__result, .dpd-support-assistant__result { display: block !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding: 18px !important; }
.dpd-modal-module--contact .dpd-support-chat-session, .dpd-support-chat-session { align-items: start !important; display: grid !important; gap: 16px !important; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important; min-height: 0 !important; overflow: visible !important; }
.dpd-modal-module--contact .dpd-support-chat-thread, .dpd-support-chat-thread { display: flex !important; flex-direction: column !important; gap: 14px !important; justify-content: flex-start !important; min-height: 0 !important; overflow: visible !important; width: 100% !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble, .dpd-support-chat-bubble { clear: both !important; float: none !important; inset: auto !important; max-width: 100% !important; position: relative !important; transform: none !important; width: auto !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user, .dpd-support-chat-bubble--user { align-self: flex-end !important; margin-left: auto !important; max-width: min(78%, 560px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome, .dpd-support-chat-bubble--assistant, .dpd-support-chat-bubble--welcome { align-self: flex-start !important; margin-right: auto !important; max-width: min(88%, 720px) !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble.is-previous, .dpd-support-chat-bubble.is-previous { opacity: 0.72 !important; }
.dpd-modal-module--contact .dpd-support-chat-session__panel, .dpd-modal-module--contact .dpd-support-chat-session__results, .dpd-support-chat-session__panel, .dpd-support-chat-session__results { align-self: start !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; position: relative !important; }
.dpd-modal-module--contact .dpd-support-chat-session__panel, .dpd-support-chat-session__panel { display: grid !important; gap: 12px !important; }
.dpd-modal-module--contact .dpd-support-workspace__side, .dpd-support-workspace__side { max-height: none !important; overflow: visible !important; position: sticky !important; top: 16px !important; }
@media (max-width: 920px) {
.dpd-modal-module--contact .dpd-support-chat-session, .dpd-support-chat-session { grid-template-columns: 1fr !important; }
.dpd-modal-module--contact .dpd-support-workspace__side, .dpd-support-workspace__side { position: relative !important; top: auto !important; }
}
@media (max-width: 640px) {
.dpd-modal-dialog { border-radius: 0 !important; max-width: 100vw !important; }
.dpd-modal-body { padding: 16px !important; }
.dpd-modal-module--contact .dpd-support-chat-bubble--user, .dpd-modal-module--contact .dpd-support-chat-bubble--assistant, .dpd-modal-module--contact .dpd-support-chat-bubble--welcome, .dpd-support-chat-bubble--user, .dpd-support-chat-bubble--assistant, .dpd-support-chat-bubble--welcome { max-width: 100% !important; }
}
/* DPD support modal mobile handoff cleanup - 2026-06-11 */
.dpd-modal-shell,
.dpd-modal-shell * {
  box-sizing: border-box !important;
}

.dpd-support-contact-page-link,
[data-dpd-support-contact-handoff] {
  cursor: pointer !important;
}

.dpd-modal-body {
  overflow-x: hidden !important;
}

@media (max-width: 760px) {
  .dpd-modal-dialog {
    border-radius: 18px !important;
    max-height: calc(100dvh - 20px) !important;
    width: calc(100vw - 20px) !important;
  }

  .dpd-modal-body {
    padding: 14px !important;
  }

  .dpd-modal-module--contact .dpd-support-workspace,
  .dpd-modal-module--contact .dpd-support-chat-session {
    grid-template-columns: 1fr !important;
  }

  .dpd-modal-module--contact .dpd-support-search-composer,
  .dpd-modal-module--contact .dpd-support-assistant__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .dpd-modal-module--contact .dpd-support-search-composer button,
  .dpd-modal-module--contact .dpd-support-assistant__actions a,
  .dpd-modal-module--contact .dpd-support-assistant__actions button,
  .dpd-support-contact-page-link,
  [data-dpd-support-contact-handoff] {
    width: 100% !important;
  }
}

/* Support helper viewport and accessibility stabilization - 2026-06-18 */
.dpd-modal-shell,
.dpd-modal-shell[aria-hidden="false"] {
  align-items: flex-start !important;
  box-sizing: border-box !important;
  inset: 0 !important;
  justify-content: center !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: 12px !important;
}

.dpd-modal-shell * {
  box-sizing: border-box !important;
}

.dpd-modal-dialog {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: calc(100dvh - 24px) !important;
  max-width: min(1180px, calc(100vw - 24px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: min(1180px, calc(100vw - 24px)) !important;
}

.dpd-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

.dpd-modal-module--contact .dpd-support-hero {
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
}

.dpd-modal-module--contact .dpd-support-mode-switch {
  align-self: stretch !important;
  display: grid !important;
  gap: 10px !important;
}

.dpd-modal-module--contact .dpd-support-workspace {
  align-items: start !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
}

.dpd-modal-module--contact .dpd-support-workspace__main,
.dpd-modal-module--contact .dpd-support-workspace__side {
  min-width: 0 !important;
}

.dpd-modal-module--contact .dpd-support-workspace__side {
  max-height: calc(100dvh - 220px) !important;
  overflow: auto !important;
}

.dpd-modal-module--contact .dpd-support-search-composer {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.dpd-modal-module--contact .dpd-support-search-composer input {
  min-width: 0 !important;
  width: 100% !important;
}

.dpd-helper-launcher {
  max-width: min(340px, calc(100vw - 24px)) !important;
}

@media (max-width: 860px) {
  .dpd-modal-module--contact .dpd-support-hero,
  .dpd-modal-module--contact .dpd-support-workspace {
    grid-template-columns: 1fr !important;
  }

  .dpd-modal-module--contact .dpd-support-workspace__side {
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 640px) {
  .dpd-modal-shell,
  .dpd-modal-shell[aria-hidden="false"] {
    padding: 8px !important;
  }

  .dpd-modal-dialog {
    border-radius: 18px !important;
    max-height: calc(100dvh - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }

  .dpd-modal-header {
    padding: 18px 18px 14px !important;
  }

  .dpd-modal-body {
    padding: 14px !important;
  }

  .dpd-modal-module--contact .dpd-support-hero__copy h3 {
    font-size: clamp(34px, 11vw, 52px) !important;
    line-height: 0.98 !important;
    max-width: 11ch !important;
  }

  .dpd-modal-module--contact .dpd-support-mode-switch,
  .dpd-modal-module--contact .dpd-support-search-composer,
  .dpd-modal-module--contact .dpd-support-assistant__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .dpd-modal-module--contact .dpd-support-mode-switch button,
  .dpd-modal-module--contact .dpd-support-search-composer button,
  .dpd-modal-module--contact .dpd-support-assistant__actions a,
  .dpd-modal-module--contact .dpd-support-assistant__actions button {
    width: 100% !important;
  }

  .dpd-helper-launcher {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    max-width: calc(100vw - 20px) !important;
    right: 10px !important;
  }

  .dpd-helper-launcher__button {
    justify-content: center !important;
    min-height: 50px !important;
    width: 100% !important;
  }

  .dpd-support-dealer-detail__grid,
  .dpd-modal-shell--support-chat .dpd-support-dealer-detail__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Workspace accent personalization - 2026-06-18 */
body.dpd-helper-ui .dpd-helper-launcher__button {
  background:
    radial-gradient(circle at 12% 50%, var(--dpd-portal-bg-glow, rgba(16, 24, 32, 0.08)), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #111820 0%, #071014 100%) !important;
  border-color: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.14)) !important;
  box-shadow: 0 16px 34px rgba(8, 12, 18, 0.24), 0 0 0 6px var(--dpd-portal-surface-muted, rgba(16, 24, 32, 0.035)) !important;
  color: #ffffff !important;
}

body.dpd-helper-ui[data-dpd-accent="dirt"] .dpd-helper-launcher__button,
body.dpd-helper-ui[data-theme-mode="offroad"] .dpd-helper-launcher__button,
body.dpd-helper-ui.dpd-v2-accent-offroad .dpd-helper-launcher__button {
  background:
    radial-gradient(circle at 12% 50%, rgba(143, 103, 63, 0.14), rgba(143, 103, 63, 0) 34%),
    linear-gradient(135deg, #1b1c19 0%, #0b1517 62%, #232018 100%) !important;
}

body.dpd-helper-ui .dpd-helper-launcher__icon,
body.dpd-helper-ui .dpd-modal-identity .dpd-user-badge,
body.dpd-helper-ui .dpd-support-guide-step__count,
body.dpd-helper-ui .dpd-support-chat-bubble__tag:not(.dpd-support-chat-bubble__tag--muted) {
  background: var(--dpd-portal-accent, var(--dpd-personal-accent, #fff200)) !important;
  border-color: var(--dpd-portal-accent-border, var(--dpd-personal-accent-border, rgba(255, 242, 0, 0.5))) !important;
  color: var(--dpd-portal-accent-ink, var(--dpd-personal-accent-ink, #10161d)) !important;
}

body.dpd-helper-ui .dpd-helper-launcher__pulse {
  background: rgba(var(--dpd-portal-accent-rgb, 255, 242, 0), 0.28) !important;
}

body.dpd-helper-ui .dpd-modal-identity .dpd-user-badge.has-mark-avatar .dpd-user-badge__mark {
  background: currentColor !important;
  background-color: currentColor !important;
  color: var(--dpd-portal-accent-ink, var(--dpd-personal-accent-ink, #10161d)) !important;
}

body.dpd-helper-ui .dpd-modal-button:not(.dpd-modal-button--secondary),
body.dpd-helper-ui .dpd-modal-button:not(.dpd-modal-button--secondary):visited,
body.dpd-helper-ui .dpd-modal-button:not(.dpd-modal-button--secondary):hover,
body.dpd-helper-ui .dpd-modal-button:not(.dpd-modal-button--secondary):focus,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer button,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-form-actions button[type="submit"],
body.dpd-helper-ui [data-dpd-support-contact-handoff] {
  background: var(--dpd-portal-accent, var(--dpd-personal-accent, #fff200)) !important;
  border-color: var(--dpd-portal-accent-border, var(--dpd-personal-accent-border, rgba(255, 242, 0, 0.5))) !important;
  color: var(--dpd-portal-accent-ink, var(--dpd-personal-accent-ink, #10161d)) !important;
}

body.dpd-helper-ui .dpd-modal-button--secondary,
body.dpd-helper-ui .dpd-modal-button--secondary:visited,
body.dpd-helper-ui .dpd-modal-button--secondary:hover,
body.dpd-helper-ui .dpd-modal-button--secondary:focus {
  border-color: rgba(var(--dpd-portal-accent-rgb, 255, 242, 0), 0.28) !important;
}

body.dpd-helper-ui .dpd-support-mode-switch .dpd-modal-button.is-active,
body.dpd-helper-ui .dpd-support-mode-switch .dpd-modal-button[aria-pressed="true"] {
  background: var(--dpd-portal-accent, var(--dpd-personal-accent, #fff200)) !important;
  border-color: var(--dpd-portal-accent-border, var(--dpd-personal-accent-border, rgba(255, 242, 0, 0.5))) !important;
  color: var(--dpd-portal-accent-ink, var(--dpd-personal-accent-ink, #10161d)) !important;
}

body.dpd-helper-ui .dpd-modal-kicker,
body.dpd-helper-ui .dpd-support-result-row__status--review,
body.dpd-helper-ui .dpd-support-search-card__eyebrow,
body.dpd-helper-ui .dpd-support-assistant__eyebrow {
  background: var(--dpd-portal-surface-muted, rgba(16, 24, 32, 0.045)) !important;
  border-color: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.14)) !important;
  color: var(--dpd-portal-accent-ink, var(--dpd-personal-accent-ink, #10161d)) !important;
}

body.dpd-helper-ui .dpd-modal-dialog,
body.dpd-helper-ui .dpd-support-conversation-card,
body.dpd-helper-ui .dpd-support-search-card,
body.dpd-helper-ui .dpd-support-assistant__result {
  border-color: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.14)) !important;
}

body.dpd-helper-ui .dpd-support-chat-bubble--user {
  background: var(--dpd-portal-surface-muted, rgba(16, 24, 32, 0.045)) !important;
  border-color: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.14)) !important;
  color: #101820 !important;
}

body.dpd-helper-ui .dpd-modal-dialog input:focus,
body.dpd-helper-ui .dpd-modal-dialog select:focus,
body.dpd-helper-ui .dpd-modal-dialog textarea:focus {
  border-color: var(--dpd-portal-accent-border, var(--dpd-personal-accent-border, rgba(255, 242, 0, 0.5))) !important;
  box-shadow: 0 0 0 3px rgba(var(--dpd-portal-accent-rgb, 255, 242, 0), 0.16) !important;
  outline: none !important;
}

/* Workspace accent modal surface propagation - 2026-06-18 */
body.dpd-helper-ui .dpd-modal-shell {
  --dpd-helper-page-bg: var(--dpd-portal-page-bg, #edf5f8);
  --dpd-helper-page-bg-2: var(--dpd-portal-page-bg-2, #f8fafb);
  --dpd-helper-surface: var(--dpd-portal-surface, rgba(255, 255, 255, 0.94));
  --dpd-helper-card-border: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.1));
  --dpd-helper-muted: var(--dpd-portal-surface-muted, rgba(16, 24, 32, 0.035));
}

body.dpd-helper-ui[data-dpd-accent="green"] .dpd-modal-shell {
  --dpd-helper-page-bg: #f1f7f6;
  --dpd-helper-page-bg-2: #edf3f2;
  --dpd-helper-card-border: rgba(82, 125, 116, 0.16);
  --dpd-helper-muted: rgba(82, 125, 116, 0.055);
}

body.dpd-helper-ui[data-dpd-accent="blue"] .dpd-modal-shell {
  --dpd-helper-page-bg: #f2f6fa;
  --dpd-helper-page-bg-2: #edf2f7;
  --dpd-helper-card-border: rgba(84, 118, 150, 0.16);
  --dpd-helper-muted: rgba(84, 118, 150, 0.06);
}

body.dpd-helper-ui[data-dpd-accent="orange"] .dpd-modal-shell {
  --dpd-helper-page-bg: #fff5eb;
  --dpd-helper-page-bg-2: #fbf0e4;
  --dpd-helper-card-border: rgba(255, 138, 0, 0.28);
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-shell {
  --dpd-helper-page-bg: #ffffff;
  --dpd-helper-page-bg-2: #f6f8fa;
  --dpd-helper-card-border: rgba(16, 24, 32, 0.18);
}

body.dpd-helper-ui[data-dpd-accent="dirt"] .dpd-modal-shell,
body.dpd-helper-ui[data-theme-mode="offroad"] .dpd-modal-shell,
body.dpd-helper-ui.dpd-v2-accent-offroad .dpd-modal-shell {
  --dpd-helper-page-bg: #f4f1ed;
  --dpd-helper-page-bg-2: #eef1f0;
  --dpd-helper-card-border: rgba(143, 103, 63, 0.18);
  --dpd-helper-muted: rgba(143, 103, 63, 0.065);
}

body.dpd-helper-ui .dpd-modal-dialog,
body.dpd-helper-ui .dpd-modal-body {
  background:
    radial-gradient(circle at 14% 0%, var(--dpd-portal-bg-glow, rgba(16, 24, 32, 0.035)), rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, var(--dpd-helper-page-bg) 0%, var(--dpd-helper-page-bg-2) 100%) !important;
}

body.dpd-helper-ui .dpd-modal-header,
body.dpd-helper-ui .dpd-modal-card,
body.dpd-helper-ui .dpd-support-search-card,
body.dpd-helper-ui .dpd-support-conversation-card,
body.dpd-helper-ui .dpd-support-guide-card,
body.dpd-helper-ui .dpd-support-guide-link,
body.dpd-helper-ui .dpd-support-assistant__result-card,
body.dpd-helper-ui .dpd-support-assistant__section,
body.dpd-helper-ui .dpd-support-routing-preview,
body.dpd-helper-ui .dpd-support-answer-card,
body.dpd-helper-ui .dpd-support-result-row,
body.dpd-helper-ui .dpd-support-meta__item,
body.dpd-helper-ui .dpd-support-metric,
body.dpd-helper-ui .dpd-support-ops-card:not(.is-emphasis) {
  background:
    radial-gradient(circle at 90% 8%, var(--dpd-helper-muted), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, var(--dpd-helper-surface) 100%) !important;
  border-color: var(--dpd-helper-card-border) !important;
}

body.dpd-helper-ui .dpd-modal-button--secondary,
body.dpd-helper-ui .dpd-modal-button--secondary:visited,
body.dpd-helper-ui .dpd-modal-button--secondary:hover,
body.dpd-helper-ui .dpd-modal-button--secondary:focus,
body.dpd-helper-ui .dpd-support-filter,
body.dpd-helper-ui .dpd-support-prompt,
body.dpd-helper-ui .dpd-support-inline-link {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--dpd-helper-card-border) !important;
  color: #101820 !important;
}

body.dpd-helper-ui .dpd-support-search-composer,
body.dpd-helper-ui .dpd-support-chat-session__panel,
body.dpd-helper-ui .dpd-support-chat-bubble--assistant,
body.dpd-helper-ui .dpd-support-chat-bubble--welcome {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--dpd-helper-card-border) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.055) !important;
}

body.dpd-helper-ui .dpd-support-search-composer input {
  color: #101820 !important;
}

body.dpd-helper-ui .dpd-support-prompt:hover,
body.dpd-helper-ui .dpd-support-prompt:focus-visible,
body.dpd-helper-ui .dpd-support-filter:hover,
body.dpd-helper-ui .dpd-support-filter:focus-visible {
  background: var(--dpd-helper-muted) !important;
  border-color: var(--dpd-helper-card-border) !important;
  color: #101820 !important;
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary),
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):visited,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):hover,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):focus,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-module--contact .dpd-support-search-composer button,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-module--contact .dpd-support-form-actions button[type="submit"],
body.dpd-helper-ui[data-dpd-accent="dark"] [data-dpd-support-contact-handoff] {
  border-color: rgba(16, 24, 32, 0.72) !important;
  box-shadow: 0 12px 26px rgba(16, 24, 32, 0.12) !important;
}

/* Support helper quiet palette audit - 2026-06-18 */
body.dpd-helper-ui .dpd-modal-shell {
  --dpd-helper-page-bg: var(--dpd-portal-page-bg, #f4f6f8);
  --dpd-helper-page-bg-2: var(--dpd-portal-page-bg-2, #edf1f4);
  --dpd-helper-surface: var(--dpd-portal-surface, rgba(255, 255, 255, 0.96));
  --dpd-helper-card-border: var(--dpd-portal-card-border, rgba(16, 24, 32, 0.095));
  --dpd-helper-muted: var(--dpd-portal-surface-muted, rgba(16, 24, 32, 0.024));
  --dpd-helper-glow: var(--dpd-portal-bg-glow, rgba(16, 24, 32, 0.018));
}

body.dpd-helper-ui[data-dpd-accent="yellow"] .dpd-modal-shell,
body.dpd-helper-ui:not([data-dpd-accent]) .dpd-modal-shell {
  --dpd-helper-page-bg: #f4f6f8;
  --dpd-helper-page-bg-2: #edf1f4;
  --dpd-helper-card-border: rgba(16, 24, 32, 0.095);
  --dpd-helper-muted: rgba(16, 24, 32, 0.024);
  --dpd-helper-glow: rgba(16, 24, 32, 0.018);
}

body.dpd-helper-ui[data-dpd-accent="green"] .dpd-modal-shell {
  --dpd-helper-page-bg: #f5f8f7;
  --dpd-helper-page-bg-2: #f0f4f3;
  --dpd-helper-card-border: rgba(75, 110, 101, 0.105);
  --dpd-helper-muted: rgba(75, 110, 101, 0.032);
  --dpd-helper-glow: rgba(75, 110, 101, 0.024);
}

body.dpd-helper-ui[data-dpd-accent="blue"] .dpd-modal-shell {
  --dpd-helper-page-bg: #f6f8fa;
  --dpd-helper-page-bg-2: #eff3f6;
  --dpd-helper-card-border: rgba(78, 106, 136, 0.11);
  --dpd-helper-muted: rgba(78, 106, 136, 0.034);
  --dpd-helper-glow: rgba(78, 106, 136, 0.026);
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-shell {
  --dpd-helper-page-bg: #f4f6f8;
  --dpd-helper-page-bg-2: #edf1f4;
  --dpd-helper-card-border: rgba(16, 24, 32, 0.13);
  --dpd-helper-muted: rgba(16, 24, 32, 0.032);
  --dpd-helper-glow: rgba(16, 24, 32, 0.022);
}

body.dpd-helper-ui[data-dpd-accent="dirt"] .dpd-modal-shell,
body.dpd-helper-ui[data-theme-mode="offroad"] .dpd-modal-shell,
body.dpd-helper-ui.dpd-v2-accent-offroad .dpd-modal-shell {
  --dpd-helper-page-bg: #f5f4f2;
  --dpd-helper-page-bg-2: #eff1ef;
  --dpd-helper-card-border: rgba(130, 98, 66, 0.11);
  --dpd-helper-muted: rgba(130, 98, 66, 0.034);
  --dpd-helper-glow: rgba(130, 98, 66, 0.026);
}

body.dpd-helper-ui .dpd-modal-dialog,
body.dpd-helper-ui .dpd-modal-body {
  background:
    radial-gradient(circle at 14% 0%, var(--dpd-helper-glow), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, var(--dpd-helper-page-bg) 0%, var(--dpd-helper-page-bg-2) 100%) !important;
}

body.dpd-helper-ui .dpd-modal-header,
body.dpd-helper-ui .dpd-modal-card,
body.dpd-helper-ui .dpd-support-search-card,
body.dpd-helper-ui .dpd-support-conversation-card,
body.dpd-helper-ui .dpd-support-guide-card,
body.dpd-helper-ui .dpd-support-guide-link,
body.dpd-helper-ui .dpd-support-assistant__result-card,
body.dpd-helper-ui .dpd-support-assistant__section,
body.dpd-helper-ui .dpd-support-routing-preview,
body.dpd-helper-ui .dpd-support-answer-card,
body.dpd-helper-ui .dpd-support-result-row,
body.dpd-helper-ui .dpd-support-meta__item,
body.dpd-helper-ui .dpd-support-metric,
body.dpd-helper-ui .dpd-support-ops-card:not(.is-emphasis) {
  background:
    radial-gradient(circle at 90% 8%, var(--dpd-helper-muted), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--dpd-helper-surface) 100%) !important;
  border-color: var(--dpd-helper-card-border) !important;
}

body.dpd-helper-ui .dpd-helper-launcher__button {
  background:
    radial-gradient(circle at 12% 50%, var(--dpd-helper-glow, rgba(16, 24, 32, 0.018)), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #111820 0%, #071014 100%) !important;
  border-color: rgba(255, 242, 0, 0.28) !important;
  box-shadow: 0 16px 34px rgba(8, 12, 18, 0.22), 0 0 0 6px var(--dpd-helper-muted) !important;
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-helper-launcher__button {
  background: linear-gradient(135deg, #101820 0%, #070b0f 100%) !important;
  border-color: rgba(255, 242, 0, 0.42) !important;
  color: #ffffff !important;
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-helper-launcher__icon,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-support-guide-step__count,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-support-chat-bubble__tag:not(.dpd-support-chat-bubble__tag--muted) {
  background: #fff200 !important;
  border-color: rgba(255, 242, 0, 0.48) !important;
  color: #101820 !important;
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary),
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):visited,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):hover,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-button:not(.dpd-modal-button--secondary):focus,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-module--contact .dpd-support-search-composer button,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-module--contact .dpd-support-form-actions button[type="submit"],
body.dpd-helper-ui[data-dpd-accent="dark"] [data-dpd-support-contact-handoff] {
  background: #101820 !important;
  border-color: rgba(255, 242, 0, 0.46) !important;
  box-shadow: 0 12px 26px rgba(16, 24, 32, 0.14) !important;
  color: #fff200 !important;
}

body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-modal-kicker,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-support-result-row__status--review,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-support-search-card__eyebrow,
body.dpd-helper-ui[data-dpd-accent="dark"] .dpd-support-assistant__eyebrow {
  background: rgba(16, 24, 32, 0.045) !important;
  border-color: rgba(16, 24, 32, 0.14) !important;
  color: #101820 !important;
}

body.dpd-helper-ui .dpd-support-search-composer,
body.dpd-helper-ui .dpd-support-chat-session__panel,
body.dpd-helper-ui .dpd-support-chat-bubble--assistant,
body.dpd-helper-ui .dpd-support-chat-bubble--welcome,
body.dpd-helper-ui .dpd-support-chat-bubble--user {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--dpd-helper-card-border) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05) !important;
  color: #101820 !important;
}

/* Support helper system phase 1 - 2026-06-24 */
.dpd-modal-module--contact .dpd-support-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(286px, 340px) !important;
}

.dpd-modal-module--contact .dpd-support-admin-board {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #101820 !important;
  padding: 0 !important;
}

.dpd-modal-module--contact .dpd-support-record-panel {
  background:
    radial-gradient(circle at 92% 0%, var(--dpd-helper-muted, rgba(16, 24, 32, 0.035)), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--dpd-helper-surface, #ffffff)) !important;
  border: 1px solid var(--dpd-helper-card-border, rgba(16, 24, 32, 0.1)) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07) !important;
  overflow: hidden !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary {
  align-items: start !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 5px !important;
  list-style: none !important;
  min-height: 76px !important;
  padding: 16px 18px !important;
  position: relative !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary::-webkit-details-marker {
  display: none !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary::after {
  align-items: center !important;
  background: #101820 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  content: "+" !important;
  display: inline-flex !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  height: 28px !important;
  justify-content: center !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  width: 28px !important;
}

.dpd-modal-module--contact .dpd-support-record-panel[open] .dpd-support-record-panel__summary::after {
  content: "-" !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary .dpd-modal-kicker {
  justify-self: start !important;
  max-width: calc(100% - 42px) !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary strong {
  color: #101820 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.15 !important;
  max-width: calc(100% - 42px) !important;
  text-transform: uppercase !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__summary small {
  color: #536170 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  max-width: calc(100% - 42px) !important;
}

.dpd-modal-module--contact .dpd-support-record-panel__body {
  border-top: 1px solid var(--dpd-helper-card-border, rgba(16, 24, 32, 0.1)) !important;
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

.dpd-modal-module--contact .dpd-support-admin-board__header p {
  color: #536170 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.dpd-modal-module--contact .dpd-support-admin-board .dpd-support-ops-grid {
  gap: 12px !important;
}

.dpd-modal-module--contact .dpd-support-admin-board .dpd-support-ops-card {
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
  gap: 10px !important;
  padding: 14px !important;
}

.dpd-modal-module--contact .dpd-support-admin-board .dpd-support-ops-card.is-emphasis {
  background: linear-gradient(180deg, #101820 0%, #071014 100%) !important;
  border-color: rgba(255, 242, 0, 0.32) !important;
}

.dpd-support-source-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.dpd-support-source-tag {
  align-items: center !important;
  background: rgba(16, 24, 32, 0.045) !important;
  border: 1px solid rgba(16, 24, 32, 0.1) !important;
  border-radius: 999px !important;
  color: #101820 !important;
  display: inline-flex !important;
  gap: 6px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
}

.dpd-support-source-tag strong {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.dpd-support-source-tag small {
  color: #5e6a75 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.dpd-support-ops-card.is-emphasis .dpd-support-source-tag {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.dpd-support-ops-card.is-emphasis .dpd-support-source-tag small {
  color: rgba(255, 255, 255, 0.68) !important;
}

.dpd-support-result-row .dpd-support-source-tags {
  margin-top: -2px !important;
}

.dpd-modal-module--contact .dpd-support-admin-board[data-dpd-support-board-state="idle"] .dpd-support-record-panel__summary {
  min-height: 0 !important;
}

@media (max-width: 920px) {
  .dpd-modal-module--contact .dpd-support-workspace {
    grid-template-columns: 1fr !important;
  }

  .dpd-modal-module--contact .dpd-support-workspace__side,
  .dpd-modal-module--contact .dpd-support-admin-board {
    position: static !important;
  }
}

@media (max-width: 640px) {
  .dpd-modal-module--contact .dpd-support-record-panel__summary {
    min-height: 68px !important;
    padding: 14px 16px !important;
  }

  .dpd-modal-module--contact .dpd-support-record-panel__summary strong,
  .dpd-modal-module--contact .dpd-support-record-panel__summary small,
  .dpd-modal-module--contact .dpd-support-record-panel__summary .dpd-modal-kicker {
    max-width: calc(100% - 38px) !important;
  }
}

/* Support helper handoff polish - 2026-07-08 */
.dpd-modal-header {
  min-height: 0 !important;
}

.dpd-modal-header h2 {
  font-size: clamp(30px, 3vw, 40px) !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
}

.dpd-modal-module--contact .dpd-support-chat-session,
.dpd-support-chat-session {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
}

.dpd-modal-module--contact .dpd-support-chat-session__panel,
.dpd-modal-module--contact .dpd-support-chat-session__results,
.dpd-support-chat-session__panel,
.dpd-support-chat-session__results {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.dpd-modal-module--contact .dpd-support-chat-session__results .dpd-support-ops-grid,
.dpd-support-chat-session__results .dpd-support-ops-grid {
  grid-template-columns: 1fr !important;
}

.dpd-modal-module--contact .dpd-support-ops-grid,
.dpd-support-ops-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.dpd-modal-module--contact .dpd-support-chat-session__results .dpd-support-ops-card,
.dpd-support-chat-session__results .dpd-support-ops-card {
  border-radius: 14px !important;
  padding: 12px !important;
}

.dpd-modal-module--contact .dpd-support-result-row__header,
.dpd-support-result-row__header {
  flex-wrap: wrap !important;
}

.dpd-modal-module--contact .dpd-support-result-row,
.dpd-support-result-row {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.dpd-helper-ui .dpd-support-chat-bubble--user p {
  color: #101820 !important;
}

body.dpd-helper-ui .dpd-support-chat-bubble--user .dpd-support-chat-bubble__eyebrow {
  color: #596573 !important;
}

@media (max-width: 1100px) {
  .dpd-modal-module--contact .dpd-support-chat-session,
  .dpd-support-chat-session {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .dpd-modal-header h2 {
    font-size: clamp(28px, 9vw, 36px) !important;
  }
}

/* Support helper chat shell - 2026-07-08 */
.dpd-modal-shell--support-chat {
  align-items: center !important;
  padding: 12px !important;
}

.dpd-modal-shell--support-chat .dpd-modal-dialog {
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  /* vh FIRST, dvh second — this pair is a fallback, not a duplicate. A browser that
     cannot parse `dvh` drops the second pair and still gets a real height from the
     first. Where dvh IS supported the later pair wins on source order.
     This is defensive only. It is NOT what fixed the Helper opening short and jumping
     to full height — that was a specificity loss to dpd-v2-portal.css, corrected in the
     body.dpd-helper-ui block further down, which is the rule that actually wins. */
  height: min(1100px, calc(100vh - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  height: min(1100px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  max-width: min(760px, calc(100vw - 24px)) !important;
  overflow: hidden !important;
  width: min(760px, calc(100vw - 24px)) !important;
}

.dpd-modal-shell--support-chat .dpd-modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 24, 32, 0.08) !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  position: relative !important;
}

.dpd-modal-shell--support-chat .dpd-modal-kicker {
  background: transparent !important;
  border: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-modal-header h2 {
  font-size: clamp(26px, 4vw, 34px) !important;
  line-height: 1 !important;
}

.dpd-modal-shell--support-chat .dpd-modal-body {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* SPECIFICITY OVERRIDE — do not fold these back into the two rules above.
 *
 * dpd-v2-portal.css carries `body.dpd-helper-ui .dpd-modal-dialog { height: auto
 * !important; max-height: calc(100vh - 24px) !important }` and a matching .dpd-modal-body
 * cap. That selector is (0,2,1); the plain .dpd-modal-shell--support-chat ones above are
 * (0,2,0), so it won every time and the Helper dialog sized to its CONTENT — painting
 * short during the loading skeleton and jumping to full height once loaded. Adding
 * `body.dpd-helper-ui` here takes this to (0,3,1) so the fixed height survives.
 *
 * Units were never the issue: the vh pair above is a genuine fallback for browsers
 * without dvh, but it could not have fixed this on its own. */
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-modal-dialog {
  height: min(1100px, calc(100vh - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  height: min(1100px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-modal-body {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-modal-module--contact {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-hero {
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 24, 32, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  grid-template-columns: 1fr !important;
  padding: 10px 18px !important;
}

.dpd-modal-shell--support-chat .dpd-support-hero__copy h3,
.dpd-modal-shell--support-chat .dpd-support-hero__copy p {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-meta {
  display: flex !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.dpd-modal-shell--support-chat .dpd-support-meta__item {
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 7px 10px !important;
  width: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-meta__item strong {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-meta__item span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.dpd-modal-shell--support-chat .dpd-support-mode-switch {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-mode-switch .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-support-contact-page-link {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  width: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-panel.is-active {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px !important;
}

.dpd-modal-shell--support-chat .dpd-support-panel[data-dpd-support-panel="answers"].is-active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-workspace-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

.dpd-modal-shell--support-chat .dpd-support-workspace {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

.dpd-modal-shell--support-chat .dpd-support-workspace__side,
.dpd-modal-shell--support-chat .dpd-support-admin-board,
.dpd-modal-shell--support-chat .dpd-support-secondary {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-workspace__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-conversation-card {
  background: #f4f7fa !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  order: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-conversation-card__intro {
  align-items: center !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 24, 32, 0.08) !important;
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 10px 18px !important;
}

.dpd-modal-shell--support-chat .dpd-support-conversation-card__intro p {
  color: #5d6975 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 34ch !important;
  text-align: right !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__result {
  background: #f4f7fa !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__empty {
  align-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(16, 24, 32, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  min-height: 140px !important;
  padding: 18px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-session {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  min-height: 100% !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-thread {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble {
  border: 1px solid rgba(16, 24, 32, 0.08) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
  clear: both !important;
  gap: 8px !important;
  max-width: min(82%, 520px) !important;
  padding: 12px 14px !important;
  width: fit-content !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--user {
  align-self: flex-end !important;
  background: #101820 !important;
  border-color: #101820 !important;
  border-radius: 18px 18px 6px 18px !important;
  color: #ffffff !important;
  justify-self: end !important;
  margin-left: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--user p,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-chat-bubble--user p {
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--user .dpd-support-chat-bubble__eyebrow,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-chat-bubble--user .dpd-support-chat-bubble__eyebrow {
  color: rgba(255, 255, 255, 0.62) !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant,
.dpd-modal-shell--support-chat .dpd-support-chat-bubble--welcome {
  align-self: flex-start !important;
  background: #ffffff !important;
  border-radius: 18px 18px 18px 6px !important;
  color: #101820 !important;
  justify-self: start !important;
  margin-right: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__tags {
  gap: 6px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__tag {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  min-height: 22px !important;
  padding: 0 9px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__tags .dpd-support-chat-bubble__tag:nth-child(n+3) {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant h5 {
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant > p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant.has-inline-results {
  max-width: min(94%, 720px) !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline {
  display: grid !important;
  gap: 10px !important;
  margin-top: 4px !important;
  min-width: min(100%, 420px) !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-inline-results,
.dpd-modal-shell--support-chat .dpd-support-chat-inline-results__section {
  display: grid !important;
  gap: 8px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-inline-results__header {
  align-items: center !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: space-between !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-inline-results__header span,
.dpd-modal-shell--support-chat .dpd-support-chat-inline-results__header strong {
  color: #101820 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-inline-results__header strong {
  align-items: center !important;
  background: #fff200 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: 22px !important;
  min-width: 28px !important;
  padding: 0 8px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-result-list {
  gap: 8px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-result-row {
  border-radius: 12px !important;
  gap: 8px !important;
  padding: 10px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-result-row__title {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-result-row__meta,
.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-result-row__note {
  font-size: 12px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-source-tags {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble__inline .dpd-support-inline-link {
  font-size: 10px !important;
  letter-spacing: 0 !important;
  min-height: 30px !important;
  padding: 0 12px !important;
}

.dpd-modal-shell--support-chat .dpd-support-dealer-detail {
  border-radius: 14px !important;
  gap: 10px !important;
  padding: 12px !important;
}

.dpd-modal-shell--support-chat .dpd-support-dealer-detail__grid {
  gap: 7px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.dpd-modal-shell--support-chat .dpd-support-dealer-detail__grid div {
  border-radius: 10px !important;
  padding: 8px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-session__panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions .dpd-modal-button {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  width: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(16, 24, 32, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer summary {
  color: #101820 !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  list-style: none !important;
  padding: 11px 13px !important;
  text-transform: uppercase !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer summary::-webkit-details-marker {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer__body {
  border-top: 1px solid rgba(16, 24, 32, 0.08) !important;
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-card {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(16, 24, 32, 0.08) !important;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.05) !important;
  flex: 0 0 auto !important;
  /* Peg the composer + chips to the bottom of the modal (sticky chat-bar), even when the
     results above are short/empty and don't fill the height. margin-top:auto absorbs the free
     space so the bar never floats up into the middle. */
  margin: auto 0 0 0 !important;
  order: 2 !important;
  overflow: hidden !important;
  padding: 12px 18px 14px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-card__intro {
  display: none !important;
}

/* The composer is the last child of the conversation card, which is a fixed-height
 * flex column whose .dpd-support-assistant__result is the only scroller. Pinning the
 * row as a non-shrinking footer is what makes it behave like a messaging app: the
 * thread scrolls under it and the input never leaves the bottom of the panel.
 *
 * flex: 0 0 auto is the load-bearing part — without it the row shrinks as the thread
 * grows and the input drifts up out of reach. The surface + top border stop scrolled
 * bubbles showing through from behind it.
 *
 * Written at body.dpd-helper-ui specificity deliberately: dpd-v2-portal.css
 * overrides plain .dpd-modal-shell--support-chat selectors at (0,2,1), which is what
 * defeated the dialog height rule above. */
.dpd-modal-shell--support-chat .dpd-support-search-row,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-row {
  background: #ffffff !important;
  border-top: 1px solid rgba(16, 24, 32, 0.08) !important;
  bottom: 0 !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  position: sticky !important;
  z-index: 2 !important;
}

/* The prompt chips live inside the pinned row, so an account with many of them would
 * eat the thread. Cap them and let the chip area scroll on its own instead. */
.dpd-modal-shell--support-chat .dpd-support-prompt-list,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-prompt-list {
  max-height: 96px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-search,
.dpd-modal-shell--support-chat .dpd-support-search-composer {
  width: 100% !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer {
  background: #ffffff !important;
  border: 1px solid rgba(16, 24, 32, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 4px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer button {
  min-height: 42px !important;
  padding: 0 18px !important;
}

.dpd-support-inline-link--impersonate.is-disabled-account {
  opacity: 0.85;
}
.dpd-support-impersonate-flag {
  color: #b4232a;
  font-weight: 600;
  white-space: nowrap;
}

.dpd-support-primary-support {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
}
.dpd-support-primary-support .dpd-support-create-ticket-primary {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.dpd-support-primary-support__hint {
  color: rgba(16, 24, 32, 0.6);
  flex: 1 1 160px;
  font-size: 12px;
  line-height: 1.35;
  min-width: 140px;
}

.dpd-modal-shell--support-chat .dpd-support-prompt-list {
  display: flex !important;
  /* Wrap the prompt chips instead of forcing a single nowrap strip: the parent
     search card is overflow:hidden, so a long chip (e.g. "Search tire sales by
     invoice number") was clipped at desktop width with no scroll affordance.
     Wrapping keeps every quick action fully visible. */
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow-x: visible !important;
  padding: 0 0 4px !important;
}

.dpd-modal-shell--support-chat .dpd-support-prompt {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

.dpd-modal-shell--support-chat .dpd-support-filter-row {
  display: none !important;
}

@media (max-width: 640px) {
  .dpd-modal-shell--support-chat {
    padding: 0 !important;
  }

  .dpd-modal-shell--support-chat .dpd-modal-dialog {
    border-radius: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .dpd-modal-shell--support-chat .dpd-support-conversation-card__intro p {
    display: none !important;
  }

  .dpd-modal-shell--support-chat .dpd-support-chat-bubble {
    max-width: 92% !important;
  }
}

/* Support helper smart search controls - 2026-07-08 */
.dpd-modal-module--contact .dpd-support-search-composer,
.dpd-modal-shell--support-chat .dpd-support-search-composer {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}

.dpd-support-search-clear[hidden] {
  display: none !important;
}

.dpd-support-search-clear {
  align-items: center !important;
  align-self: stretch !important;
  background: #ffffff !important;
  border: 1px solid rgba(16, 24, 32, 0.14) !important;
  border-radius: 999px !important;
  color: #101820 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  min-height: 42px !important;
  min-width: 68px !important;
  padding: 0 14px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Support helper compact live-search polish - 2026-07-08 */
.dpd-modal-shell--support-chat .dpd-support-mode-switch .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-support-contact-page-link,
.dpd-modal-shell--support-chat .dpd-support-chat-bubble__tag,
.dpd-modal-shell--support-chat .dpd-support-assistant__actions .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-support-chat-drawer summary,
.dpd-modal-shell--support-chat .dpd-support-prompt,
.dpd-modal-shell--support-chat .dpd-support-metric__label,
.dpd-modal-shell--support-chat .dpd-support-ops-card__eyebrow {
  letter-spacing: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions {
  flex-wrap: wrap !important;
  max-height: none !important;
  overflow: visible !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-support-assistant__actions .dpd-support-contact-handoff {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer__body {
  max-height: min(320px, 42dvh) !important;
  overflow: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-ops-grid {
  gap: 8px !important;
  grid-template-columns: 1fr !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-ops-card {
  border-radius: 12px !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-ops-card__title {
  font-size: 16px !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-ops-card__copy {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-metric-strip {
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-metric {
  border-radius: 12px !important;
  gap: 4px !important;
  min-height: 0 !important;
  padding: 10px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer .dpd-support-metric__value {
  font-size: 16px !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.dpd-modal-shell--support-chat .dpd-support-record-panel[open] .dpd-support-record-panel__body {
  max-height: min(320px, 42dvh) !important;
  overflow: auto !important;
}

.dpd-modal-shell--support-chat .dpd-support-record-panel .dpd-support-ops-grid {
  grid-template-columns: 1fr !important;
}

.dpd-support-search-clear:hover,
.dpd-support-search-clear:focus-visible {
  border-color: rgba(31, 214, 177, 0.72) !important;
  outline: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer input {
  min-width: 0 !important;
}

@media (max-width: 420px) {
  .dpd-modal-module--contact .dpd-support-search-composer,
  .dpd-modal-shell--support-chat .dpd-support-search-composer {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .dpd-modal-module--contact .dpd-support-search-composer input,
  .dpd-modal-shell--support-chat .dpd-support-search-composer input {
    grid-column: 1 / -1 !important;
  }

  .dpd-support-search-clear,
  .dpd-modal-shell--support-chat .dpd-support-search-composer .dpd-modal-button {
    width: 100% !important;
  }
}

/* Support helper: history layout (replaces two-sided chat bubbles) - 2026-07-13 */
.dpd-support-history-header {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 2px !important;
}

.dpd-support-history-header__label {
  color: #6b747d !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.dpd-support-history-clear {
  background: transparent !important;
  border: 1px solid rgba(16, 24, 32, 0.16) !important;
  border-radius: 999px !important;
  color: #48525d !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.dpd-support-history-clear:hover {
  background: #101820 !important;
  border-color: #101820 !important;
  color: #ffffff !important;
}

.dpd-support-history-item {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}

.dpd-support-history-item.is-previous {
  opacity: 0.72 !important;
}

/* No accent rule and no left inset: the eyebrow it used to sit beside is gone, and a
   coloured edge on every question read as decoration rather than meaning. The question
   is already distinguished from the answer by weight and position. */
.dpd-support-history-item__question {
  align-items: baseline !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  padding: 2px 0 !important;
}

.dpd-support-history-item__eyebrow {
  color: #6b747d !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.dpd-support-history-item__question p {
  color: #12171d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Answer card spans the full history row, left-aligned, no chat max-width cap */
.dpd-support-history-item .dpd-support-chat-bubble--assistant {
  align-self: stretch !important;
  justify-self: stretch !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* =====================================================================
   Support Helper — flat restyle (2026-07-14)
   Scoped to the support module (.dpd-modal-module--contact) and appended
   last so it wins the cascade over the earlier layered overrides.
   Principles: one yellow primary per view · flat, no shadows/pills ·
   say-it-once. Design approved 2026-07-14.
   ===================================================================== */

/* --- Flatten: remove the puffy drop-shadows across support surfaces --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-modal-card,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-card,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-conversation-card,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-admin-board,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-secondary,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-ops-card,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-bubble--assistant,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-answer-card,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt {
  box-shadow: none !important;
}

/* --- Buttons default to neutral inside the module; yellow is opt-in below --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-modal-button:not(.dpd-modal-button--secondary) {
  background: #ffffff !important;
  border: 1px solid rgba(17, 22, 27, 0.18) !important;
  color: #12171d !important;
  box-shadow: none !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-modal-button:not(.dpd-modal-button--secondary):hover,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-modal-button:not(.dpd-modal-button--secondary):focus-visible {
  border-color: rgba(17, 22, 27, 0.4) !important;
}

/* --- The one yellow primary per view: the Ask submit (resume is a quiet outlined action) --- */
body.dpd-helper-ui .dpd-modal-module--contact [data-dpd-support-submit] {
  background: #fff200 !important;
  border: 1px solid #fff200 !important;
  color: #10161d !important;
  box-shadow: none !important;
}

/* --- Composer: Clear becomes a quiet ghost (was yellow via search-composer rule) --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer button:not([data-dpd-support-submit]),
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-clear {
  background: transparent !important;
  border: 1px solid rgba(17, 22, 27, 0.16) !important;
  color: rgba(17, 22, 27, 0.68) !important;
  box-shadow: none !important;
}

/* --- Nav: flat text tabs with arrow-reveal (replaces the puffy pills) --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-mode-switch {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(17, 22, 27, 0.6) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 38px;
  padding: 6px 2px !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab:hover,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab:focus-visible {
  color: #12171d !important;
  outline: none;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab.is-active {
  color: #12171d !important;
  border-bottom-color: #fff200 !important;
}
.dpd-support-nav-more__caret { transition: transform 0.18s ease; font-size: 15px; }
.dpd-support-nav-more.is-open .dpd-support-nav-more__caret { transform: rotate(90deg); }
/* The extra tabs slide out from behind "More" rather than snapping in. Closed is the default
   state so the first paint never flashes them open; JS adds .is-open to reveal, and only re-adds
   the `hidden` attribute once the collapse has finished (see toggleSupportNavExtra). max-width is
   what actually animates the reveal — the siblings reflow around it — while the fade and nudge
   stop it reading as a jump. */
.dpd-support-nav-extra {
  display: flex;
  /* nowrap is load-bearing for the reveal, not a layout preference: with wrap, max-width:0 forces
     every tab onto its own line, so the row opens ~4 rows tall and un-wraps line by line as it
     widens — you see the height collapse rather than a slide. Held on one line, only the width
     changes and the height stays put. */
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 4px 18px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-8px);
  transition: max-width 0.3s ease, opacity 0.22s ease, transform 0.3s ease;
}
/* Keep their natural width so the container's overflow clips them — a flex item defaults to
   flex-shrink:1, so inside a max-width:0 box they would squeeze to nothing and the reveal would
   read as the labels stretching open rather than sliding out. */
.dpd-support-nav-extra > * { flex: 0 0 auto; }
.dpd-support-nav-extra.is-open { max-width: 1000px; opacity: 1; transform: none; }
.dpd-support-nav-extra[hidden] { display: none; }
@media (max-width: 760px) {
  .dpd-support-nav-extra > * { flex: 0 1 auto; }
  /* Stacked layout: the switch becomes a single grid column, so there is no horizontal room to
     slide across and nowrap would push tabs out of reach behind overflow:hidden. Let them wrap
     and just fade. */
  .dpd-support-nav-extra { flex-wrap: wrap; white-space: normal; max-width: none; overflow: visible; transform: none; transition: opacity 0.2s ease; }
  .dpd-support-nav-extra.is-open { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dpd-support-nav-extra { transition: none; }
}

/* --- Resume banner: compact ticket card above the composer (ref + status · action) --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-conversation-state {
  background: rgba(255, 242, 0, 0.09) !important;
  border: 1px solid rgba(255, 242, 0, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #12171d !important;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  justify-content: flex-start;
  margin: 14px 16px 12px !important;
  padding: 7px 12px !important;
}
/* …but not when there is nothing to resume. The banner hides itself with the `hidden`
   attribute, and the base rule that honours it (.dpd-support-conversation-state[hidden])
   is LESS specific than the two themed rules above that force `display` — so the empty
   card kept painting as a bare yellow pill above the composer. Re-state the guard on the
   same ancestor chain; it also covers the narrow-modal `display: grid` override below. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-conversation-state[hidden] {
  display: none !important;
}
.dpd-support-resume__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dpd-support-resume__headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dpd-support-resume__title {
  color: #12171d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dpd-support-resume__status {
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  text-transform: uppercase;
}
.dpd-support-resume__status--open { background: rgba(35, 152, 78, 0.14); color: #1c7a3f; }
.dpd-support-resume__status--answered { background: rgba(23, 105, 170, 0.14); color: #14639c; }
.dpd-support-resume__status--waiting { background: rgba(176, 122, 12, 0.18); color: #99680a; }
.dpd-support-resume__status--closed { background: rgba(17, 22, 27, 0.1); color: rgba(17, 22, 27, 0.6); }
.dpd-support-resume__main {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 27, 0.16);
  border-radius: 10px;
  color: #12171d;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  min-height: 30px;
  padding: 0 11px;
  text-transform: uppercase;
  white-space: nowrap;
}
.dpd-support-resume__main:hover { border-color: rgba(17, 22, 27, 0.4); }
.dpd-support-resume__arrow { font-size: 13px; }
.dpd-support-resume__dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgba(17, 22, 27, 0.5);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  padding: 8px;
}
.dpd-support-resume__dismiss:hover { color: #12171d; }
/* Narrow modal: let the action drop to a full-width second row rather than crushing the ref. */
@media (max-width: 560px) {
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-conversation-state {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dpd-support-resume__body { grid-column: 1 / -1; min-width: 0; }
  .dpd-support-resume__headline { align-items: flex-start; flex-wrap: wrap; }
  .dpd-support-resume__title {
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .dpd-support-resume__main { grid-column: 1; justify-content: center; width: 100%; }
  .dpd-support-resume__dismiss { grid-column: 2; }
}

/* --- Answer bubble: single muted source label (badges removed) --- */
.dpd-support-chat-bubble__source {
  color: rgba(17, 22, 27, 0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Idle quick-action group + drawer (module mode): flat, tidy, no shadow --- */
/* Secondary buttons keep a shadow from the base rules; kill it inside the module,
   and drop the container panel's shadow/card so the group sits flat on the surface. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-modal-button--secondary,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-session__panel {
  box-shadow: none !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-session__panel {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Tidy the three quick-action buttons into a consistent flat group. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-assistant__actions {
  gap: 8px !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-assistant__actions .dpd-modal-button {
  box-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  min-height: 38px !important;
  padding: 0 16px !important;
}

/* "Route if needed" drawer: slim, quiet — not a big empty white bar. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-drawer {
  background: transparent !important;
  border: 1px solid rgba(17, 22, 27, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-drawer summary {
  color: rgba(17, 22, 27, 0.58) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  padding: 9px 12px !important;
  text-transform: uppercase !important;
}
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-drawer summary:hover {
  color: #12171d !important;
}

/* --- Accessibility: focus-visible, touch targets, reduced motion --- */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab:focus-visible,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-resume__main:focus-visible,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-resume__dismiss:focus-visible,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt:focus-visible,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-filter:focus-visible,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-chat-drawer summary:focus-visible {
  outline: 2px solid #12171d !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* Keep the dismiss target comfortably tappable. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-resume__dismiss {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-nav-more__caret,
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt {
    transition: none !important;
  }
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt:hover,
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt:focus-visible {
    transform: none !important;
  }
}

/* --- Mobile: dock the Helper launcher to the bottom-right, not full-width ---
   Higher specificity (body.dpd-helper-ui + class) so it beats every earlier
   breakpoint rule (580/640/767) that stretched it edge-to-edge. --- */
@media (max-width: 767px) {
  body .dpd-helper-launcher,
  body.dpd-helper-ui .dpd-helper-launcher {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: min(320px, calc(100vw - 28px)) !important;
  }
  body .dpd-helper-launcher__button,
  body.dpd-helper-ui .dpd-helper-launcher__button {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* --- Mobile: keep the Helper modal below the fixed site header (respect it, don't
   sit under it). Header is z-index 10030 sticky; the modal shell is only 2000, so the
   header painted over the modal's title/close. Offset the dialog by the header height
   and shrink it to fit. --- */
@media (max-width: 767px) {
  /* Deterministic panel: fill the shell edge-to-edge with no right-anchoring, so there is
     no left-gap / right-clip skew. The base rule uses margin-left:auto (drawer style). */
  body.dpd-helper-ui .dpd-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--dpd-v2-header-height, 76px) !important;
    height: calc(100dvh - var(--dpd-v2-header-height, 76px) - 12px) !important;
    max-height: calc(100dvh - var(--dpd-v2-header-height, 76px) - 12px) !important;
  }
  /* Collapse the support two-column grids to one column so nothing forces the content
     wider than the phone (chat-session is forced 2-col globally at line ~512). */
  body.dpd-helper-ui .dpd-support-chat-session,
  body.dpd-helper-ui .dpd-support-workspace,
  body.dpd-helper-ui .dpd-support-ops-grid {
    grid-template-columns: 1fr !important;
  }
  /* Let flex/grid children shrink instead of overflowing. NOTE: do NOT add overflow-x here
     to the inner containers — the single-scroll model needs modal-body to be the only
     scroll context (modal-body already clips overflow-x on its own). Adding it to inner
     elements turns them into nested scroll contexts and breaks vertical scrolling. */
  body.dpd-helper-ui .dpd-support-workspace,
  body.dpd-helper-ui .dpd-support-workspace__main,
  body.dpd-helper-ui .dpd-support-conversation-card,
  body.dpd-helper-ui .dpd-support-assistant__result,
  body.dpd-helper-ui .dpd-support-chat-thread {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* On mobile, drop the shortcut/filter rows under the composer so the text box is the last
     element at the bottom (they were getting cut off and eating scroll room). */
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt-list,
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-filter-row {
    display: none !important;
  }
  /* Give the composer breathing room at the bottom so it isn't flush against the dialog edge
     (and clears the phone's home indicator). The composer is position:sticky;bottom:0, so the
     room has to come from the scroll container (.dpd-modal-body), not padding inside the card. */
  body.dpd-helper-ui .dpd-modal-body {
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
  }
  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-card {
    padding-bottom: 16px !important;
  }
}

/* =====================================================================
   Support Helper workspace redesign — 2026-07-16
   Compact page-aware hierarchy: Help / Activity / Support, explicit
   actor-account-mode context, persistent request action, and review flow.
   This final scoped layer intentionally leaves every data provider intact.
   ===================================================================== */

.dpd-modal-shell--support-chat .dpd-modal-dialog {
  background: #f2f5f8 !important;
  max-width: min(840px, 100vw) !important;
}

.dpd-modal-shell--support-chat .dpd-modal-header {
  background: rgba(255, 255, 255, 0.98) !important;
  min-height: 78px !important;
  padding: 14px 20px !important;
}

.dpd-modal-shell--support-chat .dpd-modal-header .dpd-modal-kicker {
  color: #66717d !important;
  font-size: 9px !important;
  margin-bottom: 2px !important;
}

.dpd-modal-shell--support-chat .dpd-modal-header h2 {
  color: #0f141a !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
}

.dpd-modal-shell--support-chat .dpd-modal-close {
  height: 42px !important;
  width: 42px !important;
}

.dpd-modal-shell--support-chat .dpd-modal-body {
  height: calc(100% - 78px) !important;
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-modal-module--contact {
  gap: 0 !important;
  min-height: 100% !important;
}

.dpd-modal-shell--support-chat .dpd-support-hero {
  background: #ffffff !important;
  border-bottom: 1px solid #dfe4e8 !important;
  display: grid !important;
  gap: 9px !important;
  padding: 14px 20px 12px !important;
}

.dpd-support-context {
  align-items: end;
  display: grid;
  gap: 10px 18px;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.4fr);
}

.dpd-support-context__eyebrow {
  color: #64707c;
  font-size: 9px;
  font-weight: 800;
  grid-column: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dpd-modal-shell--support-chat .dpd-support-context h3 {
  color: #11171d !important;
  font-size: 16px !important;
  font-weight: 760 !important;
  grid-column: 1;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: -5px 0 0 !important;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
  white-space: nowrap;
}

.dpd-support-context__facts {
  display: grid;
  gap: 8px;
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.dpd-support-context__facts div {
  background: #f5f7f9;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  min-width: 0;
  padding: 8px 10px;
}

.dpd-support-context__facts dt {
  color: #707b86;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.dpd-support-context__facts dd {
  color: #151b21;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpd-support-context__facts dd span {
  color: #5d6873;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
}

.dpd-support-toolbar {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-mode-switch {
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  min-width: 0;
  overflow: visible !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab {
  color: #66717c !important;
  font-size: 10px !important;
  min-height: 34px !important;
  padding: 4px 1px !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-tab.is-active {
  color: #11171d !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-primary-request,
body.dpd-helper-ui .dpd-modal-module--contact [data-dpd-support-review-request],
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-request-review button[type="submit"] {
  background: #fff200 !important;
  border: 1px solid #e8dc00 !important;
  border-radius: 10px !important;
  color: #101418 !important;
  flex: 0 0 auto;
  font-size: 10px !important;
  letter-spacing: 0.13em !important;
  min-height: 38px !important;
  padding: 0 15px !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-primary-request.is-current {
  box-shadow: inset 0 0 0 2px #11171d !important;
}

.dpd-modal-shell--support-chat .dpd-support-panel.is-active {
  background: #f2f5f8 !important;
  padding: 18px 20px 24px !important;
}

.dpd-modal-shell--support-chat .dpd-support-panel[data-dpd-support-panel="answers"].is-active {
  padding: 0 !important;
}

.dpd-modal-shell--support-chat .dpd-support-conversation-card,
.dpd-modal-shell--support-chat .dpd-support-search-card {
  background: #f2f5f8 !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__result {
  background: #f2f5f8 !important;
  padding: 18px 20px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid #dde3e8 !important;
  padding: 12px 20px 8px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-card__intro {
  display: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer {
  background: #ffffff !important;
  border: 1px solid #cfd6dd !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  min-height: 50px !important;
  padding: 4px !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer:focus-within {
  border-color: #c8bd00 !important;
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.22) !important;
}

.dpd-modal-shell--support-chat .dpd-support-search-composer input {
  color: #151b21 !important;
  font-size: 14px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

body.dpd-helper-ui .dpd-modal-module--contact [data-dpd-support-submit] {
  background: #11171d !important;
  border-color: #11171d !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  min-height: 40px !important;
  min-width: 70px;
}

.dpd-modal-shell--support-chat .dpd-support-prompt-list {
  gap: 6px !important;
  margin-top: 0 !important;
  max-height: 62px;
  overflow: hidden;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-prompt {
  background: #f7f8fa !important;
  border: 1px solid #e0e4e8 !important;
  border-radius: 9px !important;
  color: #3e4852 !important;
  font-size: 9px !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-session {
  gap: 10px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant,
.dpd-modal-shell--support-chat .dpd-support-chat-bubble--welcome,
.dpd-support-history-item .dpd-support-chat-bubble--assistant {
  background: #ffffff !important;
  border: 1px solid #dfe4e8 !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  padding: 15px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant h5 {
  color: #151b21 !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-bubble--assistant > p {
  color: #52606d !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.dpd-modal-shell--support-chat .dpd-support-result-row,
.dpd-modal-shell--support-chat .dpd-support-ops-card,
.dpd-modal-shell--support-chat .dpd-support-dealer-detail__grid div,
.dpd-modal-shell--support-chat .dpd-support-metric {
  background: #f8fafb !important;
  border-color: #e2e6ea !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions {
  gap: 7px !important;
}

.dpd-modal-shell--support-chat .dpd-support-assistant__actions .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-modal-actions .dpd-modal-button,
.dpd-modal-shell--support-chat .dpd-support-form-actions .dpd-modal-button {
  border-radius: 9px !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  min-height: 34px !important;
  padding: 0 12px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer {
  border-color: #dfe4e8 !important;
  border-radius: 10px !important;
}

.dpd-modal-shell--support-chat .dpd-support-chat-drawer summary {
  min-height: 32px !important;
}

.dpd-support-activity-shell,
.dpd-modal-shell--support-chat [data-dpd-support-panel="request"] > .dpd-modal-card,
.dpd-modal-shell--support-chat [data-dpd-support-panel="rep"] > .dpd-modal-card,
.dpd-modal-shell--support-chat [data-dpd-support-panel="rep"] .dpd-modal-card,
.dpd-modal-shell--support-chat .dpd-support-guide-shell {
  border: 1px solid #dde3e8 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.dpd-support-section-heading {
  align-items: start;
  border-bottom: 1px solid #e2e6ea;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.dpd-support-section-heading h4,
.dpd-support-form-heading h4 {
  color: #151b21 !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 5px !important;
  text-transform: none !important;
}

.dpd-support-section-heading p,
.dpd-support-form-heading p {
  color: #5a6672 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.dpd-support-activity-questions {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.dpd-support-activity-list {
  display: grid;
  gap: 8px;
}

.dpd-support-activity-item {
  align-items: center;
  appearance: none;
  background: #f8fafb;
  border: 1px solid #e1e6ea;
  border-radius: 11px;
  color: #151b21;
  cursor: pointer;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.dpd-support-activity-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dpd-support-activity-item strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpd-support-activity-item small {
  color: #687480;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpd-support-activity-item em,
.dpd-support-ticket-history__item em {
  background: #dff5ec !important;
  border-radius: 999px;
  color: #08765f !important;
  flex: 0 0 auto;
  font-size: 8px !important;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 6px 8px;
  text-transform: uppercase;
}

.dpd-support-activity-empty {
  align-items: center;
  background: #f8fafb;
  border: 1px dashed #d5dce2;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.dpd-support-activity-empty > span {
  align-items: center;
  background: #fff200;
  border-radius: 10px;
  color: #11171d;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.dpd-support-activity-empty strong {
  color: #151b21;
  display: block;
  font-size: 13px;
}

.dpd-support-activity-empty p {
  color: #65717d !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  margin: 2px 0 0 !important;
}

.dpd-support-form-heading {
  align-items: start !important;
  border-bottom: 1px solid #e2e6ea;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.dpd-support-contact-note {
  background: #11171d !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #ffffff;
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 12px 14px !important;
}

.dpd-support-contact-note span,
.dpd-support-contact-note small {
  color: #aeb8c2 !important;
  font-size: 8px !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dpd-support-contact-note strong {
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.25;
}

.dpd-support-routing-preview--form,
.dpd-support-request-identity {
  background: #f6f8fa !important;
  border: 1px solid #e0e5e9 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 12px;
  padding: 13px 14px !important;
}

.dpd-support-request-identity {
  display: grid;
  gap: 3px;
}

.dpd-support-request-identity span {
  color: #6f7a85;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dpd-support-request-identity strong {
  color: #151b21;
  font-size: 14px;
}

.dpd-support-request-identity small {
  color: #65717d;
  font-size: 11px;
}

.dpd-modal-shell--support-chat .dpd-support-form-grid {
  gap: 12px !important;
  margin-bottom: 12px;
}

.dpd-modal-shell--support-chat .dpd-support-form label > span {
  color: #4d5965 !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}

.dpd-modal-shell--support-chat .dpd-support-form input,
.dpd-modal-shell--support-chat .dpd-support-form select,
.dpd-modal-shell--support-chat .dpd-support-form textarea {
  background: #f7f9fa !important;
  border: 1px solid #dbe1e6 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #151b21 !important;
  font-size: 13px !important;
}

.dpd-support-request-review {
  background: #f8fafb;
  border: 1px solid #dfe4e8;
  border-radius: 14px;
  padding: 16px;
}

.dpd-support-request-review__heading h5 {
  color: #151b21;
  font-size: 20px;
  margin: 0 0 5px;
}

.dpd-support-request-review__heading p {
  color: #5d6975 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.dpd-support-request-review__summary {
  display: grid;
  gap: 0;
  margin: 16px 0;
}

.dpd-support-request-review__summary div {
  border-top: 1px solid #e1e6ea;
  display: grid;
  gap: 12px;
  grid-template-columns: 110px minmax(0, 1fr);
  padding: 10px 0;
}

.dpd-support-request-review__summary dt {
  color: #6b7681;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dpd-support-request-review__summary dd {
  color: #151b21;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

/* Skeleton placeholders for the instant Helper shell. The shell renders the real
   hero, tabs and composer immediately and only these blocks stand in for content
   that needs the server: the workspace facts and the answer list. */
.dpd-support-skeleton {
  align-content: start;
  display: grid;
  gap: 9px;
}

/* Reserve the height the loaded answer list will occupy. The dialog above is
   already pinned, so this is belt-and-braces: if anything else ever drops that
   height, the skeleton still holds the box open instead of letting the dialog
   paint short and snap taller a moment later. align-content keeps the bars at
   the top of it. */
.dpd-support-skeleton--answers {
  gap: 12px;
  margin: 4px 0 18px;
  /* Sized to the three card placeholders rather than to the whole panel. The
     old value reserved most of the dialog, so the bars sat in a large empty
     field and the loading state read as a broken page. */
  min-height: min(320px, calc(100vh - 460px));
}

/* Silhouette of a real answer card, so the skeleton resolves into the content
   instead of being replaced by something with a different shape. */
.dpd-support-skeleton__card {
  background: #ffffff;
  border: 1px solid #e4e8ec;
  border-radius: 14px;
  display: grid;
  gap: 9px;
  padding: 14px 16px;
}

.dpd-support-skeleton--facts {
  gap: 8px;
  grid-template-columns: 1.2fr 1fr;
  margin-top: 10px;
}

.dpd-support-skeleton__line {
  animation: dpd-support-loading-pulse 1.35s ease-in-out infinite;
  background: #e2e7eb;
  border-radius: 9px;
  display: block;
  height: 12px;
}

.dpd-support-skeleton--facts .dpd-support-skeleton__line {
  height: 34px;
}

/* Uneven lengths: uniform full-width bars look like a rendering fault rather
   than text waiting to arrive. */
.dpd-support-skeleton__line--title { height: 14px; width: 42%; }
.dpd-support-skeleton__line--short { width: 64%; }

/* Confirmation that a query typed before the content landed is not lost. */
.dpd-support-shell-pending {
  color: #4a5560;
  font-size: 12px;
  margin: 8px 0 0;
}

@keyframes dpd-support-loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .dpd-modal-shell--support-chat .dpd-modal-dialog {
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
  }

  .dpd-support-context {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .dpd-support-context__eyebrow,
  .dpd-modal-shell--support-chat .dpd-support-context h3,
  .dpd-support-context__facts {
    grid-column: 1;
    grid-row: auto;
  }

  .dpd-support-context__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dpd-support-toolbar {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 8px;
  }

  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-mode-switch {
    gap: 14px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 1px !important;
    scrollbar-width: thin;
  }

  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-mode-switch .dpd-support-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-primary-request {
    align-self: flex-start;
  }

  .dpd-support-section-heading,
  .dpd-support-form-heading {
    display: grid !important;
  }

  .dpd-support-contact-note {
    min-width: 0;
  }

  .dpd-support-request-review__summary div {
    gap: 4px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dpd-modal-shell--support-chat .dpd-modal-header {
    min-height: 70px !important;
    padding: 10px 14px !important;
  }

  .dpd-modal-shell--support-chat .dpd-modal-body {
    height: calc(100% - 70px) !important;
  }

  .dpd-modal-shell--support-chat .dpd-support-hero {
    padding: 12px 14px 10px !important;
  }

  .dpd-modal-shell--support-chat .dpd-support-context h3 {
    max-width: none;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .dpd-modal-shell--support-chat .dpd-support-panel.is-active,
  .dpd-modal-shell--support-chat .dpd-support-assistant__result {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .dpd-modal-shell--support-chat .dpd-support-search-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .dpd-support-context__facts {
    gap: 5px;
    grid-template-columns: 1fr;
  }

  .dpd-support-context__facts div {
    padding: 7px;
  }

  .dpd-support-context__facts dd,
  .dpd-support-context__facts dd span {
    display: block;
    margin-left: 0;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .dpd-support-activity-item {
    align-items: start;
  }

  .dpd-support-skeleton--facts {
    grid-template-columns: 1fr;
  }

  .dpd-support-skeleton--facts .dpd-support-skeleton__line:nth-child(n+2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dpd-support-skeleton__line {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Support Helper — exults/v2 card model (Phase 4 convergence)
 * ---------------------------------------------------------------------------
 * Rendered by dpd-helper-v2.js. Inert until dpd_helper_v2_web_enabled() is true.
 *
 * `record` is a real label/value GRID rather than values joined into a sentence —
 * that is the Cat 1 structured-card requirement, so the layout is the feature, not
 * decoration. Absent values and non-live sources are visibly distinct because the
 * Helper's rule is to label the source, never to pass seed data off as live.
 * ------------------------------------------------------------------------ */

.dpd-helper-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: #fff;
}

.dpd-helper-card__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

/* Title, framing line and the card's own sentence, spaced as one block. The title's
   own bottom margin is dropped here so it does not open a gap mid-head. */
.dpd-helper-card__head {
  display: block;
  margin: 0 0 10px;
}

.dpd-helper-card__head .dpd-helper-card__title {
  margin: 0;
}

.dpd-helper-card__head .dpd-helper-card__subtitle,
.dpd-helper-card__head .dpd-helper-card__text {
  margin: 4px 0 0;
}

.dpd-helper-card__subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.6;
}

.dpd-helper-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* The grid: label above value on narrow screens, two columns once there is room. */
.dpd-helper-card__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  margin: 0;
}

@media (min-width: 480px) {
  .dpd-helper-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dpd-helper-card__field {
  min-width: 0;
}

.dpd-helper-card__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

.dpd-helper-card__value {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The unit is a separate element so "1,250" and "Dunlop Dollars" are never one
   unparseable string. */
.dpd-helper-card__unit {
  font-size: 12px;
  opacity: 0.7;
}

/* Absent data must not look like data. */
.dpd-helper-card__value--absent {
  font-style: italic;
  opacity: 0.6;
}

/* Seed / fallback / deferred sources.
   The 3px left edge that used to mark them is gone by request — it read as a stray
   grey rule down the side of half the answers rather than as meaning. The claim is not
   lost: every card still carries data-source-state, so the distinction is inspectable
   and still crosses the API. It is simply no longer drawn. */
.dpd-helper-card--unverified { border-left: 0; }

.dpd-helper-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dpd-helper-card__action {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
}

.dpd-helper-card__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* `list` — tickets, downloads, promotions, dealers, training, announcements and
   admin-tool rows all share this one renderer. */

.dpd-helper-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dpd-helper-card__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dpd-helper-card__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dpd-helper-card__item-title,
.dpd-helper-card__item-link {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* An item whose href was refused as unsafe renders as plain text — it must not look
   clickable, or the row becomes a dead target. */
.dpd-helper-card__item-title {
  cursor: default;
}

.dpd-helper-card__item-sub {
  font-size: 12px;
  opacity: 0.7;
}

.dpd-helper-card__item-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* `ledger` — the balance belongs to the card; a row is a delta. */

.dpd-helper-card__ledger-balance {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.dpd-helper-card__ledger-balance .dpd-helper-card__label {
  display: block;
  margin-bottom: 2px;
}

.dpd-helper-card__ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dpd-helper-card__ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
}

.dpd-helper-card__ledger-row:last-child {
  border-bottom: 0;
}

.dpd-helper-card__ledger-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Direction is carried by weight and a marker, not by colour alone. */
.dpd-helper-card__ledger-row--credit .dpd-helper-card__ledger-delta { color: #1a7f37; }
.dpd-helper-card__ledger-row--debit .dpd-helper-card__ledger-delta { color: #a4342b; }

.dpd-helper-card__ledger-date {
  grid-column: 1 / -1;
  font-size: 12px;
  opacity: 0.65;
}

/* `thread` */

.dpd-helper-card__entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dpd-helper-card__entry {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dpd-helper-card__entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dpd-helper-card__entry-meta {
  margin: 0 0 4px;
  font-size: 12px;
}

.dpd-helper-card__entry-author { font-weight: 700; }
.dpd-helper-card__entry-date { opacity: 0.65; }

.dpd-helper-card__entry-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* `form` */

.dpd-helper-card__form-field {
  margin: 0 0 10px;
}

.dpd-helper-card__form-field .dpd-helper-card__label {
  display: block;
  margin-bottom: 4px;
}

.dpd-helper-card__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.dpd-helper-card__input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* The exults/v2 slot: filled after paint from the Helper API. Sized so the panel does
   not visibly jump when the cards arrive. */

.dpd-helper-v2-slot {
  min-height: 60px;
}

.dpd-helper-v2-slot[aria-busy="true"] {
  opacity: 0.6;
}

.dpd-helper-v2-slot[data-helper-v2-error] .dpd-helper-card__text {
  font-style: italic;
  opacity: 0.8;
}


/* Card actions render as <a> when the server supplied an href and as <button>
   otherwise, so the pill has to look identical either way — a link that is visibly a
   link beside a button reads as two different kinds of control when they are the same
   affordance. */
a.dpd-helper-card__action {
  align-items: center;
  color: inherit;
  display: inline-flex;
  text-decoration: none;
}
a.dpd-helper-card__action:hover,
a.dpd-helper-card__action:focus { text-decoration: none; }


/* ---------------------------------------------------------------------------
   Support Helper — v2 card layout
   The thread wraps an answer's cards in .dpd-support-chat-cards. That wrapper had no
   styling at all, so cards sat flush against the thread edge and could overrun the
   dialog on a narrow viewport. It owns the stack spacing and the overflow guard now.
   --------------------------------------------------------------------------- */
.dpd-support-chat-cards {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.dpd-support-chat-cards .dpd-helper-card {
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  min-width: 0;
}

/* A long value (a rim-size list, a URL) must wrap rather than widen the card past the
   dialog — that is what pushed content off the right edge. */
.dpd-helper-card__fields,
.dpd-helper-card__value,
.dpd-helper-card__item { min-width: 0; overflow-wrap: anywhere; }

/* Image left, specs right. Falls back to stacked on a narrow viewport, where a
   side-by-side split would leave neither column readable. */
.dpd-helper-card__record {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.dpd-helper-card__record-body { flex: 1 1 auto; min-width: 0; }

.dpd-helper-card__media-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.dpd-helper-card__media {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  display: block;
  height: auto;
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  width: 130px;
}

@media (max-width: 560px) {
  .dpd-helper-card__record { flex-direction: column; }
  .dpd-helper-card__media-wrap { align-self: center; }
  .dpd-helper-card__media { width: 120px; max-height: 120px; }
}


/* A list row wears BOTH .dpd-helper-card__item and .dpd-support-result-row so it gets
   the card model's addressability and the portal's row design. Those two rules collide:
   __item is declared later at equal specificity, so its `padding: 8px 0` and flex
   display won — which is why rows had ZERO left padding and sat flush against the card
   edge. This two-class selector settles it in favour of the row design. */
.dpd-helper-card__item.dpd-support-result-row {
  align-items: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.dpd-helper-card__item.dpd-support-result-row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 14px;
}

/* ==========================================================================
   Start Here — the onboarding checklist, in the helper's Guide tab
   --------------------------------------------------------------------------
   It was on the dashboard for half a day. Somebody who knows where they are
   going does not need a map on their landing page every morning; somebody who
   is lost reaches for the helper, so the map lives there instead.

   A step ticks once the account has opened that page. Rows that are advice
   rather than a destination carry no box at all - a checkbox that can never
   tick reads as something the reader failed to do.
   ========================================================================== */

.dpd-support-guide-checklist {
  border-bottom: 1px solid rgba(16, 24, 32, 0.1);
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.dpd-support-guide-checklist__head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dpd-support-guide-checklist__head h4 {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  margin: 4px 0 6px;
}

.dpd-support-guide-checklist__head p {
  color: #46505c;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 60ch;
}

.dpd-support-guide-checklist__progress {
  color: #46505c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.dpd-support-guide-checklist__progress strong {
  color: #101820;
  font-size: 17px;
}

.dpd-support-guide-checklist__list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dpd-support-guide-checklist__item {
  align-items: start;
  border-top: 1px solid rgba(16, 24, 32, 0.08);
  display: grid;
  gap: 12px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  padding: 12px 0;
}

.dpd-support-guide-checklist__item:first-child {
  border-top: 0;
}

.dpd-support-guide-checklist__mark {
  align-items: center;
  border: 2px solid rgba(16, 24, 32, 0.22);
  border-radius: 5px;
  color: transparent;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  margin-top: 1px;
  width: 22px;
}

/* No box for a row that can never tick. */
.dpd-support-guide-checklist__mark.is-untracked {
  border-color: transparent;
}

.dpd-support-guide-checklist__item.is-done .dpd-support-guide-checklist__mark {
  background: #101820;
  border-color: #101820;
  color: #fff200;
  -webkit-text-fill-color: #fff200;
}

.dpd-support-guide-checklist__body strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 2px;
}

.dpd-support-guide-checklist__item.is-done .dpd-support-guide-checklist__body strong {
  color: #46505c;
}

.dpd-support-guide-checklist__body p {
  color: #46505c;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}

.dpd-support-guide-checklist__where {
  color: #6d7885;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  margin-top: 5px !important;
  text-transform: uppercase;
}

.dpd-support-guide-checklist__item > .dpd-modal-button {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .dpd-support-guide-checklist__head {
    display: block;
  }

  .dpd-support-guide-checklist__progress {
    margin-top: 10px !important;
  }

  .dpd-support-guide-checklist__item {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .dpd-support-guide-checklist__item > .dpd-modal-button {
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
  }
}


/* ==========================================================================
   Support Helper — the ask bar keeps its yellow outline
   --------------------------------------------------------------------------
   The composer only turned yellow on focus, which is no help to the person who
   has not found it yet: a white field inside a white card reads as part of the
   card, not as the one place to type. The outline is standing now.

   It rides the composer rather than the input, so it wraps the field AND the
   Ask button — the bar is one control, and a line drawn around only half of it
   says otherwise. The field itself stays white: the outline is doing the
   pointing, and a wash behind the placeholder would only fight it.

   The line is Dunlop's own #fff200, not the muted gold it started as — a bar
   that is permanently yellow should be the brand's yellow. Focus keeps that
   colour and widens the halo instead of darkening the line, since a duller
   yellow on focus reads as the control going inactive.

   Declared last and with !important because ~10 earlier layers in this file
   already force `background` and `border` on this composer and input.
   ========================================================================== */

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer {
  border: 2px solid #fff200 !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer input[data-dpd-support-search],
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer input[data-dpd-support-search] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #151b21 !important;
}

/* The faint ring inside the bar was this sheet's own :focus outline at line 482
   -- 2px of rgba(31, 214, 177, 0.4), teal so washed out it reads as grey. An
   outline traces the element's border-radius, so it drew a pill against the
   input's 999px and would draw a box against a square one; either way it is a
   second ring inside a bar whose whole point is one.
   The composer's :focus-within line and halo is the focus indicator, so this
   one goes rather than gets reshaped. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer input[data-dpd-support-search]:focus,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer input[data-dpd-support-search]:focus,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer input[data-dpd-support-search]:focus-visible,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer input[data-dpd-support-search]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

/* The field took the composer's ground rather than painting its own, because a
   pure-white pill on a 94%-white composer draws a faint rounded edge inside the
   bar — a second, ghostly outline where the design has exactly one. Dropping
   the fill leaves nothing for that edge to trace. The radius stays: an outline
   drawn on this input follows it, and a square one inside a rounded bar is
   worse than a round one.

   The native search decoration goes with it: Chrome's own clear affordance sat
   beside the Clear button this composer already renders, which is one control
   too many for one job. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer input[data-dpd-support-search]::-webkit-search-cancel-button,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer input[data-dpd-support-search]::-webkit-search-cancel-button,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer input[data-dpd-support-search]::-webkit-search-decoration,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer input[data-dpd-support-search]::-webkit-search-decoration {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: none !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer:focus-within,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer:focus-within {
  border-color: #fff200 !important;
  box-shadow: 0 0 0 5px rgba(255, 242, 0, 0.45) !important;
}

/* The Ask button is the bar's one action, so it wears the bar's colour. It had
   been trying to: the 2026-07-14 flat restyle named it "the one yellow primary
   per view" at line 2873, but that rule matches on the attribute alone and the
   neutral-button default above it carries an extra class in
   `.dpd-modal-button:not(.dpd-modal-button--secondary)` -- with both sides
   !important, the more specific neutral won and the button rendered white
   inside a yellow bar, reading as a second field rather than the send control.
   This selector adds the composer and the class back so it outranks the
   default, rather than adding another !important to a rule that cannot win.

   Hover deepens the fill instead of darkening the border: the border is the
   same yellow as the bar two pixels away, and shifting only that line would
   look like the bar flickering. */
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit],
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit] {
  background: #fff200 !important;
  border: 1px solid #fff200 !important;
  box-shadow: none !important;
  color: #10161d !important;
}

body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit]:hover,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit]:hover,
body.dpd-helper-ui .dpd-modal-module--contact .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit]:focus-visible,
body.dpd-helper-ui .dpd-modal-shell--support-chat .dpd-support-search-composer .dpd-modal-button[data-dpd-support-submit]:focus-visible {
  background: #f2e500 !important;
  border-color: #f2e500 !important;
  color: #10161d !important;
}