body {
    background: linear-gradient(to top, rgba(30,33,36,0.1) 0%,rgba(30,33,36,0.75) 100%), url('/resources/img/bg_common.png') center;
}



h1 {
    color: #d3c8ac;
}

div.ssection{
    clear: both;display: block; width: 100%;
}

.sot_section{
    background: linear-gradient(to bottom, rgba(2, 13, 11, 0.8) 0%, rgba(2, 13, 11, 0) 100%), url("/resources/img/bg_sot.png");
}

.sunfox_lead{
    color: #fff;
}

.common_rules {
    margin-top: 0px;
    padding-top: 25px;
    padding-bottom: 20px;
    background-color: #d3c8ac;
    border-radius: 0px;
}

.common_devider {
    padding-bottom: 40px;
    /* background: url("/static/img/vv_devider.png") center 5px no-repeat; /* Картинки с штурвалами - подзамену */
  }

.header_logo{background: (ellipse at center, rgba(36,38,43,1) 0%,rgba(36,38,43,1) 48%,rgba(36,38,43,0) 100%); border-radius: 40px; display: block; width: 80px; height: 80px; margin: left;}

.badge-bg-bot {background-color: #5865f2;}

.chat-history img {width: 48px; height: 48px;}

div[id^="ChatGuild"]{background-color: #d3c8ac!important;background-image: url("https://welcome.sunfox.ee/static/img/sot_header_rtl.png");background-position: right 0px top -2px;background-repeat: no-repeat;}

.short-card {
    width: 208px; /* Точная ширина как на YouTube */
    flex-shrink: 0; /* Запрещаем сжатие карточки */
    cursor: pointer;
    text-decoration: none;
}

.short-thumbnail {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 9 / 16;
    background-color: #202020;
    box-shadow: 0 2px 4px rgba(2, 13, 11, 1);
}

.short-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

/* Стили для заголовка: не более 2 строк, остальное скрывается за троеточием */
.short-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}


/* Small devices (portrait phones less than 577px) */
@media (max-width: 577px) {
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  body{margin-top: 15px;}
  .common_rules{border-radius:10px;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

.dialog-step { margin-bottom: 30px; animation: fadeIn 0.3s ease-in; }
.bot-message { background-color: #7289da; color: white; padding: 15px; border-radius: 10px; font-size: 1.1rem; margin-bottom: 15px; }
.user-options button { display: block; width: 100%; margin-bottom: 8px; text-align: left; transition: all 0.3s ease; }

/* Стили для деактивированных кнопок */
.user-options button:disabled { cursor: not-allowed; }
.btn-selected { background-color: #43b581 !important; color: white !important; border-color: #43b581 !important; opacity: 1 !important; }
.btn-dimmed { opacity: 0.3 !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }