/* ---- Brand typeface ----
   No font is recoverable from the Figma export (all text is outlined to vector
   paths) and none is documented anywhere in the project. Self-hosting Open Sans
   (Apache License 2.0, freely redistributable) as a stand-in until Avis supplies
   their actual brand font. This is a variable font — one file covers the whole
   400-800 weight range the design uses. */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/OpenSans-Variable.woff2") format("woff2");
}

/* ---- Design tokens (Avis brand; palette extracted from the Figma export) ---- */
:root {
    --avis-red: #D10A11;
    --avis-red-accent: #F50100;
    --avis-red-deep: #B00007;
    --text: #121212;
    --muted: #949494;
    --muted-2: #686868;
    --surface: #FFF;
    --surface-alt: #F5F5F5;
    --surface-2: #EEE;
    --dark: #1C1C1C;
    --dark-2: #262626;
    --line: #E2E2E2;
    --radius: 14px;
    --radius-sm: 10px;
    --bubble-radius: 18px;
    --maxw: 412px;
    --pad: 16px;
    --font: "Open Sans", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.app {
    max-width: var(--maxw);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100dvh;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ---- Top bar ---- */
.topbar {
    background: var(--avis-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--pad);
    flex: 0 0 auto;
}

.topbar .wordmark {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 20px;
}

.topbar .nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar .nav button {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px;
    opacity: .95;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

.banner {
    background: var(--dark);
    color: #fff;
    text-align: center;
    padding: 8px var(--pad);
    font-size: 12px;
    flex: 0 0 auto;
}

.banner .product {
    font-weight: 700;
    letter-spacing: .3px;
}

.banner .cobrand {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-top: 2px;
}

/* ---- Generic ---- */
.scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

h1,
h2,
h3 {
    margin: 0;
}

.hidden {
    display: none !important;
}

/* ---- Intro / hero ---- */
.hero {
    background: var(--avis-red);
    color: #fff;
    padding: 28px var(--pad) 32px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}

.hero h1 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}

.hero p {
    margin: 12px 0 0;
    font-size: 15px;
    opacity: .96;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.value-card {
    margin: -20px var(--pad) 0;
    position: relative;
}

.value-card .mascot {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.value-card .mascot img {
    width: 92px;
    height: auto;
}

img.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
}

.feature+.feature {
    border-top: 1px solid var(--surface-2);
}

.feature .ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature .ico svg {
    width: 20px;
    height: 20px;
    stroke: var(--avis-red);
}

.feature h3 {
    font-size: 15px;
}

.feature p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #555;
}

.cta-tagline {
    margin: 18px 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.cta {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--avis-red);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
    margin-top: 10px;
}

.cta:active {
    background: var(--avis-red-deep);
}

.disclosure-line {
    margin: 12px 2px 0;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* ---- Accordions ---- */
.accordion {
    margin: 14px var(--pad) 0;
}

.accordion details {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    content: "+";
    color: var(--avis-red);
    font-size: 20px;
    font-weight: 400;
}

.accordion details[open] summary::after {
    content: "\2013";
}

.accordion .body {
    padding: 0 16px 16px;
    font-size: 14px;
    color: #444;
}

/* ---- Car groups (intro + takeover share .car-card visuals) ---- */
.car-section {
    margin: 18px var(--pad) 0;
}

.car-section h2 {
    font-size: 18px;
}

.car-section .sub {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0 14px;
}

.car-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.car-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    cursor: pointer;
    appearance: none;
    font: inherit;
    color: inherit;
}

.car-card .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 0;
}

.car-card .grp {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--avis-red);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.car-card .excess {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
}

.car-card .excess strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.car-card .photo {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 0;
}

.car-card .photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.car-card .meta {
    padding: 8px 12px 14px;
}

.car-card .body-type {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.car-card .model {
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}

/* ---- Chat ---- */
.chat-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--pad);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    background: var(--surface);
}

.chat-head .head-chevron,
.chat-head .restart {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.chat-head .head-chevron svg {
    width: 22px;
    height: 22px;
    transition: transform .2s ease;
}

.chat-head .head-chevron.open svg {
    transform: rotate(180deg);
}

.chat-head .restart {
    margin-left: auto;
    color: var(--avis-red);
}

.chat-head .restart svg {
    width: 19px;
    height: 19px;
}

.chat-head .avatar {
    width: 34px;
    height: 34px;
}

.chat-head .who {
    line-height: 1.25;
    min-width: 0;
}

.chat-head .who .name {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-head .who .role {
    font-size: 12px;
    color: var(--muted);
}

.stream {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px var(--pad) 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
}

/* ---- Message rows ---- */
.row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 90%;
}

.row.bot {
    align-self: flex-start;
}

.row.user {
    align-self: flex-end;
}

.row .avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-bottom: 18px;
}

.row .msg {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bubble {
    border-radius: var(--bubble-radius);
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.45;
}

.bubble p {
    margin: 0;
}

.bubble p+p {
    margin-top: 8px;
}

.row.bot .bubble {
    background: var(--avis-red);
    color: #fff;
    border-bottom-left-radius: 5px;
}

.row.user .bubble {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 4%);
}

.time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;
    padding: 0 4px;
}

.row.user .time {
    text-align: right;
}

/* Compact vehicle-confirmation card nested inside the bot's red bubble (per design) */
.veh-confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-top: 12px;
}

.veh-confirm .photo {
    flex: 0 0 auto;
    width: 70px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.veh-confirm .photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.veh-confirm .meta .t {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.veh-confirm .meta .s {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* Quick-reply pills sit inside the bot's red bubble (per design) */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pill {
    flex: 1 1 auto;
    min-width: 84px;
    border: 0;
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.pill:active {
    background: var(--surface-2);
}

/* One-time reminder pill embedded in the bot bubble on the turn after the
   contract card first appears (design screens 65-67) */
.pill-cta {
    display: block;
    margin-top: 12px;
    background: #fff;
    color: var(--text);
    text-align: center;
    border-radius: 999px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* ---- Typing indicator (plain dots on the stream background, no bubble, per design) ---- */
.typing .bubble {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    background: transparent;
    padding: 12px 4px;
}

.typing .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--avis-red);
    animation: blink 1.2s infinite both;
}

.typing .dot:nth-child(2) {
    animation-delay: .2s;
}

.typing .dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes blink {
    0%,
    80%,
    100% {
        opacity: .3;
    }

    40% {
        opacity: 1;
    }
}

/* ---- Opening pulse (avatar pulses while the first message loads) ---- */
.opening-pulse {
    align-self: center;
    margin: 64px 0;
    display: flex;
    justify-content: center;
}

.opening-pulse .orb {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--avis-red);
    background-image: url("/assets/img/abi-avatar.webp");
    background-size: cover;
    background-position: center;
    position: relative;
    animation: orb-bob 1.8s ease-in-out infinite;
}

.opening-pulse .orb::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(209 10 17 / 45%);
    animation: orb-ring 1.8s ease-out infinite;
}

@keyframes orb-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes orb-ring {
    0% { box-shadow: 0 0 0 0 rgb(209 10 17 / 45%); }
    70% { box-shadow: 0 0 0 26px rgb(209 10 17 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(209 10 17 / 0%); }
}

/* ---- "Progress updated" divider ---- */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    margin: 2px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}

/* ---- Pinned quick-reply row: multi-choice questions, above the composer (design screens 12/15) ---- */
.quick-reply {
    flex: 0 0 auto;
    padding: 14px var(--pad) 4px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.qr-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.qr-pill {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.qr-pill:active {
    background: var(--surface-alt);
}

.qr-slider {
    padding: 0 4px 4px;
}

.qr-cap {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
}

.qr-range {
    width: 100%;
    accent-color: var(--avis-red);
}

.qr-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.qr-ticks span {
    font-size: 11px;
    color: var(--muted);
}

/* ---- Composer ---- */
.composer {
    display: flex;
    gap: 8px;
    padding: 10px var(--pad);
    border-top: 1px solid var(--line);
    flex: 0 0 auto;
    align-items: flex-end;
    background: var(--surface);
}

.composer textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 14px;
    max-height: 110px;
    line-height: 1.4;
    background: var(--surface-alt);
}

.composer textarea:focus {
    outline: none;
    border-color: var(--avis-red);
    background: var(--surface);
}

.composer .send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--avis-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.composer .send svg {
    width: 20px;
    height: 20px;
}

.composer .send:disabled {
    background: var(--muted);
}

/* ---- In-stream full-width CTA button ---- */
.stream-cta {
    align-self: stretch;
    border: 0;
    border-radius: 999px;
    background: var(--avis-red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    width: 100%;
}

.stream-cta.secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
}

.stream-cta:active {
    background: var(--avis-red-deep);
}

/* ---- In-stream proposal checklist ---- */
.checklist {
    align-self: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.checklist .steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist .steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--muted);
}

.checklist .steps li .mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist .steps li .mark svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}

.checklist .steps li.done {
    color: var(--text);
}

.checklist .steps li.done .mark {
    background: var(--avis-red);
    border-color: var(--avis-red);
}

.checklist .steps li.ready {
    color: var(--text);
    font-weight: 700;
    margin-top: 4px;
}

/* ---- In-stream contract card (dark, with car backdrop) ---- */
.contract-card {
    align-self: stretch;
    background: var(--dark);
    color: #fff;
    border-radius: var(--radius);
    padding: 18px;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(110deg, rgb(20 20 20 / 92%) 35%, rgb(20 20 20 / 35%)), url("/assets/img/plan-car.webp");
    background-size: auto, 150% auto;
    background-position: center, right -10px center;
    background-repeat: no-repeat, no-repeat;
}

.contract-card .kicker {
    font-size: 12px;
    color: #fff;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Design screen 64: the red pill sits inside a 7px dark surround that masks the
   car backdrop, itself edged by a 1px light hairline. Drawn as two box-shadow
   rings so the pill's own geometry stays untouched. */
.contract-card .view {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--avis-red);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 13px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    margin: 16px 0 12px;
    box-shadow:
        0 0 0 7px var(--dark),
        0 0 0 8px rgb(255 255 255 / 30%);
}

.contract-card .caption {
    font-size: 10px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 70%);
    text-align: right;
    margin: 0;
}

.contract-card .emailed {
    font-size: 13px;
    color: #cfcfcf;
    margin: 8px 0 0;
}

/* ---- In-stream summary card ---- */
.summary-block {
    align-self: stretch;
}

.summary-block h3 {
    font-size: 18px;
    margin-bottom: 2px;
}

.summary-block .sub {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 14px;
}

.summary-group {
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 4px 14px;
    margin-bottom: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--surface-2);
}

.summary-group .summary-row:last-child {
    border-bottom: 0;
}

.summary-row .k {
    color: var(--muted-2);
    font-weight: 600;
}

.summary-row .v {
    text-align: right;
    font-weight: 600;
}

.confirm-q {
    font-size: 14px;
    margin: 4px 0 12px;
}

.btn-pair {
    display: flex;
    gap: 12px;
}

.btn-pair button {
    flex: 1 1 0;
    border-radius: 999px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--line);
}

.btn-pair .yes {
    background: var(--avis-red);
    color: #fff;
    border-color: var(--avis-red);
}

.btn-pair .no {
    background: var(--surface);
    color: var(--text);
}

/* ---- Inline vehicle "select" card ---- */
.veh-card {
    align-self: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.veh-card .head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 0;
}

.veh-card .grp {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--avis-red);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
}

.veh-card .titles .t {
    font-weight: 700;
    font-size: 14px;
}

.veh-card .titles .s {
    font-size: 12px;
    color: var(--muted);
}

.veh-card .photo {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}

.veh-card .photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.veh-card .select {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--avis-red);
    font-weight: 700;
    font-size: 14px;
    padding: 13px;
}

.veh-card .select:active {
    background: var(--surface-alt);
}

/* ============ FULL-SCREEN TAKEOVER OVERLAY ============ */
.overlay {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.overlay .ov-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px var(--pad);
}

.overlay .ov-foot {
    flex: 0 0 auto;
    padding: 12px var(--pad);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
}

.ov-btn {
    border: 0;
    border-radius: 999px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    background: var(--avis-red);
    color: #fff;
}

.ov-btn.ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
}

.ov-btn:active {
    filter: brightness(.95);
}

/* Vehicle groups grid (takeover) */
.groups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Vehicle detail (takeover) */
.detail h2 {
    font-size: 22px;
}

.detail .sub {
    color: var(--muted);
    font-size: 14px;
    margin: 2px 0 14px;
}

.detail .hero-photo {
    background: var(--surface-alt);
    border-radius: var(--radius);
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 16px;
}

.detail .hero-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.detail .desc {
    font-size: 14px;
    color: #444;
    margin: 0 0 14px;
}

.detail .spec {
    font-size: 14px;
    margin: 6px 0;
}

.detail .spec strong {
    font-weight: 700;
}

.detail .feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 16px;
}

.detail .feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.detail .feat svg {
    width: 22px;
    height: 22px;
    stroke: var(--avis-red);
    flex: 0 0 auto;
}

/* Personalised plan (takeover) */
.plan h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.plan .lead {
    font-size: 14px;
    color: #444;
    margin: 0 0 16px;
}

.plan .price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.plan .price {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.plan .per {
    font-size: 13px;
    color: var(--muted);
}

.badge {
    display: inline-block;
    border: 1px solid var(--avis-red);
    color: var(--avis-red);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
}

.plan .incl-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
}

.plan .incl {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.plan .incl li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
}

.plan .incl li svg {
    width: 18px;
    height: 18px;
    stroke: var(--avis-red);
    flex: 0 0 auto;
}

.plan .plan-photo {
    background: var(--surface-alt);
    border-radius: var(--radius);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.plan .plan-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.plan .caption {
    font-size: 13px;
    color: var(--muted);
    margin: 6px 0 16px;
}

.plan .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 4px;
}

.plan .total-row .lbl {
    font-size: 14px;
}

.plan .total-row .amt {
    font-size: 18px;
    font-weight: 800;
}

.plan .total-row .badge {
    margin-left: auto;
}

/* Welcome / end screen (takeover) */
.welcome {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--avis-red);
    color: #fff;
    padding: 28px var(--pad) 24px;
    text-align: center;
}

.welcome .mascot {
    width: 120px;
    height: auto;
    margin: 8px auto 18px;
    display: block;
}

.welcome h2 {
    font-size: 26px;
    font-weight: 800;
}

.welcome p {
    font-size: 14px;
    opacity: .95;
    margin: 12px 0 22px;
}

.welcome .w-btn {
    display: block;
    width: 100%;
    border-radius: 999px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    background: rgb(255 255 255 / 15%);
    color: #fff;
    border: 1.5px solid rgb(255 255 255 / 40%);
}

.welcome .w-btn.outline {
    background: #fff;
    color: var(--avis-red);
    border: 0;
}

.welcome .more {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 18px;
    text-align: left;
}

.welcome .more .more-title {
    font-size: 13px;
    color: var(--muted-2);
    margin-bottom: 12px;
}

.welcome .more .tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.welcome .more .tile {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.welcome .more .tile .thumb {
    height: 64px;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.welcome .more .tile .thumb.red {
    background: var(--avis-red);
}

.welcome .more .tile .cap {
    font-size: 12px;
    padding: 8px 10px;
    color: var(--text);
}

/* ---- Persistent data-storage notice ---- */
.data-notice {
    background: var(--surface-2);
    color: #555;
    font-size: 11px;
    line-height: 1.4;
    padding: 10px var(--pad);
    text-align: center;
    flex: 0 0 auto;
}

/* ---- Header options panel ---- */
.options-panel {
    flex: 0 0 auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 14px var(--pad) 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
}

.options-panel.hidden {
    display: none;
}

.opt-section {
    padding-bottom: 10px;
}

.opt-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 10px;
}

.tracker {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tracker li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 16px 0;
    font-size: 13px;
    color: var(--muted);
}

.tracker li:last-child {
    padding-bottom: 0;
}

/* Pending steps are flat pink discs with a tinted numeral — no ring; the
   done/current states swap in solid red. Tints measured off design screen 4. */
.tracker li .num {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgb(209 10 17 / 20%);
    border: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: rgb(209 10 17 / 40%);
}

.tracker li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: rgb(209 10 17 / 20%);
}

.tracker li.done {
    color: var(--text);
    font-weight: 600;
}

.tracker li.done .num {
    background: var(--avis-red);
    color: #fff;
}

.tracker li.done:not(:last-child)::after {
    background: var(--avis-red);
}

.tracker li.current {
    color: var(--avis-red);
    font-weight: 700;
}

.tracker li.current .num {
    background: var(--avis-red);
    color: #fff;
}

.opt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 12px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.opt-row .ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--avis-red);
}

.opt-row .flag {
    width: 22px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 2px;
    overflow: hidden;
    display: inline-flex;
}

.opt-row .flag svg {
    width: 100%;
    height: 100%;
}

.opt-row .opt-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opt-row .chev {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--muted);
}

.opt-row .opt-status {
    font-size: 11px;
    font-weight: 700;
    color: var(--avis-red);
}

.opt-row:disabled {
    opacity: .55;
    cursor: default;
}

.opt-dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin: -4px 0 8px;
    overflow: hidden;
}

.opt-dropdown.hidden {
    display: none;
}

.opt-lang-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.opt-lang-item[aria-checked="true"] {
    color: var(--avis-red);
}

/* ---- Onboarding coachmark tour ---- */
.coachmark-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgb(0 0 0 / 55%);
}

.coachmark {
    position: fixed;
    z-index: 40;
    max-width: 280px;
    background: var(--dark);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 14px 16px 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.coachmark::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 14px;
    height: 14px;
    background: var(--dark);
    transform: rotate(45deg);
}

.coachmark.point-down::before {
    top: auto;
    bottom: -7px;
}

.coachmark .cm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.coachmark .cm-title {
    font-size: 13px;
    font-weight: 700;
}

.coachmark .cm-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .7);
    padding: 2px;
    display: inline-flex;
}

.coachmark .cm-close svg {
    width: 16px;
    height: 16px;
}

.coachmark .cm-body {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 12px;
}

.coachmark .cm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coachmark .cm-dots {
    display: flex;
    gap: 5px;
}

.coachmark .cm-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.coachmark .cm-dots span.active {
    background: #fff;
}

.coachmark .cm-next {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--dark);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.coachmark .cm-next svg {
    width: 15px;
    height: 15px;
}

/* ---- Post-contract feedback card (red, matching a bot bubble, per design) ---- */
.feedback-card {
    background: var(--avis-red);
    border-radius: var(--radius);
    padding: 16px;
}

.feedback-card .q {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}

.feedback-card .opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-card .opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}

.feedback-card .opt .face {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--avis-red);
}

/* ---- Transient "generating your proposal" loading card ---- */
.generating-card {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 16px;
}

.generating-card .g-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
}

.generating-card .g-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-bottom: 10px;
}

.generating-card .g-bar span {
    display: block;
    height: 100%;
    width: 30%;
    border-radius: 999px;
    background: var(--avis-red);
    animation: generating-sweep 1.1s ease-in-out infinite;
}

@keyframes generating-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(330%);
    }
}

.generating-card .g-step {
    font-size: 12.5px;
    color: var(--muted-2);
    margin: 0;
}

/* Bottom breathing room under the last message. Was an inline style attribute on
 * the element itself; moved here so style-src needs no 'unsafe-inline'. */
.scroll-tail { height: 20px; }