/* The workspace pane.
   Everything here inks in the app's own tokens rather than a literal, because a hex
   literal in a component stylesheet is wrong in one of the two themes — a rule this
   codebase has paid for more than once. The one exception in the product is anything
   painted OVER video, which is deliberately theme-independent; the present overlay
   below is exactly that case, so its scrim does not flip. */

/* An id selector beats the browser's own `[hidden] { display: none }`, so a pane given
   a display here is laid out whether or not it is hidden — full height, transparent,
   and swallowing every click aimed at what is behind it. This shipped: the mode button
   was unclickable in a real room because an invisible workspace pane was on top of it.
   The rule has now cost this codebase twice, so the test below it asserts the property
   for EVERY hidden pane rather than for this one. */
#wsPane { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
#wsPane[hidden] { display: none; }

.ws-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-tools .ws-spacer { flex: 1 1 auto; }
.ws-tools button { flex: 0 0 auto; }

/* The board itself scrolls INSIDE its own box. Following the room is not mirroring
   it: your scroll and your zoom are yours, and a pane that pushes the page sideways
   is the 47px bug in a different costume. */
.ws-canvas {
  flex: 1 1 auto; min-height: 180px; min-width: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 2px;
}
.ws-canvas svg { display: block; max-width: none; }   /* the box scrolls, the drawing does not shrink */
/* Sticky to the LEFT edge of the scrolling box, so the sentence explaining that the
   board runs off the side is not itself off the side. */
.ws-wider {
  position: sticky; left: 0; width: 0; min-width: 100%;
  padding: 4px 10px 8px; font-size: 11.5px; line-height: 1.45; color: var(--dim);
}

.ws-empty { padding: 22px 18px; color: var(--mid); }
.ws-empty h4 { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.ws-empty p { margin: 0; font-size: 12.5px; line-height: 1.55; }
/* Two paragraphs at margin 0 are one paragraph. What the board will do on its own and
   what you can ask it for are different things and have to look like it. */
.ws-empty p + p { margin-top: 10px; }

#wsStatus:empty { display: none; }
#wsStatus > * {
  font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 9px;
  margin-bottom: 6px; border: 1px solid var(--line); background: var(--sunk); color: var(--mid);
}
#wsStatus .ws-working { border-color: var(--acc); color: var(--ink); }
/* A refusal is news, and it looks like news. A board that quietly drops half of what
   it was asked for earns exactly as much trust as one that invents things. */
#wsStatus .ws-refused { border-color: var(--warn); color: var(--ink); }
#wsStatus .ws-refused b { color: var(--warn); }
/* The board opened itself. The room is told so, and refusing it is one control in the
   same sentence — not a menu somewhere else. */
#wsStatus .ws-unasked { border-style: dashed; }
#wsStatus .ws-unasked button { margin-top: 6px; font-size: 12px; padding: 4px 10px; }

.ws-h { margin: 4px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ws-log { max-height: 132px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.ws-log-row { font-size: 12px; line-height: 1.45; color: var(--mid); }
.ws-log-row b { color: var(--ink); font-weight: 600; }
.ws-log-row.auto b { color: var(--dim); font-weight: 500; font-style: italic; }

.ws-ask { display: flex; gap: 8px; }
.ws-ask input {
  flex: 1 1 auto; min-width: 0;
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); padding: 9px 11px; font: inherit; font-size: 13px;
}
.ws-ask input:focus { outline: none; border-color: var(--acc); }
/* Speaking to it is the point; the box is what you use when you cannot. */
.ws-say { margin: 7px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.ws-say b { color: var(--mid); font-weight: 600; }

/* the count on the tab */
.wscount {
  display: inline-block; margin-left: 5px; min-width: 16px; padding: 0 4px;
  font-size: 10px; font-style: normal; line-height: 15px; text-align: center;
  border-radius: 8px; background: var(--acc); color: #fff;
}

/* ── show everyone ───────────────────────────────────────────────────────
   Over the video, so this one is theme-independent by design. */
.wspresent {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 22px; background: rgba(5, 8, 23, .82); backdrop-filter: blur(3px);
}
.wspresent[hidden] { display: none; }
.wsp-canvas {
  /* No 1400px cap. A board on the wall should use the wall: capping it at 1400 on a
     1920 screen bought nothing and hid the last phase of a six-phase timeline behind
     a scrollbar nobody could see. */
  max-width: 100%; max-height: 78vh; overflow: auto; min-width: 0;
  background: var(--panel); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
}
.wsp-canvas svg { display: block; max-width: none; }
.wsp-bar { display: flex; align-items: center; gap: 10px; color: #E8ECF7; font-size: 12.5px; }
.wsp-bar .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
  .wsp-canvas { max-height: 68vh; }
  .ws-log { max-height: 96px; }
}