/* DaJoesta build interface. Same palette as the game so the two feel like one
   thing, but laid out as a tool: dense, keyboard-friendly, nothing animated. */

:root {
  --ink: #e8e6e1;
  --dim: rgba(232, 230, 225, 0.55);
  --bg: #0d1016;
  --panel: #151a23;
  --edge: rgba(255, 255, 255, 0.12);
  --accent: #ffd166;
  --go: #4caf7d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
}

/* --- top bar ---------------------------------------------------------- */

#bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
  height: 46px;
}

.brand { letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
.brand b { color: var(--accent); }
.spacer { flex: 1; }

button, select, input[type=text], input[type=number], textarea {
  background: #1d232e;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
}

button { cursor: pointer; }
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { border-color: var(--accent); color: var(--accent); }
button.go { border-color: var(--go); color: var(--go); }
button:disabled { opacity: 0.35; cursor: default; }
button:disabled:hover { border-color: var(--edge); color: var(--ink); }

#status { font-size: 11px; color: var(--dim); min-width: 130px; text-align: right; }

/* --- layout ------------------------------------------------------------ */

main {
  display: grid;
  grid-template-columns: 190px 1fr 280px;
  height: calc(100% - 46px);
}

aside {
  background: var(--panel);
  overflow-y: auto;
  padding: 12px;
}

#tools { border-right: 1px solid var(--edge); }
#side { border-left: 1px solid var(--edge); padding: 0; }

h3 {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 14px 0 7px;
}
h3:first-child { margin-top: 0; }

.hint { font-size: 11px; color: var(--dim); margin: 8px 0 0; }

/* --- tools + palette ---------------------------------------------------- */

.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tools button { padding: 6px 4px; font-size: 11px; }
.tools button.on { background: var(--accent); color: #17202b; border-color: var(--accent); }

.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

.swatch {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background-size: cover;
}
.swatch.on { border-color: var(--accent); }
.swatch.empty {
  background: repeating-linear-gradient(45deg, #232934 0 5px, #1a1f28 5px 10px);
}
.swatch span {
  position: absolute; inset: auto 0 -1px 0;
  font-size: 8px; text-align: center;
  background: rgba(0,0,0,0.55);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

#entityKind { width: 100%; }

/* --- canvas ------------------------------------------------------------- */

#stage { position: relative; overflow: hidden; background: #070a0e; }
#edit { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }

#coords {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--dim);
  pointer-events: none;
}

/* --- inspector ---------------------------------------------------------- */

.tabs { display: flex; border-bottom: 1px solid var(--edge); }
.tabs button {
  flex: 1; border: 0; border-radius: 0; background: transparent;
  padding: 11px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
}
.tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.tab { display: none; padding: 12px; }
.tab.on { display: block; }

.field { margin-bottom: 11px; }
.field label {
  display: block;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 4px;
}
.field input, .field select, .field textarea { width: 100%; }
.field textarea { min-height: 80px; resize: vertical; }
.row { display: flex; gap: 8px; }
.row .field { flex: 1; }

.note {
  font-size: 11px; color: var(--dim);
  border-left: 2px solid var(--edge);
  padding-left: 9px; margin: 12px 0;
}

.danger { border-color: #c25b5b; color: #e08585; }
.danger:hover { border-color: #e08585; color: #e08585; }

/* --- helper chat ---------------------------------------------------------- */

.chat {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #11151d;
  padding: 10px;
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.bubble {
  border-radius: 8px;
  padding: 8px 11px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;      /* the helper's replies contain real line breaks */
  word-break: break-word;
}

.bubble.user {
  background: #23303f;
  margin-left: 24px;
}

.bubble.assistant {
  background: #1d232e;
  border-left: 2px solid var(--accent);
  margin-right: 12px;
}

.chat-input { width: 100%; min-height: 62px; resize: vertical; margin-bottom: 8px; }

/* --- ideas waiting on a person -------------------------------------------- */

.idea {
  border: 1px solid var(--edge);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.idea.wait  { border-left-color: #7a869a; }
.idea.doing { border-left-color: var(--accent); }
.idea.done  { border-left-color: var(--go); }
.idea.no    { border-left-color: #c25b5b; }

.chip {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 5px;
}

.idea.doing .chip { background: rgba(255, 209, 102, 0.18); color: var(--accent); }
.idea.done  .chip { background: rgba(76, 175, 125, 0.18); color: var(--go); }
.idea.no    .chip { background: rgba(194, 91, 91, 0.18); color: #e08585; }

.idea-text { line-height: 1.45; white-space: pre-wrap; }

.idea-reply {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--edge);
  color: var(--dim);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* --- sign-in dialog ------------------------------------------------------ */

#loginBox {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 22px;
  width: min(340px, calc(100% - 32px));
}
#loginBox::backdrop { background: rgba(0, 0, 0, 0.55); }
#loginBox h3 { margin: 0 0 4px; color: var(--accent); }
#loginBox label {
  display: block; margin: 14px 0 4px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
#loginBox input { width: 100%; }
.dlg-row { display: flex; gap: 8px; margin-top: 18px; }
.dlg-row button { flex: 1; }
.err { color: #e08585; font-size: 11px; min-height: 15px; margin: 8px 0 0; }

/* Signed-out state: writing is pointless until you are. */
body.offline #btnPublish,
body.signedout #btnPublish { opacity: 0.35; pointer-events: none; }
#btnAuth.in { border-color: var(--go); color: var(--go); }