/* Tablet browsers may request a desktop-sized CSS viewport. chat.js adds this
 * capability class from the pointer API so the UI does not depend on width. */
html.chat-touch-layout .sidebar{width:min(280px,86vw);padding:calc(22px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow)}
html.chat-touch-layout .sidebar.open{transform:translateX(0)}
html.chat-touch-layout .sidebar .brand{justify-content:flex-start;padding:0 10px 28px}
html.chat-touch-layout .sidebar .brand>span:last-child,html.chat-touch-layout .sidebar .nav-item span,html.chat-touch-layout .sidebar .user-chip span:last-child{display:inline}
html.chat-touch-layout .sidebar .nav-item{justify-content:flex-start;gap:12px;padding:11px 12px}
html.chat-touch-layout .sidebar .user-chip{justify-content:flex-start;padding:12px}
html.chat-touch-layout .main-content{inset:0;width:100%;height:var(--chat-viewport-height);margin:0;padding:0}
html.chat-touch-layout .chat-app{grid-template-columns:1fr}
html.chat-touch-layout .chat-history{position:absolute;z-index:20;inset:0 auto 0 0;width:min(290px,88vw);transform:translateX(-105%);box-shadow:var(--shadow);transition:transform .2s}
html.chat-touch-layout .chat-history.open{transform:translateX(0)}
html.chat-touch-layout .chat-history.open+.chat-history-backdrop{display:block}
html.chat-touch-layout .chat-history-toggle{display:grid}
html.chat-touch-layout .chat-history-resizer{display:none}
html.chat-touch-layout .chat-toolbar{padding:9px 14px;gap:10px}
html.chat-touch-layout .chat-messages{padding:22px max(16px,calc((100% - 820px)/2)) 30px}
html.chat-touch-layout .chat-composer-wrap{padding:8px max(12px,calc((100% - 820px)/2)) max(12px,env(safe-area-inset-bottom))}

/* When the on-screen keyboard is open, keep the compact composer reachable. */
html.chat-touch-layout .chat-composer-wrap{max-height:45%;overflow-y:auto;overscroll-behavior:contain}