/* ==========================================================================
   No Rubrica — tema scuro (v1.6.0)
   Redesign estetico: dark + verde "al limite", box messaggi eleganti,
   banner half-page ai lati (desktop). NESSUNA logica toccata: tutti gli
   ID/classi usati da app.js e google-auth.js restano identici.
   ========================================================================== */

:root {
    --bg:#0D1310;
    --surface:#151F19;
    --surface-2:#111A15;
    --ink:#E9F1EB;
    --ink-soft:#AAB8AF;
    --muted:#7A897F;
    --line:#25322B;
    --line-strong:#33443A;
    --brand:#1BC763;          /* verde acceso "al limite WhatsApp" — fill bottoni */
    --brand-ink:#84EDAE;      /* verde chiaro — testi/accenti su scuro */
    --brand-tint:#123322;     /* fondo box selezionato */
    --brand-on:#07140D;       /* testo scuro sopra il verde pieno */
    --sans:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -22px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }

body {
    font-family:var(--sans);
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
    background-color:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
}

/* ===== Barra account / login Google ===== */
#account-bar {
    width:100%;
    max-width:1240px;
    box-sizing:border-box;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    padding:12px 20px;
}
#syncStatus {
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    font-family:var(--mono);
}
#syncStatus.synced {
    color:var(--brand-ink);
    font-weight:600;
}
/* Contenitore nudo: il bottone ufficiale "Sign in with Google" (iframe GIS)
   viene renderizzato qui dentro da google-auth.js e porta il suo stile. */
#googleSignInBtn {
    display:flex;
    align-items:center;
    min-height:40px;
}
#userInfo {
    display:none;
    align-items:center;
    gap:8px;
    cursor:pointer;
    padding:4px 12px 4px 4px;
    border-radius:20px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--ink);
}
#userInfo:hover { background:var(--surface-2); }
#userProfilePic {
    width:30px; height:30px;
    border-radius:50%;
    object-fit:cover;
    margin:0; padding:0;
}
#userName {
    font-size:14px;
    font-weight:600;
    color:var(--ink);
}

/* ===== Header ===== */
#site-header {
    text-align:center;
    padding:14px 16px 6px;
}
#site-header .brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    font-size:32px;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--ink);
}
.brand-bubble {
    width:30px; height:30px;
    border-radius:9px 9px 9px 3px;
    background:var(--brand);
    position:relative;
    flex:none;
}
.brand-bubble::after {
    content:"";
    position:absolute;
    inset:8px;
    border-radius:3px;
    background:repeating-linear-gradient(var(--brand-on) 0 2px,transparent 2px 6px);
    opacity:.85;
}
#site-header .tagline {
    margin:9px auto 0;
    color:var(--ink-soft);
    font-size:15px;
    max-width:52ch;
}

/* ===== Nav viste (Strumento / Chat aperte / Rubrica / Blog) ===== */
#site-nav {
    display:flex;
    gap:7px;
    justify-content:center;
    flex-wrap:wrap;
    padding:14px 16px 0;
}
#site-nav a {
    padding:7px 15px;
    border-radius:999px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink-soft);
    text-decoration:none;
    border:1px solid transparent;
    transition:background .15s ease,color .15s ease;
}
#site-nav a:hover { color:var(--ink); background:var(--surface); }
#site-nav a.active {
    color:var(--brand-ink);
    background:var(--brand-tint);
    border-color:var(--brand);
}

/* ===== Card delle viste Log / Rubrica ===== */
.page-card {
    width:100%;
    max-width:680px;
    margin:0 auto;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 24px 22px;
    box-shadow:var(--shadow);
}
.page-card h1 {
    font-size:22px;
    letter-spacing:-.01em;
    color:var(--ink);
    margin:0 0 8px;
}
.page-note {
    color:var(--ink-soft);
    font-size:13.5px;
    line-height:1.55;
    margin:6px 0;
}
.page-note a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.page-note strong { color:var(--ink); }

/* Liste dati (righe log e contatti) */
.data-list {
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.data-row {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 14px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:11px;
}
.data-main { flex:1 1 220px; min-width:0; }
.data-name { font-weight:700; color:var(--ink); font-size:15px; }
.data-phone { font-family:var(--mono); font-weight:700; color:var(--ink); font-size:14px; }
.data-phone.sub { font-weight:600; color:var(--brand-ink); margin-top:2px; }
.data-msg {
    color:var(--ink-soft);
    font-size:13px;
    line-height:1.45;
    margin-top:3px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.data-meta {
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
}
.data-actions { display:flex; gap:8px; flex:none; }

/* Bottoni compatti delle righe */
.btn-small {
    width:auto;
    padding:8px 14px;
    font-size:13px;
    border-radius:9px;
    background:var(--brand);
    color:var(--brand-on);
}
.btn-small:hover { filter:brightness(1.07); }
.btn-small:disabled { opacity:.55; cursor:default; }
.btn-ghost {
    background:var(--surface);
    color:var(--brand-ink);
    border:1px solid var(--line-strong);
}
.btn-ghost:hover { background:var(--line); filter:none; }
.btn-danger {
    background:transparent;
    color:#E0776F;
    border:1px solid #553530;
}
.btn-danger:hover { background:#2A1815; filter:none; }

.empty-state {
    text-align:center;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    padding:28px 10px;
}
.empty-state a { color:var(--brand-ink); }

/* Form nuovo contatto (rubrica interna) */
.contact-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:14px 0 6px;
}
.contact-form input {
    padding:11px 13px;
    border:1px solid var(--line-strong);
    background:var(--surface-2);
    color:var(--ink);
    font-size:14.5px;
    border-radius:10px;
}
.contact-form input::placeholder { color:var(--muted); }
.contact-form input:focus {
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(27,199,99,.18);
}
.contact-form input#cNote { grid-column:1 / -1; }
.contact-form button {
    grid-column:1 / -1;
    background:var(--brand);
    color:var(--brand-on);
    box-shadow:0 8px 20px -10px var(--brand);
}
.contact-form button:hover { filter:brightness(1.07); }
.contact-form button:disabled { opacity:.55; cursor:default; }

/* ===== Corpo: banner + contenuto ===== */
/* Layout arioso: banner schiacciati alle pareti, centro largo per i box */
#main-content {
    display:grid;
    grid-template-columns:300px minmax(0,1fr) 300px;
    align-items:start;
    gap:0;
    width:100%;
    max-width:100%;
    padding:24px 16px 0;
    box-sizing:border-box;
}

/* Placeholder pubblicità (half-page 300×600). Diventeranno <ins> AdSense. */
#left-banner, #right-banner {
    width:300px;
    height:600px;
    position:sticky;
    top:20px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:12px;
    font-family:var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    background:var(--surface-2);
    border:1px dashed var(--line-strong);
    border-radius:12px;
}
#left-banner  { justify-self:start; }   /* attaccato alla parete sinistra */
#right-banner { justify-self:end; }     /* attaccato alla parete destra */

/* Quando js/ads.js monta l'unità AdSense vera, via cornice e scritta placeholder */
.banner.ads-live {
    border:none;
    background:transparent;
    color:transparent;
}

#content-area {
    max-width:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 16px;
}

/* Card compose */
#whatsapp-container {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    box-sizing:border-box;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 24px;
    box-shadow:var(--shadow);
    gap:6px;
}

/* Etichette campi (mono, se presenti nell'HTML) */
.field-label {
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin:6px 0 6px;
    width:100%;
    max-width:480px;
}
.field-label .sub {
    text-transform:none;
    letter-spacing:0;
    color:var(--muted);
}

/* reset larghezze rigide della vecchia versione */
input, textarea, button {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    font-family:var(--sans);
}

input#phoneNumber {
    padding:12px 14px;
    margin:0;
    width:100%;
    max-width:480px;
    border:1px solid var(--line-strong);
    background:var(--surface-2);
    color:var(--ink);
    font-size:16px;
    border-radius:10px;
}
input#phoneNumber::placeholder { color:var(--muted); }
input#phoneNumber:focus {
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(27,199,99,.18);
}

/* Riga bottoni: Apri chat (pieno) + Incolla (ghost) affiancati */
.btn-row {
    display:flex;
    gap:9px;
    margin:10px 0;
    width:100%;
    max-width:480px;
}

button {
    padding:12px;
    border:none;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    margin:0;
    transition:filter .15s ease,background .15s ease;
}

button#whatsapp-button,
button#whatsapp-button-bottom {
    flex:1;
    height:auto;
    background:var(--brand);
    color:var(--brand-on);
    box-shadow:0 8px 20px -10px var(--brand);
}
button#whatsapp-button:hover,
button#whatsapp-button-bottom:hover { filter:brightness(1.07); }

button#paste-button,
button#paste-button-bottom {
    flex:none;
    width:auto;
    height:auto;
    padding:12px 18px;
    background:var(--surface-2);
    color:var(--brand-ink);
    border:1px solid var(--line-strong);
}
button#paste-button:hover,
button#paste-button-bottom:hover { background:var(--line); }

/* ===== Box messaggi rapidi (l'invenzione di Dante) ===== */
/* Griglia larga e ariosa: i box si affiancano e sfruttano lo spazio centrale */
#messages-container {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    width:100%;
    gap:16px 22px;
    padding:26px 0 20px;
    margin:4px 0 8px;
}
.message-wrapper {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:300px;
    max-width:100%;
    margin:0;
    position:relative;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:11px;
    padding:6px;
    cursor:pointer;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.message-wrapper.selected {
    border-color:var(--brand);
    background:var(--brand-tint);
    box-shadow:0 0 0 1px var(--brand);
}
/* Quadratini di selezione sopra e sotto ogni box (feature di Dante):
   VERDI = messaggio attivo, quello che parte con Apri Chat; GRIGI = spento. */
.message-wrapper .radio-button {
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:18px; height:18px;
    border-radius:6px;
    background:var(--muted);
    transition:background .15s ease;
}
.message-wrapper .radio-button.top { top:-20px; }
.message-wrapper .radio-button.bottom { bottom:-20px; }
.message-wrapper.selected .radio-button { background:var(--brand); }

.message-wrapper textarea {
    height:56px;
    min-height:44px;
    resize:vertical;
    padding:9px 11px;
    margin:0;
    border:none;
    background:transparent;
    color:var(--ink);
    font-size:14px;
    line-height:1.4;
    border-radius:8px;
}
.message-wrapper textarea::placeholder { color:var(--muted); }
.message-wrapper textarea:focus { outline:none; }

/* Pulsante "aggiungi messaggio" (era un enorme "+") */
.add-button {
    width:auto;
    align-self:flex-start;
    height:auto;
    padding:9px 15px;
    background:transparent;
    color:var(--brand-ink);
    font-size:13px;
    font-weight:600;
    font-family:var(--mono);
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px dashed var(--brand);
    border-radius:9px;
    margin:2px 0 4px;
}
.add-button:hover { background:var(--brand-tint); }
.add-button::before {
    content:'+ aggiungi messaggio';
    font-size:13px;
    line-height:1;
    display:block;
    color:var(--brand-ink);
    font-weight:600;
}

/* ===== Blocco intro SEO ===== */
#intro {
    max-width:560px;
    margin:26px auto 40px;
    color:var(--ink-soft);
    line-height:1.65;
    padding:0 4px;
}
#intro h1 {
    font-size:22px;
    letter-spacing:-.01em;
    color:var(--ink);
    text-wrap:balance;
}
#intro em { color:var(--brand-ink); font-style:normal; }
#intro strong { color:var(--ink); }
#intro a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
#intro a:hover { color:var(--brand); }

/* ===== Footer ===== */
#site-footer {
    width:100%;
    box-sizing:border-box;
    text-align:center;
    padding:22px 16px 60px;
    background:var(--surface-2);
    border-top:1px solid var(--line);
    margin-top:auto;
}
#site-footer a {
    color:var(--brand-ink);
    text-decoration:none;
    margin:0 9px;
}
#site-footer a:hover { text-decoration:underline; }
#site-footer .disclaimer {
    max-width:640px;
    margin:10px auto 0;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
}

/* ===== Cookie consent banner ===== */
#cookieConsent {
    background-color:rgba(8,12,10,.94);
    border-top:1px solid var(--line);
    min-height:26px;
    font-size:14px;
    color:var(--ink);
    line-height:26px;
    padding:8px 0 8px 30px;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:9999;
    display:none;
}
#cookieConsent a { color:var(--brand-ink); text-decoration:none; }
#closeCookieConsent {
    float:right;
    display:inline-block;
    cursor:pointer;
    height:20px; width:20px;
    margin:-15px 15px 0 0;
    font-weight:bold;
    color:var(--ink-soft);
}

/* ===== Responsive: sotto i 900px niente banner laterali ===== */
@media (max-width:900px) {
    #left-banner, #right-banner { display:none; }
    #main-content { grid-template-columns:1fr; padding:16px 14px 0; }
    #content-area { max-width:600px; margin:0 auto; }
    #messages-container { flex-direction:column; align-items:stretch; }
    .message-wrapper { width:100%; }
    #site-header .brand { font-size:28px; }
}