/* 車用導航 — 夜航墨色 × 汝窯青 */
:root {
  --ink: #14181d;        /* 墨色底 */
  --ink-2: #1e242b;
  --paper: #f5f0e6;      /* 宣紙字 */
  --celadon: #7fb8a4;    /* 汝窯青(主色) */
  --celadon-dim: #4a7263;
  --cinnabar: #d4553e;   /* 朱砂(警示/停止) */
  --gold: #d9b96c;
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  background: var(--ink);
  color: var(--paper);
  user-select: none;
}
#map { position: absolute; inset: 0; background: #0d1013; z-index: 0; }

/* 夜間模式:地圖磚色濾鏡 */
body.night .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }

/* ===== 頂部搜尋列 ===== */
#searchWrap {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
}
#searchBar {
  display: flex; gap: 8px; background: var(--ink-2); border: 1px solid #333c46;
  border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow);
}
#searchInput {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--paper); font-size: 18px; padding: 8px 10px; min-width: 0;
}
#searchInput::placeholder { color: #6b7683; }
#searchBtn {
  background: var(--celadon-dim); color: var(--paper); border: none;
  border-radius: 10px; padding: 0 18px; font-size: 18px; cursor: pointer;
}
#quickBar { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: rgba(30,36,43,.92); border: 1px solid #333c46; color: var(--paper);
  border-radius: 20px; padding: 7px 14px; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.chip .star { color: var(--gold); }
#results {
  background: var(--ink-2); border: 1px solid #333c46; border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 45vh; overflow-y: auto; display: none;
}
#results.show { display: block; }
.result-item { padding: 13px 16px; border-bottom: 1px solid #2a323b; cursor: pointer; }
.result-item:last-child { border-bottom: none; }
.result-item .r-name { font-size: 17px; }
.result-item .r-detail { font-size: 13px; color: #8b97a3; margin-top: 3px; }
.result-item:active { background: #2a323b; }

/* ===== 浮動按鈕 ===== */
.fab {
  position: absolute; z-index: 1000; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid #333c46; color: var(--paper);
  font-size: 24px; box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#locateBtn { right: 14px; bottom: 120px; }
#nightBtn  { right: 14px; bottom: 184px; }
#personaBtn { right: 14px; bottom: 248px; color: var(--celadon); font-weight: bold; }
body.navigating #locateBtn { bottom: 150px; }
body.navigating #nightBtn { bottom: 214px; }
body.navigating #personaBtn { bottom: 278px; }

/* ===== 路線預覽面板 ===== */
#preview {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
  background: var(--ink-2); border: 1px solid #333c46; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; display: none;
}
#preview.show { display: block; }
#pvName { font-size: 20px; font-weight: bold; margin-bottom: 4px; }
#pvDetail { font-size: 15px; color: #8b97a3; margin-bottom: 6px; }
#pvStats { font-size: 17px; color: var(--celadon); margin-bottom: 14px; }
#pvBtns { display: flex; gap: 10px; }
.btn {
  flex: 1; border: none; border-radius: 12px; padding: 14px 6px;
  font-size: 18px; font-weight: bold; cursor: pointer; color: var(--paper);
}
.btn-go { background: var(--celadon-dim); flex: 2; }
.btn-sim { background: #3a4450; }
.btn-fav { background: #3a4450; flex: 0 0 56px; font-size: 22px; }
.btn-cancel { background: #2a323b; color: #8b97a3; flex: 0 0 70px; }

/* ===== 導航 HUD ===== */
#hud {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1100;
  background: linear-gradient(160deg, #23414f, #16262e);
  border: 1px solid var(--celadon-dim); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; display: none;
  align-items: center; gap: 16px;
}
#hud.show { display: flex; }
#hudArrow { font-size: 52px; line-height: 1; color: var(--celadon); min-width: 64px; text-align: center; }
#hudMain { flex: 1; min-width: 0; }
#hudDist { font-size: 34px; font-weight: bold; letter-spacing: 1px; }
#hudText { font-size: 19px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hudNext { font-size: 14px; color: #9fb3ad; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 導航底部列 ===== */
#navBar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
  background: var(--ink-2); border: 1px solid #333c46; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; display: none;
  align-items: center; gap: 14px;
}
#navBar.show { display: flex; }
#speedBox { text-align: center; min-width: 72px; }
#speedVal { font-size: 36px; font-weight: bold; color: var(--celadon); line-height: 1; }
#speedUnit { font-size: 12px; color: #8b97a3; }
#navInfo { flex: 1; text-align: center; }
#navRemain { font-size: 20px; font-weight: bold; }
#navEta { font-size: 14px; color: #8b97a3; margin-top: 2px; }
#stopBtn {
  background: var(--cinnabar); border: none; border-radius: 12px;
  color: #fff; font-size: 17px; font-weight: bold; padding: 14px 18px; cursor: pointer;
}

/* 目前位置箭頭標記 */
.me-marker { pointer-events: none; }
.me-arrow {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--celadon);
  text-shadow: 0 0 6px #000, 0 0 12px rgba(127,184,164,.8);
  transition: transform .3s linear;
}

/* ===== 播報員設定面板 ===== */
#personaPanel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1300;
  background: var(--ink-2); border: 1px solid #333c46; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; display: none;
  max-height: 70vh; overflow-y: auto;
}
#personaPanel.show { display: block; }
.pp-head { font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#ppClose { background: none; border: none; color: #8b97a3; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.pp-label { font-size: 13px; color: #8b97a3; margin: 10px 0 6px; }
.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-chip {
  background: #2a323b; border: 1px solid #333c46; color: var(--paper);
  border-radius: 20px; padding: 8px 16px; font-size: 15px; cursor: pointer;
}
.pp-chip.on { background: var(--celadon-dim); border-color: var(--celadon); }
.pp-pets { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-pet {
  width: 62px; text-align: center; cursor: pointer; border-radius: 10px;
  border: 1px solid transparent; padding: 4px 0 2px;
}
.pp-pet.on { border-color: var(--celadon); background: rgba(127,184,164,.12); }
.pp-pet img { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 auto; }
.pp-pet span { font-size: 12px; color: var(--paper); }

/* 導航中寵物頭像 */
#petAvatar {
  position: absolute; left: 10px; bottom: 150px; z-index: 1050;
  width: 72px; height: 72px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* 提示訊息 */
#toast {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(20,24,29,.94); border: 1px solid #333c46; color: var(--paper);
  border-radius: 12px; padding: 14px 22px; font-size: 17px; z-index: 2000;
  display: none; max-width: 82vw; text-align: center; box-shadow: var(--shadow);
}

/* Leaflet 版權列縮小避免擋畫面 */
.leaflet-control-attribution { font-size: 9px !important; opacity: .6; }