/* ==========================================
   WALKTAXI 3.0 - 專業級行程專屬 UI (Trip Modal & Widget)
   核心色: 土黃 (#FFCC33), 背景 (#F5F6F8), 深灰 (#4a4a4a)
========================================== */

.trip-floating-widget {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%);
    background: #4a4a4a; color: #FFCC33; padding: 15px 12px 15px 8px;
    border-radius: 0 24px 24px 0; font-size: 1.1rem; font-weight: 900;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.15); z-index: 9000; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #FFCC33; border-left: none;
}
.trip-floating-widget:active { background: #333; transform: translateY(-50%) scale(0.95); }
.trip-floating-widget.hidden { transform: translate(-100%, -50%); opacity: 0; pointer-events: none; }
.trip-floating-widget .pulse-dot { width: 8px; height: 8px; background: #FFCC33; border-radius: 50%; animation: pulseYellow 1.5s infinite; }

.trip-modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    z-index: 10500; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.trip-modal-overlay.active { opacity: 1; pointer-events: auto; }

.trip-card {
    background: #FFFFFF; width: 92%; max-width: 380px;
    border-radius: 28px; padding: 0; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column; max-height: 88vh; overflow: hidden;
}
.trip-modal-overlay.active .trip-card { transform: scale(1); }
.trip-card-body { padding: 25px 20px 20px 20px; overflow-y: auto; flex: 1; }

.tp-status-bar { display: flex; justify-content: space-between; align-items: center; font-weight: 900; margin-bottom: 20px; }
.tp-status { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; color: #111; }
.tp-status .status-dot { width: 10px; height: 10px; background: #FFCC33; border-radius: 50%; }
.tp-eta { color: #4a4a4a; font-size: 1.15rem; display: flex; align-items: center; gap: 5px; }

/* --- 📍 路線與標籤卡片 (文字單專用) --- */
.tp-route-card { 
    background: #FDFCF7; border: 1px solid #E5E7EB; border-radius: 16px; 
    padding: 15px 20px; display: flex; flex-direction: column; align-items: stretch;
    margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.tp-route-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tp-route-texts { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 900; color: #111; flex: 1; white-space: nowrap; overflow: hidden; }
.tp-route-texts i { color: #BBBBBB; font-size: 1.2rem; }
.tp-nav-btn { background: #F5F6F8; color: #4a4a4a; width: 44px; height: 44px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; cursor: pointer; transition: 0.1s; flex-shrink: 0; }
.tp-nav-btn:active { transform: scale(0.9); background: #E5E7EB; }

/* --- 🎙️ 語音單重聽卡片 (語音單專用) --- */
.tp-voice-card {
    background: #FDFCF7; border: 1px solid #E5E7EB; border-radius: 16px; 
    padding: 15px 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.btn-replay-voice { 
    width: 100%; background-color: #FFF9E6; border: 2px dashed #FFCC33; 
    color: #B8860B; border-radius: 16px; height: 50px; font-size: 1.1rem; 
    font-weight: 900; display: flex; align-items: center; justify-content: center; 
    gap: 8px; transition: 0.1s; cursor: pointer;
}
.btn-replay-voice.giant { height: 65px; font-size: 1.25rem; margin-bottom: 12px; }
.btn-replay-voice:active { transform: scale(0.98); }
.btn-replay-voice.playing { background-color: #FFE5E5; border-color: #E53935; color: #E53935; animation: replayPulse 1.5s infinite; }

/* 標籤 (Tags) */
/* 🌟 Tags 標籤區 (更新為白底黑字黑框) */
.tp-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tp-tag { 
    background: #FFFFFF; 
    color: #111111; 
    border: 2px solid #111111; 
    padding: 6px 12px; 
    border-radius: 8px; 
    font-size: 0.95rem; 
    font-weight: 900; 
}
/* --- 📝 貨主專用：補填電話輸入框 --- */
.tp-master-input-box {
    background: #FFF9E6; border: 1px solid #FFCC33; border-radius: 16px; 
    padding: 12px 15px; margin-bottom: 20px;
}
.tp-master-input-box .input-title { font-size: 0.85rem; font-weight: 900; color: #B8860B; margin-bottom: 8px; }

/* --- 🎛️ 2x2 操作矩陣 --- */
.tp-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.tp-btn-action { 
    border: none; border-radius: 16px; padding: 15px 0; font-size: 1.1rem; 
    font-weight: 900; display: flex; justify-content: center; align-items: center; 
    gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.1s; cursor: pointer;
}
.tp-btn-action:active { transform: scale(0.96); }
.tp-btn-action i { font-size: 1.3rem; }

.btn-ptt { background: #FFCC33; color: #111; user-select: none; touch-action: none; }
.btn-ptt.recording { background: #DC3545; color: #FFF; animation: pulseRecord 1s infinite alternate; }
.btn-master { background: #4a4a4a; color: #FFCC33; }
.btn-wa { background: #25D366; color: #FFF; }
.btn-client { background: #FFFFFF; color: #4a4a4a; border: 2px solid #E5E7EB; box-shadow: none; }
.btn-client:active { background: #F5F6F8; }

.tp-msg-marquee { font-size: 0.95rem; font-weight: 800; color: #888; text-align: center; margin-bottom: 15px; }
.tp-aux-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; /* border-bottom: 1px solid #F0F0F0; */ padding-bottom: 15px; }
.tp-btn-toggle-data { background: transparent; border: none; color: #888; font-weight: 800; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }

.tp-data-panel { background: #FDFCF7; border-radius: 12px; padding: 15px; font-size: 0.9rem; color: #666; font-weight: 800; border: 1px solid #E5E7EB; margin-bottom: 15px; display: none; }
.tp-data-panel.show { display: block; animation: fadeInStep 0.2s ease-out; }
.tp-data-row { margin-bottom: 8px; display: flex; justify-content: space-between; }
.tp-data-row span:last-child { color: #111; font-weight: 900; text-align: right; }

.tp-sticky-bottom { background: #FFFFFF; padding: 15px 20px 20px 20px; border-top: 1px solid #F0F0F0; z-index: 10; }
.tp-finish-btn { width: 100%; background: #FFCC33; color: #111; border: none; border-radius: 16px; font-size: 1.25rem; font-weight: 900; padding: 16px 0; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(255, 204, 51, 0.3); transition: 0.1s; margin-bottom: 15px; }
.tp-finish-btn:active { background: #E6B800; transform: scale(0.97); }
.tp-bottom-links { display: flex; justify-content: space-between; align-items: center; padding: 0 5px; }
.tp-link-minimize { color: #888; font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.tp-link-cancel { color: #4a4a4a; font-weight: 800; font-size: 0.95rem; cursor: pointer; text-decoration: underline; }
/* 🌟 語音單專用的重聽按鈕 (取代地點) */
.btn-replay-voice { 
    width: 100%; background-color: #FFF9E6; border: 2px dashed #FFCC33; 
    color: #B8860B; border-radius: 12px; height: 50px; font-size: 1.1rem; 
    font-weight: 900; display: flex; align-items: center; justify-content: center; 
    gap: 8px; transition: 0.1s; cursor: pointer;
}
.btn-replay-voice:active { transform: scale(0.98); }
.btn-replay-voice.playing { background-color: #FFE5E5; border-color: #E53935; color: #E53935; }



/* 🌟 互發 GPS 按鈕 */
.btn-share-gps { background: #F5F6F8; color: #4a4a4a; border: none; border-radius: 12px; padding: 6px 14px; font-size: 0.95rem; font-weight: 900; cursor: pointer; transition: 0.1s; display: flex; align-items: center; gap: 5px; }
.btn-share-gps:active { transform: scale(0.95); background: #E5E7EB; }





/* 🌟 多單 Tab 標籤列 */
.tp-tabs-container { display: flex; overflow-x: auto; background: #E5E7EB; padding: 12px 12px 0 12px; gap: 8px; border-radius: 24px 24px 0 0; }
.tp-tabs-container::-webkit-scrollbar { display: none; }
.tp-tab { background: #D1D5DB; color: #666; font-weight: 800; font-size: 1rem; padding: 10px 18px; border-radius: 16px 16px 0 0; white-space: nowrap; cursor: pointer; border: none; transition: 0.2s; flex-shrink: 0; }
.tp-tab.active { background: #FFFFFF; color: #111; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); }
/* 修正頂部圓角 */
.trip-modal-overlay .trip-card { border-radius: 24px; overflow: hidden; background: #FFF; }
.trip-card-body { padding-top: 15px; }


/* 🚕 司機車輛 Icon 模組 (帶座位徽章) */
.taxi-badge-container { display: flex; align-items: center; gap: 10px; }
.taxi-icon-wrapper { 
    position: relative; display: inline-flex; justify-content: center; align-items: center; 
    width: 36px; height: 36px; border-radius: 10px; background: #F5F6F8; 
}
.taxi-icon-wrapper.red { color: #DC3545; background: #FFE5E5; }
.taxi-icon-wrapper.green { color: #198754; background: #D1E7DD; }
.taxi-icon-wrapper.blue { color: #0D6EFD; background: #CFF4FC; }
.taxi-icon-wrapper i { font-size: 1.4rem; }
.seat-number-badge { 
    position: absolute; top: -6px; right: -6px; background: #111; color: #FFCC33; 
    font-size: 0.75rem; font-weight: 900; padding: 2px 6px; border-radius: 8px; 
    border: 2px solid #FFF; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.plate-text { font-size: 1.35rem; font-weight: 900; color: #111; letter-spacing: 1px; }


/* ==========================================
   🌟 雙重身分識別系統 (Master vs Driver)
========================================== */

/* Tabs 身分標籤 */
.tab-role-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 6px;
    font-weight: 900;
    vertical-align: text-bottom;
}
.tab-role-badge.driver { background: #FFCC33; color: #111; }
.tab-role-badge.master { background: #4a4a4a; color: #FFF; }

/* 🌟 司機接單版面專屬底色 (淺金黃) */
.trip-card.is-driver-role { 
    background: #FFF9E6; /* 淺金黃主底色 */
    border: 2px solid #FFCC33; 
}

/* 底部操作區跟著變色 */
.trip-card.is-driver-role .tp-sticky-bottom { 
    background: #FFF9E6; 
    border-top: 1px dashed #FFCC33; 
}

/* 內部的資訊卡片保持純白，製造立體層次感 */
.trip-card.is-driver-role .tp-route-card, 
.trip-card.is-driver-role .tp-data-panel { 
    background: #FFFFFF; 
    border-color: #FFE599; 
}

/* 讓 Active Tab 的底色無縫連接卡片的淺金黃色 */
.trip-card.is-driver-role .tp-tab.active { 
    background: #FFF9E6; 
}

/* 🌟 行程內的橫向聊天清單 (完美復刻大堂) */
.trip-chat-wrapper {
    /* background: #FDFCF7; border: 1px solid #E5E7EB; border-radius: 16px; 
    padding: 12px;  */margin-bottom: 20px; overflow-x: auto; 
    display: flex; align-items: center;
}
.trip-chat-wrapper::-webkit-scrollbar { display: none; }
.trip-chat-wrapper .chatter-tray { display: flex; gap: 8px; width: max-content; }








.tc-msg { display: flex; flex-direction: column; max-width: 85%; }
.tc-msg.self { align-self: flex-end; align-items: flex-end; }
.tc-msg.other { align-self: flex-start; align-items: flex-start; }

.tc-bubble { 
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; 
    border-radius: 16px; font-size: 1rem; font-weight: 800; 
    cursor: pointer; transition: 0.1s; border: 2px solid transparent; 
}
.tc-bubble:active { transform: scale(0.95); }
.tc-msg.self .tc-bubble { background: #FFCC33; color: #111; border-radius: 16px 16px 0 16px; }
.tc-msg.other .tc-bubble { background: #FFFFFF; color: #4a4a4a; border-color: #E5E7EB; border-radius: 16px 16px 16px 0; }
.tc-bubble.playing { animation: replayPulse 1.5s infinite; border-color: #E53935; color: #E53935; }
.tc-meta { font-size: 0.7rem; color: #888; font-weight: 900; margin-top: 4px; }

/* 🌟 極簡圓形懸浮按鈕 (FAB) */
.trip-floating-fab {
    position: fixed; 
    right: 20px; 
    z-index: 9900;
    width: 62px;          /* 完美圓形寬高 */
    height: 62px;
    border-radius: 50%;   /* 正圓形 */
    border: 3px solid #FFF; /* 白色粗邊框 */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    cursor: pointer; 
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
}
.trip-floating-fab:active { transform: scale(0.9); }
.trip-floating-fab.hidden { display: none; }

/* 右上角紅點/數字標籤 */
.fab-badge {
    position: absolute; 
    top: -4px; 
    right: -4px;
    background: #EF4444; /* 鮮紅色 */
    color: #FFF;
    border: 2px solid #FFF; /* 白色保護框 */
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: 900; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}
.fab-badge.number { 
    min-width: 24px; 
    height: 24px; 
    font-size: 0.85rem; 
    padding: 0 4px; 
}
.fab-badge.dot { 
    width: 16px; 
    height: 16px; 
    animation: pulseRedDot 1.5s infinite alternate; 
}
@keyframes pulseRedDot { 
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 
    100% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 
}



@keyframes pulseYellow { 0% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255, 204, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0); } }
@keyframes pulseRecord { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); } 100% { transform: scale(0.96); box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); } }
@keyframes replayPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4); } 50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }

/* ==========================================
   ✨ 附圖全新質感版型樣式 (Trip Master Modern UI)
========================================== */

/* 頂部欄：下拉選單 + 膠囊重聽按鈕 */
.tm-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.tm-dropdown-badge {
    background: #ffcc33;
    color: #4a4a4a;
    border-radius: 12px;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.tm-btn-replay {
    background: #F5F6F8;
    color: #333;
    border: none;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.1s;
}
.tm-btn-replay:active { transform: scale(0.96); background: #E5E7EB; }

/* 司機資訊卡片 (Hero Card) */
.tm-driver-hero-card {
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 16px;
}
.tm-car-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #F5F6F8;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tm-car-avatar.green { background: #E8F5E9; color: #2E7D32; }
.tm-car-avatar.blue { background: #E3F2FD; color: #1565C0; }

.tm-driver-meta { flex-grow: 1; }
.tm-plate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tm-plate-no { font-size: 1.25rem; font-weight: 900; color: #111; letter-spacing: 0.5px; }
.tm-seat-tag {
    background: #F5F6F8;
    color: #666;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
}
.tm-phone-row { font-size: 0.85rem; font-weight: 700; color: #777; display: flex; align-items: center; gap: 4px; }

.tm-eta-badge {
    background: #fff9e6;
    color: #b8860b;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* 語音紀錄區與黃色巨型麥克風按鈕 */
.tm-ptt-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.tm-chat-bubble-tray {
    flex-grow: 1;
    background: #FDFCF7;
    border: 1px solid #EAEAEA;
    border-radius: 16px;
    /* padding: 10px 14px; */
    min-height: 52px;
    display: flex;
    align-items: center;
    overflow-x: auto;
}
.tm-chat-bubble-tray::-webkit-scrollbar { display: none; }
.tm-btn-giant-ptt {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #FFCC33;
    color: #111;
    border: 2px solid #E6B800;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 204, 51, 0.3);
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.1s;
    user-select: none;
    touch-action: none;
}
.tm-btn-giant-ptt:active, .tm-btn-giant-ptt.recording {
    background: #DC3545;
    color: #FFF;
    border-color: #BD2130;
    transform: scale(0.92);
}

/* 輸入框 */
.tm-input-group {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #EAEAEA;
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 14px;
    margin-bottom: 8px;
}
.tm-input-group input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}
.tm-input-group button {
    border: none;
    background: transparent;
    color: #666;
    font-size: 1.1rem;
    padding: 8px 12px;
    cursor: pointer;
}

.tm-ptt-hint {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #AAA;
    margin-bottom: 14px;
}

/* 雙拼獨立通話按鈕 */
.tm-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.tm-split-btn {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    height: 48px;
}
.tm-split-btn.dark { background: #1F2421; }
.tm-split-btn.dark .tm-call-part { color: #FFF; border-right: 1px solid rgba(255,255,255,0.15); }
.tm-split-btn.dark .tm-wa-part { color: #25D366; }

.tm-split-btn.light { background: #FFFFFF; border: 1px solid #EAEAEA; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.tm-split-btn.light .tm-call-part { color: #111; border-right: 1px solid #EEE; }
.tm-split-btn.light .tm-wa-part { color: #25D366; }

.tm-call-part {
    flex: 2.2;
    border: none;
    background: transparent;
    font-weight: 900;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.tm-wa-part {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.1s;
}
.tm-call-part:active, .tm-wa-part:active { opacity: 0.7; }

/* 底部輔助操作列 */
.tm-aux-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.tm-btn-share-gps {
    background: #F5F6F8;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.tm-btn-share-gps:active { background: #E5E7EB; }

/* ==========================================
   🎙️ 極簡化語音 Pill 膠囊樣式
========================================== */
.tm-audio-pill {
    display: flex;
    align-items: center;
    background: #F1F3F5;
    border: 1px solid #E4E6EB;
    border-radius: 20px;
    padding: 4px 10px 4px 6px;
    gap: 6px;
    height: 38px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: 0.1s;
}
.tm-audio-pill.self {
    background: #FFF9E6;
    border-color: #FFE599;
}
.tm-pill-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E4E6EB;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.tm-audio-pill.self .tm-pill-icon {
    background: #FFCC33;
    color: #111;
}
.tm-pill-btn {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
}
.tm-pill-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #666;
}
.tm-pill-info .dur {
    font-weight: 900;
    color: #111;
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 6px;
}
.tm-audio-pill.playing {
    border-color: #DC3545;
    background: #FFE5E5;
    animation: replayPulse 1.5s infinite;
}

/* 🌟 小方型操作按鈕 (聯絡專用) */
.tm-sq-btn { 
    height: 48px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.4rem; 
    cursor: pointer; 
    border: none; 
    transition: 0.1s; 
}
.tm-sq-btn:active { transform: scale(0.95); }
.tm-sq-btn.send { background: #E5E7EB; color: #333; width: 48px; flex-shrink: 0; }
.tm-sq-btn.call { background: #f5f6f8; color: #111; flex-grow: 1; font-size: 1.1rem; font-weight: 900; gap: 8px; }
.tm-sq-btn.wa { background: #25D366; color: #FFF; width: 48px; flex-shrink: 0; }

/* 🌟 司機電話專屬按鈕 (發單端) */
.tm-call-driver-btn {
    background: #F5F6F8;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 8px 16px;
    margin-top: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.1s;
    width: max-content;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.tm-call-driver-btn:active {
    transform: scale(0.96);
    background: #E5E7EB;
}
.tm-call-driver-btn i {
    color: #111;
    font-size: 1.15rem;
}
.tm-call-driver-btn span {
    font-size: 1.15rem;
    font-weight: 900;
    color: #111;
    letter-spacing: 0.5px;
}