/* ============================================
   蛋薯机 DanShu Pro v2 — location.css
   定位共享 · INS 极简风 · 纯 SVG 无 emoji
   ============================================ */

.loc-overlay {
    position: absolute; inset: 0; z-index: 870;
    display: flex; flex-direction: column;
    background: #faf9fb; border-radius: 44px;
    overflow: hidden; opacity: 0; pointer-events: none;
    transform: translateY(16px);
    transition: opacity .3s, transform .35s cubic-bezier(.32,.72,0,1);
}
.loc-overlay.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ===== Header 顶栏 ===== */
.loc-header {
    display: flex; align-items: center;
    padding: 52px 16px 12px; gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #faf9fb; position: relative; z-index: 2;
}
.loc-back {
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: opacity .2s;
}
.loc-back:active { opacity: .5; }
.loc-back svg { width: 18px; height: 18px; stroke: #1a1a1a; stroke-width: 1.8; fill: none; }
.loc-header-title { flex: 1; font-size: 15px; font-weight: 600; color: #1a1a1a; text-align: center; letter-spacing: .3px; }
.loc-header-spacer { width: 32px; flex-shrink: 0; }

/* ===== Scroll 滚动容器 ===== */
.loc-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.loc-scroll::-webkit-scrollbar { width: 0; }

/* ===== Map 地图 ===== */
.loc-map-wrap {
    position: relative; width: 100%; height: 230px;
    background: #eef2f5; overflow: hidden; flex-shrink: 0;
}
.loc-map-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 32px 32px;
}
.loc-map-roads { position: absolute; inset: 0; }
.loc-map-roads svg { width: 100%; height: 100%; }
.loc-map-route { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.loc-map-route svg { width: 100%; height: 100%; }
.loc-map-stations { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.loc-pin {
    position: absolute; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    transform: translate(-50%,-100%);
    transition: left .5s cubic-bezier(.34,1.56,.64,1), top .5s cubic-bezier(.34,1.56,.64,1);
}
.loc-pin-icon { width: 26px; height: 34px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.loc-pin-icon svg { width: 100%; height: 100%; }
.loc-pin.user .loc-pin-icon svg { fill: #3d7cf5; stroke: #fff; stroke-width: 1.2; }
.loc-pin.char .loc-pin-icon svg { fill: #e85d8a; stroke: #fff; stroke-width: 1.2; }
.loc-pin-tag {
    margin-top: 2px; font-size: 9px; font-weight: 600; color: #1a1a1a;
    background: #fff; padding: 1px 7px; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis;
}
.loc-dist-badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); z-index: 4;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px; padding: 3px 12px;
    font-size: 11px; font-weight: 700; color: #1a1a1a;
    box-shadow: 0 1px 6px rgba(0,0,0,.08); white-space: nowrap;
}
.loc-st-dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: #fff; border: 2px solid #4caf80;
    transform: translate(-50%,-50%); box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ===== Content 内容区 ===== */
.loc-content { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 14px; }

.loc-sec {
    background: #fff; border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px; padding: 14px 16px;
}
.loc-sec-title {
    font-size: 11px; font-weight: 600; color: #8e8e93;
    text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.loc-sec-title svg { width: 13px; height: 13px; stroke: #8e8e93; stroke-width: 1.8; fill: none; }
.loc-sec-title span { font-weight: 400; font-size: 10px; color: #aeaeb2; text-transform: none; letter-spacing: 0; }

/* Input 输入行 */
.loc-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.loc-input-row:last-child { margin-bottom: 0; }
.loc-input-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.loc-input-dot.user { background: #3d7cf5; }
.loc-input-dot.char { background: #e85d8a; }
.loc-input-who { font-size: 11px; font-weight: 600; color: #1a1a1a; min-width: 28px; flex-shrink: 0; }
.loc-input-field {
    flex: 1; height: 34px;
    border: 1px solid rgba(0,0,0,.1); border-radius: 10px;
    padding: 0 10px; font-size: 12px; font-weight: 500;
    color: #1a1a1a; background: #fafafa; outline: none;
    transition: border-color .2s;
}
.loc-input-field:focus { border-color: #3d7cf5; }
.loc-input-field::placeholder { color: #c7c7cc; }

/* Quick tags 快速标签 */
.loc-quick-wrap { margin-top: 8px; }
.loc-quick-label { font-size: 10px; font-weight: 500; color: #8e8e93; margin-bottom: 6px; }
.loc-quick-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.loc-quick-tag {
    padding: 4px 10px; border-radius: 8px; background: #f2f2f7;
    border: 1px solid transparent; font-size: 11px; font-weight: 500;
    color: #636366; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.loc-quick-tag:active { transform: scale(.95); }
.loc-quick-tag.active { background: #e8f0ff; border-color: rgba(61,124,245,.2); color: #3d7cf5; }

/* Chips 信息芯片 */
.loc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.loc-chip {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 8px; background: #f2f2f7;
    font-size: 11px; color: #636366;
}
.loc-chip svg { width: 12px; height: 12px; stroke: #8e8e93; stroke-width: 1.8; fill: none; }
.loc-chip b { font-weight: 700; color: #1a1a1a; }

/* Commute bar 通勤进度 */
.loc-commute { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.loc-commute-text { font-size: 10px; color: #8e8e93; flex-shrink: 0; }
.loc-commute-bar { flex: 1; height: 4px; border-radius: 2px; background: #f2f2f7; overflow: hidden; }
.loc-commute-fill { height: 100%; border-radius: 2px; transition: width .5s, background .5s; }
.loc-commute-val { font-size: 11px; font-weight: 600; min-width: 48px; text-align: right; }

/* Stations 站点 */
.loc-st-list { display: flex; flex-direction: column; gap: 4px; }
.loc-st-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; transition: background .15s; }
.loc-st-item:active { background: #f2f2f7; }
.loc-st-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loc-st-icon.subway { background: rgba(61,124,245,.1); }
.loc-st-icon.bus { background: rgba(76,175,128,.1); }
.loc-st-icon.train { background: rgba(245,166,35,.1); }
.loc-st-icon svg { width: 13px; height: 13px; stroke-width: 1.8; fill: none; }
.loc-st-icon.subway svg { stroke: #3d7cf5; }
.loc-st-icon.bus svg { stroke: #4caf80; }
.loc-st-icon.train svg { stroke: #f5a623; }
.loc-st-name { flex: 1; font-size: 12px; font-weight: 500; color: #1a1a1a; }
.loc-st-dist { font-size: 10px; color: #8e8e93; flex-shrink: 0; }

/* Plans 路线方案 */
.loc-plan-list { display: flex; flex-direction: column; gap: 6px; }
.loc-plan {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 12px; border: 1px solid transparent;
    cursor: pointer; transition: all .2s;
}
.loc-plan:active { transform: scale(.98); }
.loc-plan.active { background: #f0f4ff; border-color: rgba(61,124,245,.2); }
.loc-plan-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loc-plan-icon svg { width: 15px; height: 15px; stroke-width: 1.8; fill: none; }
.loc-plan-body { flex: 1; min-width: 0; }
.loc-plan-name { font-size: 12px; font-weight: 600; color: #1a1a1a; }
.loc-plan-desc { font-size: 10px; color: #8e8e93; margin-top: 1px; }
.loc-plan-time { text-align: right; flex-shrink: 0; }
.loc-plan-time strong { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.loc-plan-time small { font-size: 9px; color: #8e8e93; font-weight: 400; }

/* Send button 发送 */
.loc-send {
    width: calc(100% - 32px); margin: 0 16px 8px; height: 44px;
    border: none; border-radius: 12px; background: #1a1a1a;
    color: #fff; font-size: 13px; font-weight: 600;
    letter-spacing: .5px; cursor: pointer; transition: opacity .2s; flex-shrink: 0;
}
.loc-send:active { opacity: .7; }

/* ============================================
   Chat bubble location card 聊天位置气泡
   ============================================ */
.loc-bubble-card {
    width: 100%; max-width: 280px;
    border-radius: 14px; overflow: hidden;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
    cursor: pointer; transition: transform .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.loc-bubble-card:active { transform: scale(.97); }

/* Mini map 迷你地图 */
.loc-bubble-map {
    width: 100%; height: 120px;
    background: #eef2f5; position: relative; overflow: hidden;
}
.loc-bubble-map .loc-map-grid { background-size: 22px 22px; }
.loc-bubble-roads { position: absolute; inset: 0; }
.loc-bubble-roads svg { width: 100%; height: 100%; }
.loc-bubble-route { position: absolute; inset: 0; }
.loc-bubble-route svg { width: 100%; height: 100%; }
.loc-bubble-pin-u, .loc-bubble-pin-c {
    position: absolute; filter: drop-shadow(0 1px 3px rgba(0,0,0,.2));
}
.loc-bubble-pin-u { width: 18px; height: 22px; }
.loc-bubble-pin-c { width: 18px; height: 22px; }
.loc-bubble-pin-u svg { width: 100%; height: 100%; fill: #3d7cf5; stroke: #fff; stroke-width: 1.5; }
.loc-bubble-pin-c svg { width: 100%; height: 100%; fill: #e85d8a; stroke: #fff; stroke-width: 1.5; }

/* Distance overlay 距离悬浮 */
.loc-bubble-dist {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border-radius: 10px; padding: 3px 10px;
    font-size: 10px; font-weight: 700; color: #1a1a1a;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Info area 信息区 */
.loc-bubble-info { padding: 10px 12px 12px; }
.loc-bubble-title {
    font-size: 13px; font-weight: 600; color: #1a1a1a;
    line-height: 1.3; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.loc-bubble-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.loc-bubble-tag {
    display: flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px;
    background: #f2f2f7; font-size: 10px; color: #636366;
}
.loc-bubble-tag svg { width: 10px; height: 10px; stroke: #8e8e93; stroke-width: 1.8; fill: none; }
.loc-bubble-tag b { font-weight: 700; color: #1a1a1a; }
.loc-bubble-hint {
    margin-top: 6px; font-size: 10px; color: #aeaeb2;
    display: flex; align-items: center; gap: 3px;
}
.loc-bubble-hint svg { width: 10px; height: 10px; stroke: #aeaeb2; stroke-width: 1.5; fill: none; }