@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --navy:     #1a2340;
  --navy2:    #243054;
  --blue:     #2563eb;
  --blue-s:   #3b82f6;
  --blue-l:   #dbeafe;
  --accent:   #f59e0b;
  --pink:     #ec4899;
  --pink-l:   #fce7f3;
  --green:    #10b981;
  --red:      #ef4444;
  --purple:   #7c3aed;
  --bg:       #f0f2f7;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --border:   #e2e8f0;
  --text:     #1e293b;
  --muted:    #64748b;
  --faint:    #94a3b8;
  --r:        14px;

  /* Larghezza massima bolla messaggio */
  --bubble-max-chars-pc: 150ch;
  --bubble-max-chars-mob: 35ch;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:inherit;}
input,textarea,select{font-family:inherit;}

/* ── NAV ── */
.nav{
  height:52px;background:var(--navy);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  position:sticky;top:0;z-index:100;
}
.nav-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:#fff;letter-spacing:-1px;}
.nav-logo span{color:var(--accent);}
.nav-spacer{flex:1;}
.nav-link{
  color:rgba(255,255,255,.7);font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:8px;transition:.15s;
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.1);}
.nav-credits{
  display:flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
  border-radius:20px;padding:4px 12px;
  font-size:13px;font-weight:600;color:var(--accent);
  white-space:nowrap;
}
.nav-credits i{font-size:14px;}
.nav-btn{
  background:var(--blue);color:#fff;border:none;
  padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;transition:.15s;
}
.nav-btn:hover{background:var(--blue-s);}

/* ── HAMBURGER (mobile) ── */
.nav-hamburger{
  display:none;background:none;border:none;
  color:#fff;font-size:22px;padding:4px 6px;cursor:pointer;
}
.nav-mobile-menu{
  display:none;position:fixed;top:52px;left:0;right:0;
  background:var(--navy);z-index:99;flex-direction:column;
  padding:.5rem 0;box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu .nav-link{padding:12px 1.5rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.06);}
.nav-mobile-menu .nav-credits{margin:8px 1.5rem;justify-content:center;}

/* ── CARDS ── */
.card{background:var(--surface);border-radius:var(--r);box-shadow:0 1px 4px rgba(0,0,0,.07);overflow:hidden;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;}
.badge-blue{background:#dbeafe;color:#1d4ed8;}
.badge-green{background:#d1fae5;color:#065f46;}
.badge-pink{background:#fce7f3;color:#9d174d;}
.badge-amber{background:#fef3c7;color:#92400e;}
.badge-gray{background:#f1f5f9;color:#475569;}
.badge-red{background:#fee2e2;color:#991b1b;}
.badge-purple{background:#ede9fe;color:#5b21b6;}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:10px;padding:10px 20px;
  font-size:14px;font-weight:600;transition:.15s;cursor:pointer;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-s);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue);}
.btn-outline:hover{background:var(--blue-l);}
.btn-danger{background:var(--red);color:#fff;}
.btn-sm{padding:6px 14px;font-size:13px;border-radius:8px;}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:12px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}

/* ── FORM ── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-label{font-size:13px;font-weight:600;color:var(--muted);}
.form-input{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:10px;padding:11px 14px;font-size:14px;color:var(--text);
  outline:none;transition:.2s;width:100%;
}
.form-input:focus{border-color:var(--blue);background:#fff;}
.form-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:8px;padding:10px 14px;font-size:13px;}

/* ── ALERT ── */
.alert{border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:16px;}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fde68a;}
.alert-info{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd;}

/* ── ONLINE DOT ── */
.online-dot{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 2px #fff,0 0 0 4px #d1fae5;}

/* ── SCROLLBAR ── */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ── PAGE WRAPPER ── */
.page{max-width:1200px;margin:0 auto;padding:2rem 1.5rem;}
.page-sm{max-width:480px;margin:0 auto;padding:2rem 1.5rem;}

/* ════════════════════════════════════════
   BOLLE MESSAGGI — limite caratteri
   ════════════════════════════════════════ */
.msg-bubble{
  /* max larghezza in ch = ~150 caratteri su PC */
  max-width: min(60%, 150ch);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* ════════════════════════════════════════
   RESPONSIVE MOBILE
   ════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Nav mobile */
  .nav-link:not(.nav-mobile-only){ display:none; }
  .nav-credits{ display:none; }
  .nav-hamburger{ display:block; }
  .nav{ padding:0 1rem; gap:.5rem; }

  /* Page padding */
  .page{ padding:1rem; }

  /* Bolle messaggi: ~35 caratteri su mobile */
  .msg-bubble{
    max-width: min(85%, 35ch);
    font-size: 13px;
  }

  /* Chat layout: niente sidebar su mobile */
  .chat-layout{ flex-direction:column; }
  .chat-sidebar{ display:none !important; }
  .chat-main{ width:100% !important; }

  /* Profile grid: 1 colonna */
  .profiles-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  /* Profile detail: 1 colonna */
  .profile-detail{
    grid-template-columns: 1fr !important;
  }
  .profile-sticky{ position:static; }

  /* Feed foto: 2 colonne su mobile */
  .feed-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Admin sidebar collassata */
  .admin-sidebar{ display:none; }
  .admin-main{ width:100%; }

  /* Operator chat: logbook nascosti su mobile */
  .logbook-panel{ display:none; }
  .chat-col{ width:100%; }

  /* Operator list */
  .stats-row{
    grid-template-columns: repeat(2,1fr);
    gap:.5rem;
  }

  /* Credits packages: 1 col */
  .packages-grid{ grid-template-columns:1fr; }

  /* Btn lg più piccolo */
  .btn-lg{ padding:12px 20px; font-size:15px; }

  /* Profile card footer */
  .profile-card-footer{ flex-wrap:wrap; }

  /* Home hero */
  .home-hero{ padding:1.2rem; }
  .home-hero-title{ font-size:1.1rem; }

  /* Operator topbar */
  .topbar-started{ display:none; }

  /* Modal foto: full screen */
  .photo-modal-inner{
    grid-template-columns:1fr !important;
    max-height:95vh;
    border-radius:12px;
  }
  .modal-side{ display:none; }
}

@media (max-width: 900px) and (min-width:641px) {
  .profiles-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .chat-sidebar{ width:200px; }
  .logbook-panel{ width:210px; }
}