.mobile-bar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78vw;
    max-width: 320px;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 25;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #2a2a2a;
    background: #0a0a0a;
  }
  .mobile-bar h1 {
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: #c8a96e;
  }
  .hamburger {
    background: transparent;
    border: 0;
    color: #c8a96e;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    font-family: inherit;
  }

  .messages { padding: 1rem 0.9rem; }
  .conv-header { padding: 0.5rem 0.9rem; }
  .composer {
    padding: 0.75rem 0.9rem 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .composer-inner { gap: 0.5rem; }
  .msg { margin-bottom: 1rem; }

  .userbar { top: 0.55rem; right: 0.9rem; font-size: 0.65rem; }
}