/* =======================================================
   MOBILE LANDSCAPE — STABLE BASE (667 x 375)
   ======================================================= */

@media screen and (max-width: 900px) and (orientation: landscape) {

    /* ===============================
       BASE RESET
       =============================== */

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        background: #0b0f14;
    }

    body {
        display: flex;
        flex-direction: column;
    }
	

    /* ===============================
       HEADER
       =============================== */

    header.navbar {
        height: 44px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
    }

    .navbar .logo {
        display: none !important;
    }

    .navbar .user-menu,
    .navbar .auth-buttons .register-btn {
        display: none !important;
    }

    body:not(.authenticated) .navbar .menu,
    body:not(.authenticated) .navbar .bell-wrapper {
        display: none !important;
    }

    body:not(.authenticated) .navbar .auth-buttons {
        display: flex !important;
        align-items: center;
    }

    .navbar .auth-buttons .login-btn {
        background: none;
        border: 1px solid #00e896;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 14px;
        font-weight: 500;
        color: #00e896;
        text-decoration: none;
        white-space: nowrap;
    }

    .navbar .login-btn:active {
        background: rgba(0, 232, 150, 0.15);
    }

    body.authenticated .navbar .auth-buttons {
        display: none !important;
    }

    body.authenticated .navbar .menu {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    body.authenticated .navbar .bell-wrapper {
        display: flex;
        align-items: center;
    }

    .navbar .menu a,
    .navbar .bots-menu-btn,
    .navbar .videos-menu-btn {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 8px !important;
        margin: 0 !important;
        font-size: 14px;
        font-weight: 500;
        color: #cfd6dd;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .navbar .menu a.active {
        color: #00e896;
    }

    /* ===============================
       MAIN LAYOUT
       =============================== */

    main.layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        box-sizing: border-box;
    }

    #left-panel {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #chart {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
    }

    /* правая панель — 30% */
    aside#right-panel {
        flex: 0 0 30%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    /* ===============================
       FOOTER
       =============================== */

    footer,
    .footer {
        display: none !important;
    }
	
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  main.layout {
    padding-bottom: env(safe-area-inset-bottom);
  }

}

@media screen and (max-width: 900px) and (orientation: landscape) {

    /* ===================================================
       LEFT PANEL — TEXT ONLY
       =================================================== */

    /* все кнопки в шапке графика — без кнопочного вида */
    #left-panel button {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 6px !important;
        margin: 0 !important;

        font-size: 13px;
        font-weight: 500;
        color: #cfd6dd;
        cursor: pointer;
        white-space: nowrap;
    }

    /* активный таймфрейм */
    #left-panel .tf-btn.active {
        color: #00e896;
    }

    /* группа таймфреймов — в одну строку */
    #left-panel .tf-group {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* кнопка инструментов ☰ — тоже текст */
    #chart-tools-btn {
        font-size: 16px;
        padding-right: 8px !important;
    }

    /* кнопка сброса */
    #reset-chart {
        font-size: 13px;
    }

    /* блок управляющих кнопок */
    #left-panel .chart-controls {
        display: flex;
        align-items: center;
        gap: 6px;
    }

}
@media screen and (max-width: 900px) and (orientation: landscape) {

    /* ==========================================
       RESET CHART BUTTON — ICON MODE
       ========================================== */

    /* скрываем текст */
    #reset-chart {
        font-size: 0 !important;
        padding: 0 6px !important;
        line-height: 1 !important;
    }

    /* рисуем иконку через псевдоэлемент */
    #reset-chart::before {
        content: "⟳";
        font-size: 18px;
        color: #cfd6dd;
        display: inline-block;
        transition: color 0.15s ease;
    }

    /* активное состояние */
    #reset-chart:active::before {
        color: #00e896;
    }

}
@media screen and (max-width: 900px) and (orientation: landscape) {

    /* ==========================================
       INDICATORS — SVG ICON (TradingView style)
       ========================================== */

    /* убираем текст */
    #indicators-btn {
        font-size: 0 !important;
        padding: 0 6px !important;
        line-height: 1 !important;
    }

    /* SVG-иконка (гистограмма + линия) */
    #indicators-btn::before {
        content: "";
        width: 18px;
        height: 18px;
        display: inline-block;

        background-color: #cfd6dd;

        mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M3 17h2v-7H3v7zm4 0h2V7H7v10zm4 0h2v-4h-2v4zm4 0h2V4h-2v13zm4 0h2V9h-2v8z'/>\
</svg>");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;

        -webkit-mask-image: mask-image;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;

        transition: background-color 0.15s ease;
    }

    #indicators-btn:active::before {
        background-color: #00e896;
    }

    /* ==========================================
       ALERT BUTTON — REMOVE
       ========================================== */

    #alert-btn {
        display: none !important;
    }

}
@media screen and (max-width: 900px) and (orientation: landscape) {

/* ==========================================
   ALERT ADD BUTTON — HIDE (MOBILE ONLY)
   ========================================== */

	/* крестик в кружке (добавление алерта) */
	.alert-add,
	.alert-add-btn,
	.alert-plus,
	.alert-plus-circle,
	.chart-alert-add {
		display: none !important;
	}
	/* скрыть панель инструментов графика */
    #chart-tools-btn {
        display: none !important;
    }
}
@media screen and (max-width: 900px) and (orientation: landscape) {

    /* ==========================================
       PAIR NAME — LIGHT ACCENT (MOBILE ONLY)
       ========================================== */

    .pair-info span {
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;

        font-size: 14px;
        font-weight: 600;
        color: #00e896;

        animation: pairBreath 3s ease-in-out infinite;
    }

    /* лёгкое «дыхание» без свечения и рамок */
    @keyframes pairBreath {
        0%   { opacity: 0.85; }
        50%  { opacity: 1; }
        100% { opacity: 0.85; }
    }

}

/* лёгкое «дыхание» без свечения и рамок */
@keyframes pairBreath {
    0%   { opacity: 0.85; }
    50%  { opacity: 1; }
    100% { opacity: 0.85; }
}
@media screen and (max-width: 900px) and (orientation: landscape) {

  body {
    height: 100dvh;
  }

  main.layout {
    height: calc(100dvh - 44px);
  }

}
/* RIGHT PANEL — FORCE BOTTOM STRETCH (MOBILE LANDSCAPE) */

@media screen and (max-width: 900px) and (orientation: landscape) {

    main.layout {
        align-items: stretch;
    }

    aside#right-panel {
        height: 100%;
        max-height: 100%;
    }

}
/* BOT MESSAGES — SMALLER TEXT (MOBILE LANDSCAPE) */
@media screen and (max-width: 900px) and (orientation: landscape) {

    #right-panel .bot-message,
    #right-panel .bot-message-text {
        font-size: 12px;
        line-height: 1.25;
    }

}
/* BOT MESSAGES — FORCE TEXT SIZE (MOBILE LANDSCAPE) */

@media screen and (max-width: 900px) and (orientation: landscape) {

    #right-panel .bot-messages-area * {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

}
/* MOBILE PORTRAIT — ROTATE DEVICE NOTICE */

@media screen and (max-width: 900px) and (orientation: portrait) {

    body::before {
        content: "Поверните устройство в горизонтальное положение";
        position: fixed;
        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #0b0f14;
        color: #cfd6dd;

        font-size: 16px;
        font-weight: 600;
        text-align: center;

        z-index: 9999;
    }

    body > * {
        display: none !important;
    }
}