/* MarcusChat - Responsive Breakpoints */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  #app {
    max-width: 100%;
  }

  #header {
    padding: 0 12px;
  }

  .header-info h1 {
    font-size: 15px;
  }

  .messages-container {
    padding: 12px;
  }

  .message {
    max-width: 92%;
  }

  .message-bubble {
    padding: 8px 12px;
  }

  .input-area {
    padding: 6px 12px;
    padding-bottom: calc(6px + var(--safe-area-bottom));
  }

  .input-hint {
    display: none;
  }

  /* Ensure touch targets are at least 44px */
  .header-btn {
    width: 44px;
    height: 44px;
  }

  .send-btn,
  .stop-btn {
    width: 44px;
    height: 44px;
  }

  .msg-copy-btn {
    padding: 6px;
  }

  /* Show message meta on mobile (no hover) */
  .message-meta {
    opacity: 1;
  }

  /* Code blocks full-width on mobile */
  .message-content pre code {
    font-size: 12px;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  #app {
    max-width: 800px;
  }

  .message {
    max-width: 80%;
  }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
  #app {
    max-width: 900px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .message {
    max-width: 75%;
  }
}

/* Standalone display mode (PWA / popout) */
@media (display-mode: standalone) {
  #header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .message {
    animation: none;
  }

  .streaming-cursor {
    animation: none;
    opacity: 1;
  }

  .thinking-dots span {
    animation: none;
    opacity: 0.6;
  }

  .status-dot.connecting {
    animation: none;
    opacity: 0.7;
  }

  .messages-container {
    scroll-behavior: auto;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  :root {
    --border-color: #555;
    --text-secondary: #bbb;
    --text-muted: #888;
  }

  .message-bubble {
    border: 1px solid var(--border-color);
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  #header {
    height: 48px;
  }

  .avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .messages-container {
    padding: 8px 12px;
  }

  .message {
    margin-bottom: 8px;
  }

  .message-bubble {
    padding: 6px 10px;
  }
}