/* milkbot.ai — dark, clean, minimal */

:root {
  --bg: #0d0d0d;
  --bg-hover: #141414;
  --fg: #e6e6e6;
  --fg-dim: #8a8a8a;
  --border: #333333;
  --border-hover: #555555;
  --online: #00ff88;
  --offline: #ff4444;
  --unknown: #666666;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Monospace for labels */
.logo,
.tile-name,
.tile-os,
.card-label,
.agent-name,
.back {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* ---------- status dots ---------- */

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--unknown);
  transition: background 0.2s ease;
}

.dot-online {
  background: var(--online);
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.55);
}

.dot-offline {
  background: var(--offline);
}

.dot-unknown {
  background: var(--unknown);
}

/* ---------- homepage ---------- */

.home {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.logo {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* visually centers letter-spaced text */
  color: var(--fg-dim);
  margin-bottom: 44px;
}

.group {
  margin-bottom: 40px;
}

.group-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  margin: 0 0 16px 4px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 156px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.tile:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.tile .dot {
  width: 12px;
  height: 12px;
}

.tile-name {
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  margin-top: auto;
}

.tile-os {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}

/* Dashboard tiles glow green on hover to distinguish them from terminals. */
.tile-dash:hover {
  border-color: var(--online);
}

/* ---------- agent page ---------- */

:root {
  --topbar-h: 52px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.back {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1;
}

.back:hover {
  color: var(--fg);
}

.agent-name {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}

.authorize {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
}

.authorize:hover {
  color: var(--fg);
  border-color: var(--border-hover);
}

/* ---------- hint banner ---------- */

.hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 0.8rem;
  color: #d8d2b0;
  background: #1c1a10;
  border-bottom: 1px solid #3a3520;
}

.hint strong {
  color: #fff;
}

.hint-reload {
  margin-left: auto;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
}

.hint-close {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--fg-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hint-close:hover {
  color: var(--fg);
}

/* ---------- terminals: fill the viewport ---------- */

.terminals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  height: calc(100vh - var(--topbar-h));
}

/* When the hint banner is visible, subtract its height too. */
body.has-hint .terminals {
  height: calc(100vh - var(--topbar-h) - 41px);
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow the iframe to shrink within the grid row */
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 6px;
}

.card-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--fg-dim);
}

.card-open {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 7px;
}

.card-open:hover {
  color: var(--fg);
  border-color: var(--border-hover);
}

.card-max {
  margin-left: auto;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}

.card-max:hover {
  color: var(--fg);
  border-color: var(--border-hover);
}

.card iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 1px solid #333;
  border-radius: 4px;
  background: #000;
}

/* ---------- maximize one card ---------- */

.terminals.has-max {
  grid-template-columns: 1fr;
}

.terminals.has-max .card:not(.is-max) {
  display: none;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* Stacked terminals each get a full screen height so they stay usable. */
  .terminals {
    grid-template-columns: 1fr;
    height: auto;
  }

  body.has-hint .terminals {
    height: auto;
  }

  .card iframe {
    height: 88vh;
    flex: 0 0 auto;
  }
}