/* =========================
   VARIABLES
========================= */

:root{
  /* LIGHT */
  --bg-main:#f4f7fb;
  --bg-panel:#ffffff;
  --bg-soft:#eef3f9;
  --txt:#4a6280;
  --muted:#5f6f86;
  --accent:#00518f;
  --accent-hover:#2f6fed;
  --border:#d6e1ef;
  --error:#e54848;
  
  --bg-app-header: #fff; //#00518f; // #4b84b8; //#2d6da8;// #fff; //#01448a;
  
  
  --board-hero-bg:#01448a; //#36508d;
}

:root {
  //--hero-image: url('/assets/img/board-hero-2.png');
  --hero-image: url('/assets/img/eyes-app-board.png');
  
}

[data-theme="dark"] {
  --hero-image: url('/assets/img/board-hero-night-5.png');
}

/* =========================
   THEMES
========================= */

body.theme-dark{
  --bg-main:#0f141b;
  --bg-panel:#161d26;
  --bg-soft:#1c2531;
  --txt:#e6e9ee;
  --muted:#a8b0bd;
  --accent:#3aa0ff;
  --accent-hover:#5bb2ff;
  --border:#2a3544;
  --error:#ff5c5c;
  
  --board-hero-bg:#090b29;
  
  --bg-app-header: #1a1f4d;
  
  --admin-row-bottom-border: rgba(170,170,170,.18);
  --admin-group-color:#9aa6b2;
}


/* =========================
   RESET
========================= */

*{
  box-sizing:border-box;
}

/* =========================
   HTML / BODY
========================= */

html,
body{
  margin:0;

  width:100%;
  height:100%;

  overflow:hidden;

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    sans-serif;

  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html{
  font-size: clamp(17px, 1vw + 15px, 21px);
}

body{

  min-height:100vh;
  min-height:100dvh;

  
  
  background:linear-gradient(
    var(--bg-gradient-start),
    var(--bg-gradient-end)
  );

  color:var(--txt);

  display:flex;
  flex-direction:column;

  line-height:1.45;

  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}


/* =========================
   APP CONTAINER
========================= */

#app-container{

  flex:1;

  width:100%;

  min-height:0;

  overflow:hidden;

  display:flex;
  flex-direction:column;
}


/* =========================
   APP
========================= */

.app{

  flex:1;

  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;
}


/* =========================
   VIEW CONTAINER
========================= */

#view-container{

  flex:1;

  min-height:0;

  overflow-x:hidden;
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  padding:0;
}


/* =========================
   INSTALL VIEW
========================= */

#view-container-install{

  flex:1;

  min-height:0;

  width:100%;

  overflow-x:hidden;
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;
  align-items:center;

  text-align:center;

  padding:
    env(safe-area-inset-top)
    24px
    calc(env(safe-area-inset-bottom) + 24px);
}


/* centra solo quando il contenuto entra */

#view-container-install > *{
  margin:auto 0;
}

#view-container-auth{

  flex:1;

  min-height:0;

  width:100%;

  overflow-x:hidden;
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  display:flex;
  flex-direction:column;
}

/* =========================
   STRUMENTI TESTING
========================= */

.debug{
    min-height:20px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index:20000;
    background: #fff;
    cursor:pointer;
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0px 0px 5px #aaa;
    padding: 0px 5px 0px 5px;
    
    display:none;
}

.debug:hover{
    opacity:0.8;
}

#testingZone{

    height:auto;
    width:100%;
    
    position:fixed;
    background:white;
    color:black;
    top:32px;
    //left:70px;
    opacity:0.8;
    padding: 10px 20px 10px 20px;
    //box-shadow: 0px 2px 3px #aaa;
    border:solid 1px #ddd;
    //border-radius: 10px 10px 10px 10px;
    display:none;
    z-index:20000;
    
}

#testingZone span{
    color:#555;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    cursor:pointer;
}

#testingZone span:hover{ 
    opacity:0.7;
}



/* =========================
   GLOBAL ELEMENTS
========================= */

h1{
  margin:0 auto 0 auto;
  font-weight:700;
  font-size:52px;
  text-align:center;
}

.auth-success-box{
    text-align:center;
}

.hidden{
  display:none !important; 
}

.no-scroll{
  height:100dvh;
  overflow:hidden;
}

/* =========================
   LAYOUT
========================= */

.wrapper{
  width:100%;
  max-width:520px;
  margin:28px auto;
  padding:18px;
  box-sizing:border-box;
}

#view-container-auth .wrapper{
  width:100%;
  margin:0 auto;
}

#view-container-auth .wrapper .panel{
  width:100%;
  padding:0;
  border:none;
  box-sizing:border-box;
}

@media (min-width:480px){

  .wrapper{
    padding:24px;
  }

}

.panel{
  width:100%;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-sizing:border-box;
}

/*=====================*/

@media (min-width:480px){
  .panel{padding:30px;}
}

.panel-top{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}

.title-logo{
  width:40%;
  max-width:180px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
  display:block;
  margin:0 auto 20px auto;
}

.subtitle{
  text-align:center;
  color:var(--muted);
  font-size:clamp(1.15rem,5vw,1.35rem);
  margin-bottom:2.2rem;
}

/* =========================
   NAV
========================= */

.nav{
  display:flex;
  gap:.7rem;
  margin-bottom:1.8rem;
}

.nav.hidden{display:none;}

.nav button{
  flex:1;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--muted);
  padding:1rem .6rem;
  font-size:1.05rem;
  border-radius:14px;
  cursor:pointer;
}

.nav button.active{
  background:var(--accent);
  background: #00518f;
  color:#fff;
}

/* =========================
   FORM
========================= */

.form{display:none;}
.form.active{display:block;}

.field{margin-bottom:1.2rem;}

label{
  display:block;
  font-size:1rem;
  color:var(--muted);
  margin-bottom:.45rem;
}

input,select{
  width:100%;
  padding:1rem .9rem;
  font-size:1.15rem;
  min-height:54px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--txt);
}

input.error{border-color:var(--error);}

.error-msg{
  margin-top:4px;
  font-size:.85rem;
  color:#ff8a8a;
}

/* =========================
   BUTTONS
========================= */

button.primary{
  width:100%;
  margin-top:1.2rem;
  padding:1.1rem;
  font-size:1.2rem;
  min-height:58px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  background: #00518f;
  
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

button.primary:hover{
  background:var(--accent-hover);
}

.btn{
  flex:1;
  padding:16px;
  border-radius:12px;
  font-size:17px;
  font-weight:600;
  border:none;
  cursor:pointer;
  margin-top:5px;
  margin-bottom:5px;
}

.btn.ok{
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}

.btn.ok:hover{
  background:var(--accent-hover);
}



.btn.primaryNext{
  background: #00518f;//var(--accent);
  color:#fff;
}


.btn.secondaryPrev{
  background:var(--btn-prev,var(--bg-soft));
  
  
  color:var(--txt);
  display:none;
}


.btn2{
  flex:1;
  padding:8px;
  border-radius:8px;
  font-size:17px;
  font-weight:600;
  border:none;
  cursor:pointer;
  //margin-top:5px;
  margin-bottom:10px;
}

.reportSend{
  background:#357230;
  color:#fff;
}

/* =========================
   WIZARD
========================= */

.step{display:none;}
.step.active{display:block;}

.progress{
  height:4px;
  background:var(--progress-bg);
  margin-bottom:20px;
  border-radius:2px;
  overflow:hidden;
}

.progress-bar{
  height:100%;
  width:25%;
  background:var(--progress-bar);
  transition:width .3s ease;
}

.form-nav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
}

.progress{
background:#eee;
}

.progress-bar{
  //background:#39ff88;
  background:#5f8fbc;
}


/* =========================
   PRIVACY
========================= */

/* PRIVACY BOX 

.privacy-box{
  max-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;
  line-height:1.5;

  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--txt);
}

.privacy-group input[type="checkbox"]{
  width:18px;
  height:18px;
  min-height:auto;
  padding:0;
  margin-right:10px;
  accent-color:var(--accent);
  cursor:pointer;
}

.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.95rem;
  color:var(--txt);
  cursor:pointer;
}

.privacy-box.error{
  border-color:var(--error);
  background:var(--error-bg, rgba(255,0,0,.08));
}
*/

.privacy-box{
  max-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;
  line-height:1.5;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--txt);
}

.privacy-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

.privacy-toggle input{
  display:none;
}

.toggle-track{
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  transition:.2s;
  flex-shrink:0;
}

.toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--txt);
  transition:.2s;
}

.toggle-text{
  font-size:.95rem;
  color:var(--txt);
}

.privacy-toggle input:checked + .toggle-track{
  background:var(--accent);
  border-color:var(--accent);
}

.privacy-toggle input:checked + .toggle-track .toggle-thumb{
  left:22px;
  background:#fff;
}

.privacy-box.error{
  border-color:var(--error);
  background:var(--error-bg, rgba(255,0,0,.08));
}

.login-error-box{
  max-height:180px;
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;
  line-height:1.5;
  background:var(--error-bg, rgba(255,0,0,.08));
  border:1px solid var(--error);
  color:var(--txt);
  display:none;
}

.login-valid-box{
  color:var(--success);
  display:none;
  text-align:center;
}

/*---------------------)*/

.login-error-box{
  
  max-height:180px;
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;
  line-height:1.5;

  background:var(--error-bg, rgba(255,0,0,.08));
  
  border:1px solid var(--error);
  
  color:var(--txt);
  display: none;
}

.login-valid-box{
  color:var(--success);
  display:none;
  text-align:center;
}


/* =========================
   LOGIN BOX
========================= */

.login-error-box{
  max-height:180px;
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;

  background:rgba(255,0,0,.08);
  border:1px solid var(--error);

  display:none;
}

.login-valid-box{
  color:var(--success);
  display:none;
  text-align:center;
}

/* =========================
   INSTALL VIEW
========================= */

.install-logo{
  width:68vw;
  max-width:280px;
  margin-bottom:30px;
}

.install-subtitle{
  font-size:20px;
  line-height:1.4;
  color:var(--muted);
  margin-bottom:40px;
}

.install-btn{
  width:100%;
  max-width:420px;
  padding:22px;
  border:none;
  border-radius:18px;
  //background:var(--accent);
  background:#00518f;
  color:#fff;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
}

.install-btn:active{
  transform:scale(.70);
}

.install-success-box{
  display:none;

  width:100%;
  max-width:420px;
  padding:28px 22px;

  background:var(--bg-panel);
  border-radius:20px;

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.install-success-title{
  font-size:26px;
  font-weight:700;
  margin-bottom:16px;
}

.install-success-text{
  font-size:20px;
  line-height:1.5;
  color:var(--muted);
}

/* =========================
   MODAL
========================= */

/*
.modal{
  position:fixed;
  inset:0;
  overflow-y: auto; 
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.5);
  z-index:1000;
  
  padding: 40px 0; 
}


.modal{
  position:fixed;
  inset:0;
  overflow:hidden; 
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:1000;
  padding:40px 0; 
}
*/

.modal{
  position:fixed;
  inset:0;
  overflow-y:auto; /* 👈 scroll QUI */
  display:none;
  align-items:flex-start; /* 👈 NON center */
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:1000;
  padding:40px 0; /* 👈 margini */
}

.modal.show{
  display:flex;
}

.modal-dialog{
  width:90%;
  max-width:900px;
}

/*
.modal-content{
  background:var(--panel);
  border-radius:10px;
  padding:20px;
  position:relative;
  background: var(--bg-panel);
  // min-height: 100%;
  
  max-height: calc(100vh - 80px); 
  overflow-y: auto;
  
}


.modal-content{
  background:var(--bg-panel);
  border-radius:10px;
  padding:20px;
  position:relative;

  max-height:calc(100vh - 80px); 
  overflow-y:auto; 
}
*/

.modal-content{
  background:var(--bg-panel);
  border-radius:10px;
  padding:20px;
  position:relative;

  overflow:visible; /* 👈 niente scroll */
}


.modal-close-container {
  display: flex;
  justify-content: center; /* centrato orizzontalmente */
}

.modal-close {
  display: inline-block;   /* larghezza naturale del contenuto */
  width: auto;             /* assicura che non occupi tutta la larghezza */
  margin-top: 20px;        /* distanza dal bordo superiore o da altri elementi */

  font-size: 20px;
  cursor: pointer;
  background: #357230;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
    
  padding:16px;
  border-radius:12px;
  font-size:17px;
  font-weight:600;
  border:none;
  cursor:pointer;
  margin-top:55px;
  margin-bottom:40px;  
}

.modal-close:hover {
  //background: #6bc25a;
  opacity:0.7;
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
}

.modal-close:active {
  transform: translateY(0) scale(.98);
}

#modalVerifyClose{
  display:none;
}


body.modal-open {
  overflow-y: auto; /* NON hidden */
}




/* =========================
   VERIFY CONTACT MODAL
========================= */

.verify-box{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.verify-section{
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-soft);
}

.verify-section h3{
  margin:0 0 10px 0;
  font-size:18px;
}

.verify-ok{
  color:var(--success);
  font-weight:600;
}

/* =========================
   OTP INPUT
========================= */

.otp-row{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.otp-box{
  width:52px;
  height:52px;
  text-align:center;
  font-size:22px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--txt);
  
}

.otp-box:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(58,160,255,.25);
}

.otp-error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:8px;
  font-size:.9rem;

  background:rgba(255,0,0,.08);
  border:1px solid var(--error);
  color:var(--error);

  text-align:center;
}

.hidden{
  display:none;
}

/* =========================
   VERIFY BUTTON STATE
========================= */

.btn-verify{
  background:var(--border);
  color:var(--muted);
  cursor:not-allowed;
}

.btn-verify.active{
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}

.btn-verify.active:hover{
  background:var(--accent-hover);
}

/* ================================== */

/* =========================
   ADMINISTRATIONS
========================= */

.administrations{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}

/* CARD */

.group,
.ungrouped{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;

  //box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* TITOLO */

.group-title{
  font-weight:600;
  font-size:15px;
  margin-bottom:10px;
  color:var(--txt);
}

.group-name{
  font-weight:600;
  font-size:15px;
  color:var(--txt);
}

/* RIGHE */

.group label,
.ungrouped label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0;
  cursor:pointer;
  font-size:.95rem;
  color:var(--txt);
}

/* FIGLI */

.children{
  margin-left:20px;
  margin-top:6px;
  border-left:2px solid var(--border);
  padding-left:10px;
}

/* INPUT CUSTOM */

.group input[type="radio"],
.group input[type="checkbox"],
.ungrouped input[type="checkbox"]{
  width:26px;
  height:26px;
  min-height:auto;
  padding:0;
  margin:0;

  accent-color:var(--accent);
  cursor:pointer;
}

/* HOVER */

.group label:hover,
.ungrouped label:hover{
  opacity:.8;
}

/* =========================
   VALIDATION BOX
========================= */

.admin-error{
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;

  font-size:.9rem;

  background:rgba(255,0,0,.08);
  border:1px solid var(--error);
  color:var(--error);
}

/* =========================
   INFO TEXT (fix tema)
========================= */
/*
.info-text{
  font-size:.95rem;
  line-height:1.5;

  color:var(--txt);

  background:var(--bg-soft); 
  padding:12px 14px;
  margin:10px 0 16px 0;

  border:1px solid var(--border);
  border-radius:10px;

  //box-shadow:0 1px 3px rgba(0,0,0,.12);
}
*/

/* ================================== */


/* =========================
   ANIMATIONS
========================= */

@keyframes shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

.panel.shake{
  animation:shake .35s ease-in-out;
}

/* =========================
   SWITCHER diurno/notturno
========================= */

.theme-switch{
  position:relative;
  display:none;
}

.switch-track{
  width:55px;
  height:24px;
  border-radius:999px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:2px;
  cursor:pointer;
}

.switch-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:transform .25s ease;
  color:#fff;
  
  transform:translateX(31px);
}

.icon{
  position:absolute;
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.icon svg{
  width:16px;
  height:16px;
}

.icon-chat{
  fill: currentColor;
  flex-shrink: 0;
  vertical-align:middle;
}


.icon-chat-enter{
  flex-shrink: 0;
}

.icon.sun{
  opacity:1;
}

/* DARK */
body.theme-dark .switch-thumb{
  transform:translateX(0);
}

body.theme-dark .icon.sun{
  opacity:0;
}

body.theme-dark .icon.moon{
  opacity:1;
}
/* =============================================================================
   View HOME
============================================================================= */

/* =============================================================================
   APP LAYOUT (HEADER + VIEW + FOOTER NAV)
============================================================================= */

/* SPOSTATA SOPRA VICINO A body
.app{
  height:100dvh;
  max-height: 100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
*/

/* =========================
   HEADER
========================= */

.app-header{
  height:56px;
  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;

  background:var(--bg-app-header);
  
  /*
  background: linear-gradient(
    135deg,
    #ffffff 24%,
    #dce9f5 0%,
    #00518f 80%
  );
  */
  

  

  
  
  //background:#3a5591; !important //#2e4780;
  
  
  
  box-shadow: 0px 0px 7px #162446;

  z-index:10;
}

.header-title{
  font-size:18px;
  font-weight:600;
  //color:var(--txt);
  color:#e6e9ee;
}
/*
.header-menu-btn{
  background:none;
  border:none;
  //color:var(--txt);
  color:#e6e9ee;
  color:#00498a;
  font-size:22px;
  cursor:pointer;
  padding:4px 8px;
}
*/
.header-menu-btn{
  display:flex;
  align-items:center;
  gap:8px;

  background:none;
  border:none;
  color:#00498a;
  font-size:22px;
  cursor:pointer;
  padding:4px 8px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.offline-icon{
  width:20px;
  height:20px;
  color:#c0392b;
  display:none;
}

.offline-icon.show{
  display:block;
}




/* =========================
   BOTTOM NAV
========================= */

.bottom-nav{
  height:56px;
  min-height:56px;

  display:flex;

  background:var(--bg-panel);
  border-top:1px solid var(--border);
}

.bottom-nav button{
  flex:1;

  border:none;
  background:none;

  color:var(--muted);
  font-size:14px;
  font-weight:500;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:background .15s ease;
}

.bottom-nav button.active{
  color:var(--accent);
  font-weight:600;
}

.bottom-nav button:hover{
  background:var(--bg-soft);
}

/* =========================
   HEADER MENU
========================= */

.header-menu{
  position:fixed;

  top:68px;
  right:10px;

  background:var(--bg-panel);
  
  border:1px solid var(--border);

  border-radius:12px;

  overflow:hidden;

  min-width:160px;

  box-shadow:0 10px 25px rgba(0,0,0,.45);

  display:none;

  z-index:20;
}

.header-menu.open{
  display:block;
}

.header-menu div{
  padding:12px 16px;
  cursor:pointer;
  font-size:15px;
  color:var(--txt);
}

.header-menu div:hover{
  background:var(--bg-soft);
}

.nav-icon{
  width:24px;
  height:24px;
  display:block;
}

.bottom-nav button{
  color:var(--muted);
}

.bottom-nav button.active{
  color:var(--accent);
}

/* =========================
   HEADER LOGO
========================= */

.header-logo-box{
  position:relative;
  height:46px;
  width:46px;

  display:flex;
  align-items:center;
  justify-content:center;
  
  border-radius: 50%;
  
  overflow:hidden;
  
  
  
}

.header-logo-text{
  color:#00498a;
}

.header-logo-box img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.header-logo-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}



.header-logo{
  height:70px;
  position:absolute;
  top:0px;
  left:0;
  
}

/* solo svg */
.header-logo{
  color:var(--txt);
}


/* =========================
   SUBVIEW BOARD 
========================= */

.board-header-title{

  position:absolute;

  left:4%;
  right:4%;
  top:4%;

  //padding:4%;

    
  text-align:left;
  

}

.board-wellcome{
  font-size:clamp(32px,5.5vw,40px);

  font-weight:600;

  color:#fff;
  
}

.board-slogan{
  
  font-size:clamp(12px,5.5vw,18px);

  font-weight:normal;

  color:#fff;
}

.board{
  height:100%;
  position:relative;
}

/* HERO */


/* original
.board-hero{
  position:relative;
  width:100%;
  background:var(--board-hero-bg);
  
}
*/
.board-hero{
  position:relative;
  width:100%;
  background:#fff;
  
  top:20%;
  
  
}



.board-hero-img{
  width:100%;
  display:block;
  
}


.board-hero-img {
  /* Crea una sfumatura da trasparente (0) a opaco (1) */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
}


.board-hero-slogan{
  position:absolute;
  left:4%;
  right:4%;
  bottom:-34%;
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;

color:#000;

}


/* BOTTONE */

.btn-report{
  
  position:absolute;
  left:4%;
  right:4%;
  bottom:-72%;
  padding:4%;
  
  
  font-size:clamp(21px,4.5vw,34px);
  font-weight:600;
  border:none;
  border-radius:12px;
  background:#357230;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.btn-report:hover{
  //background:#6bc25a;
  opacity:0.7;
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}

.btn-report:active{
  transform:translateY(0) scale(.98);
}


/* =========================
   INFO BOX
========================= */

.info-text{
  font-size:.95rem;
  line-height:1.5;

  color:var(--txt);
//  background:rgba(255,165,0,.10);
  background:#fff;


  padding:12px 14px;
  margin:10px 0 16px 0;

  border:1px solid #fff;
  

  //border:1px solid rgba(255,255,255,.35);
  //border-radius:10px;

  //box-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* ############################# ==========================================
  Chat
############################# */

.reports-sublist{
  padding:0 12px 0 12px;
}

.reports-inner-list{
  //padding:8px 0 12px 52px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.report-item{
  //padding:5px 8px 5px 8px;
  //border:1px solid var(--border);
  //border-radius:7px;
  //background:var(--bg-soft);
  cursor:pointer;
  position:relative;
  //box-shadow: 0 1px 3px #ddd;
  margin-top: 5px;
}
.report-item-content{
  padding: 4px 11px 4px 11px;
  font-size:16px;
  background:var(--bg-soft);
  border-radius:7px;
}

.channels-wrapper{
  
  flex:1;
  overflow-y: auto;
  height:100%;
  

}

.chat-container {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.chat-tool-icon{
  width:22px;
  height:22px;
  display:block;
}

/* WRAPPER */
/*
.chat-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
}*/

.chat-wrapper{
  height:100%;
  display:flex;
  flex-direction:column;
}

.chat-view{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--bg-main);
  min-height:0;
}

.chat-main{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:10px 10px 10px 10px;
  
  min-height:0; 
}


.admin-list{
  padding:14px 14px 14px 14px;
  
}


/*
.chat-main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

  .chat-main{
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
    
    flex: 1;
    overflow-y: auto;
    margin: 0;

  
  }
*/  
  


/* HEADER */
/*
.chat-header{
  margin-bottom:14px;
}
*/
  .chat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    border-bottom:1px solid var(--border);
    background:var(--bg-panel);
    
    /*position:fixed;*/
    position: static; /* era fixed */
    
    /*
    top:56px;
    left:0;
    right:0;
    z-index:9;
    */
  }
  
.chat-header-left{
  display:flex;
  align-items:left;
  gap:0px;
  margin-right:10px;
}  
  
.chat-header-title{
  font-weight:600;
}

.chat-header-subtitle{
  font-size:12px;
  color:var(--muted);
}  

.chat-header-group{
  font-weight: bold;
}

.chat-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
}

.chat-header-menu-btn{
  background:none;
  border:none;
  color:var(--txt);
  //color:#e6e9ee;
  font-size:22px;
  cursor:pointer;
  padding:4px 8px;
}


.chat-sub{
  font-size:13px;
  color:var(--muted);
}

/* LIST */
.chat-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.chat-check-icon{
  width:14px;
  height:14px;
  color:#fff;
  opacity:0.5;
}

.chat-check-icon.read{
  //color:#5aa8ff; //#2f6bff;
  //background:#fff;
  opacity:1.0;
}

/*---------------------------------*/

/*
.chat-view{
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg-main);
}
*/

/*

  .chat-view{
    height:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--bg-main);
    
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

.chat-wrapper,
.chat-view{
  height: 100%;
  //max-height: 100%;
}
*/



.chat-back-btn{
  border:solid 1px #ddd;
  background:none;
  font-size:20px;
  color:var(--txt);
  cursor:pointer;
  //background: #eee;
  border-radius:5px 5px 5px 5px;
  margin-right:5px;
}


.chat-title{
  font-size:16px;
  margin:0;
   font-size: 1.15rem;
}

.chat-subtitle{
  font-size:12px;
  color:var(--muted);
}

.chat-status{
  font-size:11px;
  padding:2px 6px;
  border-radius:6px;
  background:var(--bg-soft);
}


/*
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
*/
  .chat-messages{
    flex:1;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:visible;
  }


.chat-message{
  display:flex;
  
  font-size: 1rem;
}

.chat-message.is-sent{
  justify-content:flex-end;
}

.chat-message.is-received{
  justify-content:flex-start;
}

/* =========================================
   DATE DIVIDER
========================================= */

.chat-date-divider{
  display: flex;
  justify-content: center;

  margin: 1rem 0;
}

.chat-date-divider-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.7rem;

  padding: .2rem .8rem;

  border-radius: 999px;

  //background: #fff; //rgba(0,0,0,.06);
  //border: 1px solid rgba(0,0,0,.06);

  color: #000; //#5f6b7a;

  font-size: .72rem;
  //font-weight: 600;

  letter-spacing: .02em;

  backdrop-filter: blur(6px);
}

/* dark bubble contexts opzionale */
.chat-dark .chat-date-divider-label{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
}

/* =========================================
   MESSAGE SENDER
========================================= */

.message-sender{
  display: flex;
  align-items: center;
  gap: .5rem;

  margin-bottom: .45rem;

  line-height: 1.1;
}

/* =========================================
   ROLE BADGE
========================================= */

.message-sender-role{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.4rem;

  padding: .18rem .55rem;

  border-radius: 999px;

  border: 1px solid transparent;

  font-size: .68rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .04em;

  white-space: nowrap;
}

/* =========================================
   USERNAME
========================================= */

.message-sender-user{
  font-size: .84rem;
  font-weight: 600;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================
   DEFAULT COLORS
========================================= */


.message-sender-user{
  color: #1f2937;
}


.message-sender-role{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.4rem;

  padding: .18rem .55rem;

  
  font-size: .68rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .04em;

  white-space: nowrap;

  background: #eef2f8;
  border-color: #d5ddeb;
  border-radius: 999px;
  border: 1px solid transparent;

  color: #3a5591;
}

/* =========================================
   USER
========================================= */

.message-sender-role[data-role="Utente"]{
  
  /*
  background: #edf7ea;
  border-color: #c8e4c1;
  color: #357230;
  */
  
  background: #f7f8fa;
  border-color: #357230;
  color: #357230;
}
/* =========================================
   ADMIN
========================================= */

.message-sender-role[data-role="Operatore"]{
  background: #dfe8f8;
  border-color: #b9c8e6;
  color: #2f4678;
}

/* =========================================
   RECEIVED MESSAGE
========================================= */

.chat-message.is-received .message-sender{
  opacity: .96;
}

/* =========================================
   SENT MESSAGE
========================================= */

.chat-message.is-sent .message-sender-user{
  color: rgba(255,255,255,.95);
}

.chat-message.is-sent .message-sender-role{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

/* =========================================
   FLOATING DATE
========================================= */



#chat-floating-date{
  position: absolute;

  top: 70px;
  left: 50%;
  transform: translate(-50%, -6px);

  z-index: 100;

  width: max-content;

  margin: 0;

  padding: .32rem .9rem;

  border-radius: 15px; //999px;

  /*
  background: rgba(58,85,145,.92);
  color: #fff;
  */
  
  background: #f7f8fa; //#fff;
  color: #333;
  

  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px rgba(0,0,0,.12);

  pointer-events: none;

  opacity: 0;

  transition:
    opacity .18s ease,
    transform .18s ease;
    
  z-index:1000;  
}

#chat-floating-date.is-visible{
  opacity: 0.8;
  transform: translate(-50%, 0);
}


/* =========================================
   MESSAGE TIME
========================================= */

.chat-time{
  display: inline-block;

  margin-top: .35rem;

  font-size: .68rem;
  font-weight: 500;
  line-height: 1;

  color: #6b7280;

  letter-spacing: .02em;

  opacity: .9;
}

/* messaggi inviati */
.chat-message.is-sent .chat-time{
  color: rgba(255,255,255,.72);
}

/* messaggi ricevuti */
.chat-message.is-received .chat-time{
  color: #7b8794;
}



/* ricevuti */
.chat-message.is-received .message-sender{
  opacity: .95;
}


.chat-bubble{
  max-width:75%;
  padding:10px 12px;
  border-radius:14px;
  background: var(--bg-panel); // var(--bg-soft);
  position:relative;
  box-shadow: 0px 0px 5px #ccc;
  margin-bottom: 8px;
}

.chat-message.is-sent .chat-bubble{
  //background:var(--accent);
  background:#357230; //#357230;
  
  color:#fff;
}

.chat-bubble-text{
  font-size:14px;
  line-height:1.4;
  word-wrap:break-word;
}

.chat-bubble-meta{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:4px;
  font-size:11px;
  //opacity:1.0;
}

.chat-checks{
  font-size:12px;
}

/* CARD */
.admin-card{
  background:var(--bg-panel);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  overflow:hidden;
  margin-bottom:15px;
}

.chat-bubble.has-media{
  padding:6px;
}

.chat-media-thumb img{
  width:100%;
  border-radius:10px;
  display:block;
}

.chat-bubble-caption{
  font-size:13px;
  margin-top:6px;
}

.chat-location-card{
  display:flex;
  gap:10px;
  align-items:center;
  background:var(--bg-soft);
  border-radius:10px;
  padding:10px;
  border:none;
  cursor:pointer;
}

.chat-location-icon{
  font-size:20px;
}

.chat-location-title{
  font-size:13px;
  font-weight:600;
}

.chat-location-text{
  font-size:12px;
  color:var(--muted);
}

.chat-preview-list{
  display:flex;
  gap:8px;
  overflow-x:auto;
}

.chat-preview-item{
  position:relative;
  width:70px;
  height:70px;
}

.chat-preview-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}

.chat-preview-remove{
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:none;
  background:#000;
  color:#fff;
  font-size:12px;
  cursor:pointer;
}

/*
.chat-composer-wrap{
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
*/

  .chat-composer-wrap{
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  padding:8px;

  display:flex;
  flex-direction:column;
  gap:6px;

  flex: 0 0 auto;
}

.chat-send-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

.chat-tools{
  display:flex;
  gap:8px;
}

.chat-tool-btn{
  border:none;
  background:var(--bg-soft);
  border-radius:10px;
  padding:6px 10px;
  font-size:16px;
  cursor:pointer;
}

.chat-composer{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.chat-input-box{
  flex:1;
  background:var(--bg-soft);
  border-radius:14px;
  padding:6px 10px;
  max-height:140px;
  overflow-y:auto;
  
  font-size: 1rem;
}

.chat-message-input{
  width:100%;
  border:none;
  outline:none;
  resize:none;
  background:transparent;
  color:var(--txt);
  font-size:15px;
  line-height:1.4;
}

.chat-send-btn{
  width:47px;
  height:47px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  background: #00518f;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  flex-shrink:0;
  border-radius:14px;
  padding:11px 13px 13px 13px;
}

.chat-send-btn:active{
  transform:scale(.95);
}

.chat-day-separator{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:10px 0;
}


.chat-messages{
  scroll-behavior:smooth;
}

.chat-admin-group{
  font-size: 15px; //12px;
  font-weight:bold;
  font-style: italic;
  color: var(--admin-group-color);
}

/*
.chat-message-badge{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;
  border-radius: 10px;

  font-size: 11px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ff3b30;
  color: #fff;

  box-shadow: 0 0 0 2px var(--bg);
}
*/

.chat-message-badge {
  position: absolute;
  top: -12px;
  right: -8px;

  width: 32px;
  height: 32px;
  
  display:none;
}

.chat-message-badge.has-unread{
  display: block;
}


/* svg sfondo */
.chat-message-badge .icon-chat {
  width: 100%;
  height: 100%;
  fill: #ff3b30;
  fill: crimson;
}

/* numero sopra */
.badge-count {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -55%);

  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

/* ROW ============================================================== */

.admin-row-container{

    box-shadow: 0 2px 8px var(--admin-row-bottom-border);
    border-bottom: 1px solid var(--border);
}

.admin-row{
  display:flex;
  gap:12px;
  padding:12px;
  cursor:pointer;
}

.admin-row:active{
  background:rgba(255,255,255,.03);
}

/* ICON */
.admin-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0px 0px 6px #ddd;
}

.admin-icon img{
  width:100%;
  height:auto;
}

/* INFO */
.admin-info{
  flex:1;
}

.admin-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.admin-name{
  font-weight:600;
  font-size:15px;
}

.admin-sub{
  font-size:12px;
  color:var(--muted);
}

.admin-sub{
  font-size:12px;
  color:var(--muted);
  
}

.admin-sub-2{
  font-size:12px;
  color:var(--muted);
  padding-bottom:8px;
  padding-top:3px;
  //margin-left:8px;
}


.admin-group-in-list{
  color: var(--admin-group-color);
  font-size:12px;
  font-weight:normal;
}

/* GROUP */
.group-list{
  border-top:1px solid rgba(255,255,255,.05);
}

.group-item{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  font-size:14px;
  cursor:pointer;
  
}

.group-item-wrap:not(:last-child){
  border-bottom: 1px solid var(--border);
}




.group-item:active{
  background:rgba(255,255,255,.03);
}

/* BADGE */
.badge{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #357230; //var(--primary);
  color:#fff;
}

/* =========================================
   OTHERS
========================================= */

.channel-report-icon{
   width: 14px;
  height: 14px;
  color:#3a5591;
  
}

.report-item-sender{
  
  font-size: 14px;
  color:#3a5591;
  //font-weight:bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#fff;
  padding:0px 20px 0px 0px;
  //box-shadow: 0 0px 5px rgba(0.5, 0.5, 05, 0.05);
  border-radius: 5px 5px 0px 0px;
  
}

.report-item-created-at{
    font-size: 14px;
    font-weight:normal;
    margin-left: auto;
    
}

.report-item-created-at svg{
  vertical-align: -2px;
}
/* =========================================
   MOBILE / TOUCH DEVICES
========================================= */

@media (max-width: 768px){

  body{
    font-size: 1.08rem;
  }

  /* form controls */
  input,
  textarea,
  button,
  select{
    font-size: 1rem;
  }

  /* chat */
  .chat-message,
  .chat-bubble,
  .chat-bubble-text,
  .chat-input,
  .chat-message-input{
    font-size: 1rem;
  }

  /* reports */
  .report-item,
  .report-title,
  .report-preview,
  .report-meta{
    font-size: 1rem;
  }

  /* menu */
  .menu-item,
  .menu-label,
  .menu-link{
    font-size: 1rem;
  }

  /* headers */
  .chat-title,
  .page-title,
  .section-title{
    font-size: 1.15rem;
  }

  /* small text */
  /*
  .chat-time,
  .report-date,
  .small-text{
    font-size: 0.92rem;
  }
  */
}

/* =========================================
   LARGE SMARTPHONES
========================================= */

@media (min-width: 390px) and (max-width: 768px){

  body{
    font-size: 1.12rem;
  }
}

/* =========================================
   VERY LARGE MOBILE DEVICES
========================================= */

@media (min-width: 480px) and (max-width: 768px){

  body{
    font-size: 1.16rem;
  }
}

#test-otp-sms{
  display:none;
}

#test-otp-email{
  display:none;
}

.verify-check-simbol{
  color: #31d055;
  font-size: 32px;
}

..eyes-auth-logo{
  margin-bottom: 0px;
}

.eyes-auth-logo img{
  border-radius: 50%;
  overflow:hidden;
  margin-bottom: 0px;
}

.eyes-auth-title{
  color:#00498a;
  text-align:center;
  font-size:32px !important;
}

/*----------
.info-comp{
  width: 42px;
  height: 42px;
  position: absolute;
  left: 0px;
  top:-10px;
  
}

#info-phone{
  position:relative;
}
---------------*/

#info-phone{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

#info-phone .info-comp{
  width:42px;
  height:42px;
  display:block;
  opacity:.75;
  position:absolute;
  left:0px;
  top:-30px;
}

#info-phone .field-tooltip{
  position:absolute;

  

  top:0px;
  left:30px;

  background:#fff; //#00498a;
  color:#00498a;

  padding:8px 10px;

  border-radius:8px;
  
  box-shadow: 0px 0px 3px #ddd;

  font-size:13px;
  font-size: 18px;
  line-height:1.5;

  white-space:nowrap;

  opacity:0;
  visibility:hidden;

  transform:translateY(-4px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s;

  z-index:1000;
}

#info-phone .field-tooltip.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.linea01{
  border-top: 1px solid #eee;
}

input[type="text"]::placeholder{
  color:#ccc;
  opacity:1;
}

.photo-preview{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.photo-preview-image-container{
  display:flex;
  justify-content:center;
  align-items:center;
}

.photo-preview-image{
  display:block;

  max-width:100%;
  max-height:60vh;

  width:auto;
  height:auto;

  border-radius:12px;
}

.photo-preview-caption{
  width:100%;
  min-height:90px;

  resize:vertical;
}

.photo-preview-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

// Nuovo attach
/*
.chat-attachment-preview{
  position:fixed;

  top:0;
  left:0;
  right:0;
  bottom:0;

  z-index:999999;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,.85);

  padding:8px 10px;
  border-top:1px solid var(--border);
  background:var(--bg-panel);
 
}

.chat-attachment-preview-image{
  max-width:90vw !important;
  max-height:90vh !important;

  display:block !important;
}

*/


/*
.chat-attachment-preview{
  text-align:center;
  height:100%;
}
*/

.chat-composer-wrap.attach-mode{
  flex:1;
}

footer.chat-composer-wrap.attach-mode{
  border-top:1px solid #000;
}

.chat-attachment-preview{
  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;
  
    overflow:hidden;
}

/*
.chat-attachment-preview-wrapper{
  position:relative;
  padding:20px 20px 20px 20px;
  
}
*/

.chat-attachment-preview-wrapper{
  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;

  position:relative;

  width:100%;
  height:100%;
}


/*
.chat-attachment-preview-image{
  display:block;

  max-height:220px;
  max-width:100%;

  width:auto;
  height:auto;

  margin:0 auto;
  
  //border-radius: 3px 3px 3px 3px;
  //border:solid 1px #fff;
  //box-shadow: 0 0 24px #fff;

}
*/
.chat-attachment-preview-video,
.chat-attachment-preview-image{
  display:block;

  max-width:100%;
  max-height:100%;

  width:auto;
  height:auto;

  object-fit:contain;
}


.chat-attachment-preview.hidden{
  display:none;
}


.chat-attachment-preview-close{
  position:absolute;

  top:0px;
  right:0px;

  width:32px;
  height:32px;

  border:none;
  border-radius:20%;

  cursor:pointer;
  
  font-size:14px;
  //background:#fff;
  opacity:0.6;
  box-shadow:0px 0px 3px #999;
  color:#fff;
  background:#000;
}

.chat-composer-wrap.bk-attach{
  //background: #1a1a1a;
  background:rgba(0,0,0,.92);
}

.msg-media img{
  width:100%;
  padding-top:3px;
}




.view-generic-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
  
  /*position:fixed;*/
  position: static; /* era fixed */
  
  /*
  top:56px;
  left:0;
  right:0;
  z-index:9;
  */
}

.view-generic-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  display:flex;
}

.view-generic-header h2 svg{
  width:32px;
  height:auto;
  border-right: 1px dashed #ccc;
  margin-right: 7px;
  padding-right: 10px;
}


.view-generic-content{

  padding:14px 14px 14px 14px;
  font-size:15px;
}

.main-menu-item-container{
  display:flex;
  align-items:center;
  gap:.4em;
}

/*
.main-menu-item-container svg{
  width:1em;
  height:1em;
  flex:none;
}
*/

.main-menu-item-container svg{
  width:21px;
  height:auto;
  stroke-width:10;
  
}


/*=============*/
/* IMAGE VIEWR */
/*=============*/

.image-viewer{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.92);
  overflow:hidden;
  touch-action:none;
}

.image-viewer.hidden{
  display:none;
}

/*
.image-viewer-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:52px;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  padding:0 16px;
  background:rgba(0,0,0,.45);
}
*/

.image-viewer-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  height:calc(52px + env(safe-area-inset-top));

  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;

  gap:16px;

  padding:
    env(safe-area-inset-top)
    16px
    8px
    16px;

  box-sizing:border-box;

  background:rgba(0,0,0,.45);
  z-index:999;
}

.image-viewer-topbar button,
.image-viewer-topbar a{
  color:#fff;
  background:none;
  border:0;
  font-size:26px;
  text-decoration:none;
  cursor:pointer;
}

.image-viewer-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.image-viewer-stage img{
  max-width:100%;
  max-height:100%;
  user-select:none;
  touch-action:none;
  transform-origin:center center;
}

/*===============================*/
/* spinner e progressbar caricamento media */

.spinner{
  width:40px;
  height:40px;
  border:4px solid rgba(255,255,255,.25);
  border-top:4px solid #fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

.loading-overlay{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.35);
  z-index:9999;
}

/*
.progress{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background:#d7d7d7;
  overflow:hidden;
  z-index:999999;
}
*/

.progress{
  display:none;
  position:fixed;

  top:env(safe-area-inset-top);
  left:0;
  right:0;

  height:6px;

  background:#d7d7d7;
  overflow:hidden;

  z-index:999999;
}

.progress.show{
  display:block;
}

.progress-bar{
  width:0%;
  height:100%;
  background:#00498a;
}

/* === DEVTOOLS === */
.dev-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 300px;
  background: #111;
  color: #0f0;
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,.5);
  z-index: 99999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index:2147483647;
}

.dev-header {
  background: #000;
  padding: 8px;
  border-bottom: 1px solid #333;
}

.dev-body {
  padding: 10px;
  display: flex;
  gap: 10px;
}

.dev-body button {
  flex: 1;
  padding: 6px;
  background: #222;
  color: #0f0;
  border: 1px solid #333;
  cursor: pointer;
}

.dev-body button:hover {
  background: #333;
}

/*
#devOutput {
  padding: 10px;
  height: 400px;
  overflow: auto;
  white-space: pre-wrap;
}
*/

#devOutput {
  padding: 10px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
}

#connectionStatus{
  padding: 10px;
  
  white-space: pre-wrap;
}

.connection-status{
  background:none;
  border:none;
  //color:var(--txt);
  color:#e6e9ee;
  color:#00498a;
  font-size:22px;
  cursor:pointer;
  padding:4px 8px;
}

#connection-overlay{
  display:none;

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.65);

  z-index:999999;

  justify-content:center;
  align-items:center;

  //backdrop-filter:blur(2px);
}

#connection-overlay.show{
  display:flex;
}

.connection-overlay-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;

  color:#fff;
  text-align:center;
}

.connection-overlay-content svg{
  width:72px;
  height:72px;
}

.connection-overlay-text{
  font-size:18px;
  font-weight:600;
  line-height:1.4;
}

#chat-location-map{
  width:100%;
  height:300px;
  border-radius:12px;
  background: #131314;
}

#chat-location-coords{
  margin-top:12px;
  text-align:center;
  font-size:.9rem;
}

#chat-attachment-preview-location{
  width:100%;
  height:100%;
}

#chat-location-map{
  width:100%;
  height:100%;
  border-radius:12px;
}

.file-icon{
  width:255px;
  height:255px;
  display:block;
  margin:0 auto;
}


.file-icon-simple{
  width:170px;
  height:120px;
  display:block;
  margin:0 auto;
}













.msg-media{
  width:100%;
  display:flex;
  justify-content:center;
}

.msg-media .video-container{
  width:380px;
  height:380px;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
  box-sizing:border-box;
}

.video-container{
  width:380px;
  height:380px;
  padding:10px;

  background:#000;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
  box-sizing:border-box;
  position:relative;
}


.msg-media .video-container video{
  display:block;

  max-width:100%;
  max-height:100%;

  width:auto;
  height:auto;

  object-fit:contain;
}

/*
.video-play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:72px;
  height:72px;
  z-index:10;

  pointer-events:none;
}

.video-play-icon circle{
  fill:rgba(0,0,0,.55);
}

.video-play-icon path{
  fill:#fff;
}

*/


.chat-file-container{
  width:100%;
  padding-top:10px;
  
  //background:#fff;
}

.chat-file-info{
  margin-bottom:10px;
}


.chat-file{
  display:flex;
  align-items:center;
  gap:12px;
  
}

.chat-file-download{
  text-decoration:none;
  color:inherit;
}
.chat-file-name{
  word-break:break-all;
  text-align:center;
}

#chat-attachment-preview-file{
    word-break:break-all;
  text-align:center;
color:#999;
}

.chat-file-info{
  max-height: 120px;
}



.msg-location-map{
  width:180px;
  height:180px;
  //border-radius:12px;
  overflow:hidden;
  margin-top: 3px;
}

.msg-location-address{
  width:180px;
  padding:8px 0px;
  box-sizing:border-box;

  //background:rgba(255,255,255,.9);

  font-size:13px;
  line-height:1.3;
}