/* ТУЛТИП ОБУЧАЮЩИЙ ДОБАВЛЕНИЮ НА РАБОЧИЙ СТОЛ */
/* Префиксы для избежания конфликтов (например, my-ma- = my mini app) */
body.my-ma-body-lock { /* Для блокировки скролла при открытом модальном окне */
    overflow: hidden !important;
}

#my-ma-initialTooltip {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: var(--tg-theme-button-color, #007aff); /* Telegram Theme: button_color */
    color: var(--tg-theme-button-text-color, #ffffff); /* Telegram Theme: button_text_color */
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-20px);
    /* ИЗМЕНЕНИЕ ЗДЕСЬ: my-ma-pulse теперь будет длиться 3 секунды (1с тряска, 2с покой) */
    animation: my-ma-fadeInBounce 0.5s 0.5s forwards, my-ma-pulse 3s 1s infinite ease-in-out; /* ДЛИТЕЛЬНОСТЬ ИЗМЕНЕНА */
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#my-ma-initialTooltip .my-ma-icon {
    font-size: 18px;
    line-height: 1;
    margin-right: 0px;
}

@keyframes my-ma-fadeInBounce {
    0% { opacity: 0; transform: translateY(-20px); }
    60% { opacity: 1; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- МОДИФИЦИРОВАННАЯ АНИМАЦИЯ my-ma-pulse ДЛЯ ПЕРИОДИЧНОСТИ С ПАУЗОЙ --- */
/* Общая длительность 3с: 1с тряски, 2с покоя */
@keyframes my-ma-pulse {
    /* translateY(0) от fadeInBounce всегда предполагается примененным */

    /* --- Фаза тряски: 0% - 33.33% (1 секунда из 3с анимации) --- */
    /* Jitter паттерн, который длился 1с в оригинале (0-50% от 2с), теперь занимает 0-33.33% от 3с. */

    /* Первый полный jitter-цикл (0% - 20% от 3с = 0.6с) */
    0%     { transform: translate(0px, 0px)    translateY(0); }
    2%     { transform: translate(1px, -1px)   translateY(0); } /* Было 3%   (3 * 2/3 = 2) */
    4%     { transform: translate(-1px, 1px)  translateY(0); } /* Было 6%   (6 * 2/3 = 4) */
    6%     { transform: translate(-2px, -1px) translateY(0); } /* Было 9%   (9 * 2/3 = 6) */
    8%     { transform: translate(1px, 2px)   translateY(0); } /* Было 12%  (12 * 2/3 = 8) */
    10%    { transform: translate(0px, 0px)    translateY(0); } /* Было 15%  (15 * 2/3 = 10) */
    12%    { transform: translate(2px, 1px)   translateY(0); } /* Было 18%  (18 * 2/3 = 12) */
    14%    { transform: translate(-1px, -2px) translateY(0); } /* Было 21%  (21 * 2/3 = 14) */
    16%    { transform: translate(1px, -1px)  translateY(0); } /* Было 24%  (24 * 2/3 = 16) */
    18%    { transform: translate(-1px, 0px)  translateY(0); } /* Было 27%  (27 * 2/3 = 18) */
    20%    { transform: translate(0px, 0px)    translateY(0); } /* Было 30%  (30 * 2/3 = 20) */

    /* Еще немного тряски, чтобы заполнить до 1 секунды (до 33.33%) */
    /* Это примерно еще 0.4с. Оригинально 30.01% to 50% of 2s. Теперь 20.01% to 33.33% of 3s */
    20.01% { transform: translate(0px, 0px)    translateY(0); } /* Было 30.01% */
    22%    { transform: translate(1px, -1px)   translateY(0); } /* Было 33%  (33 * 2/3 = 22) */
    24%    { transform: translate(-1px, 1px)  translateY(0); } /* Было 36%  (36 * 2/3 = 24) */
    26%    { transform: translate(-2px, -1px) translateY(0); } /* Было 39%  (39 * 2/3 = 26) */
    28%    { transform: translate(1px, 2px)   translateY(0); } /* Было 42%  (42 * 2/3 = 28) */
    30%    { transform: translate(0px, 0px)    translateY(0); } /* Было 45%  (45 * 2/3 = 30) */
    32%    { transform: translate(2px, 1px)   translateY(0); } /* Было 48%  (48 * 2/3 = 32) */
    /* Заканчиваем на 33.33% в состоянии покоя, чтобы плавно перейти к фазе покоя */
    33.33% { transform: translate(0px, 0px)    translateY(0); } /* Конец фазы тряски (1s). Было 50% (50 * 2/3 = 33.33) */


    /* --- Фаза покоя: 33.34% - 100% (2 секунды) --- */
    /* Элемент остается неподвижным. Состояние от 33.33% сохраняется до 100% */
    100%   { transform: translate(0px, 0px)    translateY(0); } /* Конец фазы покоя */
}


#my-ma-instructionModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
    box-sizing: border-box;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#my-ma-instructionModal.my-ma-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

.my-ma-modal-content {
    background-color: #303030;
    color: #FFFFFF;
    padding: 20px 25px 25px 25px;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    width: 320px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

#my-ma-instructionModal.my-ma-visible .my-ma-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.my-ma-modal-content p {
    margin: 0 0 15px 0;
    font-size: 16px;
    line-height: 1.5;
}

.my-ma-modal-content p:last-of-type {
    margin-bottom: 0;
}

.my-ma-modal-buttons-container {
    margin-top: 25px;
}

.my-ma-arrow-pointer {
    display: none !important; /* Скрываем стрелку */
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 16px solid #FF0000;
    position: absolute;
    top: -15px;
    right: 20px;
    transform-origin: 50% 100%;
    animation: my-ma-arrowPulse 1.5s infinite ease-in-out;
    filter: drop-shadow(0px -2px 2px rgba(0,0,0,0.1));
}

@keyframes my-ma-arrowPulse {
    0% { transform: rotate(25deg) scale(1); }
    50% { transform: rotate(25deg) scale(1.2); }
    100% { transform: rotate(25deg) scale(1); }
}

.my-ma-action-btn {
    background-color: var(--tg-theme-button-color, #007aff);
    color: var(--tg-theme-button-text-color, #ffffff);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.2s ease-out;
}
.my-ma-action-btn:hover,
.my-ma-action-btn:focus {
    opacity: 0.85;
    outline: none;
}
body #my-ma-instructionModal .my-ma-modal-content p {
    color: #FFFFFF !important;
}