/* FILE: css/responsive.css */
@media (max-width: 768px) {
  #hamburger-btn {
    display: inline-flex;
  }

  .panel {
    width: 100vw;
  }

  #chat-header {
    gap: var(--space-2);
  }

  .chat-header-center {
    display: none;
  }

  #messages-list {
    padding: var(--space-3);
  }

  .message-shell {
    max-width: 100%;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
  }

  .voice-recording-top {
    grid-template-columns: auto auto 1fr auto;
  }

  #voice-cancel-btn {
    grid-column: 4;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .setting-row {
    grid-template-columns: 1fr;
  }

  .radio-group,
  .segmented-group,
  .swatch-group,
  .inline-setting-actions {
    justify-content: flex-start;
  }

  .range-control {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sidebar-header {
    padding: var(--space-4);
  }

  #new-chat-btn,
  .search-container,
  .sidebar-bottom,
  .sidebar-footer {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
    width: auto;
  }

  #chat-header {
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) var(--space-3);
  }

  .chat-header-right {
    gap: 0;
  }

  #conversation-title,
  #title-edit-input {
    width: 160px;
    max-width: 160px;
  }

  #model-status {
    padding: 4px 8px;
  }

  #messages-list {
    padding: var(--space-3) var(--space-2);
  }

  .message-shell {
    gap: var(--space-2);
  }

  .message-card {
    padding: var(--space-3);
  }

  .message-actions {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-bottom: var(--space-2);
  }

  #toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #voice-btn,
  #send-btn {
    width: 40px;
    height: 40px;
  }

  .voice-recording-top {
    grid-template-columns: 1fr auto auto;
    row-gap: var(--space-2);
  }

  .voice-waveform {
    grid-column: 1 / -1;
    justify-content: center;
  }

  #toast-container {
    right: var(--space-2);
    left: var(--space-2);
  }

  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .shortcuts-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  #chat-header {
    padding: var(--space-3) var(--space-5);
  }

  #messages-list {
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  #input-area {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .panel {
    width: min(420px, 100vw);
  }
}