/* ============================================================
   GLOCAL HUB DESIGN SYSTEM v2 — ATERA-INSPIRED
   Aggiornato 29 maggio 2026
   ============================================================ */

:root {
  /* --- Verde Glocal --- */
  --gh-green-50:  #F1F8E9;
  --gh-green-100: #DCEDC8;
  --gh-green-200: #C5E1A5;
  --gh-green-400: #9CCC65;
  --gh-green-500: #76B947;
  --gh-green-600: #689F38;
  --gh-green-700: #558B2F;
  --gh-green-800: #33691E;
  --gh-green-900: #1B5E20;

  --gh-accent:        var(--gh-green-600);
  --gh-accent-hover:  var(--gh-green-500);
  --gh-brand:         var(--gh-green-700);

  /* --- Neutrali --- */
  --gh-bg:            #F5F5F5;
  --gh-surface:       #FFFFFF;
  --gh-surface-alt:   #FAFAFA;
  --gh-border:        #EAEAEA;
  --gh-border-strong: #E5E5E5;
  --gh-divider:       #F0F0F0;

  --gh-text:          #1A1A1A;
  --gh-text-muted:    #666666;
  --gh-text-subtle:   #888888;

  /* --- Stati semantici --- */
  --gh-success-bg:    #DCEDC8;
  --gh-success-text:  #33691E;
  --gh-success-dot:   var(--gh-green-600);

  --gh-warning-bg:    #FAEEDA;
  --gh-warning-text:  #854F0B;
  --gh-warning-dot:   #BA7517;

  --gh-danger-bg:     #FCEBEB;
  --gh-danger-text:   #A32D2D;
  --gh-danger-dot:    #E24B4A;

  --gh-info-bg:       #E6F1FB;
  --gh-info-text:     #185FA5;
  --gh-info-dot:      #534AB7;

  --gh-neutral-bg:    #F0F0F0;
  --gh-neutral-text:  #666666;
  --gh-neutral-dot:   #888888;

  /* --- Tipografia --- */
  --gh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gh-text-xs:   13px;
  --gh-text-sm:   14px;
  --gh-text-base: 15px;
  --gh-text-md:   16px;
  --gh-text-lg:   18px;
  --gh-text-xl:   23px;
  --gh-text-2xl:  28px;
  --gh-text-3xl:  32px;
  --gh-text-4xl:  37px;
  --gh-w-regular: 400;
  --gh-w-medium:  500;

  /* --- Border radius --- */
  --gh-radius-sm:   8px;
  --gh-radius-md:   10px;
  --gh-radius-lg:   14px;
  --gh-radius-xl:   16px;
  --gh-radius-pill: 9999px;

  /* --- Spacing --- */
  --gh-space-1: 4px;
  --gh-space-2: 8px;
  --gh-space-3: 12px;
  --gh-space-4: 16px;
  --gh-space-5: 20px;
  --gh-space-6: 24px;

  /* --- Border --- */
  --gh-border-width: 0.5px;
}

/* ============================================================
   COMPONENTI RIUSABILI - PREFISSO .gh-*
   ============================================================ */

.gh-card {
  background: var(--gh-surface);
  border: var(--gh-border-width) solid var(--gh-border);
  border-radius: var(--gh-radius-lg);
  padding: var(--gh-space-4);
}
.gh-card-lg { padding: 18px; }

.gh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gh-space-1);
  padding: 2px 8px;
  border-radius: var(--gh-radius-pill);
  font-size: var(--gh-text-xs);
  font-weight: var(--gh-w-medium);
  line-height: 1.4;
}
.gh-pill-success  { background: var(--gh-success-bg);  color: var(--gh-success-text); }
.gh-pill-warning  { background: var(--gh-warning-bg);  color: var(--gh-warning-text); }
.gh-pill-danger   { background: var(--gh-danger-bg);   color: var(--gh-danger-text); }
.gh-pill-info     { background: var(--gh-info-bg);     color: var(--gh-info-text); }
.gh-pill-neutral  { background: var(--gh-neutral-bg);  color: var(--gh-neutral-text); }

.gh-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gh-dot-success  { background: var(--gh-success-dot); }
.gh-dot-warning  { background: var(--gh-warning-dot); }
.gh-dot-danger   { background: var(--gh-danger-dot); }
.gh-dot-info     { background: var(--gh-info-dot); }
.gh-dot-neutral  { background: var(--gh-neutral-dot); }

.gh-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--gh-text-sm);
  color: var(--gh-text);
}

.gh-kpi-label {
  font-size: var(--gh-text-xs);
  color: var(--gh-text-subtle);
  font-weight: var(--gh-w-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gh-kpi-number {
  font-size: var(--gh-text-4xl);
  font-weight: var(--gh-w-medium);
  color: var(--gh-text);
  line-height: 1;
  letter-spacing: -1px;
}
.gh-kpi-sub {
  font-size: var(--gh-text-xs);
  color: var(--gh-text-muted);
}

.gh-greeting {
  font-size: var(--gh-text-3xl);
  font-weight: var(--gh-w-medium);
  color: var(--gh-text);
  letter-spacing: -0.5px;
  margin: 0 0 3px;
}
.gh-section-title {
  font-size: var(--gh-text-lg);
  font-weight: var(--gh-w-medium);
  color: var(--gh-text);
  margin: 0 0 2px;
}
.gh-section-subtitle {
  font-size: var(--gh-text-xs);
  color: var(--gh-text-subtle);
  margin: 0;
}

.gh-link {
  color: var(--gh-accent);
  font-weight: var(--gh-w-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gh-link:hover {
  color: var(--gh-accent-hover);
}

.gh-segmented {
  display: inline-flex;
  gap: 3px;
  background: var(--gh-surface);
  border: var(--gh-border-width) solid var(--gh-border-strong);
  border-radius: var(--gh-radius-pill);
  padding: 3px;
}
.gh-segmented-item {
  padding: 5px 13px;
  border-radius: var(--gh-radius-pill);
  font-size: var(--gh-text-xs);
  color: var(--gh-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.gh-segmented-item.active {
  background: var(--gh-text);
  color: white;
  font-weight: var(--gh-w-medium);
}

.gh-avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--gh-w-medium);
  background: var(--gh-brand);
  flex-shrink: 0;
}
.gh-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.gh-avatar-md { width: 32px; height: 32px; font-size: 12px; }
.gh-avatar-lg { width: 38px; height: 38px; font-size: 14px; }

.gh-search {
  background: var(--gh-surface);
  border: var(--gh-border-width) solid var(--gh-border-strong);
  border-radius: var(--gh-radius-pill);
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--gh-text-sm);
  color: var(--gh-text-subtle);
}

/* ============================================================
   FINE DESIGN SYSTEM v2 - sotto continua il CSS Material legacy
   ============================================================ */
/* === RESTYLING TICKET INFOLIST === */
.fi-in-text-entry .fi-badge,
.fi-ta-text .fi-badge,
.fi-badge {
    font-size: 0.95rem !important;
    padding: 0.45rem 0.9rem !important;
    line-height: 1.3 !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}
.fi-badge svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}
.fi-section-header-icon {
    width: 1.4rem !important;
    height: 1.4rem !important;
}
.fi-in-entry-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}
.fi-in-text-entry-content > .fi-badge,
.fi-in-text-entry-content > span.fi-badge,
[class*="fi-badge"] {
    font-size: 0.95rem !important;
    padding: 0.45rem 0.9rem !important;
    line-height: 1.3 !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}
.fi-in-text-item .text-sm {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.85rem !important;
    background-color: rgb(243 244 246) !important;
    border-radius: 0.5rem !important;
    display: inline-block !important;
    color: #1A1A1A !important;
}
.fi-in-affixes svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
}

/* ═══════════════════════════════════════════════
   HOVER LIFT — Card dashboard
   ═══════════════════════════════════════════════ */
.fi-page-dashboard .fi-wi > div[style*="border-radius: 1rem"],
.fi-page-dashboard .fi-wi > div[style*="border-radius:1rem"] {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
}
.fi-page-dashboard .fi-wi > div[style*="border-radius: 1rem"]:hover,
.fi-page-dashboard .fi-wi > div[style*="border-radius:1rem"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12),
                0 4px 8px -4px rgba(15, 23, 42, 0.08) !important;
}
.fi-page-dashboard .fi-wi div[style*="linear-gradient"] {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fi-page-dashboard .fi-wi > div[style*="border-radius: 1rem"]:hover div[style*="linear-gradient"],
.fi-page-dashboard .fi-wi > div[style*="border-radius:1rem"]:hover div[style*="linear-gradient"] {
    transform: scale(1.08) rotate(-3deg);
}

/* ═══════════════════════════════════════════════
   FIX SIDEBAR + CONTENUTO
   ═══════════════════════════════════════════════ */
:root {
    --sidebar-width: 14rem !important;
    --main-sidebar-width: 14rem !important;
    --collapsed-sidebar-width: 4.5rem !important;
}

@media (min-width: 1024px) {
    .fi-main {
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .fi-main > div,
    .fi-main .max-w-7xl {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════
   DASHBOARD: distanze verticali tra widget
   ═══════════════════════════════════════════════ */
.fi-page-dashboard .fi-wi-cn,
.fi-dashboard-page .fi-wi-cn,
.fi-page-dashboard > div > .grid {
    gap: 3rem !important;
}

.fi-page-dashboard .fi-wi-chart {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================
   COMPATTAZIONE LISTE (Clienti / Ticket / Servizi)
   ============================================ */
.fi-ta-table .fi-ta-image-col img,
.fi-ta-table .fi-ta-image-col > div,
.fi-ta-table .fi-avatar {
    width: 2.85rem !important;
    height: 2.85rem !important;
}

.fi-ta-table .fi-ta-text-item-label,
.fi-ta-table .fi-ta-text .fi-ta-text-item .fi-ta-text-item-label {
    font-size: 0.94rem !important;
    line-height: 1.3 !important;
}

.fi-ta-table .fi-ta-text-item-description,
.fi-ta-table .fi-ta-description {
    font-size: 0.83rem !important;
    line-height: 1.25 !important;
}

.fi-ta-table .fi-badge {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.65rem !important;
}

.fi-ta-table .fi-badge svg,
.fi-ta-table .fi-badge .fi-badge-icon {
    width: 0.95rem !important;
    height: 0.95rem !important;
}

.fi-ta-table td:nth-child(4) .fi-ta-text-item-label,
.fi-ta-table td:nth-child(4) .fi-ta-text-item-description {
    font-size: 0.88rem !important;
}

.fi-ta-table .fi-ta-text .fi-badge,
.fi-ta-table .fi-color-success.fi-badge,
.fi-ta-table .fi-color-danger.fi-badge,
.fi-ta-table .fi-color-warning.fi-badge,
.fi-ta-table .fi-color-gray.fi-badge {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.65rem !important;
}

.fi-ta-table td,
.fi-ta-table th {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

/* === PROGETTI: Card con accordion === */
.gh-progetto-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.gh-progetto-card.is-open {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    border-color: #558B2F;
}
.gh-progetto-card-header {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1.25rem;
}
.gh-progetto-nome {
    font-weight: 700;
    font-size: 1.05rem;
    color: #111827;
    line-height: 1.3;
}
.gh-progetto-cliente {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.15rem;
}
.gh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}
.gh-avatar-stack > * + * {
    margin-left: -8px;
}
.gh-avatar-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6b7280;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    margin-left: -8px;
}
.gh-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.gh-badge-attivo      { background: #dcfce7; color: #166534; }
.gh-badge-pausa       { background: #fef3c7; color: #92400e; }
.gh-badge-completato  { background: #dbeafe; color: #1e40af; }
.gh-badge-archiviato  { background: #fafafa; color: #374151; }
.gh-badge-verde       { background: #dcfce7; color: #166534; }
.gh-badge-giallo      { background: #fef3c7; color: #92400e; }
.gh-badge-rosso       { background: #fee2e2; color: #991b1b; }
.gh-badge-grigio      { background: #fafafa; color: #374151; }
.gh-toggle-btn {
    background: #fafafa;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #558B2F;
    transition: all 0.2s;
}
.gh-toggle-btn.is-open {
    background: #558B2F;
    color: white;
    transform: rotate(180deg);
}
.gh-progetto-tasks {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #d1d5db;
}
.gh-task-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fafafa;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: all 0.15s;
}
.gh-task-row:hover {
    background: #fafafa;
    border-color: #558B2F;
}
.gh-pallino {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gh-pallino-verde   { background: #10b981; }
.gh-pallino-giallo  { background: #f59e0b; }
.gh-pallino-rosso   { background: #ef4444; }
.gh-pallino-grigio  { background: #9ca3af; }
.gh-task-titolo {
    flex: 1;
    font-weight: 600;
    color: #111827;
}
.gh-task-scad {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.gh-task-empty {
    text-align: center;
    padding: 1.5rem;
    color: #9ca3af;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}
.gh-progetto-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.gh-link-apri {
    color: #558B2F;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
/* ============================================================
   CHAT DI PROGETTO - Stile Donezo
   ============================================================ */
.gh-chat-container {
    display: flex;
    flex-direction: column;
    height: 600px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.gh-chat-header {
    padding: 0.7rem 1.1rem;
    background: #ffffff;
    color: #1A1A1A;
    border-bottom: 1px solid #e5e7eb;
}
.gh-chat-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gh-chat-icon {
    font-size: 1.25rem;
    color: #558B2F;
}
.gh-chat-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1A1A1A;
}
.gh-chat-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
}
.gh-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.gh-chat-msg {
    display: flex;
    gap: 0.65rem;
    max-width: 75%;
}
.gh-chat-msg.is-mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.gh-chat-msg.is-other {
    align-self: flex-start;
}
.gh-chat-msg-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    object-fit: cover;
}
.gh-chat-msg-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.gh-chat-msg.is-mine .gh-chat-msg-body {
    align-items: flex-end;
}
.gh-chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.gh-chat-msg-autore {
    font-weight: 600;
    color: #374151;
}
.gh-chat-msg-time {
    color: #9ca3af;
}
.gh-chat-msg-bubble {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    line-height: 1.4;
    font-size: 0.9rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.gh-chat-msg.is-other .gh-chat-msg-bubble {
    background: #F3F4F6;
    color: #1f2937;
    border: none;
    border-top-left-radius: 4px;
}
.gh-chat-msg.is-mine .gh-chat-msg-bubble {
    background: #558B2F;
    color: #ffffff;
    border-top-right-radius: 4px;
}
.gh-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9ca3af;
    gap: 0.5rem;
}
.gh-chat-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}
.gh-chat-empty-title {
    font-weight: 600;
    font-size: 1rem;
    color: #6b7280;
}
.gh-chat-empty-subtitle {
    font-size: 0.85rem;
}
.gh-chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}
.gh-chat-textarea {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    font-family: inherit;
    resize: none;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.gh-chat-textarea:focus {
    outline: none;
    border-color: #558B2F;
    box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.1);
}
.gh-chat-btn-send {
    background: linear-gradient(135deg, #558B2F 0%, #7CB342 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    min-width: 80px;
}
.gh-chat-btn-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.3);
}
.gh-chat-btn-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.gh-chat-error {
    padding: 0.5rem 1rem;
    color: #dc2626;
    font-size: 0.85rem;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
}

/* ============================================================
   CHAT - STEP 3: Reply, Edit, Delete, Markdown
   ============================================================ */

/* Quote (citazione messaggio replicato) */
.gh-chat-quote {
    display: block;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    background: rgba(85, 139, 47, 0.08);
    border-left: 3px solid #558B2F;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    font-size: 0.82rem;
    transition: background 0.15s;
    max-width: 100%;
}
.gh-chat-quote:hover {
    background: rgba(85, 139, 47, 0.15);
}
.gh-chat-quote-author {
    font-weight: 600;
    color: #558B2F;
    margin-bottom: 0.15rem;
}
.gh-chat-quote-text {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-chat-msg.is-mine .gh-chat-quote {
    background: rgba(255,255,255,0.2);
    border-left-color: rgba(255,255,255,0.5);
}
.gh-chat-msg.is-mine .gh-chat-quote-author {
    color: #ffffff;
}
.gh-chat-msg.is-mine .gh-chat-quote-text {
    color: rgba(255,255,255,0.85);
}

/* "Modificato" label */
.gh-chat-msg-edited {
    color: #9ca3af;
    font-size: 0.7rem;
    font-style: italic;
}

/* Action buttons (Rispondi, Modifica, Elimina) - hover only */
.gh-chat-msg-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .gh-chat-msg:hover .gh-chat-msg-actions {
        opacity: 1;
        pointer-events: auto;
    }
}
/* Su touch device: visibile solo quando .is-active (toggle via tap) */
.gh-chat-msg.is-active .gh-chat-msg-actions {
    opacity: 1;
    pointer-events: auto;
}
.gh-chat-action-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s;
}
.gh-chat-action-btn:hover {
    background: #f3f4f6;
    color: #558B2F;
}
.gh-chat-action-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Edit form inline */
.gh-chat-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    min-width: 280px;
}
.gh-chat-edit-textarea {
    border: 2px solid #558B2F;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.4;
    outline: none;
}
.gh-chat-edit-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}
.gh-chat-edit-btn-cancel,
.gh-chat-edit-btn-save {
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.gh-chat-edit-btn-cancel {
    background: #fafafa;
    color: #6b7280;
}
.gh-chat-edit-btn-cancel:hover {
    background: #e5e7eb;
}
.gh-chat-edit-btn-save {
    background: #558B2F;
    color: #ffffff;
}
.gh-chat-edit-btn-save:hover {
    background: #4a7a29;
}

/* Reply preview (sopra il form invio) */
.gh-chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff7e6;
    border-top: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    font-size: 0.85rem;
}
.gh-chat-reply-info {
    flex: 1;
    min-width: 0;
}
.gh-chat-reply-label {
    font-weight: 600;
    color: #92400e;
    font-size: 0.78rem;
    margin-bottom: 0.1rem;
}
.gh-chat-reply-text {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-chat-reply-close {
    background: transparent;
    border: none;
    color: #92400e;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.gh-chat-reply-close:hover {
    background: rgba(146,64,14,0.1);
}

/* Markdown rendering inside bubbles */
.gh-chat-md p {
    margin: 0;
}
.gh-chat-md p + p {
    margin-top: 0.4rem;
}
.gh-chat-md strong {
    font-weight: 700;
}
.gh-chat-md em {
    font-style: italic;
}
.gh-chat-md code {
    background: rgba(0,0,0,0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Monaco, monospace;
    font-size: 0.85em;
}
.gh-chat-msg.is-mine .gh-chat-md code {
    background: rgba(255,255,255,0.25);
}
.gh-chat-md pre {
    background: rgba(0,0,0,0.08);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    margin: 0.4rem 0;
    overflow-x: auto;
    font-size: 0.82rem;
}
.gh-chat-md pre code {
    background: transparent;
    padding: 0;
}
.gh-chat-md a {
    color: inherit;
    text-decoration: underline;
}
.gh-chat-md ul,
.gh-chat-md ol {
    margin: 0.3rem 0;
    padding-left: 1.3rem;
}
.gh-chat-md blockquote {
    border-left: 3px solid rgba(0,0,0,0.2);
    padding-left: 0.6rem;
    margin: 0.3rem 0;
    color: rgba(0,0,0,0.6);
    font-style: italic;
}
.gh-chat-msg.is-mine .gh-chat-md blockquote {
    border-left-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.85);
}
.gh-chat-md del {
    text-decoration: line-through;
    opacity: 0.7;
}

/* ============================================================
   FIX STEP 3: bolle adattive alla larghezza testo
   ============================================================ */
.gh-chat-msg-bubble {
    width: fit-content;
    max-width: 100%;
}
.gh-chat-msg-body {
    max-width: 100%;
}
.gh-chat-msg.is-mine .gh-chat-msg-body {
    align-items: flex-end;
}

/* ============================================================
   FIX BOLLE: forza larghezza adattiva al contenuto (override)
   ============================================================ */
.gh-chat-msg-bubble {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-block !important;
}
.gh-chat-msg-body {
    max-width: 100% !important;
    width: auto !important;
}
.gh-chat-msg {
    max-width: 70% !important;
}

/* ============================================================
   FIX BOLLE - SUPER SPECIFICO (vince anche su Tailwind/Filament)
   ============================================================ */
.gh-chat-container .gh-chat-messages .gh-chat-msg .gh-chat-msg-bubble,
div.gh-chat-msg-bubble {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}
.gh-chat-msg.is-mine .gh-chat-msg-bubble {
    align-self: flex-end !important;
}
.gh-chat-container .gh-chat-msg {
    max-width: 70% !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
.gh-chat-container .gh-chat-msg-body {
    max-width: 100% !important;
    width: fit-content !important;
    flex: 0 0 auto !important;
}

/* ============================================================
   FIX BOLLE - SUPER SPECIFICO (vince anche su Tailwind/Filament)
   ============================================================ */
.gh-chat-container .gh-chat-messages .gh-chat-msg .gh-chat-msg-bubble,
div.gh-chat-msg-bubble {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}
.gh-chat-msg.is-mine .gh-chat-msg-bubble {
    align-self: flex-end !important;
}
.gh-chat-container .gh-chat-msg {
    max-width: 70% !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
.gh-chat-container .gh-chat-msg-body {
    max-width: 100% !important;
    width: fit-content !important;
    flex: 0 0 auto !important;
}

/* ============================================================
   FIX BOLLE - DEFINITIVO: forza body a fit-content
   ============================================================ */
.gh-chat-container .gh-chat-msg .gh-chat-msg-body {
    width: fit-content !important;
    max-width: 75% !important;
    align-self: flex-start !important;
}
.gh-chat-container .gh-chat-msg.is-mine .gh-chat-msg-body {
    align-self: flex-end !important;
}
.gh-chat-container .gh-chat-msg-body > .gh-chat-msg-bubble {
    width: fit-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}
.gh-chat-container .gh-chat-msg.is-mine .gh-chat-msg-body > .gh-chat-msg-bubble {
    align-self: flex-end !important;
}
/* fix anche meta e actions per non stretchare */
.gh-chat-container .gh-chat-msg-body > .gh-chat-msg-meta,
.gh-chat-container .gh-chat-msg-body > .gh-chat-msg-actions {
    width: fit-content !important;
    max-width: 100% !important;
}

/* ============================================================
   FIX DEFINITIVO: rimuovi pre-wrap dalla bubble
   (manteniamo pre-wrap solo nei blocchi <pre> per i code block)
   ============================================================ */
.gh-chat-container .gh-chat-msg .gh-chat-msg-bubble {
    white-space: normal !important;
}
.gh-chat-container .gh-chat-msg .gh-chat-msg-bubble pre,
.gh-chat-container .gh-chat-msg .gh-chat-msg-bubble code {
    white-space: pre-wrap !important;
}

/* ============================================================
   FIX METADATA: nome + orario su una riga sola
   ============================================================ */
.gh-chat-msg-meta {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}
.gh-chat-msg-autore,
.gh-chat-msg-time {
    white-space: nowrap !important;
}

/* ============================================================
   QUOTE - stile più marcato (visibile sopra la bolla)
   ============================================================ */
.gh-chat-quote {
    display: block !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
    background: #fff7e6 !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #374151 !important;
    font-size: 0.82rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    transition: background 0.15s !important;
}
.gh-chat-quote:hover {
    background: #ffedd5 !important;
}
.gh-chat-quote-author {
    font-weight: 600 !important;
    color: #92400e !important;
    margin-bottom: 0.15rem !important;
}
.gh-chat-quote-text {
    color: #6b7280 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 280px !important;
}
/* Per i miei messaggi la quote sta dentro il body con bg verde */
.gh-chat-msg.is-mine .gh-chat-quote {
    align-self: flex-end !important;
}

/* ============================================================
   STEP 4.1 — ALLEGATI (graffetta + dropzone + preview + render)
   ============================================================ */

/* Bottone graffetta accanto al campo messaggio */
.gh-chat-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.gh-chat-attach-btn:hover {
    background: #e5e7eb;
    transform: scale(1.05);
}
.gh-chat-attach-btn input { display: none; }

/* Preview file (pillole sopra textarea) */
.gh-chat-files-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.gh-chat-file-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 0.82rem;
    color: #374151;
}
.gh-chat-file-icon { font-size: 1rem; }
.gh-chat-file-name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-chat-file-size { color: #6b7280; font-size: 0.75rem; }
.gh-chat-file-remove {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
}
.gh-chat-file-remove:hover { background: #dc2626; }

/* Errore caricamento */
.gh-chat-error {
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #991b1b;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Dropzone overlay (durante drag&drop) */
.gh-chat-dropzone {
    position: absolute;
    inset: 0;
    background: rgba(85, 139, 47, 0.12);
    backdrop-filter: blur(2px);
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed #558B2F;
    border-radius: 12px;
}
.gh-chat-dropzone-inner {
    background: white;
    border: 2px solid #558B2F;
    color: #558B2F;
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 8px 32px rgba(85, 139, 47, 0.2);
}
[x-cloak] { display: none !important; }

/* Allegati renderizzati sotto il messaggio */
.gh-chat-allegati {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: fit-content;
    max-width: 100%;
}
.gh-chat-msg.is-mine .gh-chat-allegati { align-self: flex-end; }

/* Allegato immagine */
.gh-chat-allegato-img {
    display: block;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gh-chat-allegato-img:hover { transform: scale(1.02); }
.gh-chat-allegato-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
}

/* Allegato file (PDF, doc, ecc.) */
.gh-chat-allegato-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none !important;
    color: #374151 !important;
    transition: all 0.15s;
    min-width: 220px;
    max-width: 320px;
}
.gh-chat-allegato-file:hover {
    background: #f9fafb;
    border-color: #558B2F;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.1);
}
.gh-chat-allegato-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}
.gh-chat-allegato-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gh-chat-allegato-nome {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-chat-allegato-size {
    color: #6b7280;
    font-size: 0.78rem;
}
.gh-chat-allegato-download {
    color: #558B2F;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Stile is-dragging (border evidenziato durante drag) */
.gh-chat-container.is-dragging {
    box-shadow: 0 0 0 3px #558B2F inset;
}

/* ============================================================
   STEP 4.1 - FIX FINALI: allineamento dx + delete allegato
   ============================================================ */

/* Wrap allegato (per posizionare il bottone X) */
.gh-chat-allegato-wrap {
    position: relative;
    width: fit-content;
}
.gh-chat-msg.is-mine .gh-chat-allegato-wrap {
    align-self: flex-end;
}

/* Bottone X elimina allegato (visibile solo on hover) */
.gh-chat-allegato-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
}
.gh-chat-allegato-wrap:hover .gh-chat-allegato-delete {
    opacity: 1;
}
.gh-chat-allegato-delete:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Forza allineamento allegati a destra per messaggi miei */
.gh-chat-msg.is-mine .gh-chat-allegati {
    align-items: flex-end !important;
    align-self: flex-end !important;
}
.gh-chat-msg.is-other .gh-chat-allegati {
    align-items: flex-start !important;
    align-self: flex-start !important;
}

/* Immagini più grandi e belle (stile WhatsApp) */
.gh-chat-allegato-img {
    display: block;
    max-width: 380px;
    min-width: 200px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gh-chat-allegato-img:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.gh-chat-allegato-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
}

/* ============================================================
   PREVIEW IMMAGINE GRANDE (stile WhatsApp/Telegram)
   ============================================================ */
.gh-chat-img-preview {
    position: relative;
    display: inline-block;
    max-width: 220px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.gh-chat-img-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}
.gh-chat-img-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(239, 68, 68, 0.95);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s, background 0.15s;
}
.gh-chat-img-preview-remove:hover {
    background: rgb(220, 38, 38);
    transform: scale(1.1);
}

/* ============================================================
   FIX 4.1 FINALE: graffetta allineata alla barra (no scatola)
   ============================================================ */
.gh-chat-form {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
}

/* Graffetta: stessa altezza della textarea, no bordo invadente */
.gh-chat-attach-btn {
    width: auto !important;
    min-width: 3rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0.85rem !important;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.gh-chat-attach-btn:hover {
    background: #f9fafb !important;
    border-color: #558B2F !important;
    transform: none !important;
}

/* Textarea ben centrata */
.gh-chat-textarea {
    align-self: stretch !important;
    flex: 1 1 auto !important;
}

/* Invia coerente in altezza */
.gh-chat-btn-send {
    align-self: stretch !important;
}

/* ============================================================
   STEP 4.2 — REAZIONI EMOJI (badge + picker)
   ============================================================ */

/* Container reazioni sotto la bolla */
.gh-chat-reazioni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
    width: fit-content;
}
.gh-chat-msg.is-mine .gh-chat-reazioni {
    align-self: flex-end;
}

/* Badge singolo (es: ❤️ 2) */
.gh-chat-reazione-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.12s ease;
    color: #374151;
}
.gh-chat-reazione-badge:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}
.gh-chat-reazione-badge.is-mine-reaction {
    background: rgba(85, 139, 47, 0.12);
    border-color: #558B2F;
    color: #558B2F;
    font-weight: 600;
}
.gh-chat-reazione-emoji {
    font-size: 1rem;
    line-height: 1;
}
.gh-chat-reazione-count {
    font-size: 0.78rem;
    font-weight: 600;
}

/* Picker emoji popup */
.gh-chat-emoji-picker-overlay {
    position: fixed;
    z-index: 9999;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    border-radius: 16px;
    background: white;
    overflow: hidden;
}
.gh-chat-emoji-picker-overlay em-emoji-picker {
    --background-rgb: 255, 255, 255;
    --border-radius: 16px;
    --color-border: #e5e7eb;
    --rgb-accent: 85, 139, 47;
    height: 420px;
}

/* ============================================================
   STEP 4.3 - PINNED MESSAGES (banner Telegram-style + badge)
   ============================================================ */

/* Banner pinnati sticky in cima alla chat */
.gh-chat-pinned-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff7e6;
    border-bottom: 2px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
    overflow: hidden;
}

.gh-chat-pinned-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.gh-chat-pinned-header:hover {
    background: #ffedd5;
}

.gh-chat-pinned-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.gh-chat-pinned-info {
    flex: 1 1 auto;
    min-width: 0;
}

.gh-chat-pinned-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
    line-height: 1.3;
}

.gh-chat-pinned-preview {
    font-size: 0.82rem;
    color: #78350f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.15rem;
    opacity: 0.85;
}

.gh-chat-pinned-toggle {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #92400e;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    transition: all 0.15s;
    flex-shrink: 0;
}
.gh-chat-pinned-toggle:hover {
    background: rgba(245, 158, 11, 0.3);
}
.gh-chat-pinned-toggle.is-expanded {
    background: #f59e0b;
    color: white;
}

/* Lista pinnati espandibile */
.gh-chat-pinned-list {
    border-top: 1px solid rgba(245, 158, 11, 0.3);
    background: white;
    max-height: 320px;
    overflow-y: auto;
}

.gh-chat-pinned-item {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none !important;
    color: #374151 !important;
    border-bottom: 1px solid #fafafa;
    transition: background 0.12s;
}
.gh-chat-pinned-item:last-child {
    border-bottom: none;
}
.gh-chat-pinned-item:hover {
    background: #fef3c7;
}

.gh-chat-pinned-item-author {
    font-size: 0.78rem;
    font-weight: 600;
    color: #558B2F;
    margin-bottom: 0.2rem;
}

.gh-chat-pinned-item-date {
    color: #9ca3af;
    font-weight: 400;
    margin-left: 0.25rem;
}

.gh-chat-pinned-item-text {
    font-size: 0.88rem;
    color: #374151;
    line-height: 1.4;
}

/* Badge piccolo 📌 sopra ogni messaggio fissato */
.gh-chat-msg-pinned-badge {
    position: absolute;
    top: -8px;
    right: 0;
    background: #f59e0b;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid white;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    z-index: 5;
}

/* Wrap del messaggio pinnato per posizionare badge */
.gh-chat-msg.is-pinned {
    position: relative;
}
.gh-chat-msg.is-pinned .gh-chat-msg-bubble {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* Bottone Pin/Sfissa attivo */
.gh-chat-action-btn.is-active {
    background: #fff7e6 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
    font-weight: 600 !important;
}

/* ============================================================
   STEP 5 — MENZIONI @ (dropdown autocomplete + pillole render)
   ============================================================ */

/* Wrap textarea per posizionare dropdown sopra */
.gh-chat-textarea-wrap {
    position: relative;
    flex: 1 1 auto;
}

/* Dropdown autocomplete @ */
.gh-chat-mention-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    padding: 0.4rem;
}

.gh-chat-mention-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.gh-chat-mention-item.is-selected,
.gh-chat-mention-item:hover {
    background: rgba(85, 139, 47, 0.1);
}

.gh-chat-mention-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.gh-chat-mention-info {
    flex: 1 1 auto;
    min-width: 0;
}

.gh-chat-mention-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-chat-mention-handle {
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.gh-chat-mention-empty {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Pillola @menzione nel messaggio renderizzato */
.gh-chat-mention-pill {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    background: rgba(85, 139, 47, 0.15);
    color: #558B2F;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    border: 1px solid rgba(85, 139, 47, 0.3);
    cursor: default;
}

/* Sui miei messaggi (sfondo verde): pillola con sfondo bianco semi-trasparente */
.gh-chat-msg.is-mine .gh-chat-mention-pill {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   STEP 5 - FIX BARRA INPUT (allineamento + dimensioni)
   ============================================================ */

/* Wrap textarea (nuovo dal Step 5): occupa tutto lo spazio disponibile */
.gh-chat-textarea-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Textarea: occupa il wrap intero, altezza ridotta */
.gh-chat-textarea-wrap .gh-chat-textarea {
    width: 100% !important;
    min-height: 2.5rem !important;
    max-height: 8rem !important;
    padding: 0.55rem 0.85rem !important;
    line-height: 1.4 !important;
    resize: none !important;
    box-sizing: border-box !important;
}

/* Form: tutti gli elementi alla stessa altezza minima ridotta */
.gh-chat-form {
    align-items: center !important;
}

/* Graffetta: altezza fissa coerente con textarea ridotta */
.gh-chat-attach-btn {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    align-self: center !important;
    padding: 0 0.85rem !important;
}

/* Bottone Invia: stessa altezza */
.gh-chat-btn-send {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    align-self: center !important;
    padding: 0 1.5rem !important;
}

/* ============================================================
   STEP 5 - BARRA BASSA OVERRIDE FINALE
   ============================================================ */
.gh-chat-form .gh-chat-textarea-wrap textarea.gh-chat-textarea[rows="1"],
.gh-chat-form .gh-chat-textarea-wrap textarea.gh-chat-textarea {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 8rem !important;
    padding: 0.5rem 0.85rem !important;
    line-height: 1.5 !important;
    overflow-y: auto !important;
    resize: none !important;
    box-sizing: border-box !important;
}

/* ============================================================
   STEP 6 - SEPARATOR "non letti" stile WhatsApp
   ============================================================ */
.gh-chat-unread-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.2rem 0 0.6rem 0;
    position: relative;
    padding: 0 1rem;
}
.gh-chat-unread-separator::before,
.gh-chat-unread-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ef4444 50%, transparent);
}
.gh-chat-unread-separator span {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0.5rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* === Smart scroll: pill "nuovi messaggi" stile WhatsApp === */
.gh-chat-container {
    position: relative;
}

.gh-chat-new-messages-pill {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: #558B2F;
    color: white;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.4), 0 2px 4px rgba(0,0,0,0.1);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    animation: gh-pill-bounce 0.4s ease;
}

.gh-chat-new-messages-pill:hover {
    background: #6da337;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(85, 139, 47, 0.5), 0 4px 8px rgba(0,0,0,0.12);
}

.gh-chat-new-messages-arrow {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

@keyframes gh-pill-bounce {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    60% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[x-cloak] { display: none !important; }

/* === Smart scroll: pill "nuovi messaggi" stile WhatsApp === */
.gh-chat-container {
    position: relative;
}

.gh-chat-new-messages-pill {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: #558B2F;
    color: white;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.4), 0 2px 4px rgba(0,0,0,0.1);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    animation: gh-pill-bounce 0.4s ease;
}

.gh-chat-new-messages-pill:hover {
    background: #6da337;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(85, 139, 47, 0.5), 0 4px 8px rgba(0,0,0,0.12);
}

.gh-chat-new-messages-arrow {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

@keyframes gh-pill-bounce {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    60% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[x-cloak] { display: none !important; }

/* === Widget Attività Settimanale (tabs Donezo) === */
.gh-attivita-widget {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease;
}
.gh-attivita-widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
}

.gh-attivita-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.gh-attivita-title-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.gh-attivita-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #558B2F 0%, #84cc16 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: white;
    box-shadow: 0 4px 8px rgba(85, 139, 47, 0.25);
    flex-shrink: 0;
}

.gh-attivita-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.gh-attivita-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.15rem 0 0 0;
    line-height: 1.3;
}

.gh-attivita-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.gh-attivita-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: #f9fafb;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.gh-attivita-tab:hover {
    background: #fafafa;
    color: #111827;
    transform: translateY(-1px);
}

.gh-attivita-tab.is-active {
    background: white;
    border-color: #558B2F;
    color: #111827;
    box-shadow: 0 2px 8px rgba(85, 139, 47, 0.18);
}

.gh-attivita-tab.gh-attivita-tab-mix.is-active {
    background: linear-gradient(135deg, #558B2F 0%, #84cc16 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.35);
}

.gh-attivita-tab-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

.gh-attivita-tab-label {
    line-height: 1;
}

.gh-attivita-tab-count {
    background: rgba(0,0,0,0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    line-height: 1.2;
}

.gh-attivita-tab.is-active .gh-attivita-tab-count {
    background: rgba(85, 139, 47, 0.15);
    color: #558B2F;
}

.gh-attivita-canvas-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}

@media (max-width: 768px) {
    .gh-attivita-header {
        flex-direction: column;
        align-items: stretch;
    }
    .gh-attivita-tabs {
        justify-content: flex-start;
    }
}

/* ===========================================
   SCADENZIARIO — Donezo style
   =========================================== */

/* === KPI HEADER === */
.gh-scad-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gh-scad-kpi {
    background: white;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}
.gh-scad-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.07);
}
.gh-scad-kpi-red    { border-left-color: #ef4444; }
.gh-scad-kpi-orange { border-left-color: #f59e0b; }
.gh-scad-kpi-blue   { border-left-color: #3b82f6; }
.gh-scad-kpi-green  { border-left-color: #558B2F; }

.gh-scad-kpi-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.gh-scad-kpi-red    .gh-scad-kpi-icon { background: rgba(239, 68, 68, 0.1); }
.gh-scad-kpi-orange .gh-scad-kpi-icon { background: rgba(245, 158, 11, 0.1); }
.gh-scad-kpi-blue   .gh-scad-kpi-icon { background: rgba(59, 130, 246, 0.1); }
.gh-scad-kpi-green  .gh-scad-kpi-icon { background: rgba(85, 139, 47, 0.1); }

.gh-scad-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}
.gh-scad-kpi-label {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* === FILTRI === */
.gh-scad-filters {
    background: white;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}

.gh-scad-filter-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gh-scad-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gh-scad-pills {
    display: flex;
    gap: 0.4rem;
}

.gh-scad-pill {
    padding: 0.45rem 0.85rem;
    background: #fafafa;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-scad-pill:hover {
    background: #e5e7eb;
    color: #111827;
}
.gh-scad-pill.is-active {
    background: white;
    border-color: #558B2F;
    color: #111827;
    box-shadow: 0 2px 6px rgba(85, 139, 47, 0.2);
}

.gh-scad-select {
    padding: 0.5rem 0.85rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.85rem;
    background: white;
    color: #111827;
    min-width: 240px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-scad-select:focus {
    outline: none;
    border-color: #558B2F;
    box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.1);
}

.gh-scad-filter-toggle {
    margin-left: auto;
}

.gh-scad-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}
.gh-scad-toggle input { display: none; }
.gh-scad-toggle-slider {
    width: 2.5rem;
    height: 1.4rem;
    background: #d1d5db;
    border-radius: 999px;
    position: relative;
    transition: background 0.2s ease;
}
.gh-scad-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.gh-scad-toggle input:checked + .gh-scad-toggle-slider {
    background: #558B2F;
}
.gh-scad-toggle input:checked + .gh-scad-toggle-slider::after {
    transform: translateX(1.1rem);
}
.gh-scad-toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* === MESE === */
.gh-scad-month {
    background: white;
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.gh-scad-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid #fafafa;
}

.gh-scad-month-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.gh-scad-month-icon {
    font-size: 1.1rem;
}
.gh-scad-month-count {
    background: #fafafa;
    color: #6b7280;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.3rem;
}

.gh-scad-month-total {
    background: linear-gradient(135deg, #558B2F 0%, #84cc16 100%);
    color: white;
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(85, 139, 47, 0.25);
}

/* === RIGHE SERVIZIO === */
.gh-scad-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.gh-scad-row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.gh-scad-row:hover {
    background: white;
    border-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.gh-scad-row-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.gh-scad-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    color: white;
    font-weight: 800;
    line-height: 1;
}
.gh-scad-badge-red    { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3); }
.gh-scad-badge-orange { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3); }
.gh-scad-badge-blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); }

.gh-scad-badge-num { font-size: 1.15rem; }
.gh-scad-badge-lbl { font-size: 0.65rem; opacity: 0.9; margin-top: 0.1rem; }

.gh-scad-date-detail {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
}

.gh-scad-row-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gh-scad-auto {
    background: rgba(85, 139, 47, 0.1);
    color: #558B2F;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 800;
}

.gh-scad-row-cliente {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.2rem;
}

.gh-scad-row-price {
    text-align: right;
}
.gh-scad-price-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.gh-scad-price-freq {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.15rem;
}

.gh-scad-row-actions {
    display: flex;
    gap: 0.4rem;
}

.gh-scad-btn {
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
}
.gh-scad-btn-green {
    background: #558B2F;
    color: white;
}
.gh-scad-btn-green:hover {
    background: #4a7a29;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(85, 139, 47, 0.3);
}
.gh-scad-btn-gray {
    background: #e5e7eb;
    color: #374151;
}
.gh-scad-btn-gray:hover {
    background: #d1d5db;
}

/* === STATO VUOTO === */
.gh-scad-empty {
    background: white;
    border-radius: 14px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gh-scad-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.8rem;
}
.gh-scad-empty h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.4rem 0;
}
.gh-scad-empty p {
    color: #6b7280;
    margin: 0;
}

/* === Responsive === */
@media (max-width: 1024px) {
    .gh-scad-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .gh-scad-kpi-grid { grid-template-columns: 1fr; }
    .gh-scad-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .gh-scad-row-date {
        flex-direction: row;
        justify-content: flex-start;
    }
    .gh-scad-row-price { text-align: left; }
    .gh-scad-filters { flex-direction: column; align-items: stretch; }
    .gh-scad-filter-toggle { margin-left: 0; }
}

/* === FIX SCADENZIARIO === */
/* Reset appearance del select per togliere frecce browser native */
.gh-scad-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem !important;
}

/* ===========================================
   WIDGET DASHBOARD — SCADENZE IMMINENTI
   =========================================== */

.gh-scadw-widget {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* HEADER */
.gh-scadw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.gh-scadw-title-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.gh-scadw-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: white;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25);
}
.gh-scadw-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}
.gh-scadw-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.15rem 0 0 0;
}
.gh-scadw-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #558B2F;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(85, 139, 47, 0.08);
    transition: all 0.15s ease;
}
.gh-scadw-link:hover {
    background: rgba(85, 139, 47, 0.15);
    transform: translateX(2px);
}

/* BODY GRID — stacked: KPI sopra full-width, lista sotto full-width */
.gh-scadw-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* COLONNA KPI — 4 colonne in fila */
.gh-scadw-kpi-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.gh-scadw-kpi {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-left: 4px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.18s ease;
}
.gh-scadw-kpi:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.gh-scadw-kpi-red    { border-left-color: #ef4444; }
.gh-scadw-kpi-orange { border-left-color: #f59e0b; }
.gh-scadw-kpi-blue   { border-left-color: #3b82f6; }
.gh-scadw-kpi-green  { border-left-color: #558B2F; }

.gh-scadw-kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.gh-scadw-kpi-red    .gh-scadw-kpi-icon { background: rgba(239, 68, 68, 0.1); }
.gh-scadw-kpi-orange .gh-scadw-kpi-icon { background: rgba(245, 158, 11, 0.1); }
.gh-scadw-kpi-blue   .gh-scadw-kpi-icon { background: rgba(59, 130, 246, 0.1); }
.gh-scadw-kpi-green  .gh-scadw-kpi-icon { background: rgba(85, 139, 47, 0.1); }

.gh-scadw-kpi-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}
.gh-scadw-kpi-label {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 0.2rem;
}

/* COLONNA LISTA */
.gh-scadw-list-col {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
}
.gh-scadw-list-header {
    padding-bottom: 0.7rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid #e5e7eb;
}
.gh-scadw-list-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
}
.gh-scadw-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.gh-scadw-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.75rem;
    background: white;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}
.gh-scadw-item:hover {
    border-color: #e5e7eb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transform: translateX(2px);
}

.gh-scadw-item-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9px;
    color: white;
    font-weight: 800;
    line-height: 1;
}
.gh-scadw-bd-red    { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 2px 6px rgba(239,68,68,0.3); }
.gh-scadw-bd-orange { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 2px 6px rgba(245,158,11,0.3); }
.gh-scadw-bd-blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 2px 6px rgba(59,130,246,0.3); }

.gh-scadw-item-bd-num { font-size: 0.9rem; }
.gh-scadw-item-bd-lbl { font-size: 0.55rem; opacity: 0.9; margin-top: 0.05rem; }

.gh-scadw-item-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gh-scadw-item-auto {
    background: rgba(85, 139, 47, 0.1);
    color: #558B2F;
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 800;
}
.gh-scadw-item-cliente {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 0.15rem;
}
.gh-scadw-item-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
}

/* EMPTY */
.gh-scadw-empty {
    text-align: center;
    padding: 1.5rem 1rem;
}
.gh-scadw-empty-icon {
    font-size: 2.25rem;
    margin-bottom: 0.4rem;
}
.gh-scadw-empty p {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .gh-scadw-kpi-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .gh-scadw-kpi-col { grid-template-columns: 1fr; }
}

/* ===========================================
   WIDGET DASHBOARD — CHAT RECENTI
   =========================================== */

.gh-chatw-widget {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.gh-chatw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.gh-chatw-title-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.gh-chatw-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #558B2F 0%, #84cc16 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: white;
    box-shadow: 0 4px 8px rgba(85, 139, 47, 0.25);
}
.gh-chatw-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}
.gh-chatw-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.15rem 0 0 0;
}
.gh-chatw-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #558B2F;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(85, 139, 47, 0.08);
    transition: all 0.15s ease;
}
.gh-chatw-link:hover {
    background: rgba(85, 139, 47, 0.15);
    transform: translateX(2px);
}

/* LISTA */
.gh-chatw-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gh-chatw-item {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}
.gh-chatw-item:hover {
    background: white;
    border-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transform: translateX(2px);
}
.gh-chatw-item.has-unread {
    background: rgba(85, 139, 47, 0.04);
    border-color: rgba(85, 139, 47, 0.15);
}

.gh-chatw-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.92rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.gh-chatw-main {
    min-width: 0;
    overflow: hidden;
}

.gh-chatw-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.2rem;
}
.gh-chatw-progetto {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-chatw-cliente {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.82rem;
}
.gh-chatw-time {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
}

.gh-chatw-row2 {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    overflow: hidden;
}
.gh-chatw-autore {
    font-size: 0.78rem;
    font-weight: 600;
    color: #558B2F;
    flex-shrink: 0;
}
.gh-chatw-anteprima {
    font-size: 0.8rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-chatw-badge {
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.45rem;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

.gh-chatw-empty {
    text-align: center;
    padding: 2rem 1rem;
}
.gh-chatw-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.gh-chatw-empty p {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 640px) {
    .gh-chatw-item { grid-template-columns: 2.25rem 1fr auto; gap: 0.6rem; padding: 0.7rem; }
    .gh-chatw-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.82rem; }
    .gh-chatw-progetto { font-size: 0.85rem; }
    .gh-chatw-anteprima { font-size: 0.75rem; }
}

/* ===========================================
   CHAT GLOCAL — Layout 2 colonne WhatsApp style
   =========================================== */

.gh-chatpage {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    height: calc(100vh - 140px);
    min-height: 600px;
}



/* SIDEBAR LISTA CHAT */
.gh-chatpage-sidebar {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gh-chatpage-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.1rem;
    border-bottom: 2px solid #fafafa;
    flex-shrink: 0;
}
.gh-chatpage-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
.gh-chatpage-sidebar-count {
    background: #fafafa;
    color: #6b7280;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.gh-chatpage-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* CHAT ITEM */
.gh-chatpage-chat-item {
    display: flex;
    gap: 0.7rem;
    padding: 0.75rem 0.7rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
    border: 1px solid transparent;
}
.gh-chatpage-chat-item:hover {
    background: #f9fafb;
}
.gh-chatpage-chat-item.is-active {
    background: rgba(85, 139, 47, 0.08);
    border-color: rgba(85, 139, 47, 0.25);
}
.gh-chatpage-chat-item.has-unread {
    background: rgba(85, 139, 47, 0.04);
}
.gh-chatpage-chat-item.has-unread.is-active {
    background: rgba(85, 139, 47, 0.12);
}

.gh-chatpage-chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.gh-chatpage-chat-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.gh-chatpage-chat-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.gh-chatpage-chat-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.gh-chatpage-chat-gen-badge {
    background: linear-gradient(135deg, #558B2F, #84cc16);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    text-transform: uppercase;
}
.gh-chatpage-chat-time {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
}

.gh-chatpage-chat-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.gh-chatpage-chat-preview {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.gh-chatpage-chat-preview strong {
    color: #558B2F;
    font-weight: 600;
}
.gh-chatpage-chat-empty {
    font-size: 0.72rem;
    color: #d1d5db;
}

.gh-chatpage-chat-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

/* THREAD */
.gh-chatpage-thread {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gh-chatpage-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-align: center;
    padding: 2rem;
}
.gh-chatpage-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* SCROLLBAR sidebar */
.gh-chatpage-sidebar-list::-webkit-scrollbar { width: 6px; }
.gh-chatpage-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.gh-chatpage-sidebar-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.gh-chatpage-sidebar-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .gh-chatpage {
        grid-template-columns: 1fr;
        height: auto;
    }
    .gh-chatpage-sidebar {
        max-height: 250px;
    }
}

/* ===========================================
   PAGINA TUTTE LE CHAT — lista ricca
   =========================================== */

.gh-tutte-chat {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gh-tutte-chat-item {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gh-tutte-chat-item:hover {
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.gh-tutte-chat-item.has-unread {
    background: rgba(85, 139, 47, 0.04);
    border-color: rgba(85, 139, 47, 0.2);
}

.gh-tutte-chat-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.gh-tutte-chat-info {
    min-width: 0;
    overflow: hidden;
}

.gh-tutte-chat-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.3rem;
}
.gh-tutte-chat-titles {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gh-tutte-chat-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.gh-tutte-chat-cliente {
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}
.gh-tutte-chat-gen-badge {
    background: linear-gradient(135deg, #558B2F, #84cc16);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 5px;
    text-transform: uppercase;
}
.gh-tutte-chat-time {
    font-size: 0.78rem;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
}

.gh-tutte-chat-row2 {
    overflow: hidden;
}
.gh-tutte-chat-preview {
    font-size: 0.85rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.gh-tutte-chat-preview strong {
    color: #558B2F;
    font-weight: 600;
}
.gh-tutte-chat-empty {
    font-size: 0.78rem;
    color: #d1d5db;
}

.gh-tutte-chat-badge {
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .gh-tutte-chat-item { grid-template-columns: 2.5rem 1fr auto; gap: 0.75rem; padding: 0.85rem; }
    .gh-tutte-chat-avatar { width: 2.5rem; height: 2.5rem; }
    .gh-tutte-chat-name { font-size: 0.88rem; }
    .gh-tutte-chat-preview { font-size: 0.78rem; }
}


/* ===========================================
   CENTRO NOTIFICHE — Campanella header
   =========================================== */

.gh-notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
    z-index: 9999;
    isolation: isolate;
}

.gh-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #fafafa;
    color: #4b5563;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-notif-bell:hover {
    background: #e5e7eb;
    color: #111827;
    transform: scale(1.05);
}
.gh-notif-bell.is-open {
    background: rgba(85, 139, 47, 0.12);
    color: #558B2F;
}

.gh-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    border: 2px solid white;
    animation: gh-notif-pulse 2s ease-in-out infinite;
}

@keyframes gh-notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.gh-notif-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 380px;
    max-height: 500px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    z-index: 99999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

[x-cloak] { display: none !important; }

.gh-notif-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.gh-notif-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
.gh-notif-title-icon { font-size: 1.1rem; }
.gh-notif-count {
    background: #fafafa;
    color: #6b7280;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.gh-notif-list {
    overflow-y: auto;
    max-height: 420px;
}

.gh-notif-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f9fafb;
    transition: background 0.15s ease;
}
.gh-notif-item:hover { background: #f9fafb; }
.gh-notif-item:last-child { border-bottom: none; }

.gh-notif-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.gh-notif-item-body { min-width: 0; overflow: hidden; }
.gh-notif-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}
.gh-notif-item-titolo {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-notif-item-tempo {
    font-size: 0.7rem;
    color: #9ca3af;
    flex-shrink: 0;
    font-weight: 500;
}
.gh-notif-item-sottotitolo {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-notif-item-count {
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.45rem;
    flex-shrink: 0;
}

.gh-notif-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.gh-notif-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.gh-notif-empty p {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.3rem 0;
}
.gh-notif-empty span { font-size: 0.8rem; color: #6b7280; }

.gh-notif-list::-webkit-scrollbar { width: 6px; }
.gh-notif-list::-webkit-scrollbar-track { background: transparent; }
.gh-notif-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }

@media (max-width: 640px) {
    .gh-notif-dropdown {
        position: fixed;
        top: 60px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}


/* ===========================================
   SIDEBAR — Tono grigio caldo per distinzione visiva
   =========================================== */
.fi-sidebar,
.fi-sidebar-nav {
    background-color: #fafafa !important;
}

.fi-sidebar-header {
    background-color: #fafafa !important;
    border-right: 1px solid #e5e7eb;
}

.fi-sidebar {
    border-right: 1px solid #e5e7eb !important;
}


/* === Centro Notifiche: bottone "Segna tutte come lette" === */
.gh-notif-footer {
    border-top: 1px solid #f3f4f6;
    padding: 0.65rem 0.75rem;
    background: #fafafa;
    flex-shrink: 0;
}
.gh-notif-mark-all {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: white;
    color: #558B2F;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-notif-mark-all:hover {
    background: rgba(85, 139, 47, 0.08);
    border-color: #558B2F;
}
.gh-notif-mark-all svg {
    flex-shrink: 0;
}


/* ===========================================
   VERSION BADGE — Sidebar footer
   =========================================== */
.gh-version-badge {
    padding: 0.85rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    font-size: 0.72rem;
}
.gh-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.gh-version-name {
    font-weight: 700;
    color: #111827;
    font-size: 0.78rem;
}
.gh-version-num {
    color: #6b7280;
    font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
}
.gh-version-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gh-version-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    display: inline-block;
    animation: gh-version-pulse 2.5s ease-in-out infinite;
}
@keyframes gh-version-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* === Dashboard UltimiTicket: forza badge stato su 1 sola riga === */
.gh-dashboard-ticket-row .fi-badge,
[wire\\:id*='UltimiTicket'] .fi-badge,
.gh-ticket-stato-badge {
    white-space: nowrap !important;
}


/* === Allineamento avatar widget UltimiTicket: se c'è 1 solo figlio img, sposta a destra === */
[wire\\:id*='UltimiTicket'] div[style*='flex: 0 0 70px'] {
    position: relative;
}
[wire\\:id*='UltimiTicket'] div[style*='flex: 0 0 70px']:has(> img:only-child) img {
    margin-left: 0.55rem !important;
}


/* ===========================================
   CHAT QUICK ACTIONS — Header progetto cliente
   =========================================== */
.gh-chat-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}
.gh-chat-quickactions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: auto;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}
.gh-chat-qa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.gh-chat-qa:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.gh-chat-qa svg {
    flex-shrink: 0;
}
.gh-chat-qa-primary {
    background: #558B2F;
    color: #ffffff;
    border-color: #558B2F;
}
.gh-chat-qa-primary:hover {
    background: #4a7a29;
    color: #ffffff;
    border-color: #4a7a29;
}

@media (max-width: 768px) {
    .gh-chat-qa span {
        display: none;
    }
    .gh-chat-qa {
        padding: 0.5rem;
    }
}


/* === Bottone "Attiva notifiche" — Safari friendly === */
.gh-notif-permesso-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(135deg, #558B2F 0%, #6ba036 100%);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(85, 139, 47, 0.35);
    transition: all 0.2s ease;
    animation: gh-notif-pulse-btn 2s ease-in-out infinite;
}
.gh-notif-permesso-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(85, 139, 47, 0.5);
}
@keyframes gh-notif-pulse-btn {
    0%, 100% { box-shadow: 0 6px 20px rgba(85, 139, 47, 0.35); }
    50% { box-shadow: 0 6px 24px rgba(85, 139, 47, 0.6); }
}


/* === Banner Note Importanti scheda cliente === */
.gh-cliente-banner-note {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 0.85rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    animation: gh-cliente-banner-pulse 2.5s ease-in-out infinite;
}
@keyframes gh-cliente-banner-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35); }
}
.gh-cliente-banner-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}
.gh-cliente-banner-content {
    flex: 1;
    min-width: 0;
}
.gh-cliente-banner-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.gh-cliente-banner-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.gh-cliente-banner-item {
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #78350f;
}
.gh-cliente-banner-text {
    font-weight: 600;
}
.gh-cliente-banner-meta {
    color: #a16207;
    font-size: 0.78rem;
    font-weight: 500;
    margin-left: 0.35rem;
}


/* ===========================================
   PAGINA PROFITTABILITÀ — Cruscotto clienti
   =========================================== */
.gh-profit-page {
    padding: 1rem 0;
}
.gh-profit-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.gh-profit-header-icon {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #558B2F 0%, #6ba036 100%);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(85, 139, 47, 0.3);
}
.gh-profit-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}
.gh-profit-subtitle {
    margin: 0.2rem 0 0 0;
    font-size: 0.92rem;
    color: #6b7280;
}

/* KPI cards */
.gh-profit-kpis {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.gh-profit-kpi {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: all 0.2s ease;
}
.gh-profit-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.gh-profit-kpi-main {
    background: linear-gradient(135deg, #558B2F 0%, #6ba036 100%);
    border: none;
    color: white;
}
.gh-profit-kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.gh-profit-kpi-content {
    flex: 1;
    min-width: 0;
}
.gh-profit-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.2rem;
}
.gh-profit-kpi-main .gh-profit-kpi-label {
    color: rgba(255, 255, 255, 0.85);
}
.gh-profit-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
}
.gh-profit-kpi-main .gh-profit-kpi-value {
    color: white;
}
.gh-profit-kpi-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.2rem;
}
.gh-profit-kpi-main .gh-profit-kpi-sub {
    color: rgba(255, 255, 255, 0.75);
}

/* Filtri */
.gh-profit-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.gh-profit-filter {
    padding: 0.45rem 0.95rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-profit-filter:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.gh-profit-filter.is-active {
    background: #558B2F;
    border-color: #558B2F;
    color: white;
}

/* Tabella */
.gh-profit-table-wrap {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.gh-profit-table {
    width: 100%;
    border-collapse: collapse;
}
.gh-profit-table thead th {
    background: #fafafa;
    padding: 0.85rem 1.2rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
.gh-profit-th-clickable {
    cursor: pointer;
    user-select: none;
}
.gh-profit-th-clickable:hover {
    background: #f3f4f6;
}
.gh-profit-th-clickable span {
    margin-left: 0.3rem;
    color: #558B2F;
}
.gh-profit-table tbody td {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.92rem;
}
.gh-profit-table tbody tr:hover {
    background: #fafafa;
}
.gh-profit-cliente {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.gh-profit-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #558B2F 0%, #6ba036 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}
.gh-profit-cliente-nome {
    font-weight: 600;
    color: #111827;
}
.gh-profit-valore {
    font-weight: 700;
    color: #558B2F;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.gh-profit-servizi-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: #f3f4f6;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    color: #374151;
}
.gh-profit-categoria-badge {
    display: inline-block;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}
.gh-profit-link {
    color: #558B2F;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}
.gh-profit-link:hover {
    text-decoration: underline;
}

/* Empty state */
.gh-profit-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #9ca3af;
}
.gh-profit-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .gh-profit-kpis {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .gh-profit-kpis {
        grid-template-columns: 1fr;
    }
    .gh-profit-table {
        font-size: 0.82rem;
    }
}






/* ===========================================
   SIDEBAR COLLASSATA — FIX DEFINITIVO
   Quando il body NON ha .fi-main-ctn-sidebar-open
   la sidebar è collassata → stringo + tolgo badge
   =========================================== */

/* Larghezza barra collassata: 3.25rem (strettissima, solo icone) */
:root {
    --collapsed-sidebar-width: 3.25rem !important;
}

/* Quando sidebar collassata, il main container NON ha .fi-main-ctn-sidebar-open
   Uso :has() per targetizzare il body in questo stato */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar {
    width: 3.25rem !important;
}

body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar .fi-sidebar-item-label,
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar .fi-sidebar-group-label,
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar .fi-sidebar-item-badge,
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar .fi-badge {
    display: none !important;
}

/* Icone perfettamente centrate nella barra strettissima */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar .fi-sidebar-item-button {
    justify-content: center !important;
    padding: 0.6rem 0 !important;
}

/* Header/logo compatto */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-sidebar-header {
    padding: 0 0.5rem !important;
    justify-content: center !important;
}
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-logo {
    overflow: hidden;
    max-width: 2rem;
}
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-logo img {
    max-width: 2rem;
    height: auto;
    object-fit: contain;
}

/* Main content si allarga di conseguenza */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-main-ctn {
    padding-left: 3.25rem !important;
}


/* ===========================================
   VERSION BADGE — compatto quando sidebar stretta
   =========================================== */

/* Quando sidebar collassata: nascondo nome lungo, layout verticale compatto */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-badge {
    padding: 0.6rem 0.3rem !important;
    text-align: center;
}

body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-name {
    display: none !important;
}

body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-row {
    justify-content: center !important;
    margin-bottom: 0.3rem !important;
}

body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-num {
    font-size: 0.62rem !important;
}

body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-stage {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.55rem !important;
    justify-content: center;
}

/* Nascondo la parola "Beta" lasciando solo il pallino quando strettissima */
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-stage {
    gap: 0 !important;
    font-size: 0 !important;
    padding: 0.3rem !important;
}
body:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .gh-version-dot {
    width: 7px !important;
    height: 7px !important;
}

/* ===== Spunte lettura messaggi chat (stile WhatsApp) ===== */
.gh-chat-msg-spunta {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    color: #9ca3af;
    transition: color 0.2s ease;
    vertical-align: middle;
}
.gh-chat-msg-spunta.is-letto {
    color: #558B2F;
}
.gh-chat-msg-spunta svg {
    display: block;
}

/* ===== Raggruppamento messaggi consecutivi (stile Telegram) ===== */
.gh-chat-msg-avatar-spacer {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    visibility: hidden;
}

/* Messaggi raggruppati (consecutivi stesso autore): margine ridotto */
.gh-chat-msg.is-grouped {
    margin-top: -0.5rem !important;
}

/* ===== Glocal Hub spunte lettura messaggi (stile WhatsApp) ===== */
.gh-chat-msg-spunta {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    color: #9ca3af;
    vertical-align: middle;
}
.gh-chat-msg-spunta.is-letto {
    color: #558B2F;
}
.gh-chat-msg-spunta svg {
    display: block;
}
/* Spacer invisibile per allineare bolle senza avatar */
.gh-chat-msg-avatar-spacer {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    visibility: hidden;
}

/* ===== Fix layout filtri Ticket (e tabelle in generale) ===== */
/* Allinea verticalmente il toggle 'Solo i miei ticket' con gli altri filtri */
.fi-ta-filters-form .fi-fo-field-wrp:has(.fi-toggle) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
}
.fi-ta-filters-form .fi-fo-field-wrp:has(.fi-toggle) .fi-fo-toggle {
    margin-top: auto;
}

/* Barra ricerca tabella a tutta larghezza */
.fi-ta-header-toolbar {
    flex-wrap: wrap;
    gap: 1rem;
}
.fi-ta-header-toolbar .fi-input-wrp:has(input[type="search"]),
.fi-ta-header-toolbar > div:has(input[type="search"]) {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
}
.fi-ta-search-field {
    width: 100% !important;
}

/* ============================================================
   SIDEBAR NERA - ATERA STYLE
   Aggiunta 29 maggio 2026
   Colora la sidebar di scuro. NON tocca larghezze ne collapse
   (gestiti dal blocco "SIDEBAR COLLASSATA" piu sopra).
   Cascade-safe: queste regole vengono dopo e vincono sul #fafafa.
   ============================================================ */

/* --- Sfondo scuro --- */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
    background-color: #FFFFFF !important;
}

.fi-sidebar {
    border-right: 1px solid #E5E7EB !important;
}
.fi-sidebar-header {
    border-right: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* --- Group label (intestazioni gruppi nav) --- */
.fi-sidebar-group-label {
    color: #9CA3AF !important;
}

/* --- Item: testo e icone chiari (stato default) --- */
.fi-sidebar-item-button {
    color: #1A1A1A !important;
}
.fi-sidebar-item-label {
    color: #1A1A1A !important;
}
.fi-sidebar-item-icon,
.fi-sidebar-item-button svg {
    color: #4B5563 !important;
}

/* --- Hover --- */
.fi-sidebar-item-button:hover {
    background-color: #F3F4F6 !important;
    color: #1A1A1A !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #1A1A1A !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover svg {
    color: #1A1A1A !important;
}

/* --- Item attivo (verde Glocal chiaro) --- */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(85, 139, 47, 0.12) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active svg,
.fi-sidebar-item-active svg {
    color: #558B2F !important;
}

/* --- Group collapse button (se i gruppi sono collassabili) --- */
.fi-sidebar-group-button,
.fi-sidebar-group-button svg {
    color: #4B5563 !important;
}
.fi-sidebar-group-button:hover {
    color: #1A1A1A !important;
}

/* --- Version badge: testo chiaro su nero --- */
.gh-version-badge,
.gh-version-name,
.gh-version-num {
    color: #4B5563 !important;
}

/* --- Scrollbar sidebar scura --- */
.fi-sidebar-nav::-webkit-scrollbar { width: 6px; }
.fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar-nav::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ============================================================
   ANIMAZIONI INGRESSO - dashboard widget
   Aggiunta 29 maggio 2026 (selettore corretto: .fi-wi-widget)
   Fade-in + slide-up su ogni widget, con stagger a cascata.
   ============================================================ */

@keyframes ghFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fi-wi-widget {
    opacity: 1;
    animation: ghFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* hover sulla singola card-link, non sul contenitore */
.fi-wi-widget a {
    transition: transform .18s ease, box-shadow .18s ease;
}

.fi-wi-widget a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

/* hover sui widget-grafico: solleva l'intera card */
.fi-wi-widget:has(canvas) {
    transition: transform .18s ease, box-shadow .18s ease;
}

.fi-wi-widget:has(canvas):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.fi-wi-widget:nth-child(1) { animation-delay: 0.02s; }
.fi-wi-widget:nth-child(2) { animation-delay: 0.09s; }
.fi-wi-widget:nth-child(3) { animation-delay: 0.16s; }
.fi-wi-widget:nth-child(4) { animation-delay: 0.23s; }
.fi-wi-widget:nth-child(5) { animation-delay: 0.30s; }
.fi-wi-widget:nth-child(6) { animation-delay: 0.37s; }
.fi-wi-widget:nth-child(7) { animation-delay: 0.44s; }
.fi-wi-widget:nth-child(8) { animation-delay: 0.51s; }

@media (prefers-reduced-motion: reduce) {
    .fi-wi-widget { animation: none; }
}
.glocal-legend{display:inline-flex;align-items:center;gap:4px;background:#fff;border:.5px solid rgba(0,0,0,.12);border-radius:999px;padding:8px 18px;font-size:15px}
.glocal-legend__item{display:inline-flex;align-items:center;gap:8px;padding:0 14px}
.glocal-legend__dot{width:9px;height:9px;border-radius:50%;flex:none}
.glocal-legend__count{font-weight:500;color:#9a9a96}
.glocal-legend__sep{width:.5px;height:18px;background:rgba(0,0,0,.18);flex:none}
.glocal-legend__dot--messaggi{background:#80C141}
.glocal-legend__dot--ticket{background:#E08A1E}
.glocal-legend__dot--clienti{background:#7F77DD}
.glocal-legend__dot--altro{background:#888780}
.gh-card-hover{transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);will-change:transform}
.gh-card-hover:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.06)}

/* ============================================================
   MODALI - restyling flat design system
   Aggiunta 30 maggio 2026
   Vale per TUTTE le modali Filament (Rispondi, Cambia stato,
   Cambia priorita, Assegna, Chiudi, ecc.). Solo aspetto.
   ============================================================ */

/* --- Finestra modale: angoli morbidi, ombra soft --- */
.fi-modal-window {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px -15px rgba(0,0,0,0.25) !important;
}

/* --- Heading (titolo modale) piu pulito --- */
.fi-modal-heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    letter-spacing: -0.01em;
}

/* --- Label dei campi (Destinatario / Oggetto / Messaggio) piu leggere --- */
.fi-modal-content .fi-fo-field-wrp-label,
.fi-modal-content .fi-fo-field-wrp-label > * {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #555555 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Input / editor: bordi e raggio coordinati --- */
.fi-modal-content .fi-input-wrp,
.fi-modal-content .fi-fo-rich-editor .fi-fo-rich-editor-panel,
.fi-modal-content .fi-fo-rich-editor [contenteditable],
.fi-modal-content textarea,
.fi-modal-content .fi-select-input {
    border-radius: 10px !important;
}

/* --- Bottone SUBMIT della modale: verde brand sobrio --- */
.fi-modal-footer-actions .fi-btn[type="submit"],
.fi-modal-footer-actions .fi-ac-action:first-child .fi-btn,
.fi-modal-footer .fi-btn[type="submit"] {
    background-color: #558B2F !important;
    border-color: #558B2F !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
}
.fi-modal-footer-actions .fi-btn[type="submit"]:hover,
.fi-modal-footer-actions .fi-ac-action:first-child .fi-btn:hover,
.fi-modal-footer .fi-btn[type="submit"]:hover {
    background-color: #4A7A29 !important;
    border-color: #4A7A29 !important;
}

/* --- Bottone ANNULLA: piu discreto --- */
.fi-modal-footer-actions .fi-btn:not([type="submit"]) {
    border-radius: 9px !important;
    color: #666666 !important;
}

/* --- Footer: spaziatura --- */
.fi-modal-footer {
    padding-top: 0.5rem;
}

/* --- FIX animazione widget Ultimi ticket ricevuti (div interno custom) --- */
.gh-anim-widget {
    animation: ghFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.30s;
}
@media (prefers-reduced-motion: reduce) {
    .gh-anim-widget { animation: none; }
}

/* --- Hover righe widget Ultimi ticket ricevuti --- */
.gh-ticket-row,
.gh-scadenza-row {
    transition: background-color 0.15s ease;
    border-radius: 8px;
}
.gh-ticket-row:hover,
.gh-scadenza-row:hover {
    background-color: #F9FAFB;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================
   VIEW TICKET - bottoni header soft + fix spazio sezioni
   Aggiunta 30 maggio 2026
   ============================================================ */

/* --- Bottoni header piu soft/flat (colori smorzati) --- */
.fi-page-header-actions .fi-btn,
.fi-header-actions .fi-btn {
    box-shadow: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* Verde (success) piu tenue */
.fi-page-header-actions .fi-btn.fi-color-success,
.fi-header-actions .fi-btn.fi-color-success {
    background-color: #6BA23A !important;
}
/* Rosso (danger) piu tenue */
.fi-page-header-actions .fi-btn.fi-color-danger,
.fi-header-actions .fi-btn.fi-color-danger {
    background-color: #D14B40 !important;
}
/* Arancio (warning) piu tenue */
.fi-page-header-actions .fi-btn.fi-color-warning,
.fi-header-actions .fi-btn.fi-color-warning {
    background-color: #C8862B !important;
}

/* Hover leggero su tutti i bottoni header */
.fi-page-header-actions .fi-btn:hover,
.fi-header-actions .fi-btn:hover {
    filter: brightness(0.95);
}

/* --- Fix spazio vuoto in cima alle Section infolist (la 'barra') --- */
.fi-in-section .fi-section-content {
    padding-top: 0.75rem !important;
}

/* ============================================================
   VIEW TICKET - riduco spazio header/content Section infolist
   Aggancio a .fi-resource-tickets per NON toccare altre pagine.
   Header Section ha px-6 py-4 + gap-3, content ha border-t.
   Rev 01 giugno 2026.
   ============================================================ */
.fi-resource-tickets .fi-section-header {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.fi-resource-tickets .fi-section-content {
    padding-top: 0.85rem !important;
}

/* === Flat section per form Filament (01/06/2026 v0.14.1) === */
.gh-flat-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gh-flat-section > .fi-section-header-ctn,
.gh-flat-section > .fi-section-header {
    background: transparent !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.gh-flat-section > .fi-section-content-ctn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gh-flat-section .fi-section-content {
    padding: 0 !important;
}

/* ===== Chat mobile: bolle più larghe su schermo stretto (≤640px) ===== */
@media (max-width: 640px) {
    .gh-chat-msg { max-width: 90%; }
    .gh-chat-msg-body { max-width: 100% !important; }
}

@media (max-width: 640px) {
    .gh-chat-allegati { max-width: 100% !important; }
    .gh-chat-allegato-file { width: 100% !important; }
    .gh-chat-allegato-nome { white-space: normal !important; overflow-wrap: anywhere !important; }
}

/* === TICKET: valori entry come testo pulito, no box grigio (20260605) === */
.fi-resource-tickets .fi-in-text-item .text-sm {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}