:root { font-family: system-ui, sans-serif; color: #1d1d1f; background: #f6f6f4; }
body { margin: 0; }
a { color: #2f5fd0; }
.page { max-width: 46rem; margin: 2rem auto; padding: 0 1rem; }
.page form { display: flex; gap: .5rem; margin: 1rem 0; }
.page input[type=text] { flex: 1; padding: .4rem .6rem; font: inherit; }
.page button, .editor button { font: inherit; padding: .3rem .7rem; cursor: pointer; }
.page ul { padding-left: 1.2rem; }
.page li { margin: .3rem 0; }
.editor { display: grid; grid-template: "header header" auto "main aside" 1fr / 1fr 20rem; height: 100vh; height: 100dvh; }
.editor header { grid-area: header; display: flex; align-items: baseline; gap: .4rem 1rem; padding: .6rem 1rem; border-bottom: 1px solid #ddd; background: #fff; }
.editor header h1 { font-size: 1.1rem; margin: 0; }
.editor header .home { font-weight: 600; text-decoration: none; }
.editor header .status { color: #666; font-size: .9rem; flex: 1; }
.editor .tabs { display: none; }
.editor main { grid-area: main; display: grid; grid-template-rows: auto 1fr; min-height: 0; background: #fff; }
.editor .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .3rem .75rem; border-bottom: 1px solid #e6e6e6; background: #fbfbfa; }
.editor .toolbar button { min-width: 2rem; padding: .2rem .5rem; font-size: .85rem; color: #333; background: none; border: 1px solid transparent; border-radius: .3rem; }
.editor .toolbar button:hover { background: #eee; border-color: #ddd; }
.editor .toolbar code { font-size: .8rem; }
.editor .toolbar .sep { width: 1px; height: 1.2rem; margin: 0 .3rem; background: #ddd; }
.editor wave-editor { display: block; min-height: 0; overflow: auto; }
.editor aside { grid-area: aside; overflow: auto; padding: 0 1rem; background: #fbfbfa; border-left: 1px solid #ddd; }
.editor aside h2 { font-size: 1rem; }
.editor aside ol { list-style: none; padding: 0; }
.editor aside li { border-bottom: 1px solid #e6e6e6; padding: .5rem 0; font-size: .85rem; }
.editor aside .label { font-weight: 600; }
.editor aside .detail { color: #666; margin: .15rem 0 .35rem; }
.editor aside button { font-size: .75rem; padding: .15rem .45rem; margin-right: .3rem; }

@media (max-width: 1100px) {
  .editor { grid-template-columns: 1fr 16rem; }
}

/* Narrow screens: one pane at a time, chosen with tabs. */
@media (max-width: 800px) {
  .editor { grid-template: "header" auto "tabs" auto "content" 1fr / 1fr; }
  .editor header { flex-wrap: wrap; padding: .5rem .75rem; }
  .editor header h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editor header .status { order: 3; flex-basis: 100%; font-size: .8rem; }
  .editor .tabs { grid-area: tabs; display: flex; background: #fff; border-bottom: 1px solid #ddd; }
  .editor .tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: none; padding: .6rem 0; font-size: .95rem; color: #555; }
  .editor .tabs button[aria-selected="true"] { color: #1d1d1f; font-weight: 600; border-bottom-color: #2f5fd0; }
  .editor main, .editor aside { grid-area: content; }
  .editor .toolbar { padding: .25rem .5rem; }
  .editor aside { border-left: 0; padding: 0 .75rem; }
  .editor aside h2 { display: none; }
  .editor aside button { font-size: .85rem; padding: .35rem .6rem; }
  .editor[data-tab="edit"] aside, .editor[data-tab="history"] main { display: none; }
}
.view { background: #fff; padding: 1rem 2rem; border: 1px solid #ddd; }

/* Home page */
.page select { font: inherit; padding: .3rem; }
.page .kind { color: #888; font-size: .85rem; }

/* Chat */
.chat { display: grid; grid-template: "header header" auto "main aside" 1fr / 1fr 20rem; height: 100vh; height: 100dvh; }
.chat header { grid-area: header; display: flex; align-items: baseline; gap: .4rem 1rem; padding: .6rem 1rem; border-bottom: 1px solid #ddd; background: #fff; }
.chat header h1 { font-size: 1.1rem; margin: 0; }
.chat header .home { font-weight: 600; text-decoration: none; }
.chat header .status { color: #666; font-size: .9rem; flex: 1; }
.chat .tabs { display: none; }
.chat main { grid-area: main; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.chat .messages { display: block; flex: 1; overflow: auto; padding: .5rem 1rem; }
.chat .messages ol { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.chat .message { padding: .45rem .7rem; margin: .4rem 0; border-radius: .6rem; background: #f1f1ef; }
.chat .message.mine { background: #e8eefc; }
.chat .message .meta { font-size: .8rem; color: #666; }
.chat .message .meta strong { color: #1d1d1f; margin-right: .3rem; }
.chat .message p { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .message textarea { box-sizing: border-box; width: 100%; min-height: 4rem; margin-top: .3rem; font: inherit; }
.chat .message .actions { margin-top: .25rem; }
.chat .message .actions button { font-size: .75rem; padding: .1rem .45rem; margin-right: .3rem; }
.chat .composer { display: flex; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid #ddd; }
.chat .composer input { flex: 1; padding: .5rem .7rem; font: inherit; font-size: 16px; border: 1px solid #ccc; border-radius: .4rem; }
.chat .composer button { font: inherit; padding: .4rem 1rem; cursor: pointer; }
.chat aside { grid-area: aside; overflow: auto; padding: 0 1rem; background: #fbfbfa; border-left: 1px solid #ddd; }
.chat aside h2 { font-size: 1rem; }
.chat aside ol { list-style: none; padding: 0; }
.chat aside li { border-bottom: 1px solid #e6e6e6; padding: .5rem 0; font-size: .85rem; }
.chat aside .label { font-weight: 600; }
.chat aside .detail { color: #666; margin: .15rem 0 .35rem; }
.chat aside button { font-size: .75rem; padding: .15rem .45rem; margin-right: .3rem; }
@media (max-width: 800px) {
  .chat { grid-template: "header" auto "tabs" auto "content" 1fr / 1fr; }
  .chat header { flex-wrap: wrap; padding: .5rem .75rem; }
  .chat header h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat header .status { order: 3; flex-basis: 100%; font-size: .8rem; }
  .chat .tabs { grid-area: tabs; display: flex; background: #fff; border-bottom: 1px solid #ddd; }
  .chat .tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: none; padding: .6rem 0; font-size: .95rem; color: #555; }
  .chat .tabs button[aria-selected="true"] { color: #1d1d1f; font-weight: 600; border-bottom-color: #2f5fd0; }
  .chat main, .chat aside { grid-area: content; }
  .chat aside { border-left: 0; padding: 0 .75rem; }
  .chat aside h2 { display: none; }
  .chat .messages { padding: .25rem .75rem; }
  .chat .composer { padding: .5rem .75rem; }
  .chat[data-tab="chat"] aside, .chat[data-tab="history"] main { display: none; }
}

/* Read-only chat view */
.chat-log { list-style: none; padding: 0; }
.chat-log li { margin: .6rem 0; }
.chat-log time { color: #888; font-size: .8rem; }
.chat-log p { margin: .1rem 0; white-space: pre-wrap; }

/* Presence: everyone else in the document, and who is typing in a chat. */
header .here { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
header .here:empty { display: none; }
header .here li { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: #444; padding: .05rem .5rem; border: 1px solid #e2e2e2; border-radius: 1rem; background: #fafafa; }
header .here li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.chat .typists { min-height: 1.3rem; padding: 0 1rem; font-size: .8rem; color: #777; font-style: italic; }
@media (max-width: 800px) { header .here { order: 4; flex-basis: 100%; } }

/* Widgets: inserting them into a page, and publishing a widget document. */
header .insert { position: relative; font-size: .9rem; }
.editor header .insert button.link { border: 0; background: none; padding: 0; color: #2f5fd0; font-size: .9rem; }
header .insert ul { position: absolute; z-index: 10; right: 0; min-width: 16rem; margin: .3rem 0 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid #ddd; border-radius: .4rem; box-shadow: 0 4px 16px #0002; }
header .insert li button { width: 100%; text-align: left; }
header .insert li + li { margin-top: .3rem; }
header .insert .hint { color: #777; font-size: .8rem; }
header .release { color: #666; font-size: .9rem; }
/* A widget document: its source, and the draft running beside it. */
.editor.widget-doc main { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
.editor wave-scratch { display: block; min-height: 0; overflow: auto; border-left: 1px solid #ddd; }
@media (max-width: 800px) {
  .editor.widget-doc main { grid-template-rows: 1fr auto; grid-template-columns: 1fr; }
  .editor wave-scratch { border-left: 0; border-top: 1px solid #ddd; max-height: 50vh; }
}
/* The script-free view shows each widget's summary. */
.view wave-widget { display: block; margin: 1em 0; padding: 0 1rem; border: 1px solid #e3e3e0; border-radius: 8px; }
.view .widget-name { font-size: .8em; color: #888; margin: .5rem 0 0; }
.view .widget-error { color: #c92a2a; }
/* Widgets in chat messages, and posting them. */
.chat .message wave-widget { margin-top: .3rem; }
.chat .choices { list-style: none; margin: 0; padding: .5rem 1rem; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chat .choices button { font: inherit; padding: .3rem .7rem; cursor: pointer; }
.chat .choices .hint { color: #777; font-size: .8rem; }
.chat .composer button.widget { font-size: 1.2rem; line-height: 1; padding: .3rem .7rem; }

/* Agent tasks (docs/agents.md): asking from a page, cards, a chat's task. */
header .insert .ask-form { position: absolute; z-index: 10; right: 0; width: 22rem; margin-top: .3rem; padding: .5rem; background: #fff; border: 1px solid #ddd; border-radius: .4rem; box-shadow: 0 4px 16px #0002; display: flex; flex-wrap: wrap; gap: .4rem; }
header .insert .ask-form input { flex: 1; min-width: 0; padding: .3rem .5rem; font: inherit; }
header .insert .ask-form .hint { flex-basis: 100%; margin: 0; }
.editor aside .detail a { color: #2f5fd0; }
.view wave-task { display: block; margin: 1em 0; padding: .2rem 1rem; border: 1px solid #e3e3e0; border-left: 3px solid #7048e8; border-radius: 8px; }
.view .task-card p { margin: .3rem 0; }
.view .task-status { color: #777; font-size: .9em; }
.chat header .task-info { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; }
.chat header .task-info .agent { font-weight: 600; }
.chat header .task-info button { font-size: .75rem; padding: .1rem .45rem; }
.task-status { font-size: .8rem; padding: 0 .45rem; border-radius: 1rem; background: #ecebf5; color: #555; }
.task-status.status-working { background: #e7f0ff; color: #1c5fc9; }
.task-status.status-needs-you { background: #fff1d6; color: #9c5b00; }
.task-status.status-error { background: #ffe3e3; color: #c92a2a; }
.page .tasks li { margin: .5rem 0; }
.page .tasks .latest { color: #555; font-size: .9rem; margin-top: .1rem; max-height: 4.2em; overflow: hidden; }
.page .tasks .latest :is(p, ul, ol, pre, blockquote) { margin: 0; }
.page .tasks .latest ul, .page .tasks .latest ol { padding-left: 1.2em; }
.chat .mentions { list-style: none; margin: 0; padding: 0 1rem; }
.chat .mentions:empty { display: none; }
.chat .mentions li { padding: .3rem 0; }
.chat .mentions button { font: inherit; padding: .2rem .6rem; cursor: pointer; }
.chat .mentions .hint { color: #777; font-size: .8rem; }
.chat .message wave-markdown { display: block; margin-top: .15rem; overflow-wrap: anywhere; }
.chat .message wave-markdown > :first-child { margin-top: 0; }
.chat .message wave-markdown > :last-child { margin-bottom: 0; }
.chat .message wave-markdown :is(p, ul, ol, pre, blockquote, h1, h2, h3, h4, h5, h6) { margin: .4em 0; }
.chat .message wave-markdown :is(h1, h2, h3) { font-size: 1.1em; }
.chat .message wave-markdown code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; background: #0000000d; padding: 0 .2em; border-radius: .2em; }
.chat .message wave-markdown pre { white-space: pre-wrap; background: #0000000a; padding: .4em .6em; border-radius: .3em; }
.chat .message wave-markdown pre code { background: none; padding: 0; }
.chat .message wave-markdown blockquote { margin-left: 0; padding-left: .8em; border-left: 3px solid #ccc; color: #555; }
.chat-log .md > :first-child { margin-top: .1rem; }
.chat-log .md :is(p, ul, ol, pre, blockquote) { margin: .3em 0; }
.chat .message wave-markdown ul { list-style: disc; padding-left: 1.4em; }
.chat .message wave-markdown ol { list-style: decimal; padding-left: 1.6em; }
.chat header .task-info { flex-shrink: 0; }
.chat header .task-info :is(a, button) { white-space: nowrap; }
/* Archiving documents from the home page. */
.page form.inline { display: inline; margin: 0 0 0 .3rem; }
.page form.inline button { font-size: .75rem; padding: .05rem .4rem; color: #666; }
.page details.archived { margin-top: 1.5rem; color: #555; }
.page details.archived summary { cursor: pointer; font-weight: 600; }
header .archive-control { display: flex; align-items: baseline; gap: .4rem; font-size: .85rem; }
header .archive-control button { font-size: .75rem; padding: .1rem .45rem; white-space: nowrap; }
header .archived-badge { font-size: .8rem; padding: 0 .45rem; border-radius: 1rem; background: #eee; color: #777; }