html, body {
    overscroll-behavior-y: contain;
}

.Toastify__toast--success {
    background-color: #E6FFE6 !important;
    color: #555 !important;
}
.Toastify__toast--error {
    background-color: #FEE9E6 !important;
    color: #555 !important;
}
.Toastify__toast--info {
    background-color: #E6E6FF !important;
    color: #555 !important;
}
.Toastify__toast--warning {
    background-color: #FFF6E6 !important;
    color: #555 !important;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.chat-container[data-v-dc91fe72] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 500px;
    max-height: 500px;
    background-image: url('/static/background_chat-BiarGLHV.png');
    background-size: cover;        /* Изображение покрывает весь блок */
    background-position: center;   /* Центрируем изображение */
    background-repeat: no-repeat;  /* Не повторяем */
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border: 1px solid #d4d6d8;
    margin-bottom: 12px;
}
.bg-container[data-v-dc91fe72] {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255, 0.8); /* черный с прозрачностью 50% */
  z-index: 0;
}
.chat-container-mobile[data-v-dc91fe72] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100%;
    background-image: url(/static/background_chat-BiarGLHV.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    font-family: sans-serif;
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
}

/* Область сообщений — фиксированная высота и прокрутка */
.chat-box[data-v-dc91fe72] {
    height: calc(100vh - 89px); /* ⛳ Высота окна чата */
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*background: #0e1116;*/
    /*border-bottom: 1px solid #1e232b;*/
    z-index: 10;
    /* Стилизация скролла */
    scrollbar-width: thin;
    scrollbar-color: #2a303c #0e1116;
}
.chat-box[data-v-dc91fe72]::-webkit-scrollbar {
    width: 6px;
}
.chat-box[data-v-dc91fe72]::-webkit-scrollbar-track {
    background: #0e1116;
}
.chat-box[data-v-dc91fe72]::-webkit-scrollbar-thumb {
    background-color: #2a303c;
    border-radius: 3px;
}

/* Пузырьки сообщений */
.message-bubble[data-v-dc91fe72] {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    word-wrap: break-word;
    font-size: 14px;
}
.message-bubble .message-text[data-v-dc91fe72] {
    display: block;
    margin-bottom: 2px;
}
.message-bubble .message-time[data-v-dc91fe72] {
    font-size: 11px;
    opacity: 0.7;
    float: right;
}

/* Мои сообщения — справа, зелёный пузырёк */
.my-message[data-v-dc91fe72] {
    align-self: flex-end;
    background-color: #1f9e45;
    color: white;
    border-bottom-right-radius: 4px;
}
.my-message .message-time[data-v-dc91fe72] {
    color: rgba(255, 255, 255, 0.6);
}

/* Чужие сообщения — слева, серый пузырёк */
.peer-message[data-v-dc91fe72] {
    align-self: flex-start;
    background-color: steelblue;
    color: #e6edf3;
    border-bottom-left-radius: 4px;
}
.peer-message .message-time[data-v-dc91fe72] {
    color: #ebebeb;
}

/* Системные — по центру, во всю ширину */
.system-message[data-v-dc91fe72] {
    align-self: center;
    background: #2a303c;
    color: #cbd5e1;
    font-size: 13px;
    font-style: italic;
    max-width: 90%;
    text-align: center;
    padding: 10px 14px;
    opacity: 0.8;
    cursor: pointer;
}
.system-message[data-v-dc91fe72]::before {
    content: "💬 ";
}

/* Ошибки — красные, с иконкой */
.error-message[data-v-dc91fe72] {
    align-self: center;
    background: #3a1818;
    color: #fca5a5;
    max-width: 90%;
    text-align: center;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid #7f1d1d;
}
.error-message[data-v-dc91fe72]::before {
    content: "⚠️ ";
    margin-right: 4px;
}

/* Поле ввода */
.input-row[data-v-dc91fe72] {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #ebebeb;
    border-top: 1px solid #c2c2c2;
    z-index: 5;
}
.text-input[data-v-dc91fe72] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #c2c2c2;
    background: #ffffff;
    color: #2a303c;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
}
.text-input[data-v-dc91fe72]:focus {
    border-color: #3b82f6;
}
.send-btn[data-v-dc91fe72] {
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #244d2e;
    background: #193022;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100px;
}
.send-btn[data-v-dc91fe72]:hover:not(:disabled) {
    background: #22402d;
    transform: translateY(-1px);
}
.send-btn[data-v-dc91fe72]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.indicator[data-v-9da8761d] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #333;
	min-width: 30%;
}
.icon[data-v-9da8761d] { display: inline-flex;
}
.label[data-v-9da8761d] { font-weight: 600;
}
.hint[data-v-9da8761d] { color: #6b7280; font-size: 12px;
}
.dot[data-v-9da8761d] { width: 16px; height: 16px; border-radius: 50%; background: gray; margin-left: 4px;
}
.dot--ok[data-v-9da8761d] { background: #2ecc71;
}
.dot--fail[data-v-9da8761d] { background: #e74c3c;
}
.dot--na[data-v-9da8761d] { background: #9ca3af;
}

/* ваши базовые стили */
.control-section-permissions[data-v-3305e370] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 10px 0 0;
}

/* Phantom – Capabilities & limits block */
.ph-capabilities[data-v-dccf204a] { width:100%; padding:20px 16px 24px;
}
.ph-capabilities .ph-wrap[data-v-dccf204a] {
	/* было: display:grid; grid-template-columns:1fr; gap:16px; */
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start; /* ✅ добавьте это */
}
@media (min-width: 800px){
.ph-capabilities .ph-wrap[data-v-dccf204a] {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: start; /* ✅ и здесь тоже, чтобы на десктопе не тянуло вторую карточку */
}
}
.ph-capabilities .ph-card[data-v-dccf204a]{
	background:#fff; border:1px solid #e5e7eb; border-radius:14px;
	padding:18px; box-shadow:0 4px 16px rgba(2,59,133,0.08);
	width: 100%;               /* ✅ добавьте */
}
.ph-capabilities h4[data-v-dccf204a]{
	margin: 0;
    font-size: 18px;
    color: rgba(2,59,133,0.9);
	cursor: pointer;
	user-select: none;
}
.ph-capabilities h3[data-v-dccf204a]{
	margin:0 0 10px; font-size:18px; color:#8b5cf6;
}
.ph-capabilities .ph-sub[data-v-dccf204a]{
	font-weight:400; color:#64748b; font-size:14px;
}
.ph-capabilities .ph-list[data-v-dccf204a]{ margin:10px 0 0 0; padding:0; list-style:none; display:grid; gap:10px;
}
.ph-capabilities .ph-list li[data-v-dccf204a]{
	position:relative; padding-left:26px; line-height:1.5; color:#0f172a;
}
.ph-capabilities .ph-list li[data-v-dccf204a]::before{
	content:"✔"; color:rgba(2,59,133,0.78);
	position:absolute; left:0; top:0; line-height:1;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
.ph-capabilities .ph-card[data-v-dccf204a]{ background:#2b2d31; border-color:#1f2937;
}
.ph-capabilities h4[data-v-dccf204a]{ color:#7ab0ff;
}
.ph-capabilities .ph-list li[data-v-dccf204a]{ color:#e5e7eb;
}
}
.ph-capabilities[data-v-dccf204a] { padding: 20px 12px 24px; box-sizing: border-box;
}
.ph-capabilities[data-v-dccf204a] * { box-sizing: inherit;
}
@media (max-width: 640px){
.ph-capabilities .ph-wrap[data-v-dccf204a]{ gap:12px;
}
.ph-capabilities .ph-card[data-v-dccf204a]{ padding:14px; border-radius:12px;
}
}
@media (max-width: 480px){
.ph-capabilities[data-v-dccf204a]{ padding-inline: 8px;
}
.ph-capabilities .ph-card[data-v-dccf204a]{
		/* было:
		   max-width: 96%;
		   margin-inline: auto;
		*/
		max-width: none;         /* ✅ убираем ограничение */
		margin-inline: 0;        /* ✅ убираем автоцентрирование, ширина = 100% */
}
}
@supports (overflow-x: clip){
.ph-capabilities[data-v-dccf204a]{ overflow-x: clip;
}
}
.wrap-header[data-v-dccf204a] {
    display: flex;
    justify-content: space-between;
}
.wrap-header h4[data-v-dccf204a] {
    font-size: 16px;
}
.arrow[data-v-dccf204a] {
    cursor: pointer;
}
.arrow path[data-v-dccf204a] {
    pointer-events: none;
}
.rotate-arrow[data-v-dccf204a] {
    transform: rotate(180deg)
}



.modal-button[data-v-e01d4761] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px; /* Скругление углов (можно убрать: 0) */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    background-color: #1F2937;
    transition:
        background-color 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.2s ease;
}
.modal-button[data-v-e01d4761]:hover {
    background-color: #334155; /* Фон кнопки */
}
.modal-button[data-v-e01d4761]:active {
    background-color: #1F2937; /* Фон кнопки */
}
.modal-button[data-v-e01d4761]:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.modal-button[data-v-e01d4761]:active:not(:disabled) {
    transform: scale(0.95);
}

/* Стили для <dialog> */
.modal[data-v-e01d4761] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    padding: 0;
    width: 90%;
    max-width: 500px;
    margin: auto;
}

/* Фон затемнения (по умолчанию у <dialog> есть backdrop) */
[data-v-e01d4761]::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
.modal-content[data-v-e01d4761] {
    padding: 14px;
    background: white;
    border-radius: 12px;
    width: calc(100% - 28px);
}
.modal-content h2[data-v-e01d4761] {
    margin: 0 0 16px 0;
    color: #666;
    font-family: sans-serif;
}
.modal-footer[data-v-e01d4761] {
    margin-top: 20px;
    text-align: right;
}
.modal-save-btn[data-v-e01d4761] {
    padding: 6px 12px;
    background-color: #64748b;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: sans-serif;
    height: 34px;
    margin-top: 8px;
}
.modal-close-btn[data-v-e01d4761] {
    padding: 6px 12px;
    background-color: salmon;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.modal-close-btn[data-v-e01d4761]:hover {
    background-color: #C75A4A;
}
.modal-close-btn[data-v-e01d4761]:active {
    background-color: #A94438;
}
.friends-header[data-v-e01d4761] {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.add-contact-input[data-v-e01d4761] {
    width: calc(100% - 24px);
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    margin: 0 0 10px 0;
    font-family: sans-serif;
}

.tabs[data-v-99ee2368] {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
    margin-top: 10px;
}
.tab[data-v-99ee2368] {
    padding: 10px 20px;
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    outline: none;
    font-family: sans-serif;
}
.tab[data-v-99ee2368]:hover {
    color: steelblue;
}
.tab--active[data-v-99ee2368] {
    color: steelblue;
    font-weight: 600;
}
.tab--active[data-v-99ee2368]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #007bff;
}
.tab-content[data-v-99ee2368] {
    display: none;
}
.tab-content--active[data-v-99ee2368] {
    display: block;
    animation: fadeIn-99ee2368 0.2s ease-in;
}
@keyframes fadeIn-99ee2368 {
from { opacity: 0;
}
to { opacity: 1;
}
}

.wrapper-mobile[data-v-22a23824] {
    position: relative;
    width: 100%;
    height: calc(100% - 256px);
    overflow-y: auto;
    overflow-x: hidden;
}
.wrapper-desktop[data-v-22a23824] {
    position: relative;
    width: 100%;
    height: calc(100% - 456px);
    overflow-y: auto;
    overflow-x: hidden;
}
.friends-list-desktop[data-v-22a23824] {
    position: relative;
    height: calc(100% - 34px);
    padding: 10px;
    border: 1px solid steelblue;
    border-radius: 8px;
    margin-top: 12px;
    overflow: auto;
}
.friends-list-mobile[data-v-22a23824] {
    position: relative;
    height: calc(100% - 34px);
    padding: 0 8px;
    border: 1px solid steelblue;
    border-radius: 8px;
    margin-top: 18px;
    overflow: auto;
}
.span-address-book[data-v-22a23824] {
    position: absolute;
    top: 2px;
    left: 16px;
    background: #ffffff;
    padding: 2px 10px;
    border: 1px solid steelblue;
    border-radius: 8px;
    color: steelblue;
    font-size: 12px;
    z-index: 1;
}
.span-address-book-m[data-v-22a23824] {
    position: absolute;
    top: 8px;
    left: 16px;
    background: #ffffff;
    padding: 2px 10px;
    border: 1px solid steelblue;
    border-radius: 8px;
    color: steelblue;
    font-size: 12px;
    z-index: 1;
}
.span-count[data-v-22a23824] {
    position: absolute;
    top: 2px;
    right: 16px;
    background: #ffffff;
    padding: 2px 10px;
    border: 1px solid steelblue;
    border-radius: 8px;
    color: steelblue;
    font-size: 12px;
    z-index: 1;
}
.span-count-m[data-v-22a23824] {
    position: absolute;
    top: 8px;
    right: 16px;
    background: #ffffff;
    padding: 2px 10px;
    border: 1px solid steelblue;
    border-radius: 8px;
    color: steelblue;
    font-size: 12px;
    z-index: 1;
}
.empty-state[data-v-22a23824] {
    text-align: center;
    color: #64748b;
    padding: 24px;
}
.contacts-list[data-v-22a23824] {
    list-style: none;
    margin: 0;
    padding: 10px 0 0 0;
}
.contact-item[data-v-22a23824] {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    transition: background-color 0.2s;
    position: relative;
}
.contact-item[data-v-22a23824]:hover {
    background-color: #f1f5f9;
}
.contact-avatar[data-v-22a23824] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e8f0;
    flex-shrink: 0;
    margin-right: 12px;
}
.avatar-placeholder[data-v-22a23824] {
    font-weight: 600;
    color: #475569;
}
.contact-info[data-v-22a23824] {
    flex: 1;
    min-width: 0;
}
.contact-name[data-v-22a23824] {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call-button[data-v-22a23824],
.call-button-cancel[data-v-22a23824],
.remove-button[data-v-22a23824] {
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 8px;
}
.edit-button[data-v-22a23824] {
    background: none;
    color: steelblue;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 8px;
}
.edit-button svg[data-v-22a23824] {
    pointer-events: none;
}
.edit-button path[data-v-22a23824] {
    pointer-events: none;
}
.remove-button[data-v-22a23824] {
    background-color: #dc2626;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/*.edit-button {*/
/*    background-color: #dc2626;*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 0;*/
/*}*/
.call-button-cancel[data-v-22a23824] {
	background-color: #dc2626;
}
.call-button[data-v-22a23824]:hover {
    background-color: #1d4ed8;
}
.remove-button[data-v-22a23824]:hover,
.call-button-cancel[data-v-22a23824]:hover{
    background-color: #b91c1c;
}
.contact-name-input[data-v-22a23824] {
	font-weight: 600;
	color: #1e293b;
	background: transparent;
	border: none;
	border-radius: 4px;
	padding: 2px 6px;
	width: 100%;
	outline: none;
	font-size: inherit;
	min-width: 0;
	max-width: 70%;
}


/* --- Feedback Modal --- */
.btn-link-mobile[data-v-bee43008] {
    display: block;
    font-size: 18px;
    color: #1e293b;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.2s;
    background: inherit;
    border: none;
}
.btn-link-desktop[data-v-bee43008] {
    padding: 6px 12px;
    font-size: 14px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.modal-overlay[data-v-bee43008] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.modal-content[data-v-bee43008] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: modalFadeIn 0.2s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-content h3[data-v-bee43008] {
    margin-top: 0;
    color: #1e293b;
    font-size: 1.25rem;
}
.feedback-success[data-v-bee43008] {
    text-align: center;
    padding: 24px;
    font-size: 16px;
    color: #059669;
    line-height: 1.5;
}
.form-group[data-v-bee43008] {
    margin-bottom: 16px;
}
.form-group label[data-v-bee43008] {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #334155;
}
.form-group input[data-v-bee43008],
.form-group textarea[data-v-bee43008] {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    transition: border 0.2s;
    box-sizing: border-box;
}
.form-group input[data-v-bee43008]:focus,
.form-group textarea[data-v-bee43008]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.form-group input.error[data-v-bee43008],
.form-group textarea.error[data-v-bee43008] {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.error-message[data-v-bee43008] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    display: block;
}
.form-error[data-v-bee43008] {
    text-align: center;
    padding: 8px;
    background: #fee;
    border-radius: 6px;
    margin-bottom: 12px;
}
.form-actions[data-v-bee43008] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}
.form-actions button[data-v-bee43008] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.form-actions button[data-v-bee43008]:first-child {
    background: #e2e8f0;
    color: #1e293b;
}
.form-actions button[data-v-bee43008]:first-child:hover {
    background: #cbd5e1;
}
.form-actions button[data-v-bee43008]:last-child {
    background: #3b82f6;
    color: white;
}
.form-actions button[data-v-bee43008]:last-child:hover:not(:disabled) {
    background: #2563eb;
}
.form-actions button[data-v-bee43008]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.custom-checkbox[data-v-989608be] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid steelblue;
    border-radius: 8px;
    width: calc(117px - 16px);
}
.custom-checkbox input[data-v-989608be] {
    display: none;
}
.custom-checkbox input:checked + .checkmark[data-v-989608be] {
    background: steelblue;
    border-color: steelblue;
}
.custom-checkbox input:checked + .checkmark[data-v-989608be]::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}
.custom-checkbox-mobile[data-v-989608be] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 12px 0 0 0;
}
.custom-checkbox-mobile input[data-v-989608be] {
    display: none;
}
.custom-checkbox-mobile input:checked + .checkmark[data-v-989608be] {
    background: steelblue;
    border-color: steelblue;
}
.custom-checkbox-mobile input:checked + .checkmark[data-v-989608be]::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}
.checkmark[data-v-989608be] {
    width: 16px;
    height: 16px;
    border: 2px solid steelblue;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.label-text[data-v-989608be] {
    font-size: 14px;
    color: steelblue;
    font-weight: 500;
}

/* Кнопка бургера */
.burger-button[data-v-8e7a1c3b] {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    top: 14px;
    left: 14px;
}
.burger-line[data-v-8e7a1c3b] {
    display: block;
    width: 100%;
    height: 3px;
    background-color: steelblue;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Анимация при открытии */
.burger-button--active .burger-line[data-v-8e7a1c3b]:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.burger-button--active .burger-line[data-v-8e7a1c3b]:nth-child(2) {
    opacity: 0;
}
.burger-button--active .burger-line[data-v-8e7a1c3b]:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Оверлей */
.menu-overlay[data-v-8e7a1c3b] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Боковое меню */
.side-menu[data-v-8e7a1c3b] {
    position: fixed;
    top: 0;
    left: -320px;
    width: 280px;
    max-width: 85vw;
    height: calc(100% - 40px);
    background: #ffffff;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1002;
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.side-menu--open[data-v-8e7a1c3b] {
    left: 0; /* выезжает на экран */
}
.menu-footer[data-v-8e7a1c3b] {
    display: flex;
    flex-direction: column;
}
.input-wrap[data-v-8e7a1c3b] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.menu-footer-input[data-v-8e7a1c3b] {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-family: sans-serif;
}
.btn-secondary[data-v-8e7a1c3b] {
    margin-top: 8px;
    background: steelblue;
    border: 1px solid steelblue;
}
.btn-secondary-save[data-v-8e7a1c3b] {
    background: #10b981;
    border: 1px solid #10b981;
    padding: 8px 10px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 8px;
}
.btn-support-dialog[data-v-8e7a1c3b] {
    padding: 6px 12px;
    font-size: 14px;
    background: linear-gradient(45deg, #ec4899, #8b5cf6);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
    margin-top: 14px;
}
.btn-cancel[data-v-8e7a1c3b]{
    padding:8px 14px;
    border:1px solid #b92410;
    background: #b92410;
    color:white;
    border-radius:8px;
    cursor:pointer;
    z-index: 5;
    margin-top: 20px;
}

/* Кнопка закрытия */
.close-button[data-v-8e7a1c3b] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

/* Навигация */
.menu-nav[data-v-8e7a1c3b] {
    margin-top: -6px;
}
.menu-nav-header[data-v-8e7a1c3b] {
    color: steelblue;
    margin: 0;
    padding: 0 20px 0 0;
}
.menu-list[data-v-8e7a1c3b] {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 0;
}
.menu-list li[data-v-8e7a1c3b] {
    /*margin-bottom: 16px;*/
}
.menu-list a[data-v-8e7a1c3b] {
    display: block;
    font-size: 18px;
    color: #1e293b;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.2s;
}
.menu-list a[data-v-8e7a1c3b]:hover {
    color: steelblue;
}
.special-token-valid[data-v-8e7a1c3b] {
    border:1px solid #10b981;
}
.special-token-invalid[data-v-8e7a1c3b] {
    border:1px solid steelblue;
}

/* --- Feedback Modal --- */
.wallets-list[data-v-8e7a1c3b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}
.wallet-item[data-v-8e7a1c3b] {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
}
.dark .wallet-item[data-v-8e7a1c3b] {
    background: #1e293b;
    border-color: #334155;
}
.wallet-token[data-v-8e7a1c3b] {
    font-weight: 700;
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 6px;
}
.dark .wallet-token[data-v-8e7a1c3b] {
    color: #e2e8f0;
}
.wallet-networks[data-v-8e7a1c3b] {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.network-tag[data-v-8e7a1c3b] {
    font-size: 11px;
    padding: 2px 6px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 6px;
    font-weight: 600;
}
.dark .network-tag[data-v-8e7a1c3b] {
    background: #31316b;
    color: #a5bffa;
}
.wallet-address-row[data-v-8e7a1c3b] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.wallet-address[data-v-8e7a1c3b] {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    padding: 6px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 75%;
    color: #c2c2c2;
}
.dark .wallet-address[data-v-8e7a1c3b] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
.btn-copy[data-v-8e7a1c3b] {
    padding: 6px 10px;
    font-size: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-copy[data-v-8e7a1c3b]:hover {
    background: #2563eb;
}
.btn-copy[data-v-8e7a1c3b]:active {
    transform: scale(0.95);
}

/* Темная тема (опционально) */
@media (prefers-color-scheme: dark) {
    /*.side-menu {*/
    /*    background: #111827;*/
    /*    color: #f1f5f9;*/
    /*}*/
    /*.menu-list a {*/
    /*    color: #e2e8f0;*/
    /*}*/
    /*.menu-list a:hover {*/
    /*    color: #60a5fa;*/
    /*}*/
    /*.burger-line {*/
    /*    background-color: #f1f5f9;*/
    /*}*/
    /*.close-button {*/
    /*    color: #f1f5f9;*/
    /*}*/
}



.help-section[data-v-da6f171f] {
    padding: 16px 16px;
    margin: 0 auto 24px;
    max-width: 728px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(2,59,133,0.08);
    overflow: hidden;
}
.help-tabs[data-v-da6f171f] {
    display: flex;
    margin-bottom: 0;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid steelblue;
    padding: 8px 14px 0 10px;
}
.tabs[data-v-da6f171f] {
    font-family: sans-serif;
    padding-left: 40px;
}
.tab-button[data-v-da6f171f] {
    padding: 8px 16px;
    background: inherit;
    border: none;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: steelblue;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-button.active[data-v-da6f171f] {
    position: relative;
    background: inherit;
    color: steelblue;
    border-bottom: none;
    border-top: 1px solid steelblue;
    border-inline: 1px solid steelblue;
    box-shadow: 0 -2px 0 #fff inset;
    top: 1px;
}
.help-pane[data-v-da6f171f] {
    padding: 0 14px 14px;
    overflow: auto;
    font-family: sans-serif;
    height: calc(100vh - 74px);
    animation: fadeSlideIn 0.2s ease-out;
}
.btn-close[data-v-da6f171f] {
    color: red;
    text-decoration: none;
    font-weight: 800;
    padding-bottom: 4px;
}

.draggable-modal {
    position: absolute;
    border: 1px solid #ccc;
    user-select: none;
    font-size: 14px;
    overflow: hidden;
    z-index: 1000;
    min-width: 280px;
    background: #282c34e6;
    border-radius: 18px;
    box-shadow: 0 8px 32px #0005;
    padding: 0.7em 1.2em;
    color: #fff;
    transition: box-shadow 0.2s;
    font-family: sans-serif;
}
.draggable-modal-m {
    position: absolute;
    width: calc(100% - 40px);
    border: 1px solid #ccc;
    user-select: none;
    font-size: 14px;
    overflow: hidden;
    z-index: 1000;
    min-width: 280px;
    background: #282c34e6;
    border-radius: 18px;
    box-shadow: 0 8px 32px #0005;
    padding: 0.7em 1.2em;
    color: #fff;
    transition: box-shadow 0.2s;
    font-family: sans-serif;
    top: 50px;
}
.header {
    flex-direction: column;
    color: white;
    justify-content: flex-start;
    padding: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 240px;
    font-family: sans-serif;
    cursor: default;
}
.avatar {
    width: 86px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 2px auto;
    z-index: 1;
}
.left-right {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.left {
    display: flex;
    flex-direction: column;
    align-items: center;
    left: -15px;
    top: 20px;
    position: relative;
}
.right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
    max-width: 220px;
    padding: 8px 0 0 8px;
}
.wrap-nickname {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
.nickname {
    font-weight: 600;
    font-size: 1.07em;
    max-width: 190px;
    overflow: hidden;
    text-align: center;
}
.login {
    font-weight: 400;
    font-size: 0.80em;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
    color: #ebebeb;
}
.timer {
    font-family: monospace;
    color: #43c35c;
    font-size: 1.06em;
    margin-top: 2px;
    opacity: 0.95;
}
.body {
    display: flex;
    gap: 1em;
    justify-content: center;
    padding-bottom: 10px;
    padding-left: 88px;
}
.callBtn {
    position: relative;
    background: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
}
.accept {
    color: #fff;
    border: 1px solid #43c35c;
}
.accept svg {
    pointer-events: none;
}
.accept path {
    pointer-events: none;
}
.reject {
    color: #fff;
    border: 1px solid #c34343;
}
.reject svg {
    pointer-events: none;
}
.reject path {
    pointer-events: none;
}
.x {
    position: absolute;
    top: 4px;
    right: 12px;
    font-size: 16px;
}
.volume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}
.volume input[type="range"] {
    width: 80px;
    accent-color: #43c35c;
}
.label {
    min-width: 2em;
    text-align: right;
    color: #fff;
    font-size: 0.98em;
}


.modal-overlay[data-v-f91ebf2b] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005;
    font-family: sans-serif;
}
.modal-wrapper[data-v-f91ebf2b] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.modal-header[data-v-f91ebf2b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.modal-title[data-v-f91ebf2b] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.modal-close[data-v-f91ebf2b] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.modal-close[data-v-f91ebf2b]:hover {
    background: #f0f0f0;
    color: #333;
}
.modal-body[data-v-f91ebf2b] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.modal-footer[data-v-f91ebf2b] {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal-footer button[data-v-f91ebf2b] {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-family: sans-serif;
}
.modal-footer button.primary[data-v-f91ebf2b] {
    background: steelblue;
    color: white;
    border-color: steelblue;
}
.modal-footer button .warning[data-v-f91ebf2b] {
    background: #FF0000;
    color: white;
    border-color: #FF0000;
}
.modal-footer button[data-v-f91ebf2b]:hover {
    opacity: 0.9;
}

.loading-overlay[data-v-e1f3af35] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	cursor: wait;
}
.loading-content[data-v-e1f3af35] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: white;
}
.loading-spinner[data-v-e1f3af35] {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #fff;
	border-radius: 50%;
	animation: spin-e1f3af35 1s linear infinite;
	margin-bottom: 24px;
}
@keyframes spin-e1f3af35 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.loading-text[data-v-e1f3af35] {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.4;
	max-width: 80vw;
	word-wrap: break-word;
}

.test {
    position: absolute;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Опционально: убрать прокрутку, если не нужна */
    overflow: hidden;
}

/* Пример: чтобы контент заполнял всё пространство */
body {
    display: flex;
    flex-direction: column;
}
#app {
    height: 100%;
}
.main {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    max-width: 760px;
    margin: 42px auto 0;
    border-top: 1px solid steelblue;
    padding: 0 6px;
    height: calc(100% - 42px);
}
* {
  -webkit-tap-highlight-color: transparent;
}
.tab-label {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cccccc;
    padding: 0;
    border-radius: 2px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}
.tab-label svg {
    flex-shrink: 0;
    vertical-align: middle;
}
.menu-footer-input {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-family: sans-serif;
  border: 1px solid #d1d5db;
}
.btn {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #2563eb;
    background: steelblue;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.btn[disabled]{
    opacity:.5;
    cursor:not-allowed;
}
.btn-modal-cancel {
    padding: 8px 14px;
    border: 1px solid #b92410;
    background: #b92410;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    z-index: 5;
    margin-top: 0;
}
.btn-modal-secondary{
    padding: 8px 14px;
    border: 1px solid steelblue;
    background: steelblue;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}
.btn-secondary{
    padding:8px 14px;
    border:1px solid #10b981;
    background:#10b981;
    color:white;
    border-radius:8px;
    cursor:pointer;
}
.btn-cancel {
    padding:8px 14px;
    border:1px solid #b92410;
    background: #b92410;
    color:white;
    border-radius:8px;
    cursor:pointer;
    z-index: 5;
    margin-top: 20px;
}
.btn-cancel-fire{
    z-index: 1000;
    position: absolute;
    border: none;
    background: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    bottom: max(70px, env(safe-area-inset-top) + 60px);
    right: max(12px, env(safe-area-inset-right));
    top: auto;
    left: auto;
}
.btn-cancel-fire-desktop {
    border: none;
    background: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-clear {
    padding:8px 14px;
    border:1px solid #910302;
    background: white;
    color: #910302;
    border-radius:8px;
    cursor:pointer;
}
.btn-secondary[disabled]{
    opacity:.5;
    cursor:not-allowed;
}
.app_status_norm {
    color: #647583;
}
.app_status_norm_mobile {
    color: #647583;
    width: 100%;
    height: 70px;
    min-height: 70px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
}
.app_status_error {
    color: #910302;
}
.countdown_danger {
    color: #ed100f;
}
.countdown_warn {
    color: #c18803;
}
.countdown_norm {
    color: #04289e;
}
.ws-connected {
    width: 24px;
}
.square-button.regular {
    background-color: #475569; /* Фон кнопки */
}
.square-button.regular:hover {
    background-color: #334155; /* Фон кнопки */
}
.square-button.regular:active {
    background-color: #1F2937; /* Фон кнопки */
}
.square-button.cancel {
    background-color: #DC2626; /* Фон кнопки */
}
.square-button.cancel:hover {
    background-color: #B91C1C; /* Фон кнопки */
}
.square-button.cancel:active {
    background-color: #991B1B; /* Фон кнопки */
}
.square-button.start {
    background-color: #0D9488; /* Фон кнопки */
}
.square-button.start:hover {
    background-color: #0F766E; /* Фон кнопки */
}
.square-button.start:active {
    background-color: #115E59; /* Фон кнопки */
}
.square-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px; /* Скругление углов (можно убрать: 0) */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition:
        background-color 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.2s ease;
}
.square-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none; /* отключаем hover/active эффекты */
}
.square-button:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.square-button:active:not(:disabled) {
    transform: scale(0.95);
}
.button-icon {
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.button-icon-fire {
    width: 46px;
    height: 46px;
    pointer-events: none;
}
.control-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 18px;
    padding-right: 18px;
    box-sizing: border-box;
    z-index: 7;
}
.control-div-video {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 18px;
    padding-right: 18px;
    box-sizing: border-box;
    z-index: 7;
}
.control-div-video.modal-button {
    margin-top: 8px;
}
.wrap-messages-panel {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
	z-index: 7;
}
.close-button {
  position: absolute;
  right: calc(50% - 18px);
  top: -17.5px;
  border: 0;
  background: black;
  z-index: 8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 6px 4px;
}
.close-button.svg {
  pointer-events: none;
}
.close-button.path {
  pointer-events: none;
}
.control-section {
    position: relative;
    padding: 10px 0 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    z-index: 5;
}
.control-section-mobile {
    padding: 16px 16px 0 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    top: 0;
    z-index: 20;
}
.control-section-mobile-video {
    padding: 0 16px 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    z-index: 10;
}
.control-section-top {
    margin-top: 16px;
    margin-bottom: 12px;
    padding-left: 32px;   /* Отступ слева */
    padding-right: 32px;  /* Отступ справа */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 0 16px;
    margin-top: 24px;
}
.file-item {
    display: flex;
    flex-direction: column;
}
.file-download-btn {
    width: 100%;
    padding: 12px;
    background-color: #f0f4f8;
    border: 1px solid #d0d8e0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background-color 0.2s ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.file-download-btn:hover {
    background-color: #e0e8f0;
}
.file-size {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
}
.progress-circle {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-svg {
    width: 24px;
    height: 24px;
    transform: rotate(90deg);
}
.progress-text {
    position: absolute;
    font-size: 8px;
    font-weight: bold;
    color: #007bff;
}
.local_video_hidden {
    display: none;
}
.remote_video_hidden {
    display: none;
}
.video-section {
    position: relative;
    width: 100%;        /* ширина секции */
    /*max-width: 500px;   !* например, ограничим *!*/
    margin: 16px auto 0;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    background-image: url('/static/phone-bg-1-min-Cd1iiO6L.png');
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.video-section-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 100;
  background-image: url('/static/phone-bg-1-min-Cd1iiO6L.png');
  background-size: cover;        /* Изображение покрывает весь блок */
  background-position: center;   /* Центрируем изображение */
  background-repeat: no-repeat;  /* Не повторяем */
}
.remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* кадрирование */
}
.local-video {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 25%;          /* в 3 раза меньше */
    aspect-ratio: 1 / 1;  /* тоже портрет */
    object-fit: cover;
    border: 2px solid white;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.local-video[data-facing="user"],
:root[data-facing="user"] .local-video {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}
.local-video-mobile {
  position: absolute;
  width: 25%;          /* в 3 раза меньше */
  aspect-ratio: 9/16;  /* тоже портрет */
  object-fit: cover;
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  touch-action: none;
  z-index: 5;
}
.local-video-mobile[data-facing="user"],
:root[data-facing="user"] .local-video-mobile {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}
.session-timer{
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    left:   max(10px, env(safe-area-inset-left));
    top: auto;                /* переопределяем, если было */
    right: auto;              /* переопределяем, если было */
    z-index: 6;

    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: .3px;
    line-height: 1;
    user-select: none;
}
.session-timer-mobile {
  position: absolute;
  top: max(18px, env(safe-area-inset-bottom));
  left: max(18px, env(safe-area-inset-left));
  bottom: auto;
  right: auto;
  z-index: 10;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .3px;
  line-height: 1;
  user-select: none;
}

/* когда осталось <= 60 секунд — подсветим */
.session-timer.is-low{
    background: rgba(218, 45, 67, .75);
}

/* когда 00:00 — можно сделать серым (если решишь показывать 0) */
.session-timer.is-zero{
    background: rgba(0,0,0,.35);
    opacity: .9;
    animation: none !important;
}
.section-wrap {
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    align-items:center;
    width:100%;
    height: 156px;
}
.app-wrap {
    position: relative;
    width: calc(100% - 12px);
    display: flex;
    align-items: center;
    padding: 0 6px;
}
.input-code {
    flex: 1;
    padding: 8px;
    border: 1px solid steelblue;
    border-radius: 8px;
    background: #fff;
}
.wrap-buttons {
    position: relative;
    width: calc(100% - 12px);
    margin: 12px 0;
    padding: 0 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-around;
}
.wrap-buttons-creating {
    margin: 0;
    padding: 0 0 16px 0;
    text-align: center;
}
@keyframes timer-blink {
0%, 49%   { opacity: 1;
}
50%, 100% { opacity: .35;
}
}

/* < 30 сек: мигаем поверх "is-low" */
.session-timer.is-urgent {
    animation: timer-blink 1s steps(2, end) infinite;
}

/* уважение к настройке пользователя */
@media (prefers-reduced-motion: reduce) {
.session-timer.is-urgent { animation: none;
}
}
.help-section {
    padding: 16px 16px;
    margin: 0 auto 24px;
    max-width: 728px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(2,59,133,0.08);
    overflow: hidden;
}
.btn-help {
    padding: 6px 12px;
    font-size: 14px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-help:hover {
    background: #2563eb;
}
.help-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    justify-content: center;
}
.tab-button {
    padding: 8px 16px;
    background: #e2e8f0;
    border: none;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-button.active {
    background: #f8fafc;
    color: #0f172a;
    box-shadow: 0 -2px 0 #0f172a inset;
}
.help-pane {
    animation: fadeSlideIn 0.2s ease-out;
}
@keyframes fadeSlideIn {
from {
        opacity: 0;
        transform: translateY(4px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    /*.tab-button {*/
    /*    background: #334155;*/
    /*    color: #e2e8f0;*/
    /*}*/
    /*.tab-button.active {*/
    /*    background: #1e293b;*/
    /*    color: #fff;*/
    /*    box-shadow: 0 -2px 0 #3b82f6 inset;*/
    /*}*/
    /*.help-content {*/
    /*    background: #1e293b;*/
    /*    border-color: #334155;*/
    /*    color: #e2e8f0;*/
    /*}*/
    /*.help-content h3,*/
    /*.help-content h4 {*/
    /*    color: #f1f5f9;*/
    /*}*/
    /*.help-content .note {*/
    /*    background: #78350f;*/
    /*    color: #fed7aa;*/
    /*    border-left-color: #fbbf24;*/
    /*}*/
}

/* --- Feedback Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1003;
    backdrop-filter: blur(2px);
}
.modal-content {
    background: white;
    border-radius: 14px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: modalFadeIn 0.2s ease-out;
    max-height: 90vh;
    overflow-y: auto;
    font-family: sans-serif;
}

/* --- Wallets List --- */
.wallets-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}
.wallet-item {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
}
.dark .wallet-item {
    background: #1e293b;
    border-color: #334155;
}
.wallet-token {
    font-weight: 700;
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 6px;
}
.dark .wallet-token {
    color: #e2e8f0;
}
.wallet-networks {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.network-tag {
    font-size: 11px;
    padding: 2px 6px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 6px;
    font-weight: 600;
}
.dark .network-tag {
    background: #31316b;
    color: #a5bffa;
}
.wallet-address-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.wallet-address {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    padding: 6px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 75%;
    color: #c2c2c2;
}
.dark .wallet-address {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
.btn-copy {
    padding: 6px 10px;
    font-size: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-copy:hover {
    background: #2563eb;
}
.btn-copy:active {
    transform: scale(0.95);
}
@keyframes modalFadeIn {
from {
        opacity: 0;
        transform: scale(0.9);
}
to {
        opacity: 1;
        transform: scale(1);
}
}
.modal-content h3 {
    margin-top: 0;
    color: #1e293b;
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 480px) {
.modal-content {
        padding: 16px;
        width: 95%;
}
.form-actions {
        flex-direction: column;
}
.form-actions button {
        width: 100%;
}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
.modal-content {
        background: #1e293b;
        color: #e2e8f0;
}
.modal-content h3, .form-group label {
        color: #f1f5f9;
}
.form-group input,
    .form-group textarea {
        background: #334155;
        border-color: #475569;
        color: #f1f5f9;
}
.form-group input:focus,
    .form-group textarea:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
.error-message {
        color: #fca5a5;
}
.feedback-success {
        color: #86efac;
}
.form-actions button:first-child {
        background: #475569;
        color: #e2e8f0;
}
}

/* --- Support Button --- */
.btn-support {
    padding: 8px 12px;
    font-size: 14px;
    background: linear-gradient(45deg, #ec4899, #8b5cf6);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
}
.btn-diamond {
    position: fixed;
    background: inherit;
    color: steelblue;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    top: 6px;
    left: 0;
    margin: auto calc(50% - 31px);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}
.btn-support:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}
.btn-support:active {
    transform: translateY(0);
}
.connection-indicator-desktop {
	position: absolute;
    bottom: max(76px, env(safe-area-inset-top) + 60px);
    left: max(18px, env(safe-area-inset-right));
    top: auto;
    right: auto;
	z-index: 1000;
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Mobile индикатор - фиксированная позиция */
.connection-indicator-mobile-fixed {
    position: absolute;
    bottom: max(76px, env(safe-area-inset-top) + 60px);
    left: max(18px, env(safe-area-inset-right));
    top: auto;
    right: auto;
    z-index: 1000;
    padding: 4px 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    height: 32px;
    width: 24px;
    justify-content: center;
}

/* Убедитесь что спиннер видимый */
.connecting-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top: 2px solid #fff !important;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	flex-shrink: 0;
}
.quality-dots {
	display: flex;
	gap: 2px;
	align-items: flex-end;
	flex-shrink: 0;
}
.quality-dots .dot {
	width: 5px;
	height: 5px;
	border-radius: 4px;
	background: rgba(255,255,255,0.4);
	transition: background 0.3s ease;
	flex-shrink: 0;
}

/* Для мобильных устройств - меньше точки */
.connection-indicator-mobile-fixed .quality-dots .dot {
	width: 4px;
	height: 4px;
}
.connection-indicator-mobile-fixed .connecting-spinner {
	width: 14px;
	height: 14px;
}
@keyframes spin {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* Quality states */
.quality-excellent .dot {
	background: #10b981;
}
.quality-good .dot:nth-child(1),
.quality-good .dot:nth-child(2) {
	background: #f59e0b;
}
.quality-poor .dot:nth-child(1) {
	background: #ef4444;
}
.quality-unknown .dot {
	background: rgba(255,255,255,0.4);
}
:root{--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:#3498db;--toastify-color-success:#07bc0c;--toastify-color-warning:#f1c40f;--toastify-color-error:#e74c3c;--toastify-color-transparent:#ffffffb3;--toastify-icon-color-info:var(--toastify-color-info);--toastify-icon-color-success:var(--toastify-color-success);--toastify-icon-color-warning:var(--toastify-color-warning);--toastify-icon-color-error:var(--toastify-color-error);--toastify-toast-width:320px;--toastify-toast-background:#fff;--toastify-toast-min-height:64px;--toastify-toast-max-height:800px;--toastify-font-family:sans-serif;--toastify-z-index:9999;--toastify-text-color-light:#757575;--toastify-text-color-dark:#fff;--toastify-text-color-info:#fff;--toastify-text-color-success:#fff;--toastify-text-color-warning:#fff;--toastify-text-color-error:#fff;--toastify-spinner-color:#616161;--toastify-spinner-color-empty-area:#e0e0e0;--toastify-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);--toastify-color-progress-dark:#bb86fc;--toastify-color-progress-info:var(--toastify-color-info);--toastify-color-progress-success:var(--toastify-color-success);--toastify-color-progress-warning:var(--toastify-color-warning);--toastify-color-progress-error:var(--toastify-color-error);--toastify-color-progress-colored:#ddd}.Toastify__toast-container{box-sizing:border-box;color:#fff;padding:4px;position:fixed;transform:translate3d(0,0,var(--toastify-z-index) px);width:var(--toastify-toast-width);z-index:var(--toastify-z-index)}.Toastify__toast-container--top-left{left:1em;top:1em}.Toastify__toast-container--top-center{left:50%;top:1em;transform:translateX(-50%)}.Toastify__toast-container--top-right{right:1em;top:1em}.Toastify__toast-container--bottom-left{bottom:1em;left:1em}.Toastify__toast-container--bottom-center{bottom:1em;left:50%;transform:translateX(-50%)}.Toastify__toast-container--bottom-right{bottom:1em;right:1em}@media only screen and (max-width:480px){.Toastify__toast-container{left:0;margin:0;padding:0;width:100vw}.Toastify__toast-container--top-center,.Toastify__toast-container--top-left,.Toastify__toast-container--top-right{top:0;transform:translateX(0)}.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-right{bottom:0;transform:translateX(0)}.Toastify__toast-container--rtl{left:auto;right:0}}.Toastify__toast{border-radius:4px;box-shadow:0 1px 10px 0 #0000001a,0 2px 15px 0 #0000000d;box-sizing:border-box;cursor:pointer;direction:ltr;display:flex;font-family:var(--toastify-font-family);justify-content:space-between;margin-bottom:1rem;max-height:var(--toastify-toast-max-height);min-height:var(--toastify-toast-min-height);overflow:hidden;padding:8px;position:relative;z-index:0}.Toastify__toast--rtl{direction:rtl}.Toastify__toast-body{align-items:center;display:flex;flex:1 1 auto;margin:auto 0;padding:6px;white-space:pre-wrap}.Toastify__toast-body>div:last-child{flex:1}.Toastify__toast-icon{display:flex;flex-shrink:0;margin-inline-end:10px;width:20px}.Toastify--animate{animation-duration:.7s;animation-fill-mode:both}.Toastify--animate-icon{animation-duration:.3s;animation-fill-mode:both}@media only screen and (max-width:480px){.Toastify__toast{border-radius:0;margin-bottom:0}}.Toastify__toast-theme--dark{background:var(--toastify-color-dark);color:var(--toastify-text-color-dark)}.Toastify__toast-theme--colored.Toastify__toast--default,.Toastify__toast-theme--light{background:var(--toastify-color-light);color:var(--toastify-text-color-light)}.Toastify__toast-theme--colored.Toastify__toast--info{background:var(--toastify-color-info);color:var(--toastify-text-color-info)}.Toastify__toast-theme--colored.Toastify__toast--success{background:var(--toastify-color-success);color:var(--toastify-text-color-success)}.Toastify__toast-theme--colored.Toastify__toast--warning{background:var(--toastify-color-warning);color:var(--toastify-text-color-warning)}.Toastify__toast-theme--colored.Toastify__toast--error{background:var(--toastify-color-error);color:var(--toastify-text-color-error)}.Toastify__progress-bar-theme--light{background:var(--toastify-color-progress-light)}.Toastify__progress-bar-theme--dark{background:var(--toastify-color-progress-dark)}.Toastify__progress-bar--info{background:var(--toastify-color-progress-info)}.Toastify__progress-bar--success{background:var(--toastify-color-progress-success)}.Toastify__progress-bar--warning{background:var(--toastify-color-progress-warning)}.Toastify__progress-bar--error{background:var(--toastify-color-progress-error)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:var(--toastify-color-progress-colored)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning{background:var(--toastify-color-transparent)}.Toastify__close-button{align-self:flex-start;background:#0000;border:none;color:#fff;cursor:pointer;opacity:.7;outline:none;padding:0;transition:.3s ease}.Toastify__close-button--light{color:#000;opacity:.3}.Toastify__close-button>svg{fill:currentcolor;height:16px;width:14px}.Toastify__close-button:focus,.Toastify__close-button:hover{opacity:1}@keyframes Toastify__trackProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Toastify__progress-bar{bottom:0;height:5px;left:0;opacity:.7;position:absolute;transform-origin:left;width:100%;z-index:var(--toastify-z-index)}.Toastify__progress-bar--animated{animation:Toastify__trackProgress linear 1 forwards}.Toastify__progress-bar--controlled{transition:transform .2s}.Toastify__progress-bar--rtl{left:auto;right:0;transform-origin:right}.Toastify__spinner{animation:Toastify__spin .65s linear infinite;border:2px solid;border-color:var(--toastify-spinner-color-empty-area);border-radius:100%;border-right-color:var(--toastify-spinner-color);box-sizing:border-box;height:20px;width:20px}@keyframes Toastify__bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes Toastify__bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes Toastify__bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes Toastify__bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes Toastify__bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes Toastify__bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Toastify__bounce-enter--bottom-left,.Toastify__bounce-enter--top-left{animation-name:Toastify__bounceInLeft}.Toastify__bounce-enter--bottom-right,.Toastify__bounce-enter--top-right{animation-name:Toastify__bounceInRight}.Toastify__bounce-enter--top-center{animation-name:Toastify__bounceInDown}.Toastify__bounce-enter--bottom-center{animation-name:Toastify__bounceInUp}.Toastify__bounce-exit--bottom-left,.Toastify__bounce-exit--top-left{animation-name:Toastify__bounceOutLeft}.Toastify__bounce-exit--bottom-right,.Toastify__bounce-exit--top-right{animation-name:Toastify__bounceOutRight}.Toastify__bounce-exit--top-center{animation-name:Toastify__bounceOutUp}.Toastify__bounce-exit--bottom-center{animation-name:Toastify__bounceOutDown}@keyframes Toastify__none{0%,60%,75%,90%,to{animation-duration:0;animation-timing-function:none}0%{opacity:1;transform:translateZ(0)}to{transform:translateZ(0)}}.Toastify__none-enter--bottom-center,.Toastify__none-enter--bottom-left,.Toastify__none-enter--bottom-right,.Toastify__none-enter--top-center,.Toastify__none-enter--top-left,.Toastify__none-enter--top-right{animation-name:Toastify__none}@keyframes Toastify__zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes Toastify__zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.Toastify__zoom-enter{animation-name:Toastify__zoomIn}.Toastify__zoom-exit{animation-name:Toastify__zoomOut}@keyframes Toastify__flipIn{0%{animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{opacity:1;transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes Toastify__flipOut{0%{transform:perspective(400px)}30%{opacity:1;transform:perspective(400px) rotateX(-20deg)}to{opacity:0;transform:perspective(400px) rotateX(90deg)}}.Toastify__flip-enter{animation-name:Toastify__flipIn}.Toastify__flip-exit{animation-name:Toastify__flipOut}@keyframes Toastify__slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInDown{0%{transform:translate3d(0,-110%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideOutRight{0%{transform:translateZ(0)}to{transform:translate3d(110%,0,0);visibility:hidden}}@keyframes Toastify__slideOutLeft{0%{transform:translateZ(0)}to{transform:translate3d(-110%,0,0);visibility:hidden}}@keyframes Toastify__slideOutDown{0%{transform:translateZ(0)}to{transform:translate3d(0,500px,0);visibility:hidden}}@keyframes Toastify__slideOutUp{0%{transform:translateZ(0)}to{transform:translate3d(0,-500px,0);visibility:hidden}}.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--top-left{animation-name:Toastify__slideInLeft}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--top-right{animation-name:Toastify__slideInRight}.Toastify__slide-enter--top-center{animation-name:Toastify__slideInDown}.Toastify__slide-enter--bottom-center{animation-name:Toastify__slideInUp}.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--top-left{animation-name:Toastify__slideOutLeft}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--top-right{animation-name:Toastify__slideOutRight}.Toastify__slide-exit--top-center{animation-name:Toastify__slideOutUp}.Toastify__slide-exit--bottom-center{animation-name:Toastify__slideOutDown}@keyframes Toastify__spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}