/* Mobile and Narrow Window Styles */
@media screen and (max-width: 900px) {
  .main-container {
    grid-template-columns: 1fr;
    height: calc(100vh - 140px); /* Account for compact header (50px) + chat-input (90px) */
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  .chat-sidebar {
    order: -1;
    grid-column: 1;
  }

  .header-content {
    flex-direction: row; /* Keep horizontal layout */
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm); /* Much more compact padding */
    min-height: auto; /* Don't force height */
  }

  /* Hide some header elements to save space */
  .header-info {
    display: none; /* Hide group info to save space */
  }

  /* Make header title more compact */
  .header-title {
    font-size: var(--font-size-sm);
  }

  /* Make current user display more compact */
  .current-user {
    font-size: var(--font-size-xs);
  }

  /* Compact power button */
  .power-btn {
    width: 36px;
    height: 36px;
    padding: 4px; /* Closer to SVG size */
  }

  /* Make settings button bigger */
  #settingsBtn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .chat-messages {
    padding: var(--space-sm);
    padding-bottom: 140px; /* Extra bottom padding to prevent chat input overlap */
  }

  /* In single column mode, chat should take most of the viewport */
  .chat-container {
    min-height: 60vh; /* Ensure chat gets substantial height */
  }

  .chat-messages {
    min-height: 50vh; /* Chat messages get most of the space */
    max-height: 60vh; /* Prevent chat from taking entire screen */
  }

  .chat-message {
    margin: 0;
  }

  .chat-message.own-message {
    margin-left: var(--space-sm);
  }

  chat-input {
    padding: var(--space-sm);
  }

  .input-wrapper {
    gap: var(--space-xs);
  }

  .message-input {
    font-size: var(--font-size-sm);
  }

  .send-btn {
    width: 40px;
    height: 40px;
  }

  /* Sidebar components stack vertically with reduced spacing */
  chat-peers, chat-history-sync {
    padding: var(--space-sm);
    /* Remove height restrictions to take natural height */
  }

  .peers-header, .sync-header {
    margin-bottom: var(--space-sm);
  }

  .sync-actions {
    gap: var(--space-xs);
  }

  .sync-actions .btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  /* Modal adjustments */
  .modal-overlay {
    padding: var(--space-sm);
  }

  .modal-header, .modal-body, .modal-footer {
    padding: var(--space-md);
  }

  /* Status messages */
  status-display {
    top: 120px;
    right: var(--space-sm);
    left: var(--space-sm);
  }

  .status-message {
    margin: 0;
    width: 100%;
  }

  /* App controls */
  app-controls {
    padding: var(--space-sm);
  }

  .app-controls {
    gap: var(--space-xs);
  }

  .control-btn {
    flex: 1;
    padding: var(--space-sm);
    font-size: var(--font-size-xs);
  }
}

/* Tablet Styles */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr 250px;
    height: calc(100vh - 180px); /* Account for header + app-controls */
  }

  .header-content {
    padding: var(--space-md) var(--space-lg);
  }

  /* Adjust sidebar components for smaller width */
  .peers-header h3, .sync-header h3 {
    font-size: var(--font-size-base);
  }

  .peer-item {
    padding: var(--space-xs);
  }

  .peer-name {
    font-size: var(--font-size-xs);
  }

  .peer-handle {
    font-size: 10px;
  }

  .sync-actions .btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  /* Chat message adjustments */
  .chat-message.own-message {
    margin-left: var(--space-md);
  }
}

/* Desktop Styles */
@media screen and (min-width: 1201px) {
  .main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
  }

  .header-content {
    padding: var(--space-lg);
  }

  /* Enhanced desktop experience */
  .chat-message:hover {
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
  }

  .peer-item:hover {
    box-shadow: var(--shadow-sm);
  }

  /* Larger touch targets on desktop */
  .btn, .power-btn, .send-btn {
    cursor: pointer;
  }

  /* Better spacing for larger screens */
  .chat-messages {
    padding: var(--space-lg);
  }

  chat-input {
    padding: var(--space-lg);
  }

  chat-peers, chat-history-sync {
    padding: var(--space-lg);
  }
}

/* Landscape orientation (mobile/tablet) */
@media screen and (orientation: landscape) and (min-width: 901px) and (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr 200px !important;
    height: calc(100vh - 140px); /* Account for header + app-controls */
  }

  .header-content {
    padding: var(--space-sm) var(--space-md);
  }

  .header-info {
    display: none;
  }

  /* Compact sidebar for landscape */
  chat-peers, chat-history-sync {
    padding: var(--space-sm);
  }

  .peers-header h3, .sync-header h3 {
    font-size: var(--font-size-sm);
  }

  .peer-item {
    padding: var(--space-xs);
    flex-direction: column;
    align-items: flex-start;
  }

  .peer-actions {
    margin-top: var(--space-xs);
    align-self: flex-end;
  }

  .sync-stats {
    display: none;
  }

  .sync-actions .btn {
    padding: var(--space-xs);
    font-size: var(--font-size-xs);
  }
}

/* Large Desktop Styles */
@media screen and (min-width: 1440px) {
  .main-container {
    grid-template-columns: 1fr 350px;
    max-width: 1400px;
  }

  /* More generous spacing */
  .chat-messages {
    padding: var(--space-xl);
  }

  .chat-message.own-message {
    margin-left: var(--space-xl);
  }

  chat-peers, chat-history-sync {
    padding: var(--space-xl);
  }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders and shadows */
  .chat-message,
  .peer-item,
  chat-peers,
  chat-history-sync,
  .btn {
    border-width: 0.5px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .status-message {
    transition: none;
  }

  .modal-content {
    transition: none;
  }

  .progress-fill {
    animation: none;
  }
}

/* Print styles */
@media print {
  app-header,
  app-controls,
  status-display,
  chat-input,
  .chat-sidebar {
    display: none;
  }

  .main-container {
    display: block;
    height: auto;
    padding: 0;
  }

  .chat-container {
    border: none;
    border-radius: 0;
  }

  .chat-messages {
    padding: 0;
  }

  .chat-message {
    break-inside: avoid;
    margin-bottom: var(--space-sm);
    border: 1px solid #ccc;
    background: white;
    color: black;
  }

  .message-time::after {
    content: " - ";
  }
}