@media (max-width: 767.98px) {
    :root {
        --app-teal: #2f8f7a;
        --app-teal-soft: #e9f5f1;
        --app-bg: #f3f5f6;
        --app-card: #ffffff;
        --app-border: #dce3e7;
        --app-text: #1f2937;
        --app-muted: #64748b;
    }

    body.panel-page {
        background: var(--app-bg);
        padding-top: 86px;
        padding-bottom: 94px;
        color: var(--app-text);
    }

    .astro-footer {
        display: none;
    }

    .panel-header-wrapper {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1100;
        background: rgba(243, 245, 246, 0.96);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .panel-header-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .panel-header.form-card.panel-header-inner {
        background: transparent;
        border: 0;
        box-shadow: none !important;
    }

    .top-actions {
        position: relative;
        min-height: 68px;
        padding: 12px 2px !important;
        justify-content: space-between;
    }

    .top-actions > .flex-grow-1.order-2.d-md-none {
        display: none !important;
    }

    .panel-logo-area {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        z-index: 2;
    }

    .panel-logo-img {
        height: 50px !important;
        width: auto;
    }

    .panel-mobile-menu-wrap {
        width: 100%;
        justify-content: space-between;
        gap: 10px !important;
        margin: 0;
    }

    .panel-mobile-quick-btn {
        min-width: 120px;
        height: 44px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #b6d8cf;
        background: var(--app-teal-soft);
        color: #216c5d;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    .panel-mobile-quick-btn i {
        font-size: 0.92rem;
    }

    .panel-mobile-quick-btn--comment {
        background: #fff;
        border-color: #cfd8de;
        color: #315f54;
    }

    .main-card {
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
    }

    /* Mobilde meta bilgi kutusu akışa alınır (position:static). Bootstrap h-100
       yüksekliği sıfırlanmazsa, statik akışta #mainDropzone'un tüm yüksekliğini
       kaplayıp başlık ve SVG'yi aşağı iterek büyük bir boşluğa ve çakışmaya yol
       açıyordu. Yüksekliği içeriğe göre otomatik yap. */
    #mainDropzone:not([data-active-key="horary"]):not([data-active-key="horary_transit"]) #chartMeta {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 4px 8px !important;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 2px;
    }

    /* Kart, doğal (içerik) yüksekliğe otursun; desktop grid için verilen
       h-100/flex-stretch yüksekliği mobilde SVG'nin taşmasına neden olmasın.
       Horary (chartMeta overlay olarak kalır) ve local-space (kendi yükseklik
       kuralı var) hariç. */
    #mainDropzone:not([data-active-key="horary"]):not([data-active-key="horary_transit"]):not(.local-space-mode) {
        height: auto !important;
        min-height: 0 !important;
    }

    #mainDropzone:not([data-active-key="horary"]):not([data-active-key="horary_transit"]) #chartMeta .meta-card {
        position: static !important;
        max-width: calc(50% - 4px) !important;
        text-align: left !important;
    }

    #mainDropzone:not([data-active-key="horary"]):not([data-active-key="horary_transit"]) #mainTitle.chart-badge {
        display: block;
        text-align: center;
        background: transparent;
        border: 0;
        box-shadow: none;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        z-index: auto;
        margin: 2px auto 8px;
        max-width: 96%;
        padding: 0;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.02rem;
        font-weight: 800;
        color: #101827;
    }

    #mainDropzone[data-active-key="horary"] #mainSvg,
    #mainDropzone[data-active-key="horary_transit"] #mainSvg {
        margin-top: 72px;
    }

    #mainDropzone.local-space-mode {
        min-height: calc(100dvh - 222px) !important;
        height: calc(100dvh - 222px) !important;
        max-height: calc(100dvh - 222px) !important;
    }

    #mainDropzone.local-space-mode #localSpaceMapContainer {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 12;
    }

    #mainDropzone.local-space-mode #localSpaceMapFrame {
        position: absolute !important;
        inset: 8px !important;
        min-height: 300px;
    }

    #mainDropzone.local-space-mode #localSpaceMapFrame.travel-relocation-frame {
        inset: 16px !important;
    }

    #mainDropzone.local-space-mode #localSpaceLeafletMap {
        width: 100% !important;
        height: 100% !important;
        min-height: 300px;
    }

    .meta-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 0 !important;
    }

    .btn-stats-toggle,
    .btn-right-panel-toggle,
    .mobile-pill {
        border-radius: 18px !important;
        background: var(--app-card) !important;
        border: 1px solid var(--app-border) !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
        color: #1f2937;
        min-height: 56px;
        font-weight: 700;
    }

    .elements-card,
    .chart-card,
    .right-panel-card,
    .aspect-card {
        border-radius: 20px !important;
        border: 1px solid var(--app-border);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
        background: var(--app-card);
    }

    .right-tabs-bar {
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        background: #fff;
    }

    #panelMobileSidebar.offcanvas {
        max-width: 88vw;
        width: 88vw;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        overflow: hidden;
    }

    #panelMobileSidebar .offcanvas-header {
        min-height: 72px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    }

    #chartsDrawer.offcanvas {
        width: 100% !important;
        max-width: 100vw;
        border: 0;
        border-radius: 0;
    }

    body.panel-page.charts-drawer-open .panel-header-wrapper {
        opacity: 0;
        pointer-events: none;
    }

    #chartsDrawer .offcanvas-header {
        min-height: 72px;
        padding: 16px 18px;
        border-bottom: 1px solid #e3e8ed;
        background: #fff;
    }

    #chartsDrawer .offcanvas-title {
        font-size: 1.18rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.01em;
    }

    #chartsDrawer .offcanvas-body {
        background: #fff;
        overflow-y: auto;
        padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important;
    }

    #chartsDrawer .charts-drawer-advanced-block,
    #chartsDrawer .charts-drawer-loading {
        display: none !important;
    }

    #chartsDrawer #loadedChartsHint,
    #chartsDrawer #drawerLoadedCharts {
        display: none !important;
    }

    #chartsDrawer #drawerLoadableBlock {
        display: block !important;
        border-top: 0 !important;
        margin-top: 2px;
    }

    #chartsDrawer #drawerLoadableBlock > .px-3 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #chartsDrawer #drawerLoadableTitleText {
        font-size: 0.86rem;
        color: #64748b;
    }

    #chartsDrawer #drawerChartsList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 6px 16px 14px !important;
    }

    #chartsDrawer #drawerChartsList .chart-drawer-card {
        min-height: 112px;
    }

    #chartsDrawer #drawerChartsList .chart-drawer-card .chart-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        border-radius: 8px !important;
    }

    #chartsDrawer #drawerChartsList .chart-drawer-placeholder-inner {
        min-height: 120px;
        gap: 8px;
        padding: 12px 10px;
    }

    #chartsDrawer #drawerChartsList .chart-drawer-placeholder .chart-drawer-icon {
        font-size: 1.55rem;
    }

    #chartsDrawer #drawerChartsList .chart-drawer-placeholder .chart-load-hint {
        font-size: 0.68rem;
        letter-spacing: 0.03em;
    }

    #chartsDrawer .charts-drawer-mobile-action-card {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 12px;
        border-radius: 22px;
        border: 1px solid #e3e8ed !important;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        padding: 14px;
        margin-bottom: 12px;
    }

    #chartsDrawer .charts-drawer-mobile-action-card__icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        background: #eef4f7;
        color: #2f8f7a;
    }

    #chartsDrawer .charts-drawer-mobile-action-card__content {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    #chartsDrawer .charts-drawer-mobile-action-card__title {
        display: block;
        font-size: 1.08rem;
        font-weight: 800;
        line-height: 1.15;
        color: #0f172a;
    }

    #chartsDrawer .charts-drawer-mobile-action-card__subtitle {
        display: block;
        font-size: 0.78rem;
        color: #6b7280;
        line-height: 1.25;
    }

    #chartsDrawer .charts-drawer-mobile-action-card__arrow {
        color: #2f8f7a;
        font-size: 1.25rem;
        justify-self: end;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--moment .charts-drawer-mobile-action-card__icon {
        background: #dff2ec;
        color: #2f8f7a;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--moment .charts-drawer-mobile-action-card__title,
    #chartsDrawer .charts-drawer-mobile-action-card--combo .charts-drawer-mobile-action-card__title {
        color: #0f766e;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--transit .charts-drawer-mobile-action-card__icon {
        background: #e8eeff;
        color: #2e5fd1;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--transit .charts-drawer-mobile-action-card__title {
        color: #1d4ed8;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--extra .charts-drawer-mobile-action-card__icon {
        background: #f3ebff;
        color: #6d28d9;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--extra .charts-drawer-mobile-action-card__title {
        color: #6d28d9;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--combo .charts-drawer-mobile-action-card__icon {
        background: #dff2ec;
        color: #2f8f7a;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--report .charts-drawer-mobile-action-card__icon {
        background: #e8f7f3;
        color: #1f7f6b;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--report .charts-drawer-mobile-action-card__title {
        color: #1f7f6b;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--question .charts-drawer-mobile-action-card__icon {
        background: #edf6f3;
        color: #2c7d6b;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--question .charts-drawer-mobile-action-card__title {
        color: #2c7d6b;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--rectification .charts-drawer-mobile-action-card__icon {
        background: #eaf3f8;
        color: #2f6f8f;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--rectification .charts-drawer-mobile-action-card__title {
        color: #2f6f8f;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--electional .charts-drawer-mobile-action-card__icon {
        background: #edf4ff;
        color: #2f5fd1;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--electional .charts-drawer-mobile-action-card__title {
        color: #2f5fd1;
    }

    #chartsDrawer .charts-drawer-hint {
        border-bottom: 0;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #chartsDrawer .charts-drawer-hint small {
        font-size: 0.82rem;
        color: #6b7280;
    }

    #chartsDrawer .house-system-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px;
    }

    #chartsDrawer #houseSystemSelectDrawer {
        height: 54px;
        font-size: 1.02rem;
        border-radius: 18px;
        border-color: #d3dbe3;
        box-shadow: none;
    }

    #chartsDrawer .offcanvas-body > .px-3.pt-2.pb-2.border-bottom.border-opacity-25 {
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-bottom-color: #e3e8ed !important;
    }

    #chartsDrawer #chartComboOverrideDate,
    #chartsDrawer #chartComboOverrideTime,
    #chartsDrawer #chartComboOverridePlace {
        height: 52px;
        border-radius: 16px;
        border-color: #d3dbe3;
        font-size: 1rem;
        padding: 10px 14px;
    }

    #chartsDrawer #btnDrawerApplyChart {
        height: 56px;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 700;
        margin-top: 2px;
    }

    #chartsDrawer #drawerLoadedCharts {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #chartsDrawer #drawerLoadedCharts .chart-drawer-card {
        min-height: 96px;
    }

    #chartsDrawer .charts-drawer-logout-wrap {
        border-top: 1px solid #e3e8ed;
        margin-top: 4px;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--logout {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
        padding: 10px 12px;
        border-radius: 16px;
        margin-bottom: 0;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--logout .charts-drawer-mobile-action-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1.12rem;
        background: #fdecea;
        color: #c62828;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--logout .charts-drawer-mobile-action-card__title {
        font-size: 0.94rem;
        color: #b42318;
    }

    #chartsDrawer .charts-drawer-mobile-action-card--logout .charts-drawer-mobile-action-card__arrow {
        font-size: 1rem;
        color: #b42318;
    }

    #horaryModal .modal-dialog,
    #rectificationModal .modal-dialog,
    #electionalModal .modal-dialog,
    #completeSocialProfileModal .modal-dialog,
    #socialPhoneVerifyModal .modal-dialog {
        display: block !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: calc(86px + env(safe-area-inset-top)) auto calc(92px + env(safe-area-inset-bottom)) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #horaryModal .modal-dialog.modal-dialog-centered,
    #rectificationModal .modal-dialog.modal-dialog-centered,
    #electionalModal .modal-dialog.modal-dialog-centered,
    #completeSocialProfileModal .modal-dialog.modal-dialog-centered,
    #socialPhoneVerifyModal .modal-dialog.modal-dialog-centered,
    #horaryModal .modal-dialog.modal-dialog-scrollable,
    #rectificationModal .modal-dialog.modal-dialog-scrollable,
    #electionalModal .modal-dialog.modal-dialog-scrollable,
    #completeSocialProfileModal .modal-dialog.modal-dialog-scrollable,
    #socialPhoneVerifyModal .modal-dialog.modal-dialog-scrollable {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #rectificationModal .modal-dialog.modal-fullscreen-sm-down,
    #electionalModal .modal-dialog.modal-fullscreen-sm-down,
    #completeSocialProfileModal .modal-dialog.modal-fullscreen-sm-down,
    #socialPhoneVerifyModal .modal-dialog.modal-fullscreen-sm-down {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        margin: calc(86px + env(safe-area-inset-top)) auto calc(92px + env(safe-area-inset-bottom)) !important;
    }

    #horaryModal .modal-content,
    #rectificationModal .modal-content,
    #electionalModal .modal-content,
    #completeSocialProfileModal .modal-content,
    #socialPhoneVerifyModal .modal-content {
        max-height: calc(100dvh - 178px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        height: auto !important;
        border-radius: 18px !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #horaryModal .modal-body,
    #rectificationModal .modal-body,
    #electionalModal .modal-body,
    #completeSocialProfileModal .modal-body,
    #socialPhoneVerifyModal .modal-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* #completeSocialProfileModal ve #socialPhoneVerifyModal içinde modal-body/modal-footer
       .modal-content'in doğrudan çocuğu değil, aralarındaki <form> etiketinin içinde.
       Bu form flex zincirine dahil edilmezse üstteki max-height/overflow:hidden kısıtlaması
       işe yaramaz ve footer'daki buton alt navigasyon çubuğunun arkasında kalır. */
    #completeSocialProfileModal .modal-content > form,
    #socialPhoneVerifyModal .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* .modal-content'e sadece max-height verilip height:auto bırakılırsa (diğer 3 modalde
       olduğu gibi) flex kutusunun kendi büyüklüğü içeriğe göre belirleniyor ve flex-grow'un
       dağıtacağı "kalan alan" kavramı oluşmuyor; form/modal-body içerik boyutuna küçülüyor.
       Bu iki modalde form katmanı eklendiği için height'i de aynı hesaba sabitleyip flex
       dağıtımına kesin bir yükseklik veriyoruz. */
    #completeSocialProfileModal .modal-content,
    #socialPhoneVerifyModal .modal-content {
        height: calc(100dvh - 178px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }

    .panel-mobile-bottom-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        height: 84px;
        padding: 12px 22px 12px;
        background: rgba(242, 248, 246, 0.96);
        border-top: 1px solid #cfe3dd;
        backdrop-filter: blur(10px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .panel-mobile-bottom-dock__item {
        justify-self: center;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        color: #204f45;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 700;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .panel-mobile-bottom-dock__item i {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #c8ded7;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eaf5f2;
        font-size: 1rem;
    }

    .panel-mobile-bottom-dock__center {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-top: -28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 5px solid #daf0ea;
        background: radial-gradient(circle at 30% 30%, #49a894, var(--app-teal));
        box-shadow: 0 8px 22px rgba(47, 143, 122, 0.35);
        padding: 0;
    }

    .panel-mobile-bottom-dock__center img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    body.panel-page .ai-assistant-container .ai-assistant-btn {
        display: none !important;
    }

    body.panel-page .ai-assistant-container {
        z-index: 2100 !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-window {
        top: 86px !important;
        bottom: 84px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-shell {
        border-radius: 0 !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-header {
        background: #4ea090 !important;
        color: #fff !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
        min-height: 72px;
        padding-top: 16px !important;
        padding-bottom: 14px !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-title {
        color: #fff !important;
        font-size: 0 !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-title i {
        display: none !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-title::before {
        content: "";
        display: inline-block;
        width: 34px;
        height: 24px;
        background: url('/assets/BaykusBeyazIcon.png') center/contain no-repeat;
    }

    body.panel-page .ai-assistant-container #aiChatHistoryBtn {
        display: none !important;
    }

    body.panel-page .ai-assistant-container #aiChatCloseBtn {
        background: transparent !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 1.1rem;
        padding: 0 6px !important;
        min-width: auto !important;
    }

    body.panel-page .ai-assistant-container #aiChatCloseBtn .d-none {
        display: none !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-messages {
        padding: 18px 14px 14px !important;
    }

    body.panel-page .ai-assistant-container .ai-chat-disclaimer {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    /* Harita lightbox'ı mobilde navbar ve bottom dock arasında kalsın */
    body.panel-page .astro-fancybox-fullscreen.fancybox__container {
        top: 86px !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
    }

    body.panel-page .astro-fancybox-fullscreen .fancybox__content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 14px 14px 0 0 !important;
    }

    body.panel-page .astro-fancybox-fullscreen .astro-modal-wrapper {
        height: 100% !important;
        border-radius: 14px 14px 0 0;
    }

    body.panel-page .astro-fancybox-fullscreen #panzoomContainer {
        height: 100% !important;
    }

    #commentRequestModal .comment-modal,
    #newChartModal .modal-content {
        border-radius: 22px;
    }

    #commentRequestModal .modal-dialog {
        max-width: calc(100vw - 26px);
        margin: 2.1rem auto;
    }

    #commentRequestModal .comment-modal {
        border-radius: 24px;
        box-shadow: 0 20px 42px rgba(15, 23, 42, 0.24);
        overflow: hidden;
    }

    #commentRequestModal .comment-modal__header {
        background: #ffffff;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        padding: 18px 18px 14px;
    }

    #commentRequestModal .comment-modal__header-content {
        gap: 11px;
    }

    #commentRequestModal .comment-modal__icon-wrap {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    #commentRequestModal .comment-modal__title {
        font-size: 1.7rem;
        line-height: 1.15;
        margin-bottom: 2px;
    }

    #commentRequestModal .comment-modal__close {
        top: 15px;
        right: 14px;
        width: 36px;
        height: 36px;
        background: #f2f5f8;
        color: #6b7280;
        border: 1px solid #e6eaef;
        border-radius: 50%;
    }

    #commentRequestModal .comment-modal__title {
        color: #0f172a;
    }

    #commentRequestModal .comment-modal__subtitle {
        color: #64748b;
    }

    #commentRequestModal .comment-modal__icon-wrap {
        background: #e8f5f1;
        color: var(--app-teal);
        box-shadow: none;
    }

    #commentRequestModal .comment-modal__header-bg,
    #commentRequestModal .comment-modal__stars {
        display: none;
    }

    #commentRequestModal .comment-modal__token-bar {
        margin: 0 16px;
        border: 0;
        border-radius: 16px;
        padding: 14px 14px;
        background: #eaf6ef;
    }

    #commentRequestModal .comment-modal__token-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 16px;
    }

    #commentRequestModal .comment-modal__token-label {
        font-size: 1rem;
    }

    #commentRequestModal .comment-modal__token-hint {
        display: none;
    }

    #commentRequestModal .comment-modal__token-badge {
        border-radius: 999px;
        font-size: 1.6rem;
        padding: 8px 16px;
        background: #fff;
    }

    #commentRequestModal .comment-modal__body {
        padding: 14px 16px 18px;
        background: #fff;
    }

    #commentRequestModal .comment-modal__cards {
        gap: 12px !important;
    }

    #commentRequestModal .comment-modal__cards > .col-12 {
        display: block;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #commentRequestModal .comment-download-btn {
        min-height: 98px;
        padding: 14px 14px;
        border-radius: 16px;
        border: 1px solid #e8edf2;
        background: #f7f9fc;
        box-shadow: none;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon title arrow"
            "icon token arrow";
        gap: 2px 12px;
        align-items: center;
    }

    #commentRequestModal .comment-download-btn .cdb-icon-wrap {
        grid-area: icon;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 22px;
    }

    #commentRequestModal .comment-download-btn .cdb-title {
        grid-area: title;
        font-size: 1.1rem;
        line-height: 1.2;
    }

    #commentRequestModal .comment-download-btn .cdb-desc {
        display: none;
    }

    #commentRequestModal .comment-download-btn .cdb-desc p,
    #commentRequestModal .comment-download-btn .cdb-desc ul,
    #commentRequestModal .comment-download-btn .cdb-desc li {
        display: none !important;
    }

    #commentRequestModal .comment-download-btn .cdb-token {
        grid-area: token;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 4px;
        padding: 4px 10px;
        background: #e8f4ef;
        border: 1px solid #d2e8df;
        border-radius: 999px;
        width: fit-content;
        font-size: 0.8rem;
        font-weight: 700;
        color: #0f766e;
        line-height: 1;
    }

    #commentRequestModal .comment-download-btn .cdb-token i {
        font-size: 0.72rem;
        color: #0f766e;
    }

    #commentRequestModal .comment-download-btn .cdb-arrow {
        grid-area: arrow;
        position: static;
        width: 34px;
        height: 34px;
        background: #edf2f7;
        color: #94a3b8;
    }

    #commentRequestModal .comment-download-btn:hover,
    #commentRequestModal .comment-download-btn:active {
        transform: none;
        box-shadow: none;
        border-color: #d9e2ea;
    }

    #commentRequestModal .comment-modal__upsell {
        margin-top: 12px;
        border-radius: 14px;
        font-size: 0.74rem;
    }
}

@media (max-width: 479.98px) {
    .panel-mobile-quick-btn {
        min-width: 104px;
        padding: 0 11px;
        font-size: 0.72rem;
    }

    #mainDropzone:not([data-active-key="horary"]):not([data-active-key="horary_transit"]) #mainTitle.chart-badge {
        font-size: 1rem;
    }

    #mainDropzone[data-active-key="horary"] #mainSvg,
    #mainDropzone[data-active-key="horary_transit"] #mainSvg {
        margin-top: 64px;
    }

    #commentRequestModal .modal-dialog {
        max-width: calc(100vw - 18px);
        margin: 1.2rem auto;
    }

    #commentRequestModal .comment-modal__title {
        font-size: 1.5rem;
    }

    #commentRequestModal .comment-download-btn {
        min-height: 90px;
    }
}