/* ===== ENTITY COMMUNITY THREAD (shared) =====
   Styles for the fan discussion component used on match, club, player,
   transfer and news pages (see entityThread.js). Extracted from Match
   Center 2.0's Discussion tab (match.css) so every entity page's comment
   card, composer and Top Takes rail look and behave identically — one
   visual system instead of five near-duplicate ones.

   match.html already ships these exact class names via match.css, so it
   does not include this file — everywhere else (team/player/news/transfers/
   community) does. Keep this file and the matching block in match.css in
   sync if either changes. */

/* Card container for a mounted entity thread (see entityThread.js's mount
   points in team.js/player.js/news-detail.js/transfers.js). match.html
   already has this exact rule via match.css, so it's redefined here only
   for the pages that don't load match.css. Keep in sync with match.css if
   either changes. */
.mc-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.mc-thread-counter {
    background: rgba(59, 130, 246, .12);
    border: 1px solid var(--border);
    color: var(--primary-soft);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

.mc-thread-preview,
.mc-thread-preview-empty {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin-top: 14px;
    cursor: pointer;
    color: var(--text);
    box-shadow: none;
    transition: .2s;
}

.mc-thread-preview:hover,
.mc-thread-preview-empty:hover {
    background: rgba(59, 130, 246, .1);
    transform: translateY(-2px);
}

.mc-thread-preview-empty {
    text-align: center;
    color: var(--primary-soft);
    font-weight: 800;
}

.mc-thread-preview p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-thread-preview p strong {
    color: var(--text);
}

.mc-preview-label {
    display: inline-block;
    color: #facc15;
    font-weight: 900;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-right: 2px;
}

.mc-empty-state {
    padding: 34px 20px;
    border: 1.5px dashed var(--border);
    border-radius: 20px;
    text-align: center;
    color: var(--muted);
    margin-top: 14px;
}

.mc-empty-note {
    color: var(--muted);
    font-size: 13px;
    margin: 14px 0 0;
}

.mc-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mc-thread-head h2 {
    margin: 4px 0 0;
    font-size: 26px;
}

.mc-thread-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mc-sort-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
}

.mc-sort-toggle button {
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 999px;
}

.mc-sort-toggle button.active {
    background: rgba(59, 130, 246, .18);
    color: white;
}

.mc-comment-form {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
}

.mc-comment-form input,
.mc-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    color: white;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: .2s;
}

.mc-comment-form input:focus,
.mc-comment-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.mc-comment-form textarea {
    resize: vertical;
    min-height: 90px;
}

.mc-comment-form button {
    width: fit-content;
    font-weight: 950;
}

.mc-comment-form-heading {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.mc-comment-form-sub {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.mc-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mc-comment-form-message {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* community.css already defines this exact rule for the main Community
   page's composer — redefined here for match/club/player/news/transfer
   pages, which don't load community.css. */
.composer-count {
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    margin-right: auto;
}

.post-edit-textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .06);
    color: white;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

.post-edit-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.mc-comment-form-message.is-error {
    color: #f87171;
}

.mc-thread-signedout {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
}

.mc-thread-signin-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 999px;
    transition: .2s;
}

.mc-thread-signin-link:hover {
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.mc-comments-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.mc-comment-card {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    transition: .2s;
}

.mc-comment-card:hover {
    background: rgba(59, 130, 246, .08);
    border-color: rgba(56, 189, 248, .3);
}

.mc-comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--mc-violet, #8b5cf6));
    font-weight: 900;
}

.mc-comment-body {
    flex: 1;
    min-width: 0;
}

.mc-comment-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.mc-comment-user {
    color: white;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
}

.mc-comment-user:hover {
    color: var(--primary-soft);
}

.mc-comment-top span {
    color: var(--muted);
    font-size: 12px;
}

.mc-like-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: rgba(59, 130, 246, .15);
    color: var(--primary-soft);
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    box-shadow: none;
    transition: .2s;
}

.mc-like-btn .icon {
    width: 14px;
    height: 14px;
}

.mc-like-btn:hover {
    background: var(--primary);
    color: white;
    transform: none;
}

.mc-like-btn.is-active {
    background: var(--primary);
    color: white;
}

.mc-comment-owner-actions {
    display: flex;
    gap: 8px;
}

.mc-comment-owner-button {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--muted);
    font-weight: 800;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

.mc-comment-owner-button:hover {
    color: var(--text);
}

.mc-comment-owner-button.is-danger:hover {
    color: #f87171;
}

.mc-comment-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 14px;
    word-break: break-word;
    white-space: pre-wrap;
}

.mc-top-takes {
    margin-top: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.mc-top-takes-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.mc-top-take-card {
    display: flex;
    gap: 14px;
    background: linear-gradient(135deg, rgba(250, 204, 21, .1), rgba(139, 92, 246, .08));
    border: 1px solid rgba(250, 204, 21, .28);
    border-radius: 18px;
    padding: 16px;
}

.mc-top-take-likes {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: #facc15;
    font-weight: 900;
    font-size: 12.5px;
}

.mc-top-take-likes .icon {
    width: 14px;
    height: 14px;
}

/* ===== ACTIVITY CHIP (cards showing an entity's community activity — club
   fan-zone previews, transfer cards, news cards) ===== */

.activity-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.activity-chip .icon {
    width: 14px;
    height: 14px;
}

/* ===== CONTEXT CHIP (labels a community item shown outside its original
   context — "Barcelona vs Real Madrid", "Lamine Yamal") ===== */

.context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .28);
    color: #c4b5fd;
    text-decoration: none;
    font-weight: 800;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.context-chip:hover {
    background: rgba(139, 92, 246, .2);
}

.context-chip .icon {
    width: 12px;
    height: 12px;
}

/* ===== FAN ACTIVITY GRID (club/player "Latest from fans" preview) ===== */

.fan-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.fan-activity-card {
    display: grid;
    gap: 8px;
    align-content: start;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}

.fan-activity-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fan-activity-card p strong {
    color: var(--text);
}

@media (max-width: 480px) {
    .mc-thread-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mc-comment-card {
        gap: 10px;
        padding: 12px;
    }

    .mc-comment-avatar {
        width: 32px;
        height: 32px;
    }

    .mc-comment-top {
        flex-wrap: wrap;
        gap: 8px;
    }
}