/* news.pscalp.ru — в стиле виджета tg_news расширения pscalp (css/main.css: .pscalp-tgnews-*, getTgNewsRowStyle).
   Свой префикс fn-: на *.pscalp.ru расширение вставляет свой main.css, классы pscalp-* задело бы им. */

:root {
    --fn-page: #101b26;
    --fn-bg: #1e2c39;
    --fn-line: #334659;
    --fn-text: #c7d0d9;
    --fn-accent: #94c9fe;
    --fn-muted: #8899a6;
    --fn-dim: #6b7f8e;
    --fn-ui: #b3c7db;
    --fn-input-bg: #0f1720;
    --fn-btn-line: #4a6a8a;
    --fn-hover: rgba(255, 255, 255, 0.08);
    --fn-chip: rgba(148, 201, 254, 0.12);
    --fn-fresh: rgba(148, 201, 254, 0.14);
    --fn-warn: #f3cf55;
    --fn-ok: #4cc38a;
    --fn-bad: #f97387;
    --fn-scroll: #3d5a70;
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --fn-page: #eef1f4;
        --fn-bg: #ffffff;
        --fn-line: #e0e0e0;
        --fn-text: #333333;
        --fn-accent: #336fee;
        --fn-muted: #666666;
        --fn-dim: #888888;
        --fn-ui: #555555;
        --fn-input-bg: #f5f7f9;
        --fn-btn-line: #c5ced8;
        --fn-hover: rgba(0, 0, 0, 0.06);
        --fn-chip: rgba(51, 111, 238, 0.1);
        --fn-fresh: rgba(51, 111, 238, 0.1);
        --fn-warn: #9a6b00;
        --fn-ok: #1a8f57;
        --fn-bad: #c8364c;
        --fn-scroll: #c0c0c0;
        color-scheme: light;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fn-page);
    color: var(--fn-text);
    font-family: Tahoma, Verdana, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--fn-scroll) transparent;
}

body { padding: 12px 16px 24px; }

a { color: var(--fn-accent); }

.fn-widget {
    max-width: 820px;
    margin: 0 auto;
    background: var(--fn-bg);
    border: 1px solid var(--fn-line);
    border-radius: 4px;
}

/* Шапка — как .pscalp-widget-header */
.fn-titlebar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    background: var(--fn-bg);
    border-bottom: 1px solid var(--fn-line);
    border-radius: 4px 4px 0 0;
}

.fn-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fn-accent);
    font-size: 10pt;
    font-weight: 600;
}

.fn-by {
    color: var(--fn-dim);
    font-weight: 400;
}

.fn-status {
    font-size: 9pt;
    white-space: nowrap;
}

.fn-status::before {
    content: "●";
    margin-right: 4px;
}

.fn-status-live { color: var(--fn-ok); }
.fn-status-delayed { color: var(--fn-warn); }
.fn-status-off { color: var(--fn-bad); }
.fn-status-wait { color: var(--fn-dim); }

/* Строка фильтра — как .pscalp-ticker-filter + шапка ленты с тогглами */
.fn-filter {
    position: sticky;
    top: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--fn-bg);
    border-bottom: 1px solid var(--fn-line);
    font-size: 9pt;
    color: var(--fn-ui);
}

.fn-filter input {
    flex: 1;
    min-width: 0;
    max-width: 300px;
    padding: 2px 4px;
    background: var(--fn-input-bg);
    border: 1px solid var(--fn-line);
    color: var(--fn-ui);
    font: 9pt Tahoma, Verdana, sans-serif;
    outline: none;
}

.fn-filter input::placeholder {
    color: #708ba4;
    opacity: 0.7;
}

.fn-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Как .pscalp-tgnews-flash-toggle / -sound-toggle */
.fn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 3px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--fn-dim);
    font: 600 8pt Tahoma, Verdana, sans-serif;
    cursor: pointer;
    outline: none;
}

.fn-tool:hover,
.fn-tool:focus-visible {
    background: var(--fn-hover);
    color: var(--fn-text);
}

.fn-tool.fn-on { color: var(--fn-accent); }

.fn-banner {
    padding: 6px 8px;
    border-bottom: 1px solid var(--fn-line);
    color: var(--fn-warn);
    font-size: 9pt;
    line-height: 1.4;
}

/* Лента — строки как getTgNewsRowStyle */
.fn-list {
    --fn-font: 10pt;
    user-select: text;
}

.fn-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 6px 8px;
    border-bottom: 1px solid var(--fn-line);
    color: var(--fn-text);
    font-size: var(--fn-font);
    transition: background-color 1.5s ease;
}

.fn-row:last-child { border-bottom: 0; }

.fn-row.fn-fresh { background: var(--fn-fresh); transition: none; }

.fn-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.fn-src {
    overflow: hidden;
    color: var(--fn-accent);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fn-time {
    margin-left: 8px;
    color: var(--fn-dim);
    white-space: nowrap;
}

/* Чипы тикеров — .pscalp-tgnews-ticker-chip */
.fn-tickers {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 3px;
}

.fn-chip {
    display: inline-flex;
    align-items: center;
    height: 1.5em;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    background: var(--fn-chip);
    color: var(--fn-accent);
    font: inherit;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.fn-chip:hover { filter: brightness(1.25); }

.fn-text {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
}

.fn-actions { margin-top: 5px; }

/* «… ещё» — .pscalp-tgnews-more */
.fn-more {
    padding: 2px 8px;
    border: 1px solid var(--fn-btn-line);
    border-radius: 4px;
    background: none;
    color: var(--fn-muted);
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
}

.fn-more:hover { color: var(--fn-text); }

.fn-empty {
    padding: 24px 8px;
    color: var(--fn-dim);
    font-size: 9pt;
    text-align: center;
}

.fn-empty[hidden] { display: none; }

.fn-foot {
    max-width: 820px;
    margin: 10px auto 0;
    color: var(--fn-dim);
    font-size: 8pt;
    text-align: center;
}

@media (max-width: 560px) {
    body { padding: 0 0 16px; }
    .fn-widget { border-left: 0; border-right: 0; border-radius: 0; }
    .fn-filter > span { display: none; }
    .fn-foot { padding: 0 16px; }
}