/* ===== Travel Map Base Styles (Restored) ===== */
html, body { height: 100%; margin: 0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  background:#0b0f14;
  color:#fff;
  overflow:hidden;
}

#map{ position:fixed; inset:0; z-index:1; }

/* Current location bubble */
#currentLocation{
  position:fixed;
  right:16px;
  top:64px;
  left:auto;
  bottom:auto;
  z-index: 1501;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:14px;
  background: rgba(0,0,0,var(--loc-bg-alpha,0.55));
  opacity: var(--loc-opacity, 1);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select:none;
}
#flag{ width:32px; height:24px; border-radius:6px; object-fit:cover; display:none; background:rgba(255,255,255,0.08); }
#currentText span{ display:block; line-height: var(--loc-line-height, 1.1); }

/* Main UI panel */
#ui{
  position:fixed;
  top:56px;
  left:12px;
  z-index:1450;
  width:min(315px, 69vw);
  max-height:calc(100vh - 72px);
  overflow:auto;
  padding:10px;
  border-radius:16px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 16px 40px rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#ui label{ display:block !important; width:100% !important; box-sizing:border-box; margin:6px 0; }
#ui label.col{ display:flex !important; flex-direction:column !important; gap:4px; }
#ui button, #ui select, #ui input[type="text"], #ui input[type="number"], #ui input[type="range"], #ui input[type="color"]{
  width:100%;
  box-sizing:border-box;
  margin:6px 0;
}
#ui button{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}
#ui button:hover{ background:rgba(255,255,255,0.14); }
#ui select, #ui input[type="text"], #ui input[type="number"]{
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(8,10,14,0.72);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
}
#ui input[type="range"]{ accent-color:#00ffff; }

details.ui-group{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  padding:8px 10px;
  margin:8px 0;
}
summary.ui-title{
  cursor:pointer;
  font-weight:900;
  letter-spacing:.03em;
}

/* Stream indicator & safe frame */
#streamIndicator{
  position:fixed;
  top:12px;
  right:12px;
  z-index:1600;
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
#streamIndicator .dot{ width:10px; height:10px; border-radius:50%; background:#ff2d55; box-shadow:0 0 0 6px rgba(255,45,85,0.18); }

#safeFrame{ position:fixed; inset:0; z-index:1590; pointer-events:none; display:none; }
#safeFrame .sf{ position:absolute; border:2px solid rgba(0,255,255,0.4); }

/* Route overlay base positioning (design is in style.routeoverlay.modern.css) */
#routeOverlay{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1550;
  display:none;
  color:#fff;
}

/* City search results dropdown basic */
#cityResults{ position:relative; }

/* Prefer readable links */
a{ color:#7be9ff; }


/* ===== Streaming mode: hide editor UI ===== */
body.streaming #ui{ display:none !important; }
body.streaming #cityResults{ display:none !important; }
body.streaming.tm-ui-temp #cityResults{ display:block !important; }

#stateSearch{ display:none !important; }


/* ===== UI draggable handle ===== */
#ui{ position:fixed; }
#uiDragHandle{
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -10px -10px 10px -10px;
  padding: 6px 10px;
  text-align: center;
  cursor: move;
  user-select: none;
  font-weight: 900;
  letter-spacing: .2em;
  opacity: .85;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
body.streaming #uiDragHandle{ display:none !important; }


/* ===== Left Drawer UI ===== */
#ui{
  left: 12px !important;
  right: auto !important;
  top: 56px;
  transform: translateX(calc(-100% - 16px));
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  z-index: 1701; /* above backdrop */
}
body.ui-open #ui{ transform: translateX(0); }

.ui-toggle{
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1702;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.streaming .ui-toggle{ display:none !important; }


@media (max-width: 640px){
  #ui{ width: min(420px, 92vw) !important; left: 4vw !important; }
}

/* Current location drag stability */
#currentLocation{ box-sizing: border-box; }
#currentLocation.dragging{ right:auto !important; bottom:auto !important; transform:none !important; }

/* ===== Effects ===== */
.tm-glow{
  animation: tmGlow 720ms cubic-bezier(.22,.61,.36,1);
  /* Leaflet uses transforms for positioning; do NOT animate transform here. */
}
@keyframes tmGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(0,255,255,0)); opacity:.65; stroke-width:2; }
  35%{ filter: drop-shadow(0 0 10px rgba(0,255,255,.95)) drop-shadow(0 0 18px rgba(0,255,255,.60)); opacity:1; stroke-width:5; }
  100%{ filter: drop-shadow(0 0 0 rgba(0,255,255,0)); opacity:1; stroke-width:2; }
}

/* ===== Theme system ===== */
:root{
  --tm-bg: #0b0f14;
  --tm-text: #ffffff;
  --tm-panel-bg: rgba(0,0,0,0.55);
  --tm-panel-border: rgba(255,255,255,0.12);
  --tm-accent: #00ffff;
  --tm-link: #7be9ff;
  --tm-btn-bg: rgba(255,255,255,0.08);
  --tm-btn-border: rgba(255,255,255,0.16);
  --tm-input-bg: rgba(8,10,14,0.72);
  --tm-shadow: 0 16px 40px rgba(0,0,0,0.38);

  /* fallback: theme vars used by style.themes.css */
  --accent: var(--tm-accent);
  --accent2: #4dffff;
  --danger: #ff3b3b;
  --panel-bg: var(--tm-panel-bg);
  --panel-border: var(--tm-panel-border);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --map-filter: none;
}
body{ background: var(--tm-bg) !important; color: var(--tm-text) !important; }
#ui button{ background: var(--tm-btn-bg) !important; border-color: var(--tm-btn-border) !important; }
#ui select, #ui input[type="text"], #ui input[type="number"]{ background: var(--tm-input-bg) !important; border-color: var(--tm-btn-border) !important; }
a{ color: var(--tm-link) !important; }
#ui input[type="range"]{ accent-color: var(--tm-accent) !important; }



/* ===== Current marker blink ===== */
.tm-blink{
  animation: tmBlink 1200ms ease-in-out infinite;
}
@keyframes tmBlink{
  0%{ filter: drop-shadow(0 0 0 rgba(0,255,255,0)); stroke-width:2; }
  45%{ filter: drop-shadow(0 0 12px rgba(0,255,255,.95)) drop-shadow(0 0 22px rgba(0,255,255,.55)); stroke-width:5; }
  100%{ filter: drop-shadow(0 0 0 rgba(0,255,255,0)); stroke-width:2; }
}


/* ===== Blink label row ===== */
#ui label.blink-row{ display:flex; align-items:center; gap:8px; }


/* ===== Theme variable bindings (safe overrides) ===== */
#ui{ background: var(--panel-bg) !important; border-color: var(--panel-border) !important; }
#ui .ui-title{ color: var(--text) !important; }
#ui button{ border-color: var(--panel-border) !important; }
#ui button:hover{ border-color: var(--accent) !important; }
#streamIndicator{ border-color: var(--panel-border) !important; }
#routeOverlay{ border-color: var(--panel-border) !important; }


/* ===== Route history list: scrollable when long ===== */
#routeList{
  max-height: min(40vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
@media (max-width: 640px){
  #routeList{ max-height: 32vh; }
}


/* ===== UI sizing normalization (menu整理/サイズ適正化) ===== */
#ui{
  max-height: calc(100vh - 96px);
  overflow: auto;
  width: min(360px, 92vw);
}
#ui .ui-group{ margin-bottom: 10px; }
#ui .ui-title{ font-size: 14px; }
#ui label, #ui button, #ui select, #ui input{ font-size: 13px; }
#ui button{ padding: 6px 10px; }
#ui input[type=range]{ width: 100%; }
#ui select{ width: 100%; }


/* ===== CurrentLocation theme override (デザイン反映) ===== */
#currentLocation{
  background: color-mix(in srgb, var(--panel-bg, rgba(10,12,18,.78)) 92%, transparent);
  border-color: var(--panel-border, rgba(255,255,255,.14));
  color: var(--text, rgba(255,255,255,.92));
}
#currentLocation #currentCountry{ color: var(--muted, rgba(255,255,255,.72)); }
#currentLocation #currentCity{ color: var(--text, rgba(255,255,255,.92)); }
#currentLocation img{ box-shadow: 0 10px 26px rgba(0,0,0,0.28); }

/* UI21: hide stateWrap by default (shown only when states exist) */
.stateWrap{ display:none; }


/* UI23: map control button for country labels */
.tm-country-btn{ background: rgba(0,0,0,.40); border:1px solid rgba(255,255,255,.18); border-radius:12px; overflow:hidden; }
.tm-country-btn .tm-country-btn-inner{
  appearance:none; border:none; background:transparent; color:#fff;
  padding:8px 10px; font-weight:900; cursor:pointer; min-width:120px;
}
.tm-country-btn .tm-country-btn-inner:hover{ background: rgba(255,255,255,.10); }