/* ===================================================================
   MOBILE-LAYOUT.CSS - Layout Mobile-First para WiniVerse Chat
   ================================================================
   
   Descrição:
   - Layout mobile portrait (320px - 767px)
   - Foco em chat (mensagens + input)
   - Sidebars transformadas em drawer/modal
   - Input fixo no bottom (thumb zone)
   - Header minimalista
   
   Carregado apenas em: max-width: 767px (mobile)
   
   Versão: 1.0
   Data: 2025-01-23
   =================================================================== */

/* ===================================================================
   1. CONTAINER PRINCIPAL MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === WINIVERSE CONTAINER === */
  .winiverse-container {
    /* Remover layout 3-colunas desktop */
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    
    /* 100% viewport */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    
    /* Sem scroll no container */
    overflow: hidden;
  }
  
  /* === OCULTAR SIDEBARS DESKTOP === */
  .sidebar-history,
  .sidebar-info {
    /* Sidebars desktop viram drawer/modal em mobile */
    display: none !important;
  }
  
  /* === CHAT MAIN === */
  .chat-main {
    /* Ocupar toda viewport */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    
    /* Garantir ordem correta */
    order: 1;
  }
}

/* ===================================================================
   2. ÁREA DE MENSAGENS
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === CHAT MESSAGES CONTAINER === */
  .chat-messages {
    /* Área scrollável de mensagens */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    
    /* ✅ CORREÇÃO: Padding-top maior para compensar header mobile fixo */
    /* Header height (56px) + safe area top + spacing adicional */
    padding-top: calc(var(--mobile-header-height) + var(--mobile-safe-top, 0px) + var(--mobile-spacing-lg));
    
    /* Padding lateral */
    padding-right: var(--mobile-spacing-lg);
    padding-left: var(--mobile-spacing-lg);
    
    /* ✅ CORREÇÃO CRÍTICA: Padding-bottom suficiente para evitar sobreposição do input fixo */
    /* Altura do input container + safe area bottom + margem de segurança */
    padding-bottom: calc(
      var(--mobile-input-container-min-height, 100px) + 
      env(safe-area-inset-bottom, 0px) + 
      var(--mobile-spacing-lg)
    );
    
    /* Scroll suave */
    scroll-behavior: smooth;
    
    /* Otimização */
    will-change: scroll-position;
  }
  
  /* Hide scrollbar mas manter funcionalidade */
  .chat-messages::-webkit-scrollbar {
    display: none;
  }
  
  .chat-messages {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  /* === MENSAGENS INDIVIDUAIS === */
  .message-container {
    /* Espaçamento entre mensagens */
    margin-bottom: var(--mobile-spacing-lg);
    
    /* Largura máxima para leitura */
    max-width: 100%;
    
    /* Densidade adequada mobile */
    padding: var(--mobile-spacing-md);
    border-radius: 12px;
    
    /* Performance */
    will-change: transform;
  }
  
  /* Mensagem do usuário */
  .message-container.user-message {
    background: rgba(0, 255, 255, 0.1);
    margin-left: var(--mobile-spacing-xl);
    align-self: flex-end;
  }
  
  /* Mensagem do assistant */
  .message-container.assistant-message {
    background: var(--mobile-bg-secondary);
    margin-right: var(--mobile-spacing-xl);
    align-self: flex-start;
  }
  
  /* === AVATAR MOBILE === */
  .message-avatar {
    /* Avatar menor em mobile */
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    margin-right: var(--mobile-spacing-sm);
  }
  
  /* === TEXTO DA MENSAGEM === */
  .message-content {
    font-size: var(--mobile-font-base);
    line-height: var(--mobile-line-height-relaxed);
    color: var(--mobile-text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* === METADATA === */
  .message-metadata {
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-xs);
    margin-top: var(--mobile-spacing-xs);
    font-size: var(--mobile-font-xs);
    color: var(--mobile-text-secondary);
    opacity: 0.7;
  }
  
  /* === TYPING INDICATOR === */
  .typing-indicator {
    padding: var(--mobile-spacing-md);
    margin-bottom: var(--mobile-spacing-lg);
  }
  
  .typing-dots {
    display: flex;
    gap: var(--mobile-spacing-xs);
  }
  
  .typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mobile-accent);
    animation: typing-bounce 1.4s infinite ease-in-out;
  }
  
  .typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  .typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  @keyframes typing-bounce {
    0%, 80%, 100% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

/* ===================================================================
   3. INPUT CONTAINER (THUMB ZONE)
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === CHAT INPUT CONTAINER === */
  .chat-input-container {
    /* Fixed no bottom (thumb zone) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-mobile-input);
    
    /* Safe area bottom (iPhone) */
    padding-bottom: calc(var(--mobile-safe-bottom) + var(--mobile-spacing-sm));
    
    /* Layout */
    display: flex;
    flex-direction: column;
    width: 100%;
    
    /* Background com blur */
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Border top sutil */
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    
    /* Padding interno */
    padding-top: var(--mobile-spacing-md);
    padding-left: var(--mobile-spacing-md);
    padding-right: var(--mobile-spacing-md);
    
    /* Shadow sutil */
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  }
  
  /* === MODE TOGGLE BUTTON === */
  .btn-mode-toggle {
    /* ✅ Botão inline, não flutuante */
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    flex-shrink: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    
    cursor: pointer;
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .btn-mode-toggle:active {
    transform: scale(0.95);
    background: rgba(0, 255, 255, 0.2);
  }
  
  .mode-icon {
    font-size: 20px;
  }
  
  /* === INPUT WRAPPER === */
  .input-wrapper {
    /* ✅ Componente unificado estilizado */
    display: flex;
    align-items: flex-end;
    gap: var(--mobile-spacing-sm);
    width: 100%;
    
    /* Background unificado */
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 24px;
    padding: 8px 12px;
    
    /* ✅ REMOVER margin-left e width calculados */
  }
  
  /* === TEXTAREA === */
  #chat-input {
    flex: 1;
    min-height: var(--mobile-touch-min);
    max-height: 120px;
    
    padding: var(--mobile-spacing-md);
    
    /* ✅ Sem bordas próprias */
    background: transparent;
    border: none;
    color: var(--mobile-text-primary);
    
    font-size: var(--mobile-font-base);
    line-height: var(--mobile-line-height-normal);
    
    resize: none;
    overflow-y: auto;
  }
  
  #chat-input:focus {
    outline: none;
    /* Foco no wrapper, não no textarea */
  }
  
  /* Wrapper focus quando textarea focused */
  .input-wrapper:focus-within {
    border-color: var(--mobile-accent);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
  }
  
  #chat-input::placeholder {
    color: var(--mobile-text-secondary);
    opacity: 0.6;
  }
  
  /* === BOTÕES DE AÇÃO === */
  .btn-icon {
    /* Botões voice/send/stop */
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    min-width: var(--mobile-touch-min);
    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);
  }
  
  .btn-icon:active {
    transform: scale(0.9);
    background: rgba(0, 255, 255, 0.1);
  }
  
  .btn-icon i {
    font-size: 20px;
  }
  
  /* Voice mode button */
  #voice-mode-btn {
    order: -1; /* Antes do textarea */
  }
  
  /* Send button */
  #send-btn {
    background: var(--mobile-accent);
    color: var(--mobile-bg-primary);
  }
  
  #send-btn:active {
    transform: scale(0.9);
    box-shadow: var(--mobile-glow-normal);
  }
  
  /* Stop button */
  #stop-btn {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff4444;
  }
  
  /* === INPUT INFO === */
  .input-info {
    /* Contador de caracteres */
    display: flex;
    justify-content: flex-end;
    padding: var(--mobile-spacing-xs) var(--mobile-spacing-md);
    font-size: var(--mobile-font-xs);
    color: var(--mobile-text-secondary);
    opacity: 0.6;
  }
  
  .char-count {
    font-variant-numeric: tabular-nums;
  }
}

/* ===================================================================
   4. MODO APRESENTADOR MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === PROJECTION SCREEN === */
  .projection-screen {
    /* Tela de projeção ocupa tudo em mobile */
    flex: 1;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--mobile-spacing-lg);
  }
  
  /* === PRESENTER AVATAR PANEL === */
  .presenter-avatar-panel {
    /* Painel do avatar em modo apresentador */
    position: fixed;
    /* ✅ CORREÇÃO: Usar altura mínima estimada + safe area + margem de segurança */
    /* Nota: bottom/right serão sobrescritos pelo PresenterPanelDragManager quando arrastável */
    bottom: calc(var(--mobile-input-container-min-height, 100px) + var(--mobile-spacing-lg) + env(safe-area-inset-bottom, 0px));
    right: var(--mobile-spacing-lg);
    
    /* ✅ CORREÇÃO: Considerar safe area right (iPhone notch) */
    margin-right: env(safe-area-inset-right, 0px);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mobile-spacing-sm);
    
    padding: var(--mobile-spacing-md);
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    
    /* ✅ CORREÇÃO: Z-index acima do input mas abaixo do header */
    z-index: calc(var(--z-mobile-input) + 10); /* 810 */
    
    /* ✅ CORREÇÃO: Garantir que não seja cortado pela viewport */
    max-height: calc(100vh - var(--mobile-header-height) - var(--mobile-input-container-min-height, 100px) - var(--mobile-spacing-lg) * 2);
    overflow: visible;
    
    /* ✅ NOVO: Propriedades para arraste (será aplicado apenas quando .draggable) */
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* ✅ NOVO: Estado arrastável - indicador visual discreto */
  .presenter-avatar-panel.draggable {
    cursor: grab;
    /* Adicionar indicador de grip no topo (opcional, apenas visual) */
  }
  
  .presenter-avatar-panel.draggable:active {
    cursor: grabbing;
  }
  
  /* ✅ NOVO: Estado durante arraste - feedback visual */
  .presenter-avatar-panel.dragging {
    transition: none; /* Sem transição durante arraste para movimento suave */
    opacity: 0.9;
    transform: scale(1.05); /* Feedback visual de que está sendo arrastado */
    box-shadow: 0 8px 32px rgba(132, 118, 255, 0.6);
    cursor: grabbing;
    /* Prevenir seleção de texto durante arraste */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    touch-action: none; /* Prevenir gestos nativos */
  }
  
  /* ✅ NOVO: Área de grip visual (opcional - aparece apenas em hover/touch) */
  .presenter-avatar-panel.draggable::before {
    content: '⋮⋮';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(132, 118, 255, 0.4);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }
  
  /* Mostrar grip de forma mais visível durante interação */
  .presenter-avatar-panel.draggable:active::before,
  .presenter-avatar-panel.dragging::before {
    opacity: 1;
    color: rgba(132, 118, 255, 0.8);
  }
  
  .presenter-avatar-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mobile-accent);
    
    /* ✅ CORREÇÃO: Garantir que o container não seja cortado */
    flex-shrink: 0;
    position: relative;
  }
  
  .presenter-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* ✅ CORREÇÃO: Garantir que a imagem preencha completamente o container */
    display: block;
  }
  
  #presenter-avatar-name {
    font-size: var(--mobile-font-sm);
    color: var(--mobile-text-primary);
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    /* ✅ CORREÇÃO: Garantir que o nome não corte o painel */
    flex-shrink: 0;
    line-height: 1.2;
    margin: 0;
  }
  
  /* === MIC BUTTON === */
  .mic-button {
    width: var(--mobile-touch-large);
    height: var(--mobile-touch-large);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: var(--mobile-accent);
    color: var(--mobile-bg-primary);
    border: none;
    
    /* ✅ CORREÇÃO: Garantir que o botão não seja cortado */
    flex-shrink: 0;
    
    cursor: pointer;
    transition: all var(--mobile-transition-fast) var(--mobile-easing);
  }
  
  .mic-button:active {
    transform: scale(0.95);
    box-shadow: var(--mobile-glow-strong);
  }
  
  .mic-button i {
    font-size: 24px;
  }
}

/* ===================================================================
   5. CHARACTER OVERLAY (TIMELINE MOBILE)
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === CHARACTER OVERLAY === */
  .character-overlay {
    /* Modal fullscreen em mobile */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-bottom-sheet);
    
    /* Hidden por padrão */
    display: none;
    opacity: 0;
    pointer-events: none;
    
    /* Background com blur */
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* Transition */
    transition: opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
  
  .character-overlay.visible {
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
  }
  
  /* === OVERLAY HEADER === */
  .overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mobile-spacing-lg);
    padding-top: calc(var(--mobile-safe-top) + var(--mobile-spacing-lg));
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  }
  
  .overlay-header h3 {
    font-size: var(--mobile-font-lg);
    color: var(--mobile-text-primary);
    margin: 0;
  }
  
  #close-overlay-btn {
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: transparent;
    border: none;
    color: var(--mobile-text-secondary);
    
    cursor: pointer;
  }
  
  #close-overlay-btn i {
    font-size: 24px;
  }
  
  /* === OVERLAY CONTENT === */
  .overlay-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--mobile-spacing-lg);
    padding-bottom: calc(var(--mobile-safe-bottom) + var(--mobile-spacing-lg));
  }
}

/* ===================================================================
   6. ESTADOS E TRANSIÇÕES
   =================================================================== */

@media screen and (max-width: 767px) {
  
  /* === PRESENTER MODE ATIVO === */
  .winiverse-container.presenter-mode .chat-messages {
    display: none;
  }
  
  .winiverse-container.presenter-mode .projection-screen {
    display: flex;
  }
  
  .winiverse-container.presenter-mode .presenter-avatar-panel {
    display: flex;
  }
  
  /* ✅ CORREÇÃO: Garantir que chat-main não corte o painel fixed */
  .winiverse-container.presenter-mode .chat-main {
    overflow: visible; /* Permitir que elementos fixed sejam visíveis */
  }
  
  /* ✅ CORREÇÃO: Garantir que winiverse-container não corte elementos fixed */
  .winiverse-container.presenter-mode {
    overflow: visible; /* Permitir que elementos fixed sejam visíveis */
  }
  
  /* === SIDEBAR COLLAPSED (não usado em mobile, mas manter compatibilidade) === */
  .winiverse-container.sidebar-left-collapsed .sidebar-history,
  .winiverse-container.sidebar-right-collapsed .sidebar-info {
    display: none !important;
  }
  
  /* === LOADING STATE === */
  .winiverse-container[data-viewport="loading"] {
    opacity: 0;
  }
  
  .winiverse-container[data-viewport="mobile"] {
    opacity: 1;
    transition: opacity var(--mobile-transition-normal) var(--mobile-easing);
  }
}

/* ===================================================================
   7. LANDSCAPE MOBILE (480px - 767px)
   =================================================================== */

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
  
  /* Ajustes para landscape */
  .chat-messages {
    /* ✅ CORREÇÃO: Manter padding lateral e top definidos anteriormente, apenas ajustar padding-bottom */
    padding-top: calc(var(--mobile-header-height) + var(--mobile-safe-top, 0px) + var(--mobile-spacing-lg));
    padding-right: var(--mobile-spacing-lg);
    padding-left: var(--mobile-spacing-lg);
    /* ✅ CORREÇÃO CRÍTICA: Padding-bottom suficiente também em landscape */
    padding-bottom: calc(
      var(--mobile-input-container-min-height, 100px) + 
      env(safe-area-inset-bottom, 0px) + 
      var(--mobile-spacing-lg)
    );
  }
  
  .message-container {
    margin-bottom: var(--mobile-spacing-md);
    padding: var(--mobile-spacing-sm);
  }
  
  .chat-input-container {
    padding-top: var(--mobile-spacing-sm);
  }
  
  #chat-input {
    max-height: 80px; /* Menor em landscape */
  }
}

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