/*
 * Custom styles for the site.
 * This file loads after the inline <style> block in index.html,
 * so rules here override the inline defaults when selectors match.
 */

/* Mobile Responsive Adjustments for the Left Desktop Icon Bar */
@media screen and (max-width: 639px) {
  /* Stack the icon bar on top of the windows area */
  #desktop-area {
    flex-direction: column !important;
  }

  /* Repurpose the vertical left icon bar into a full-width, horizontally scrollable top strip */
  .desktop-icon-bar {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 8px 8px 0 0;
    padding: 4px;
    gap: 4px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS Safari */
  }

  /* Keep icons side-by-side with a comfortable tap target */
  .desktop-icon {
    flex: 0 0 auto;
    width: 56px;
    min-height: 44px;
    margin-bottom: 0;
  }

  /* Windows fill the remaining space below the icon strip instead of overlapping it */
  #windows-container {
    width: 100%;
    height: auto !important;
    min-height: 0;
    flex: 1 1 auto;
    margin-left: 0;
  }
}