/* Estetyka terminala: zielony fosfor na czerni, font monospace, migający kursor. */
:root {
  --bg: #0a0e0a;
  --panel: #0d150d;
  --fg: #33ff66;
  --dim: #1f8f3f;
  --sys: #7fd7a0;
  --accent: #9bff8a;
  --err: #ff5c57;
  --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback dla starszych przeglądarek */
  height: 100dvh; /* mobile: nadąża za paskiem adresu i klawiaturą ekranową */
}

#statusbar {
  background: var(--fg);
  color: var(--bg);
  padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px
    max(10px, env(safe-area-inset-left));
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scrollback {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* nie „przeciągaj" całej strony przy scrollu czatu */
  -webkit-overflow-scrolling: touch;
  padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  white-space: pre-wrap;
  word-break: break-word;
}

.line {
  margin: 0;
}
.line--system {
  color: var(--sys);
}
.line--error {
  color: var(--err);
}
.t {
  color: var(--dim);
}
.nick {
  color: var(--accent);
  font-weight: bold;
}

#promptline {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--dim);
  padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
#prompt {
  color: var(--accent);
  white-space: nowrap;
}
#composer {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  outline: none;
  caret-color: var(--fg);
}
#composer::placeholder {
  color: var(--dim);
}
#send {
  flex: none;
  background: var(--fg);
  color: var(--bg);
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  padding: 6px 14px;
  cursor: pointer;
}
#send:hover {
  background: var(--accent);
}
#send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Ekran startowy (nick + miasto). */
#setup {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto; /* gdy klawiatura zasłania przycisk — da się doscrollować */
}
#setup.hidden {
  display: none;
}
.banner {
  color: var(--fg);
  font-weight: bold;
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
}
.tagline {
  color: var(--sys);
  margin: 0 0 6px;
  text-align: center;
}
.setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setup-row label {
  color: var(--accent);
  width: 70px;
  text-align: right;
}

/* Lista miast jako klikalne kafelki (zamiast dropdownu). */
.setup-row--cities {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 600px; /* więcej miast = szersza siatka kafelków zamiast długiej kolumny */
}
.cities-label {
  color: var(--accent);
}
.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.city-opt {
  background: var(--panel);
  border: 1px solid var(--dim);
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  padding: 8px 12px;
  cursor: pointer;
}
.city-opt:hover {
  border-color: var(--fg);
}
.city-opt[aria-checked="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: bold;
}
#setup input,
#setup select {
  background: var(--panel);
  border: 1px solid var(--dim);
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  padding: 6px 8px;
  min-width: 240px;
  outline: none;
}
#setup input:focus,
#setup select:focus {
  border-color: var(--fg);
}
#connect {
  background: var(--fg);
  color: var(--bg);
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  padding: 8px 16px;
  cursor: pointer;
}
#connect:hover {
  background: var(--accent);
}
.hint {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  margin: 0;
}

/* Urządzenia dotykowe: input ≥16px, żeby iOS nie zoomował strony przy focusie. */
@media (pointer: coarse) {
  #composer,
  #setup input,
  #setup select,
  #send,
  .city-opt {
    font-size: 16px;
  }
}

/* Wąskie ekrany — ekran startowy układa się w kolumnę, pola na pełną szerokość. */
@media (max-width: 420px) {
  #setup {
    padding: 16px;
  }
  .setup-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .setup-row label {
    width: auto;
    text-align: left;
  }
  #setup input,
  #setup select {
    min-width: 0;
    width: 100%;
  }
}