/* ===================================================================
   MOBILE-COMPONENTS.CSS - Componentes Mobile WiniVerse Chat
   ================================================================
   
   Descrição:
   - Drawer de navegação (menu lateral)
   - Bottom sheet (opções contextuais)
   - Mobile header (flutuante)
   - Touch feedback
   - Toasts e notificações mobile
   
   Carregado apenas em: max-width: 767px (mobile)
   
   Versão: 1.0
   Data: 2025-01-23
   =================================================================== */

/* ===================================================================
   1. MOBILE DRAWER (MENU LATERAL)
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === DRAWER CONTAINER === */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: var(--z-mobile-drawer);
    
    /* Hidden por padrão */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    
    /* Transition */
    transition: visibility 0s linear var(--mobile-transition-normal),
                opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-drawer[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  
  /* === DRAWER OVERLAY === */
  .drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Cursor */
    cursor: pointer;
    
    /* Transition */
    opacity: 0;
    transition: opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-drawer[aria-hidden="false"] .drawer-overlay {
    opacity: 1;
  }
  
  /* === DRAWER CONTENT === */
  .drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    
    /* Style */
    background: var(--mobile-bg-primary);
    border-right: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    
    /* Safe area */
    padding-top: var(--mobile-safe-top);
    padding-bottom: var(--mobile-safe-bottom);
    
    /* Scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* Transform inicial (offscreen) */
    transform: translateX(-100%);
    transition: transform var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-drawer[aria-hidden="false"] .drawer-content {
    transform: translateX(0);
  }
  
  /* === DRAWER HEADER === */
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mobile-spacing-lg);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    
    /* Sticky no topo */
    position: sticky;
    top: 0;
    background: var(--mobile-bg-primary);
    z-index: 1;
  }
  
  .drawer-header h2 {
    font-size: var(--mobile-font-lg);
    font-weight: 600;
    color: var(--mobile-accent);
    margin: 0;
    font-family: 'Orbitron', sans-serif;
  }
  
  .btn-close-drawer {
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--mobile-text-secondary);
    
    cursor: pointer;
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .btn-close-drawer:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.05);
  }
  
  .btn-close-drawer i {
    font-size: 20px;
  }
  
  /* === DRAWER NAV === */
  .drawer-nav {
    padding: var(--mobile-spacing-md);
  }
  
  .drawer-nav-item {
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-md);
    
    width: 100%;
    min-height: var(--mobile-touch-comfortable);
    padding: var(--mobile-spacing-md);
    
    /* Style */
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--mobile-text-primary);
    text-align: left;
    font-size: var(--mobile-font-base);
    
    /* Cursor */
    cursor: pointer;
    
    /* Transition */
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .drawer-nav-item:active {
    background: rgba(0, 255, 255, 0.1);
    transform: scale(0.98);
  }
  
  .drawer-nav-item i {
    width: 24px;
    font-size: 20px;
    color: var(--mobile-accent);
  }
  
  .drawer-nav-item.active {
    background: rgba(0, 255, 255, 0.15);
    border-left: 3px solid var(--mobile-accent);
  }
  
  /* === DRAWER SECTIONS === */
  .drawer-section {
    margin-bottom: var(--mobile-spacing-lg);
  }
  
  .drawer-section-title {
    font-size: var(--mobile-font-sm);
    font-weight: 600;
    color: var(--mobile-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    margin-bottom: var(--mobile-spacing-xs);
  }
  
  /* === DRAWER FOOTER === */
  .drawer-footer {
    padding: var(--mobile-spacing-lg);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    margin-top: auto;
  }
}

/* ===================================================================
   2. BOTTOM SHEET (OPÇÕES CONTEXTUAIS)
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === BOTTOM SHEET CONTAINER === */
  .bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-bottom-sheet);
    
    /* Hidden por padrão */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    
    /* Transition */
    transition: visibility 0s linear var(--mobile-transition-normal),
                opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .bottom-sheet[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  
  /* === BOTTOM SHEET OVERLAY === */
  .bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Cursor */
    cursor: pointer;
    
    /* Transition */
    opacity: 0;
    transition: opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .bottom-sheet[aria-hidden="false"] .bottom-sheet-overlay {
    opacity: 1;
  }
  
  /* === BOTTOM SHEET CONTENT === */
  .bottom-sheet-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Style */
    background: var(--mobile-bg-primary);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
    
    /* Max height */
    max-height: 80vh;
    
    /* Safe area */
    padding-bottom: calc(var(--mobile-safe-bottom) + var(--mobile-spacing-lg));
    
    /* Transform inicial (offscreen) */
    transform: translateY(100%);
    transition: transform var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .bottom-sheet[aria-hidden="false"] .bottom-sheet-content {
    transform: translateY(0);
  }
  
  /* === BOTTOM SHEET HANDLE === */
  .bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: var(--mobile-spacing-md) auto;
    
    /* Visual cue for dragging */
    cursor: grab;
  }
  
  .bottom-sheet-handle:active {
    cursor: grabbing;
  }
  
  /* === BOTTOM SHEET BODY === */
  .bottom-sheet-body {
    padding: 0 var(--mobile-spacing-lg) var(--mobile-spacing-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(80vh - 80px);
  }
  
  /* === BOTTOM SHEET ITEMS === */
  .bottom-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-md);
    
    width: 100%;
    min-height: var(--mobile-touch-large);
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    
    /* Style */
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--mobile-text-primary);
    text-align: left;
    font-size: var(--mobile-font-base);
    
    /* Cursor */
    cursor: pointer;
    
    /* Transition */
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .bottom-sheet-item:active {
    background: rgba(0, 255, 255, 0.1);
    transform: scale(0.98);
  }
  
  .bottom-sheet-item i {
    width: 24px;
    font-size: 20px;
    color: var(--mobile-accent);
  }
  
  .bottom-sheet-item.destructive {
    color: #ff4444;
  }
  
  .bottom-sheet-item.destructive i {
    color: #ff4444;
  }
  
  /* === BOTTOM SHEET DIVIDER === */
  .bottom-sheet-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--mobile-spacing-md) 0;
  }
}

/* ===================================================================
   3. MOBILE HEADER (FLUTUANTE)
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === MOBILE HEADER === */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-mobile-header);
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mobile-spacing-md);
    
    /* Size */
    height: var(--mobile-header-height);
    
    /* Style */
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    
    /* Padding */
    padding: 0 var(--mobile-spacing-md);
    padding-top: var(--mobile-safe-top);
    
    /* Shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    
    /* Transition */
    transform: translateY(-100%);
    transition: transform var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-header.visible {
    transform: translateY(0);
  }
  
  /* === HEADER BUTTONS === */
  .mobile-header-menu,
  .mobile-header-options {
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--mobile-accent);
    
    cursor: pointer;
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .mobile-header-menu:active,
  .mobile-header-options:active {
    transform: scale(0.9);
    background: rgba(0, 255, 255, 0.1);
  }
  
  .mobile-header-menu i,
  .mobile-header-options i {
    font-size: 20px;
  }
  
  /* === HEADER TITLE === */
  .mobile-header-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-sm);
    
    font-size: var(--mobile-font-base);
    font-weight: 600;
    color: var(--mobile-text-primary);
    
    /* Truncate */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .mobile-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--mobile-accent);
    object-fit: cover;
  }
  
  .mobile-header-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  /* ===================================================================
     MOBILE HEADER TOUCH AREA
     Área de toque invisível no topo para reaparecer header
     =================================================================== */
  
  /* === ÁREA DE TOQUE === */
  .mobile-header-touch-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px; /* Altura suficiente para toque fácil */
    
    /* Z-index abaixo do header mas acima do conteúdo */
    z-index: calc(var(--z-mobile-header) - 1); /* 899 */
    
    /* Invisível por padrão */
    background: transparent;
    opacity: 0;
    pointer-events: none;
    
    /* Transição suave */
    transition: opacity var(--mobile-transition-fast) var(--mobile-easing);
    
    /* Cursor pointer para indicar interatividade */
    cursor: pointer;
    
    /* Não interferir com scroll */
    touch-action: none;
  }
  
  /* Área de toque ativa (quando header oculto) */
  .mobile-header-touch-area:active {
    background: rgba(132, 118, 255, 0.1); /* Feedback visual leve */
  }
}

/* ===================================================================
   4. TOUCH FEEDBACK
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === RIPPLE EFFECT === */
  .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.3);
    
    transform: scale(0);
    animation: ripple 600ms ease-out;
    pointer-events: none;
  }
  
  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  /* === TOUCH HIGHLIGHT === */
  .touch-highlight {
    position: relative;
    overflow: hidden;
  }
  
  .touch-highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 255, 255, 0.1);
    border-radius: inherit;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .touch-highlight:active::after {
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* === PRESS SCALE === */
  .touch-press {
    transition: transform var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .touch-press:active {
    transform: scale(0.96);
  }
}

/* ===================================================================
   5. TOASTS E NOTIFICAÇÕES MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === TOAST CONTAINER === */
  .mobile-toast-container {
    position: fixed;
    top: calc(var(--mobile-safe-top) + var(--mobile-spacing-lg));
    left: var(--mobile-spacing-md);
    right: var(--mobile-spacing-md);
    z-index: var(--z-mobile-toast);
    
    display: flex;
    flex-direction: column;
    gap: var(--mobile-spacing-sm);
    pointer-events: none;
  }
  
  /* === TOAST === */
  .mobile-toast {
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(0, 255, 255, 0.2);
    
    color: var(--mobile-text-primary);
    font-size: var(--mobile-font-sm);
    line-height: var(--mobile-line-height-normal);
    
    /* Animation */
    transform: translateY(-100px);
    opacity: 0;
    animation: toast-slide-in var(--mobile-transition-normal) var(--mobile-easing) forwards;
    
    pointer-events: auto;
  }
  
  @keyframes toast-slide-in {
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .mobile-toast.toast-exit {
    animation: toast-slide-out var(--mobile-transition-normal) var(--mobile-easing) forwards;
  }
  
  @keyframes toast-slide-out {
    to {
      transform: translateY(-100px);
      opacity: 0;
    }
  }
  
  /* === TOAST TYPES === */
  .mobile-toast.success {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(0, 255, 0, 0.2);
  }
  
  .mobile-toast.error {
    border-color: rgba(255, 0, 0, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(255, 0, 0, 0.2);
  }
  
  .mobile-toast.warning {
    border-color: rgba(255, 165, 0, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(255, 165, 0, 0.2);
  }
}

/* ===================================================================
   6. LOADING STATES MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === SPINNER === */
  .mobile-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 255, 255, 0.2);
    border-top-color: var(--mobile-accent);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* === SKELETON === */
  .mobile-skeleton {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 25%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  
  /* === PULSE === */
  .mobile-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}

/* ===================================================================
   7. MODAL GENÉRICO MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === MODAL === */
  .mobile-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-bottom-sheet);
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-spacing-lg);
    
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Hidden por padrão */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    
    transition: visibility 0s linear var(--mobile-transition-normal),
                opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-modal.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  
  /* === MODAL CONTENT === */
  .mobile-modal-content {
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    
    background: var(--mobile-bg-primary);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    padding: var(--mobile-spacing-lg);
    
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    transform: scale(0.9);
    transition: transform var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .mobile-modal.visible .mobile-modal-content {
    transform: scale(1);
  }
}

/* ===================================================================
   FIM DO MOBILE-COMPONENTS.CSS
   ================================================================ */