/* =========================================================
   SETTINGS PAGE
========================================================= */

:root {

    --bg: #14151a;
    --panel: #1c1e26;
    --border: #2e313d;

    --text: #eef0f5;
    --muted: #9aa0b0;

    --accent: #ffb000;

}

* {
    box-sizing: border-box;
}

html, body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family: "Segoe UI", Arial, sans-serif;

}

.page {

    display: grid;

    grid-template-columns: 420px minmax(0, 1fr) 420px;

    /* Явные grid-column без grid-template-areas размещаются
       по умолчанию через auto-flow в порядке DOM: как только
       автопоток доходит до элемента с колонкой МЕНЬШЕ уже занятой
       (тут — .preview-wrap, колонка 2, идущего в разметке ПОСЛЕ
       #event-editor-panel/#flow-editor-panel в колонке 3), браузер
       переносит его на новую неявную строку — левая/правая панель
       оказывались в строке 1, а превью съезжало в строку 2 под ними
       ("пустота" была высотой в целую первую строку). Именованные
       области не зависят от DOM-порядка и порядка grid-column. */
    grid-template-areas: "left preview right";

    gap: 24px;

    padding: 24px;

    box-sizing: border-box;

    max-width: none;

    margin: 0;

    flex: 1;

    min-height: 0;

}

/* Таб "Обычный чат" получил доп. узкую колонку слева — список
   подразделов (nav), чтобы длинная лента настроек (~20 секций)
   не грузила экран целиком, а показывала только выбранный раздел.
   Порядок колонок слева направо: nav / preview / settings, чтобы
   превью всегда было на виду независимо от выбранного раздела. */
#tab-chat,
#tab-premium {
    grid-template-columns: 180px minmax(0, 1fr) 420px;
    grid-template-areas: "nav preview left";
}

/* "События" — три панели одновременно (nav, список событий "left",
   редактор конкретного события #event-editor-panel "right"), поэтому
   отдельная 4-колоночная сетка вместо общей с #tab-chat/#tab-premium
   (там второй .panel — grid-area:right не задан, у них только left). */
#tab-events {
    grid-template-columns: 180px minmax(0, 1fr) 420px 420px;
    grid-template-areas: "nav preview left right";
}

/* Активности не редактируют превью-канву (нет траектории/раскадровки,
   как у премиума) — двухколоночный вид: nav + панель управления. */
#tab-activities {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-areas: "nav left";
}

#tab-chat #flow-editor-panel {
    grid-area: left;
}

.section-nav {

    grid-area: nav;

    display: flex;

    flex-direction: column;

    gap: 4px;

    height: 100%;

    overflow-y: auto;

    /* Редакторский вид: дерево разделов визуально отделено от
       центральной колонки превью вертикальной линией-границей. */
    padding-right: 16px;

    border-right: 1px solid var(--border);

}

.section-nav-btn {

    position: relative;

    padding: 10px 14px;

    border: 1px solid transparent;

    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition: background-color 0.15s, color 0.15s, border-color 0.15s;

}

.section-nav-btn:hover {
    border-color: var(--border);
    color: var(--text);
}

.section-nav-btn.active {

    background: var(--panel);
    color: var(--accent);
    border-color: var(--border);

    /* Акцентная полоска слева у выбранного пункта — как активный
       слой/трек в видеоредакторе, а не просто смена цвета текста. */

}

.section-nav-btn.active::before {

    content: "";

    position: absolute;

    left: -16px;

    top: 6px;

    bottom: 6px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: var(--accent);

}

.panel {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 24px;

    height: 100%;

    overflow-y: auto;

}

/* Первая .panel (общие настройки) — левая колонка. Второй .panel
   в разметке — #flow-editor-panel, редактор Flow Builder-правила —
   должен идти третьей (правой) колонкой, а не второй, поэтому
   закрепляем порядок именованными grid-area, а не DOM-порядком. */
.page > .panel:first-of-type {
    grid-area: left;
}

#flow-editor-panel,
#event-editor-panel {
    grid-area: right;
}

/* Раньше [hidden] прятал панель через display:none, из-за чего
   3-я колонка grid'а схлопывалась и превью "съезжало" — теперь
   колонка всегда 420px, а скрытая панель просто невидима внутри
   зарезервированного места (нужно видеть 3 колонки всегда). */
#flow-editor-panel[hidden],
#event-editor-panel[hidden] {
    visibility: hidden;
}


h1 {
    margin-top: 0;
    font-size: 22px;
}

h2 {

    font-size: 14px;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0 0 8px;

}

section {
    margin-bottom: 22px;
}

.grid-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

input[type="text"],
select {

    width: 100%;

    padding: 10px 12px;

    background: #0f1015;

    border: 1px solid var(--border);

    border-radius: 8px;

    color: var(--text);

    font-size: 15px;

}

input[type="range"] {
    width: 100%;
}

.toggle {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    cursor: pointer;

    margin-bottom: 8px;

}

.toggle input {
    width: 18px;
    height: 18px;
}

.theme-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 10px;

}

.theme-card {

    border: 2px solid var(--border);

    border-radius: 8px;

    padding: 10px;

    text-align: center;

    cursor: pointer;

    font-size: 13px;

    background: #12131a;

    transition: border-color 0.15s;

}

.theme-card.active {
    border-color: var(--accent);
}

.event-tier-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.event-tier-tabs .secondary-btn.active {
    border-color: var(--accent);
    color: var(--accent);
}

.event-test-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    gap: 8px;

}

.event-test-grid button {

    border: 2px solid var(--border);

    border-radius: 8px;

    padding: 10px;

    text-align: center;

    cursor: pointer;

    font-size: 13px;

    font-weight: 600;

    background: #12131a;

    color: var(--text);

    transition: border-color 0.15s;

}

.event-test-grid button:hover {
    border-color: var(--accent);
}

.url-box {

    display: flex;

    gap: 8px;

}

.url-box input {
    flex: 1;
}

.url-box button {

    padding: 0 16px;

    border: none;

    border-radius: 8px;

    background: var(--accent);

    color: #111;

    font-weight: 700;

    cursor: pointer;

}

.secondary-btn {

    padding: 6px 14px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 8px;

    background: transparent;

    color: inherit;

    font-weight: 600;

    cursor: pointer;

}

.secondary-btn:hover {
    border-color: var(--accent);
}

.hint {

    color: var(--muted);

    font-size: 13px;

    margin: 8px 0 0;

}

.sticker-allowlist {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin: 10px 0;

}

.sticker-allowlist-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 6px 10px;

    background: #12131a;

    border: 1px solid var(--border);

    border-radius: 8px;

    font-size: 14px;

}

.bot-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin: 10px 0;

}

.bot-card {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 10px;

    background: #12131a;

    border: 1px solid var(--border);

    border-radius: 8px;

}

.bot-line {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}

.bot-line-actions {

    justify-content: flex-end;

}

.bot-line-actions button {

    flex: 0 0 auto;

    padding: 8px 16px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: #1a1c24;

    color: var(--text);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

}

.bot-inline-label {

    color: var(--muted);

    font-size: 13px;

}

.bot-trigger-input {

    width: 140px;

}

.bot-textarea {

    width: 100%;

    min-height: 64px;

    resize: vertical;

    font-family: inherit;

    font-size: 14px;

    padding: 8px 10px;

    background: #0d0e13;

    border: 1px solid var(--border);

    border-radius: 6px;

    color: inherit;

    box-sizing: border-box;

}

.bot-line input[type="number"] {

    width: 90px;

}

.bot-save-btn {

    background: var(--accent);

    border-color: var(--accent);

    color: #000;

    font-weight: 600;

}

.bot-save-btn:disabled {

    opacity: 0.85;

    cursor: default;

}

.bot-save-btn--error {

    background: #b23a3a;

    border-color: #b23a3a;

    color: #fff;

}

.preview-wrap {

    grid-area: preview;

    /* Без min-width:0 grid-айтем не сжимается уже своего контента:
       когда ширина превью (слайдер) превышает свободное место,
       iframe раздувал .preview-wrap за пределы колонки. */
    min-width: 0;
    min-height: 0;
    height: 100%;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}

/* Явная граница между центральной колонкой (превью) и правой
   панелью настроек раздела — только там, где есть 3 колонки
   (nav/preview/left) и правая панель реально существует рядом. */
#tab-chat .preview-wrap,
#tab-events .preview-wrap,
#tab-premium .preview-wrap {
    padding-right: 24px;
    border-right: 1px solid var(--border);
}

/* Даже в одной грид-строке левая/правая .panel обычно выше маленького
   events-виджета (105px) — grid растягивает все колонки по высоте
   самой высокой (height:100% на .preview-wrap), оставляя пустую
   область под рамкой. Тут превью не растягивается, а встаёт по
   высоте своего контента у верха колонки. */
.preview-wrap-events {
    height: auto;
    align-self: start;
}

.preview-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    min-height: 68px;

}

.preview-header .toggle {
    margin-bottom: 8px;
}

.preview-frame-holder {

    flex: 1;

    background:
        repeating-conic-gradient(#20222b 0% 25%, #181920 0% 50%)
        50% / 24px 24px;

    border-radius: 12px;

    border: 1px solid var(--border);

    display: flex;

    /* align-items/justify-content: center вместе с overflow: auto
       считаются "safe"-выравниванием по спецификации CSS Box
       Alignment — как только содержимое (виджет 641x528 и т.п.)
       перестаёт помещаться в рамку, браузер откатывает центрирование
       к верхнему левому углу вместо скролла с сохранением центра.
       margin: auto на самом iframe (ниже) не имеет этой проблемы —
       виджет остаётся по центру, пока помещается, и красиво
       прокручивается, когда не помещается. */
    overflow: auto;

    min-height: 500px;

    padding: 16px;

}

#preview,
#events-preview {

    border: none;

    background: transparent;

    flex-shrink: 0;

    margin: auto;

}

/* Виджет событий узкий по высоте (растёт только под баннеры, см.
   base.css .chat-widget.events-only) — общий .preview-frame-holder
   центрирует контент по вертикали, из-за чего маленький iframe
   "тонет" в большой клетчатой рамке с min-height:500px. Тут превью
   прижимается к верху и рамка не растягивается заведомо большой. */
.preview-frame-holder-events {

    /* flex:1 из общего .preview-frame-holder растягивал рамку на всю
       высоту .preview-wrap (height:100%) — even с align-items:
       flex-start iframe прижимался к верху, а под ним оставалась
       пустая шахматная область до низа страницы. Рамке нужно
       обтягивать сам виджет по высоте, а не тянуться на всю колонку. */
    flex: 0 0 auto;
    align-items: flex-start;
    min-height: 0;

}

.preview-frame-holder-events #events-preview {
    margin: 0 auto;
}

.timeline-panel {

    margin-top: 16px;

    padding: 16px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;

}

.timeline-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;

}

.timeline-panel-header h2 {
    margin: 0;
}

.timeline-track-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 12px 0;

}

.timeline-track {

    position: relative;

    flex: 1;

    height: 36px;

    background: #0f1015;

    border: 1px solid var(--border);

    border-radius: 8px;

    cursor: pointer;

}

.timeline-duration-label {

    color: var(--muted);

    font-size: 13px;

    min-width: 40px;

}

.timeline-keyframe-dot {

    position: absolute;

    top: 50%;

    width: 16px;

    height: 16px;

    margin-left: -8px;

    margin-top: -8px;

    border-radius: 50%;

    background: var(--accent);

    border: 2px solid #12131a;

    cursor: grab;

    z-index: 2;

}

.timeline-keyframe-dot.selected {
    box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.4);
}

.timeline-keyframe-dot:active {
    cursor: grabbing;
}

.timeline-keyframe-remove {

    position: absolute;

    top: -6px;

    right: -6px;

    width: 14px;

    height: 14px;

    line-height: 12px;

    text-align: center;

    font-size: 11px;

    border-radius: 50%;

    background: #b23a3a;

    color: #fff;

    cursor: pointer;

}

.timeline-playhead {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 2px;

    background: #fff;

    opacity: 0.6;

    pointer-events: none;

    z-index: 1;

}

.keyframe-params {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid var(--border);

}

.keyframe-params h2 {
    margin-bottom: 12px;
}

.btn-row {

    display: flex;

    gap: 8px;

    margin-top: 16px;

}

.poll-option-row {

    display: flex;

    gap: 8px;

    margin-bottom: 8px;

}

.poll-option-input {
    flex: 1;
}

.poll-option-remove-btn {

    flex: 0 0 auto;

    width: 32px;

    background: transparent;

    color: var(--muted);

    border: 1px solid var(--border);

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

    line-height: 1;

}

.poll-option-remove-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

.participants-list {

    list-style: none;

    margin: 8px 0 0;

    padding: 0;

    max-height: 220px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.participants-list li {

    padding: 6px 10px;

    background: #12131a;

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 13px;

}

.participants-list .participants-empty {
    color: var(--muted);
    font-style: italic;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.widget-preview-frame {
    position: relative;
    margin-top: 10px;
    height: 220px;
    background: repeating-conic-gradient(#20212b 0% 25%, #191a22 0% 50%) 50% / 20px 20px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.widget-preview-card {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 200px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(20, 20, 28, 0.88);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 12px;
    transform-origin: top right;
    transition: top 0.15s ease, right 0.15s ease, bottom 0.15s ease, left 0.15s ease, transform 0.15s ease;
}

.widget-preview-card .title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.widget-preview-card .sub {
    opacity: 0.85;
    margin-top: 3px;
}

.flow-rule-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 10px 12px;

    margin-bottom: 8px;

    background: #12131a;

    border: 1px solid var(--border);

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

}

.flow-rule-card:hover {
    border-color: var(--accent);
}

.flow-rule-card-title {
    font-weight: 700;
}

.flow-rule-card-desc {

    color: var(--muted);

    font-size: 12px;

}

.flow-rule-card-remove {

    flex-shrink: 0;

    width: 22px;
    height: 22px;

    line-height: 20px;

    text-align: center;

    border-radius: 50%;

    background: #b23a3a;

    color: #fff;

    cursor: pointer;

    font-size: 13px;

}

.flow-condition-row {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

}

.flow-condition-row select,
.flow-condition-row input {
    flex: 1;
}

.flow-condition-remove {

    flex-shrink: 0;

    width: 22px;
    height: 22px;

    line-height: 20px;

    text-align: center;

    border-radius: 50%;

    background: #b23a3a;

    color: #fff;

    cursor: pointer;

    font-size: 13px;

}

.event-setting-card {

    padding: 14px;

    margin-bottom: 10px;

    background: #12131a;

    border: 1px solid var(--border);

    border-radius: 8px;

}

.event-setting-card h3 {

    margin: 0 0 10px;

    font-size: 14px;

}

.event-setting-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

}

.event-setting-row label {

    flex-shrink: 0;

    width: 90px;

    font-size: 13px;

    color: var(--muted);

}

.event-setting-row input[type="color"] {

    width: 44px;
    height: 32px;

    padding: 2px;

    background: #0f1015;

    border: 1px solid var(--border);

    border-radius: 6px;

    cursor: pointer;

}

.event-setting-row input[type="range"] {
    flex: 1;
}

.event-setting-row .event-setting-value {

    width: 44px;

    flex-shrink: 0;

    font-size: 12px;

    color: var(--muted);

    text-align: right;

}

.event-sound-row {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}

.event-sound-name {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    color: var(--muted);

}

.source-connect-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #12131a;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.source-connect-name {
    font-weight: 700;
    font-size: 14px;
    width: 90px;
    flex-shrink: 0;
}

.source-connect-status {
    flex: 1;
    font-size: 12px;
    color: var(--muted);
}

.source-connect-status.connected {
    color: #79f0bf;
}

.source-connect-row a.button,
.source-connect-row button.button {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #111;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.source-connect-row a.button.connected,
.source-connect-row button.button.connected {
    background: #1a2028;
    color: var(--muted);
    border: 1px solid var(--border);
}