/* ============================================================================
   bus.css - 公車詳細面板（方向切換塊、停留所列表、收折／預覽）
   ============================================================================ */

/* --- 1. 方向切換塊（橫向滑動的分段選擇器，只標示終點方向） --- */
.bus-dir-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
    /* 左右淡出遮罩，暗示可以橫向滑動 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
}

.bus-dir-slider::-webkit-scrollbar {
    display: none;
}

.bus-dir-btn {
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.9em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bus-dir-btn:active {
    transform: scale(0.96);
}

.bus-dir-btn.active {
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    border-color: transparent;
}

/* --- 2. 停留所列表（資訊卡內的 capsule 列，列車 adv-detail-capsule 同構） --- */
.bus-stops-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

/* 方向切換的進場動畫 */
.bus-slide-in-left {
    animation: busSlideInLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.bus-slide-in-right {
    animation: busSlideInRight 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes busSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(48px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes busSlideInRight {
    from {
        opacity: 0;
        transform: translateX(-48px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bus-stop-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    /* 全圓角長膠囊（與方向切換塊、全站的膠囊語言一致） */
    border-radius: 999px;
}

/* 含車輛副列的兩行款：維持與單行相同的圓角半徑（單行高 41px 的一半），
   不隨列高放大成過大的弧 */
.bus-stop-row:has(.bus-stoprow-sub),
.bus-collapsed-capsule:has(.bus-collapsed-sub) {
    border-radius: 20px;
}

/* 展開卡：標頭與滑動塊、列表之間的間距 */
.bus-expanded-card .bus-dir-slider {
    margin: 10px 0;
}

.bus-stopcard .bus-stops-list {
    margin-top: 10px;
}

/* 站名：主名＋可跑馬燈的溢出部分（括弧或整名） */
.bus-stop-name {
    flex-grow: 1;
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-weight: 700;
    font-size: 0.95em;
    margin-right: 10px; /* 與右側時間膠囊之間留白 */
}

.bus-name-main {
    flex-shrink: 0;
    white-space: nowrap;
}

.bus-name-scroll {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.bus-name-inner {
    display: inline-block;
    white-space: nowrap;
}

/* 溢出時才啟動跑馬燈（左右來回，含端點停留） */
.bus-name-scroll.marquee .bus-name-inner {
    animation: busMarquee var(--marquee-dur, 6s) ease-in-out infinite alternate;
}

@keyframes busMarquee {

    0%,
    18% {
        transform: translateX(0);
    }

    82%,
    100% {
        transform: translateX(var(--marquee-shift, 0));
    }
}

/* 到站時間膠囊：每個停留所的時間獨立包起來
   顏色分級：arriving（進站中）橘／soon（5 分內）黃／near（倒數中）綠／
   run（已發車尚遠）藍／sched（未發車）灰 */
.bus-eta-pill {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    /* 數字等寬但字形與其他膠囊一致（不用 monospace，避免視覺大小不一） */
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    white-space: nowrap;
}

/* 進站中（まもなく）：橘色 */
.bus-eta-pill.arriving {
    color: #ff9500;
}

/* 5 分內（あと1〜5分）：黃色 */
.bus-eta-pill.soon {
    color: #b08800;
}

/* 倒數中（あと6分〜）：綠色 */
.bus-eta-pill.near {
    color: #0e8a3e;
}

/* 已發車但還遠（HH:MM頃）：藍色 */
.bus-eta-pill.run {
    color: #0a84ff;
}

/* 未發車（表定次発）：灰色 */
.bus-eta-pill.sched {
    color: rgba(120, 120, 128, 0.95);
}

.bus-eta-pill.none {
    opacity: 0.4;
}

/* 接近中的站名上色：巴士正接近的站（下一站）橘色、其後一站（下下站）黃色 */
.bus-stop-name.approach-next {
    color: #ff9500;
}

.bus-stop-name.approach-after {
    color: #b08800;
}

/* 運行狀態卡（無車／運行終了）：樣式完全沿用列車的 extension-route-card，
   此處不另外覆蓋 */

/* 行駛中的巴士標記（位於前一站與本站之間的空白處）：
   車牌與表定偏差包在與時間相同的膠囊裡，擁擠度接在膠囊後 */
.bus-marker-row {
    display: flex;
    align-items: center;
    padding: 2px 16px;
    font-weight: 700;
    font-size: 0.95em;
}

/* 列表內的 chip 與站名字級一致 */
.bus-stop-row .bus-eta-pill.chip {
    font-size: 0.95em;
}

.bus-plate-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

/* 車牌以醒目藍色標示 */
.bus-plate {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #0a84ff;
}

/* 展開卡：滑動切換時內容在卡框內橫向位移，超出部分裁切 */
.bus-expanded-card {
    overflow: hidden;
}

/* 淡出遮罩的寬度變數：註冊型別後才能平滑過渡（漸層 stop 本身不可動畫） */
@property --swipe-fade-w {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* 滑動切換的裁切層：位移中的列表在此層內被裁切
   touch-action: pan-y 讓瀏覽器不搶先接手橫向手勢（縱向捲動照常）
   遮罩常駐但寬度為 0（無視覺效果），啟用時寬度平滑展開到 32px，
   解除時平滑收回，不會有隱形牆瞬間冒出／消失的切換感 */
.bus-swipe-clip {
    overflow: hidden;
    touch-action: pan-y;
    --swipe-fade-w: 0px;
    transition: --swipe-fade-w 0.3s ease;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--swipe-fade-w), black calc(100% - var(--swipe-fade-w)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black var(--swipe-fade-w), black calc(100% - var(--swipe-fade-w)), transparent 100%);
}

/* 拖曳／切換動畫進行中：左右邊緣以線性漸層淡出（隱形牆） */
.bus-swipe-clip.bus-swipe-fade {
    --swipe-fade-w: 32px;
}

/* --- 收折檢視：與列車卡片（多路線・方向別）同構的資訊卡 --- */
.bus-collapsed-card {
    cursor: pointer;
}

/* 方向別群組：方向名作小標，群組之間留出呼吸空間 */
.bus-collapsed-card .adv-details-container {
    gap: 14px;
    margin-top: 10px;
}

.bus-collapsed-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bus-collapsed-dir {
    font-size: 0.9em;
    font-weight: 700;
    opacity: 0.6;
    padding: 0 4px;
}

/* capsule：主列（站名＋時間）＋副列（行駛中車輛的車牌・偏差）
   字級・內距・圓角與展開列（.bus-stop-row）完全一致，收折前後不跳動 */
.bus-collapsed-capsule {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    font-size: 1em;
    padding: 9px 16px;
    border-radius: 999px;
}

.bus-collapsed-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.bus-collapsed-stop {
    font-weight: 700;
    font-size: 0.95em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bus-collapsed-capsule .bus-eta-pill.chip {
    font-size: 0.95em;
}

.bus-collapsed-sub {
    display: flex;
    justify-content: flex-end;
}

/* chip：capsule 內的時間／車牌沿用配色分級，但去掉膠囊外框融入卡片 */
.bus-eta-pill.chip {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: inherit;
    font-weight: 800;
}

/* 站名可點擊（開啟 Google Maps／站牌總覽選單） */
.bus-stop-name.tappable {
    cursor: pointer;
}

.bus-stop-name.tappable:active {
    opacity: 0.6;
}

/* 表定偏差：＋延誤紅、－提早綠（在車牌膠囊內，間距由膠囊 gap 控制） */
.bus-delay {
    font-weight: 800;
}

.bus-delay.late {
    color: #ff3b30;
}

.bus-delay.early {
    color: #0e8a3e;
}

.bus-occ {
    margin-left: 8px;
    font-weight: 700;
}

/* 擁擠度顏色區分：満員紅、混雑橘、立席黃、空位綠 */
.bus-occ.full {
    color: #ff3b30;
}

.bus-occ.crowded {
    color: #ff9500;
}

.bus-occ.standing {
    color: #b08800;
}

.bus-occ.seats {
    color: #0e8a3e;
}

/* 收折／展開時的內容淡入（配合外殼的高度過渡） */
.bus-fade-in {
    animation: busFadeIn 0.4s ease;
}

@keyframes busFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 背景更新時：時間膠囊變化的脈衝提示（自然過渡而非生硬替換） */
.bus-eta-pill.bus-pill-updated {
    animation: busPillPulse 0.6s var(--ios-snap, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes busPillPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }

    45% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 巴士位置標記移動時的淡入 */
.bus-marker-in {
    animation: busFadeIn 0.4s ease;
}

/* 站牌總覽的路線列：可點擊跳轉至該路線
   主列（路線名＋時間）＋副列（車輛資訊）的兩段構成 */
.bus-stop-row.bus-route-link {
    cursor: pointer;
    transition: background 0.15s ease;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.bus-stoprow-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* 車輛資訊副列：車牌・擁擠度・走行位置（靠右對齊） */
.bus-stoprow-sub {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85em;
    font-weight: 700;
}

.bus-stoprow-sub .bus-occ {
    margin-left: 0;
}

.bus-away {
    opacity: 0.6;
}

.bus-stop-row.bus-route-link:active {
    background: rgba(120, 120, 128, 0.15);
}

/* 收折後預覽站不存在於此方向時的提示 */
.bus-select-hint {
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.6;
    padding: 8px 2px;
    text-align: center;
}

/* --- 3. 收折按鈕 --- */
.bus-toggle-btn {
    flex-direction: row !important;
    gap: 8px;
    width: 100%;
    padding: 14px 10px !important;
}

.bus-change-preview-btn {
    border: none;
    background: transparent;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.55;
    cursor: pointer;
    padding: 2px 8px;
    color: inherit;
    text-decoration: underline;
}

/* --- 4. 預覽停留所選擇對話框（沿用既存カード追加的清單風格） --- */
.bus-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.bus-picker-item:active {
    transform: scale(0.98);
}

.bus-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bus-picker-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(120, 120, 128, 0.5);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bus-picker-item.selected {
    border-color: #0a84ff;
    background: rgba(10, 132, 255, 0.08);
}

.bus-picker-item.selected .bus-picker-dot {
    background: #0a84ff;
    border-color: #0a84ff;
}

/* 搜尋結果右側的公車資訊 */
.bus-search-right {
    font-size: 0.8em;
    font-weight: 700;
    opacity: 0.6;
    white-space: nowrap;
}

/* --- 深色模式 --- */
@media (prefers-color-scheme: dark) {
    .bus-dir-btn {
        background: rgba(30, 30, 32, 0.65);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
    }

    .bus-dir-btn.active {
        background: rgba(255, 255, 255, 0.92);
        color: #000;
    }

    .bus-eta-pill {
        background: rgba(30, 30, 32, 0.65);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .bus-stop-row {
        background: rgba(0, 0, 0, 0.25);
        border-color: rgba(255, 255, 255, 0.05);
    }

    .bus-eta-pill.arriving {
        color: #ff9f0a;
    }

    .bus-eta-pill.soon {
        color: #ffd60a;
    }

    .bus-eta-pill.near {
        color: #30d158;
    }

    .bus-eta-pill.run {
        color: #64a9ff;
    }

    .bus-eta-pill.sched {
        color: rgba(174, 174, 178, 0.9);
    }

    .bus-stop-name.approach-next {
        color: #ff9f0a;
    }

    .bus-stop-name.approach-after {
        color: #ffd60a;
    }

    .bus-occ.full {
        color: #ff453a;
    }

    .bus-occ.crowded {
        color: #ff9f0a;
    }

    .bus-occ.standing {
        color: #ffd60a;
    }

    .bus-occ.seats {
        color: #30d158;
    }

    .bus-plate {
        color: #64a9ff;
    }

    .bus-delay.late {
        color: #ff453a;
    }

    .bus-delay.early {
        color: #30d158;
    }


    .bus-picker-item {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .bus-picker-item.selected {
        border-color: #0a84ff;
        background: rgba(10, 132, 255, 0.15);
    }
}