:root { color-scheme: light dark; }
  * { box-sizing: border-box; }
  body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         background: #0f1115; color: #e7e9ee; }
  header { padding: 12px 16px; border-bottom: 1px solid #232734; display: flex; gap: 10px;
           align-items: center; flex-wrap: wrap; background: #141821; position: sticky; top: 0; }
  header h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .2px; }
  header .who { color: #8b93a7; font-size: 13px; }
  header .spacer { flex: 1; }
  input, button { font: inherit; }
  input { background: #0f1115; border: 1px solid #2b3040; color: #e7e9ee;
          padding: 8px 10px; border-radius: 8px; }
  button { background: #2d6cdf; color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
  button.secondary { background: #232734; color: #c7cdda; }
  button:disabled { opacity: .5; cursor: default; }
  #setup { max-width: 560px; margin: 8vh auto; padding: 24px; background: #141821;
           border: 1px solid #232734; border-radius: 14px; }
  #setup h2 { margin: 0 0 6px; font-size: 18px; }
  #setup p { color: #8b93a7; margin: 0 0 16px; }
  #setup .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  #setup label { font-size: 12px; color: #8b93a7; }
  #setup .row { display: flex; gap: 8px; }
  #setup .row input { flex: 1; }
  details { margin-top: 16px; }
  summary { cursor: pointer; color: #8b93a7; }
  #chatWrap { display: none; flex-direction: column; height: calc(100vh - 53px); }
  #log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
  .msg { max-width: 76%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
  .me { align-self: flex-end; background: #2d6cdf; color: #fff; border-bottom-right-radius: 4px; }
  .tekka { align-self: flex-start; background: #1d222e; border: 1px solid #2b3040; border-bottom-left-radius: 4px; }
  .sys { align-self: center; color: #8b93a7; font-size: 12px; font-style: italic; max-width: 90%; text-align: center; }
  .err { align-self: center; color: #ff7b7b; font-size: 12.5px; max-width: 90%; text-align: center; }
  .meta { font-size: 11px; color: #8b93a7; margin-top: 4px; }
  pre.debug { font-size: 11px; color: #7f8aa3; background: #0c0e13; border: 1px solid #232734;
              border-radius: 8px; padding: 8px; overflow-x: auto; align-self: stretch; margin: 0; }
  #status { text-align: right; font-size: 12px; color: #8b93a7; padding: 4px 16px 0; min-height: 17px; }
  #composer { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #232734; background: #141821; align-items: center; }
  #composer input { flex: 1; }
  /* The orb: the single voice affordance, in the dock where a mic button would be. */
  .orb { width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%;
         background: #1d222e; border: 1px solid #2b3040; display: flex; align-items: center; justify-content: center; }
  .orb.listening { background: #2f7d6b; border-color: #2f7d6b; }
  .orb.thinking { background: #3a3f4d; }
  .orb.speaking { background: #1f3b34; border-color: #2f7d6b; }
  .orb .inner { width: 14px; height: 14px; border-radius: 50%; background: #5fae9b; }
  .orb.listening .inner { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
  .orb.speaking .inner { background: #2f7d6b; }
  label.dbg { font-size: 12px; color: #8b93a7; display: flex; align-items: center; gap: 5px; }
  /* whitehat 2026-08-25-WEBSCOPE1 (follow-up): these three rules were inline style attributes in the
     markup. A strict style-src 'self' blocks style ATTRIBUTES exactly as it blocks an inline style
     element, so extracting the stylesheet is not enough on its own. #bar is the load-bearing one: the header
     rule above sets display:flex, so without an id-level override the signed-out page would render a
     header full of sign-out/debug controls. show() writes els.bar.style.display inline, which
     outranks this (CSSOM writes are not CSP-restricted). The old flex:1 on #code is already supplied
     by the #setup .row input rule above. */
  #bar { display: none; }
  #inviteBox .row { margin-top: 10px; }
  #speaker { width: 130px; }