/* ========================================
   FLEETZ - OPPO/ColorOS COMPATIBILITY FIX
   ======================================== */

/* ===== OPPO/ColorOS SPECIFICO ===== */
.brand-oppo,
.os-coloros,
body.oppo-device {
  /* Force hardware acceleration */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  
  /* Fix rendering ColorOS */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeSpeed !important;
}

/* ===== FIX CLICK/TOUCH OPPO ===== */
.brand-oppo .clickable,
.brand-oppo .button,
.brand-oppo .message-bubble,
.brand-oppo .chat-item {
  /* Fix touch responsiveness su Oppo */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  
  /* Force click area */
  position: relative !important;
  z-index: 1 !important;
  
  /* Enhanced touch target */
  min-height: 44px !important;
  min-width: 44px !important;
  
  /* Cursor pointer force */
  cursor: pointer !important;
  
  /* Touch action specifico ColorOS */
  touch-action: manipulation !important;
}

/* ===== INPUT FIX OPPO ===== */
.brand-oppo input[type="text"],
.brand-oppo input[type="password"],
.brand-oppo input[type="email"],
.brand-oppo textarea {
  /* Fix tastiera ColorOS */
  -webkit-appearance: none !important;
  appearance: none !important;
  
  /* Force focus */
  outline: 2px solid #22c55e !important;
  outline-offset: 2px !important;
  
  /* Dimensioni specifiche ColorOS */
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  
  /* Background specifico */
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #22c55e !important;
  border-radius: 8px !important;
  
  /* Transform per rendering */
  transform: translateZ(0) !important;
  will-change: transform !important;
}

.brand-oppo input:focus,
.brand-oppo textarea:focus {
  /* Focus enhanced per ColorOS */
  background-color: #ffffff !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
  transform: scale(1.02) !important;
}

/* ===== CHAT CONTAINER OPPO ===== */
.brand-oppo .chat-container,
.brand-oppo .chat-messages,
.brand-oppo .message-list {
  /* Fix scroll ColorOS */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  
  /* Force layer ColorOS */
  will-change: scroll-position, transform !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  
  /* Isolation rendering */
  isolation: isolate !important;
  contain: layout style paint !important;
  
  /* Enhanced responsiveness */
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

/* ===== MESSAGE BUBBLES OPPO ===== */
.brand-oppo .message-bubble {
  /* Fix rendering messages */
  display: block !important;
  position: relative !important;
  
  /* Force visibility */
  opacity: 1 !important;
  visibility: visible !important;
  
  /* Enhanced click area */
  padding: 12px 16px !important;
  margin: 4px 8px !important;
  
  /* Force compositing */
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  
  /* Background fix ColorOS */
  background-color: rgba(34, 197, 94, 0.9) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ===== BUTTONS OPPO ===== */
.brand-oppo .btn,
.brand-oppo .button,
.brand-oppo [role="button"] {
  /* Fix button responsiveness */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Enhanced touch */
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px 20px !important;
  
  /* Visual feedback ColorOS */
  background-color: #22c55e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  
  /* Force interaction */
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
  
  /* Transform optimization */
  transform: translateZ(0) !important;
  transition: all 0.2s ease !important;
}

.brand-oppo .btn:active,
.brand-oppo .button:active {
  /* Active feedback enhanced */
  transform: scale(0.95) translateZ(0) !important;
  background-color: #16a34a !important;
}

/* ===== NAVIGATION OPPO ===== */
.brand-oppo .nav,
.brand-oppo .navigation,
.brand-oppo .menu {
  /* Fix navigation ColorOS */
  position: relative !important;
  z-index: 100 !important;
  
  /* Force rendering */
  transform: translateZ(0) !important;
  will-change: transform !important;
  
  /* Enhanced visibility */
  background-color: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: none !important; /* Rimuove blur problematico */
}

/* ===== SCROLL FIX OPPO ===== */
.brand-oppo .scrollable::-webkit-scrollbar {
  width: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.brand-oppo .scrollable::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.6) !important;
  border-radius: 3px !important;
}

/* ===== LAYOUT FIX OPPO ===== */
.brand-oppo .app-container,
.brand-oppo #root {
  /* Fix layout ColorOS */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  position: relative !important;
  
  /* Force GPU */
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  
  /* Overflow handling */
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ===== PERFORMANCE OPPO ===== */
.brand-oppo * {
  /* Riduce complessità rendering */
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.brand-oppo .performance-critical {
  /* Elementi critici performance */
  will-change: auto !important;
  contain: strict !important;
  content-visibility: auto !important;
}

/* ===== ANIMATIONS DISABLE OPPO ===== */
.brand-oppo.low-performance * {
  /* Disabilita animazioni pesanti */
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ===== WEBKIT SPECIFIC OPPO ===== */
@supports (-webkit-appearance: none) {
  .brand-oppo {
    -webkit-font-feature-settings: "kern" 1 !important;
    -webkit-font-kerning: auto !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* ===== FORCE REPAINT OPPO ===== */
.brand-oppo .force-repaint {
  /* Fix rendering glitches */
  transform: translateZ(0) !important;
  opacity: 0.99 !important;
  backface-visibility: hidden !important;
}

/* ===== MEDIA QUERIES OPPO ===== */

/* Oppo Find series */
@media screen and (device-width: 412px) and (device-height: 869px) {
  .brand-oppo .chat-messages {
    height: calc(100vh - 120px) !important;
  }
}

/* Oppo Reno series */  
@media screen and (device-width: 393px) and (device-height: 851px) {
  .brand-oppo .message-input {
    font-size: 16px !important;
    padding: 14px !important;
  }
}

/* ===== DEBUG OPPO ===== */
.brand-oppo.debug::before {
  content: "OPPO ColorOS Mode Active";
  position: fixed;
  top: 0;
  right: 0;
  background: #ff6b35;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 99999;
  display: var(--debug-oppo, none);
}