/* ===================================================================
   DESKTOP-ENHANCEMENTS.CSS - Melhorias Desktop WiniVerse Chat
   ================================================================
   
   Descrição:
   - Melhorias para desktop (1024px+)
   - Hover effects ricos
   - Transições suaves
   - Atalhos de teclado visuais
   - Glow effects restaurados
   - Layout 3-colunas preservado
   
   Carregado apenas em: min-width: 1024px
   
   Versão: 1.0
   Data: 2025-01-23
   =================================================================== */

/* ===================================================================
   1. GARANTIR LAYOUT DESKTOP PRESERVADO
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === WINIVERSE CONTAINER === */
  .winiverse-container {
    /* Layout 3-colunas original do desktop */
    /* NÃO modificar - garantir compatibilidade */
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Layout original preservado */
  }
  
  /* === SIDEBARS DESKTOP === */
  .sidebar-history,
  .sidebar-info {
    /* Sidebars desktop visíveis */
    /* NÃO modificar - garantir compatibilidade */
    display: flex;
  }
  
  /* === COMPONENTES MOBILE OCULTOS === */
  .mobile-drawer,
  .mobile-header,
  .bottom-sheet {
    display: none !important;
  }
}

/* ===================================================================
   1.1 LARGURA RESPONSIVA - DESKTOP PADRÃO (1024px - 1439px)
   =================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .message {
    max-width: 95%; /* ✅ Aumentar para melhor aproveitamento do espaço */
  }
  
  /* Padding será controlado pela seção de padding adaptativo */
}

/* ===================================================================
   2. HOVER EFFECTS RICOS
   =================================================================== */

@media screen and (min-width: 1024px) and (hover: hover) {
  
  /* === BOTÕES === */
  button:hover,
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  button:active,
  .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.2);
  }
  
  /* === LINKS === */
  a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-color: var(--accent-primary);
    text-underline-offset: 2px;
  }
  
  /* === MENSAGENS === */
  .message-container:hover {
    transform: translateX(2px);
    box-shadow: -4px 0 0 0 rgba(0, 255, 255, 0.3),
                0 2px 16px rgba(0, 0, 0, 0.2);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* === INPUT FOCUS === */
  #chat-input:hover {
    border-color: rgba(0, 255, 255, 0.4);
  }
  
  #chat-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.15),
                0 0 16px rgba(0, 255, 255, 0.3);
  }
  
  /* === SIDEBAR ITEMS === */
  .conversation-item:hover,
  .drawer-nav-item:hover {
    background: rgba(0, 255, 255, 0.08);
    border-left: 3px solid var(--accent-primary);
    padding-left: 13px; /* Compensar border */
  }
  
  /* === ÍCONES === */
  .btn-icon:hover {
    color: var(--accent-primary);
    background: rgba(0, 255, 255, 0.1);
    transform: scale(1.05);
  }
  
  /* === TOGGLE BUTTONS === */
  .btn-toggle-sidebar:hover,
  .theme-toggle:hover {
    background: rgba(0, 255, 255, 0.15);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
  }
}

/* ===================================================================
   3. GLOW EFFECTS RESTAURADOS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === ACCENT GLOW === */
  .btn-icon:hover,
  #send-btn:hover,
  .mode-switch-btn:hover {
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.5),
                0 0 32px rgba(0, 255, 255, 0.3);
  }
  
  /* === TEXT GLOW === */
  h1, h2, .character-name {
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  }
  
  /* === BORDER GLOW === */
  .chat-input-container,
  .sidebar-history,
  .sidebar-info {
    box-shadow: inset 0 0 16px rgba(0, 255, 255, 0.05);
  }
  
  /* === ACTIVE STATE GLOW === */
  .btn-icon:active,
  #send-btn:active {
    box-shadow: 0 0 24px rgba(0, 255, 255, 0.6),
                0 0 48px rgba(0, 255, 255, 0.4),
                inset 0 0 16px rgba(0, 255, 255, 0.2);
  }
}

/* ===================================================================
   4. ATALHOS DE TECLADO VISUAIS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === KBD TAG === */
  kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  }
  
  /* === KEYBOARD HINTS === */
  .keyboard-hint {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  button:hover .keyboard-hint,
  .btn:hover .keyboard-hint {
    opacity: 0.7;
  }
  
  /* === TOOLTIP COM ATALHO === */
  [data-keyboard-shortcut]::after {
    content: attr(data-keyboard-shortcut);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  [data-keyboard-shortcut]:hover::after {
    opacity: 1;
  }
}

/* ===================================================================
   5. SCROLL BARS ESTILIZADOS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === WEBKIT SCROLLBAR === */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.4);
  }
  
  ::-webkit-scrollbar-thumb:active {
    background: rgba(0, 255, 255, 0.6);
  }
  
  /* === FIREFOX SCROLLBAR === */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.2) rgba(255, 255, 255, 0.02);
  }
}

/* ===================================================================
   6. TRANSIÇÕES SUAVES
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === GLOBAL TRANSITIONS === */
  button,
  a,
  input,
  textarea,
  select {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* === LAYOUT TRANSITIONS === */
  .sidebar-history,
  .sidebar-info,
  .chat-main {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* === MESSAGE TRANSITIONS === */
  .message-container {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* === SMOOTH ENTRANCE === */
  .message-container {
    animation: message-fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes message-fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===================================================================
   7. FOCUS STATES MELHORADOS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === FOCUS VISIBLE === */
  *:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.2);
  }
  
  /* === INPUT FOCUS === */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.15),
                0 0 16px rgba(0, 255, 255, 0.3);
  }
  
  /* === BUTTON FOCUS === */
  button:focus-visible,
  .btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.2),
                0 4px 12px rgba(0, 255, 255, 0.3);
  }
}

/* ===================================================================
   8. ANIMAÇÕES RICAS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === PULSE ANIMATION === */
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 0 16px rgba(0, 255, 255, 0.6),
                  0 0 32px rgba(0, 255, 255, 0.3);
    }
  }
  
  .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  /* === SHIMMER ANIMATION === */
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
  
  .shimmer {
    background: linear-gradient(
      90deg,
      rgba(0, 255, 255, 0) 0%,
      rgba(0, 255, 255, 0.2) 50%,
      rgba(0, 255, 255, 0) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 3s linear infinite;
  }
  
  /* === FLOAT ANIMATION === */
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  
  .float {
    animation: float 3s ease-in-out infinite;
  }
}

/* ===================================================================
   9. TOOLTIPS MELHORADOS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === TOOLTIP BASE === */
  [data-tooltip] {
    position: relative;
  }
  
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    
    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: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(0, 255, 255, 0.2);
    
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
  }
  
  [data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 255, 255, 0.3);
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
  }
  
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    opacity: 1;
  }
  
  [data-tooltip]:hover::before {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ===================================================================
   10. CONTEXT MENU ESTILIZADO
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === CONTEXT MENU === */
  .context-menu {
    position: fixed;
    min-width: 200px;
    padding: 8px;
    
    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 8px 32px rgba(0, 0, 0, 0.6),
                0 0 24px rgba(0, 255, 255, 0.2);
    
    z-index: 9999;
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .context-menu.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  
  .context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    width: 100%;
    
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .context-menu-item:hover {
    background: rgba(0, 255, 255, 0.1);
  }
  
  .context-menu-item i {
    width: 16px;
    font-size: 14px;
    color: var(--accent-primary);
  }
  
  .context-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
  }
}

/* ===================================================================
   11. SELECTION STYLING
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  ::selection {
    background: rgba(0, 255, 255, 0.3);
    color: var(--text-primary);
  }
  
  ::-moz-selection {
    background: rgba(0, 255, 255, 0.3);
    color: var(--text-primary);
  }
}

/* ===================================================================
   11. PADDING LATERAL ADAPTATIVO
   =================================================================== */

@media screen and (min-width: 1024px) {
  /* Padding lateral adaptativo - reduzido para melhor aproveitamento */
  .chat-messages {
    padding-left: clamp(1.5rem, 3vw, 2.5rem); /* ✅ Reduzir padding */
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* ===================================================================
   12. PERFORMANCE ENHANCEMENTS
   =================================================================== */

@media screen and (min-width: 1024px) {
  
  /* === GPU ACCELERATION === */
  .chat-messages {
    transform: translateZ(0); /* GPU acceleration */
    will-change: scroll-position;
  }
  
  .sidebar-history,
  .sidebar-info,
  .message-container {
    transform: translateZ(0);
    will-change: transform;
  }
  
  /* === CONTAIN LAYOUT === */
  .message {
    contain: layout style paint; /* CSS containment para mensagens */
  }
  
  .message-container {
    contain: layout style paint;
  }
  
  .sidebar-history,
  .sidebar-info {
    contain: layout style;
  }
  
  /* === KEYBOARD NAVIGATION FOCUS === */
  .chat-messages:focus {
    outline: 2px solid var(--primary-glow);
    outline-offset: -2px;
    border-radius: 4px;
  }
}

/* ===================================================================
   13. LARGE DESKTOP (1440px - 1919px)
   =================================================================== */

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  
  /* === MENSAGENS COM LARGURA OTIMIZADA === */
  .message {
    max-width: 90%; /* ✅ Aumentar para melhor aproveitamento */
  }
  
  /* === CHAT MESSAGES WIDER === */
  .chat-messages {
    /* ✅ REMOVER max-width limitador - deixa expandir naturalmente */
    /* O padding adaptativo já controla a largura efetiva */
    margin: 0;
  }
  
  /* === SIDEBARS WIDER === */
  .sidebar-history,
  .sidebar-info {
    max-width: 360px;
  }
  
  /* === LARGER TYPOGRAPHY === */
  .message-content {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* ===================================================================
   14. ULTRA WIDE (1920px+)
   =================================================================== */

@media screen and (min-width: 1920px) {
  
  /* === MAXIMUM WIDTHS === */
  .winiverse-container {
    max-width: 1920px;
    margin: 0 auto;
  }
  
  /* === MENSAGENS COM LARGURA OTIMIZADA === */
  .message {
    max-width: 85%; /* ✅ Aumentar para melhor aproveitamento em telas grandes */
  }
  
  .chat-messages {
    /* ✅ REMOVER max-width limitador - permite expansão natural */
    margin: 0;
  }
}

/* ===================================================================
   FIM DO DESKTOP-ENHANCEMENTS.CSS
   ================================================================ */