html,body { height:100%; background:var(--color-bg); color:var(--color-text); font-family:var(--font-sans); font-size:var(--text-base); }
body { overflow:hidden; }
#shell { height:100%; display:flex; flex-direction:column; }
.topbar { height:calc(var(--toolbar-height) + var(--safe-area-top)); flex-shrink:0; display:flex; align-items:center; gap:var(--space-3); padding:var(--safe-area-top) max(var(--space-4),calc((100% - var(--page-width)) / 2 + var(--space-6))) 0; background:var(--color-surface); border-bottom:var(--border-width) solid var(--color-border); }
.topbar strong { font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.top-actions { display:flex; margin-left:auto; gap:var(--space-1); }
.top-actions .ui-button { min-height:var(--control-toolbar-height); padding:0 var(--space-2); font-size:var(--text-sm); }
.content { padding-left:max(var(--space-6),var(--safe-area-left)); padding-right:max(var(--space-6),var(--safe-area-right)); width:min(var(--page-width),100%); margin:0 auto; padding-top:var(--space-6); padding-bottom:max(var(--space-6),var(--safe-area-bottom)); overflow-y:auto; min-height:0; flex:1; }
.pagehead { margin-bottom:var(--space-6); }
.pagehead p { margin-top:var(--space-2); }
#connectionStatus { margin-bottom:var(--space-3); }
.chat-list { display:flex; flex-direction:column; gap:var(--space-1); }
.chat-row { min-width:0; width:100%; display:flex; justify-content:flex-start; align-items:center; gap:var(--space-3); padding:var(--space-3); text-align:left; }
.chat-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:var(--space-1); }
.chat-title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:var(--weight-medium); }
.chat-source { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--color-text-muted); font-size:var(--text-xs); }
.chat-time { flex-shrink:0; color:var(--color-text-muted); font-size:var(--text-xs); }
.chat-row .ui-dot { flex-shrink:0; }
.chat-row[aria-current=true] { background:var(--color-accent-subtle); }
.chat-row.busy .ui-dot { animation:dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .chat-row.busy .ui-dot { animation:none; } }
#empty { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
#terminal { position:relative; flex:1; min-height:0; }
#chatFrame { width:100%; height:100%; display:block; border:0; background:var(--color-bg); }
.frame-status { position:absolute; top:var(--toolbar-height); left:0; right:0; padding:var(--space-3); background:var(--color-surface); }
.overlay { position:fixed; inset:0; background:var(--color-overlay); z-index:var(--z-drawer); }
.menu { height:100%; width:min(360px,100%); padding:var(--space-4); padding-top:calc(var(--space-4) + var(--safe-area-top)); padding-left:calc(var(--space-4) + var(--safe-area-left)); padding-right:calc(var(--space-4) + var(--safe-area-right)); display:flex; flex-direction:column; border-radius:0; }
.menu header,.settings header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-shrink:0; }
.menu header p { margin-top:var(--space-1); }
.menu .chat-list { margin-top:var(--space-4); overflow-y:auto; min-height:0; flex:1; }
.menu footer { display:flex; flex-shrink:0; justify-content:space-between; padding-top:var(--space-3); padding-bottom:var(--safe-area-bottom); }
.menu .chat-time { display:none; }
.settings { inset:var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left); margin:auto; width:min(var(--form-width),calc(100% - var(--safe-area-left) - var(--safe-area-right) - var(--space-8))); max-height:calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - var(--space-8)); color:var(--color-text); padding:0; }
.settings::backdrop { background:var(--color-overlay); }
.settings form { display:flex; flex-direction:column; max-height:calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - var(--space-8)); }
.settings header,.settings footer { padding:var(--space-4); flex-shrink:0; }
.settings-body { min-height:0; overflow-y:auto; padding:0 var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.settings label,.login label { display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-sm); }
.instance-row { display:flex; gap:var(--space-2); justify-content:space-between; align-items:center; padding:var(--space-3) 0; border-bottom:var(--border-width) solid var(--color-border-subtle); }
.instance-row > div { min-width:0; overflow-wrap:anywhere; }
.instance-row .ui-button { flex-shrink:0; }
.instance-row p { margin-top:var(--space-1); }
.login { position:fixed; inset:0; z-index:var(--z-auth); background:var(--color-bg); display:grid; place-items:center; overflow-y:auto; padding:max(var(--space-4),var(--safe-area-top)) max(var(--space-4),var(--safe-area-right)) max(var(--space-4),var(--safe-area-bottom)) max(var(--space-4),var(--safe-area-left)); }
.login-card { width:min(360px,100%); display:flex; flex-direction:column; gap:var(--space-4); }
@media (max-width:600px) { .content { padding-left:max(var(--space-4),var(--safe-area-left)); padding-right:max(var(--space-4),var(--safe-area-right)); } .topbar { padding-left:max(var(--space-4),var(--safe-area-left)); padding-right:max(var(--space-4),var(--safe-area-right)); } }