/* ════════════════════════════
   UI — legend, zoom, chat, loading, error
════════════════════════════ */

/* ── Zoom buttons ── */
.map-btns {
  position:       fixed;
  right:          18px;
  bottom:         80px;
  z-index:        900;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.mb {
  width:          36px;
  height:         36px;
  background:     rgba(16,17,26,0.93);
  border:         1px solid rgba(255,255,255,0.12);
  border-radius:  8px;
  color:          #e8e8f0;
  font-size:      20px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
  transition:     background 0.15s;
}

.mb:hover { background: rgba(30,32,48,0.98); }

/* ── Legend ── */
.legend {
  position:      fixed;
  left:          18px;
  bottom:        22px;
  z-index:       900;
  background:    rgba(14,15,22,0.92);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding:       12px 15px;
}

.leg-title {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          #555;
  text-transform: uppercase;
  margin-bottom:  8px;
}

.leg-row {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   11px;
  color:       #aaa;
  margin:      4px 0;
}

.ld {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── Chat widget ── */
.chat-widget {
  position:    fixed;
  right:       18px;
  bottom:      18px;
  z-index:     900;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.chat-label {
  background:    rgba(14,15,22,0.93);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding:       5px 12px;
  font-size:     11px;
  font-weight:   600;
}

.chat-btn {
  width:         44px;
  height:        44px;
  background:    #1a73e8;
  border:        none;
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 3px 14px rgba(26,115,232,0.55);
}

/* ── Loading bar ── */
#loadingBar {
  position:          fixed;
  top:               var(--topbar-h);
  left:              0;
  right:             0;
  height:            3px;
  z-index:           1100;
  background:        linear-gradient(90deg, #4fc3f7, #1a73e8, #4fc3f7);
  background-size:   200% 100%;
  animation:         shimmer 1.2s infinite;
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Data error banner ── */
#dataErrorBanner {
  position:      fixed;
  top:           calc(var(--topbar-h) + 10px);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       1200;
  background:    rgba(20,10,10,0.95);
  border:        1px solid rgba(245,0,87,0.4);
  border-radius: 10px;
  padding:       10px 18px;
  font-size:     13px;
  color:         #f50057;
  display:       flex;
  align-items:   center;
  gap:           8px;
  box-shadow:    0 4px 20px rgba(0,0,0,0.5);
}