:root { color-scheme: light dark; --bg: #fafaf8; --fg: #1d1d1b; --muted: #6b6b66; --line: #dcdcd6; --accent: #0a7a5a; --panel: #fff; }
@media (prefers-color-scheme: dark) { :root { --bg: #161615; --fg: #ecece8; --muted: #9a9a93; --line: #34342f; --accent: #3ec59a; --panel: #1e1e1c; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 1.15rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
button { font: inherit; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); width: 100%; }

#signin { max-width: 24rem; margin: 0 auto; padding: 8vh 16px 0; } /* padding, not margin: a margin would collapse through the body and make the page 8vh too tall */
#signin form { display: grid; gap: .8rem; margin-top: .75rem; }
#signin label { display: grid; gap: .25rem; color: var(--muted); font-size: .9rem; }
.notice, .error { margin: .75rem 0 0; min-height: 1.4em; }
.notice { color: var(--accent); }
.error { color: #b3261e; }
@media (prefers-color-scheme: dark) { .error { color: #f2b8b5; } }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .9rem 0 0; }
button.link { border: 0; background: transparent; padding: 0; color: var(--accent); text-decoration: underline; }
button[disabled] { opacity: .6; cursor: progress; }

#app { height: 100%; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header #who { color: var(--muted); font-size: .9rem; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(16rem, 2fr) 3fr; }
.things { min-height: 0; overflow: auto; padding: 12px 16px; border-right: 1px solid var(--line); }
#crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; margin: 0 0 .6rem; font-size: .9rem; }
#crumbs .sep { color: var(--muted); }
#crumbs .here { font-weight: 600; overflow-wrap: anywhere; }
.group { margin: 0 0 1rem; }
.group h3, #item-children h3 { margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
ul.tree, ul.nest { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.nest { margin: 2px 0 2px 1rem; padding-left: .6rem; border-left: 1px solid var(--line); }
button.item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .35rem .5rem; border-radius: 6px; }
button.item:hover, button.item[aria-current="true"] { background: var(--panel); }
button.item .name { font-weight: 600; overflow-wrap: anywhere; }
button.item .summary { flex-basis: 100%; color: var(--muted); font-size: .85rem; font-weight: 400; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 0 .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.item-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; }
.item-head h2 { font-size: 1.3rem; margin: 0; overflow-wrap: anywhere; }
p.summary { margin: .2rem 0 .6rem; color: var(--muted); }
#item-children { margin: .6rem 0; }
#child-list { display: grid; gap: 2px; }
#page-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
#page-tabs button.tab { padding: .25rem .65rem; border-radius: 999px; font-size: .9rem; }
#page-tabs button.tab[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { #page-tabs button.tab[aria-current="true"] { color: #0b1f18; } }
.empty { color: var(--muted); }
.viewer-head { display: flex; align-items: baseline; gap: 12px; }
.viewer-head h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: .4rem 0; font-size: 1rem; }
#viewer-source { white-space: pre-wrap; word-wrap: break-word; font: .9rem/1.5 ui-monospace, monospace; margin: 0; }
.markdown { overflow-wrap: anywhere; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 1.1em 0 .4em; line-height: 1.25; }
.markdown h1 { font-size: 1.4rem; } .markdown h2 { font-size: 1.2rem; } .markdown h3 { font-size: 1.05rem; }
.markdown p { margin: .5em 0; }
.markdown ul, .markdown ol { margin: .4em 0; padding-left: 1.4em; }
.markdown li.task { list-style: none; margin-left: -1.2em; }
.markdown li.task input { cursor: pointer; margin-right: .2em; }
.markdown li.task input:disabled { cursor: default; }
p.note { margin: .3rem 0 .6rem; padding: .4rem .6rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel); }
.markdown blockquote { margin: .6em 0; padding: .1em 0 .1em .9em; border-left: 3px solid var(--line); color: var(--muted); }
.markdown code { font: .9em ui-monospace, monospace; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0 .25em; }
.markdown pre { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .6em .8em; overflow: auto; }
.markdown pre code { border: 0; padding: 0; background: transparent; }
.markdown table { border-collapse: collapse; margin: .6em 0; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: .3em .6em; text-align: left; }
.markdown th { background: var(--panel); }
.markdown .align-center { text-align: center; } .markdown .align-right { text-align: right; }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.markdown a { color: var(--accent); }
#item-tabs { display: flex; gap: .25rem; margin: .9rem 0 .6rem; border-bottom: 1px solid var(--line); }
#item-tabs button[role=tab] { border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; background: transparent; padding: .4rem .9rem; font-weight: 600; color: var(--muted); }
#item-tabs button[role=tab]:hover { color: var(--fg); background: var(--panel); }
#item-tabs button[role=tab][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
#item-tabs .badge { margin-left: .25rem; }
#item-files { margin: .6rem 0; }
#item-files h3 { margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#file-list { display: grid; gap: 2px; }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .6rem; padding: .3rem .5rem; border-radius: 6px; }
.file-meta { display: flex; align-items: baseline; gap: .6rem; white-space: nowrap; }
.file-row:hover { background: var(--panel); }
.file-row .name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
button.file-open { border: 0; background: transparent; padding: 0; text-align: left; font-weight: 600; color: var(--accent); text-decoration: underline; }
.file-rename { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.file-rename input { flex: 1 1 10rem; min-width: 0; }
.file-row .file-error { grid-column: 1 / -1; color: #b3261e; font-size: .85rem; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .file-row .file-error { color: #f2b8b5; } }
.file-row button, .file-row a { font-size: .85rem; }
.file-row a, .file-download { color: var(--accent); }
.file-add { display: flex; gap: .4rem; margin: .5rem 0 0; }
.file-add input { flex: 1; min-width: 0; }
.file-ask { display: block; margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.file-ask input { width: auto; margin-right: .3rem; }
.file-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .5rem 0; }
.file-nav label { display: flex; align-items: center; gap: .3rem; }
.file-nav input { width: 5rem; }
#file-sections { margin: .4rem 0; }
#file-sections summary { cursor: pointer; color: var(--muted); }
#file-outline { display: grid; gap: 1px; margin-top: .3rem; max-height: 14rem; overflow: auto; }
#file-outline button { text-align: left; border: 0; background: transparent; padding: .15rem .4rem; border-radius: 4px; }
#file-outline button:hover { background: var(--panel); }
#file-outline button.lvl-2 { padding-left: 1.2rem; } #file-outline button.lvl-3 { padding-left: 2rem; } #file-outline button.lvl-4 { padding-left: 2.8rem; } #file-outline button.lvl-5 { padding-left: 3.6rem; }
#file-text { white-space: pre-wrap; word-wrap: break-word; font: .85rem/1.45 ui-monospace, monospace; margin: 0; padding: .6rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
/* The chat draws its screen-reader-only labels with position: absolute and no positioned ancestor of its own, so they
   sit wherever they fall down the message list and, escaping the chat's scroll area, stretch the whole page's scroll
   height: the page could be scrolled into empty space. A positioned, clipping pane is their containing block. */
.chat { position: relative; overflow: hidden; min-height: 0; min-width: 0; display: flex; }
/* The pane now clips, so its parts keep within it: the conversation's focus ring is drawn inside it, and the chat switcher's dropdown
   is no taller than what is left of a small screen's pane. */
agent-chat::part(log):focus-visible { outline-offset: -2px; }
@media (max-width: 760px) { agent-chat::part(switcher-panel) { max-height: calc(65vh - 9rem); } }
agent-chat { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .panes { grid-template-columns: 1fr; grid-template-rows: minmax(8rem, 35%) 1fr; }
  .things { border-right: 0; border-bottom: 1px solid var(--line); }
}