html, body {
  height: 100%;
}
body.kartta-kysely {
  overflow: hidden;
}

.map-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #cfe3d8;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }
.top-bar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  margin-left: 40px;
}
.top-bar .brand .img-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-image: url('/assets/img/logo.svg');
}

.top-bar-actions {
  display: flex;
  gap: 8px;
}

.settings-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.settings-toggle-btn:hover {
  color: var(--color-forest);
}

.settings-panel {
  display: none;
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 25;
  width: 220px;
  flex-direction: column;
  gap: 14px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.settings-panel.is-open {
  display: flex;
}
.settings-row-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.settings-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 0.9rem;
}

.center-column {
  position: relative;
  z-index: 10;
  max-width: 460px;
  width: calc(100% - 32px);
  margin: 84px auto 24px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  padding: 24px;
}
.center-column.is-wide {
  max-width: 620px;
}
/* On desktop-width screens the card sits near the left edge (with a little
   breathing room, not flush against it) instead of centered, so the map
   behind it opens up as a large, mostly-unobstructed area on the right --
   view.js's centerBesideForm()/fitBoundsPaddingBesideForm() keep whatever's
   shown on the map centered within that right-hand strip rather than under
   this card. Below this width the card stays centered, as on mobile. (The
   matching move of .map-analysis to the right on desktop lives further down,
   after its base rule, so it actually wins the cascade.)
   58px lines the card's left edge up with the "kartta.jamotek.fi" brand pill
   above it (.top-bar padding 18px + .brand's own 40px margin-left) -- it's
   also comfortably clear of the zoom/detail-offset controls stacked in the
   map's own top-left corner (44px), which a narrower margin used to overlap. */
@media (min-width: 860px) {
  .center-column {
    width: auto;
    margin: 84px auto 24px 58px;
  }
}

.center-column h1 {
  font-size: 1.35rem;
  margin: 0 0 6px;
}
.center-column .description {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 20px;
  white-space: pre-line;
}

.field {
  margin-bottom: 18px;
}
.field > label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.field .hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.field input[type="text"],
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.field textarea { resize: vertical; min-height: 70px; }

.number-field-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.number-field-controls input[type="range"] {
  flex: 1;
  accent-color: var(--color-forest);
}
.number-field-controls input[type="number"] {
  width: 64px;
  flex: 0 0 auto;
  padding: 8px 6px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
}
.distance-field-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.distance-field-controls input[type="number"] {
  width: 90px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.distance-field-unit {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.location-field .status {
  font-size: 0.88rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  margin-bottom: 8px;
}
.location-field .status.is-set {
  border-style: solid;
  border-color: var(--color-forest);
  color: var(--color-forest-text);
}

.theme-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.theme-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 7px 10px;
  cursor: pointer;
  line-height: 0;
}
.theme-switch button.is-active {
  background: var(--color-forest);
  color: #fff;
}

.location-field .location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pick-location-hint {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Lines up with the brand pill above it: same left offset, sitting right
   below it, instead of floating centered over the map. */
.results-toggle-btn {
  position: fixed;
  top: 70px;
  left: 58px;
  z-index: 15;
  background: var(--color-surface);
  color: var(--color-text);
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
/* Calls attention to the reopen pill for its first 10s on screen (see
   view.js), so a first-time visitor notices there's a survey to answer
   behind it, without it being a permanent/annoying distraction. */
@keyframes kk-attention-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.04); }
}
.results-toggle-btn.is-attention {
  animation: kk-attention-blink 1s ease-in-out infinite;
}

/* Results-view map filter: response count + per-field faceted breakdown,
   with a matched-respondents list once something is selected. Anchored
   bottom-left rather than bottom-center so it never fights the centered
   results card for space. */
.map-analysis {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 15;
  width: min(320px, calc(100vw - 36px));
  max-height: 40vh;
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 0.85rem;
}
.map-analysis-header {
  position: sticky;
  top: -12px;
  z-index: 1;
  margin: -12px -14px 0;
  padding: 12px 14px 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.map-analysis-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.map-analysis-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-analysis-count {
  font-weight: 600;
}
.map-analysis-hide-btn {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.map-analysis-hide-btn:hover {
  border-color: var(--color-forest);
  color: var(--color-forest-text);
}
.map-analysis-reopen-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 18px;
  /* A plain 18px, level with the panel it reopens, sat right on top of the
     map's own copyright/attribution strip in the same corner -- 20px extra
     clearance. */
  bottom: 38px;
  z-index: 15;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text);
  cursor: pointer;
}
.map-analysis-reopen-btn:hover {
  color: var(--color-forest);
}
.map-analysis-reopen-label {
  display: none;
}
/* Below desktop widths the response/results card spans nearly the full
   screen (see .center-column), so this fixed-position pill would otherwise
   sit on top of the card's own scrollable content as the user scrolls,
   partially covering whatever text passes underneath it. Desktop keeps the
   pill visible alongside the card since they're on opposite screen edges
   there and never overlap (see view.js's setColumnOpen). */
@media (max-width: 859.98px) {
  /* !important: view.js sets this button's display via inline style
     (mapAnalysisReopenBtn.style.display), which otherwise always wins over
     an external stylesheet rule regardless of selector specificity. */
  body.kk-column-open .map-analysis-reopen-btn {
    display: none !important;
  }
}
/* Moves to the bottom-right on desktop widths, since the response/results
   card can now span nearly the full viewport height on the left (see
   .center-column above) and would otherwise sit on top of this box. The
   filter box itself also grows here (more screen real estate to use), and
   its reopen pill gains a text label instead of staying icon-only. */
@media (min-width: 860px) {
  .map-analysis,
  .map-analysis-reopen-btn {
    left: auto;
    right: 18px;
  }
  .map-analysis {
    width: min(420px, calc(100vw - 36px));
    max-height: 60vh;
  }
  .map-analysis-reopen-btn {
    width: auto;
    height: auto;
    padding: 12px 20px;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font);
  }
  .map-analysis-reopen-label {
    display: inline;
  }
}
.map-analysis-clear {
  display: block;
  border: none;
  background: none;
  color: var(--color-lake);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  margin: 8px 0 0;
}
.map-analysis-circle-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  cursor: pointer;
}
.map-analysis-circle-fill {
  margin-top: 10px;
}
.map-analysis-circle-fill-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.map-analysis-circle-fill-label span:last-child {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.map-analysis-circle-fill input[type="range"] {
  width: 100%;
  accent-color: var(--color-forest);
}
.map-analysis-group {
  margin-top: 10px;
}
.map-analysis-group-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}
.map-analysis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map-analysis-chip {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.map-analysis-chip:hover {
  border-color: var(--color-beta);
}
.map-analysis-chip.is-active {
  background: var(--color-beta);
  border-color: var(--color-beta);
  color: #fff;
}
.map-analysis-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.map-analysis-people {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}
.map-analysis-person {
  padding: 4px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.map-analysis-person:last-child {
  border-bottom: none;
}
.map-analysis-people-empty {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.kk-pin {
  background: transparent;
  border: none;
}

/* Always-on marker label (first/second free-text answers) -- shown only
   when JS decides current markers are spread out enough not to overlap.
   Deliberately not theme-aware: it sits on top of the map tiles, not the
   app chrome, same reasoning as the pin colors. */
.kk-marker-label {
  background: rgba(255, 255, 255, 0.94);
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1c2321;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
}
.kk-marker-label::before {
  display: none;
}

/* Tag multi-select field */
.tagfield-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-forest);
  color: #fff;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.85rem;
}
.chip button {
  border: none;
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 1;
  cursor: pointer;
  font-size: 0.8rem;
}
.tagfield-suggestions {
  position: relative;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  max-height: 180px;
  overflow-y: auto;
  display: none;
}
.tagfield-suggestions.is-open { display: block; }
.tagfield-suggestions .option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
}
.tagfield-suggestions .option:hover { background: var(--color-bg); }
.tagfield-suggestions .option.is-new {
  color: var(--color-forest-text);
  font-weight: 600;
}
.tagfield-suggestions .empty {
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.field-list {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.field-list .field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.field-row.custom-field {
  border-top: 1px dashed var(--color-border);
  margin-top: 6px;
  padding-top: 10px;
  flex-wrap: wrap;
}
.custom-number-range {
  flex-basis: 100%;
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.custom-number-range label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.custom-number-range input[type="number"] {
  width: 70px;
  padding: 4px 6px;
}
.field-row input[type="text"] {
  flex: 1;
  padding: 6px 8px;
}
.field-row select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  padding: 6px 8px;
}

/* On narrow screens the label input, type select and remove link can't all
   fit on one line without crushing the input down to a sliver -- let the
   label take its own full-width row and drop the rest below it. */
@media (max-width: 480px) {
  .field-row.custom-field .custom-label {
    flex-basis: 100%;
  }
}
.remove-field {
  border: none;
  background: none;
  color: var(--color-beta);
  cursor: pointer;
  font-size: 0.85rem;
}
.add-field-btn {
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem;
  color: var(--color-forest-text);
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.notice {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.notice.error { background: #fbe7e4; color: #9a2f1f; }
.notice.success { background: #e1f3e5; color: var(--color-forest-dark); }
.notice.info { background: #e4eef2; color: var(--color-lake); }
.notice div + div {
  margin-top: 4px;
}

.results-search-field input {
  font-size: 0.92rem;
}

.share-link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.share-link-box input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-family: monospace;
  font-size: 0.9rem;
}

/* Results view */
.results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.results-header .count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
#results-sticky-header {
  position: sticky;
  top: -24px;
  z-index: 1;
  align-items: center;
  flex-wrap: nowrap;
  margin: -24px -24px 16px;
  padding: 20px 24px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
#results-sticky-header h1 {
  margin: 0;
}
#form-sticky-header {
  position: sticky;
  top: -24px;
  z-index: 1;
  align-items: center;
  flex-wrap: nowrap;
  margin: -24px -24px 16px;
  padding: 20px 24px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
#form-sticky-header h1 {
  margin: 0;
}
.results-hide-btn {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.results-hide-btn:hover {
  border-color: var(--color-forest);
  color: var(--color-forest-text);
}
.response-list {
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
}
.response-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.response-row .name { font-weight: 600; }
.response-row .tags {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.response-row .tag {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
}
.response-row.is-own {
  background: var(--color-bg);
}
.response-row .edit-link {
  font-size: 0.82rem;
}

/* Public surveys list (kartta-kysely landing page) */
.public-survey-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--color-surface);
  cursor: pointer;
}
.public-survey-card:hover {
  border-color: var(--color-forest);
  background: var(--color-badge-live-bg);
}
.public-survey-card .title {
  display: inline-block;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.public-survey-card .title:hover {
  text-decoration: underline;
}
.public-survey-card .desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.public-survey-card .until {
  font-size: 0.8rem;
  color: var(--color-lake);
  margin-top: 6px;
}

.public-survey-card .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.public-survey-card .survey-url {
  flex: 1 1 auto;
  min-width: 80px;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-survey-card .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
}
.public-survey-card .icon-btn:hover {
  border-color: var(--color-forest);
  color: var(--color-forest-text);
}
.public-survey-card .icon-btn.is-danger:hover {
  border-color: #c0392b;
  color: #c0392b;
}
.public-survey-card .icon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.public-survey-card .edit-link {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-forest-text);
  text-decoration: none;
  white-space: nowrap;
}
.public-survey-card .edit-link:hover {
  text-decoration: underline;
}

.leaflet-popup-content .tag {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.78rem;
  margin: 2px 3px 0 0;
}

/* Manual tile-detail-offset control: intentionally styled apart from
   Leaflet's own +/- zoom control (magnifying-glass icons, not plain
   +/-) so it doesn't read as a duplicate/broken zoom button. */
.kk-detail-control {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}
.kk-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.kk-detail-btn:hover {
  background: var(--color-bg);
}
.kk-detail-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.kk-detail-readout {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 1px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
}

.ryhmakartat-status {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  box-shadow: var(--shadow);
}

.member-label {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #12232e;
  padding: 1px 6px;
}
.member-label::before { display: none; }

.ryhmakartat-status {
  cursor: pointer;
}

/* PTT (kohta 7): press-and-hold button, bottom-right so it never collides with the
   member-list panel/status pill on the bottom-left. */
.ptt-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.ptt-button:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}
.ptt-button.ptt-transmitting {
  background: #ff3b30;
  color: #fff;
}
.ptt-status-label {
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 500;
  max-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  box-shadow: var(--shadow);
  text-align: right;
}
.ptt-status-label:empty {
  display: none;
}

.member-list-panel {
  position: fixed;
  left: 12px;
  bottom: 48px;
  z-index: 501;
  width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.member-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9rem;
}
.member-list-header button {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
}
.member-list-items {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.member-list-items li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.member-list-items li:hover {
  background: var(--color-bg);
}
.member-list-items li .name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-list-items li .age {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.member-list-items li .name {
  flex: 1;
}
/* Online dot (per user request): a plain static dot at rest, unchanged from before -- speed
   above ONLINE_DOT_WALK_KMH (see kartta.js) adds vertical movement instead, matching the
   Kuukkeli app's own MemberPanel badge tier-for-tier (2/10/50 km/h). Built as a wrapper around
   two inner dots rather than one so the "sprint" tier (>=50km/h) can show both bobbing out of
   phase -- a distinct "going fast" signature, not just a quicker version of the same single-dot
   motion -- while every other tier just hides the second one via the :nth-child rule below. */
.member-list-items li .dot-wrap {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.member-list-items li .dot-wrap span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9e9e9e;
}
.member-list-items li .dot-wrap.green span {
  background: #2ecc40;
}
.member-list-items li .dot-wrap:not(.sprint) span:nth-child(2) {
  display: none;
}
.member-list-items li .dot-wrap.pulsing span:first-child {
  animation: member-dot-pulse 1s ease-in-out infinite;
}
.member-list-items li .dot-wrap.walk span:first-child {
  animation: member-dot-bob 1.8s ease-in-out infinite;
}
.member-list-items li .dot-wrap.run span:first-child {
  animation: member-dot-bob 0.7s ease-in-out infinite;
}
.member-list-items li .dot-wrap.sprint span {
  animation: member-dot-bob 0.7s ease-in-out infinite;
}
.member-list-items li .dot-wrap.sprint span:nth-child(2) {
  animation-delay: 0.35s;
}
@keyframes member-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
@keyframes member-dot-bob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
.member-list-items li .member-battery,
.member-list-items li .member-signal,
.member-list-items li .member-speed {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.member-list-items li .member-battery.low,
.member-list-items li .member-signal.low {
  color: #d32f2f;
}
.member-list-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2px 10px;
}

/* Group chat (kohta 8, per user request), read-only web view -- same panel look as
   .member-list-panel, top-right instead of bottom-left so the two never collide. */
.chat-panel {
  position: fixed;
  right: 12px;
  top: 64px;
  z-index: 501;
  width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9rem;
}
.chat-panel-header button {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 4px;
}
.chat-items {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.chat-items li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.chat-items li:last-child {
  border-bottom: none;
}
.chat-items .chat-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-items .chat-body {
  flex: 1;
  min-width: 0;
}
.chat-items .chat-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.chat-items .chat-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-items .chat-time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}
.chat-items .chat-text {
  overflow-wrap: break-word;
}
.chat-items .chat-location-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-forest);
  padding: 2px;
  margin-left: 4px;
}
.chat-empty {
  padding: 12px 10px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.message-poi-popup {
  font-size: 0.85rem;
  max-width: 220px;
}
.message-poi-popup .message-poi-name {
  font-weight: 600;
  margin-bottom: 2px;
}