:root {
  --black: #000;
  --white: #fff;
  --green: #228B22;
  --orange: #ff7e30;
  --yellow: #FFD400;
  --line: 2px solid var(--black);
}
* { box-sizing: border-box; border-radius: 0; cursor: default; }
html, body { margin: 0; height: 100%; background: var(--white); color: var(--black); }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
button, input, textarea { font: inherit; text-transform: inherit; color: inherit; }
button {
  background: var(--white); border: 0; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
button:disabled { color: rgba(0,0,0,.3); }
button.cell.on:disabled { color: var(--white); }
#root { height: 100%; }

/* ---------- login ---------- */
.login {
  min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.login form { display: grid; grid-template-columns: 1fr auto; width: 100%; max-width: 420px; border: var(--line); }
.login input {
  border: 0; border-right: var(--line); padding: 14px; outline: none; min-width: 0;
  text-transform: none; background: var(--white);
}
.login button { padding: 14px 18px; }
.login button:active, .login button:hover { background: var(--black); color: var(--white); }
.login .err { grid-column: 1 / -1; border-top: var(--line); padding: 10px 14px; background: var(--orange); }

/* ---------- app ---------- */
.app { height: 100%; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; border-left: var(--line); border-right: var(--line); }
.bar {
  display: grid; grid-template-columns: 1fr 160px;
  border-bottom: var(--line); flex: none;
}
.cell {
  border-right: var(--line); padding: 12px 6px; text-align: center; min-width: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1.15;
}
.bar > .cell:last-child { border-right: 0; }
.bar > .cell:only-child { grid-column: 2; border-left: var(--line); }
.cell.status { justify-content: flex-start; padding-left: 14px; white-space: nowrap; overflow: hidden; }
.cell.status.ready { background: var(--green); color: var(--white); }
.cell.status.busy { background: var(--yellow); }
.cell.status.bad { background: var(--orange); }
button.cell:hover, button.cell:active { background: var(--black); color: var(--white); }
button.cell.on { background: var(--black); color: var(--white); }
button.cell:disabled:hover { background: var(--white); color: var(--black); }

.notice { border-bottom: var(--line); padding: 10px 14px; background: var(--orange); flex: none; }

.log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.msg { border-bottom: var(--line); display: grid; grid-template-columns: 120px 1fr; }
.msg .who { padding: 14px; border-right: var(--line); }
.msg.user .who { background: var(--black); color: var(--white); }
.msg .body { padding: 14px; min-width: 0; overflow-wrap: anywhere; }
.msg .text { white-space: pre-wrap; }
.msg .text + .text, .msg pre + .text, .msg .text + pre { margin-top: 0; }
.msg pre {
  text-transform: none; font-family: Menlo, Consolas, monospace; font-weight: 400; font-size: 13px;
  border: var(--line); padding: 10px; margin: 8px 0; overflow-x: auto; white-space: pre;
}
.think {
  border-left: 6px solid var(--yellow); padding: 0 0 0 10px; margin-bottom: 12px;
  white-space: pre-wrap; font-weight: 400; text-transform: none;
}
.pending { color: var(--orange); }
.caret { display: inline-block; width: .6em; height: 1em; background: var(--black); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.compose { display: grid; grid-template-columns: 1fr 120px; border-top: var(--line); flex: none; padding-bottom: env(safe-area-inset-bottom); }
.compose textarea {
  border: 0; border-right: var(--line); padding: 14px; resize: none; outline: none; min-height: 56px; max-height: 40vh;
  text-transform: none; background: var(--white); font-size: 16px;
}
.compose button:hover, .compose button:active { background: var(--black); color: var(--white); }
.compose button:disabled:hover { background: var(--white); color: var(--black); }

@media (max-width: 720px) {
  body { font-size: 14px; }
  .app { border-left: 0; border-right: 0; }
  .bar { grid-template-columns: 1fr 120px; }
  .cell { padding: 12px 4px; font-size: 13px; }
  .msg { grid-template-columns: 1fr; }
  .msg .who { border-right: 0; border-bottom: var(--line); padding: 8px 14px; }
  .compose { grid-template-columns: 1fr 88px; }
}