/* Layout: sidebar, topbar, chat column, composer */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app[data-sidebar="closed"] { grid-template-columns: 0 minmax(0, 1fr); }

.sidebar {
  background: var(--surface-2); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: sticky; top: 0;
  overflow: hidden; width: var(--sidebar-w); transition: transform var(--ease), visibility var(--ease);
}
.app[data-sidebar="closed"] .sidebar { visibility: hidden; width: 0; border: 0; transform: translateX(-100%); }
html[dir="rtl"] .app[data-sidebar="closed"] .sidebar { transform: translateX(100%); }

.sidebar-head { display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .25rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--ink); flex: 1; min-width: 0; }
.brand img { width: 1.9rem; height: 1.9rem; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand b { color: var(--accent); font-weight: 700; }
.sidebar-actions { padding: .5rem .75rem; display: grid; gap: .5rem; }
.sidebar-search { position: relative; }
.sidebar-search input { width: 100%; padding: .55rem .75rem; padding-inline-start: 2.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.sidebar-search .icon { position: absolute; inset-inline-start: .65rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; width: 1rem; height: 1rem; }
.sidebar-tabs { display: flex; gap: .25rem; padding: 0 .75rem .5rem; }
.sidebar-tabs button { flex: 1; border: 0; background: transparent; padding: .35rem .25rem; border-radius: var(--radius-sm); color: var(--ink-2); font-size: .85rem; }
.sidebar-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
.history { flex: 1; overflow-y: auto; padding: 0 .5rem 1rem; overscroll-behavior: contain; }
.history h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 1rem .5rem .35rem; font-weight: 600; }
.history-empty { color: var(--ink-2); padding: 1.5rem 1rem; text-align: center; font-size: .92rem; }
.sidebar-foot { border-top: 1px solid var(--line); padding: .5rem; display: flex; align-items: center; gap: .25rem; }
.sidebar-foot .acct { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; padding: .4rem; border-radius: var(--radius-sm); border: 0; background: transparent; text-align: start; }
.sidebar-foot .acct:hover { background: var(--surface-3); }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; }
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: .4rem; padding: 0 .75rem;
  border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 5;
}
.topbar .title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.topbar .title button, .topbar .title input { max-width: 100%; }
.conv-title { border: 0; background: transparent; font-weight: 600; padding: .35rem .6rem; border-radius: var(--radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem; }
.conv-title:hover { background: var(--surface-2); }
.conv-title-input { font-weight: 600; padding: .35rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--surface); width: min(28rem, 100%); text-align: center; }
.top-group { display: flex; align-items: center; gap: .15rem; }
.sync-status { font-size: .8rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 999px; border: 0; background: transparent; white-space: nowrap; }
.sync-status[data-state="error"], .sync-status[data-state="offline"] { color: var(--danger); background: var(--danger-soft); }
.sync-status[data-state="local"] { color: var(--warn); background: var(--warn-soft); }
.sync-status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.sync-status[data-state="saving"] .dot, .sync-status[data-state="syncing"] .dot { animation: pulse 1s infinite ease-in-out; }

.chat { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.chat-inner { max-width: 49rem; margin: 0 auto; padding: calc(var(--space) * 1.25) var(--space) 2rem; }
.welcome { text-align: center; padding: 12vh 1rem 2rem; color: var(--ink-2); }
.welcome img { width: 4rem; height: 4rem; margin-bottom: 1rem; }
.welcome h1 { color: var(--ink); font-size: 1.7rem; }
.welcome .chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }

.composer-wrap { flex: none; padding: .5rem var(--space) calc(.75rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer { max-width: 49rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; padding: .5rem .6rem; box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: .5rem .5rem; max-height: 40vh; line-height: 1.5; min-height: 2.6rem; }
.composer-row { display: flex; align-items: center; gap: .25rem; }
.composer-row .grow { flex: 1; }
.composer-hint { max-width: 49rem; margin: .35rem auto 0; font-size: .75rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.attach-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem .25rem .5rem; }
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem .25rem .35rem; }

@media (max-width: 52rem) {
  .app, .app[data-sidebar="closed"] { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30; box-shadow: var(--shadow); transform: translateX(0); }
  .app[data-sidebar="closed"] .sidebar { transform: translateX(-105%); width: var(--sidebar-w); visibility: hidden; }
  html[dir="rtl"] .app[data-sidebar="closed"] .sidebar { transform: translateX(105%); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
  .app[data-sidebar="closed"] .scrim { display: none; }
  .conv-title { max-width: 11rem; }
  .hide-sm { display: none !important; }
  .topbar { padding: 0 .4rem; }
}
@media (min-width: 52.01rem) { .scrim { display: none; } .only-sm { display: none !important; } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }