/* Narrow-screen and mobile layouts. */
@media (max-width: 1180px) {
  .app { grid-template-columns: 272px minmax(0, 1fr); }
  .rpanel { position: fixed; inset: 0 0 0 auto; width: min(340px, 100%); z-index: 10; transform: translateX(100%); transition: transform .2s; box-shadow: none; }
  .rpanel.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .only-narrow { display: inline-flex; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .only-mobile { display: inline-flex; }
  .chat, .composer, .topbar { padding-left: 14px; padding-right: 14px; }
  .topbar .sub { display: none; }
  .skills-layout { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .skills-list { border-right: 0; border-bottom: 1px solid var(--border); }
}