/* Mobile layout: collapse sidebar into a drawer, tighten paddings, make tabs
   touch-friendly, make the input row big enough to thumb-tap comfortably. */

header {
  padding: 8px 10px;
  gap: 8px;
}

.brand { font-size: 15px; }
.brand strong { display: none; } /* only show the emoji on small screens */

.tab {
  padding: 8px 14px;
  font-size: 14px;
}

#newRoomBtn {
  padding: 8px 12px;
  font-size: 13px;
}

main {
  grid-template-columns: 1fr;
  position: relative;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82vw;
  max-width: 320px;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 20;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

.sidebar.open { transform: translateX(0); }

.sidebar-actions {
  flex-direction: column;
}
.sidebar-actions .btn { width: 100%; text-align: center; }

#sidebarToggle { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; padding: 8px 12px; }

.chat {
  padding: 12px 12px 16px 12px;
  font-size: 14px;
}

footer {
  padding: 8px 10px env(safe-area-inset-bottom, 10px);
}

textarea {
  font-size: 16px; /* prevents iOS zoom-on-focus */
  min-height: 44px;
}

.btn { padding: 10px 14px; }
.btn-primary { padding: 10px 16px; }