/* ============================================================
   VELOURA PERSONALIZATION EXPERIENCE
   Routine · Ingredient Intelligence · Skin Journey · Concerns · AI
============================================================ */

:root {
    --vel-personal-ink: #2b2a17;
    --vel-personal-olive: #5d5b37;
    --vel-personal-olive-deep: #3b3a22;
    --vel-personal-gold: #b98e53;
    --vel-personal-gold-soft: #dcc399;
    --vel-personal-ivory: #fffdf8;
    --vel-personal-cream: #f7efe4;
    --vel-personal-muted: #817b64;
    --vel-personal-line: rgba(185, 142, 83, .20);
    --vel-personal-shadow: 0 20px 55px rgba(45, 43, 23, .08);
    --vel-personal-shadow-lg: 0 30px 80px rgba(45, 43, 23, .12);
}

/* Smart search additions only. Existing product result selectors are untouched. */
.global-search-intent {
    display: grid;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(185, 142, 83, .14);
}

.global-search-intent > small {
    color: var(--vel-personal-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.global-search-intent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.global-search-intent-chip {
    padding: 6px 9px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 999px;
    color: var(--vel-personal-olive-deep) !important;
    background: rgba(247, 239, 228, .72);
    font-size: .67rem;
    font-weight: 650;
    text-decoration: none !important;
}

.global-search-intent-chip:hover {
    border-color: rgba(185, 142, 83, .42);
    background: #fffaf2;
}

/* ============================================================
   Home / Shop by concern
============================================================ */

.home-concern-section {
    padding: clamp(58px, 8vw, 104px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(185, 142, 83, .08), transparent 26rem),
        #fbf7f0;
}

.home-concern-grid,
.concern-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.home-concern-card,
.concern-shop-card {
    position: relative;
    display: grid;
    min-height: 164px;
    gap: 10px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--vel-personal-line);
    border-radius: 21px;
    color: var(--vel-personal-ink) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(220, 195, 153, .16), transparent 12rem),
        rgba(255, 253, 248, .95);
    box-shadow: 0 12px 34px rgba(45, 43, 23, .045);
    text-decoration: none !important;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.home-concern-card:hover,
.concern-shop-card:hover {
    border-color: rgba(185, 142, 83, .42);
    box-shadow: var(--vel-personal-shadow);
    transform: translateY(-4px);
}

.home-concern-card > span,
.concern-shop-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(185, 142, 83, .16);
    border-radius: 14px;
    color: #715a35;
    background: linear-gradient(145deg, rgba(220, 195, 153, .42), rgba(255, 253, 248, .92));
}

.home-concern-card > strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.08rem;
}

.home-concern-card > small,
.concern-shop-card p {
    color: var(--vel-personal-muted);
    line-height: 1.65;
}

.home-concern-card > i,
.concern-shop-arrow {
    position: absolute;
    right: 18px;
    top: 18px;
    color: var(--vel-personal-gold);
}

.concern-shop-page {
    padding: clamp(42px, 7vw, 88px) 0 100px;
}

.concern-shop-hero {
    max-width: 820px;
    margin-bottom: 36px;
}

.concern-shop-hero h1,
.concern-detail-copy h1 {
    margin: 9px 0 12px;
    font-family: "Playfair Display", Georgia, serif;
    color: var(--vel-personal-ink);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.04em;
}

.concern-shop-hero p,
.concern-detail-copy p {
    color: var(--vel-personal-muted);
    line-height: 1.8;
}

.concern-shop-card {
    min-height: 190px;
    grid-template-columns: auto 1fr;
    align-items: start;
}

.concern-shop-card h2 {
    margin: 0 0 6px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
}

.concern-detail-hero {
    padding: 36px 0 54px;
    border-bottom: 1px solid var(--vel-personal-line);
    background: linear-gradient(135deg, #fffdf8, #f4eadb);
}

.concern-detail-copy {
    display: flex;
    max-width: 880px;
    align-items: center;
    gap: 22px;
    margin-top: 32px;
}

.concern-detail-copy .concern-shop-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 20px;
    font-size: 1.3rem;
}

/* ============================================================
   Personalized product page
============================================================ */

.personalized-match-card {
    display: grid;
    gap: 14px;
    margin: 22px 0 4px;
    padding: 20px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(220, 195, 153, .18), transparent 14rem),
        linear-gradient(145deg, #fffdf8, #f8f0e5);
    box-shadow: 0 12px 34px rgba(45, 43, 23, .05);
}

.personalized-match-excellent {
    border-color: rgba(103, 126, 84, .24);
    background:
        radial-gradient(circle at 100% 0%, rgba(103, 126, 84, .12), transparent 14rem),
        linear-gradient(145deg, #fffdf8, #f3f2e8);
}

.personalized-match-caution {
    border-color: rgba(168, 101, 70, .22);
}

.personalized-match-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.personalized-match-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: var(--vel-personal-olive-deep);
    background: rgba(185, 142, 83, .15);
}

.personalized-match-heading small,
.ingredient-analysis-heading span {
    display: block;
    color: var(--vel-personal-gold);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.personalized-match-heading h3 {
    margin: 2px 0 0;
    color: var(--vel-personal-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.22rem;
}

.personalized-match-card > p {
    margin: 0;
    color: var(--vel-personal-muted);
    line-height: 1.7;
}

.personalized-match-list {
    padding-top: 12px;
    border-top: 1px solid rgba(185, 142, 83, .13);
}

.personalized-match-list > strong {
    display: block;
    margin-bottom: 8px;
    font-size: .75rem;
}

.personalized-match-list ul,
.ingredient-profile-box ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.personalized-match-list li,
.ingredient-profile-box li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #625e47;
    font-size: .76rem;
    line-height: 1.5;
}

.personalized-match-list li i {
    margin-top: 2px;
    color: #647758;
}

.personalized-match-list.is-caution li i {
    color: #a5684e;
}

.personalized-match-cta {
    justify-self: start;
    color: #66502f !important;
    font-size: .76rem;
    font-weight: 750;
    text-decoration: none !important;
}

/* Ingredient intelligence */
.ingredient-analysis-panel {
    display: grid;
    gap: 20px;
}

.ingredient-analysis-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.ingredient-analysis-heading h3 {
    margin: 4px 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.7rem;
}

.ingredient-analysis-heading > small {
    max-width: 260px;
    color: var(--vel-personal-muted);
    text-align: end;
}

.ingredient-analysis-table-wrap {
    overflow: hidden;
    border: 1px solid var(--vel-personal-line);
    border-radius: 16px;
}

.ingredient-analysis-table {
    width: 100%;
    border-collapse: collapse;
}

.ingredient-analysis-table th,
.ingredient-analysis-table td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(185, 142, 83, .12);
    text-align: start;
}

.ingredient-analysis-table th {
    color: #777158;
    background: #f8f0e5;
    font-size: .67rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ingredient-analysis-table tr:last-child td { border-bottom: 0; }

.ingredient-analysis-table td:first-child { width: 34%; }
.ingredient-analysis-table td strong { color: var(--vel-personal-ink); }
.ingredient-analysis-table td > span {
    margin-inline-start: 7px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #6d5530;
    background: rgba(185, 142, 83, .12);
    font-size: .58rem;
    font-weight: 800;
}
.ingredient-analysis-table td small { display: block; margin-top: 4px; color: var(--vel-personal-muted); }

.ingredient-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ingredient-profile-box {
    padding: 15px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 15px;
    background: #fffdf9;
}

.ingredient-profile-box > strong { display: block; margin-bottom: 10px; font-size: .75rem; }
.ingredient-profile-box.is-good { border-color: rgba(94, 118, 91, .20); background: rgba(94, 118, 91, .045); }
.ingredient-profile-box.is-caution,
.ingredient-profile-box.is-conflict { border-color: rgba(160, 91, 64, .18); background: rgba(160, 91, 64, .035); }
.ingredient-profile-box.is-good i { color: #627759; }
.ingredient-profile-box.is-caution i,
.ingredient-profile-box.is-conflict i { color: #a5684e; }

.ingredient-original-list {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--vel-personal-line);
}

/* ============================================================
   Routine builder
============================================================ */

.routine-builder-page,
.skin-journey-page {
    padding: clamp(42px, 6vw, 78px) 0 100px;
    background:
        radial-gradient(circle at 7% 6%, rgba(185, 142, 83, .09), transparent 28rem),
        #faf6ef;
}

.routine-builder-hero,
.skin-journey-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--vel-personal-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 0%, rgba(220, 195, 153, .22), transparent 21rem),
        linear-gradient(135deg, #fffdf8, #f3e9db);
    box-shadow: var(--vel-personal-shadow);
}

.routine-builder-hero h1,
.skin-journey-hero h1 {
    max-width: 780px;
    margin: 8px 0 10px;
    color: var(--vel-personal-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.15rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.routine-builder-hero p,
.skin-journey-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--vel-personal-muted);
    line-height: 1.8;
}

.routine-builder-total {
    display: grid;
    min-width: 210px;
    gap: 4px;
    padding: 17px 19px;
    border: 1px solid rgba(185, 142, 83, .20);
    border-radius: 17px;
    background: rgba(255, 253, 248, .76);
}
.routine-builder-total small,
.routine-builder-total span { color: var(--vel-personal-muted); font-size: .68rem; }
.routine-builder-total strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; }

.routine-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.routine-period-card {
    overflow: hidden;
    border: 1px solid var(--vel-personal-line);
    border-radius: 24px;
    background: rgba(255, 253, 248, .96);
    box-shadow: var(--vel-personal-shadow);
}

.routine-period-card.is-night {
    background: linear-gradient(145deg, rgba(250, 247, 240, .98), rgba(241, 238, 226, .96));
}

.routine-period-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--vel-personal-line);
}

.routine-period-header > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #6c5430;
    background: rgba(185, 142, 83, .13);
}
.routine-period-header small { color: var(--vel-personal-gold); font-size: .61rem; font-weight: 850; letter-spacing: .12em; }
.routine-period-header h2 { margin: 2px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.4rem; }

.routine-detailed-steps { display: grid; }
.routine-detailed-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
    border-top: 1px solid rgba(185, 142, 83, .12);
}
.routine-detailed-step:first-child { border-top: 0; }
.routine-step-order {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: #755b35;
    background: rgba(185, 142, 83, .11);
    font-size: .68rem;
    font-weight: 850;
}
.routine-step-main { min-width: 0; }
.routine-step-label { display: block; margin-bottom: 9px; color: var(--vel-personal-muted); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.routine-step-product { display: flex; align-items: center; gap: 11px; }
.routine-step-image {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--vel-personal-line);
    border-radius: 14px;
    color: var(--vel-personal-olive) !important;
    background: #f4eadb;
    text-decoration: none !important;
}
.routine-step-image img { width: 100%; height: 100%; object-fit: cover; }
.routine-step-product-name { display: block; color: var(--vel-personal-ink) !important; font-weight: 760; text-decoration: none !important; }
.routine-step-product div > span { color: var(--vel-personal-gold); font-size: .7rem; font-weight: 700; }

.routine-step-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.routine-step-detail-grid > div {
    padding: 11px 12px;
    border: 1px solid rgba(185, 142, 83, .12);
    border-radius: 12px;
    background: rgba(247, 239, 228, .52);
}
.routine-step-detail-grid small { color: var(--vel-personal-gold); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.routine-step-detail-grid p { margin: 4px 0 0; color: #625e49; font-size: .72rem; line-height: 1.55; }

.routine-step-cautions { display: grid; gap: 8px; margin-top: 12px; }
.routine-step-cautions > div { padding: 11px 12px; border-radius: 12px; background: rgba(164, 94, 65, .055); }
.routine-step-cautions strong { color: #84503f; font-size: .68rem; }
.routine-step-cautions p { margin: 5px 0 0; color: #755f54; font-size: .68rem; line-height: 1.5; }

.routine-builder-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 20px;
    background: var(--vel-personal-ivory);
    box-shadow: var(--vel-personal-shadow);
}
.routine-builder-actions > div { display: grid; gap: 3px; }
.routine-builder-actions > div span { color: var(--vel-personal-muted); font-size: .74rem; }
.routine-add-all-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 19px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--vel-personal-olive), var(--vel-personal-olive-deep));
    box-shadow: 0 12px 28px rgba(59, 58, 34, .18);
    font-weight: 750;
}
.routine-add-all-button:disabled { opacity: .5; }
.routine-disclaimer { display: flex; gap: 8px; margin: 16px 4px 0; color: var(--vel-personal-muted); font-size: .7rem; line-height: 1.6; }

.skin-profile-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Skin journey
============================================================ */

.journey-chart-card {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 24px;
    background: var(--vel-personal-ivory);
    box-shadow: var(--vel-personal-shadow);
}
.journey-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.journey-chart-heading small { color: var(--vel-personal-gold); font-weight: 850; letter-spacing: .1em; }
.journey-chart-heading h2 { margin: 4px 0 0; font-family: "Playfair Display", Georgia, serif; }
.journey-chart-heading > span { max-width: 460px; color: var(--vel-personal-muted); font-size: .68rem; line-height: 1.6; }
.journey-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.journey-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: #6f6954; font-size: .67rem; }
.journey-chart-legend i { width: 9px; height: 9px; border-radius: 50%; }

.is-hydration { background: #7897a2 !important; }
.is-oil { background: #8c8959 !important; }
.is-texture { background: #bd9255 !important; }
.is-sensitivity { background: #a86d61 !important; }

.journey-chart {
    display: grid;
    min-height: 230px;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    align-items: end;
    gap: 14px;
    padding: 20px 8px 0;
    border-top: 1px solid rgba(185, 142, 83, .11);
    background: repeating-linear-gradient(to top, transparent 0, transparent 49px, rgba(185, 142, 83, .07) 50px);
}
.journey-chart-column { display: grid; justify-items: center; gap: 8px; }
.journey-chart-bars { display: flex; height: 178px; align-items: end; gap: 4px; }
.journey-chart-bars i { display: block; width: 8px; height: var(--value); min-height: 3px; border-radius: 999px 999px 3px 3px; box-shadow: 0 5px 12px rgba(45, 43, 23, .08); }
.journey-chart-column > span { color: var(--vel-personal-muted); font-size: .63rem; }

.skin-journey-heading { margin: 36px 0 16px; }
.skin-journey-heading h2 { margin: 5px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 2rem; }
.skin-journey-timeline { position: relative; }
.journey-entry {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 14px;
}
.journey-entry-date {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 2px;
    padding: 14px 10px;
    border: 1px solid var(--vel-personal-line);
    border-radius: 17px;
    background: #f4eadb;
}
.journey-entry-date strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.8rem; line-height: 1; }
.journey-entry-date span { color: var(--vel-personal-muted); font-size: .64rem; }
.journey-entry-body { padding: 20px; border: 1px solid var(--vel-personal-line); border-radius: 20px; background: var(--vel-personal-ivory); box-shadow: 0 10px 28px rgba(45, 43, 23, .04); }
.journey-entry-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.journey-entry-title small { color: var(--vel-personal-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.journey-entry-title h3 { margin: 2px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; }
.journey-sensitivity-chip { padding: 6px 9px; border-radius: 999px; color: #765443; background: rgba(168, 109, 97, .09); font-size: .62rem; font-weight: 750; }
.journey-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.journey-metric-grid > div { position: relative; padding: 12px; border-radius: 13px; background: #f8f1e7; }
.journey-metric-grid small { display: block; color: var(--vel-personal-muted); font-size: .59rem; }
.journey-metric-grid strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; }
.journey-metric-grid span { margin-inline-start: 5px; font-size: .62rem; font-weight: 800; }
.journey-metric-grid .is-up { color: #5f785b; }
.journey-metric-grid .is-down { color: #a25d52; }
.journey-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--vel-personal-line); border-radius: 20px; text-align: center; }
.journey-empty i { font-size: 1.8rem; color: var(--vel-personal-gold); }
.journey-empty h2 { font-family: "Playfair Display", Georgia, serif; }

/* ============================================================
   Beauty Assistant
============================================================ */

.beauty-assistant {
    position: fixed;
    z-index: 1100;
    right: 22px;
    bottom: 22px;
    display: grid;
    justify-items: end;
    gap: 10px;
}

html[dir="rtl"] .beauty-assistant { right: auto; left: 22px; }

.beauty-assistant-launcher {
    display: flex;
    min-width: 224px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 9px;
    border: 1px solid rgba(220, 195, 153, .24);
    border-radius: 999px;
    color: #fffaf0;
    background: linear-gradient(135deg, #555435, #30301c);
    box-shadow: 0 16px 38px rgba(45, 43, 23, .24);
}
.beauty-assistant-launcher > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: #463819; background: linear-gradient(145deg, #e4c58d, #b78a4e); }
.beauty-assistant-launcher > div { display: grid; text-align: start; }
.beauty-assistant-launcher strong { font-size: .75rem; }
.beauty-assistant-launcher small { color: rgba(255, 250, 240, .64); font-size: .58rem; }

.beauty-assistant-panel {
    width: min(410px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(185, 142, 83, .24);
    border-radius: 24px;
    background: rgba(255, 253, 248, .98);
    box-shadow: 0 30px 84px rgba(45, 43, 23, .22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.beauty-assistant-panel > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 15px;
    color: #fffaf0;
    background: linear-gradient(135deg, #414126, #5b5935);
}
.beauty-assistant-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #463819; background: linear-gradient(145deg, #e4c58d, #b78a4e); }
.beauty-assistant-panel header > div:nth-child(2) { display: grid; }
.beauty-assistant-panel header small { color: #dabc83; font-size: .56rem; font-weight: 850; letter-spacing: .13em; }
.beauty-assistant-panel header strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.02rem; }
.beauty-assistant-panel header span { color: rgba(255, 250, 240, .58); font-size: .58rem; }
.beauty-assistant-panel header button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.07); }

.beauty-assistant-messages {
    display: grid;
    max-height: min(52vh, 480px);
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
    background: radial-gradient(circle at 100% 0%, rgba(220,195,153,.10), transparent 18rem);
}
.assistant-message { max-width: 88%; padding: 10px 12px; border-radius: 14px; }
.assistant-message p { margin: 0; font-size: .72rem; line-height: 1.6; }
.assistant-message.is-assistant { justify-self: start; border: 1px solid rgba(185,142,83,.14); border-bottom-left-radius: 5px; color: #5d5945; background: #f8f1e7; }
.assistant-message.is-user { justify-self: end; border-bottom-right-radius: 5px; color: #fff; background: linear-gradient(135deg, #5c5a38, #3c3b23); }
.assistant-message.is-loading { opacity: .72; }

.assistant-product-grid { display: grid; gap: 7px; }
.assistant-product-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(185,142,83,.14); border-radius: 13px; color: var(--vel-personal-ink) !important; background: #fffdf9; text-decoration: none !important; }
.assistant-product-media { display: grid; width: 46px; height: 46px; overflow: hidden; place-items: center; border-radius: 11px; color: var(--vel-personal-olive); background: #f2e7d8; }
.assistant-product-media img { width: 100%; height: 100%; object-fit: cover; }
.assistant-product-copy { display: grid; min-width: 0; }
.assistant-product-copy small { color: var(--vel-personal-muted); font-size: .55rem; }
.assistant-product-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .7rem; }
.assistant-product-copy > span { color: var(--vel-personal-gold); font-size: .62rem; font-weight: 750; }

.assistant-routine { display: grid; gap: 7px; }
.assistant-routine-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px; border: 1px solid rgba(185,142,83,.13); border-radius: 12px; background: #fffdf9; }
.assistant-routine-row > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #765a32; background: rgba(185,142,83,.11); font-size: .57rem; font-weight: 850; }
.assistant-routine-row > div { display: grid; }
.assistant-routine-row small { color: var(--vel-personal-muted); font-size: .54rem; }
.assistant-routine-row a { color: var(--vel-personal-ink) !important; font-size: .7rem; font-weight: 750; text-decoration: none !important; }
.assistant-routine-row p { margin: 3px 0 0; color: #736d57; font-size: .61rem; line-height: 1.45; }

.assistant-action-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(185,142,83,.08); }
.assistant-action-row > span { color: #6d674f; font-size: .62rem; }
.assistant-action-row button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 0; border-radius: 999px; color: #fff; background: #4e4d2f; font-size: .62rem; font-weight: 750; }

.beauty-assistant-prompts { display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; }
.beauty-assistant-prompts button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--vel-personal-line); border-radius: 999px; color: #665e46; background: #fffaf2; font-size: .58rem; }
.beauty-assistant-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--vel-personal-line); }
.beauty-assistant-form textarea { max-height: 110px; min-height: 42px; resize: none; border: 1px solid rgba(120,113,78,.20); border-radius: 13px; padding: 10px 11px; outline: none; background: #fff; font-size: .7rem; }
.beauty-assistant-form textarea:focus { border-color: rgba(185,142,83,.56); box-shadow: 0 0 0 3px rgba(185,142,83,.09); }
.beauty-assistant-form button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5b5936, #35351f); }
.beauty-assistant-panel > footer { padding: 0 14px 11px; color: #9a9278; font-size: .54rem; text-align: center; }

@media (max-width: 1000px) {
    .home-concern-grid,
    .concern-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ingredient-profile-grid { grid-template-columns: 1fr; }
    .routine-period-grid { grid-template-columns: 1fr; }
    .journey-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .home-concern-grid,
    .concern-shop-grid { grid-template-columns: 1fr; }
    .routine-builder-hero,
    .skin-journey-hero,
    .journey-chart-heading,
    .routine-builder-actions { align-items: flex-start; flex-direction: column; }
    .routine-builder-total { width: 100%; min-width: 0; }
    .routine-step-detail-grid { grid-template-columns: 1fr; }
    .journey-entry { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
    .journey-entry-title { align-items: flex-start; flex-direction: column; }
    .journey-metric-grid { grid-template-columns: 1fr 1fr; }
    .ingredient-analysis-heading { align-items: flex-start; flex-direction: column; }
    .ingredient-analysis-heading > small { text-align: start; }
    .ingredient-analysis-table td:first-child { width: 42%; }
    .beauty-assistant { right: 14px; bottom: 14px; }
    html[dir="rtl"] .beauty-assistant { left: 14px; }
    .beauty-assistant-launcher { min-width: 0; }
    .beauty-assistant-launcher > div { display: none; }
}

@media (max-width: 460px) {
    .journey-metric-grid { grid-template-columns: 1fr; }
    .journey-entry { grid-template-columns: 1fr; }
    .journey-entry-date { grid-template-columns: auto auto; justify-content: start; align-items: end; gap: 7px; }
    .journey-entry-date strong { font-size: 1.4rem; }
    .routine-detailed-step { grid-template-columns: 34px minmax(0, 1fr); padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-concern-card,
    .concern-shop-card,
    .beauty-assistant * { transition: none !important; }
}

/* ============================================================
   OURA EXPLAINABLE MATCH SCORE
============================================================ */
.oura-match-card {
    --oura-olive: #555637;
    --oura-gold: #b78e54;
    --oura-ink: #2f2f20;
    --oura-muted: #7f7862;
    --oura-line: rgba(183,142,84,.22);
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--oura-line);
    border-radius: 22px;
    background: radial-gradient(circle at 95% 0%, rgba(194,159,101,.15), transparent 14rem), linear-gradient(145deg, #fffdf8, #f8f0e5);
    box-shadow: 0 18px 48px rgba(65,61,38,.07);
}
.oura-match-topline { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.oura-match-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--oura-gold); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.oura-match-topline h3 { margin:7px 0 2px; color:var(--oura-ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.35rem,2.3vw,1.9rem); font-weight:500; }
.oura-match-topline p { margin:0; color:var(--oura-muted); font-size:.75rem; }
.oura-match-ring { --oura-score:0; display:grid; width:82px; height:82px; flex:0 0 82px; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(circle at center,#fffaf2 57%,transparent 58%),conic-gradient(var(--oura-gold) calc(var(--oura-score)*1%),rgba(183,142,84,.14) 0); box-shadow:inset 0 0 0 1px rgba(183,142,84,.10); }
.oura-match-ring strong { color:var(--oura-ink); font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; line-height:1; }
.oura-match-ring small { margin-top:3px; color:var(--oura-gold); font-size:.47rem; font-weight:900; letter-spacing:.14em; }
.oura-factor-table { display:grid; gap:10px; margin-top:18px; padding-top:17px; border-top:1px solid var(--oura-line); }
.oura-factor-row { display:grid; gap:5px; }
.oura-factor-label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#5f5b47; font-size:.7rem; }
.oura-factor-label strong { color:var(--oura-ink); }
.oura-factor-track { height:6px; overflow:hidden; border-radius:999px; background:rgba(86,86,55,.09); }
.oura-factor-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6a6945,#c39a60); }
.oura-why { margin-top:16px; border:1px solid rgba(183,142,84,.17); border-radius:15px; background:rgba(255,255,255,.62); }
.oura-why summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; color:var(--oura-ink); cursor:pointer; list-style:none; font-size:.75rem; font-weight:800; }
.oura-why summary::-webkit-details-marker { display:none; }
.oura-why summary span { display:inline-flex; align-items:center; gap:7px; }
.oura-why[open] summary > .bi-chevron-down { transform:rotate(180deg); }
.oura-why summary > .bi-chevron-down { transition:transform .18s ease; }
.oura-why-body { display:grid; gap:12px; padding:0 14px 14px; }
.oura-match-explanation { padding:12px; border-radius:13px; background:#f5f7ef; }
.oura-match-explanation.is-caution { background:#fbf1e9; }
.oura-match-explanation > strong { display:block; margin-bottom:8px; color:#4f5437; font-size:.69rem; text-transform:uppercase; letter-spacing:.06em; }
.oura-match-explanation.is-caution > strong { color:#8b5f49; }
.oura-match-explanation ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.oura-match-explanation li { display:grid; grid-template-columns:18px 1fr; gap:6px; color:#655f4c; font-size:.68rem; line-height:1.55; }
.oura-match-explanation li i { margin-top:2px; color:#78805c; }
.oura-match-explanation.is-caution li i { color:#a16d53; }
.oura-better-matches { margin-top:15px; padding:13px; border-radius:15px; background:rgba(79,80,49,.055); }
.oura-better-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:9px; }
.oura-better-heading span { color:var(--oura-ink); font-size:.72rem; font-weight:850; }
.oura-better-heading small { color:var(--oura-muted); font-size:.56rem; }
.oura-better-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.oura-better-grid a { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; padding:8px 9px; border:1px solid rgba(183,142,84,.14); border-radius:11px; color:var(--oura-ink)!important; background:rgba(255,255,255,.72); text-decoration:none!important; }
.oura-better-grid a span { color:var(--oura-gold); font-size:.64rem; font-weight:900; }
.oura-better-grid a strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.63rem; }
.oura-routine-add-form { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.oura-routine-add-form button,.oura-routine-add-form a { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; font-size:.65rem; font-weight:800; text-decoration:none!important; }
.oura-routine-add-form button { border:0; color:#fff; background:linear-gradient(135deg,#62613d,#3e3e26); }
.oura-routine-add-form a { border:1px solid var(--oura-line); color:#65543b!important; background:rgba(255,255,255,.7); }
.oura-match-disclaimer { display:block; margin-top:12px; color:#9a927c; font-size:.56rem; line-height:1.5; }
.oura-match-caution { border-color:rgba(172,105,75,.25); background:radial-gradient(circle at 95% 0%,rgba(190,121,88,.13),transparent 14rem),linear-gradient(145deg,#fffdf9,#f9eee7); }
.oura-card-match-badge { display:inline-flex; align-items:center; gap:5px; width:max-content; margin-bottom:8px; padding:5px 8px; border:1px solid rgba(183,142,84,.22); border-radius:999px; color:#735d3b; background:#fbf4e9; font-size:.58rem; font-weight:900; letter-spacing:.02em; }

@media (max-width:700px) {
    .oura-match-topline { align-items:flex-start; }
    .oura-match-ring { width:70px; height:70px; flex-basis:70px; }
    .oura-better-grid { grid-template-columns:1fr; }
    .oura-better-heading { align-items:flex-start; flex-direction:column; }
}

/* Dynamic home + replenishment */
.oura-dynamic-section { position:relative; }
.oura-replenishment-section { padding:clamp(42px,7vw,82px) 0; }
.oura-replenishment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.oura-replenishment-card { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:14px; padding:16px; border:1px solid rgba(183,142,84,.20); border-radius:20px; background:linear-gradient(145deg,#fffdf8,#f8f0e5); box-shadow:0 14px 38px rgba(61,58,36,.055); }
.oura-replenishment-media { display:grid; width:72px; height:72px; overflow:hidden; place-items:center; border-radius:16px; color:#6d6844; background:#eee4d5; font-family:Georgia,"Times New Roman",serif; font-size:1.5rem; }
.oura-replenishment-media img { width:100%; height:100%; object-fit:cover; }
.oura-replenishment-card small { color:#a17b48; font-size:.57rem; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.oura-replenishment-card h3 { margin:3px 0 4px; color:#343421; font-family:Georgia,"Times New Roman",serif; font-size:1rem; }
.oura-replenishment-card p { margin:0; color:#79725d; font-size:.66rem; line-height:1.5; }
.oura-replenishment-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; color:#837b63; font-size:.56rem; }
.oura-replenishment-meta strong { color:#65543b; }
.oura-reorder-button { display:inline-flex; align-items:center; gap:6px; padding:10px 12px; border:0; border-radius:999px; color:#fff; background:#515133; font-size:.64rem; font-weight:800; }
@media(max-width:900px){.oura-replenishment-grid{grid-template-columns:1fr}.oura-replenishment-card{grid-template-columns:62px minmax(0,1fr);}.oura-replenishment-card form{grid-column:2}.oura-replenishment-media{width:62px;height:62px}}
.ingredient-intelligence-link { color:#4d4d31!important; text-decoration:none!important; border-bottom:1px dotted rgba(183,142,84,.55); }
.ingredient-intelligence-link:hover { color:#9a7544!important; }