/* ═══════════════════════════════════════════════════════════════
   PROFANS TWEETS · Компонент «карточка твита»
   Блок: .pft-tweet
   Элементы: -avatar, -mod-badge, -content, -head, -menu, -replyto, -body
   Контент: .pft-mention, .pft-hashtag, .pft-spoiler, .pft-linkspoiler
   Медиа/действия: .pft-media*, .pft-actions, .pft-act*, .pft-tags
   Подключается ПОСЛЕ inline-стилей pfb_css() — тай-брейки каскада
   решаются в пользу этого файла. Удвоенный класс (.foo.foo = 0,2,0)
   перебивает reset .pft-shell (0,1,1) и GP-псевдоклассы (0,1,1).
   ═══════════════════════════════════════════════════════════════ */

.pft-tweet{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:14px;
    padding:14px 18px 6px;
    border-bottom:1px solid var(--pft-hairline);
    background:var(--pft-surface);
    cursor:pointer;
    transition: background .12s;
    position:relative;
}
.pft-tweet:hover{ background:var(--pft-hover-bg); }

.pft-tweet-avatar{
    width:48px; height:48px;
    border-radius:50%;
    overflow:hidden;
    background:var(--chip-bg);
    position:relative;
    flex-shrink:0;
}
.pft-tweet-avatar a{ display:block; width:100%; height:100%; }
.pft-tweet-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Модератор-бейдж — синий, заметный, Twitter-style */
.pft-tweet-mod-badge{
    position:absolute;
    bottom:-2px; right:-2px;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--pft-blue);
    border:2.5px solid var(--pft-surface);
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.pft-tweet-mod-badge svg{ width:11px; height:11px; }

/* Контент */
.pft-tweet-content{ min-width:0; }
.pft-tweet-head{
    display:flex; align-items:center; gap:5px;
    flex-wrap:wrap;
    font-size:15px;
    line-height:1.2;
    margin-bottom:2px;
}
.pft-tweet-head .pft-name{
    color:var(--text);
    font-weight:900;
    text-decoration:none;
    font-family:var(--font-ui);
    letter-spacing:-.01em;
    font-size:15px;
}
.pft-tweet-head .pft-name:hover{ text-decoration:underline; }
.pft-tweet-head .pft-handle,
.pft-tweet-head .pft-date{
    color:var(--text-dim);
    font-size:15px;
    font-weight:500;
    text-decoration:none;
}
.pft-tweet-head .pft-date:hover{ color:var(--accent-text,var(--accent)); text-decoration:underline; }
.pft-tweet-head .pft-dot{ color:var(--text-dim); font-weight:500; }
.pft-tweet-head .rank{
    display:inline-flex; align-items:center;
    font-size:10px; padding:1px 7px; border-radius:5px;
    font-weight:900; letter-spacing:.06em;
    text-transform:uppercase; line-height:1.6;
}
.pft-tweet-menu.pft-tweet-menu{
    margin-left:auto;
    width:32px; height:32px; border-radius:50%;
    background:transparent;
    color:var(--text-dim);
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition: background .14s, color .14s;
}
.pft-tweet-menu.pft-tweet-menu:hover{
    color:var(--accent-text,var(--accent));
    background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.pft-tweet-menu svg{ width:18px; height:18px; }

.pft-tweet-replyto{
    font-size:14px; color:var(--text-dim);
    margin:0 0 4px;
}
.pft-tweet-replyto a{ color:var(--accent-text,var(--accent)); font-weight:600; }

/* Pinned-твит — значок «Закреплено» */
.pft-pin-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:12px; font-weight:800;
    color:var(--accent-text,var(--accent));
    margin-bottom:4px;
    letter-spacing:.02em;
    text-transform:uppercase;
}
.pft-pin-badge svg{ width:13px; height:13px; }
.pft-tweet-pinned{
    background:color-mix(in srgb, var(--accent) 4%, var(--pft-surface, #fff));
}
.pft-tweet-pinned:hover{
    background:color-mix(in srgb, var(--accent) 7%, var(--pft-surface, #fff));
}

/* ───── Тело твита ───── */
.pft-tweet-body{
    font-size:15.5px;
    line-height:1.45;
    color:var(--text);
    word-wrap:break-word;
    overflow-wrap:anywhere;
}
.pft-tweet-body p{ margin:0 0 8px; }
.pft-tweet-body p:last-child{ margin-bottom:0; }
.pft-tweet-body b, .pft-tweet-body strong{ font-weight:800; }
.pft-tweet-body i, .pft-tweet-body em{ font-style:italic; }
.pft-tweet-body u{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; }
.pft-tweet-body s{ color:var(--text-dim); }
.pft-tweet-body h2{ font-family:var(--font-display); font-size:22px; font-weight:800; margin:14px 0 6px; letter-spacing:.01em; }
.pft-tweet-body h3{ font-family:var(--font-display); font-size:18px; font-weight:800; margin:12px 0 4px; }
.pft-tweet-body h4{ font-size:16px; font-weight:800; margin:10px 0 4px; }
.pft-tweet-body blockquote{
    margin:8px 0; padding:8px 14px;
    background:color-mix(in srgb, var(--accent) 6%, var(--chip-bg));
    border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0;
    font-style:italic; color:var(--text-muted);
}
.pft-tweet-body ul, .pft-tweet-body ol{ margin:6px 0; padding-left:24px; list-style:revert; }
.pft-tweet-body ul{ list-style-type:disc; }
.pft-tweet-body ol{ list-style-type:decimal; }
.pft-tweet-body li{ margin:2px 0; }
.pft-tweet-body code{
    font-family:var(--font-mono, ui-monospace, monospace);
    background:var(--chip-bg);
    padding:1px 6px; border-radius:5px;
    font-size:.9em;
    color:var(--accent-text,var(--accent));
}
.pft-tweet-body pre{
    background:var(--chip-bg);
    border:1px solid var(--pft-hairline);
    padding:10px 12px; border-radius:10px;
    overflow:auto; margin:8px 0;
    font-size:13px;
}
.pft-tweet-body pre code{ background:transparent; padding:0; color:var(--text); }
.pft-tweet-body mark{
    background:color-mix(in srgb, #fde047 70%, transparent);
    color:inherit;
    padding:0 4px; border-radius:3px;
}
.pft-tweet-body hr{ border:0; border-top:1px solid var(--pft-hairline); margin:12px 0; }
.pft-tweet-body a{ color:var(--accent-text,var(--accent)); text-decoration:none; }
.pft-tweet-body a:hover{ text-decoration:underline; }
.pft-tweet-body img{
    max-width:100%;
    max-height:480px;
    width:auto; height:auto;
    object-fit:contain;
    border-radius:14px;
    display:block; margin:10px 0;
    background:var(--chip-bg);
}

.pft-mention.pft-mention{ color:var(--accent-text,var(--accent)); font-weight:700; text-decoration:none; }
.pft-mention:hover{ text-decoration:underline; }
.pft-mention-na{ color:var(--text-muted); font-weight:600; }
.pft-hashtag.pft-hashtag{ color:var(--accent-text,var(--accent)); font-weight:600; text-decoration:none; }
.pft-hashtag:hover{ text-decoration:underline; }

.pft-spoiler{
    background:var(--text); color:var(--text);
    border-radius:4px; padding:0 5px;
    cursor:pointer; user-select:none;
    transition: background .14s, color .14s;
}
.pft-spoiler.on{ background:color-mix(in srgb, var(--text) 12%, transparent); color:var(--text); }
[data-theme="dark"] .pft-spoiler{ background:#e5e5e5; color:#e5e5e5; }
[data-theme="dark"] .pft-spoiler.on{ background:color-mix(in srgb, var(--text) 12%, transparent); color:var(--text); }

.pft-linkspoiler{
    margin:8px 0;
    border:1px solid var(--pft-hairline);
    border-radius:12px;
    background:color-mix(in srgb, var(--accent) 4%, var(--chip-bg));
    overflow:hidden;
}
.pft-linkspoiler summary{
    padding:10px 14px;
    font-weight:700; font-size:13.5px;
    color:var(--text-muted);
    cursor:pointer; list-style:none;
    display:flex; align-items:center; gap:8px;
}
.pft-linkspoiler summary::-webkit-details-marker{ display:none; }
.pft-linkspoiler summary::before{
    content:""; display:inline-block;
    width:0; height:0;
    border-left:6px solid var(--text-dim);
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    transition: transform .15s;
}
.pft-linkspoiler[open] summary::before{ transform:rotate(90deg); }
.pft-linkspoiler[open] summary{ border-bottom:1px solid var(--pft-hairline); }
.pft-linkspoiler-body{
    padding:10px 14px;
    font-size:13px;
    color:var(--text-dim);
    background:var(--pft-surface);
    word-break:break-all;
}
.pft-linkspoiler-body code{ background:transparent; padding:0; color:var(--accent-text,var(--accent)); }

/* ───── МЕДИА ───── */
.pft-media{
    margin:10px 0 0;
    display:grid; gap:3px;
    border-radius:16px; overflow:hidden;
    border:1px solid var(--pft-hairline);
    max-width:540px;
}
.pft-media-1{ grid-template-columns:1fr; }
.pft-media-2{ grid-template-columns:1fr 1fr; }
.pft-media-3{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.pft-media-3 > a:nth-child(1){ grid-row:span 2; }
.pft-media-4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.pft-media a{ display:block; overflow:hidden; background:#000; aspect-ratio:1/1; position:relative; }
.pft-media-1 a{ aspect-ratio:16/9; }
.pft-media img{ width:100%; height:100%; object-fit:cover; transition: transform .25s; }
.pft-media a:hover img{ transform:scale(1.03); }

/* ───── ACTION BAR ───── */
.pft-actions{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:8px;
    max-width:480px;
    color:var(--text-dim);
}
.pft-act{
    display:inline-flex; align-items:center; gap:4px;
    cursor:pointer;
    padding:0;
    font-size:13.5px; font-weight:500;
    font-family:var(--font-ui);
    font-variant-numeric: tabular-nums;
    transition: color .14s;
}
.pft-act.pft-act{
    background:transparent;
    border:0;
    color:var(--text-dim);
}
.pft-act-icon{
    width:34px; height:34px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    transition: background .14s;
}
.pft-act-icon svg{ width:18px; height:18px; }
.pft-act:hover{ color:var(--accent-text,var(--accent)); }
.pft-act:hover .pft-act-icon{ background:color-mix(in srgb, var(--accent) 12%, transparent); }

.pft-act-like:hover{ color:var(--pft-red); }
.pft-act-like:hover .pft-act-icon{ background:color-mix(in srgb, var(--pft-red) 14%, transparent); }
.pft-act-like.is-active{ color:var(--pft-red); }
.pft-act-like.is-active .pft-act-icon{ /* heart-fill уже идёт fill=currentColor */ }

.pft-act-repost:hover{ color:var(--pft-green); }
.pft-act-repost:hover .pft-act-icon{ background:color-mix(in srgb, var(--pft-green) 14%, transparent); }
.pft-act-repost.is-active{ color:var(--pft-green); }

.pft-act-disabled{ opacity:.4; cursor:not-allowed; }
.pft-act-disabled:hover{ color:var(--text-dim); }
.pft-act-disabled:hover .pft-act-icon{ background:transparent; }

/* ───── Хештеги ───── */
.pft-tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.pft-tag-chip.pft-tag-chip{
    font-size:12px; padding:3px 10px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 10%, transparent);
    color:var(--accent-text,var(--accent));
    font-weight:700; text-decoration:none;
    letter-spacing:.02em;
}
.pft-tag-chip.pft-tag-chip:hover{ background:color-mix(in srgb, var(--accent) 20%, transparent); }

/* ───── COMPACT MODE (по настройке) ───── */
body.pft-compact .pft-tweet{ padding:8px 16px 4px; gap:10px; }
body.pft-compact .pft-tweet-body{ font-size:14px; }
body.pft-compact .pft-tweet-avatar{ width:38px; height:38px; }

/* ───── RESPONSIVE ───── */
@media (max-width:520px){
    .pft-tweet{ grid-template-columns:38px 1fr; padding:12px 12px 6px; gap:10px; }
    .pft-tweet-avatar{ width:38px; height:38px; }
    .pft-tweet-mod-badge{ width:18px; height:18px; }
    .pft-tweet-head{ font-size:14.5px; gap:4px; }
    .pft-tweet-head .pft-name,
    .pft-tweet-head .pft-handle,
    .pft-tweet-head .pft-date{ font-size:14px; }
    .pft-tweet-head .rank{ font-size:9px; padding:1px 5px; }
    .pft-tweet-body{ font-size:15px; }
    .pft-actions{ gap:0; justify-content:space-between; }
    .pft-act{ padding:6px 4px; min-width:auto; }
    .pft-act-icon{ width:40px; height:40px; }
    .pft-act span:not(.pft-act-icon){ font-size:12px; }
    .pft-act-icon svg{ width:17px; height:17px; }
}