@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
    transition:
      transform var(--t) var(--ease),
      width var(--t) var(--ease),
      min-width var(--t) var(--ease);
  }

  #sidebar.collapsed {
    transform: translateX(-100%);
    width: var(--sb-open);
    min-width: var(--sb-open);
  }

  #main { width: 100%; }
  #topbar { padding-left: 64px; }

  .user-bubble  { max-width: 85%; }
  #messages     { padding: 24px 14px 16px; }
  .empty-title  { font-size: 21px; }
}

@media (max-width: 480px) {
  #composer-wrap { padding: 8px 10px 12px; }
  .composer-disclaimer { font-size: 10.5px; }
  .effort-btn { padding: 0 10px; }
}

@media (hover: none) {
  .ai-actions { opacity: 1; }
  .ci-edit,
  .ci-delete { opacity: 1; }
}