/* Updated Mobile Features CSS with minimal UI elements */

/* Base Mobile Styles */
@media (max-width: 768px) {
  /* General Layout Adjustments */
  body {
    overflow-x: hidden;
    touch-action: manipulation;
  }

  /* Hide standard top bar */
  #top-bar {
    display: none !important;
  }

  /* Hide feedback button */
  #feedback-button {
    display: none !important;
  }

  /* Hide zoom controls */
  #zoom-controls {
    display: none !important;
  }

  /* Hide tooltip by default */
  .tooltip {
    display: none !important;
  }

  /* Logo Adjustments */
  #logo {
    transform: scale(0.6);
    transform-origin: left top;
    position: fixed; /* Ensure it stays in place */
    top: 10px;
    left: 10px;
  }

  body.rtl #logo {
    transform-origin: right top !important;
    left: -20 !important;
    right: 20 !important;
  }

  /* Theme Toggle - Fixed at top right */
  #theme-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100 !important;
    background: none !important;
  }

  #theme-button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #333 !important;
    color: white !important;
    font-size: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
    transition: background 0.3s, color 0.3s !important;
  }

  .light-mode #theme-button {
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  /* RTL support */
  body.rtl #theme-toggle {
    right: auto !important;
    left: 20px !important;
  }

  /* New Improved Search Bar - Always visible and functional */
  #search-bar {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 180px !important;
    height: 40px !important;
    z-index: 100 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: background-color 0.3s, box-shadow 0.3s !important;
  }
  
  #search-bar:focus-within {
    background-color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  }
  
  #search-input {
    width: 130px !important;
    opacity: 1 !important;
    padding: 8px 10px 8px 40px !important;
    border: none !important;
    background: none !important;
    color: white !important;
    font-size: 14px !important;
    outline: none !important;
  }
  
  #search-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  /* Search results counter */
  #search-results-counter {
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    color: white !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  }
  
  .light-mode #search-bar {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  
  .light-mode #search-bar:focus-within {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }
  
  .light-mode #search-input {
    color: #333 !important;
  }
  
  .light-mode #search-input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
  }
  
  .light-mode #search-results-counter {
    color: #333 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7) !important;
  }

  /* Ensure language switcher is visible */
  .mobile-language-switcher {
    position: fixed !important;
    bottom: 20px !important;
    left: 75px !important;
    z-index: 1000 !important;
  }
  
  /* RTL Support */
  body.rtl .mobile-language-switcher {
    left: auto !important;
    right: 75px !important;
  }
  
  /* Dropdown Container */
  .lang-dropdown {
    position: relative !important;
    display: inline-block !important;
  }
  
  /* Selected Language Button */
  .lang-selected {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Dropdown Menu */
  .lang-dropdown-menu {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    margin-bottom: 5px !important;
    min-width: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    z-index: 1001 !important;
    display: none;
    flex-direction: column !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Language Options */
  .lang-option {
    width: 100% !important;
    padding: 10px !important;
    border: none !important;
    background: transparent !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background-color 0.2s !important;
  }
  
  .lang-option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .lang-option.current {
    background-color: rgba(75, 107, 169, 0.8) !important;
  }
  
  /* Light Mode Styling */
  .light-mode .lang-selected {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #333 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }
  
  .light-mode .lang-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
  }
  
  .light-mode .lang-option {
    color: #333 !important;
  }
  
  .light-mode .lang-option:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  
  .light-mode .lang-option.current {
    background-color: rgba(75, 107, 169, 0.8) !important;
    color: white !important;
  }

  /* Social Media Bar and Toggle Button */
  #social-media-bar {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    flex-direction: column !important;
    z-index: 100 !important;
    width: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    backdrop-filter: blur(3px) !important;
  }

  #social-media-bar.expanded {
    max-height: 300px !important;
    padding: 10px 0 !important;
  }

  /* Dark mode - white circle with black icon */
  #social-toggle {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 42px !important;
    height: 42px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    color: black !important;
    font-size: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 101 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  /* Light mode - black circle with white icon */
  .light-mode #social-toggle {
    background: black !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .social-media-label {
    display: none !important;
  }

  .social-media-link {
    padding: 8px 12px !important;
    margin: 4px 10px !important;
    font-size: 14px !important;
    color: white !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    transition: background 0.3s !important;
    text-decoration: none !important;
  }

  .light-mode .social-media-link {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  /* Pinch to zoom hint */
  #pinch-hint {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 99;
  }

  #pinch-hint.show {
    opacity: 1;
  }

  /* Version number position adjustment */
  #version-number {
    bottom: 5px;
    left: 5px;
    font-size: 10px;
    opacity: 0.5;
  }

  /* Improved node touch targets */
  .node circle {
    r: 15px !important; /* Smaller circles on mobile */
    stroke-width: 2px !important;
  }

  .node.root circle {
    r: 40px !important; /* Root node size */
  }

  .node text {
    font-size: 12px !important;
  }

  /* RTL support adjustments */
  body.rtl #search-bar {
    right: auto !important;
    left: 20px !important;
  }

  body.rtl #theme-toggle {
    right: auto !important;
    left: 20px !important;
  }
  
  body.rtl #social-toggle {
    left: auto !important;
    right: 20px !important;
  }
  
  body.rtl #social-media-bar {
    left: auto !important;
    right: 20px !important;
  }
  
  body.rtl #language-switcher {
    left: auto !important;
    right: 75px !important;
  }

  /* Style the language selector in welcome screen */
  #welcome-language-switcher {
    display: block !important;
    margin: 15px 0 !important;
    text-align: center !important;
  }

  #welcome-language-select {
    display: inline-block !important;
    width: auto !important;
    min-width: 120px !important;
    padding: 6px 10px !important;
    font-size: 15px !important;
    color: white !important;
    background-color: #333 !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Landscape Mode Optimizations */
  @media (orientation: landscape) {
    #logo {
      transform: scale(0.4); /* Smaller than current 0.5 */
      top: 5px; /* Closer to top edge */
      left: 5px; /* Closer to left edge */
    }

    #logo image {
      width: 150px !important; /* Explicitly constrain size */
      height: 60px !important;
    }

    body.rtl #logo {
      left: auto !important;
      right: 5px !important;
    }

    #search-bar {
      bottom: 10px !important;
      right: 10px !important;
      width: 200px !important; /* Wider for landscape */
    }

    #search-input {
      width: 150px !important; /* Adjust input width */
    }

    .mobile-language-switcher {
      bottom: 10px !important;
      left: 65px !important;
    }

    #social-toggle {
      bottom: 10px !important;
      left: 10px !important;
    }

    #social-media-bar {
      bottom: 60px !important;
      left: 10px !important;
    }

    #pinch-hint {
      bottom: 80px !important;
    }

    .node circle {
      r: 15px !important; /* Consistent with landscape adjustment */
    }

    .node.root circle {
      r: 40px !important;
    }

    .node text {
      font-size: 12px !important; /* Smaller text for clarity */
    }

    .link {
      stroke-width: 1px !important; /* Thinner links */
    }

    body.rtl #search-bar {
      right: auto !important;
      left: 10px !important;
    }

    body.rtl #language-switcher {
      left: auto !important;
      right: 65px !important;
    }

    body.rtl #social-toggle {
      left: auto !important;
      right: 10px !important;
    }

    body.rtl #social-media-bar {
      left: auto !important;
      right: 10px !important;
    }
  }
}

/* Small Phone Adjustments */
@media (max-width: 380px) {
  #logo-image {
    width: 180px !important;
    height: 75px !important;
  }
  
  #theme-button, .lang-btn {
    width: 30px !important;
    height: 30px !important;
  }
  
  #social-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  #search-bar {
    width: 150px !important;
  }
  
  #search-input {
    width: 100px !important;
  }
}