/* ── color themes ── monochromatic via HSL ──────────────────────────────── */
/* each theme sets --h (hue) and --s (saturation)                           */
/* all colors derive from those two values so switching themes is instant   */

:root,
[data-theme="green"] {
  --h: 130;
  --s: 60%;
}

[data-theme="blue"] {
  --h: 210;
  --s: 70%;
}

[data-theme="red"] {
  --h: 0;
  --s: 65%;
}

[data-theme="yellow"] {
  --h: 45;
  --s: 75%;
}

[data-theme="purple"] {
  --h: 270;
  --s: 60%;
}

/* ── derived tokens — built from hue + saturation ── */
:root {
  --bg:         hsl(var(--h), var(--s), 4%);
  --surface:    hsl(var(--h), calc(var(--s) / 2), 8%);
  --border:     hsl(var(--h), calc(var(--s) / 2), 16%);
  --fg:         hsl(var(--h), calc(var(--s) / 2), 82%);
  --fg-dim:     hsl(var(--h), calc(var(--s) / 3), 42%);
  --accent:     hsl(var(--h), var(--s), 55%);
  --accent-dim: hsl(var(--h), var(--s), 30%);
  --btn-bg:     hsl(var(--h), calc(var(--s) / 3), 10%);
  --btn-hover:  hsl(var(--h), calc(var(--s) / 2), 14%);
  --btn-active: hsl(var(--h), calc(var(--s) / 2), 20%);
  --font: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
}

/* ── reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── base ── */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── theme switcher bar ── */
#theme-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

#theme-bar span {
  font-size: 10px;
  color: var(--fg-dim);
  margin-right: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}

.theme-dot:hover         { transform: scale(1.2); }
.theme-dot.active        { border-color: var(--fg); }
.theme-dot[data-t="green"]  { background: hsl(130, 60%, 45%); }
.theme-dot[data-t="blue"]   { background: hsl(210, 70%, 50%); }
.theme-dot[data-t="red"]    { background: hsl(0,   65%, 50%); }
.theme-dot[data-t="yellow"] { background: hsl(45,  75%, 50%); }
.theme-dot[data-t="purple"] { background: hsl(270, 60%, 50%); }

/* ── app layout ── */
#app {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── left panel: device ── */
#device-panel {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-right: 1px solid var(--border);
}

/* ── device header ── */
#device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#device-id {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#online-indicator {
  font-size: 10px;
  color: var(--accent);
}

/* ── concept strip ── */
#concept-strip {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 8px;
}

#concept-icons {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--fg-dim);
  flex: 1;
}

#concept-strip.has-concepts #concept-icons {
  color: var(--fg);
}

/* ── 6 button grid ── */
#button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cat-btn {
  background: var(--btn-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
}

.cat-btn:hover {
  background: var(--btn-hover);
  border-color: var(--accent-dim);
}

/* category is selected — waiting for second button press */
.cat-btn.active {
  background: var(--btn-active);
  border-color: var(--accent);
  color: var(--accent);
}

/* this button will produce a concept if pressed now */
.cat-btn.concept-available {
  border-color: var(--accent-dim);
}

.cat-btn.concept-available .btn-label {
  color: var(--accent);
}

.btn-key   { font-size: 9px; color: var(--fg-dim); opacity: 0.5; align-self: flex-end; line-height: 1; }
.btn-icon  { font-size: 22px; }
.btn-label { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── send / clear ── */
#device-actions {
  display: flex;
  gap: 6px;
}

#btn-clear,
#btn-send {
  flex: 1;
  padding: 10px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.1s;
}

#btn-clear {
  background: var(--surface);
  color: var(--fg-dim);
}

#btn-clear:hover { background: var(--btn-hover); color: var(--fg); }

#btn-send {
  background: var(--accent-dim);
  color: var(--fg);
  border-color: var(--accent);
}

#btn-send:hover   { background: var(--accent); color: var(--bg); }
#btn-send:active  { opacity: 0.8; }

/* ── right panel: message log ── */
#message-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#log-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#log-entries {
  flex: 1;
  display: flex;
  flex-direction: column-reverse; /* newest message at bottom */
  gap: 1px;
  overflow-y: auto;
  padding: 12px;
}

.log-empty {
  color: var(--fg-dim);
  font-size: 12px;
  text-align: center;
  padding: 32px;
}

/* ── message entry ── */
.log-entry {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid transparent;
}

.log-entry.sent     { border-left-color: var(--accent-dim); background: var(--surface); }
.log-entry.received { border-left-color: var(--border); }

.log-entry-sender {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.log-entry-icons { font-size: 20px; letter-spacing: 4px; }

.log-entry-text {
  font-size: 13px;
  color: var(--fg);
}

/* ── interpretation options ── ambiguous sequences show multiple ── */
.interpretations {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.interpretation-option {
  font-size: 12px;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.1s;
}

.interpretation-option.primary { color: var(--fg); font-weight: 600; }
.interpretation-option:hover   { color: var(--accent); }

/* ── custom rendering input (simulator-only) ── */
.add-custom        { margin-top: 4px; }

.add-custom-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 2px 0;
  opacity: 0.4;
  transition: opacity 0.1s;
}
.add-custom-btn:hover { opacity: 1; color: var(--accent); }

.add-custom-form {
  display: none;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
}

.add-custom-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 6px;
  outline: none;
}
.add-custom-input:focus { border-color: var(--accent-dim); }

.add-custom-confirm {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--fg);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.add-custom-confirm:hover { background: var(--accent); color: var(--bg); }

/* ── scrollbar ── */
#log-entries::-webkit-scrollbar       { width: 4px; }
#log-entries::-webkit-scrollbar-track { background: transparent; }
#log-entries::-webkit-scrollbar-thumb { background: var(--border); }