/* =========================================================
   RESPONSIVE STYLES FOR PLAN TRIP
========================================================= */

/* === BỔ SUNG RESPONSIVE BREAKPOINTS (TỪ USER) === */
@media (max-width: 1600px) {}

@media (max-width: 1420px) {}

@media (max-width: 1366px) {

    /* Mở scroll dọc tránh bị cắt Flatpickr và các khối khi màn hình quá thấp (ví dụ: máy tính 768px) */
    .trip-landing {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 1. KHU VỰC LANDING CHỌN TIÊU CHÍ */
    .trip-landing__container {
        padding-top: 16px;
        padding-bottom: 20px;
        gap: 20px;
        /* Thu hẹp gap ở màn 1366px */
    }

    .trip-hero__logo {
        width: min(150px, 40vw);
    }

    /* Thu nhỏ các panel Card trên Home */
    .trip-card--stay,
    .trip-card--service {
        min-height: 56px;
        height: 130px;
        padding: 16px 20px;
    }

    .trip-card--plan {
        padding: 16px 20px;
    }

    .trip-card__art--plan {
        width: min(200px, 100%);
    }

    /* 2. CHẾ ĐỘ HIỂN THỊ LỊCH TRÌNH (ITINERARY MODE) */

    /* Thu hẹp Navbar */
    body.is-itinerary-mode .itinerary-header {
        padding: 12px 24px;
    }

    .ih-meta {
        gap: 16px;
    }

    /* Cột Chat bên trái */
    body.is-itinerary-mode .trip-landing {
        min-height: 56px;
        width: 350px;
    }

    body.is-itinerary-mode .trip-composer {
        padding: 12px 16px;
    }

    /* Cột Nội dung bên phải */
    body.is-itinerary-mode #tripItineraryBoard {
        padding: 20px 24px;
    }

    /* Timeline Items */
    .tl-location-card {
        padding: 12px;
        gap: 12px;
    }

    .tl-loc-img-placeholder {
        width: 120px;
        height: 100px;
    }

    .tl-loc-heading {
        margin-bottom: 6px;
    }
}

@media (max-width: 1240px) {

    /* Thu hẹp vùng nháp lịch trình */
    .trip-landing__container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Giảm nhẹ cỡ chữ chung cho Hero, Chat, Planner */
    .trip-hero__title {
        font-size: 32px;
    }

    .trip-hero__subtitle {
        font-size: 16px;
    }

    .planner-section__title {
        font-size: 15px;
    }

    .planner-choice-button__title,
    .planner-budget-button__title,
    .planner-chip-button,
    .trip-composer__input {
        font-size: 14px;
    }

    .chat-msg__bubble,
    body.is-itinerary-mode .chat-msg--bot .chat-msg__text {
        font-size: 14px;
    }

    /* Card trang chủ */
    .trip-card--plan {
        padding: 16px;
    }

    .trip-card__copy h2 {
        font-size: 18px;
        line-height: 26px;
    }

    .trip-card__copy p {
        font-size: 13px;
    }

    .trip-card__art--plan {
        width: min(180px, 90%);
        margin-right: -10px;
    }

    /* Itinerary Mode */
    body.is-itinerary-mode .itinerary-header {
        padding: 10px 20px;
    }

    .ih-title {
        font-size: 18px;
    }

    .ih-meta {
        font-size: 13px;
        gap: 12px;
    }

    body.is-itinerary-mode .trip-landing {
        width: 35%;
        min-height: 56px;
        width: 340px;
    }

    body.is-itinerary-mode #tripItineraryBoard {
        padding: 16px;
    }

    /* Timeline Items - Giảm nhẹ text */
    .tl-activity-text {
        font-size: 16px;
    }

    .tl-loc-img-placeholder {
        width: 100px;
        height: 90px;
    }

    .tl-loc-heading {
        font-size: 16px;
    }

    .tl-loc-desc,
    .tl-loc-addr {
        font-size: 14px;
    }

    /* Figma Layout Overrides */
    .tl-pill-time {
        color: #059669 !important;
        /* Mức độ màu xanh đậm hơn để giống ảnh */
        background: #ecfdf5 !important;
        border: 1px solid #d1fae5 !important;
    }
}

@media (max-width: 1024px) {}

@media (max-width: 997px) {

    /* Rating Pill (purple) */
    .ai-card__review {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-card__rate {
        background-color: #f3e8ff !important;
        padding: 4px 8px;
        border-radius: 999px;
    }

    .ai-card__rate-score,
    .ai-card__rate-max {
        color: #7e22ce !important;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.5;
    }

    .ai-card__review-count {
        margin: 0;
        font-size: 14px;
        color: #475569;
    }

    /* Transit Section */
    .tl-transit-bar {
        color: #64748b;
        font-size: 14px;
        padding-top: 8px;
    }

    .tl-transit-bar i {
        color: #64748b;
    }

    /* Base Card Layout matching Figma */
    .ai-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px !important;
    }

    .ai-card__meta-group {
        height: auto;
        row-gap: 4px !important;
        margin-bottom: 2px;
    }

    .ai-card__image-container {
        width: 100% !important;
        height: 180px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px;
        overflow: hidden;
    }

    .ai-card__controls {
        display: none;
    }

    body.mobile-sort-mode .ai-card__controls {
        display: flex !important;
    }

    body.mobile-sort-mode .tl-item {
        touch-action: none;
        /* Khóa cuộn trang khi chạm vào thẻ để kéo thả */
    }

    body.mobile-sort-mode .ai-card__controls .pl-drag-btn {
        touch-action: none;
        /* Rất quan trọng để kéo thả trên thiết bị cảm ứng (không bị cuộn) */
    }

    body.mobile-sort-mode .ai-card__controls .pl-delete-btn {
        display: none !important;
    }

    body.mobile-sort-mode .tl-item {
        border: 2px dashed #009966;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .ai-card__icon-row {
        margin-top: 0 !important;
        align-items: flex-start;
    }

    .ai-card__content {
        width: 100% !important;
        padding: 0 !important;
    }

    .ai-card__image {
        position: relative !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ai-card__text-muted {
        white-space: unset;
    }

    .chat-ai-cards-container .ai-card__content .ai-card__title-group {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .ai-card.ai-card--selected {
        border: 2px solid #007F55 !important;
        background-color: rgba(0, 153, 102, 0.1);
    }

    .ai-card.ai-card--selected::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75ZM16.48 9.37756C16.9645 9.11257 17.1425 8.50493 16.8775 8.02038C16.6125 7.53582 16.0049 7.35782 15.5204 7.62282C13.6917 8.62286 12.1796 10.5529 11.1629 12.1096C10.7872 12.685 10.4662 13.2297 10.2094 13.6911C9.96984 13.4587 9.73258 13.257 9.52038 13.0892C9.2427 12.8697 8.99282 12.6965 8.81063 12.5772L8.49559 12.3815C8.01585 12.1079 7.40513 12.275 7.13152 12.7548C6.85797 13.2344 7.02493 13.8449 7.50442 14.1187L7.71471 14.2502C7.85752 14.3437 8.05764 14.4823 8.27997 14.6581C8.73753 15.0198 9.23126 15.494 9.54198 16.0135C9.73267 16.3323 10.0844 16.5191 10.4553 16.4987C10.8261 16.4782 11.1551 16.2536 11.3096 15.9159L11.4079 15.7105C11.4756 15.5721 11.577 15.3697 11.709 15.1204C11.9735 14.6207 12.3581 13.9372 12.8374 13.2032C13.8208 11.6975 15.1086 10.1275 16.48 9.37756Z" fill="%23009966"/></svg>');
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .chat-msg__confirm-actions {
        position: sticky;
        bottom: -8px;
    }

    .btn-mobile-confirm-replace,
    .ai-card__btn--cancel {
        background: #009966 !important;
        color: white !important;
        font-weight: 600;
        border-radius: 16px;
        padding: 8px 16px !important;
        font-size: 16px;
        border: none;
        display: flex;
        justify-content: center;
        cursor: pointer;
        line-height: 1.5;
    }

    .ai-card__btn--cancel {
        background: #ef4444 !important;
    }

    .trip-composer.hide-initial {
        display: none;
    }

    .planner-form-row .planner-form-group .planner-field__input {
        font-size: 14px;
    }

    .trip-composer {
        position: fixed;
        bottom: 24px;
        left: 16px;
        right: 16px;
        width: auto;
        z-index: 1000;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-height: 56px;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        row-gap: 8px;
        column-gap: 16px;
        margin: 0;
    }

    .trip-composer__pills {
        width: 100%;
        margin-bottom: 0;
    }

    .trip-composer__input {
        flex: 1 1 0%;
        background: #fff;
        border-radius: 28px;
        padding: 16px 56px 16px 24px;
        min-height: 56px;

        box-shadow: 0px 4px 32px rgba(77, 23, 154, 0.2);
        margin: 0;
        border: none;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        color: #4D5154;
        line-height: 24px;
        overflow-y: auto;
    }

    .trip-composer__input::placeholder {
        color: #A6A8A9;
    }

    .trip-composer__actions {
        display: contents;
    }

    .trip-composer__icon--send {
        position: absolute;
        right: 84px;
        bottom: 12px;
        width: 32px;
        height: 32px;
        background: #F3F4F6;
        border-radius: 28px;
        margin: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .trip-composer__icon--attach {
        position: relative;
        right: auto;
        bottom: auto;
        width: 56px;
        height: 56px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0px 4px 32px rgba(77, 23, 154, 0.2);
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: none;
    }

    .trip-composer__fab-menu {
        position: absolute;
        bottom: 80px;
        right: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        z-index: 1001;
        pointer-events: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .trip-composer__fab-menu.show {
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
    }

    .trip-composer__fab-menu .fab-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 999px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        font-size: 15px;
        font-weight: 500;
        color: #212529;
        font-family: 'Roboto', sans-serif;
        transition: background 0.2s;
        white-space: nowrap;
        text-decoration: none;
    }

    .trip-composer__fab-menu .fab-item:active {
        background: #f8f9fa;
    }

    .trip-composer__fab-menu .fab-item i {
        font-size: 20px;
        color: #4D5154;
    }

    /* Khi fab open, nt attach tr? thnh nt X tm */
    .trip-composer__icon--attach.is-fab-open {
        background: #6100FF;
        color: #fff;
    }

    .trip-composer__icon--attach.is-fab-open svg {
        display: none;
    }

    .trip-composer__icon--attach.is-fab-open::before {
        content: "\2715";
        /* Unicode X mark */
        font-size: 20px;
        color: #fff;
        line-height: 1;
    }

    .chat-options-container--grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .chat-options-container--grid::-webkit-scrollbar {
        display: none;
    }

    .chat-options-container--grid>.chat-option-card-new {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    /* Dấu hiệu nhận biết có thể vuốt ngang */
    .chat-msg__text[data-i18n="chatOptionIntro"]::after {
        content: "⟷ Vuốt ngang để xem thêm các phương án";
        display: block;
        margin-top: 8px;
        font-size: 13px;
        color: #7008e7;
        font-weight: 500;
        font-style: italic;
    }

    /* =========================================================
        ITINERARY HEADER MOBILE (Figma)
    ========================================================= */
    .itinerary-full-header {
        background: #fff;
    }

    /* Ghi đè padding của Desktop */
    .itinerary-header {
        padding: 16px 16px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .ih-title-group {
        flex: 1;
        min-width: 0;
        /* Cho phép text xuống dòng thay vì tràn ngang */
    }

    .ih-title {
        font-size: 18px;
        /* Theo Figma, title to rõ ràng */
        font-weight: 600;
        line-height: 26px;
        color: #1e293b;
        margin-bottom: 8px;
        white-space: normal;
    }

    .ih-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        align-items: center;
    }

    .ih-meta-item {
        font-size: 14px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        /* Không cho rớt chữ lẻ loi */
    }

    .ih-meta-item i {
        font-size: 18px;
        color: #64748b;
        margin: 0;
    }

    /* Style cho nút 3 chấm theo đúng Figma */
    .ih-actions {
        flex-shrink: 0;
        margin-top: 0;
    }

    .ih-actions .btn.d-lg-none {
        background: #f1f5f9;
        /* Nền xám nhạt */
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        /* Bo tròn hoàn toàn */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #1e293b;
    }

    .ih-actions .btn.d-lg-none i {
        font-size: 24px;
    }

    /* =========================================================
        iOS STYLE BOTTOM SHEET MODAL (Mobile Only)
    ========================================================= */
    .bs-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* Nền tối mờ */
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        backdrop-filter: blur(2px);
        /* Hiệu ứng blur iOS */
    }

    .bs-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .bs-modal-content {
        background: #fff;
        border-radius: 20px 20px 0 0;
        /* Bo tròn đều như iOS */
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        /* Hiệu ứng nảy nhẹ của iOS */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        /* Hỗ trợ tai thỏ iPhone */
    }

    .bs-modal-overlay.show .bs-modal-content {
        transform: translateY(0);
    }

    .bs-drag-handle {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 16px 0;
        cursor: grab;
        flex-shrink: 0;
    }

    .bs-drag-handle div {
        width: 36px;
        height: 5px;
        background: #d1d5db;
        /* Xám nhạt iOS */
        border-radius: 10px;
    }

    .ih-modal-menu {
        display: flex;
        flex-direction: column;
        padding: 0 16px 16px 16px;
    }

    .ih-modal-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #fff;
        border-radius: 12px;
        color: #212529;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.2s;
    }

    .ih-modal-item:active {
        background: #e9ecef;
        /* Hiệu ứng khi nhấn */
    }

    .ih-modal-item i {
        font-size: 20px;
        color: #6d28d9;
        /* Tông màu chính */
    }

    /* 1. Reset layout for itinerary board to take full width */
    body.is-itinerary-mode .trip-content-wrapper {
        flex-direction: column;
    }

    body.is-itinerary-mode #tripItineraryBoard {
        width: 100%;
        max-width: 100%;
        flex: 1;
        padding-bottom: 96px;
    }

    /* 2. Trip-landing là bottom sheet - luôn fixed full width */
    body.is-itinerary-mode .trip-landing {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1050;
        border: none;
        background: transparent;
        pointer-events: none;
    }

    body.is-itinerary-mode .trip-landing__container {
        min-height: 0;
        height: auto;
        max-height: none;
        padding: 0;
    }

    /* 3. Ẩn trip-landing khi collapsed */
    body.is-itinerary-mode:not(.chat-expanded) .trip-landing {
        display: none;
    }

    /* Strip fixed positioning from trip-composer inside */
    body.is-itinerary-mode .trip-composer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Collapsed state: ẩn chat interface */
    body.is-itinerary-mode:not(.chat-expanded) .trip-chat-interface {
        display: none;
    }

    /* 4. Expanded State (Bottom Sheet) - Đúng theo Figma */
    body.is-itinerary-mode.chat-expanded {
        overflow: hidden;
    }

    body.is-itinerary-mode.chat-expanded .trip-landing {
        display: flex;
        flex-direction: column;
        height: 88vh;
        max-height: 88vh;
        /* Figma: nền trắng tinh, góc bo 28px */
        background: #ffffff;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        min-width: unset;
        max-width: unset;
        /* Animation trượt từ dưới lên */
        animation: chatSheetSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
        padding: 0;
    }

    /* State khi đang đóng (class chat-closing) */
    body.is-itinerary-mode.chat-closing .trip-landing {
        display: flex;
        animation: chatSheetSlideDown 0.28s ease-in forwards;
    }

    body.is-itinerary-mode.chat-expanded .trip-landing__container {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 8px;
    }

    body.is-itinerary-mode.chat-expanded .trip-chat-interface {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        background: none;
    }

    /* Chat message list */
    body.is-itinerary-mode.chat-expanded .chat-message-list-wrapper {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        -webkit-overflow-scrolling: touch;
    }

    body.is-itinerary-mode.chat-expanded .chat-message-list {
        padding: 16px;
    }

    /* -------------------------------------------------------
       SUBMIT BAR (Figma 10326:16630)
       Layout: Container padding 16px, drop-shadow tím nhạt
       Input pill: nền trắng #fff, radius 999px, padding 12px 24px  
       Send icon: absolute right trong pill, nền #f3f4f6, radius 999px, 32×32, icon 16px
       ------------------------------------------------------- */
    body.is-itinerary-mode.chat-expanded .trip-composer {
        background: transparent;
        padding: 16px;
        border-top: none;
        flex-shrink: 0;
        /* position relative để send button absolute bên trong */
        position: relative;
        /* Drop-shadow theo Figma */
        filter: drop-shadow(0px 4px 32px rgba(77, 23, 154, 0.2));
        /* Layout: chỉ còn input + send, dùng flex row */
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        min-height: unset;
    }

    /* Input pill: nền TRẮNG, radius 999px, padding 12px 24px */
    body.is-itinerary-mode.chat-expanded .trip-composer__input {
        box-shadow: none;
        background: #ffffff;
        border-radius: 999px;
        /* padding phải 52px để chỗ cho send button 32px + margin 12px */
        padding: 18px 52px 18px 24px;
        min-height: 48px;
        max-height: 120px;
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #4D5154;
        letter-spacing: 0.5px;
        line-height: 24px;
        resize: none;
        overflow: hidden;
        margin-bottom: 0;
    }

    body.is-itinerary-mode.chat-expanded .trip-composer__input::placeholder {
        color: #A6A8A9;
    }

    /* Ẩn actions container (chứa cả attach lẫn send) */
    body.is-itinerary-mode.chat-expanded .trip-composer__actions {
        display: contents;
        /* không tạo box nhưng children vẫn render */
    }

    /* Ẩn attach button */
    body.is-itinerary-mode.chat-expanded .trip-composer__icon--attach {
        display: none;
    }

    /* Send icon: absolute right trong pill, nền #f3f4f6, radius 999px, 32×32 */
    body.is-itinerary-mode.chat-expanded .trip-composer__icon--send {
        position: absolute;
        right: 28px;
        /* 16px (padding composer) + 12px (margin trong pill) */
        top: 50%;
        transform: translateY(-50%);
        background: #f3f4f6;
        border-radius: 999px;
        width: 32px;
        height: 32px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        z-index: 1;
    }

    body.is-itinerary-mode.chat-expanded .trip-composer__icon--send svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Ẩn các thứ khác không cần */
    body.is-itinerary-mode.chat-expanded .trip-composer__icon--menu,
    body.is-itinerary-mode.chat-expanded .trip-composer__fab-menu,
    body.is-itinerary-mode.chat-expanded .trip-composer__pills,
    body.is-itinerary-mode.chat-expanded .trip-composer__label {
        display: none;
    }

    /* 5. Drag Handle - Figma: 32×4px, màu #e7e5e4, căn giữa, padding 16px */
    .chat-drag-handle {
        display: none;
        width: 100%;
        padding: 16px 0 8px;
        justify-content: center;
        align-items: center;
        cursor: grab;
        flex-shrink: 0;
        touch-action: none;
    }

    .chat-drag-handle div {
        width: 32px;
        height: 4px;
        background-color: #e7e5e4;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .chat-drag-handle:hover div,
    .chat-drag-handle:active div {
        background-color: #a8a29e;
    }

    body.is-itinerary-mode.chat-expanded .chat-drag-handle {
        display: flex;
    }

    /* 6. Backdrop */
    .chat-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
        opacity: 0;
        transition: opacity 0.35s;
    }

    body.is-itinerary-mode.chat-expanded .chat-backdrop {
        display: block;
        opacity: 1;
        animation: chatBackdropFadeIn 0.35s ease forwards;
    }

    body.is-itinerary-mode.chat-closing .chat-backdrop {
        display: block;
        animation: chatBackdropFadeOut 0.28s ease forwards;
    }

    /* 7. Floating bar animation khi xuất hiện */
    .mobile-floating-chat-bar.visible {
        animation: floatingBarFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* -------------------------------------------------------
       CHAT BUBBLES MOBILE - Figma colors & radius
       ------------------------------------------------------- */
    body.is-itinerary-mode .chat-msg--user .chat-msg__text {
        background-color: #f5f3ff;
        border-radius: 16px 16px 4px 16px;
        color: #212529;
        padding: 8px 16px;
        border: none;
    }

    /* Bot message: không nền, text thô */
    body.is-itinerary-mode .chat-msg--bot .chat-msg__text {
        background-color: transparent;
        border: none;
        border-radius: 4px 16px 16px 16px;
        padding: 0;
        color: #212529;
        font-size: 16px;
        line-height: 1.78;
        letter-spacing: 0.5px;
    }

    /* Summary box trong bot message: nền trắng, border #e5e7eb */
    body.is-itinerary-mode .chat-msg--bot .chat-summary-box {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 8px 16px;
        margin-top: 8px;
    }

    /* Row spacing */
    body.is-itinerary-mode .chat-msg {
        gap: 0;
        margin-bottom: 24px;
    }

    /* User row: căn phải, padding trái 94px */
    body.is-itinerary-mode .chat-msg--user {
        padding-left: 94px;
        align-items: flex-end;
    }

    /* Bot row: căn trái, không indent */
    body.is-itinerary-mode .chat-msg--bot {
        padding-left: 0;
        align-items: flex-start;
        margin-top: 0;
    }

    /* Responsive cho schedule-sticky-nav (lịch trình) */
    .schedule-sticky-nav .btn-reselect-option,
    .schedule-sticky-nav .divider-reselect {
        display: none !important;
    }

    .schedule-sticky-nav .schedule-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .day-section-title {
        margin-bottom: 8px
    }

    .tl-content-box {
        padding-left: 12px;
    }
}

@media (max-width: 768px) {
    /* =======================================================
       RESPONSIVE MOBILE: TripPlanner/Home (Figma Design)
       ======================================================= */

    .trip-main-wrapper,
    .trip-landing,
    .trip-landing__container {
        padding-top: 0;
        overflow: visible;
        /* BẮT BUỘC visible để sticky hoạt động */
    }

    .day-section-title>div {
        display: none !important;
    }

    .trip-options {
        margin-bottom: 0;
    }

    .trip-footer {
        padding-bottom: 0;
        position: relative;
        padding-top: 16px;
    }

    .trip-landing__container {
        padding: 0;
    }

    .chat-message-list {
        max-height: unset;
        padding-bottom: 80px;
    }

    .chat-options-action {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        gap: 8px;
        align-items: stretch;
        width: 100%;
    }

    .planner-language-switch {
        position: relative;
        /* Trả về luồng tự nhiên, không sticky/fixed nữa */
        padding: 16px 0 0 0;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        top: 0;
        right: 0;
    }

    .trip-hero {
        margin-bottom: 0;
        /* Giảm khoảng cách rộng bên dưới */
    }

    .trip-hero__message p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 8px;
    }

    /* Đưa layout chính về 1 cột dọc */
    .trip-options__main {
        flex-direction: column;
    }

    .trip-options__stack {
        flex-direction: column;
        gap: 16px;
    }

    /* CARD CHÍNH: Lên kế hoạch */
    .trip-card--plan {
        padding: 24px 24px 16px 24px;
    }

    .trip-card--plan .trip-card__copy h2 {
        font-size: 24px;
    }

    /* CARD VỪA: Lưu trú & Dịch vụ (Theo thiết kế là nằm ngang, ảnh bên phải) */
    .trip-card--stay,
    .trip-card--service {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: 56px;
        height: unset;
        /* Bỏ height cố định */
        height: auto;
        /* Bỏ height cố định */
        padding: 16px 16px 16px 24px;
        /* Dùng padding để tạo không gian tự nhiên */
        border-radius: 16px;
        gap: 16px;
    }

    .trip-card--stay .trip-card__copy,
    .trip-card--service .trip-card__copy {
        align-items: flex-start;
        text-align: left;
        flex: 1;
        max-width: 147px;
        /* Giới hạn width để không đè lên hình ảnh */
    }

    .trip-card--stay .trip-card__copy h2,
    .trip-card--service .trip-card__copy h2 {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 4px;
        word-break: break-word;
        /* Đảm bảo chữ dài tự xuống dòng */
    }

    .trip-card--stay .trip-card__copy p,
    .trip-card--service .trip-card__copy p {
        font-size: 14px;
        line-height: 20px;
    }

    .trip-card--stay .trip-card__art,
    .trip-card--service .trip-card__art {
        width: 116px;
        height: auto;
        /* Bỏ height cố định */
        flex: 0 0 116px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        /* Bỏ position: absolute từ CSS gốc để không bị trôi và đè */
        right: auto;
        margin-right: 0;
    }

    .trip-card--stay .trip-card__art img,
    .trip-card--service .trip-card__art img {
        height: auto;
        max-height: 91px;
        /* Giới hạn max-height để không vỡ khung nếu ảnh to */
        width: 100%;
        max-width: unset;
        object-fit: contain;
    }

    /* KHỐI EXTRA: Các danh mục khác */
    .trip-options__extra {
        display: flex;
        flex-direction: column;
        background-color: #f0e1ff;
        border-radius: 16px;
        padding: 0;
        gap: 0;
        margin-top: 0;
    }

    .trip-card--extra {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 24px;
        gap: 24px;
        background: transparent;
        /* Loại bỏ nền dư thừa nếu có */
        border: none;
    }

    .trip-card--extra .trip-card__art--extra {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .trip-card--extra .trip-card__art--extra img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .trip-card--extra .trip-card__copy {
        flex: 1;
        text-align: left;
        padding: 0;
    }

    .trip-card--extra .trip-card__copy h2 {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #212529;
        margin: 0;
    }

    /* =======================================================
       PLANNER TABS MOBILE
       ======================================================= */
    #plannerTabsSection {
        margin: 0;
    }

    #plannerTabsSection .card {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #plannerTabsSection .card-body {
        padding: 0;
    }

    #plannerTabs {
        backdrop-filter: blur(4.4px);
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        padding: 2px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        gap: 4px;
        margin-bottom: 24px;
        scrollbar-width: none;
        /* Hide scrollbar for Firefox */
        max-width: 100%;
        width: 100%;
    }

    /* =======================================================
    PLANNER OPTIONS MOBILE
    ======================================================= */

    #plannerTabContent .tab-pane.active {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 16px;
        margin-bottom: 44px;
    }

    .planner-form-row .planner-form-group {
        width: 100%;
        align-items: flex-start;
    }

    #plannerTabContent .tab-pane .planner-section,
    #plannerTabContent .tab-pane .planner-form-row {
        margin-bottom: 0;
    }

    .planner-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .planner-section__title {
        margin-bottom: 0;
    }

    /* 1. KIỂU CHUYẾN ĐI (Bạn muốn đi Huế theo kiểu nào?) / CƠ SỞ LƯU TRÚ */
    #plannerTripStyleList,
    #plannerStayTypeList {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    #plannerTripStyleList .planner-choice-button,
    #plannerStayTypeList .planner-choice-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        gap: 8px;
    }

    #plannerTripStyleList .planner-choice-button__icon,
    #plannerStayTypeList .planner-choice-button__icon {
        width: 32px;
        height: 32px;
        margin: 0;
        flex: 0 0 32px;
    }

    #plannerTripStyleList .planner-choice-button__title,
    #plannerStayTypeList .planner-choice-button__title {
        text-align: center;
        margin: 0;
        flex: 1;
    }

    #plannerTripStyleList .planner-choice-button__desc,
    #plannerStayTypeList .planner-choice-button__desc {
        display: none;
        /* Ẩn theo thiết kế mobile */
    }

    /* 2. CHIP LIST (Loại hình du lịch, Đối tượng) */
    #plannerTripThemeList,
    #plannerTripAudienceList,
    .planner-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    .planner-chip-list .planner-chip-button,
    .planner-chip-button {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid #e5e7eb;
        border-radius: 28px;
        margin: 0;
    }

    .planner-chip-button.active {
        background: #f0e1ff;
        border-color: #7008e7;
        color: #7008e7;
    }

    /* 3. FORM NHẬP SỐ LƯỢNG (Người lớn, Trẻ em, Thời gian) */
    .planner-form-row--schedule {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 0;
    }

    #plannerTabContent .tab-pane .planner-form-row--schedule .planner-form-group {
        width: 100%;
        max-width: 100%;
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .planner-form-group--duration {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin-bottom: 0;
    }

    .planner-form-row .planner-form-group label {
        width: 150px;
        margin: 0;
    }

    .planner-day-picker {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .planner-step-button {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 999px;
        background: white;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .planner-step-button svg,
    .planner-step-button img {
        width: 16px;
        height: 16px;
    }

    .planner-day-display {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .planner-day-display>small {
        display: none;
    }

    /* 4. CHỌN NGÀY (Ngày khởi hành) */
    .planner-form-group--date {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        margin-bottom: 0;
    }

    .planner-form-group--date .planner-field__label {
        margin: 0;
    }

    .planner-field__input.date-picker {
        width: 100%;
        padding: 8px 16px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 28px;
        text-align: left;
    }

    /* 5. NGÂN SÁCH */
    #plannerTripBudgetList {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    #plannerTripBudgetList .planner-budget-button {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #plannerTripBudgetList .planner-budget-button.active {
        background: #f0e1ff;
        border-color: #7008e7;
        color: #7008e7;
    }

    /* 6. TÙY CHỌN THÊM */
    .planner-extra {
        margin-top: 0;
    }

    .planner-extra__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        background: transparent;
        border: none;
        padding: 0;
    }

    #plannerTabs::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome/Safari */
    }

    #plannerTabs .nav-item {
        flex: 0 0 auto;
    }

    #plannerTabs .nav-link {
        border: none;
        color: #212529;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        padding: 8px;
        border-radius: 6px;
        background: transparent;
        white-space: nowrap;
    }

    #plannerTabs .nav-link.active {
        background: white;
        box-shadow: 0px 0px 0.5px rgba(112, 8, 231, 0.12);
    }

    /* ======================================================= 
       OVERVIEW DAY CARD — Responsive (Figma 10326:16661)
       Chỉ ảnh hưởng mobile, không thay đổi desktop
       ======================================================= */
    .overview-day-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px 64px 16px 16px;
        /* Padding phải 64px để nhường chỗ nút 3 chấm */
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .overview-day-title {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.15px;
        color: #212529;
        margin-bottom: 0;
    }

    .overview-day-path {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        line-height: 20px;
        color: #4D5154;
    }

    .odc-location {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.25px;
        color: #4D5154;
        white-space: nowrap;
    }

    .overview-day-path .odc-arrow {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        color: #4D5154;
        padding: 0;
    }

    .odc-arrow svg {
        width: 20px;
        height: 20px;
    }

    /* Nút 3 chấm — đặt ở góc trên bên phải card */
    .odc-options-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #F3F4F6;
        border: none;
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.15s;
        color: #4D5154;
    }

    .odc-options-btn:hover,
    .odc-options-btn:active {
        background: #f3f4f6;
    }
}

@media (max-width: 576px) {}

@media (max-width: 465px) {}

@media (max-width: 420px) {}

@media (max-width: 380px) {}

/* Mobile Offcanvas Custom Styles */
#mobileNavOffcanvas {
    width: 320px;
    z-index: 1055;
    border-radius: 16px 0 0 16px;
}

#mobileNavOffcanvas .offcanvas-header {
    border-bottom: 1px solid #eee;
}

#mobileNavOffcanvas .offcanvas-title {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

#mobileNavOffcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#mobileNavOffcanvas .offcanvas-top-widgets {
    display: flex;
    gap: 16px;
    padding: 8px;
    justify-content: space-between;
}

#mobileNavOffcanvas .pt-weather-info {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

#mobileNavOffcanvas .pt-weather-temp {
    font-size: 16px;
}

#mobileNavOffcanvas .pt-language-selector {
    display: flex;
    justify-content: flex-end;
}

#mobileNavOffcanvas .language-selector .langDropdown {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

#mobileNavOffcanvas .language-selector .langFlag {
    width: 24px !important;
    height: 18px !important;
    object-fit: cover;
    border-radius: 2px;
}

#mobileNavOffcanvas .language-selector .langText {
    font-weight: 500;
    font-size: 16px;
    color: #212529;
}

#mobileNavOffcanvas .language-selector .langDropdown svg {
    margin-left: auto;
}

#mobileNavOffcanvas .language-selector .langMenu {
    min-width: 160px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#mobileNavOffcanvas .language-selector .langMenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #212529;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#mobileNavOffcanvas .language-selector .langMenu .dropdown-item:hover,
#mobileNavOffcanvas .language-selector .langMenu .dropdown-item:focus {
    background-color: #f3f4f6;
    color: #111827;
}

#mobileNavOffcanvas .language-selector .dropdown-item img,
#mobileNavOffcanvas .langMenu img,
.offcanvas-body .langMenu img {
    width: 24px !important;
    height: 18px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    object-fit: cover !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    border-radius: 2px !important;
    display: inline-block !important;
}


.mobile-dock-menu {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    border-top: 1px solid #eee;
    padding: 8px 0 24px 0;
}

.mobile-dock-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    text-decoration: none;
    color: #212529;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1px;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-dock-item:hover,
.mobile-dock-item:active {
    background: #f8f9fa;
}

/* ======================================================= 
   MOBILE FLOATING CHAT BAR (Figma 10326:18377)
   Thanh chat nổi riêng, chỉ hiện trên mobile khi is-itinerary-mode
   ======================================================= */
@keyframes floatingBarAppear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    70% {
        transform: translateY(-4px) scale(1.01);
    }

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

.mobile-floating-chat-bar {
    /* Mặc định ẩn, chỉ hiện khi JS thêm class .visible */
    display: none;
    position: fixed;
    bottom: 24px;
    left: 16px;
    right: 16px;
    z-index: 1050;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.mobile-floating-chat-bar.visible {
    display: flex;
    animation: floatingBarAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Ẩn khi chat đang mở hoặc đang closing */
body.chat-expanded .mobile-floating-chat-bar,
body.chat-closing .mobile-floating-chat-bar {
    display: none;
}

/* Input pill (chiếm hết width còn lại) */
.mobile-floating-chat-bar__input {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #ffffff;
    border-radius: 999px;
    border: none;
    padding: 16px 12px 16px 24px;
    min-height: 56px;
    cursor: pointer;
    text-align: left;
    /* Shadow theo Figma */
    box-shadow: 0px 4px 32px rgba(77, 23, 154, 0.2);
    transition: box-shadow 0.2s, transform 0.15s;
}

.mobile-floating-chat-bar__input:hover,
.mobile-floating-chat-bar__input:active {
    box-shadow: 0px 6px 40px rgba(77, 23, 154, 0.28);
    transform: translateY(-1px);
}

.mobile-floating-chat-bar__placeholder {
    flex: 1 1 0%;
    min-width: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #A6A8A9;
    line-height: 24px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nút send nhỏ trong pill */
.mobile-floating-chat-bar__send {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #F3F4F6;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nút FAB bên phải */
.mobile-floating-chat-bar__fab {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: #ffffff;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 4px 32px rgba(77, 23, 154, 0.2);
    transition: box-shadow 0.2s, transform 0.15s;
}

.mobile-floating-chat-bar__fab:hover,
.mobile-floating-chat-bar__fab:active {
    box-shadow: 0px 6px 40px rgba(77, 23, 154, 0.28);
    transform: scale(1.05);
}


/* =======================================================
   MOBILE CHAT BOTTOM SHEET (ITINERARY MODE) - Figma 10326:16574
   ======================================================= */

/* Keyframe animations */
@keyframes chatSheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes chatSheetSlideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes chatBackdropFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes chatBackdropFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes floatingBarFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}