/* ===================================================================
   TABLET.CSS - Layout Híbrido para Tablets WiniVerse Chat
   ================================================================
   
   Descrição:
   - Layout tablet portrait/landscape (768px - 1023px)
   - Sidebar esquerda opcional
   - Chat centralizado
   - Input expandido
   - Melhor aproveitamento do espaço
   
   Carregado apenas em: min-width: 768px AND max-width: 1023px
   
   Versão: 1.0
   Data: 2025-01-23
   =================================================================== */

/* ===================================================================
   1. VARIÁVEIS TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  :root {
    /* === SPACING TABLET === */
    --tablet-spacing-xs: 6px;
    --tablet-spacing-sm: 12px;
    --tablet-spacing-md: 16px;
    --tablet-spacing-lg: 20px;
    --tablet-spacing-xl: 24px;
    --tablet-spacing-xxl: 32px;
    
    /* === TOUCH TARGETS TABLET === */
    --tablet-touch-min: 44px;
    --tablet-touch-comfortable: 48px;
    
    /* === LAYOUT TABLET === */
    --tablet-sidebar-width: 280px;
    --tablet-header-height: 64px;
    --tablet-input-height: auto;
    --tablet-input-min-height: 60px;
    
    /* === TIPOGRAFIA TABLET === */
    --tablet-font-xs: 12px;
    --tablet-font-sm: 14px;
    --tablet-font-base: 16px;
    --tablet-font-lg: 18px;
    --tablet-font-xl: 22px;
    --tablet-font-xxl: 28px;
  }
}

/* ===================================================================
   2. CONTAINER PRINCIPAL TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === WINIVERSE CONTAINER === */
  .winiverse-container {
    /* Layout híbrido: sidebar opcional + chat */
    display: grid;
    grid-template-columns: var(--tablet-sidebar-width) 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  /* === SIDEBAR ESQUERDA === */
  .sidebar-history {
    /* Sidebar visível mas collapsable */
    display: flex;
    flex-direction: column;
    width: var(--tablet-sidebar-width);
    height: 100%; /* ✅ Ocupar toda altura */
    justify-content: space-between; /* ✅ Distribuir verticalmente */
    
    background: var(--mobile-bg-secondary);
    border-right: 1px solid rgba(0, 255, 255, 0.2);
    
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* Transition para collapse */
    transition: transform var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  /* ✅ Footer fixo no final */
  .sidebar-history .sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
  }
  
  /* Sidebar collapsed */
  .winiverse-container.sidebar-left-collapsed .sidebar-history {
    transform: translateX(-100%);
  }
  
  .winiverse-container.sidebar-left-collapsed {
    grid-template-columns: 0 1fr;
  }
  
  /* === SIDEBAR DIREITA === */
  .sidebar-info {
    /* Sidebar direita como modal/drawer em tablet */
    display: none;
  }
  
  /* === CHAT MAIN === */
  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

/* ===================================================================
   3. ÁREA DE MENSAGENS TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === CHAT MESSAGES === */
  .chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    /* Centralizar e limitar largura */
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    
    padding: 2rem 1.5rem; /* ✅ Ajuste de padding */
    padding-bottom: var(--tablet-spacing-xxl);
    
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* === MENSAGENS === */
  .message {
    max-width: 90%; /* ✅ Aumentar de 85% para melhor uso do espaço */
  }
  
  .message-container {
    margin-bottom: var(--tablet-spacing-lg);
    padding: var(--tablet-spacing-md);
    border-radius: 16px;
  }
  
  .message-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  
  .message-content {
    font-size: var(--tablet-font-base);
    line-height: var(--mobile-line-height-relaxed);
  }
}

/* ===================================================================
   4. INPUT CONTAINER TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === CHAT INPUT CONTAINER === */
  .chat-input-container {
    position: fixed;
    bottom: 0;
    left: var(--tablet-sidebar-width);
    right: 0;
    z-index: var(--z-mobile-input);
    
    /* Ajustar quando sidebar collapsed */
    transition: left var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .winiverse-container.sidebar-left-collapsed .chat-input-container {
    left: 0;
  }
  
  /* Centralizar input */
  .chat-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .chat-input-container > * {
    max-width: 768px;
    width: 100%;
  }
  
  /* === INPUT WRAPPER === */
  .input-wrapper {
    gap: var(--tablet-spacing-md);
  }
  
  /* === TEXTAREA === */
  #chat-input {
    min-height: var(--tablet-touch-comfortable);
    max-height: 150px;
    font-size: var(--tablet-font-base);
    padding: var(--tablet-spacing-md) var(--tablet-spacing-lg);
  }
  
  /* === BOTÕES === */
  .btn-icon {
    width: var(--tablet-touch-comfortable);
    height: var(--tablet-touch-comfortable);
    min-width: var(--tablet-touch-comfortable);
    min-height: var(--tablet-touch-comfortable);
  }
}

/* ===================================================================
   5. SIDEBAR HISTORY (TABLET)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === SIDEBAR HEADER === */
  .sidebar-header {
    padding: var(--tablet-spacing-lg);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  }
  
  .sidebar-title h2 {
    font-size: var(--tablet-font-lg);
  }
  
  /* === CONVERSATION LIST === */
  .conversation-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--tablet-spacing-md);
  }
  
  .conversation-item {
    padding: var(--tablet-spacing-md);
    margin-bottom: var(--tablet-spacing-sm);
    border-radius: 12px;
    
    cursor: pointer;
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .conversation-item:hover {
    background: rgba(0, 255, 255, 0.05);
  }
  
  .conversation-item:active {
    background: rgba(0, 255, 255, 0.1);
    transform: scale(0.98);
  }
  
  /* === SIDEBAR FOOTER === */
  .sidebar-footer {
    padding: var(--tablet-spacing-md);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
  }
  
  .btn-toggle-sidebar {
    width: var(--tablet-touch-comfortable);
    height: var(--tablet-touch-comfortable);
    border-radius: 50%;
  }
}

/* ===================================================================
   6. MOBILE HEADER (OCULTO EM TABLET)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* Header mobile não necessário em tablet */
  .mobile-header {
    display: none !important;
  }
}

/* ===================================================================
   7. DRAWER ADAPTADO PARA TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === MOBILE DRAWER === */
  .mobile-drawer {
    /* Drawer pode ser usado para opções adicionais */
    /* Mantém funcionalidade mas com ajustes */
  }
  
  .drawer-content {
    width: 320px;
    max-width: 40vw;
  }
}

/* ===================================================================
   8. BOTTOM SHEET ADAPTADO
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === BOTTOM SHEET === */
  .bottom-sheet-content {
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
  }
}

/* ===================================================================
   9. CHARACTER OVERLAY (TABLET)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === CHARACTER OVERLAY === */
  .character-overlay {
    /* Modal com largura limitada */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tablet-spacing-xl);
  }
  
  .character-overlay.visible {
    display: flex;
  }
  
  .overlay-content {
    max-width: 600px;
    width: 100%;
    background: var(--mobile-bg-primary);
    border-radius: 24px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}

/* ===================================================================
   10. MODO APRESENTADOR TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* === PROJECTION SCREEN === */
  .projection-screen {
    max-width: 768px;
    margin: 0 auto;
    padding: var(--tablet-spacing-xl);
  }
  
  /* === PRESENTER AVATAR PANEL === */
  .presenter-avatar-panel {
    bottom: calc(var(--tablet-input-height) + var(--tablet-spacing-xl));
    right: var(--tablet-spacing-xl);
    padding: var(--tablet-spacing-lg);
  }
  
  .presenter-avatar-container {
    width: 100px;
    height: 100px;
  }
  
  .mic-button {
    width: var(--tablet-touch-large);
    height: var(--tablet-touch-large);
  }
}

/* ===================================================================
   11. LANDSCAPE SPECIFIC (TABLET)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  
  /* Otimizações para tablet em landscape */
  
  /* Sidebar pode ser permanente */
  .sidebar-history {
    display: flex;
  }
  
  /* Chat mais largo */
  .chat-messages {
    max-width: 900px;
  }
  
  /* ✅ Mensagens com largura otimizada para landscape */
  .message {
    max-width: 85%;
  }
  
  /* Input também mais largo */
  .chat-input-container > * {
    max-width: 900px;
  }
}

/* ===================================================================
   12. PORTRAIT SPECIFIC (TABLET)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  
  /* Otimizações para tablet em portrait */
  
  /* Sidebar pode iniciar collapsed */
  .winiverse-container {
    /* Pode ajustar grid-template-columns dinamicamente via JS */
  }
  
  /* Chat mais estreito */
  .chat-messages {
    max-width: 600px;
  }
  
  .chat-input-container > * {
    max-width: 600px;
  }
}

/* ===================================================================
   13. HOVER EFFECTS (TABLET COM MOUSE)
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) and (hover: hover) {
  
  /* Hover effects para tablets com mouse/trackpad */
  
  button:hover,
  .btn:hover,
  .btn-icon:hover {
    background: rgba(0, 255, 255, 0.1);
  }
  
  .drawer-nav-item:hover,
  .bottom-sheet-item:hover {
    background: rgba(0, 255, 255, 0.08);
  }
  
  .message-container:hover {
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.1);
  }
}

/* ===================================================================
   14. TOAST POSICIONAMENTO TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  .mobile-toast-container {
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
  }
}

/* ===================================================================
   15. PERFORMANCE OPTIMIZATIONS TABLET
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  
  /* Tablets mais potentes podem ter mais glow */
  .mobile-glow-disabled {
    box-shadow: var(--mobile-glow-subtle) !important;
  }
  
  /* Transições um pouco mais lentas para tablets */
  * {
    transition-duration: 200ms;
  }
}

/* ===================================================================
   FIM DO TABLET.CSS
   ================================================================ */