/* Stile portale prenotazioni online — usa il design system del sito vetrina
   (variables in style.css: --primary indigo, --accent celeste, waves, ecc.).
   Aggiunge solo lo specifico del form. */

/* === Hero del form usa il pattern .hero del sito (definito in style.css) === */
.booking-hero-eyebrow {
    /* riusa stile .hero-eyebrow del sito */
    display: inline-block;
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 24px;
}

/* === Layout sezione form ============================================== */
.booking-section {
    padding: 40px 24px 96px;
    background: var(--bg);
}
.booking-container {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
/* Solo nel form /prenota (preceduto da .hero + .hero-waves):
   il container si "aggancia" sotto le waves con margin negativo. */
.hero-waves + .booking-section { padding-top: 0; }
.hero-waves + .booking-section .booking-container { margin-top: -40px; }

/* Honeypot */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* === Form ============================================================ */
.booking-form { display: flex; flex-direction: column; gap: 18px; }

.booking-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: box-shadow .2s, border-color .2s;
}
.booking-fieldset:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
.booking-fieldset legend {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    padding: 4px 12px;
    background: var(--primary-tint);
    border-radius: 999px;
}

/* Multi-medico (Lotto B) — redesign 2026-07-11.
   Prima: griglia 2×N di card bianche con icona-persona segnaposto e bio
   quasi sempre vuote ("fatto col template", feedback titolare). Ora: strip
   di CHIP compatti — avatar con INIZIALI nel colore del medico (o foto se
   presente), pool "Primo disponibile" come default in evidenza, nota
   contestuale sotto la strip che spiega la scelta corrente.
   Stesse classi di prima (doctor-card/doctor-name/doctor-radio): il JS dei
   due form non cambia. */
.doctor-pick-head { margin: 2px 0 12px; }
.doctor-pick-title {
    margin: 0 0 3px;
    font-family: var(--font-alt, var(--font));
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--navy, var(--text));
    letter-spacing: -0.01em;
}
.doctor-pick-sub {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
}
.doctor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
}
.doctor-card {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px 6px 7px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}
.doctor-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(21, 33, 63, 0.08);
}
.doctor-card.is-selected {
    background: var(--navy, #15213f);
    border-color: var(--navy, #15213f);
    box-shadow: 0 6px 16px rgba(21, 33, 63, 0.22);
}
.doctor-card.is-selected .doctor-name { color: #fff; }
.doctor-card:focus-within {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #3f5dcc);
    outline-offset: 2px;
}
.doctor-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.doctor-photo {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Avatar a iniziali: tinta derivata dal colore del medico (doctors_cache),
   molto più "voluto" dell'icona-persona generica. */
.doctor-initials {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-alt, var(--font));
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
    background: var(--primary-tint);
    color: var(--primary-dark, var(--primary));
}
.doctor-card.is-selected .doctor-initials,
.doctor-card.is-selected .doctor-photo {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.doctor-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    transition: color .15s ease;
}
.doctor-pick-note {
    margin: 10px 0 0;
    min-height: 1.25em;   /* niente layout shift quando cambia il testo */
    font-size: .82rem;
    color: var(--text-muted);
}

/* Meteo + warning previsioni (sotto griglia slot quando data selezionata) */
.weather-card {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.weather-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.weather-icon {
    width: 32px;
    height: 32px;
    color: #0284c7;
    flex-shrink: 0;
}
.weather-summary {
    color: var(--text-muted);
    font-size: .9rem;
    margin-top: 2px;
}
.weather-temp { font-weight: 700; color: var(--text); }
.weather-warnings {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.weather-warning {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: .88rem;
    line-height: 1.4;
}
.weather-warning--info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}
.weather-warning--warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}
.weather-warning--danger {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}
.weather-warning-title { font-weight: 700; margin-bottom: 3px; }
.weather-warning-msg { font-size: .85rem; }

/* Weather chip in dashboard upcoming card */
/* Banner "consiglio del giorno" meteo-aware nell'area personale */
.me-daily-tip {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 20px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #e4e9f1;
    background: linear-gradient(135deg, var(--surface), #f8fafc);
}
.me-daily-tip-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.10);
    color: #0284c7;
}
.me-daily-tip-body { flex: 1; min-width: 0; }
.me-daily-tip-title {
    font-family: var(--font-alt);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}
.me-daily-tip-text {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text);
}

.me-daily-tip--good {
    border-color: #10b981;
}
.me-daily-tip--good .me-daily-tip-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.me-daily-tip--info {
    border-color: #3b82f6;
}
.me-daily-tip--info .me-daily-tip-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
}
.me-daily-tip--warning {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.me-daily-tip--warning .me-daily-tip-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}
.me-daily-tip--warning .me-daily-tip-title { color: #92400e; }
.me-daily-tip--danger {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
.me-daily-tip--danger .me-daily-tip-icon {
    background: rgba(220, 38, 38, 0.18);
    color: #991b1b;
}
.me-daily-tip--danger .me-daily-tip-title { color: #991b1b; }

@media (max-width: 600px) {
    .me-daily-tip { padding: 14px 16px; gap: 12px; }
    .me-daily-tip-icon { width: 40px; height: 40px; }
    .me-daily-tip-title { font-size: .95rem; }
    .me-daily-tip-text { font-size: .85rem; }
}

.me-card-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #f0f9ff;
    border-radius: 6px;
    font-size: .82rem;
    color: var(--text-secondary);
}
.me-card-weather--warning {
    background: #fffbeb;
    color: #92400e;
}
.me-card-weather--danger {
    background: #fef2f2;
    color: #991b1b;
}
.me-card-weather .me-card-weather-icon { color: #0284c7; flex-shrink: 0; }
.me-card-weather--warning .me-card-weather-icon { color: #b45309; }
.me-card-weather--danger .me-card-weather-icon { color: #b91c1c; }
.me-card-weather .weather-badge {
    margin-left: auto;
    padding: 2px 7px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    font-weight: 700;
    font-size: .75rem;
}

/* Chip pool "Primo disponibile" — il default consigliato: tinta indaco
   piena quando selezionato (niente più bordo tratteggiato da placeholder) */
.doctor-card--pool {
    background: var(--primary-tint, #eef2ff);
    border-color: rgba(63, 93, 204, 0.35);
}
.doctor-card--pool .doctor-name {
    color: var(--primary-dark, var(--primary));
    font-weight: 700;
}
.doctor-card--pool.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(63, 93, 204, 0.30);
}
.doctor-card--pool.is-selected .doctor-name { color: #fff; }
.doctor-photo-pool {
    background: linear-gradient(135deg, var(--primary, #3f5dcc), var(--accent, #43c8f5));
    color: #fff;
}
.doctor-photo-pool svg { width: 15px; height: 15px; }

.booking-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}

.booking-label input[type="text"],
.booking-label input[type="email"],
.booking-label input[type="tel"],
.booking-label input[type="date"],
.booking-label select,
.booking-label textarea {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.booking-label input:focus,
.booking-label select:focus,
.booking-label textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.booking-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 400;
}
.booking-hint-warn {
    background: #faf5e8;
    border: 1px solid #e3d29a;
    color: #6b5520;
    padding: 10px 14px;
    border-radius: 8px;
    line-height: 1.5;
}
.booking-hint-warn strong { color: #4a3a14; }

.booking-checkbox {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
}
.booking-checkbox input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.booking-checkbox a { color: var(--primary); }

/* === Pet blocks (multi-pet) =========================================== */
.pet-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    background: var(--bg);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pet-block.removed { display: none; }
.pet-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pet-block-title {
    font-weight: 700;
    color: var(--primary);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pet-remove-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .9rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.pet-remove-btn:hover { color: var(--error, #c0392b); background: rgba(192, 57, 43, .08); }
.pet-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .pet-row { grid-template-columns: 1fr; }
}
.duration-info {
    margin: 8px 0 0;
    font-size: .9rem;
    color: var(--primary-dark);
    font-weight: 500;
}

/* === Calendar widget ================================================= */
.cal-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.cal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    text-transform: capitalize;
    letter-spacing: -0.01em;
    flex: 1;
    text-align: center;
}
.cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
    transition: all .15s;
}
.cal-nav-btn:hover {
    background: var(--primary-tint);
    border-color: var(--primary);
}
.cal-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--bg);
}
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.cal-weekdays span {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 4px 0;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-day {
    aspect-ratio: 1;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: .92rem;
    cursor: not-allowed;
    transition: all .12s;
    user-select: none;
}
.cal-day .cal-day-num { line-height: 1; }
.cal-day .cal-day-count {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .85;
    line-height: 1;
}
.cal-day.cal-day-other { opacity: 0.35; }
/* Giorno prenotabile: UN solo colore (verde tenue = "libero"), niente
   scale verde/giallo/rosso né bordi severità meteo (2026-06-12: i due
   codici si sovrapponevano in modo incoerente). Conteggio slot in cella. */
.cal-day.cal-day-avail {
    cursor: pointer;
    font-weight: 600;
    background: #e3f5e9;
    color: #1f6b48;
    border-color: #b7dfc4;
}
.cal-day.cal-day-avail:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.cal-day.cal-day-selected {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(63, 93, 204, .25);
}
.cal-day.cal-day-today {
    box-shadow: inset 0 0 0 2px var(--primary);
}
.cal-day.cal-day-today.cal-day-selected { box-shadow: 0 4px 10px rgba(63, 93, 204, .25); }
.cal-day.cal-day-loading {
    background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, transparent 4px, transparent 8px);
}

/* Meteo chip in cella calendario (sotto al numero del giorno) */
.cal-day .cal-day-weather {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    line-height: 1;
    margin-top: 1px;
    opacity: 0.85;
}
.cal-day .cal-day-w-icon { font-size: .85rem; }
.cal-day .cal-day-w-temp { font-weight: 600; color: var(--text-secondary); }
.cal-day.cal-day-selected .cal-day-w-temp { color: rgba(255,255,255,0.9); }

/* Hint meteo "estremo" — bordino sottile per attirare l'occhio.
   Non sostituiscono i bordi avail-* (che restano per slot count). */

@media (max-width: 600px) {
    .cal-day { font-size: .85rem; }
    }

/* === Slot picker ===================================================== */
.slot-picker { display: flex; flex-direction: column; gap: 16px; }
.slots-area { min-height: 60px; }
.slots-empty, .slots-error, .slots-hint {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}
.slots-error { color: #c0392b; }
.slots-hint { font-size: 0.82rem; margin-top: 8px; font-style: italic; }
.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
}
.slot-btn {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.15s;
}
.slot-btn:hover {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary-dark);
}
.slot-btn.selected {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow);
}
/* Slot button con temperatura: orario sopra, temp piccola sotto */
.slot-btn .slot-btn-time {
    display: block;
    font-size: 1rem;
    line-height: 1.1;
}
.slot-btn .slot-btn-temp {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}
.slot-btn:hover .slot-btn-temp { color: var(--primary-dark); }
.slot-btn.selected .slot-btn-temp { color: rgba(255,255,255,0.9); }
/* Hint visivo brachy: bordino colorato se caldo problematico */
.slot-btn.slot-btn-hot:not(.selected) {
    border-color: #dc2626;
    background: linear-gradient(180deg, var(--surface) 60%, rgba(220,38,38,0.08));
}
.slot-btn.slot-btn-hot .slot-btn-temp { color: #b91c1c; font-weight: 700; }
.slot-btn.slot-btn-warm:not(.selected) {
    border-color: #f59e0b;
    background: linear-gradient(180deg, var(--surface) 60%, rgba(245,158,11,0.08));
}
.slot-btn.slot-btn-warm .slot-btn-temp { color: #b45309; font-weight: 700; }

/* === Submit =========================================================== */
.booking-submit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding-top: 16px;
}
/* Override .btn-cta del sito per renderlo full-width nel form */
.booking-submit .btn-cta {
    padding: 16px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 0;
    cursor: pointer;
    background: linear-gradient(120deg, var(--primary), var(--accent));
    color: #fff !important;
    box-shadow: var(--shadow-md);
    transition: transform .1s, box-shadow .15s, opacity .15s;
}
.booking-submit .btn-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.booking-submit .btn-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.booking-status {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
}

/* === Notice (alert) =================================================== */
.booking-notice {
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.booking-notice h1, .booking-notice h2 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    color: var(--navy);
    font-weight: 700;
    line-height: 1.2;
}
.booking-notice p { margin: 8px 0; line-height: 1.6; color: var(--text); }
.booking-notice-info { background: var(--primary-tint); border-color: var(--primary); }
.booking-notice-success { background: #d4f0e0; border-color: var(--success); }
.booking-notice-warning { background: #faf5e8; border-color: var(--warning); }
.booking-notice-muted { background: var(--surface); border-color: var(--border); }

/* === Card riepilogo =================================================== */
.booking-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin: 24px 0;
    box-shadow: var(--shadow);
}
.booking-card h3 {
    margin: 0 0 18px;
    font-size: 1rem;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.booking-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
    margin: 0;
}
.booking-dl dt {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    align-self: center;
}
.booking-dl dd {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.booking-steps {
    margin: 0 0 16px;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--text);
}
.booking-steps li { margin: 8px 0; }
.booking-steps strong { color: var(--primary); }

.booking-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 24px 0 0;
}
.booking-cancel-form { margin: 16px 0 0; }
.btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: var(--surface);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    font: inherit;
    transition: all 0.15s;
}
.btn-secondary:hover {
    background: var(--primary-tint);
    color: var(--primary-dark);
}
.btn-link {
    color: var(--text-muted);
    text-decoration: underline;
    font-weight: 500;
}
.btn-link:hover { color: var(--primary); }

/* === Status card ====================================================== */
.status-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 28px;
    overflow: hidden;
}
.status-card-section {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.status-card-section:last-child { border-bottom: 0; }
.status-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-card-section > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.status-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.status-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}
.status-meta {
    color: var(--text-muted);
    font-size: .85rem;
}
.status-meta a {
    color: var(--primary);
    text-decoration: none;
}
.status-meta a:hover { text-decoration: underline; }

/* === Pet chips ======================================================== */
.pet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.pet-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--primary-tint);
    border-radius: 999px;
    font-size: .92rem;
    color: var(--primary-dark);
    border: 1px solid rgba(63, 93, 204, .12);
}
.pet-chip strong {
    font-weight: 600;
    color: var(--primary-dark);
}
.pet-chip small {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 400;
    margin-left: 4px;
}

/* === Calendar CTA ===================================================== */
.calendar-cta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.calendar-cta-label {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.calendar-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-cal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: all .15s;
}
.btn-cal:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-tint);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.btn-cal svg { color: var(--primary); }

/* === Disclaimer puntualità ========================================== */
.status-disclaimer {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    background: var(--accent-tint, var(--primary-tint));
    border-radius: var(--radius-sm);
    margin: 16px 0;
    border: 1px solid var(--primary-light, #c8d4f5);
}
.status-disclaimer-icon {
    flex-shrink: 0;
    color: var(--accent-dark, var(--primary));
    margin-top: 2px;
}
.status-disclaimer p {
    margin: 0;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.55;
}
.status-disclaimer strong {
    color: var(--text);
    font-weight: 700;
}

/* === Portale cliente promo (nella pagina di conferma prenotazione) ====== */
.status-portal-promo {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    margin: 24px 0 0;
    background: linear-gradient(135deg, var(--surface) 0%, var(--primary-tint, rgba(63,93,204,0.06)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.status-portal-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-portal-icon svg { width: 28px; height: 28px; }
.status-portal-body { min-width: 0; }
.status-portal-body h3 {
    margin: 0 0 6px;
    font-family: var(--font-alt, var(--font));
    color: var(--navy, var(--text));
    font-size: 1.1rem;
    letter-spacing: -0.2px;
}
.status-portal-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.5;
}
.status-portal-cta {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .9rem;
}
@media (max-width: 640px) {
    .status-portal-promo {
        grid-template-columns: 56px 1fr;
        gap: 14px;
        padding: 18px;
    }
    .status-portal-cta {
        grid-column: 1 / -1;
        text-align: center;
        justify-self: stretch;
    }
}

/* === Status actions =================================================== */
.status-actions {
    margin: 24px 0 0;
    display: flex;
    justify-content: center;
}
.btn-danger {
    border-color: #c0392b !important;
    color: #c0392b !important;
}
.btn-danger:hover {
    background: rgba(192, 57, 43, .08) !important;
    color: #a23921 !important;
}

.status-help {
    margin: 32px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}
.status-help a {
    color: var(--primary);
    font-weight: 600;
}

/* Service options (card cliccabili nel form) =========================== */
.pet-service-area {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #d0c8ba;
}
.pet-service-hint {
    margin: 0;
    color: #5a6d62;
    font-size: 0.92rem;
    font-style: italic;
}
.pet-apply-all-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #2d6a4f;
    color: #2d6a4f;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pet-apply-all-btn:hover {
    background: #2d6a4f;
    color: #fff;
}

.service-options {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.service-options[hidden] { display: none; }
.service-options-intro {
    margin: 0 0 4px;
    color: #5a6d62;
    font-size: 0.95rem;
}
.service-options-cat {
    margin: 6px 0 -4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2d6a4f;
    font-weight: 600;
}
.service-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.service-option {
    position: relative;
    display: block;
    padding: 16px 20px 14px 48px;
    background: #faf9f6;
    border: 2px solid #e0dbd2;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.service-option:hover {
    border-color: #2d6a4f;
    background: #f5f8f6;
}
.service-option:active { transform: scale(0.998); }
.service-option.selected {
    border-color: #2d6a4f;
    background: #e8f0ec;
    box-shadow: 0 2px 8px rgba(45,106,79,0.12);
}
/* Pseudo-radio rotondo a sinistra */
.service-option::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #c5cdc7;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.service-option.selected::before {
    border-color: #2d6a4f;
    background: #2d6a4f;
}
.service-option.selected::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.service-option-radio {
    /* Visivamente nascosto ma accessibile via tastiera */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    left: 16px;
    top: 18px;
}
.service-option-body {
    display: block;
}
.service-option-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.service-option-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.service-option-name {
    font-weight: 600;
    color: #1a3c2a;
    font-size: 1.05rem;
}
/* Badge species: "solo cani" / "solo gatti" — visibile solo per servizi specie-specifici */
.service-option-species {
    display: inline-block;
    padding: 2px 9px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.service-option-pricenote {
    margin: 4px 0 0;
    color: #6b6b6b;
    font-size: 0.82rem;
    line-height: 1.4;
    font-style: italic;
}
.service-option-meta {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
}
.service-option-meta-pill {
    display: inline-block;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #e0dbd2;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d6a4f;
}
.service-option-meta-price {
    background: #faf5e8;
    border-color: #e8d9b3;
    color: #8a6f2e;
}
.service-option-desc {
    margin: 4px 0 0;
    color: #3a3a3a;
    line-height: 1.5;
    font-size: 0.95rem;
}
.service-option-prep {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #faf5e8;
    border: 1px solid #e3d29a;
    border-radius: 4px;
    color: #5a4a18;
    font-size: 0.9rem;
    line-height: 1.45;
}
.service-option-prep strong { color: #8a6f2e; }
.service-option-cta {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    color: #2d6a4f;
    font-weight: 600;
    letter-spacing: .02em;
}
.service-option.selected .service-option-cta {
    color: #1a3c2a;
}
.service-option.selected .service-option-cta::after {
    content: " · ✓ selezionato";
}

/* Status page: preparazione (variante warm) */
.status-card-section.status-prep {
    background: #faf5e8;
    border-radius: 6px;
}

/* Status page: lista pet → servizio */
.pet-service-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pet-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0dbd2;
    border-radius: 6px;
}
.pet-service-pet { color: #1a3c2a; }
.pet-service-pet small { color: #5a6d62; }
.pet-service-arrow { color: #2d6a4f; font-weight: 600; }
.pet-service-svc { color: #2d6a4f; font-weight: 600; }
.pet-service-svc small {
    display: block;
    font-weight: 400;
    color: #5a6d62;
    font-size: 0.85rem;
    margin-top: 2px;
}
.pet-service-svc-missing { color: #a23921; font-weight: 400; font-style: italic; }

/* Mobile tweaks ======================================================= */
@media (max-width: 600px) {
    .booking-section { padding: 0 16px 64px; }
    .booking-container { margin-top: -24px; }
    .booking-fieldset { padding: 20px 18px; }
    .booking-notice, .booking-card { padding: 20px 18px; }
    .booking-dl { grid-template-columns: 1fr; gap: 4px; }
    .booking-dl dt { margin-top: 12px; }
    .service-option { padding: 14px 16px 12px 44px; }
    .service-option::before { left: 12px; top: 16px; }
    .service-option.selected::after { left: 18px; top: 22px; }
    .service-option-head { flex-direction: column; gap: 4px; align-items: flex-start; }
    /* Hero compatto su mobile per le pagine "secondarie" (portal, dashboard)
       dove l'hero non è il main event. Applicare con class="hero hero-compact". */
    .hero.hero-compact { padding-top: 40px !important; padding-bottom: 40px !important; }
}
/* Desktop default per .hero-compact: meno alto del .hero standard */
.hero.hero-compact { padding-top: 64px; padding-bottom: 64px; }

/* ========================================================================
   PORTALE CLIENTE — STILE DASHBOARD CONDIVISO
   Pattern hero a 2 colonne (testo a sinistra, CTA a destra) usato dalla
   dashboard /me/<token> e da tutte le sub-pagine (prenota, pet detail,
   ordine online, modifica email) per coerenza visuale.
   ======================================================================== */

/* 1180→1320 (2026-06-11): più respiro a chat e liste su schermi larghi */
.booking-container.booking-container-wide { max-width: 1320px; }

.me-hero .me-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    text-align: left;
}
.me-hero-text { min-width: 0; }
.me-hero-text .booking-hero-eyebrow { margin-bottom: 14px; }
.me-hero-text h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin-bottom: 10px;
}
.me-hero-text p.lead {
    margin: 0;
    font-size: 1rem;
    max-width: 560px;
}

/* Pill meteo "Oggi" + pannello collapsible 7gg (sobrio, professionale).
   Style su sfondo chiaro: card bianca con bordo neutro, testo scuro. */
.me-hero-weather-wrap {
    position: relative;
    display: inline-block;
    margin-top: 14px;
}
.me-hero-weather {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e7ef);
    border-radius: 999px;
    color: var(--text, #2c3e50);
    font-size: .9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.me-hero-weather:hover,
.me-hero-weather[aria-expanded="true"] {
    background: var(--bg, #f7f9fc);
    border-color: var(--primary, #3f5dcc);
    box-shadow: 0 2px 6px rgba(15,23,42,0.10);
}
.me-hero-weather:focus-visible {
    outline: 2px solid var(--primary, #3f5dcc);
    outline-offset: 2px;
}
.me-hero-weather svg { flex-shrink: 0; color: var(--primary, #3f5dcc); }
.me-hero-weather .me-hero-weather-label {
    color: var(--text-muted, #6b7791);
    font-size: .82rem;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.me-hero-weather strong { font-weight: 700; color: var(--text, #2c3e50); font-variant-numeric: tabular-nums; }
.me-hero-weather .me-hero-weather-desc {
    color: var(--text-secondary, #5a6378);
    font-size: .82rem;
    text-transform: lowercase;
}
.me-hero-weather .me-hero-weather-pin {
    color: var(--primary, #3f5dcc);
    flex-shrink: 0;
}
.me-hero-weather-caret {
    margin-left: 4px;
    opacity: .6;
    color: var(--text-muted, #6b7791);
    transition: transform .2s ease;
}
.me-hero-weather[aria-expanded="true"] .me-hero-weather-caret {
    transform: rotate(180deg);
}

/* Pannello mini-forecast 7 giorni — card bianca sobria */
.me-hero-weather-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 460px;
    max-width: 540px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e7ef);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.06);
    z-index: 50;
    overflow: hidden;
    color: var(--text, #2c3e50);
}
.mhwp-header {
    padding: 10px 16px;
    background: var(--bg, #f7f9fc);
    border-bottom: 1px solid var(--border, #e3e7ef);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted, #6b7791);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mhwp-rows {
    display: flex;
    flex-direction: column;
}
.mhwp-row {
    display: grid;
    grid-template-columns: 22px 120px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border-light, #f0f2f6);
    font-size: .9rem;
}
.mhwp-row:last-child { border-bottom: none; }
.mhwp-row:hover { background: var(--bg, #f7f9fc); }
.mhwp-day {
    color: var(--text, #2c3e50);
    font-weight: 600;
    text-transform: capitalize;
    font-size: .88rem;
}
.mhwp-icon {
    color: var(--primary, #3f5dcc);
    flex-shrink: 0;
}
.mhwp-label {
    color: var(--text-secondary, #5a6378);
    font-size: .85rem;
    text-transform: lowercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mhwp-precip {
    color: #1e40af;
    background: #dbeafe;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.mhwp-temps {
    text-align: right;
    color: var(--text, #2c3e50);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.mhwp-temps strong { font-weight: 700; }
.mhwp-tmin {
    color: var(--text-muted, #6b7791);
    font-weight: 400;
    font-size: .85rem;
}
.mhwp-footer {
    padding: 8px 16px;
    background: var(--bg, #f7f9fc);
    border-top: 1px solid var(--border, #e3e7ef);
    font-size: .72rem;
    color: var(--text-muted, #6b7791);
    text-align: right;
}

/* === Mobile ottimizzato (≤ 640px) === */
@media (max-width: 640px) {
    .me-hero-weather-wrap {
        display: block;
        margin-top: 12px;
    }
    /* Pill compatto: nascondi descrizione testuale (rimangono icona+label+temp) */
    .me-hero-weather {
        padding: 8px 14px;
        font-size: .9rem;
        max-width: 100%;
    }
    .me-hero-weather .me-hero-weather-label { font-size: .78rem; }
    .me-hero-weather .me-hero-weather-desc {
        display: none;  /* nasconde "rovesci leggeri" per evitare wrap */
    }
    .me-hero-weather-pin { width: 11px; height: 11px; }
    .me-hero-weather-caret { margin-left: 2px; }

    /* Pannello: fixed sotto il pill, full-width laterale */
    .me-hero-weather-panel {
        position: fixed;
        top: auto !important;
        left: 12px;
        right: 12px;
        min-width: 0;
        max-width: none;
        margin-top: 8px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mhwp-header { padding: 12px 14px; font-size: .78rem; }

    /* Riga: 2 grid rows. Icon e Temps occupano entrambe (span 2), in mezzo
       day (sopra) + label (sotto) → layout 2-row stacked. */
    .mhwp-row {
        grid-template-columns: 22px 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon day   temps"
            "icon label temps";
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        padding: 11px 14px;
        font-size: .9rem;
    }
    .mhwp-icon {
        grid-area: icon;
        width: 22px; height: 22px;
        align-self: center;
        margin: 0;
    }
    .mhwp-day {
        grid-area: day;
        align-self: end;
        font-size: .9rem;
        line-height: 1.2;
    }
    .mhwp-label {
        grid-area: label;
        align-self: start;
        font-size: .78rem;
        line-height: 1.3;
        white-space: normal;
        text-overflow: clip;
        color: var(--text-muted, #6b7791);
    }
    .mhwp-temps {
        grid-area: temps;
        align-self: center;
        font-size: 1rem;
        line-height: 1.2;
    }
    .mhwp-tmin { font-size: .85rem; }
    /* Precipitazioni: piccolo badge inline dopo il label (non blocco) */
    .mhwp-precip {
        display: inline-block;
        margin-left: 6px;
        font-size: .68rem;
        padding: 1px 6px;
        vertical-align: 1px;
    }
    .mhwp-footer {
        padding: 10px 14px;
        font-size: .7rem;
        line-height: 1.35;
    }
}

/* Schermi ancora più stretti (iPhone SE, vecchi Android) */
@media (max-width: 380px) {
    .me-hero-weather { padding: 7px 12px; font-size: .85rem; }
    .me-hero-weather .me-hero-weather-label { font-size: .72rem; }
    .mhwp-row { padding: 10px 12px; gap: 0 10px; }
    .mhwp-temps { font-size: .95rem; }
    .mhwp-day { font-size: .85rem; }
    .mhwp-label { font-size: .74rem; }
}
.me-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    align-items: stretch;
}
.me-hero-cta .btn-cta { white-space: nowrap; }

/* CTA "Nuovo ordine" — gradiente oro warm clinical */
.me-cta-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4a853 0%, #c89a3a 100%);
    color: #fff;
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(212, 168, 83, 0.35);
    transition: all .15s;
    white-space: nowrap;
}
.me-cta-shop:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff; }
.me-cta-shop svg { width: 16px; height: 16px; }

/* Bottone secondario "← Area personale" — pill discreta indigo-tinted */
.me-back-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.me-back-cta:hover { background: var(--primary-tint); border-color: var(--primary); }
.me-back-cta svg { width: 14px; height: 14px; }

/* ===== Tabbar condivisa (customer_dashboard, messaggi.html) ===============
   Pill segmented full-width: pulsanti pari, "Messaggi" / tab attivo evidenziato
   in primary blu. Su mobile diventa griglia 2x2 per non andare in overflow. */
.me-tabbar {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    background: var(--surface);
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    width: 100%;
}
.me-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: var(--font, inherit);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    min-width: 0;
    text-decoration: none;  /* serve per i tab <a> (link verso altra pagina) */
}
.me-tab > span:not(.me-tab-count) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.me-tab:hover { color: var(--primary); }
.me-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(63, 93, 204, 0.25);
}
.me-tab.active:hover { color: #fff; }  /* override hover sage per tab attivo */
.me-tab svg { width: 16px; height: 16px; opacity: .85; }
.me-tab.active svg { opacity: 1; }
.me-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
}
.me-tab.active .me-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ---- Mobile: tab bar in griglia 2x2 ---- */
@media (max-width: 640px) {
    .me-tabbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
        width: 100%;
        max-width: none;
        border-radius: 14px;
    }
    .me-tab {
        padding: 10px 8px;
        font-size: .82rem;
        gap: 6px;
        border-radius: 10px;
        justify-content: center;
        min-width: 0;
    }
    .me-tab > span:not(.me-tab-count) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .me-tab-count { padding: 1px 6px; font-size: .7rem; }
}

/* ============================================================================
   Messaggi (tab dashboard) — palette VetCloud blu + ciano
   ============================================================================ */
.msg-disclaimer { background: #faf5e8; border: 1px solid var(--warning);
    border-radius: var(--radius); padding: 14px 16px; font-size: .92rem;
    color: var(--text); margin-bottom: 18px; line-height: 1.55; }
.msg-disclaimer strong { color: var(--text); }
.msg-disclaimer a { color: var(--primary); text-decoration: underline; }

.msg-cta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.msg-btn-primary { background: var(--primary); color: #fff; border: none;
    padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
    font-size: .95rem; display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; transition: background .15s; }
.msg-btn-primary:hover { background: var(--primary-dark); }
.msg-btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
.msg-btn-ghost { background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border); padding: 9px 14px; border-radius: var(--radius-sm);
    font-size: .9rem; cursor: pointer; transition: all .15s; }
.msg-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* Lista thread */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-card { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 16px 18px; cursor: pointer; transition: all .15s;
    text-decoration: none; color: inherit; display: block; }
.msg-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md);
    transform: translateY(-1px); }
.msg-card.has-unseen { border-color: var(--accent); }
.msg-card.is-active { border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: var(--shadow-sm); }
.msg-card.is-active .msg-card-subject { color: var(--primary-dark); }
.msg-card-top { display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 4px; }
.msg-card-subject { font-weight: 600; font-size: 1rem;
    line-height: 1.3; color: var(--text); flex: 1; }
/* Categoria spostata sotto al subject, tono discreto (no più CAPS+colore vivace).
   Era ERRORE LIBRETTO O SCHEDA ANIMALE in alto, rubava la scena al subject vero. */
.msg-card-meta { font-size: .8rem; color: var(--text-muted);
    margin-bottom: 8px; line-height: 1.4;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.msg-card-cat { font-weight: 600; color: var(--text-secondary); }
.msg-card-date { font-size: .8rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.msg-card-pet { display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-tint); color: var(--primary-dark);
    border: 1px solid rgba(63, 93, 204, .12);
    padding: 2px 10px 2px 2px;          /* meno padding sx per fare spazio alla foto */
    border-radius: 999px; font-size: .82rem;
    margin-right: 6px; font-weight: 500; }
.msg-card-pet:not(.has-photo) { padding-left: 10px; }
/* Foto pet circolare 18px allineata al testo della chip */
.msg-card-pet-photo {
    width: 18px; height: 18px; border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1.5px solid rgba(255,255,255,0.9);
    flex-shrink: 0;
}
/* Foto pet nell'header del thread aperto (più grande, 22px) */
.msg-detail-pet-photo {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover;
    vertical-align: -6px;
    margin-right: 6px;
    border: 1.5px solid rgba(63,93,204,.18);
    background: #fff;
}
.msg-card-preview { color: var(--text-secondary); font-size: .9rem;
    line-height: 1.45; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msg-card-preview-sender { font-weight: 600; color: var(--text); }

.msg-card-status-row { margin-top: 8px; }
.msg-status { display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; }
.msg-status::before { content: ''; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.msg-status-pending,
.msg-status-synced   { background: #fef3c7; color: #92400e; }
.msg-status-replied  { background: #d4f0e0; color: var(--success); }
.msg-status-unseen   { background: #16a34a; color: #fff; font-weight: 700; }
.msg-status-unseen::before { background: #fff; }
.msg-status-closed,
.msg-status-failed   { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.msg-status-failed   { background: #fde8e3; color: #c0392b; border-color: #fbbcb0; }

/* Sezioni collassabili (Nuovi · In corso · Chiusi). Riducono il rumore
   visivo quando si superano i 5-6 thread. */
.msg-section { margin-bottom: 16px; }
.msg-section[open] { margin-bottom: 20px; }
.msg-section > summary { cursor: pointer; list-style: none;
    padding: 8px 4px; border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
    -webkit-tap-highlight-color: transparent;
    user-select: none; }
.msg-section > summary::-webkit-details-marker { display: none; }
.msg-section > summary::marker { content: ''; }
.msg-section-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.msg-section-dot.is-new    { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.msg-section-dot.is-open   { background: #f59e0b; }
.msg-section-dot.is-closed { background: var(--text-muted); opacity: .5; }
.msg-section-title { flex: 1; font-weight: 600; font-size: .92rem; color: var(--text); }
.msg-section-count { font-size: .8rem; color: var(--text-muted);
    background: var(--bg); padding: 2px 10px; border-radius: 999px;
    font-weight: 600; min-width: 28px; text-align: center; }
.msg-section[open] > summary::after {
    content: '−'; margin-left: 4px; color: var(--text-muted); font-size: 1rem;
}
.msg-section:not([open]) > summary::after {
    content: '+'; margin-left: 4px; color: var(--text-muted); font-size: 1rem;
}

.msg-empty { text-align: center; padding: 48px 16px;
    color: var(--text-muted); font-size: .95rem; line-height: 1.55;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--radius); }
.msg-empty svg { width: 48px; height: 48px; opacity: .35; margin-bottom: 12px; }

/* Vista nuova richiesta — full-width della container booking-container-wide
   (~1180px max). Su desktop ≥900px lo step "Dettagli" diventa 2-colonne
   (Animale + Allegati a sx, Messaggio + counter a dx) per usare la
   larghezza disponibile. Sotto i 900px torna stack verticale. */
.msg-form { display: flex; flex-direction: column; gap: 14px; }
.msg-form-step { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow-sm); }
/* Step 2 "Dettagli": grid 2-colonne su desktop */
.msg-form-fields-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .msg-form-fields-grid { grid-template-columns: 1fr 1.2fr; }
    /* Textarea messaggio cresce verticalmente per matchare l'altezza
       della colonna animale+allegati */
    .msg-form-fields-grid .msg-field textarea { min-height: 180px; }
}
.msg-step-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 10px;
    color: var(--text); }
.msg-step-hint { color: var(--text-muted); font-size: .88rem; margin: -6px 0 12px; }
.msg-cat-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .msg-cat-grid { grid-template-columns: 1fr 1fr; } }
.msg-cat-card { background: var(--surface); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 18px; cursor: pointer; text-align: left;
    font: inherit; transition: all .15s; }
.msg-cat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.msg-cat-card.selected { border-color: var(--primary); background: var(--primary-tint); }
.msg-cat-card .icon { font-size: 1.7rem; margin-bottom: 6px; line-height: 1; }
.msg-cat-card h3 { margin: 6px 0 4px; font-size: 1rem; color: var(--text); font-weight: 700; }
.msg-cat-card p { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.45; }

.msg-field { display: flex; flex-direction: column; gap: 6px; }
.msg-field label { font-weight: 600; font-size: .92rem; color: var(--text); }
.msg-field-hint { color: var(--text-muted); font-size: .82rem; margin-top: -2px; }
.msg-field select, .msg-field input, .msg-field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font: inherit; font-size: .95rem;
    background: var(--surface); color: var(--text); box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s; }
.msg-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.msg-field select:focus, .msg-field input:focus, .msg-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint); }
.msg-counter { font-size: .8rem; color: var(--text-muted); text-align: right; }
.msg-counter.warn { color: #c0392b; font-weight: 600; }

/* Footer del campo messaggio: contatore caratteri (allineato a destra) */
.msg-msgfield-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.msg-msgfield-foot .msg-counter { margin-left: auto; }

.msg-error { background: #fde8e3; color: #c0392b; padding: 11px 14px;
    border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 8px;
    border: 1px solid #eeb4a8; }
.msg-success { background: #d4f0e0; color: var(--success); padding: 11px 14px;
    border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 8px;
    border: 1px solid #bfe0cd; }
.msg-form-actions { display: flex; gap: 10px; justify-content: flex-end;
    flex-wrap: wrap; margin-top: 4px; }

/* Vista dettaglio (chat) — header con layout flex: testo a sinistra,
   avatar pet grande a destra (visual anchor del thread). */
.msg-detail-header { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px 18px; border-bottom: none;
    display: flex; align-items: center; gap: 16px;
}
.msg-detail-header-text { flex: 1; min-width: 0; }
.msg-detail-subject { font-weight: 700; font-size: 1.1rem; margin: 4px 0;
    color: var(--text); line-height: 1.3; }
.msg-detail-meta { color: var(--text-muted); font-size: .85rem;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.msg-detail-pet-name { font-weight: 600; color: var(--primary-dark); }

/* Avatar grande del pet — cerchio 72px, foto a copertura, fallback zampa
   con sfondo tinta primary. */
.msg-detail-pet-avatar {
    flex-shrink: 0;
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-tint);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    display: flex; align-items: center; justify-content: center;
    /* Reset stile <button> quando ha photo (clickable) */
    padding: 0; margin: 0;
    transition: transform .18s ease, box-shadow .18s ease;
}
.msg-detail-pet-avatar.has-photo {
    cursor: zoom-in;   /* affordance: il cursore comunica "ingrandisce" */
}
.msg-detail-pet-avatar.has-photo:hover,
.msg-detail-pet-avatar.has-photo:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
    outline: none;
}
.msg-detail-pet-avatar.has-photo:active { transform: scale(1.04); }
.msg-detail-pet-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.msg-detail-pet-avatar.no-photo svg {
    width: 38px; height: 38px; color: var(--primary);
}

/* Lightbox foto pet — backdrop scuro + figure centrata. Stessa estetica
   leggera del lightbox PDF (me-pdf-modal) ma più minimale (solo immagine). */
.msg-photo-lightbox {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(15, 23, 42, .82);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: msgPhotoFadeIn .15s ease;
}
@keyframes msgPhotoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.msg-photo-lightbox-inner {
    margin: 0;
    max-width: min(640px, 92vw);
    max-height: 88vh;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    pointer-events: none;   /* il click attraversa al backdrop, eccetto img */
}
.msg-photo-lightbox-inner img {
    pointer-events: auto;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    background: #fff;
}
.msg-photo-lightbox-inner figcaption {
    pointer-events: auto;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.msg-photo-lightbox-close {
    position: absolute; top: 14px; right: 18px;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s;
}
.msg-photo-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Mobile: avatar leggermente più piccolo, layout invariato (testo + foto
   restano in linea per non sprecare verticale). */
@media (max-width: 600px) {
    .msg-detail-header { gap: 12px; padding: 14px 14px; }
    .msg-detail-pet-avatar { width: 56px; height: 56px; }
    .msg-detail-pet-avatar.no-photo svg { width: 30px; height: 30px; }
}
.msg-thread { background: var(--bg);
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 18px 14px; display: flex; flex-direction: column; gap: 10px;
    min-height: 300px; max-height: 72vh; overflow-y: auto; }
.msg-bubble { max-width: 82%; padding: 11px 15px; border-radius: var(--radius);
    font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg-bubble-customer { align-self: flex-end; background: var(--primary); color: #fff;
    border-bottom-right-radius: 4px; box-shadow: var(--shadow-sm); }
.msg-bubble-customer .msg-bubble-meta { color: rgba(255, 255, 255, .8); }
.msg-bubble-vet { align-self: flex-start; background: var(--surface);
    border: 1px solid var(--border); color: var(--text);
    border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg-bubble-system { align-self: center; background: #faf5e8;
    color: var(--text); font-size: .85rem; max-width: 92%; font-style: italic;
    padding: 9px 14px; border: 1px solid var(--warning);
    border-radius: var(--radius-sm); }
.msg-bubble-meta { font-size: .75rem; opacity: .7; margin-top: 4px;
    display: block; font-style: normal; }

.msg-reply-form { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px; margin-top: 12px;
    box-shadow: var(--shadow-sm); }
.msg-reply-form textarea { width: 100%; min-height: 90px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
    font-size: .95rem; box-sizing: border-box; resize: vertical;
    background: var(--surface); color: var(--text); }
.msg-reply-form textarea:focus { outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint); }
.msg-reply-actions { display: flex; gap: 8px; justify-content: space-between;
    margin-top: 8px; flex-wrap: wrap; }

.msg-detail-closed { background: var(--bg); color: var(--text-secondary);
    padding: 14px 16px; border-radius: var(--radius); text-align: center;
    margin-top: 12px; font-size: .9rem; border: 1px solid var(--border); }

.msg-spinner { display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    border-radius: 50%; animation: msg-spin .8s linear infinite;
    vertical-align: middle; }
.msg-spinner-dark { border-color: var(--primary-tint); border-top-color: var(--primary); }
@keyframes msg-spin { to { transform: rotate(360deg); } }
.msg-loading { text-align: center; padding: 40px; color: var(--text-muted); }

/* Allegati */
.msg-attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.msg-attach-btn { display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--primary);
    border: 1px dashed var(--primary); padding: 8px 14px;
    border-radius: var(--radius-sm); font: inherit; font-size: .9rem;
    cursor: pointer; transition: all .15s; }
.msg-attach-btn:hover { background: var(--primary-tint); }
.msg-attach-btn svg { width: 16px; height: 16px; }
.msg-attach-hidden { display: none; }
.msg-attach-help { color: var(--text-muted); font-size: .82rem;
    margin-top: 4px; line-height: 1.4; }
.msg-attach-chip { display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-tint); color: var(--primary-dark);
    border: 1px solid rgba(63,93,204,.2);
    padding: 6px 10px 6px 12px; border-radius: var(--radius-sm);
    font-size: .85rem; max-width: 280px; }
.msg-attach-chip .name { white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-weight: 500; }
.msg-attach-chip .size { color: var(--text-muted); font-size: .8rem; }
.msg-attach-chip-remove { background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); padding: 2px 4px; line-height: 1;
    border-radius: 4px; font: inherit; }
.msg-attach-chip-remove:hover { background: rgba(0,0,0,.06); color: #c0392b; }

/* Quick-pick farmaci per richiesta ricetta — chip cliccabili dei farmaci
   prescritti negli ultimi 12 mesi, estratti dal pet_detail cached. */
.msg-drug-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.msg-drug-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-tint, #eef3ff);
    border: 1.5px solid #c7d3f0;
    color: var(--primary, #3f5dcc);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-family: inherit; font-size: .88rem;
    cursor: pointer;
    transition: all .15s;
}
.msg-drug-chip:hover, .msg-drug-chip:focus-visible {
    background: #dde6ff; border-color: var(--primary, #3f5dcc);
    transform: translateY(-1px); outline: 0;
    box-shadow: 0 2px 6px rgba(63,93,204,0.15);
}
.msg-drug-chip.is-added {
    background: #d8f0e0; border-color: #1f6b48; color: #1f6b48;
}
.msg-drug-chip-plus {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(63,93,204,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; line-height: 1;
    flex-shrink: 0;
}
.msg-drug-chip.is-added .msg-drug-chip-plus {
    background: rgba(31,107,72,0.18);
}
.msg-drug-chip-name { font-weight: 600; }
.msg-drug-chip-dose {
    color: var(--text-muted, #6b7791);
    font-size: .8rem; font-weight: 500;
    padding-left: 6px;
    border-left: 1px solid rgba(63,93,204,0.2);
}
.msg-drug-loading, .msg-drug-empty {
    color: var(--text-muted, #6b7791);
    font-size: .85rem; font-style: italic;
    display: inline-flex; align-items: center; gap: 8px;
}
.msg-drug-loading .msg-spinner { font-style: normal; }

.msg-bubble-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg-att-card { display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.95); color: var(--text);
    border: 1px solid var(--border); padding: 8px 12px 8px 10px;
    border-radius: var(--radius-sm); text-decoration: none;
    max-width: 280px; transition: all .15s; }
.msg-att-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.msg-att-card svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.msg-att-card .info { display: flex; flex-direction: column; min-width: 0; }
.msg-att-card .name { font-weight: 500; font-size: .88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-att-card .size { color: var(--text-muted); font-size: .78rem; }

.msg-bubble-customer .msg-att-card { background: rgba(255,255,255,.18); color: #fff;
    border-color: rgba(255,255,255,.4); }
.msg-bubble-customer .msg-att-card svg { color: #fff; }
.msg-bubble-customer .msg-att-card .size { color: rgba(255,255,255,.75); }
.msg-bubble-customer .msg-att-card:hover { background: rgba(255,255,255,.28); border-color: #fff; }
.msg-att-thumb { display: block; max-width: 220px; max-height: 200px;
    border-radius: var(--radius-sm); margin-top: 8px;
    border: 1px solid var(--border); cursor: zoom-in; background: #fff; }
.msg-bubble-customer .msg-att-thumb { border-color: rgba(255,255,255,.4); }

/* Split view (lista + chat) */
.msg-split { display: grid; gap: 18px;
    /* lista più compatta (330→) per dare respiro alla conversazione */
    grid-template-columns: minmax(290px, 330px) 1fr;
    align-items: start; }
.msg-split-list { min-width: 0; }
.msg-split-detail { min-width: 0; position: sticky; top: 12px; }

.msg-empty-detail { background: var(--surface);
    border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 60px 28px; text-align: center;
    color: var(--text-muted); font-size: .95rem; line-height: 1.55; }
.msg-empty-detail svg { width: 56px; height: 56px;
    color: var(--primary-tint); margin-bottom: 14px; }
.msg-empty-detail strong { color: var(--text); display: block;
    font-size: 1.05rem; margin-bottom: 4px; }

.msg-mobile-back { display: none; }

@media (max-width: 720px) {
    .msg-split { grid-template-columns: 1fr; gap: 0; }
    .msg-split-detail { position: static; }
    .msg-split:not(.show-detail) .msg-split-detail { display: none; }
    .msg-split.show-detail .msg-split-list { display: none; }
    .msg-split.show-detail .msg-mobile-back { display: inline-flex;
        align-items: center; gap: 6px; background: transparent;
        color: var(--primary); border: none; padding: 4px 0 12px;
        font: inherit; font-size: .92rem; cursor: pointer; }
    .msg-split.show-detail .msg-mobile-back svg { width: 18px; height: 18px; }
}

.msg-view { display: none; }
.msg-view.active { display: block; }

/* Avatar grande inline nel hero pet_detail. Dimensione "social" moderna,
   con doppio bordo bianco + shadow morbida per dare profondità. */
.me-hero-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-tint) 0%, var(--accent-tint, var(--primary-tint)) 100%);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--surface);
    box-shadow:
        0 8px 24px rgba(26, 41, 64, 0.14),
        0 2px 6px rgba(26, 41, 64, 0.06),
        0 0 0 1px var(--border);
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 22px;
    transition: transform .25s ease;
}
.me-hero-avatar:hover { transform: scale(1.03); }
.me-hero-avatar svg { width: 54px; height: 54px; }
.me-hero-avatar.has-photo { padding: 0; background: var(--surface); }
.me-hero-avatar.has-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.me-hero-avatar.has-photo.no-photo {
    background: linear-gradient(135deg, var(--primary-tint) 0%, var(--accent-tint, var(--primary-tint)) 100%);
}
.me-hero-text-row {
    display: flex;
    align-items: center;
    min-width: 0;
}
.me-hero-text-row > .me-hero-text { min-width: 0; }

/* Mobile: collassa hero a 1 colonna, CTA full-width in colonna,
   padding-bottom extra per evitare che le waves (margin-top -100px)
   coprano i pulsanti. Specificity 0,2,0 per battere .hero.hero-compact !important */
@media (max-width: 820px) {
    .me-hero .me-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
    .me-hero-text p.lead { margin-left: auto; margin-right: auto; }
    .me-hero-text-row { justify-content: center; flex-direction: column; }
    .me-hero-text-row > .me-hero-avatar { margin: 0 0 12px; }
    .me-hero-text-row > .me-hero-text { text-align: center; }
    .me-hero-cta { flex-direction: column; align-items: center; gap: 8px; }
    .me-hero-cta > * {
        width: 100%; max-width: 340px;
        text-align: center; justify-content: center;
    }
    .hero.me-hero { padding-bottom: 130px !important; }
}

/* =============================================================================
 * SHARED CALENDARIO + SLOTS + METEO (used by me_prenota, me_sposta, form)
 * Estratto da me_prenota.html inline (2026-05-12) per consentire il riuso in
 * me_sposta.html. Quando modifichi, ricorda che impatta TUTTI e 3 i form.
 * =========================================================================== */

/* Calendario */
.mp-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    padding: 8px 4px;
}
.mp-cal-month {
    font-weight: 700;
    color: var(--text);
    text-transform: capitalize;
    font-size: 1.05rem;
}
.mp-cal-nav {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 36px; height: 36px;
    cursor: pointer; font-size: 1.2rem;
    color: var(--text);
    transition: all .15s;
}
.mp-cal-nav:hover:not(:disabled) { background: var(--primary-tint); color: var(--primary); }
.mp-cal-nav:disabled { opacity: .4; cursor: not-allowed; }
.mp-cal, .mp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.mp-cal-dh, .mp-cal-d {
    text-align: center;
    padding: 10px 0 6px;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    position: relative;
    transition: all .15s;
    background: transparent;
    border: 1px solid transparent;
    color: #c5c9d0;
    cursor: not-allowed;
}
.mp-cal-dh { color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; padding: 6px 0; }
.mp-cal-d.empty { background: transparent; border-color: transparent; }
/* Giorno prenotabile: UN solo colore verde tenue (2026-06-12, parità col
   form pubblico — rimosse scale disponibilità e bordi severità meteo) */
.mp-cal-d.avail {
    background: #e3f5e9; border-color: #b7dfc4;
    color: #1f6b48; cursor: pointer;
}
.mp-cal-d.avail:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border-color: var(--primary);
}
.mp-cal-d.selected {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(63,93,204,0.35);
}
.mp-cal-d.today { box-shadow: inset 0 0 0 2px var(--primary); }
.mp-cal-d.today.selected { box-shadow: 0 2px 8px rgba(63,93,204,0.35); }
.mp-cal-d .mp-cal-count {
    display: block;
    margin-top: 3px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}
.mp-cal-d.selected .mp-cal-count { opacity: 1; }
/* Meteo chip in cella calendario */
.mp-cal-d .mp-cal-weather {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    font-size: .68rem;
    line-height: 1;
    opacity: 0.9;
}
.mp-cal-d .mp-cal-w-icon { font-size: .85rem; }
.mp-cal-d .mp-cal-w-temp { font-weight: 600; color: var(--text-secondary); }
.mp-cal-d.selected .mp-cal-w-temp { color: rgba(255,255,255,0.9); }

/* Card meteo + warning sotto agli slot */
.mp-weather-card {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.mp-weather-head {
    display: flex; align-items: center; gap: 12px;
}
.mp-weather-icon { color: #0284c7; line-height: 0; flex-shrink: 0; }
.mp-weather-icon svg { display: block; }
.mp-weather-summary {
    color: var(--text-muted);
    font-size: .9rem;
    margin-top: 2px;
}
.mp-weather-warnings {
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.mp-weather-warning {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: .88rem;
    line-height: 1.4;
}
.mp-weather-warning--info {
    background: #eff6ff; border-color: #3b82f6; color: #1e40af;
}
.mp-weather-warning--warning {
    background: #fffbeb; border-color: #f59e0b; color: #92400e;
}
.mp-weather-warning--danger {
    background: #fef2f2; border-color: #dc2626; color: #991b1b;
}
.mp-weather-warning-title { font-weight: 700; margin-bottom: 3px; }
.mp-weather-warning-msg { font-size: .85rem; }
/* Legenda */

/* Slot picker */
.mp-slots-title { margin: 0 0 10px; font-size: 1rem; color: var(--text); }
.mp-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 8px;
}
.mp-slot {
    padding: 10px 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: all .15s;
    font-family: var(--font);
}
.mp-slot:hover { border-color: var(--primary); color: var(--primary); }
.mp-slot.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Slot con temperatura: orario + temp piccola */
.mp-slot .mp-slot-time { display: block; font-size: 1rem; line-height: 1.1; }
.mp-slot .mp-slot-temp { display: block; font-size: .7rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.mp-slot:hover .mp-slot-temp { color: var(--primary); }
.mp-slot.selected .mp-slot-temp { color: rgba(255,255,255,0.85); }
/* Hint visivo brachy */
.mp-slot.mp-slot-hot:not(.selected) {
    border-color: #dc2626;
    background: linear-gradient(180deg, var(--surface) 60%, rgba(220,38,38,0.08));
}
.mp-slot.mp-slot-hot .mp-slot-temp { color: #b91c1c; font-weight: 700; }
.mp-slot.mp-slot-warm:not(.selected) {
    border-color: #f59e0b;
    background: linear-gradient(180deg, var(--surface) 60%, rgba(245,158,11,0.08));
}
.mp-slot.mp-slot-warm .mp-slot-temp { color: #b45309; font-weight: 700; }

/* Step heading (titoli sezioni nei form prenota/sposta) */
.mp-step-heading {
    margin: 24px 0 6px; font-size: 1.15rem; font-weight: 700;
    color: var(--text);
}

/* ===== Consulenze online — INTRO + OFFER/FORM + CARD + CHAT (condivise) =====
   Sorgente UNICA usata da DUE superfici GEMELLE: area personale
   (customer_dashboard.html) e scheda animale (pet_detail.html). Entrambe usano le
   stesse classi .me-cons-* per intro, offer-card (richiesta), card consulenza e chat
   → stesso stile garantito. UNICA differenza ammessa: la scheda pet non ha il campo
   "Per quale animale?" (pet pre-impostato). Modifica QUI, non duplicare. */
.me-cons-intro{margin:0 0 16px}
.me-cons-intro h2{margin:0 0 4px;font-size:1.15rem}
.me-cons-intro p{margin:0;color:var(--text-muted);font-size:.95rem}
.me-cons-offer{background:var(--surface,#fff);border:1px solid var(--border,#e3e8f0);border-radius:var(--radius,14px);box-shadow:var(--shadow,0 2px 8px rgba(28,42,84,.06));padding:18px 22px;margin-bottom:14px}
.me-cons-offer-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.me-cons-offer-name{font-weight:700}
.me-cons-offer-price{color:var(--primary,#3f5dcc);font-weight:700}
.me-cons-new-btn,.me-cons-submit{background:var(--primary,#3f5dcc);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-weight:700;cursor:pointer}
.me-cons-cancel{background:transparent;border:1px solid var(--border,#cfd6e4);border-radius:999px;padding:9px 18px;cursor:pointer;font-weight:600}
.me-cons-form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
/* GOTCHA: display:flex sopra sovrascriverebbe l'attributo HTML `hidden` →
   il form resterebbe SEMPRE aperto (Richiedi/Annulla non funzionerebbero).
   Il selettore [hidden] (specificità maggiore) ripristina il collapse. */
.me-cons-form[hidden]{display:none}
.me-cons-field{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600}
.me-cons-field em{font-weight:400;color:var(--text-muted)}
.me-cons-field select,.me-cons-field textarea{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--border,#cfd6e4);border-radius:10px;width:100%;box-sizing:border-box}
.me-cons-form-actions{display:flex;gap:10px;justify-content:flex-end}
.me-cons-form-err{color:#c0392b;font-size:.88rem}
/* Variante informativa (non errore): es. "hai gia' una consulenza aperta di questo tipo" */
.me-cons-form-err.is-info{color:#1f6f8b;background:#eaf4f7;border:1px solid #cfe6ec;border-radius:8px;padding:.55rem .7rem}
/* Card appuntamento (messaggio strutturato in chat: proposta/conferma/fissato) */
.me-cons-appt-card{margin:.4rem 0;padding:.7rem .8rem;border-radius:12px;background:#eef2ff;border:1px solid #c7d2fe;max-width:90%}
.me-cons-appt-card.t-appt_scheduled{background:#eaf7ef;border-color:#bfe3cd}
.me-cons-appt-card.t-appt_cancelled{background:#fbeaea;border-color:#f0caca}
.me-cons-appt-text{font-size:.92rem;color:#1e293b;line-height:1.35}
.me-cons-appt-actions{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.me-cons-appt-note{margin-top:.45rem;font-size:.8rem;color:#6b7791}
.me-cons-terms{border:1px solid var(--border,#e4e8f0);border-radius:10px;padding:8px 12px;font-size:.88rem}
.me-cons-terms summary{cursor:pointer;color:var(--primary,#3f5dcc);font-weight:600;font-size:.88rem}
.me-cons-terms-body{margin-top:6px;color:var(--text-muted,#6b7791);font-size:.83rem;line-height:1.5}
.me-cons-terms-body ul{margin:8px 0 2px;padding-left:18px}
.me-cons-terms-body li{margin-bottom:5px}
.me-cons-accept{display:flex;align-items:flex-start;gap:8px;font-size:.88rem}
.me-cons-accept input{margin-top:3px}
/* Card consulenza allineata al guscio dei tab Fatture/Da-pagare (.me-fat-row /
   .me-pro-row): surface + border + radius + shadow + padding + hover lift. */
.me-cons-card{background:var(--surface,#fff);border:1px solid var(--border,#e3e8f0);border-radius:var(--radius,14px);box-shadow:var(--shadow,0 2px 8px rgba(28,42,84,.06));padding:18px 22px;margin-bottom:12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.me-cons-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md,0 6px 18px rgba(28,42,84,.12));transform:translateY(-1px)}
.me-cons-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.me-cons-card-name{font-weight:700}
.me-cons-badge{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.me-cons-badge.attesa_pagamento{background:#fff4e0;color:#b9770e}
.me-cons-badge.pagata,.me-cons-badge.in_lavorazione{background:#e7f0ff;color:#2a55c8}
.me-cons-badge.conclusa{background:#e6f6ec;color:#1f7a44}
.me-cons-badge.annullata{background:#f1f1f4;color:#777}
.me-cons-card-meta{color:var(--text-muted);font-size:.9rem;margin:2px 0}
.me-cons-pay{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;background:var(--primary,#3f5dcc);color:#fff;text-decoration:none;border-radius:999px;padding:11px 26px;font-weight:700;box-shadow:0 3px 10px rgba(63,93,204,.30);transition:transform .12s,box-shadow .12s,background .15s}
.me-cons-pay:hover{background:var(--primary-dark,#3450b8);transform:translateY(-1px);box-shadow:0 5px 14px rgba(63,93,204,.38)}
.me-cons-prep{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--text-muted);font-size:.9rem}
.me-cons-hint{margin-top:6px;color:var(--text-muted);font-size:.82rem}
/* Riga data/ora del videoconsulto SULLA card (prima solo in chat) + retry */
.me-cons-appt{margin-top:8px;padding:9px 12px;border-radius:10px;background:var(--primary-tint,#eef1fc);color:var(--navy,#16233d);font-size:.9rem;line-height:1.35}
.me-cons-appt-when{display:block}
.me-cons-appt-note{display:block;margin-top:3px;color:var(--text-muted);font-size:.82rem}
.me-cons-appt-live{background:#e7f6ec;color:#1b5e20}
.me-cons-retry{border:1px solid var(--primary,#3f5dcc);background:#fff;color:var(--primary,#3f5dcc);border-radius:8px;padding:4px 12px;font-weight:600;cursor:pointer;font-size:.85rem;margin-left:6px}
/* Toast + conferma in-stile (sostituiscono alert()/confirm() nativi) — me_toast.js */
.me-toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100% - 32px)}
.me-toast{pointer-events:auto;background:var(--navy,#16233d);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.22);font-size:.92rem;line-height:1.35;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.me-toast.show{opacity:1;transform:none}
.me-toast-error{background:#8a1f14}
.me-toast-ok{background:#1b5e20}
.me-confirm-ov{position:fixed;inset:0;z-index:2147483001;background:rgba(20,30,50,.42);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s}
.me-confirm-ov.show{opacity:1}
.me-confirm-box{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.me-confirm-msg{margin:0 0 18px;color:var(--navy,#16233d);font-size:1rem;line-height:1.45}
.me-confirm-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.me-confirm-no,.me-confirm-yes{border-radius:999px;padding:10px 20px;font-weight:600;font-size:.92rem;cursor:pointer;border:1px solid var(--border,#dfe3ee)}
.me-confirm-no{background:#fff;color:var(--text-muted,#6b7791)}
.me-confirm-yes{background:var(--primary,#3f5dcc);color:#fff;border-color:var(--primary,#3f5dcc)}
@media(max-width:560px){.me-confirm-row{flex-direction:column-reverse}.me-confirm-no,.me-confirm-yes{width:100%}}
/* Barra azioni come .me-pro-actions: divisore tratteggiato + pill buttons */
.me-cons-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)}
.me-cons-act{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);color:var(--primary,#3f5dcc);border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.me-cons-act:hover{border-color:var(--primary);box-shadow:0 1px 6px rgba(28,42,84,.10)}
.me-cons-act.me-cons-primary{background:var(--primary,#3f5dcc);border-color:var(--primary,#3f5dcc);color:#fff;box-shadow:0 3px 10px rgba(63,93,204,.30)}
.me-cons-act.me-cons-primary:hover{background:var(--primary-dark,#33489f);box-shadow:0 5px 14px rgba(63,93,204,.38)}
/* Intestazione di sezione nella lista consulenze (separa 'a pagamento' dai
   'Follow-up post-visita' gratuiti). Mostrata solo quando esistono entrambe. */
.me-cons-section-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#6b7791);font-weight:700;margin:18px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border,#eef0f6)}
.me-cons-section-h:first-child{margin-top:0}
/* Sotto-tab del tab Consulenze (Tutte / A pagamento / Follow-up): pill segmentate,
   visibili solo con entrambi i tipi → i follow-up si isolano in 1 click senza
   scorrere tutte le consulenze a pagamento (feedback 2026-06-23). */
.me-cons-subtabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.me-cons-subtab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border,#e3e8f0);background:var(--surface,#fff);color:var(--text-secondary,#54627a);border-radius:999px;padding:6px 14px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.me-cons-subtab:hover{border-color:var(--primary,#3f5dcc);color:var(--primary,#3f5dcc)}
.me-cons-subtab.is-active{background:var(--primary,#3f5dcc);border-color:var(--primary,#3f5dcc);color:#fff}
.me-cons-subtab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.me-cons-subtab-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(21,33,63,.08);color:inherit;font-size:.72rem;font-weight:700}
.me-cons-subtab.is-active .me-cons-subtab-n{background:rgba(255,255,255,.25)}
/* Follow-up: thread (iniziale + follow-up raggruppati), sessioni precedenti, bottone */
.me-cons-thread-count{font-size:.7rem;font-weight:600;color:var(--primary,#3f5dcc);background:var(--primary-tint,#eef2ff);border:1px solid var(--primary-light,#c7d2fe);border-radius:999px;padding:1px 9px;margin-left:8px;vertical-align:middle}
.me-cons-sess-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:10px 12px;background:#f8fafc;border:1px solid var(--border,#eef0f6);border-radius:10px}
.me-cons-sess{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem}
.me-cons-sess-label{font-weight:600;color:var(--navy,#1e2a44)}
.me-cons-sess-date{color:var(--text-muted,#6b7791)}
.me-cons-sess-dls{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.me-cons-sess-dl{padding:6px 13px;font-size:.8rem}
.me-cons-active-label{font-weight:700;color:var(--primary,#3f5dcc);margin:6px 0 4px;font-size:.9rem}
.me-cons-act.me-cons-followup{background:#0ea5a3;border-color:#0ea5a3;color:#fff}
.me-cons-act.me-cons-followup:hover{background:#0c8d8b;border-color:#0c8d8b;box-shadow:0 3px 10px rgba(14,165,163,.30)}
/* Scheda di anamnesi nutrizionale: prompt sulla card + stato inviato */
.me-cons-anam{margin:10px 0}
.me-cons-anam-todo{background:#fef3c7;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.me-cons-anam-msg{font-size:.9rem;color:#92400e;line-height:1.45}
.me-cons-anam-todo .me-cons-act{align-self:flex-start}
.me-cons-anam-done{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem}
.me-cons-anam-ok{color:#166534;font-weight:600}
.me-cons-anam-link{background:none;border:none;color:var(--primary,#3f5dcc);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
/* Modale anamnesi */
.anam-overlay{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.anam-modal{background:#fff;border-radius:16px;width:100%;max-width:620px;max-height:92vh;overflow-y:auto;box-shadow:0 18px 50px rgba(15,23,42,.35);padding:0}
.anam-head{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid var(--border,#e8eaf2);z-index:1}
.anam-head h3{margin:0;font-size:1.05rem;color:var(--navy,#1e2a44)}
.anam-x{border:none;background:transparent;font-size:1.5rem;line-height:1;color:var(--text-muted,#6b7791);cursor:pointer;width:32px;height:32px;border-radius:8px}
.anam-x:hover{background:rgba(21,33,63,.06);color:var(--navy)}
.anam-intro{margin:14px 20px 0;font-size:.88rem;color:var(--text-muted,#6b7791);line-height:1.45}
.anam-form{padding:6px 20px 0}
.anam-sec{margin-top:18px}
.anam-sec h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--primary,#3f5dcc);font-weight:700}
.anam-field{margin-bottom:14px}
.anam-label{display:block;font-size:.88rem;color:var(--navy,#1e2a44);font-weight:600;margin-bottom:5px}
.anam-req{color:#dc2626}
.anam-field input[type=text],.anam-field textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--border,#d8dce8);border-radius:8px;font:inherit;background:#fff}
.anam-field textarea{resize:vertical;min-height:64px}
.anam-opts{display:flex;flex-direction:column;gap:6px}
.anam-opt{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--navy,#1e2a44);font-weight:400;cursor:pointer}
.anam-opt input{flex:none}
.anam-other{margin-top:7px}
.anam-err{margin:12px 20px 0;color:#991b1b;font-size:.88rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:9px 12px}
.anam-foot{position:sticky;bottom:0;background:#fff;display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border,#e8eaf2);margin-top:18px}
@media (max-width:560px){.anam-foot{flex-direction:column-reverse}.anam-foot .me-cons-act{width:100%;justify-content:center}}
/* "Consulenza seguita da Dott. X" — foto/iniziali del medico */
.me-cons-vet{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.me-cons-vet-img,.me-cons-vet-ini{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.me-cons-vet-ini{background:var(--primary,#3f5dcc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
.me-cons-vet-name{font-size:.9rem;color:var(--navy,#1e2a44)}
/* Foto del pet sulla card consulenza/follow-up.
   NB: .me-cons-petrow = riga pet della CARD; .me-cons-pet resta il <select> del
   form "Richiedi consulenza" (popolato da populatePets via
   querySelectorAll('.me-cons-pet')). NON usare me-cons-pet sulla card: populatePets
   ci inietterebbe dentro tutti i nomi pet a ogni poll (bug 2026-06-23). */
.me-cons-petrow{display:flex;align-items:center;gap:9px;margin:8px 0 2px;font-weight:600;color:var(--navy,#1e2a44)}
.me-cons-pet{display:flex;align-items:center;gap:9px;margin:8px 0 2px;font-weight:600;color:var(--navy,#1e2a44)}
.me-cons-petimg{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;background:#eef2ff}
.me-cons-petph{display:flex;align-items:center;justify-content:center;color:#7c8bbf}
/* === CHAT CONSULENZA — pannello inline a colonna stretta "messaggistica"
   (2026-06-19, da design workflow). Desktop: centrato, max 640px, area
   messaggi alta → niente piu' chat stirata a tutta larghezza con vuoto
   centrale. Mobile (<=640px): full-width. SOLO-CSS, openChat/closeChat
   invariati. NB: .me-cons-act/-primary/-form-err NON ridefinite qui
   (condivise coi bottoni-azione delle card). Preservate .me-cons-filechip*,
   .me-cons-att-*, .me-cons-chat-empty/-who. === */
.me-cons-chatbox{width:100%;max-width:640px;margin:16px auto 4px;border:1px solid var(--border,#e3e8f0);border-radius:var(--radius,14px);background:var(--surface,#fff);box-shadow:var(--shadow-md,0 6px 18px rgba(28,42,84,.12));overflow:hidden;display:flex;flex-direction:column}
.me-cons-chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:11px 14px;font-weight:700;font-size:.98rem;color:var(--navy);background:linear-gradient(135deg,var(--primary-tint,#eef2ff),#f3f6fd);border-bottom:1px solid var(--border,#e3e8f0)}
.me-cons-chat-head>span{min-width:0}
.me-cons-chat-head #meConsChatTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Bottone "Indietro" (in alto a sx): nascosto su desktop (lì chiude la × a dx),
   mostrato su mobile dove la chat è overlay a tutto schermo (vedi @media sotto). */
.me-cons-chat-back{display:none;align-items:center;gap:3px;flex:0 0 auto;border:none;background:transparent;color:var(--primary,#3f5dcc);font:inherit;font-size:.92rem;font-weight:600;line-height:1;cursor:pointer;padding:5px 9px 5px 2px;border-radius:8px;transition:background .15s}
.me-cons-chat-back:hover{background:rgba(63,93,204,.08)}
.me-cons-chat-back:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.me-cons-chat-back svg{display:block}
.me-cons-chat-x{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:transparent;color:var(--text-muted,#6b7791);font-size:1.35rem;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.me-cons-chat-x:hover{background:rgba(21,33,63,.06);color:var(--navy)}
.me-cons-chat-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.me-cons-chat-msgs{flex:1 1 auto;min-height:340px;max-height:55vh;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;display:flex;flex-direction:column;gap:10px;padding:16px 14px;background:#fafbfe;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.me-cons-chat-msgs::-webkit-scrollbar{width:8px}
.me-cons-chat-msgs::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.me-cons-chat-msgs::-webkit-scrollbar-thumb:hover{background:#c3cde0}
.me-cons-chat-empty{color:var(--text-muted,#6b7791);font-size:.9rem;text-align:center;padding:12px;margin:auto}
.me-cons-chat-msg{max-width:78%;width:fit-content;padding:9px 13px;border-radius:16px;font-size:.93rem;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(26,41,64,.06);animation:meConsBubbleIn .18s ease-out}
@keyframes meConsBubbleIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.me-cons-chat-msg.them,.me-cons-chat-msg.staff{align-self:flex-start;background:var(--primary-tint,#eef2ff);color:#22305c;border-bottom-left-radius:5px}
.me-cons-chat-msg.mine{align-self:flex-end;background:linear-gradient(135deg,var(--primary,#3f5dcc),var(--primary-dark,#33489f));color:#fff;border-bottom-right-radius:5px}
.me-cons-chat-msg.system{align-self:center;max-width:90%;text-align:center;background:transparent;color:var(--text-muted,#6b7791);font-size:.82rem;font-weight:600;padding:4px 12px;box-shadow:none;animation:none}
.me-cons-chat-msg.mine a{color:#fff;text-decoration:underline}
.me-cons-chat-msg.them a,.me-cons-chat-msg.staff a{color:var(--primary-dark,#33489f)}
.me-cons-chat-who{font-size:.74rem;opacity:.8;margin-bottom:2px}
.me-cons-att-img{max-width:200px;max-height:200px;border-radius:8px;margin-top:6px;display:block}
/* Bolla "ottimistica" durante l'invio (feedback immediato su upload foto lento). */
.me-cons-chat-pending{opacity:.72}
.me-cons-chat-sending{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.76rem;color:var(--text-muted,#6b7791)}
.me-cons-att-file{display:inline-block;margin-top:6px;font-size:.85rem;text-decoration:underline;word-break:break-all}
.me-cons-chat-msg.mine .me-cons-att-file{color:#fff}
.me-cons-chat-closed{padding:12px 14px;text-align:center;font-size:.88rem;color:var(--text-muted,#6b7791);background:#f6f7fb;border-top:1px solid var(--border,#e3e8f0)}
/* Promemoria anamnesi dentro la chat (consulenza nutrizionale non ancora compilata) */
.me-cons-chat-anam{align-self:stretch;background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 12px;font-size:.86rem;line-height:1.45}
.me-cons-chat-anam .me-cons-anam-btn{display:inline-block;margin-top:8px;background:var(--primary,#3f5dcc);color:#fff;border:none;border-radius:999px;padding:7px 14px;font:inherit;font-weight:600;font-size:.84rem;cursor:pointer}
.me-cons-chat-form{display:flex;flex-direction:column;gap:8px;margin:0;padding:12px 14px;border-top:1px solid var(--border,#e3e8f0);background:var(--surface,#fff)}
.me-cons-chat-form textarea{width:100%;box-sizing:border-box;min-height:46px;max-height:140px;resize:vertical;padding:10px 12px;border:1px solid var(--border,#cfd6e4);border-radius:var(--radius-sm,10px);background:#fafbfe;font:inherit;font-size:.93rem;line-height:1.4;color:var(--navy);transition:border-color .15s,box-shadow .15s,background .15s}
.me-cons-chat-form textarea::placeholder{color:var(--text-muted,#6b7791)}
.me-cons-chat-form textarea:focus{outline:none;border-color:var(--primary);background:var(--surface,#fff);box-shadow:0 0 0 3px var(--primary-tint,#eef2ff)}
.me-cons-chat-files{display:none;flex-wrap:wrap;gap:8px;margin-top:0;align-items:center}
.me-cons-filechip{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--border,#d8dee9);border-radius:10px;padding:4px 24px 4px 4px;background:#fff;max-width:190px}
.me-cons-filechip img{width:48px;height:48px;object-fit:cover;border-radius:6px;display:block;flex:none;background:#eef1f6}
.me-cons-filechip .fc-doc{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--primary-tint,#eef2ff);color:var(--primary,#3f5dcc);border-radius:6px;font-size:.66rem;font-weight:700;flex:none}
.me-cons-filechip .fc-nm{font-size:.76rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.me-cons-filechip .fc-rm{position:absolute;top:2px;right:5px;border:0;background:transparent;color:var(--text-muted,#6b7791);font-size:1.05rem;line-height:1;cursor:pointer;padding:0}
.me-cons-filechip .fc-rm:hover{color:#c0392b}
.me-cons-chat-formrow{display:flex;gap:8px;align-items:center;justify-content:space-between}
.me-cons-clip{cursor:pointer}
@media (max-width:640px){
  .me-cons-chatbox{max-width:none;margin:14px 0 4px;border-radius:12px}
  .me-cons-chat-msgs{min-height:300px;max-height:62vh;padding:14px 12px}
  .me-cons-chat-msg{max-width:86%;font-size:.95rem}
  .me-cons-chat-form{padding:10px 12px}
  .me-cons-chat-form textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .me-cons-chat-msg{animation:none}
  .me-cons-chat-msgs{scroll-behavior:auto}
  .me-cons-chat-x,.me-cons-chat-form textarea{transition:none}
}

/* === Consulenze: MASTER-DETAIL (desktop: lista a sx, chat a dx) =========
   FIX CRITICO: .me-cons-chatbox ha display:flex → senza questa regola
   l'attributo `hidden` NON nasconde la chat (gotcha display:flex vs hidden,
   come .me-cons-form/overlay foto). Va PRIMA di tutto. === */
.me-cons-chatbox[hidden]{display:none}
/* contenitore split: 1 colonna (mobile/tablet), 2 colonne >=900px */
.me-cons-split{display:grid;grid-template-columns:1fr;gap:16px}
/* placeholder colonna destra (solo desktop, quando nessuna chat aperta) */
.me-cons-detail-empty{display:none}
/* card consulenza evidenziata quando la sua chat e' aperta a destra */
.me-cons-card.is-selected{border-color:var(--primary,#3f5dcc);box-shadow:0 0 0 2px var(--primary-tint,#eef2ff),var(--shadow-md,0 6px 18px rgba(28,42,84,.12))}
@media (min-width:900px){
  .me-cons-split{grid-template-columns:minmax(300px,1fr) minmax(360px,1.3fr);gap:20px;align-items:start}
  .me-cons-detail-col{position:sticky;top:84px}
  /* nella colonna destra la chat riempie la colonna (niente 640px centrato) */
  .me-cons-detail-col .me-cons-chatbox{max-width:none;margin:0}
  .me-cons-detail-empty{display:flex;align-items:center;justify-content:center;text-align:center;min-height:360px;padding:24px;border:1px dashed var(--border,#e3e8f0);border-radius:var(--radius,14px);background:var(--surface,#fff);color:var(--text-muted,#6b7791);font-size:.95rem;line-height:1.5}
  .me-cons-chatbox:not([hidden]) + .me-cons-detail-empty{display:none}
}
/* Mobile/tablet (<900px, una colonna): la chat aperta NON resta in fondo sotto le
   card → diventa overlay a tutto schermo (feedback 2026-06-23). Scroll del body
   bloccato via .me-cons-chat-modal (toggle in openChat/closeChat). */
@media (max-width:899px){
  .me-cons-chatbox:not([hidden]){position:fixed;inset:0;z-index:1900;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;border-radius:0}
  .me-cons-chatbox:not([hidden]) .me-cons-chat-msgs{max-height:none;flex:1 1 auto}
  body.me-cons-chat-modal{overflow:hidden}
  /* La bolla chat flottante (.cfab di _chat_bubble.html, fissata al viewport)
     pesca sopra la chat consulenza a tutto schermo e copre il tasto Invia
     (feedback 2026-06-23). Mentre la chat consulenza è aperta nascondila: è
     comunque irraggiungibile sotto l'overlay e ridondante (sei già in chat).
     La riapri chiudendo la chat (closeChat → toglie me-cons-chat-modal). */
  body.me-cons-chat-modal .cfab,
  body.me-cons-chat-modal .cpanel.open{display:none!important}
  /* Overlay a tutto schermo: il "Indietro" a sx è l'affordance di chiusura
     (chiude la chat + consuma lo stato cronologia → il back gesto non esce dal
     /me). La × a dx serve solo al master-detail desktop → qui la nascondo. */
  .me-cons-chat-back{display:inline-flex}
  .me-cons-chat-x{display:none}
  .me-cons-chat-head #meConsChatTitle{flex:1 1 auto}
}

/* ============================================================
   RESTYLE 2026-07-09 — Card consulenze "piatte" come le .lb-card del
   Laboratorio (/medici/laboratorio): bordo netto, niente ombra a
   riposo, hover sobrio (solo il colore del bordo diventa primario).
   Layer in coda al foglio: per annullare il restyle basta rimuovere
   questo blocco. Gemello del blocco analogo in customer_dashboard.html
   (Regola 7: .me-cons-* è condiviso con pet_detail via
   _consultations_panel.html → il restyle vale su entrambe le superfici).
   NB: .me-cons-card.is-selected (ring master-detail) ha specificità
   maggiore → conserva il suo evidenziatore.
   ============================================================ */
.me-cons-offer,
.me-cons-card { box-shadow: none; }
.me-cons-card:hover { box-shadow: none; transform: none; border-color: var(--primary); }