/* --- Chat Section --- */
.chat-section {
    padding: 4rem 1rem;
    background: linear-gradient(to bottom, #eef2f3, #ffffff);
}

.chat-section .section-container {
    max-width: 98%;
}

/* --- Chat App Wrapper (holds header + welcome OR chat-container) --- */
.chat-app-wrapper {
    width: 100%;
    max-width: 98%;
    margin: 2rem auto;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-app-wrapper .chat-header {
    border-radius: 0;
}

.chat-container {
    width: 100%;
    background: white;
    height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chat-section .chat-container.expanded-view {
    max-width: 98%;
}

.chat-header {
    background: linear-gradient(135deg, var(--dark-blue), #1e293b);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.agent-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    padding: 2px;
}

.agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-info h2 {
    font-size: 1.1rem;
    margin: 0;
    color: white;
    text-align: left;
}

.status {
    font-size: 0.8rem;
    color: var(--primary-green);
}

.new-chat-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.new-chat-btn:hover {
    background: var(--primary-sky);
    color: var(--dark-blue);
    border-color: var(--primary-sky);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.3);
}

.new-chat-btn:active {
    transform: translateY(0);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.message {
    max-width: min(90%, 850px);
    animation: fadeIn 0.3s ease;
}

.message.wide-message {
    max-width: 100%;
}

.ai-message {
    align-self: flex-start;
}

.user-message {
    align-self: flex-end;
}

.message-content {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
}

.ai-message .message-content {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--text-dark);
    border-bottom-left-radius: 2px;
}

.user-message .message-content {
    background: linear-gradient(135deg, var(--primary-sky), #00c6ff);
    color: var(--dark-blue);
    font-weight: 500;
    border-bottom-right-radius: 2px;
}

/* --- Toast Animations (extracted from 05-stripe.js) --- */
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* --- Streaming Itinerary Animations (extracted from 04-chat.js) --- */
@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.chunk-card-enter { animation: cardSlideIn 0.35s ease forwards; }

/* --- Floating Save Button Animations (extracted from 01-utils.js) --- */
@keyframes floatBtnSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatBtnPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35); }
    50% { box-shadow: 0 6px 30px rgba(0, 242, 254, 0.65); transform: scale(1.04); }
}
@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* --- Floating Save Button --- */
#floating-save-btn {
    animation: floatBtnSlideIn 0.4s cubic-bezier(.22, .68, 0, 1.2) forwards,
               floatBtnPulse 2.2s ease-in-out 0.4s 3;
}

/* --- Loading Indicator --- */
.typing-indicator { display: flex; gap: 4px; padding: 4px 0; }
.typing-indicator span {
    width: 8px; height: 8px; background: #3b82f6; border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* --- Upgrade Limit Toast --- */
.upgrade-limit-toast {
    position: fixed; top: 1rem; right: 1rem; left: auto; z-index: 9999;
    display: flex; align-items: center; gap: 12px;
    background: #1e293b; color: white; padding: 12px 16px;
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-width: 380px; animation: slideInRight 0.3s ease;
}
.upgrade-limit-toast.toast-exit { animation: slideOutRight 0.3s ease forwards; }
.upgrade-limit-toast .toast-icon { color: #ef4444; flex-shrink: 0; }
.upgrade-limit-toast .toast-icon svg { width: 24px; height: 24px; }
.upgrade-limit-toast .toast-content { flex: 1; min-width: 0; }
.upgrade-limit-toast .toast-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.upgrade-limit-toast .toast-message { font-size: 0.82rem; color: #94a3b8; }
.upgrade-limit-toast .toast-upgrade-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, var(--primary-sky), var(--primary-green));
    color: white; border: none; border-radius: 20px; padding: 6px 14px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.upgrade-limit-toast .toast-upgrade-btn svg { width: 16px; height: 16px; }

/* --- GEMINI-STYLE WELCOME SCREEN --- */
.welcome-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    min-height: 500px;
    background: white;
    transition: opacity 0.3s ease;
}

.welcome-screen.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.welcome-header {
    text-align: center;
    margin-bottom: 3rem;
}

.welcome-header .sparkle-icon {
    font-size: 2.5rem;
    color: var(--primary-sky);
    margin-bottom: 1rem;
    display: block;
    animation: pulse-glow 2s infinite;
}

.welcome-header h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.welcome-header h1 .user-firstName {
    background: linear-gradient(135deg, var(--primary-sky), var(--primary-green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-header h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 400;
    color: #94a3b8;
}

.suggestions-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
}

.suggestion-pill {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    text-align: left;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.suggestion-pill:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.suggestion-pill .pill-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 50%;
}

.suggestion-pill .pill-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.suggestion-pill .pill-text span {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}

/* --- WELCOME SCREEN CHAT INPUT BAR --- */
.welcome-input-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 640px;
    margin: 2rem auto 0;
    padding: 10px 16px;
    background: white;
    border: 1.5px solid rgba(0, 242, 254, 0.3);
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.welcome-input-bar:focus-within {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 4px 30px rgba(0, 242, 254, 0.15);
}

.welcome-chat-textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    resize: none;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}

.welcome-chat-textarea::placeholder {
    color: #94a3b8;
}

.welcome-send-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-sky), var(--primary-green));
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 242, 254, 0.4);
}

/* --- Search Form (Organizza il tuo Viaggio) --- */
.search-form-container {
    position: relative;
    background: linear-gradient(135deg, var(--dark-blue, #0f172a), #1e293b);
    border-radius: 16px;
    padding: 0;
    margin: 1rem 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
    max-width: 700px;
}

.search-form-header {
    background: linear-gradient(135deg, var(--primary-sky, #4ecdc4), var(--primary-green, #556b2f));
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-form-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.search-form-header h2 i {
    margin-right: 8px;
}

.close-form-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.close-form-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    position: relative;
    z-index: 50;
    overflow: visible;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 50;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 6px;
    position: relative;
    z-index: 50;
}

.form-input {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s;
}

.form-input::placeholder {
    color: #64748b;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-sky, #4ecdc4);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.form-input.flatpickr-date {
    background: rgba(255, 255, 255, 0.08);
}

.autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(0, 242, 254, 0.4);
    border-top: 3px solid;
    border-image: linear-gradient(135deg, var(--primary-sky, #00f2fe), var(--primary-green, #4fad55)) 1;
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 242, 254, 0.1);
}

.autocomplete-results.active {
    display: block;
}

/* Portal dropdown — rendered into document.body to escape stacking context clipping */
.portal-dropdown {
    position: fixed !important;
    z-index: 99999 !important;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.portal-dropdown.active {
    display: block;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    color: #f1f5f9;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.01em;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item-primary {
    background: rgba(0, 242, 254, 0.08);
}

.autocomplete-item-secondary {
    padding-left: 28px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.autocomplete-item:hover,
.autocomplete-item.kb-active {
    background: rgba(0, 242, 254, 0.15) !important;
    border-color: rgba(0, 242, 254, 0.1);
}

.autocomplete-item.kb-active {
    background: rgba(0, 242, 254, 0.22) !important;
    box-shadow: inset 3px 0 0 var(--primary-sky, #00f2fe);
}

.autocomplete-item .code {
    font-weight: 700;
    color: var(--primary-sky, #00f2fe);
    font-size: 0.9rem;
    min-width: 36px;
    text-align: right;
}

.autocomplete-item strong {
    color: #ffffff;
    font-size: 1rem;
}

.autocomplete-code-inline {
    color: #00f2fe;
    font-weight: 600;
    font-size: 0.9rem;
}

.autocomplete-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f1f5f9;
}

.autocomplete-item-secondary .autocomplete-label {
    color: #cbd5e1;
}

.autocomplete-item-secondary .autocomplete-code-inline {
    color: #67e8f9;
}

.autocomplete-results::-webkit-scrollbar {
    width: 6px;
}

.autocomplete-results::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

.autocomplete-results::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.3);
    border-radius: 3px;
}

.counter-input {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.counter-btn {
    background: rgba(78, 205, 196, 0.2);
    border: none;
    color: var(--primary-sky, #4ecdc4);
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.counter-btn:hover {
    background: rgba(78, 205, 196, 0.3);
}

.counter-value {
    flex: 1;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.search-submit-btn {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--primary-sky, #4ecdc4), var(--primary-green, #556b2f));
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 4px;
}

.search-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.35);
}

.search-submit-btn i {
    font-size: 1.1rem;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* noUiSlider base for time sliders */
.noUi-target {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.noUi-connect {
    background: var(--primary-sky, #4ecdc4);
}

/* --- City Selection Chip (Skyscanner-style) --- */
.form-input.city-selected {
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.4);
    padding-right: 36px;
    cursor: pointer;
}

/* Prende il posto del campo (nascosto), alto quanto un campo: prima era
   absolute su un gruppo rimasto alto zero e copriva la riga sotto. */
.city-selected-overlay {
    position: relative;
    min-height: 42px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.95);
    z-index: 2;
    transition: background 0.2s;
}

.city-selected-overlay:hover {
    background: rgba(15, 23, 42, 0.9);
}

.city-selected-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.city-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(79, 173, 85, 0.2));
    color: var(--primary-sky, #00f2fe);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.city-selected-check {
    margin-left: auto;
    color: var(--primary-green, #4fad55);
    font-size: 0.85rem;
    animation: chipFadeIn 0.3s ease;
}

@keyframes chipFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Swap Button --- */
.swap-btn {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-sky, #00f2fe), var(--primary-green, #4fad55));
    border: 3px solid var(--dark-blue, #0f172a);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 242, 254, 0.3);
}

.swap-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 242, 254, 0.5);
}

.swap-btn.rotating {
    transform: translateY(-50%) rotate(180deg);
}

/* --- Class Toggle --- */
.class-toggle {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    padding: 0;
}

.class-toggle-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.class-toggle-btn:hover {
    border-color: rgba(0, 242, 254, 0.3);
    color: #e2e8f0;
}

.class-toggle-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(79, 173, 85, 0.15));
    border-color: rgba(0, 242, 254, 0.5);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
}

/* --- Flatpickr Custom Overrides --- */
.flatpickr-calendar.dark {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-month {
    color: var(--primary-sky, #00f2fe) !important;
    fill: var(--primary-sky, #00f2fe) !important;
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-prev svg,
.flatpickr-calendar.dark .flatpickr-months .flatpickr-next svg {
    fill: var(--primary-sky, #00f2fe) !important;
}

.flatpickr-calendar.dark .flatpickr-months .flatpickr-month svg:hover {
    fill: var(--primary-green, #4fad55) !important;
}

.flatpickr-calendar.dark .flatpickr-weekdays {
    background: rgba(0, 242, 254, 0.05) !important;
}

.flatpickr-calendar.dark .flatpickr-weekday {
    color: rgba(0, 242, 254, 0.7) !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.dark .flatpickr-day {
    color: #e2e8f0 !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
}

.flatpickr-calendar.dark .flatpickr-day:hover {
    background: rgba(0, 242, 254, 0.15) !important;
    border-color: rgba(0, 242, 254, 0.3) !important;
}

.flatpickr-calendar.dark .flatpickr-day.selected {
    background: linear-gradient(135deg, var(--primary-sky, #00f2fe), var(--primary-green, #4fad55)) !important;
    color: white !important;
    border-color: transparent !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.dark .flatpickr-day.today {
    border-color: var(--primary-sky, #00f2fe) !important;
    color: var(--primary-sky, #00f2fe) !important;
}

.flatpickr-calendar.dark .flatpickr-day.prevMonthDay,
.flatpickr-calendar.dark .flatpickr-day.nextMonthDay {
    color: #475569 !important;
}

.flatpickr-calendar.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--primary-sky, #00f2fe) !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.dark .flatpickr-current-month input.cur-year {
    color: var(--primary-sky, #00f2fe) !important;
}

.flatpickr-calendar.dark span.flatpickr-weekday {
    font-family: 'Poppins', sans-serif !important;
}

/* --- Micro-interazioni --- */
.form-input:focus {
    outline: none;
    border-color: var(--primary-sky, #00f2fe);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.2), 0 0 16px rgba(0, 242, 254, 0.1);
    transform: scale(1.01);
}

.search-form-container {
    animation: formSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes formSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-submit-btn {
    position: relative;
    overflow: hidden;
}

.search-submit-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
}

.search-submit-btn.ripple::after {
    opacity: 1;
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    from { transform: scale(0); opacity: 0.5; }
    to { transform: scale(2.5); opacity: 0; }
}

.autocomplete-results {
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Flight Cards --- */
.cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.info-card.selectable-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.22s ease;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-card.selectable-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.14);
    transform: translateY(-2px);
    background: #ffffff;
}

/* Fallback "Check Live Market" cards still use this header */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* Two-column layout: airline on the side, legs stacked on the right */
.flight-card-main {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.airline-col {
    flex: 0 0 88px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 14px;
    border-right: 1px solid #e2e8f0;
}

.airline-col .airline-icon {
    font-size: 1.1rem;
    color: var(--primary-sky, #0ea5e9);
    margin-bottom: 2px;
}

.airline-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
    word-break: break-word;
}

.legs-col {
    flex: 1;
    min-width: 0;
}

.badge.class-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 600;
    border: 1px solid #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.flight-leg {
    padding: 6px 0;
}

.flight-leg + .flight-leg {
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
    margin-top: 2px;
}

.leg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: #64748b;
}

.leg-header i {
    color: var(--primary-sky, #00b4d8);
}

.leg-header strong {
    color: #374151;
    font-weight: 600;
}

.stops-badge {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.stops-badge.direct {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.stops-badge.stops {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.leg-details {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.time-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    flex-shrink: 0;
}

.time-group .time {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.time-group .airport-code {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
    font-weight: 500;
}

.duration-line {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
}

.duration-line .duration {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

.line-graphic {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1 50%, #e2e8f0);
    position: relative;
    border-radius: 1px;
}

.line-graphic::before {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(-45deg);
}

.line-graphic.return-line {
    background: linear-gradient(90deg, #e2e8f0, #bfdbfe 50%, #e2e8f0);
}

.line-graphic.return-line::before {
    border-right-color: #93c5fd;
    border-bottom-color: #93c5fd;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    gap: 8px;
    flex-wrap: wrap;
}

.price-section {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.price-tag {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.price-sub {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 2px;
}

.card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    min-width: 120px;
}

.btn-primary, .select-btn {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}

.btn-primary:hover, .select-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.btn-outline {
    background: transparent;
    color: #0ea5e9;
    border: 1.5px solid #bae6fd;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.btn-outline:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
    color: #0284c7;
}

.btn-buy {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

.btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.return-leg .leg-header {
    color: #64748b;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 12px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-title i {
    color: var(--primary-sky, #0ea5e9);
}

/* --- Travel Documents Box --- */
.message.ai.travel-docs-message .message-content {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 16px;
    padding: 20px;
    color: #e2e8f0;
}

.travel-docs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.travel-docs-header i {
    color: var(--primary-sky, #4ecdc4);
    font-size: 1.3rem;
}

.travel-docs-nationality {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0 0 14px;
}

.travel-docs-nationality i {
    margin-right: 6px;
    color: var(--primary-sky, #4ecdc4);
}

.travel-docs-nationality strong {
    color: #ffffff;
}

.travel-docs-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.travel-docs-section-title i {
    color: var(--primary-sky, #4ecdc4);
}

.travel-docs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.travel-docs-list li {
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.88rem;
    color: #d1d5db;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-left: 3px solid var(--primary-sky, #4ecdc4);
}

.travel-docs-list li i {
    color: var(--primary-sky, #4ecdc4);
    margin-top: 2px;
    flex-shrink: 0;
}

.travel-docs-disclaimer {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    color: #fbbf24;
    line-height: 1.5;
}

.travel-docs-disclaimer i {
    margin-right: 6px;
}

/* --- Riepilogo e Prenotazioni (lab mode) --- */
.info-card {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    border-left: 4px solid var(--primary-green);
    margin-bottom: 10px;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.info-card h4 {
    margin: 0 0 6px 0;
    color: var(--primary-sky);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #555;
}

.info-details p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.text-success {
    color: #4fad55;
    font-weight: 600;
}

.book-btn {
    background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%);
    color: white;
    padding: 10px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.88rem;
    box-shadow: 0 4px 15px rgba(221, 36, 118, 0.35);
    transition: all 0.3s;
    display: inline-block;
    white-space: nowrap;
}

.book-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(221, 36, 118, 0.55);
}

/* --- Share Button --- */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-surface, #1e1e2e);
    color: var(--color-text, #cdd6f4);
    border: 1px solid var(--color-border, #313244);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}
.share-btn:hover {
    background: var(--color-surface-hover, #2a2a3d);
}

/* ===== SHARE MODAL ===== */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-modal-overlay.hidden { display: none; }
.share-modal {
    background: var(--color-surface, #1e1e2e);
    border: 1px solid var(--color-border, #313244);
    border-radius: 16px;
    padding: 28px;
    max-width: 440px;
    width: 90vw;
    position: relative;
}
.share-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    font-size: 1.4rem;
    cursor: pointer;
}
.share-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text, #cdd6f4);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-permission-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.share-permission-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.share-perm-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #313244);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.share-perm-option:has(input:checked) {
    border-color: #00f2fe;
    background: rgba(0,242,254,0.05);
}
.share-perm-option input { display: none; }
.share-perm-option span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #cdd6f4);
    display: flex;
    align-items: center;
    gap: 6px;
}
.share-perm-option small {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    margin-left: 20px;
}
.share-generate-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #00f2fe, #4fad55);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.share-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.share-link-result {
    margin-top: 14px;
    display: block;
}
.share-link-result.hidden { display: none; }

/* URL row con copia inline */
.share-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.share-link-row .share-link-input {
    flex: 1;
    margin-bottom: 0;
}
.share-link-row .share-copy-btn {
    flex-shrink: 0;
    padding: 9px 13px;
}

/* Griglia piattaforme di condivisione */
.share-platforms {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.share-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}
.share-platform-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}
.share-platform-btn i { font-size: 20px; }
.share-platform-btn:nth-child(1) i { color: #25D366; }
.share-platform-btn:nth-child(2) i { color: #2AABEE; }
.share-platform-btn:nth-child(3) i { color: #1DA1F2; }
.share-platform-btn:nth-child(4) i { color: #EA4335; }
.share-platform-btn:nth-child(5) i { color: #00f2fe; }
@media (max-width: 400px) {
    .share-platforms { grid-template-columns: repeat(3, 1fr); }
}
.share-link-input {
    flex: 1;
    padding: 8px 10px;
    background: var(--color-bg, #11111b);
    border: 1px solid var(--color-border, #313244);
    border-radius: 8px;
    color: var(--color-text, #cdd6f4);
    font-size: 0.8rem;
    min-width: 0;
}
.share-copy-btn {
    padding: 8px 12px;
    background: var(--color-surface, #1e1e2e);
    border: 1px solid var(--color-border, #313244);
    border-radius: 8px;
    color: var(--color-text, #cdd6f4);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.15s;
}
.share-copy-btn:hover { background: rgba(0,242,254,0.1); }
.share-modal-note {
    margin-top: 12px;
    font-size: 0.76rem;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
}
/* Read-only mode */
.readonly-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 20px;
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 8px auto;
}
/* Shared edit banner */
.shared-edit-banner {
    padding: 10px 16px;
    background: rgba(0,242,254,0.08);
    border-left: 3px solid #00f2fe;
    color: var(--color-text, #cdd6f4);
    font-size: 0.85rem;
    margin: 0 0 12px;
}
/* Trip card share button (your-trips) */
.trip-card-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
.trip-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.trip-share-btn:hover { border-color: #00f2fe; color: #00f2fe; }

/* --- Flight cards responsive (chat panel) --- */
@media (max-width: 560px) {
    .info-card.selectable-card {
        padding: 12px 12px;
    }
    .flight-card-main {
        gap: 10px;
    }
    .airline-col {
        flex-basis: 72px;
        padding-right: 10px;
    }
    .airline-name {
        font-size: 0.82rem;
    }
    .time-group {
        min-width: 40px;
    }
    .time-group .time {
        font-size: 1rem;
    }
    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .card-actions {
        justify-content: stretch;
    }
    .btn-primary, .select-btn, .btn-outline {
        flex: 1;
        text-align: center;
    }
}

/* Very narrow: stack airline on top to free width for times */
@media (max-width: 380px) {
    .flight-card-main {
        flex-direction: column;
        gap: 8px;
    }
    .airline-col {
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        width: 100%;
    }
    .airline-col .airline-icon {
        margin-bottom: 0;
    }
    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .card-actions {
        min-width: 0;
    }
}
/* ─── Multi-città Timeline Form ─────────────────────────────────────────── */
/* Inserita dentro .form-grid: deve occupare tutta la riga come il submit btn */
.multicita-section { grid-column: 1 / -1; padding: 0; }
/* Stato iniziale: solo il pulsante "+ Aggiungi Tappa", timeline nascosta */
.multicita-section.collapsed .multicita-section-label,
.multicita-section.collapsed .multicita-hint,
.multicita-section.collapsed .city-timeline { display: none; }
.multicita-hint { font-size: 11px; color: #64748b; margin: -4px 0 10px; line-height: 1.4; }
.city-timeline.timeline-reveal { animation: mcTimelineIn 0.35s ease; }
@keyframes mcTimelineIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.multicita-section-label {
    font-size: 0.78rem; font-weight: 500; color: #94a3b8;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.multicita-tag {
    background: linear-gradient(135deg, rgba(0,242,254,0.15), rgba(79,173,85,0.15));
    border: 1px solid rgba(0,242,254,0.3); color: #4ecdc4;
    font-size: 10px; padding: 1px 7px; border-radius: 10px;
}
.city-timeline { position: relative; padding-left: 22px; }
.city-timeline::before {
    content: ''; position: absolute; left: 7px; top: 14px; bottom: 20px;
    width: 2px; background: linear-gradient(180deg,#00f2fe 0%,#4fad55 100%); opacity: 0.4;
}
.city-node { position: relative; margin-bottom: 6px; }
.city-dot {
    position: absolute; left: -19px; top: 12px;
    width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg, #00f2fe, #4fad55);
    border: 2px solid #0f172a; box-shadow: 0 0 8px rgba(0,242,254,0.4);
}
.city-dot.auto-dot { background: #1e293b; border-color: #4ecdc4; box-shadow: none; }
.city-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 10px 12px;
}
.city-card:focus-within { border-color: rgba(0,242,254,0.35); }
.city-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.city-badge {
    background: linear-gradient(135deg,rgba(0,242,254,0.15),rgba(79,173,85,0.15));
    border: 1px solid rgba(0,242,254,0.25); color: #4ecdc4;
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.city-name-input {
    flex: 1; padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 7px;
    background: rgba(255,255,255,0.07); color: white;
    font-size: 0.85rem; font-family: inherit; font-weight: 500;
}
.city-name-input::placeholder { color: #475569; }
.remove-city-btn {
    background: none; border: none; color: #475569;
    cursor: pointer; font-size: 18px; line-height: 1;
    padding: 2px 4px; border-radius: 4px; transition: color 0.15s;
}
.remove-city-btn:hover { color: #ef4444; }
.city-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.city-time-field label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: #64748b; margin-bottom: 3px; display: block;
}
.city-time-input {
    padding: 6px 9px; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px; background: rgba(255,255,255,0.07);
    color: white; font-size: 0.82rem; font-family: inherit; width: 100%;
}
.city-time-input.auto-time {
    color: #64748b; border-color: rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03); font-style: italic;
}
.auto-time-hint { font-size: 9px; color: #475569; margin-top: 2px; font-style: italic; }
.transfer-badge {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; margin-bottom: 6px;
}
.transfer-badge-inner {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 3px 12px; font-size: 11px; color: #64748b;
    white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.add-city-btn {
    width: 100%; background: transparent; border: 1px dashed rgba(255,255,255,0.15);
    color: #64748b; border-radius: 10px; padding: 9px 12px; font-size: 12px;
    cursor: pointer; font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 6px; margin-top: 4px; transition: all 0.2s;
}
.add-city-btn:hover {
    border-color: rgba(0,242,254,0.3); color: #4ecdc4; background: rgba(0,242,254,0.04);
}

/* Unsplash attribution overlay (required by API ToS) */
.img-credit-wrapper {
    position: relative;
    margin-bottom: 8px;
}
.img-credit-wrapper .matrix-card-img {
    margin-bottom: 0;
    display: block;
}
.unsplash-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.75);
    font-size: 9px;
    line-height: 1.3;
    padding: 2px 5px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
}
.unsplash-credit:hover { color: #fff; }
.unsplash-credit a { color: inherit; text-decoration: none; }
.unsplash-credit a:hover { text-decoration: underline; }

/* --- Retry itinerary button ↪ --- */
.retry-itinerary-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--primary-sky, #4fadd5);
    border-radius: 20px;
    color: var(--primary-sky, #4fadd5);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.retry-itinerary-btn:hover {
    background: var(--primary-sky, #4fadd5);
    color: white;
}
.retry-itinerary-btn:disabled {
    opacity: 0.5;
    cursor: default;
}