/* ClawRoom.
   The page has one job beyond working: make the line between what is yours and
   what the room can see impossible to miss. Everything left of that line is
   warm and locked, everything right of it is lit. */

:root{
  --bg:#0b1111; --panel:#131d1d; --panel2:#0f1818; --line:#1e2f30; --line2:#2a4142;
  --ink:#e9f4f3; --dim:#7e9998; --dimmer:#566d6d;
  --teal:#3fa9ac; --teal-dim:#3fa9ac33;
  --ok:#4ec9a0; --bad:#e2635f; --warn:#e0a44a;
  --priv:#8c7a5c; --priv-bg:#171512;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px;
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1220px;margin-inline:auto;padding:24px 20px 72px}

header{display:flex;align-items:center;gap:12px;margin-bottom:3px}
header svg{flex:none}
h1{font-size:19px;margin:0;font-weight:650;letter-spacing:-.015em}
.tag{color:var(--dim);font-size:13.5px;margin:0 0 22px 44px}

/* the top bar */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 11px;
  border-radius:20px;border:1px solid var(--line2);background:var(--panel);color:var(--dim)}
.pill i{width:8px;height:8px;border-radius:50%;display:block;font-style:normal}
.status{font-family:var(--mono);font-size:11.5px;color:var(--dimmer)}
.status.live{color:var(--ok)}
.status.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:6px;vertical-align:middle;animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.bar .status:last-child{margin-left:auto}

button,select{font:inherit;font-size:13px;padding:6px 13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line2);background:#182525;color:var(--ink);transition:border-color .15s,background .15s}
button:hover,select:hover{border-color:var(--teal)}
button.primary{background:var(--teal);border-color:var(--teal);color:#04201f;font-weight:620}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
button:disabled{opacity:.5;cursor:default}
button.small,select{font-size:12px;padding:4px 11px}
select{border-radius:20px}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* the live tool surface. it changes when you switch rooms, which is the point */
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chip{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;
  background:#162222;border:1px solid var(--line2);color:var(--dim);
  animation:in .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* zones */
.grid{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.zone{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.zone.priv{background:var(--priv-bg);border-color:#2b2519}
.zhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:11px 15px;border-bottom:1px solid var(--line);background:var(--panel2)}
.zone.priv .zhead{background:#141210;border-bottom-color:#2b2519}
.zhead h2{font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin:0;font-weight:640;color:var(--dim)}
.zone.priv .zhead h2{color:var(--priv)}
.zhead .note{font-size:11px;color:var(--dimmer);font-family:var(--mono)}
.zbody{padding:13px 15px}
.zbody p{margin:0 0 8px;font-size:13.5px}
.empty{color:var(--dimmer);font-size:12.5px;font-style:italic;line-height:1.6}

/* the board */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);font-weight:640;padding:0 8px 8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid #172424;vertical-align:middle}
tr:last-child td{border-bottom:0}
.opt{font-weight:560}
.meta{color:var(--dim);font-family:var(--mono);font-size:11.5px}
.state{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:5px;
  border:1px solid var(--line2);background:#182525;color:var(--dim)}
.state.s-review{border-color:#6b5730;color:var(--warn);background:#241d12}
.state.s-done{border-color:#2f6b52;color:var(--ok);background:#132720}
.state.s-blocked{border-color:#6b3230;color:var(--bad)}

/* approvals. the one place the room stops and waits for a person */
.ask{margin-bottom:12px;padding:14px 15px;border-radius:var(--r);
  border:1px solid #6b5730;background:linear-gradient(#241d12,#1d1810);
  animation:rise .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ask h3{margin:0 0 5px;font-size:14px;font-weight:600}
.ask p{margin:0 0 10px;font-size:12.5px;color:var(--dim)}
.banner{margin-bottom:12px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  border:1px solid var(--line2);background:var(--panel2);line-height:1.55}
.banner.warn{border-color:#6b5730;background:#211b11}

/* the agent */
.chatzone #chat{padding:11px 15px;max-height:300px;overflow:auto;scroll-behavior:smooth}
.line{padding:4px 0;font-size:13.5px;line-height:1.55;animation:in .24s ease both}
.line.you b{color:var(--teal);font-weight:620;margin-right:6px}
.line.note{color:var(--warn);font-size:12.5px}
.line.call{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:11.5px;
  padding:3px 0 3px 9px;border-left:2px solid var(--teal-dim)}
.line.call .zn{flex:none;width:46px;color:var(--dimmer)}
.line.call .what{color:var(--teal);font-weight:620}
.line.call .det{color:var(--dim)}
.line.call.pending{border-left-color:var(--warn)}
.line.call.pending .what{color:var(--warn)}
/* Things to click before you have thought of anything to type. Each one was
   run against the deployed room first, and only the ones that came back with a
   real answer are here. */
.tries{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 15px 11px}
.tries .trylabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer);margin-right:2px}
button.try{font:inherit;font-size:12px;color:var(--dim);background:#0a1010;
  border:1px solid var(--line2);border-radius:999px;padding:4px 11px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
button.try:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}
button.try:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
.composer{display:flex;gap:8px;padding:11px 15px;border-top:1px solid var(--line)}
.composer input{flex:1;font:inherit;font-size:13.5px;background:#0a1010;color:var(--ink);
  border:1px solid var(--line2);border-radius:8px;padding:8px 11px}
.composer input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}

/* the work log */
#feed{padding:11px 15px;max-height:300px;overflow:auto;font-family:var(--mono);font-size:12px}
.ev{display:flex;gap:10px;padding:3px 0;align-items:baseline;animation:in .24s ease both}
.ev .who{flex:none;width:80px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .zn{flex:none;width:46px;color:var(--dimmer)}
.ev .what{color:var(--ink)}
.ev .det{color:var(--dim)}

/* lobby */
.lede{color:var(--dim);font-size:14.5px;max-width:62ch;margin:0 0 20px 44px;line-height:1.65}
.youare{margin:0 0 20px 44px;font-size:13px;color:var(--dim)}
.youare input{font:inherit;font-size:13px;background:#0a1010;color:var(--ink);
  border:1px solid var(--line2);border-radius:7px;padding:5px 9px;margin:0 5px}
.youare input:focus{outline:none;border-color:var(--teal)}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.roomcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;
  transition:border-color .18s,transform .18s}
.roomcard:hover{border-color:var(--line2);transform:translateY(-1px)}
.roomcard h3{margin:0 0 6px;font-size:15px;font-weight:620}
.roomcard p{margin:0 0 9px;font-size:13px;color:var(--dim);line-height:1.55}
.btn{display:inline-block;font-size:12.5px;padding:6px 12px;border-radius:8px;text-decoration:none;
  border:1px solid var(--line2);background:#182525;color:var(--ink);transition:border-color .15s}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#04201f;font-weight:620}
.btn:hover{border-color:var(--teal)}
.foot{margin-top:26px;font-size:12.5px;color:var(--dimmer);line-height:1.7}
.foot a{color:var(--teal);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* diagnostics pages */
.verdict{font-weight:700}
.verdict.p{color:var(--ok)} .verdict.f{color:var(--bad)}
.dim{color:var(--dim)}

/* making a room */
.make label{display:block;margin-bottom:13px;font-size:12.5px;color:var(--dim)}
.make input,.make textarea,.make select{display:block;width:100%;margin-top:5px;font:inherit;
  font-size:13.5px;background:#0a1010;color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:8px 11px}
.make textarea{resize:vertical;line-height:1.6;font-family:var(--mono);font-size:12.5px}
.make input:focus,.make textarea:focus,.make select:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim)}
.make .empty{display:block;margin-top:5px}
.mine{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #172424}
.mine:last-child{border-bottom:0}
.mine a{color:var(--teal);text-decoration:none;font-size:13.5px;flex:1}
.mine a:hover{text-decoration:underline}

/* The front door's first offer. A visitor who has to name a room and fill in a
   board before seeing anything will not see anything, and a visitor alone in a
   room cannot see the only thing that matters, so the demo opens two windows. */
.zone.demo{border-color:var(--line2);background:linear-gradient(180deg,#101c1c 0%,var(--panel) 60%)}
.zone.demo .zhead h2{color:var(--teal)}
.demoline{color:var(--dim);max-width:64ch;line-height:1.65}

/* Steward controls that end something. Red only on the button that does. */
button.danger{border-color:#5a2a2a;color:#e0a0a0}
button.danger:hover{background:#2a1414}
table.usage{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
table.usage th{text-align:left;color:var(--dimmer);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:0 8px 6px 0}
table.usage td{padding:5px 8px 5px 0;border-top:1px solid var(--line)}

/* The member's own console. Dark on purpose: it is the one box on the page
   whose contents the room never gets. */
pre.tty { background: #14161a; color: #d7dbe0; border-radius: 10px; padding: 12px 14px; margin: 0 0 10px;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto; }
pre.tty b { color: #9ad1ff; font-weight: 600; }

/* Borrowed tools. The tier a tool got is the first thing to read, so it is
   coloured rather than left as another grey chip. */
.srclist { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.srclist .chip { font-size: 11.5px; }
.chip.work { border-color: #2f4a4a; color: #9fd6cf; }
.chip.share { border-color: #4a4630; color: #ddc98a; }
.chip.commit { border-color: #5a3540; color: #eaa0ae; }

/* Bring your own model. A quiet row under the composer, because most people
   will never touch it, and a form that opens in place when they do. */
.modelrow { margin: 8px 0 0; }
.modelrow b { color: #cfd8d6; font-weight: 600; }
button.linky { background: none; border: 0; color: #6fbfb5; cursor: pointer; font: inherit; padding: 0 0 0 6px; text-decoration: underline; }
.modelform { border-top: 1px solid #1e2726; margin-top: 10px; padding-top: 10px; display: grid; gap: 8px; }
.modelform select, .modelform input { width: 100%; }

/* What is actually being approved. The approver reads the artefact, never the
   conversation that produced it. */
.asked { border-left: 2px solid #2f4a4a; margin: 10px 0 12px; padding: 2px 0 2px 12px; }
.askedbit { margin: 6px 0; color: #d3dbd9; font-size: 13.5px; line-height: 1.55; }
.askedbit code { font-size: 12.5px; color: #9fd6cf; }
.asklabel { display: block; color: #7f9a96; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; text-transform: uppercase; }

/* The connect-your-own-agent block reuses the console's dark box, because it
   is the same kind of thing: something you paste into a terminal. A command
   with a URL in it must not wrap mid URL, so it scrolls sideways instead. */
.modelform pre.tty { max-height: 220px; margin-bottom: 4px; white-space: pre; overflow-x: auto; font-size: 11.5px; }
/* The bridge commands are the one block a person has to read all of, and one
   of them carries a room link long enough to run off the column. Wrapping
   beats a horizontal scrollbar nobody notices; the Copy button still hands
   over the real text, and selecting the wrapped text gives the same
   characters. */
.modelform pre#bridgecmd { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; max-height: none; }
.modelform a.ghost { display: inline-block; text-decoration: none; color: #cfd8d6; }