@media (min-width: 768px) {
  body.twalk-glass:not(.twalk-chat-view) { padding: 20px; }
  .app-shell:not(.chat-mode) {
    width: min(1200px, 100%);
    height: calc(100vh - 40px);
    min-height: 620px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 64px minmax(320px, 360px) 1fr;
    overflow: hidden;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xl);
    background: var(--tw-bg-surface);
    box-shadow: var(--tw-shadow-lg);
  }
  .app-shell:not(.chat-mode)::before { content: none !important; }
  .topbar.top-bar {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-height: 100%;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: var(--tw-text-tertiary);
    background: var(--tw-bg-sidebar);
    border-right: 1px solid var(--tw-border);
    border-bottom: 0;
    box-shadow: none;
  }
  .brand.wordmark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--tw-accent);
    font-size: 0;
    font-weight: 800;
  }
  .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--tw-r-md);
    color: var(--tw-accent);
    background: transparent;
    font-size: 0;
    box-shadow: none;
  }
  .brand-mark::before { content: "T"; font-size: 24px; font-weight: 800; }
  .topbar nav {
    position: static;
    width: 44px;
    height: auto;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--tw-text-tertiary);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .topbar nav a {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--tw-r-md);
    display: grid;
    place-items: center;
    color: var(--tw-text-tertiary);
    font-size: 0;
    background: transparent;
  }
  .topbar nav a:nth-child(1)::before { content: "💬"; font-size: 18px; }
  .topbar nav a:nth-child(2)::before { content: "👥"; font-size: 18px; }
  .topbar nav a:nth-child(3)::before { content: "⚙"; font-size: 18px; }
  .topbar nav a:nth-child(4)::before { content: "◉"; font-size: 18px; }
  .topbar nav a:hover, .topbar nav a.active {
    color: var(--tw-accent);
    background: var(--tw-accent-light);
  }
  .screen {
    grid-column: 2 / 4;
    grid-row: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--tw-bg-surface);
  }
  .screen:not(.narrow):not(.admin) {
    display: grid;
    grid-template-columns: minmax(320px, 360px) 1fr;
    gap: 0;
  }
  .screen:not(.narrow):not(.admin) > .panel:first-child {
    grid-column: 1;
    border-right: 1px solid var(--tw-border);
    border-bottom: 0;
  }
  .screen:not(.narrow):not(.admin) > .tabs,
  .screen:not(.narrow):not(.admin) > .panel:nth-of-type(2),
  .screen:not(.narrow):not(.admin) > .list {
    grid-column: 1;
  }
  .screen:not(.narrow):not(.admin)::after {
    content: "Select a TWALK conversation";
    grid-column: 2;
    grid-row: 1 / span 5;
    display: grid;
    place-items: center;
    color: var(--tw-text-tertiary);
    background: var(--tw-bg-surface);
    border-left: 1px solid var(--tw-border);
  }
  .screen.admin {
    grid-column: 2 / 4;
    overflow: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
  }
  .screen.admin > .admin-nav,
  .screen.admin > .panel:first-of-type,
  .screen.admin > .alert,
  .screen.admin > .admin-users-table,
  .screen.admin > .admin-toolbar { grid-column: 1 / -1; }
  .chat-screen {
    width: min(1200px, calc(100% - 40px));
    height: calc(100vh - 40px);
    min-height: 620px;
    margin: 20px auto;
    display: grid;
    grid-template-rows: 56px 1fr auto;
    overflow: hidden;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xl);
    background: var(--tw-bg-surface);
    box-shadow: var(--tw-shadow-lg);
  }
  .chat-screen::before { content: none !important; }
}

@media (min-width: 1024px) {
  .screen:not(.narrow):not(.admin) { grid-template-columns: 320px 1fr; }
}