/**
 * mee-table Frontend Styles v3.0
 * Light theme — default accent gold #c9a96e, dark text. Accent color is
 * a CSS custom property (--meetab-accent / --meetab-accent-tint, set inline per
 * site from the "Colore principale del widget" setting) so each site can
 * match its own brand color instead of always showing gold.
 *
 * Font-family is deliberately NOT set here — it lives in the separate
 * meetab-style-font.css, enqueued only when "Usa il font e lo stile del tema
 * del sito" is off. Everything else in this file (colors, layout,
 * spacing, buttons) must always load regardless of that setting: it was
 * previously skipped entirely along with the font, which is why the
 * booking widget rendered as an unstyled list on any site with that
 * option enabled.
 */

.meetab-booking {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
    color: #1a1a1a !important;
}
.meetab-booking * { box-sizing: border-box !important; }
.meetab-booking *:not(.meetab-title):not(.meetab-panel-title) { text-transform: none !important; letter-spacing: normal !important; }
/* .meetab-title/.meetab-panel-title are real h2/h3 tags specifically so themes that
   style headings (font-family, weight, letter-spacing, italic — e.g. this
   theme's font-family:Eccentric on h1-h4, or another theme's italic/weight
   on its own heading rule) cascade through naturally.
   Deliberately excluded from the blanket reset above rather than set to
   `inherit` here: the `inherit` keyword takes the literal computed value
   of the immediate parent element, bypassing the CSS cascade entirely —
   it is NOT the same as "let the theme's own matching rule win". A theme
   that sets font-weight/letter-spacing/font-style on its own heading
   selector (not just font-family, as this one does) would be silently
   missed by `inherit` here, since it would read the wrapping <div>'s
   plain value instead of the heading rule. Simply having no competing
   !important declaration at all is the only way that's actually correct
   for any theme, not just the two tested tonight. */

/* HEADER */
.meetab-booking-header { text-align: center !important; margin-bottom: 2rem !important; }
.meetab-booking-header .meetab-title { font-size: 24px !important; color: #1a1a1a !important; margin: 0 0 4px !important; }
.meetab-booking-header .meetab-subtitle { font-size: 14px !important; color: #6b7280 !important; margin: 0 !important; font-weight: 400 !important; }

/* STEPS */
.meetab-steps { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 2rem !important; gap: 0 !important; }
.meetab-step { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #9ca3af !important; font-weight: 500 !important; }
.meetab-step span { width: 30px !important; height: 30px !important; border-radius: 50% !important; border: 1.5px solid #d1d5db !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 600 !important; color: #9ca3af !important; background: transparent !important; }
.meetab-step.active { color: #1a1a1a !important; }
.meetab-step.active span { background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-step-line { width: 48px !important; height: 1px !important; background: #e5e7eb !important; margin: 0 10px !important; }

/* PANEL */
.meetab-panel { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; padding: 1.75rem !important; margin-bottom: 12px !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; }
#meetab-panel-2 { padding: 1.75rem 0.5rem !important; }
.meetab-panel.hidden { display: none !important; }
.meetab-panel-title { font-size: 17px !important; color: #1a1a1a !important; margin: 0 0 1.25rem !important; }

/* GUESTS */
.meetab-guests-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 1.5rem !important; }
.meetab-guest-btn {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 22px 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    transition: all .15s !important;
}
.meetab-guest-btn:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-guest-btn.selected { border: 2px solid var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-continue-btn { width: 100% !important; padding: 16px !important; background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; }
.meetab-continue-btn:hover { background: #b8946a !important; }

/* CALENDAR */
.meetab-calendar-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 1.25rem !important; font-weight: 600 !important; font-size: 16px !important; color: #1a1a1a !important; }
.meetab-cal-nav {
    /* Same theme-button-padding leak as .meetab-cal-day (see its comment) —
       found by auditing every real <button> element after that bug, not
       yet reported broken live, but the same root cause applies here. */
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1a1a1a !important;
}
.meetab-cal-nav:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 3px !important; width: 100% !important; }
.meetab-cal-day-name { font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important; text-align: center !important; padding: 6px 0 !important; text-transform: uppercase !important; }
.meetab-cal-day {
    /* This is a real <button> element — without this reset, the theme's
       own global button padding (the same rule styling "PRENOTA UN
       TAVOLO", ~7px 38px) wins since nothing here overrode it. That forced
       each of the 7 grid columns to a ~90px content-driven minimum width
       (grid items don't shrink below content+padding by default), blowing
       the whole calendar past mobile width and producing wildly tall,
       uneven rows — found live on a real phone. */
    padding: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
    transition: all .12s !important;
}
.meetab-cal-day:hover { background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-cal-day.selected { background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; font-weight: 700 !important; }
.meetab-cal-day.disabled { color: #d1d5db !important; cursor: default !important; pointer-events: none !important; }

/* SLOTS */
.meetab-slots-grid-full {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 4px !important;
    padding-top: 16px !important;
}
.meetab-slot-btn {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: visible !important;
    background: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    transition: all .12s !important;
}
.meetab-slot-btn:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; }
.meetab-slot-btn.selected { border: 2px solid var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }

/* BADGE SCONTO */
.meetab-badge {
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

/* FORM */
.meetab-summary { background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 14px !important; margin-bottom: 1.25rem !important; font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; }
.meetab-form-field { margin-bottom: 1rem !important; }
.meetab-form-field label { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important; margin-bottom: 6px !important; }
.meetab-form-field input, .meetab-form-field textarea { width: 100% !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important; background: #fff !important; color: #1a1a1a !important; outline: none !important; font-family: inherit !important; }
.meetab-form-field input:focus, .meetab-form-field textarea:focus { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-error { color: #ef4444 !important; font-size: 14px !important; margin-top: 8px !important; }
.meetab-confirm-title { font-size: 22px !important; font-weight: 700 !important; text-align: center !important; color: #1a1a1a !important; margin-bottom: 1rem !important; }

/* POWERED BY */
.meetab-powered { text-align: center !important; font-size: 12px !important; color: #d1d5db !important; margin-top: 1.5rem !important; }

@media (max-width: 600px) {
    .meetab-booking { padding: 1rem 8px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .meetab-booking-header { margin-bottom: 0.75rem !important; }
    .meetab-booking-header .meetab-title { font-size: 20px !important; }
    .meetab-panel { padding: 1.25rem 12px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
    .meetab-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .meetab-slot-btn { padding: 18px 8px !important; font-size: 16px !important; }
    .meetab-badge { top: -14px !important; font-size: 10px !important; }
    .meetab-guests-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; width: 100% !important; }
    .meetab-guest-btn { padding: 16px 2px !important; font-size: 18px !important; }
    .meetab-step { font-size: 12px !important; }
    .meetab-step span { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .meetab-cal-grid { gap: 2px !important; width: 100% !important; }
    /* [31/8/2026] min-width: 0 COMPLETA la correzione del commento su
       .meetab-cal-day. Li' si era tolto il padding del tema, che forzava le
       colonne a ~90px. Restava pero' che una casella di griglia non scende
       sotto il suo contenuto (min-width: auto di serie), e con
       aspect-ratio: 1 l'altezza minima diventa anche larghezza minima: sette
       celle da 32 piu' le distanze fanno 236 punti, che dentro la scheda su un
       telefono stretto non ci stanno, e la colonna della domenica finiva fuori
       dal bordo. Con min-width: 0 le celle si stringono e il quadrato lo
       decide aspect-ratio, non l'altezza minima. */
    .meetab-cal-day { min-height: 32px !important; min-width: 0 !important; font-size: 13px !important; }
    .meetab-cal-grid > * { min-width: 0 !important; }
    .meetab-cal-day-name { font-size: 11px !important; padding: 4px 0 !important; }
    .meetab-calendar-header { margin-bottom: 1rem !important; }

    /* [31/8/2026] SPAZIO SOTTO LA SCHEDA, PERCHE' LA PILLOLA NON COPRA LE
       DATE. La pillola «Prenota» e' fissa in basso a destra (48px di altezza
       piu' 16 di margine) e deve restare anche su questa pagina: due prove in
       tests/bolla.js lo pretendono, ed e' la decisione presa dopo il difetto
       di srwebdemo. Quello che si puo' fare e' non farle trovare sotto niente
       di utile: con questo spazio la scheda finisce sopra la pillola invece
       di continuare sotto, e l'ultima riga del calendario resta leggibile.
       Il titolare ha visto la pillola sopra il calendario, su un telefono,
       il 31/8/2026. */
    .meetab-panel { padding-bottom: 84px !important; }

    /* [2026-08-06] I bottoni dei locali, in colonna, larghi uguale.
       Prima si mandavano a capo restando larghi quanto il loro testo, quindi
       «Osteria Le Vigne» misurava 186px e «Trattoria Pecora Nera» 222px, e
       ognuno si centrava nella propria riga: due bottoni disallineati, uno
       piu' corto dell'altro. Misurato a 430px di viewport.

       box-sizing: border-box NON E' DECORATIVO, e' la ragione per cui questa
       regola non rompe niente: quei bottoni hanno gli stili in linea nel PHP,
       con padding 16px 28px e bordo 2px, e senza border-box un width:100%
       diventerebbe 100% + 60px e sborderebbe a destra. E' la trappola gia'
       presa tre volte su questo progetto (form dating, gift card, palco
       /esperienze). Se qualcuno tocca questa regola, tenga il border-box. */
    .meetab-location-btn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 400px) {
    .meetab-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; }
    .meetab-guests-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Location selector buttons */
.meetab-location-btn:hover {
    background: var(--meetab-accent-tint, #fdf8f0) !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    transform: translateY(-2px);
}
.meetab-location-btn.active {
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
}

.ui-datepicker-selected a {
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
}

/* ---------------------------------------------------------------------------
   Event teaser buttons (Dating Aperitivo / Cooking Class).
   Previously inline-styled only, which meant no :hover was possible: the
   button looked inert and, at 14px with a long "find out more" tail, read as
   a caption rather than something clickable. The colour lives here per
   variant so both teasers share one shape, size and interaction.
   --------------------------------------------------------------------------- */
.meetab-event-teaser-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.meetab-event-teaser-btn .meetab-teaser-emoji { font-size: 21px; line-height: 1; }
/* The arrow shifts on hover so the affordance reads even for anyone who
   cannot distinguish the two purples. */
.meetab-event-teaser-btn .meetab-teaser-arrow { transition: transform .18s ease; }
.meetab-event-teaser-btn:hover .meetab-teaser-arrow,
.meetab-event-teaser-btn:focus-visible .meetab-teaser-arrow { transform: translateX(4px); }
.meetab-event-teaser-btn:hover,
.meetab-event-teaser-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.26);
}
.meetab-event-teaser-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.meetab-event-teaser-btn--cooking { background: #7c3aed; }
.meetab-event-teaser-btn--cooking:hover,
.meetab-event-teaser-btn--cooking:focus-visible { background: #5b21b6; }

.meetab-event-teaser-btn--dating { background: #dc2626; }
.meetab-event-teaser-btn--dating:hover,
.meetab-event-teaser-btn--dating:focus-visible { background: #991b1b; }

.meetab-event-teaser-btn--menu { background: #b45309; }
.meetab-event-teaser-btn--menu:hover,
.meetab-event-teaser-btn--menu:focus-visible { background: #92400e; }

@media (prefers-reduced-motion: reduce) {
    .meetab-event-teaser-btn,
    .meetab-event-teaser-btn .meetab-teaser-arrow { transition: none; }
    .meetab-event-teaser-btn:hover { transform: none; }
}

/* ==========================================================================
   [29/8/2026] LA PILLOLA DI PRENOTAZIONE (public/js/meetab-bolla.js).
   Prima queste regole erano un document.createElement('style') scritto dal
   JS a runtime: e' la categoria esatta per cui wordpress.org ha gia'
   rimandato indietro il plugin quattro volte (CSS iniettato fuori da
   wp_enqueue_style). Adesso e' un foglio vero, caricato da accoda_colore()
   in public/class-meetab-public.php cosi' come prima veniva eseguito lo
   script: su ogni pagina dove compare la pillola, anche senza il modulo.
   Nessun valore qui e' dinamico: il colore scelto dal ristoratore non passa
   da questo file, arriva via style.setProperty('--meetab-chat-accent', ...)
   direttamente sull'elemento, in meetab-bolla.js.
   ========================================================================== */
#meetab-bolla{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147482900;display:flex;align-items:stretch;gap:0;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.22);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;max-width:240px;}
/* [9/9/2026] Quando in basso a destra c'e' gia' un bottone WhatsApp di un
   altro plugin, meetab-bolla.js aggiunge questa classe: la pillola si
   sposta nell'angolo opposto invece di restare sovrapposta. */
#meetab-bolla.meetab-b-sx{right:auto;left:calc(20px + env(safe-area-inset-left,0px));}
/* [4/9/2026] La seconda riga della pallina, il tavolo, quando in pagina c'e'
   gia' un'esperienza: stessa forma ma piu' quieta, perche' li' la cosa che
   l'ospite sta guardando e' il corso. */
#meetab-bolla a.meetab-b-tavolo{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;background:#fff;color:inherit;border:1px solid rgba(0,0,0,0.15);border-radius:999px;font-size:13px;text-decoration:none;margin-top:6px;}
#meetab-bolla a.meetab-b-tavolo:hover{background:#f6f7f7;}
#meetab-bolla:has(a.meetab-b-tavolo){display:flex;flex-direction:column;align-items:stretch;background:transparent;box-shadow:none;}
#meetab-bolla a.meetab-b-prenota{display:flex;align-items:center;min-height:48px;padding:0 22px;background:var(--meetab-chat-accent,#c9a96e);color:#fff;text-decoration:none;font-size:15px;font-weight:600;border-radius:999px;white-space:nowrap;}
#meetab-bolla.meetab-b-doppia a.meetab-b-prenota{border-radius:999px 0 0 999px;padding-right:16px;}
#meetab-bolla button.meetab-b-chat{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border:0;cursor:pointer;border-radius:0 999px 999px 0;background:var(--meetab-chat-accent,#c9a96e);color:#fff;border-left:1px solid rgba(255,255,255,.35);}
#meetab-bolla a.meetab-b-prenota:focus-visible,#meetab-bolla button.meetab-b-chat:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px;}
@media print{#meetab-bolla{display:none;}}

/* ==========================================================================
   [29/8/2026] L'ASSISTENTE PER GLI OSPITI (public/js/meetab-assistente.js).
   Stessa storia della pillola qui sopra: era un document.createElement('style')
   nel JS, adesso e' qui. Anche qui nessun valore dinamico: il colore arriva
   via style.setProperty('--meetab-chat-accent', ...) sul contenitore, in
   meetab-assistente.js, non da questo foglio.
   ========================================================================== */
#meetab-assistente{position:fixed;right:20px;bottom:20px;z-index:2147483000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;color:#1f2328;direction:ltr;text-align:left;}
#meetab-assistente *{box-sizing:border-box;margin:0;padding:0;font-family:inherit;}

/* La pallina. */
#meetab-assistente .meetab-a-pallina{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);
  transition:transform .18s ease,box-shadow .18s ease;margin-left:auto;}
#meetab-assistente .meetab-a-pallina:hover{transform:scale(1.06);box-shadow:0 8px 22px rgba(0,0,0,.22);}
#meetab-assistente .meetab-a-pallina:focus-visible{outline:3px solid var(--meetab-chat-accent,#c9a96e);outline-offset:3px;}

/* Il pannello. */
#meetab-assistente .meetab-a-pannello{display:none;flex-direction:column;width:360px;height:480px;
  max-height:calc(100vh - 120px);margin-bottom:14px;overflow:hidden;
  background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;}
#meetab-assistente.meetab-a-aperto .meetab-a-pannello{display:flex;opacity:1;transform:none;}

/* Testata. */
#meetab-assistente .meetab-a-testata{display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;flex:0 0 auto;}
#meetab-assistente .meetab-a-nome{font-weight:600;font-size:15px;color:#fff;}
#meetab-assistente .meetab-a-stato{font-size:12px;opacity:.85;color:#fff;}
#meetab-assistente .meetab-a-chiudi{margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;}
#meetab-assistente .meetab-a-chiudi:hover{background:rgba(255,255,255,.28);}

/* Conversazione. */
#meetab-assistente .meetab-assistente-conversazione{flex:1 1 auto;overflow-y:auto;padding:16px;
  background:#f7f7f8;display:flex;flex-direction:column;gap:10px;}
#meetab-assistente .meetab-a-bolla{max-width:82%;padding:10px 13px;font-size:14.5px;
  border-radius:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}
#meetab-assistente .meetab-a-locale{align-self:flex-start;background:#fff;color:#1f2328;
  border:1px solid rgba(0,0,0,.06);border-bottom-left-radius:5px;}
#meetab-assistente .meetab-a-ospite{align-self:flex-end;background:var(--meetab-chat-accent,#c9a96e);color:#fff;
  border-bottom-right-radius:5px;}

/* I tre puntini mentre pensa. */
#meetab-assistente .meetab-a-puntini{display:inline-flex;gap:4px;align-items:center;height:9px;}
#meetab-assistente .meetab-a-puntini i{width:7px;height:7px;border-radius:50%;background:#b9bcc2;
  animation:meetab-a-salta 1.3s infinite ease-in-out;}
#meetab-assistente .meetab-a-puntini i:nth-child(2){animation-delay:.16s;}
#meetab-assistente .meetab-a-puntini i:nth-child(3){animation-delay:.32s;}
@keyframes meetab-a-salta{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}

/* Riga di scrittura. */
#meetab-assistente .meetab-assistente-modulo{display:flex;gap:8px;align-items:center;
  padding:12px;background:#fff;border-top:1px solid rgba(0,0,0,.07);flex:0 0 auto;}
#meetab-assistente .meetab-assistente-campo{flex:1 1 auto;min-width:0;height:42px;padding:0 14px;
  font-size:15px;color:#1f2328;background:#f2f3f5;border:1px solid transparent;
  border-radius:21px;outline:none;box-shadow:none;}
#meetab-assistente .meetab-assistente-campo:focus{background:#fff;border-color:var(--meetab-chat-accent,#c9a96e);}
#meetab-assistente .meetab-assistente-campo::placeholder{color:#8b9099;opacity:1;}
#meetab-assistente .meetab-assistente-invia{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;transition:opacity .15s ease;}
#meetab-assistente .meetab-assistente-invia[disabled]{opacity:.45;cursor:default;}

/* Il bottone «prenota» sotto la risposta. */
#meetab-assistente .meetab-a-prenota{align-self:flex-start;margin:-2px 0 2px;padding:9px 15px;
  border:0;border-radius:20px;cursor:pointer;font-size:14px;font-weight:600;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);}
#meetab-assistente .meetab-a-prenota:hover{filter:brightness(1.06);}

/* La riga dell'AI Act. */
#meetab-assistente .meetab-assistente-nota{padding:0 14px 11px;background:#fff;
  font-size:11px;line-height:1.45;color:#8b9099;text-align:center;flex:0 0 auto;}

/* Sul telefono il pannello prende la larghezza, ma non tutto lo schermo. */
@media (max-width:480px){
  #meetab-assistente{right:14px;bottom:14px;left:14px;}
  #meetab-assistente .meetab-a-pannello{width:auto;height:70vh;}
}
@media (prefers-reduced-motion:reduce){
  #meetab-assistente .meetab-a-pallina,#meetab-assistente .meetab-a-pannello{transition:none;}
  #meetab-assistente .meetab-a-puntini i{animation:none;}
}