/* ======================
   MOBILE STYLES — Baabo Bond Trading Platform
   Breakpoint: ≤768px
   ====================== */

/* ======================
   GLOBAL MOBILE OVERRIDES
   ====================== */
/* Lock to portrait orientation — block landscape completely */
@media (orientation: landscape) and (max-height: 500px) {
    html::before {
        content: "Please rotate your device to portrait mode";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #0a0a0a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        text-align: center;
        z-index: 999999;
        padding: 20px;
    }
    html body {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Prevent text selection & highlighting on touch */
    * {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Allow selection only in input/textarea fields */
    input, textarea {
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }

    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
        position: static !important;
    }

    /* Hide sidebar on mobile — replaced by bottom nav */
    .sidebar-container,
    #sidebar-container {
        display: none !important;
    }

    /* ======================
       FIXED TOP TICKER BAR
       ====================== */
    .ticker-container {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
    }

    /* Compact ticker: only show first 2 items inline */
    .live-ticker-wrapper {
        width: 100%;
    }

    .ticker-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    /* Wrap ticker items so arrow goes to second line */
    .live-ticker-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Downward arrow on its own line below the tickers */
    .live-ticker-wrapper::after {
        content: '⌄';
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1;
        margin-top: 2px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    /* Rotate arrow when dropdown is open */
    .live-ticker-wrapper.expanded::after {
        transform: rotate(180deg);
        margin-top: 4px;
    }

    .ticker-item {
        font-size: 0.78rem;
    }

    /* Hide 3rd+ ticker items on mobile */
    .ticker-item:nth-child(n+3) {
        display: none;
    }

    .ticker-item.clickable {
        padding: 0.15rem 0.3rem;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .ticker-item.clickable:focus,
    .ticker-item.clickable:active,
    .ticker-item.clickable:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Ticker dropdown on mobile: full page minus ticker & bottom nav */
    .ticker-dropdown {
        position: fixed !important;
        top: 40px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 48px !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 0 !important;
        overflow-y: auto !important;
        background: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 10000 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }

    .ticker-dropdown.show {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .ticker-dropdown .dropdown-content {
        max-height: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding: 0.8rem 1rem !important;
    }

    /* ======================
       FIXED BOTTOM NAVIGATION (text only, with separators)
       ====================== */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        background-color: #000;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 0 16px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .bottom-nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.8rem;
        font-weight: 500;
        padding: 8px 12px;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        flex: 1;
    }

    .bottom-nav-item.active {
        color: #fff;
        font-weight: 600;
    }

    .bottom-nav-item:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .bottom-nav-item.disabled {
        color: rgba(255, 255, 255, 0.2);
        pointer-events: none;
        cursor: default;
    }

    .bottom-nav-separator {
        width: 1px;
        height: 16px;
        background: rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
    }

    .bottom-nav-label {
        text-transform: lowercase;
        letter-spacing: 0.02em;
    }

    /* ======================
       CONTENT AREA SPACING
       ====================== */
    /* Dynamic height: fills from ticker to bottom nav */
    .category-container,
    .discover-container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding-top: 40px;  /* ticker height */
        padding-bottom: 48px; /* bottom nav height */
    }

    .main-content,
    .category-container .main-content,
    body .category-container .main-content,
    body.with-noise .category-container .main-content,
    .sidebar.collapsed ~ .category-container .main-content,
    .sidebar.expanded ~ .category-container .main-content,
    .discover-container .main-content,
    body .discover-container .main-content {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px !important;
        margin-left: 0 !important;
        width: 100% !important;
        flex: 1 !important;
    }

    /* Category layout fills available height */
    .category-layout {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .bonds-table-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .bonds-table {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .bonds-list {
        flex: 1;
        overflow-y: auto !important;
    }

    /* ======================
       LANDING PAGE MOBILE
       ====================== */
    .landing-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .mobile-contact-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        z-index: 10;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.6);
        gap: 2px;
        font-family: 'Manrope', sans-serif;
    }

    .left-section {
        position: relative;
        flex: none;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 2rem 1.5rem 3rem;
        border-right: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
    }

    /* Logo wrapper */
    .left-section .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Logo: prominent */
    .left-section .logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        height: auto;
        margin-bottom: 1.5rem;
    }

    .left-section .pulsating-circle {
        width: 70px;
        height: 70px;
    }

    .left-section .pulsating-circle::before {
        top: -12px;
        left: -12px;
        right: -12px;
        bottom: -12px;
        border-width: 2px;
    }

    .left-section .online-counter {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 16px;
    }

    .left-section .content-container {
        margin-top: 0;
        text-align: center;
        width: 100%;
        padding-bottom: 1rem;
    }

    .left-section .title {
        text-align: center;
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }

    .left-section .subtitle {
        text-align: center;
        margin-bottom: 2rem;
    }

    .left-section .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .left-section .cta-button {
        width: 100%;
    }

    /* Hide right section (instructions) on mobile */
    .right-section {
        display: none;
    }

    /* Hide mobile-explore button (we have bottom nav now) */
    .mobile-explore-button {
        display: none;
    }

    /* ======================
       DISCOVER PAGE MOBILE
       ====================== */
    .header {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

    .page-title {
        font-size: 1.8rem;
    }

    /* Category cards: full-width vertical stack */
    .main-bonds {
        flex-direction: column;
        padding: 0;
        gap: 12px;
    }

    .main-bond-card {
        width: 100%;
        min-width: unset;
        padding: 1rem 1.2rem;
    }

    /* Hide marquees on mobile */
    .company-bonds-wrapper,
    .question-bonds-wrapper {
        display: none;
    }

    /* ======================
       BOND LISTING PAGES MOBILE
       (Government, Tax-Free, SGB, Corporate)
       ====================== */
    .category-layout {
        padding: 0;
        gap: 0;
    }

    /* Hide notes panel on mobile */
    .notes-container {
        display: none !important;
        flex-basis: 0 !important;
        width: 0 !important;
    }

    .bonds-table-container {
        border: none;
        min-height: auto;
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* Hide the desktop table header */
    .bonds-header,
    .table-header {
        display: none;
    }

    /* Mobile controls bar: yield toggle + sort */
    .mobile-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-yield-toggle {
        display: flex;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        overflow: hidden;
    }

    .mobile-yield-toggle .toggle-btn {
        padding: 6px 14px;
        font-size: 0.78rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: 'Manrope', sans-serif;
        text-transform: lowercase;
    }

    .mobile-yield-toggle .toggle-btn.active {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .mobile-sort-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        font-size: 0.78rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        cursor: pointer;
        font-family: 'Manrope', sans-serif;
        text-transform: lowercase;
    }

    .mobile-sort-btn::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid rgba(255, 255, 255, 0.6);
    }

    /* Sort dropdown: fixed overlay on mobile */
    .mobile-sort-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(15, 15, 15, 0.98);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px 16px 0 0;
        z-index: 10002;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        padding: 0 20px 20px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .mobile-sort-dropdown.visible {
        transform: translateY(0);
    }

    .mobile-sort-dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 12px;
    }

    .mobile-sort-dropdown-title {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        text-transform: lowercase;
    }

    .mobile-sort-dropdown-close {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 1.3rem;
        cursor: pointer;
    }

    .mobile-sort-option {
        padding: 12px 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: 'Manrope', sans-serif;
        text-transform: lowercase;
    }

    .mobile-sort-option.active {
        color: #fff;
        font-weight: 600;
    }

    .mobile-sort-option.active::after {
        content: '✓';
        font-size: 0.85rem;
    }

    /* Bond rows → compact cards (2x2 layout) */
    .bonds-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        overflow-y: auto;
        max-height: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .bond-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.02);
        gap: 8px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .bond-row:hover,
    .bond-row:active {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Top-left: bond icon + name + tenure */
    .bond-row .bond-col-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-start;
    }

    /* Top-right: amount per bond */
    .bond-row .bond-col-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        flex-direction: column !important;
    }

    .bond-row .bond-col-2 .bond-amount {
        font-size: 0.85rem;
    }

    .bond-row .bond-col-2 .bond-traded-info {
        display: none;
    }

    /* Add "amount per bond" label on mobile */
    .bond-row .bond-col-2::before {
        content: 'amount per bond';
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.4);
        text-transform: lowercase;
        order: -1;
    }

    /* Bottom-left: traded info (volume, etc) */
    .bond-row .mobile-traded-info {
        grid-column: 1 !important;
        grid-row: 2 !important;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Bottom-right: yield */
    .bond-row .bond-col-3 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        flex-direction: column !important;
    }

    .bond-row .bond-col-3 .yield-availability {
        display: none;
    }

    /* Hide the arrow on mobile — full row is tappable */
    .bond-row .bond-col-4 {
        display: none !important;
    }

    /* Footnote */
    .bonds-footnote {
        font-size: 0.72rem;
        padding: 8px 0;
    }

    /* ======================
       CORPORATE BONDS — MOBILE FILTER
       ====================== */
    /* Hide the desktop filter panel completely on mobile */
    .filter-panel {
        display: none !important;
    }

    /* Hide old mobile search/filter bar (replaced by slide-up panel) */
    .mobile-search-filter {
        display: none !important;
    }

    .mobile-filter-toggle {
        display: none !important;
    }

    .mobile-filter-chips {
        display: none !important;
    }

    /* ======================
       BOND DETAIL PANEL — 95% SLIDE-UP
       ====================== */
    .bond-detail-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 95vh !important;
        height: 95dvh !important;
        border-radius: 16px 16px 0 0 !important;
        border: none !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 10001 !important;
        overflow-y: auto !important;
        /* Start off-screen, transition in */
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .bond-detail-panel.mobile-visible {
        transform: translateY(0) !important;
    }

    /* Overlay backdrop for bond detail */
    .bond-detail-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .order-page-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .bond-detail-panel .panel-content {
        padding-bottom: 140px; /* space for fixed bottom modules */
    }

    /* All sections expanded by default on mobile */
    .bond-detail-panel .section-content {
        display: block !important;
    }

    .bond-detail-panel .section-toggle-icon {
        display: none !important;
    }

    /* Hide watchlist button */
    .bond-detail-panel .watchlist-button {
        display: none !important;
    }

    /* Risk & rating: lowercase only on notes text, not the chart */
    .bond-detail-panel .rating-notes {
        text-transform: lowercase;
    }

    .bond-detail-panel .rating-note-item {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .bond-detail-panel .animated-rating-chart-container {
        width: 160px !important;
        height: 160px !important;
        margin: 0 auto 1rem;
        overflow: visible !important;
    }

    .bond-detail-panel .rating-chart {
        width: 160px !important;
        height: 160px !important;
    }

    /* Yield/price module: horizontal layout, fixed at bottom */
    .bond-detail-panel .available-yield-price-module {
        position: fixed;
        bottom: 48px;
        left: 0;
        right: 0;
        z-index: 10002;
        border-radius: 0;
    }

    .bond-detail-panel .yield-price-row {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .bond-detail-panel .yield-price-divider {
        width: 1px !important;
        height: 20px !important;
    }

    .bond-detail-panel .panel-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        background: rgba(0, 0, 0, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 10002;
    }

    /* ======================
       ORDER PAGE — 95% SLIDE-UP ON TOP OF BOND DETAIL
       ====================== */
    .order-page-overlay {
        z-index: 10002 !important;
    }

    .order-page-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 95vh !important;
        height: 95dvh !important;
        border-radius: 16px 16px 0 0 !important;
        border: none !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 10003 !important;
        overflow-y: auto !important;
        /* Start off-screen, transition in */
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .order-page-panel.mobile-visible {
        transform: translateY(0) !important;
    }

    /* Keep content grid horizontal on mobile for order page */
    .order-page-panel .order-content-grid {
        flex-direction: row !important;
        gap: 0.6rem !important;
    }

    .order-page-panel .order-form-column {
        max-width: 50% !important;
    }

    .order-page-panel .market-depth-column {
        max-width: 50% !important;
    }

    /* Order form fields side by side */
    .order-page-panel .order-form {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    /* Compact spacing to fit one page */
    .order-page-panel .order-panel-sections {
        padding: 0.5rem 0.8rem !important;
        padding-bottom: 120px !important;
    }

    .order-page-panel .order-panel-header {
        padding: 0.6rem 0.8rem !important;
        padding-top: 1.8rem !important;
    }

    /* Last traded row horizontal */
    .order-page-panel .last-traded-row {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .order-page-panel .last-traded-divider {
        width: 1px !important;
        height: 16px !important;
    }

    /* Yield price row horizontal */
    .order-page-panel .yield-price-row {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .order-page-panel .yield-price-divider {
        width: 1px !important;
        height: 20px !important;
    }

    /* Market depth compact */
    .order-page-panel .market-depth-rows {
        max-height: 150px !important;
    }

    /* Action button fixed at bottom */
    .order-page-panel .order-action {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10004 !important;
    }

    .order-page-panel .available-yield-price-module {
        position: fixed !important;
        bottom: 48px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10004 !important;
    }

    /* ======================
       POPUP STYLES ON MOBILE
       ====================== */
    /* Sell confirmation popup must sit above bond detail panel */
    .sell-confirmation-popup {
        z-index: 10005 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sell-confirmation-popup .popup-content {
        transform: scale(1) !important;
    }

    .popup-container {
        width: 95%;
        max-width: 400px;
        padding: 1.5rem;
    }

    .broker-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    /* ======================
       HEADER WITH BACK BUTTON
       ====================== */
    .mobile-back-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .mobile-back-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.2rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        background: none;
        border: none;
        font-family: 'Manrope', sans-serif;
    }

    .mobile-back-header .page-title {
        font-size: 1.4rem;
        margin: 0;
        text-align: left;
    }

    /* ======================
       FLOATING CTA BUTTONS (notes on right, filter on left)
       ====================== */
    .mobile-floating-ctas {
        position: fixed;
        bottom: 56px; /* above bottom nav */
        left: 16px;
        right: 16px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 10000;
        pointer-events: none;
    }

    .mobile-floating-ctas .mobile-floating-btn {
        pointer-events: auto;
    }

    /* Filter button sits on the left */
    .mobile-floating-filter-btn {
        order: -1;
    }

    /* Notes button always sits on the right */
    .mobile-notes-btn {
        margin-left: auto;
    }

    .mobile-floating-btn {
        padding: 8px 20px;
        font-size: 0.8rem;
        font-weight: 600;
        font-family: 'Manrope', sans-serif;
        text-transform: lowercase;
        color: #fff;
        background: rgba(30, 30, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.2s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .mobile-floating-btn:active {
        background: rgba(60, 60, 60, 0.95);
    }

    .mobile-floating-btn.active {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* ======================
       PERSISTENT SEARCH BAR (corporate bonds)
       ====================== */
    .mobile-persistent-search {
        position: relative;
        margin-bottom: 8px;
    }

    .mobile-persistent-search .search-box {
        width: 100%;
    }

    .mobile-persistent-search .search-box input {
        width: 100%;
        border-radius: 8px;
        padding: 10px 2.5rem 10px 12px;
        font-size: 0.85rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        font-family: 'Manrope', sans-serif;
    }

    .mobile-persistent-search .search-box input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .mobile-persistent-search .clear-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        font-size: 1.1rem;
    }

    /* ======================
       FILTER SLIDE-UP PANEL (corporate bonds)
       ====================== */
    .mobile-filter-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 60vh;
        background: rgba(15, 15, 15, 0.98);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px 16px 0 0;
        z-index: 10002;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        padding: 0 20px 20px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .mobile-filter-panel.visible {
        transform: translateY(0);
    }

    .mobile-filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 12px;
        position: sticky;
        top: 0;
        background: rgba(15, 15, 15, 0.98);
    }

    .mobile-filter-panel-title {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        text-transform: lowercase;
    }

    .mobile-filter-panel-close {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 1.3rem;
        cursor: pointer;
    }

    .mobile-filter-panel-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-filter-panel-body .filter-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 8px;
        text-transform: lowercase;
    }

    .mobile-filter-panel-body .rating-chips,
    .mobile-filter-panel-body .frequency-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ======================
       NOTES SLIDE-UP PANEL
       ====================== */
    .mobile-notes-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        background: rgba(15, 15, 15, 0.98);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px 16px 0 0;
        z-index: 10002;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        padding: 0 20px 20px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .mobile-notes-panel.visible {
        transform: translateY(0);
    }

    .mobile-notes-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 12px;
        position: sticky;
        top: 0;
        background: rgba(15, 15, 15, 0.98);
    }

    .mobile-notes-panel-title {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        text-transform: lowercase;
    }

    .mobile-notes-panel-close {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 1.3rem;
        cursor: pointer;
    }

    .mobile-notes-panel-body {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .mobile-notes-panel-body .note-item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mobile-notes-panel-body .note-tag {
        display: inline-block;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 4px;
        margin-bottom: 4px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.5);
    }

    /* ======================
       MARKET STATUS PILL (Mobile)
       ====================== */
    .market-status-pill {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 6px;
        background: rgba(30, 30, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        cursor: pointer;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: padding 0.5s ease, gap 0.5s ease;
        pointer-events: auto;
        overflow: hidden;
        /* Fixed center on viewport, above bottom nav */
        position: fixed;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 62px;
    }

    .market-status-pill.expanded {
        gap: 8px;
        padding: 6px 14px 6px 6px;
    }

    /* Circle container */
    .status-circle-wrap {
        width: 16px;
        height: 16px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* The dot (logo miniature) */
    .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: relative;
        z-index: 1;
    }

    /* Ring around the dot */
    .status-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Live state — white pulsing */
    .market-status-pill.live .status-dot {
        background: #ffffff;
        animation: statusPulse 1s ease-in-out infinite;
    }

    .market-status-pill.live .status-dot::before {
        border-color: rgba(255, 255, 255, 0.35);
        animation: statusRingPulse 1s ease-in-out infinite;
    }

    /* Closed state — black centre, static */
    .market-status-pill.closed .status-dot {
        background: #000000;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        animation: none;
    }

    .market-status-pill.closed .status-dot::before {
        border-color: rgba(255, 255, 255, 0.15);
        animation: none;
    }

    /* Text label */
    .status-text {
        font-size: 0.7rem;
        font-weight: 600;
        font-family: 'Manrope', sans-serif;
        color: rgba(255, 255, 255, 0.8);
        text-transform: lowercase;
        white-space: nowrap;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 0.5s ease, opacity 0.5s ease;
    }

    .market-status-pill.expanded .status-text {
        max-width: 120px;
        opacity: 1;
    }

    /* Keyframes — fast pulse for live status (1s cycle, adapted from logo 2s) */
    @keyframes statusPulse {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(0.85); }
        100% { opacity: 1; transform: scale(1); }
    }

    @keyframes statusRingPulse {
        0% { opacity: 0.5; transform: scale(0.85); }
        50% { opacity: 0.2; transform: scale(1.15); }
        100% { opacity: 0.5; transform: scale(0.85); }
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .bottom-nav,
    .mobile-controls,
    .mobile-search-filter,
    .mobile-filter-toggle,
    .mobile-filter-chips,
    .mobile-back-header,
    .mobile-floating-ctas,
    .mobile-notes-panel,
    .mobile-filter-panel,
    .mobile-sort-dropdown,
    .mobile-traded-info,
    .mobile-persistent-search {
        display: none !important;
    }
}