/* ============================================================
 * v481 豆包式新皮肤 ui2（?ui=2 激活，旧版一行不动）
 * 骨架照豆包：底部白色胶囊 / 按住说话 / 自绘数字+九宫格键盘 / 加号动作面板
 * 配色沿用执法记录仪弹窗：海蓝主色 + 语义绿(在线/录像) 红(预警/取消) 深蓝灰(次要)
 * ============================================================ */
:root {
  --u2-blue: #1565c0;
  --u2-blue2: #1e88e5;
  --u2-blue-soft: #eaf3fe;
  --u2-green: #22a45d;
  --u2-green-soft: #eafaf0;
  --u2-red: #e5393b;
  --u2-ink: #1f2d3d;
  --u2-slate: #334155;
  --u2-gray: #8a94a3;
  --u2-line: #e3e8ef;
  --u2-kbb: #eef1f5;
  --u2-key: #ffffff;
  --u2-keyfn: #d6dce4;
  --u2-dockh: 56px;
  --u2-kbh: 312px;
  --u2-plush: 224px;   /* ＋动作面板可视内容高（两行72 + 间隙 + 底部“切回旧版”），dock 据此浮到面板上沿外 */
  --u2-safe: env(safe-area-inset-bottom, 0px);
}
/* 仅手机窄屏生效；电脑端不显示 */
@media (min-width: 901px) {
  body.ui2 #ui2-dock, body.ui2 #ui2-kbd, body.ui2 #ui2-voice,
  body.ui2 #ui2-plus, body.ui2 #ui2-results { display: none !important; }
}
body.ui2 #tabbar { display: none !important; }       /* 旧五栏底部导航让位 */
body.ui2 #m-search, body.ui2 #m-search-edit { display: none !important; } /* 顶部假搜索条与底部重复，隐藏 */
body.ui2 #m-topbar { gap: 8px; }
body.ui2 #m-topbar #m-menu-btn { flex: 0 0 auto; }
/* 底部给地图留出 dock 空间，避免最贴边的船标被胶囊长期压住 */
body.ui2 .leaflet-container { padding-bottom: 0; }

/* ---------------- 底部豆包式胶囊 ---------------- */
#ui2-dock {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--u2-safe) + 10px);
  height: var(--u2-dockh); z-index: 1200;
  display: none; align-items: center; gap: 8px;
  padding: 0 10px;
  background: rgba(255,255,255,.97);
  border-radius: 28px;
  box-shadow: 0 8px 26px rgba(16,42,82,.18), 0 1px 3px rgba(16,42,82,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: bottom .18s ease;
}
body.ui2 #ui2-dock { display: flex; }
body.ui2.u2-kb #ui2-dock { bottom: calc(var(--u2-kbh) + var(--u2-safe) + 8px); }
body.ui2.u2-plus #ui2-dock { bottom: calc(var(--u2-safe) + var(--u2-plush) + 10px); }
body.ui2.u2-kb.u2-plus #ui2-dock { bottom: calc(var(--u2-kbh) + var(--u2-safe) + 8px); }

.u2-icbtn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid var(--u2-ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--u2-ink); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.u2-icbtn:active { transform: scale(.92); }
.u2-icbtn svg { width: 23px; height: 23px; }
.u2-cam { border-color: var(--u2-slate); color: var(--u2-slate); }

.u2-hold {
  flex: 1 1 auto; height: 40px; border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #111827;
  background: transparent; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
.u2-field {
  flex: 1 1 auto; height: 40px; border-radius: 21px;
  display: none; align-items: center; gap: 6px; padding: 0 8px 0 14px;
  background: #f3f5f8;
}
body.ui2.u2-kb .u2-hold { display: none; }
body.ui2.u2-kb .u2-field { display: flex; }
.u2-field .u2-caret { width: 2px; height: 20px; background: var(--u2-blue); border-radius: 1px; animation: u2blink 1s steps(1) infinite; }
@keyframes u2blink { 50% { opacity: 0; } }
.u2-field .u2-text { flex: 1; font-size: 16px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u2-field .u2-text.placeholder { color: var(--u2-gray); font-weight: 400; }
.u2-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--u2-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.u2-send:active { transform: scale(.9); }
.u2-send svg { width: 20px; height: 20px; }
.u2-send.disabled { background: #c3ccd8; }
/* 键盘态：语音波纹钮隐藏（键盘里可切回），非键盘态显示键盘切换钮 */
.u2-kbbtn { display: flex; }
body.ui2.u2-kb .u2-kbbtn { display: none; }
/* 加号展开后 + 变 × */
.u2-plus .u2-plus-i, .u2-plus .u2-x-i { display: none; }
body.ui2.u2-plus .u2-plus .u2-plus-i { display: none; }
body.ui2.u2-plus .u2-plus .u2-x-i { display: block; }
.u2-plus .u2-x-i { display: none; }

/* ---------------- 加号动作面板（四宫格） ---------------- */
#ui2-plus {
  position: fixed; left: 8px; right: 8px; bottom: 0; z-index: 1190;
  display: none; background: #fff; border-radius: 20px 20px 0 0;
  padding: 14px 12px calc(10px + var(--u2-safe));
  box-shadow: 0 10px 30px rgba(16,42,82,.18);
}
body.ui2.u2-plus #ui2-plus { display: block; }
body.ui2.u2-kb #ui2-plus { display: none !important; }
.u2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.u2-act {
  background: #f2f4f7; border-radius: 16px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--u2-ink); cursor: pointer; border: none; -webkit-tap-highlight-color: transparent;
}
.u2-act:active { background: #e6eaf0; }
.u2-act svg { width: 26px; height: 26px; color: #2b3648; }
.u2-act span { font-size: 12px; color: #5b6573; }
.u2-act.danger svg { color: var(--u2-red); }
.u2-plus-foot { margin-top: 10px; height: 34px; display: flex; align-items: center; justify-content: center; }
.u2-switch-old {
  border: none; background: none; color: var(--u2-gray); font-size: 12px;
  padding: 6px 12px; cursor: pointer; text-decoration: underline;
}

/* ---------------- 结果浮层（语音/键盘候选大列表） ---------------- */
#ui2-results {
  position: fixed; left: 10px; right: 10px; z-index: 1250;
  bottom: calc(var(--u2-safe) + 78px); max-height: 48vh;
  display: none; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(16,42,82,.2);
}
#ui2-results.show { display: flex; }
body.ui2.u2-kb #ui2-results { bottom: calc(var(--u2-kbh) + var(--u2-safe) + 78px); max-height: 38vh; }
.u2-r-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.u2-r-title { flex: 1; font-size: 14px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u2-r-x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none; background: #eef1f5; color: #5b6573; font-size: 14px; cursor: pointer; }
.u2-r-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 8px; }
.u2-r-empty { padding: 22px 16px; color: var(--u2-gray); font-size: 14px; text-align: center; }
.u2-r-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: none; border-bottom: 1px solid var(--u2-line);
  padding: 9px 8px; cursor: pointer; border-radius: 10px;
}
.u2-r-row:active { background: #f4f8fe; }
.u2-r-main { flex: 1; min-width: 0; }
.u2-r-name { font-size: 16px; color: #111827; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u2-r-sub { font-size: 12px; color: var(--u2-gray); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u2-tag { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.u2-tag.ship { background: #eaf3fe; color: #1565c0; }
.u2-tag.wl { background: #e7f7ee; color: #1c9250; }
.u2-tag.parcel { background: #fdf1e3; color: #c86a16; }
.u2-tag.zone { background: #eef1f5; color: #5b6573; }
.u2-tag.place { background: #e6f7f6; color: #0e8f88; }
.u2-tag.coop { background: #f1ecfb; color: #7a4fd0; }

/* ---------------- 自绘键盘 ---------------- */
#ui2-kbd {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  display: none; background: var(--u2-kbb);
  padding: 6px 6px calc(var(--u2-safe) + 6px);
  border-radius: 18px 18px 0 0; box-shadow: 0 -6px 22px rgba(16,42,82,.14);
}
body.ui2.u2-kb #ui2-kbd { display: block; }
.u2-kb-top { display: flex; align-items: center; gap: 8px; padding: 2px 6px 4px; }
.u2-seg { display: flex; background: #e2e7ee; border-radius: 14px; padding: 2px; }
.u2-seg button { border: none; background: none; font-size: 13px; color: #5b6573; padding: 4px 14px; border-radius: 12px; cursor: pointer; }
.u2-seg button.on { background: #fff; color: var(--u2-blue); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.u2-kb-hide { margin-left: auto; border: none; background: #e2e7ee; width: 34px; height: 28px; border-radius: 14px; color: #5b6573; font-size: 15px; cursor: pointer; }
/* 候选实体横滑行 */
.u2-sug { display: flex; gap: 8px; overflow-x: auto; padding: 2px 6px 6px; scrollbar-width: none; }
.u2-sug::-webkit-scrollbar { display: none; }
.u2-chip {
  flex: 0 0 auto; height: 32px; padding: 0 13px; border-radius: 16px;
  background: #fff; border: 1px solid #bcd8f5; color: var(--u2-blue);
  font-size: 14px; white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.u2-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--u2-blue); }
.u2-chip.parcel { border-color: #f3cd9f; color: #c86a16; } .u2-chip.parcel .dot { background: #e8912f; }
.u2-chip.zone { border-color: #cdd5df; color: #5b6573; } .u2-chip.zone .dot { background: #8a94a3; }
.u2-chip.place { border-color: #a7e2dd; color: #0e8f88; } .u2-chip.place .dot { background: #16b0a6; }
.u2-chip.coop { border-color: #d3c2f5; color: #7a4fd0; } .u2-chip.coop .dot { background: #8a5fe0; }
/* 前缀词片行（鲁蓬渔等，追加输入） */
.u2-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 6px 6px; scrollbar-width: none; }
.u2-chips::-webkit-scrollbar { display: none; }
.u2-prefix {
  flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 15px;
  background: #e7f0fb; border: 1px solid #cfe2f8; color: #2a6fb5;
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.u2-prefix:active { background: #d7e7fa; }
/* 键区 */
.u2-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.u2-key {
  height: 44px; border-radius: 9px; background: var(--u2-key);
  border: none; box-shadow: 0 1px 0 rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 21px; color: #15202e; cursor: pointer; line-height: 1; user-select: none; -webkit-user-select: none;
}
.u2-key small { font-size: 10px; color: var(--u2-gray); margin-top: 2px; letter-spacing: 1px; }
.u2-key:active { background: #e4e9f0; }
.u2-key.fn { background: var(--u2-keyfn); font-size: 17px; }
.u2-key.enter { background: var(--u2-blue); color: #fff; grid-row: span 2; height: auto; font-size: 16px; font-weight: 700; }
.u2-key.enter svg { width: 24px; height: 24px; }
.u2-key.span2 { grid-column: span 2; }
.u2-key.holdmic { background: var(--u2-keyfn); font-size: 14px; }

/* ---------------- 按住说话·录音全屏面板 ---------------- */
#ui2-voice {
  position: fixed; inset: 0; z-index: 1400; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: linear-gradient(to top, rgba(21,101,192,.97) 0%, rgba(30,136,229,.92) 42%, rgba(120,180,240,.55) 68%, rgba(255,255,255,0) 86%);
}
#ui2-voice.show { display: flex; }
#ui2-voice.cancel { background: linear-gradient(to top, rgba(214,52,54,.96) 0%, rgba(229,72,74,.9) 46%, rgba(240,150,150,.5) 72%, rgba(255,255,255,0) 90%); }
.u2-vwave {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  height: 92px; margin: 0 0 26px;
}
.u2-vbar {
  flex: 0 0 auto;
  width: 4px; height: 8px; margin: 0 2px; border-radius: 3px;
  background: rgba(255,255,255,.92);
  transition: height .09s ease;
}
.u2-vtip { color: #fff; font-size: 19px; font-weight: 600; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,.18); }
.u2-vsub { color: rgba(255,255,255,.85); font-size: 13px; margin-top: 10px; }
/* 点击说话（对讲机式）：录音面板底部两个大按钮，贴拇指区 */
.u2-vbtns {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--u2-safe, 0px) + 30px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 22px;
}
.u2-vsend {
  flex: 1 1 auto; max-width: 320px; height: 60px;
  border: none; border-radius: 30px;
  background: #fff; color: #1565c0; font-size: 19px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 10px 24px rgba(10,40,90,.28); -webkit-tap-highlight-color: transparent;
}
.u2-vsend:active { transform: scale(.98); }
.u2-vcancel {
  flex: 0 0 auto; width: 108px; height: 60px;
  border: 1.5px solid rgba(255,255,255,.9); border-radius: 30px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 17px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.u2-vcancel:active { background: rgba(255,255,255,.26); }
