/**
 * Stili specifici per la modalità TWA (Trusted Web Activity)
 * Questi stili vengono applicati solo quando l'app è in esecuzione come app Android
 * Ottimizzati per un'esperienza fullscreen simile a WhatsApp senza barra degli indirizzi
 */

:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --status-bar-height: env(safe-area-inset-top, 0px);
}

/* Stili globali html per modalità TWA */
.twa-html-mode {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Previene qualsiasi scroll globale */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Stili specifici per modalità TWA - bodyy */
body.twa-mode {
  /* Rimuove eventuali bordi o padding indesiderati */
  margin: 0;
  padding: 0;
  /* Riempimento a tutto schermo */
  height: 100%;
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Previene lo scrolling involontario */
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Colore di sfondo nero per evitare bordi bianchi */
  background-color: #000000;
  /* Comportamento di touch migliorato */
  touch-action: none; /* Disabilita pan/zoom di default */
  -webkit-touch-callout: none; /* Disabilita pop-up di selezione */
  -webkit-user-select: none; /* Disabilita selezione testo */
  user-select: none; /* Disabilita selezione testo, multipiattaforma */
  -webkit-tap-highlight-color: transparent; /* Rimuove highlight sul tap */
}

/* Fissa header e footer tenendo conto delle aree sicure */
body.twa-mode header,
body.twa-mode .app-header {
  padding-top: var(--safe-area-inset-top);
  padding-top: var(--status-bar-height);
  background-color: #000000;
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto;
}

body.twa-mode footer,
body.twa-mode .app-footer {
  padding-bottom: var(--safe-area-inset-bottom);
  background-color: #000000;
  position: sticky;
  bottom: 0;
  z-index: 100;
  height: auto;
}

/* Nasconde elementi browser/UI quando in modalità app */
body.twa-mode .browser-only,
body.twa-mode [data-browser-only="true"] {
  display: none !important;
}

/* Supporto per gesti edge-to-edge e notch */
body.twa-mode .edge-to-edge {
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  width: 100vw;
  overflow-x: hidden;
}

/* Adatta scrolling alla modalità TWA */
body.twa-mode {
  /* Impedisce il rimbalzo dell'overflow su iOS e Android */
  overscroll-behavior: none;
  /* Previene doppio tap per zoom */
  touch-action: manipulation;
}

/* Impedisce interazioni indesiderate con elementi UI del browser */
body.twa-mode * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* Permette swipe/scroll ma non zoom */
}

/* Layout principale contenuto app */
body.twa-mode #root {
  height: 100vh; /* Usa l'altezza dello viewport */
  height: calc(var(--vh, 1vh) * 100); /* Variabile CSS dinamica per altezza corretta */
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Permetti lo scrolling solo nelle aree di contenuto, non nel layout principale */
body.twa-mode .scrollable-area,
body.twa-mode .chat-messages,
body.twa-mode .message-list,
body.twa-mode .overflow-y-auto,
body.twa-mode [data-scrollable="true"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important; /* Permette solo scrolling verticale */
}

/* Stile WhatsApp-like per sfocare e fissare la barra superiore */
body.twa-mode .app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Stile WhatsApp-like per il footer (input) */
body.twa-mode .app-footer,
body.twa-mode .message-input {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background-color: rgba(255,255,255,0.95);
}

/* Stile per contenitore principale dei messaggi (prende tutto lo spazio disponibile) */
body.twa-mode .message-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Impedisce aggiustamenti indesiderati quando appare la tastiera */
@media screen and (max-height: 500px) {
  body.twa-mode {
    height: 100%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
  }
  
  body.twa-mode .app-footer,
  body.twa-mode .message-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* Supporto per notch e altre aree specifiche del dispositivo */
@supports(padding: max(0px)) {
  body.twa-mode {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top: 0;
    padding-bottom: 0;
  }
  
  body.twa-mode .app-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Ottimizzazioni specifiche per dispositivi Xiaomi */
[data-xiaomi-optimized="true"] {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.xiaomi-mobile-mode {
  /* Forza app mode su Xiaomi */
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  
  /* Nasconde elementi browser */
  overflow: hidden !important;
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

.xiaomi-mobile-mode #root {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ottimizzazioni specifiche per Samsung Galaxy - SCROLL FIXED */
.samsung-mobile-mode {
  /* One UI compatibility */
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  
  /* Edge Panel compatibility */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  
  /* Samsung Internet - scroll abilitato */
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  position: relative !important;
}

.samsung-mobile-mode #root {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Chat e Privacy Inspector scrollabili su Samsung */
.samsung-mobile-mode [class*="chat"],
.samsung-mobile-mode [class*="Chat"],
.samsung-mobile-mode [class*="privacy"],
.samsung-mobile-mode [class*="Privacy"],
.samsung-mobile-mode [class*="inspector"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  height: auto !important;
  max-height: calc(100vh - 100px) !important;
}

/* Samsung Internet Browser specific fixes - SCROLL ENABLED */
@media screen and (-webkit-device-pixel-ratio: 2.625), /* Galaxy S series */
       screen and (-webkit-device-pixel-ratio: 3), /* Galaxy Note series */
       screen and (-webkit-device-pixel-ratio: 4) /* Galaxy Ultra series */ {
  .samsung-mobile-mode {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
}

/* One UI 6.0+ specific optimizations */
.one-ui-mode {
  /* Dynamic Island style for Samsung */
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  
  /* Edge lighting disabled zones */
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Samsung Galaxy Fold compatibility */
@media screen and (min-width: 344px) and (max-width: 768px) and (orientation: portrait) {
  .samsung-mobile-mode {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
}

/* Samsung Edge Panel safe areas */
.samsung-edge-fix {
  margin-left: env(safe-area-inset-left, 0px) !important;
  margin-right: env(safe-area-inset-right, 0px) !important;
}

/* Ottimizzazioni specifiche per iOS */
.ios-optimized {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ios-optimized #root {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Safe area support per notch iOS */
.ios-safe-area {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* iPhone specifico */
.iphone-mode {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* iPad specifico */
.ipad-mode {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* Safari browser mode nasconde barra indirizzi */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .ios-optimized {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
}

/* Standalone PWA mode iOS */
@media (display-mode: standalone) {
  .ios-optimized {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
}

/* FULLSCREEN CHE PERMETTE TASTIERA MOBILE */
@media screen and (max-width: 768px) {
  html, body {
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
    /* NON position: fixed per permettere tastiera */
  }
  
  /* Container principale che si adatta */
  #root {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100vw !important;
    position: relative;
    /* Permette scroll per tastiera */
  }
  
  /* Nasconde barra URL su tutti i browser mobile */
  html {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
  }
  
  /* Supporto safe area per notch */
  body {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* Landscape mode fullscreen */
@media screen and (max-width: 768px) and (orientation: landscape) {
  html, body, #root {
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
  }
}

/* Script dinamico imposta questa variabile per evitare problemi con vh su mobile */
:root {
  --vh: 1vh;
}