html, body { height: 100%; }
body { padding: 0; min-height: 100vh; }
header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); }
header.nav .brand { justify-self: start; cursor: pointer; }
header.nav .commit { justify-self: center; font-size: .7rem; opacity: .55; }
header.nav nav { justify-self: end; }
main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
header.nav a.brand { text-decoration: none; font-weight: 600; }
/* Dashboard-only grid layout */
.dash { display: grid; grid-template-columns: 1fr; gap: 0; }
.dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
.dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
.dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; }
#tail { flex: 1; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ts { opacity: .66; }
.msg { margin-bottom: .25rem; }
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; text-align: center; font-size: .85rem; padding: .5rem 0; background-color: var(--pico-background-color, #fff); border-top: 1px solid var(--muted-border-color); }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
/* Summarizer output wrapping */
#out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Cards */
.card { margin:.35rem 0; padding:.5rem; border:1px solid var(--muted-border-color); border-radius:.5rem; background: var(--pico-card-background-color, rgba(0,0,0,0.02)); }
.card .card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; cursor:pointer; }
.card .card-actions { display:flex; align-items:center; gap:.4rem; }
.card .summary-title { font-weight:600; margin-top:.25rem; opacity:.85; }