/* ======================================================
   NEWS FEEDS (RSS LOBBY)  —  news-feeds.css
   Лобби RSS-каналов (как tg.css), + переход свайпом в News.
   Стиль в духе Memphis Messenger (использует CSS-переменные темы)
   ====================================================== */

/* ── Sliding strip: two 50%-wide panes side by side ───────────────────── */
/* #chatMessages becomes the viewport that clips the 200%-wide strip.     */
#chatMessages:has(.nf-screens) {
    overflow: hidden !important;
    padding: 0 !important;
}

.nf-screens {
    display: flex;
    width: 200%;
    height: 100%;
    transform: translateX(0%) translateZ(0);
    will-change: transform;
}

.nf-screen {
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Contacts screen (channel list, like the contacts list) ──────────── */
.nf-contacts-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--m-surface);
}

/* ── Channel list ────────────────────────────────────── */
.nf-channel-list {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
}

/* ── Back button in panel header (consistent with chess) ──── */
.nf-back-btn {
    background: none;
    border: none;
    font-size: 22px;
    font-weight: 900;
    color: inherit;
    cursor: pointer;
    padding: 0 10px 0 0;
    line-height: 1;
    vertical-align: middle;
}
.nf-back-btn:hover { opacity: .7; }

.nf-empty-list {
    padding: 20px 16px;
    font-size: 12px;
    font-weight: 700;
    opacity: .5;
    text-align: center;
    line-height: 1.5;
}

.nf-channel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--m-dark) 10%, transparent);
    transition: background .12s;
    position: relative;
}
.nf-channel-item:hover { background: color-mix(in srgb, var(--m-teal,#2dd4bf) 12%, transparent); }
.nf-channel-item:active { background: color-mix(in srgb, var(--m-teal,#2dd4bf) 20%, transparent); }

.nf-channel-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--m-yellow, #ffe066);
    border: 2px solid var(--m-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: var(--m-dark);
    box-shadow: 2px 2px 0 var(--m-dark);
    flex-shrink: 0;
}

.nf-channel-info {
    flex: 1;
    min-width: 0;
}
.nf-channel-name {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--m-dark);
}
.nf-channel-handle {
    font-size: 11px;
    font-weight: 600;
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nf-channel-preview {
    font-size: 11px;
    font-weight: 500;
    opacity: .45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    color: var(--m-dark);
}

.nf-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--m-dark);
    opacity: .35;
    padding: 4px 6px;
    border-radius: 6px;
    transition: opacity .12s, background .12s;
    flex-shrink: 0;
}
.nf-remove-btn:hover { opacity: 1; background: #ef444422; }

/* ── Add form (URL + optional title) ─────────────────── */
.nf-add-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 2px solid var(--m-dark);
    flex-shrink: 0;
}
.nf-add-row {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid color-mix(in srgb, var(--m-dark) 15%, transparent);
}
.nf-add-row:last-child { border-bottom: none; }

.nf-add-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-right: 1.5px solid var(--m-dark);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    background: var(--m-surface);
    color: var(--m-dark);
    outline: none;
    font-family: inherit;
}
.nf-add-input::placeholder { opacity: .45; }
.nf-add-input:focus { background: color-mix(in srgb, var(--m-teal,#2dd4bf) 10%, var(--m-surface)); }

.nf-add-btn {
    background: var(--m-teal, #2dd4bf);
    color: var(--m-dark);
    border: none;
    padding: 10px 10px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .12s, transform .1s;
}
.nf-add-btn:hover { background: var(--m-yellow, #ffe066); }
.nf-add-btn:active { transform: scale(.96); }
.nf-add-btn:disabled { opacity: .5; cursor: wait; }

/* ── Posts area ──────────────────────────────────────── */
.nf-posts-area {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--m-surface);
    display: flex;
    flex-direction: column;
}

/* Posts header */
.nf-posts-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--m-surface);
    border-bottom: 2.5px solid var(--m-dark);
    padding: 12px 18px 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.nf-posts-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--m-dark);
}
.nf-posts-meta {
    font-size: 11px;
    font-weight: 700;
    opacity: .45;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.nf-posts-cached,
.nf-posts-fresh {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1.5px solid var(--m-dark);
}
.nf-posts-cached {
    opacity: .55;
    background: transparent;
}
.nf-posts-fresh {
    background: var(--m-teal, #2dd4bf);
    color: var(--m-dark);
    border-color: var(--m-dark);
}

.nf-refresh-btn {
    margin-left: auto;
    background: transparent;
    border: 1.5px solid var(--m-dark);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: var(--m-dark);
    transition: background .12s, transform .15s;
    flex-shrink: 0;
}
.nf-refresh-btn:hover { background: color-mix(in srgb, var(--m-teal,#2dd4bf) 20%, transparent); }
.nf-refresh-btn:disabled { opacity: .5; cursor: wait; }
.nf-refresh-btn--spinning { animation: nf-spin .8s linear infinite; }

@keyframes nf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.nf-posts-list {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nf-no-posts, .nf-error-msg {
    padding: 32px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    opacity: .6;
    line-height: 1.6;
}
.nf-error-msg { color: #ef4444; opacity: 1; }

/* ── Post card ───────────────────────────────────────── */
.nf-post {
    border: 2.5px solid var(--m-dark);
    border-radius: 16px;
    overflow: hidden;
    background: var(--m-surface);
    box-shadow: 3px 3px 0 var(--m-dark);
    transition: transform .12s, box-shadow .12s;
}
.nf-post:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 var(--m-dark);
}

.nf-post__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 2px solid var(--m-dark);
    background: var(--m-surface2, #f0f0f0);
}
.nf-post__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.nf-post:hover .nf-post__img { transform: scale(1.03); }

.nf-post__body {
    padding: 40px 16px 14px;
}

.nf-post__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--m-dark);
    margin-bottom: 6px;
    line-height: 1.35;
}

.nf-post__body p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 8px;
    color: var(--m-dark);
    opacity: .85;
}

.nf-post__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nf-post__date {
    font-size: 11px;
    font-weight: 700;
    opacity: .45;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.nf-post__link {
    font-size: 11px;
    font-weight: 800;
    color: var(--m-teal, #2dd4bf);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1.5px solid var(--m-teal, #2dd4bf);
    border-radius: 20px;
    padding: 2px 9px;
    transition: background .12s, color .12s;
}
.nf-post__link:hover {
    background: var(--m-teal, #2dd4bf);
    color: var(--m-dark);
}

/* ── Loader dots ─────────────────────────────────────── */
.nf-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 0;
    flex: 1;
}
.nf-loader span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--m-teal, #2dd4bf);
    border: 2px solid var(--m-dark);
    animation: nf-bounce 1.1s ease-in-out infinite;
}
.nf-loader span:nth-child(2) { animation-delay: .18s; }
.nf-loader span:nth-child(3) { animation-delay: .36s; }

@keyframes nf-bounce {
    0%, 80%, 100% { transform: scale(1);   opacity: 1;  }
    40%            { transform: scale(1.5); opacity: .7; }
}

/* ── Mobile tweaks ─────────────────────────────────────── */
@media (max-width: 600px) {
    .nf-channel-item { padding: 10px 14px; }
    .nf-posts-header { padding: 10px 14px 8px; }
    .nf-posts-list { padding: 10px; }
}

/* ── Per-item fetch status ────────────────────────────── */

/* Avatar ring states */
.nf-channel-avatar.nf-av--fetching {
    box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 5px var(--m-teal, #2dd4bf);
    animation: nf-av-pulse 1s ease-in-out infinite;
}
.nf-channel-avatar.nf-av--done {
    box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 5px #22c55e;
    animation: nf-av-flash .4s ease forwards;
}
.nf-channel-avatar.nf-av--error {
    box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 5px #ef4444;
}

@keyframes nf-av-pulse {
    0%, 100% { box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 4px var(--m-teal, #2dd4bf); }
    50%       { box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 7px color-mix(in srgb, var(--m-teal,#2dd4bf) 40%, transparent); }
}
@keyframes nf-av-flash {
    0%   { box-shadow: 0 0 0 2.5px var(--m-dark), 0 0 0 7px #22c55e; }
    100% { box-shadow: 2px 2px 0 var(--m-dark); }
}

/* Inline status label (replaces @handle during fetch) */
.nf-fetch-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--m-teal, #2dd4bf);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nf-fetch-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-teal, #2dd4bf);
    animation: nf-dot-blink .8s ease-in-out infinite;
}
.nf-fetch-label--err {
    color: #ef4444;
}
.nf-fetch-label--err::before {
    background: #ef4444;
    animation: none;
}

@keyframes nf-dot-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .3; transform: scale(.6); }
}

/* ── Unread badge ─────────────────────────────────────── */
.nf-unread-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--m-teal, #2dd4bf);
    border: 2px solid var(--m-dark);
    color: var(--m-dark);
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 1.5px 1.5px 0 var(--m-dark);
    animation: nf-badge-pop .2s ease;
}

@keyframes nf-badge-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Hide chat input bar in nf-mode ──────────────────── */
.nf-mode .chat-input {
    display: none !important;
}
/* ── Source badge: catalog (built-in) vs custom (user-added) ─────────── */
.nf-channel-badge {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1.5px solid var(--m-dark);
    flex-shrink: 0;
    margin-right: 2px;
}
.nf-channel-badge--catalog {
    opacity: .45;
    background: transparent;
}
.nf-channel-badge--custom {
    background: var(--m-lime, #AAED3B);
    color: var(--m-dark);
}

/* Catalog items can't be removed — show a static pin instead of ✕ */
.nf-pin-icon {
    font-size: 13px;
    opacity: .3;
    padding: 4px 6px;
    flex-shrink: 0;
}

/* ── Swipe hint: lobby → News (existing categorized panel) ───────────── */
.nf-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .4;
    flex-shrink: 0;
    border-bottom: 1.5px solid color-mix(in srgb, var(--m-dark) 10%, transparent);
}
.nf-swipe-hint__arrow {
    display: inline-block;
    animation: nf-hint-nudge 1.6s ease-in-out infinite;
}
@keyframes nf-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(4px); }
}

/* ── Hide chat input bar in feeds-mode ────────────────── */
.feeds-mode .chat-input {
    display: none !important;
}