/* Minimal on purpose. Three columns, one accent, no chrome that does not say
   something: this is a desk people keep open all day beside four other tabs.

   Dark by default and light when the device asks, because the room is read at
   7am and at 11pm by the same people. */
:root {
  --bg: #0b0b0c;  --bg-1: #121214;  --bg-2: #17171a;
  --fg: #ececed;  --fg-dim: #a4a4ad;  --fg-faint: #76767f;
  --line: #242428; --line-2: #32323a;
  --accent: #d2622e; --accent-soft: #d2622e24;
  --good: #3f9e63; --bad: #d4594f; --warn: #c2922f;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --rail: 248px; --files: 272px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfa; --bg-1: #ffffff; --bg-2: #f3f3f1;
    --fg: #1b1b1d; --fg-dim: #55555d; --fg-faint: #85858e;
    --line: #e4e4e1; --line-2: #d2d2ce;
    --accent-soft: #d2622e1f;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
.grow { flex: 1 1 auto; }
.dim { color: var(--fg-faint); }
.mark { font-weight: 650; letter-spacing: -.02em; }

.btn {
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg);
  border-radius: 8px; padding: 7px 13px; cursor: pointer; line-height: 1.2;
}
.btn:hover { border-color: var(--fg-faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .55; cursor: default; }
.icon {
  border: 0; background: none; color: var(--fg-faint); cursor: pointer;
  padding: 4px 7px; border-radius: 7px; font-size: 14px;
}
.icon:hover { background: var(--bg-2); color: var(--fg); }

/* ------------------------------------------------------------- the frame */

#app { display: grid; grid-template-columns: var(--rail) 1fr 0; height: 100dvh; }
#app.showfiles { grid-template-columns: var(--rail) 1fr var(--files); }

#rail { display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); background: var(--bg-1); }
.railhead { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.railhead .mark { flex: 1 1 auto; font-size: 14px; }
.railscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 8px; }
.railfoot { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); }
.railfoot .who { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiet { color: var(--fg-faint); text-decoration: none; padding: 2px 5px; }
.quiet:hover { color: var(--fg); }
.face { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-2); font-size: 10px; overflow: hidden; flex: 0 0 auto; }
.face img { width: 100%; height: 100%; object-fit: cover; }

/* A session in the list. The title, who is in it, and whether it is thinking. */
.s { display: block; width: 100%; text-align: left; border: 0; background: none;
  color: inherit; cursor: pointer; padding: 8px 9px; border-radius: 9px; margin-bottom: 1px; }
.s:hover { background: var(--bg-2); }
.s.on { background: var(--accent-soft); }
.s .t { display: block; font-size: 13px; line-height: 1.35; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.s.on .t { font-weight: 600; }
.s .m { display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 11px; color: var(--fg-faint); }
.s .m .peek { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--fg-faint); }
.dot.working { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.dot.error { background: var(--bad); }
@keyframes pulse { 50% { opacity: .25; } }
.empty { padding: 22px 10px; text-align: center; color: var(--fg-faint); font-size: 12.5px; }

/* --------------------------------------------------------------- middle */

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); }
#title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state { font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); }
#fileCount { font-size: 11px; color: var(--fg-faint); margin-right: 3px; }

#thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 760px; }
.msg .head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px;
  font-size: 11.5px; color: var(--fg-faint); }
.msg .head .n { color: var(--fg-dim); font-weight: 600; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.msg.person .body { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px; }
.msg.note { color: var(--fg-faint); font-size: 12px; }
.msg.note .body { font-style: italic; }
.msg.agent .body a { color: var(--accent); }
.doing { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-faint);
  font-family: var(--mono); font-size: 11.5px; }
.cursor { display: inline-block; width: 7px; height: 14px; vertical-align: -2px;
  background: var(--accent); animation: pulse .9s ease-in-out infinite; }

#composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 14px;
  border-top: 1px solid var(--line); }
#input { flex: 1 1 auto; min-width: 0; resize: none; max-height: 180px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 9px 12px; line-height: 1.5; }
#input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#composer .btn { flex: 0 0 auto; height: 38px; }

/* ---------------------------------------------------------- attachments */

#files { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--line); background: var(--bg-1); }
#app:not(.showfiles) #files { display: none; }
.fileshead { display: flex; align-items: center; gap: 4px; padding: 11px 10px 9px 14px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); }
.filescroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.filescroll .hint, #filehint { color: var(--fg-faint); font-size: 11.5px; }
#filehint { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); }

.f { display: block; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; margin-bottom: 7px; background: var(--bg-2); }
.f img { display: block; width: 100%; height: 108px; object-fit: cover; object-position: top;
  background: var(--bg); }
.f .meta { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.f .nm { flex: 1 1 auto; min-width: 0; font-size: 11.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.f .sz { font-size: 10.5px; color: var(--fg-faint); font-family: var(--mono); }
.f a.nm { color: inherit; text-decoration: none; }
.f a.nm:hover { color: var(--accent); }

/* ------------------------------------------------------------ the rest */

#drop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: #0008; backdrop-filter: blur(2px); color: #fff; font-size: 15px; }
/* An author rule with `display` beats the browser's own [hidden] rule, so
   without this the overlay is painted over the whole desk from the moment
   the page loads and never goes away. */
#drop[hidden], #toast[hidden] { display: none; }
#drop span { border: 2px dashed #fff6; border-radius: 14px; padding: 26px 38px; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 9px 14px; font-size: 13px; box-shadow: 0 8px 26px #0006; max-width: 80vw; }
#toast.err { border-color: var(--bad); color: var(--bad); }

body.plain { display: grid; place-items: center; }
.card { text-align: center; max-width: 330px; padding: 30px; }
.card h1 { font-size: 19px; margin: 0 0 10px; }
.card p { color: var(--fg-dim); margin: 0 0 16px; }
.card .btn { display: inline-block; text-decoration: none; }
.card .hint { font-size: 12px; color: var(--fg-faint); margin: 14px 0 0; }

.only-narrow { display: none; }
/* On a phone it is one pane at a time: the list, or the room, or the files. */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  #app.showfiles { grid-template-columns: 1fr; }
  #rail { display: none; }
  #app.atlist #rail { display: flex; }
  #app.atlist #main { display: none; }
  #app.showfiles #main { display: none; }
  #app.showfiles #files { display: flex; }
  .only-narrow { display: inline-block; }
  #thread { padding: 14px 12px 6px; }
}