/* Stack nav buttons vertically on small screens */
@media (max-width: 768px) {
    #btngrpNav {
        flex-direction: column !important;
        width: 100% !important;
    }

    #btngrpNav .btn {
        margin-bottom: 0.25rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .responsive-title {
        font-size: 1.4rem !important;
    }
}

@media (min-width: 769px) {
    .responsive-title {
        font-size: 2rem !important;
    }
}

.small-date-picker .DateInput_input {
    font-size: 15px;
}

.small-date-picker .DateInput {
    font-size: 15px;
}

#preview-image {
    transition: opacity 0.2s ease;
}

/* ── Portfolio page ───────────────────────────────────────────── */

/* Tabs: prevent label wrapping on small screens */
.portfolio-tabs .nav-link {
    font-size: 13px;
    padding: 6px 12px;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .portfolio-tabs .nav-link {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* Stat cards: ensure label fits on two lines without overflow */
#Port-Response1 .card-body p.text-muted {
    white-space: normal;
    line-height: 1.3;
}

/* Date picker: prevent iOS auto-zoom (input font-size >= 16px) */
.small-date-picker input {
    font-size: 16px !important;
}

/* DataTable: make filter inputs readable on mobile */
.dash-filter input {
    font-size: 14px !important;
}

/* Responsive graph height in Map tab */
@media (max-width: 575.98px) {
    #Port-Response1 .js-plotly-plot {
        height: 320px !important;
    }
}

/* ── Chat modal & page ────────────────────────────────────────── */

/* Typing / thinking indicator — three pulsing dots */
.chat-typing-dots {
    display: flex;
    align-items: center;
    padding: 4px 2px;
    gap: 4px;
}

.chat-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #03446E;
    opacity: 0.4;
    animation: typing-pulse 1.2s infinite ease-in-out;
}

@keyframes typing-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* flex column wrapper for modal body content */
.chat-modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* message area — fixed height on desktop so modal doesn't overflow */
.chat-messages {
    height: 400px;
    max-height: 52vh;
    min-height: 120px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* message bubbles — responsive max-width */
.chat-bubble {
    max-width: 78%;
    word-wrap: break-word;
    word-break: break-word;
}

/* minimum touch target size (WCAG 2.5.5) */
#chat-send-btn,
#chat-input,
.chat-modal-body .form-control {
    min-height: 44px;
}

/* prevent iOS Safari from zooming on focus */
#chat-input,
.chat-modal-body input[type="text"] {
    font-size: 16px !important;
}

/* mobile: fullscreen modal — single consolidated block */
@media (max-width: 575.98px) {
    /* fullscreen dialog fills viewport including safe areas */
    .modal-fullscreen-sm-down.modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .modal-fullscreen-sm-down .modal-content {
        border-radius: 0;
        /* push content above home indicator on iPhone */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* modal header: allow title to wrap so close button stays visible */
    .modal-fullscreen-sm-down .modal-header {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 8px 12px;
    }

    /* modal body: flex column, clipped, no horizontal scroll */
    .modal-fullscreen-sm-down .modal-body {
        display: flex;
        flex-direction: column;
        padding: 10px;
        overflow: hidden;
        max-width: 100%;
    }

    /* chat-modal-body fills all remaining vertical space */
    .modal-fullscreen-sm-down .chat-modal-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        max-width: 100%;
    }

    /* message area fills the flex space */
    .modal-fullscreen-sm-down .chat-messages {
        flex: 1 1 auto;
        height: auto !important;
        max-height: none !important;
        min-height: 0;
    }

    /* input group: don't overflow viewport */
    .modal-fullscreen-sm-down .chat-modal-body .input-group {
        max-width: 100%;
    }

    .chat-bubble {
        max-width: 92%;
    }

    .chat-hint-text {
        display: none;
    }
}


/* chat full-page layout */
.chat-page-messages {
    height: calc(100vh - 290px);
    /* iOS Safari: use svh (small viewport height) to exclude browser chrome */
    height: calc(100svh - 290px);
    min-height: 320px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
}

@media (max-width: 575.98px) {
    .chat-page-messages {
        height: calc(100vh - 200px);
        height: calc(100svh - 200px);
        min-height: 240px;
    }

    .chat-bubble {
        max-width: 92%;
    }
}

/* ── Valuations modal (#val-view-modal) ───────────────────────── */

/* Tab bar: scroll horizontally on narrow screens so labels don't wrap or clip */
#val-view-modal .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
}
#val-view-modal .nav-tabs::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}
#val-view-modal .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 12px;
}

/* Modal body: reliable scroll on iOS */
#val-view-modal .modal-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Tab pane content: allow wide tables/charts to scroll horizontally */
#val-view-modal .tab-content,
#val-view-modal .tab-pane {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Prevent DataTable filter inputs triggering iOS zoom */
#val-view-modal .dash-filter input,
#val-view-modal input[type="text"],
#val-view-modal input[type="search"] {
    font-size: 16px !important;
}

/* Fullscreen on mobile: push content above home indicator */
@media (max-width: 575.98px) {
    #val-view-modal.modal-fullscreen-sm-down .modal-content,
    #val-view-modal .modal-fullscreen-sm-down .modal-content {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #val-view-modal .nav-tabs .nav-link {
        font-size: 11px;
        padding: 5px 9px;
    }

    /* Charts inside tabs: limit height so they don't push content off screen */
    #val-view-modal .js-plotly-plot {
        max-height: 55vh;
    }
}