/*
 * SLV Community page (Facebook-style three-column layout).
 *
 * Width treatment mirrors the account hub: the theme puts page content in a
 * left td-pb-span8 column with an empty span4 sidebar, and (on full-width
 * layouts) stretches .td-container edge to edge. Both fixes are scoped with
 * :has(#slv-community) so they only affect this page and survive the page
 * being recreated with a new ID after a restore.
 */
.td-pb-row:has(#slv-community) > .td-pb-span8.td-main-content {
        width: 100%;
        float: none;
}

.td-pb-row:has(#slv-community) > .td-pb-span4 {
        display: none;
}

.td-container:has(#slv-community) {
        width: auto;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
}

/* ---- Grid ------------------------------------------------------------ */

#slv-community {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) 300px;
        gap: 20px;
        align-items: start;
        margin: 10px 0 40px;
        font-size: 14px;
        color: #1c1e21;
}

#slv-community *,
#slv-community *::before,
#slv-community *::after {
        box-sizing: border-box;
}

.slv-cm-col {
        min-width: 0;
}

.slv-cm-left,
.slv-cm-right {
        position: sticky;
        top: 20px;
}

/* ---- Cards ------------------------------------------------------------ */

.slv-cm-card {
        background: #fff;
        border: 1px solid #e4e6eb;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        padding: 14px 16px;
        margin: 0 0 16px;
}

.slv-cm-card h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 10px;
}

.slv-cm-muted {
        color: #65676b;
        font-size: 12px;
}

.slv-cm-pill {
        white-space: nowrap;
}

/* ---- Buttons ----------------------------------------------------------- */

.slv-cm-btn {
        display: inline-block;
        padding: 7px 14px;
        border: 1px solid #ccd0d5;
        border-radius: 6px;
        background: #e4e6eb;
        color: #1c1e21 !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none !important;
        cursor: pointer;
        transition: background 0.15s ease;
}

.slv-cm-btn:hover,
.slv-cm-btn:focus {
        background: #d8dadf;
}

.slv-cm-btn-primary {
        background: #1a1a1a;
        border-color: #1a1a1a;
        color: #fff !important;
}

.slv-cm-btn-primary:hover,
.slv-cm-btn-primary:focus {
        background: #000;
}

.slv-cm-btn-sm {
        padding: 5px 10px;
        font-size: 12px;
}

.slv-cm-btn-block {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 10px;
}

.slv-cm-btn[disabled] {
        opacity: 0.6;
        cursor: default;
}

/* ---- Left: me card + shortcuts ----------------------------------------- */

.slv-cm-me-link {
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        align-items: center;
        text-decoration: none !important;
        color: inherit !important;
}

.slv-cm-me-link img.avatar {
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
}

.slv-cm-me-name {
        font-size: 15px;
        font-weight: 700;
}

.slv-cm-me-sub {
        font-size: 12px;
        color: #65676b;
}

.slv-cm-guest p {
        margin: 0 0 10px;
        font-size: 13px;
        color: #444;
}

.slv-cm-guest .slv-cm-btn {
        margin: 0 6px 6px 0;
}

.slv-cm-shortcuts {
        padding: 8px;
}

.slv-cm-shortcuts ul {
        list-style: none;
        margin: 0;
        padding: 0;
}

.slv-cm-shortcuts li {
        margin: 0;
}

.slv-cm-shortcuts a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        color: #1c1e21 !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;
}

.slv-cm-shortcuts a:hover,
.slv-cm-shortcuts a:focus {
        background: #f0f2f5;
}

.slv-cm-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e7f0fd;
        color: #1b66c9;
        font-size: 15px;
        flex: none;
}

.slv-cm-ico::before {
        content: "\2302";
}

.slv-cm-ico-msg { background: #e6f6ec; color: #1d7a3d; }
.slv-cm-ico-msg::before { content: "\2709"; }
.slv-cm-ico-ntf { background: #fdeeee; color: #c22f2f; }
.slv-cm-ico-ntf::before { content: "\2691"; }
.slv-cm-ico-frd { background: #fdf1e6; color: #b35b00; }
.slv-cm-ico-frd::before { content: "\2665"; }
.slv-cm-ico-grp { background: #efe9fb; color: #6a3fc4; }
.slv-cm-ico-grp::before { content: "\25C9"; }
.slv-cm-ico-mbr { background: #e8f4f8; color: #0e7490; }
.slv-cm-ico-mbr::before { content: "\2630"; }
.slv-cm-ico-acc { background: #f0f0f0; color: #444; }
.slv-cm-ico-acc::before { content: "\2699"; }

.slv-cm-badge {
        margin-left: auto;
        min-width: 20px;
        padding: 2px 6px;
        border-radius: 10px;
        background: #e41e3f;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        line-height: 1.3;
}

/* ---- Center: post box --------------------------------------------------- */

.slv-cm-postbox-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
}

.slv-cm-postbox-row img.avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
}

.slv-cm-postbox textarea {
        flex: 1;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid #ccd0d5;
        border-radius: 20px;
        background: #f0f2f5;
        font-size: 14px;
        line-height: 1.4;
        resize: vertical;
}

.slv-cm-postbox textarea:focus {
        outline: none;
        border-color: #999;
        background: #fff;
}

.slv-cm-postbox-foot {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 10px;
}

.slv-cm-post-error {
        color: #c0392b;
        font-size: 12px;
}

.slv-cm-postbox-guest {
        font-size: 14px;
        color: #444;
}

/* ---- Center: tabs -------------------------------------------------------- */

.slv-cm-tabs {
        display: flex;
        gap: 6px;
        margin: 0 0 12px;
        border-bottom: 2px solid #e4e6eb;
}

.slv-cm-tab {
        padding: 8px 16px 10px;
        font-size: 14px;
        font-weight: 600;
        color: #65676b !important;
        text-decoration: none !important;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
}

.slv-cm-tab:hover,
.slv-cm-tab:focus {
        color: #1c1e21 !important;
}

.slv-cm-tab.is-active {
        color: #1a1a1a !important;
        border-bottom-color: #1a1a1a;
}

/* ---- Center: feed --------------------------------------------------------- */

.slv-cm-items {
        list-style: none;
        margin: 0;
        padding: 0;
}

.slv-cm-item {
        background: #fff;
        border: 1px solid #e4e6eb;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        padding: 14px 16px 10px;
        margin: 0 0 14px;
}

.slv-cm-item-head {
        display: flex;
        gap: 10px;
        align-items: flex-start;
}

.slv-cm-item-avatar img.avatar,
.slv-cm-item-avatar img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
}

.slv-cm-item-action {
        font-size: 14px;
        line-height: 1.4;
        padding-top: 3px;
        min-width: 0;
        overflow-wrap: anywhere;
}

.slv-cm-item-action a {
        font-weight: 700;
        color: #1c1e21 !important;
        text-decoration: none !important;
}

.slv-cm-item-action .time-since,
.slv-cm-item-action .activity-time-since {
        display: block;
        font-size: 12px;
        color: #65676b;
        font-weight: 400;
}

.slv-cm-item-body {
        margin: 10px 0 4px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
}

.slv-cm-item-body img {
        max-width: 100%;
        height: auto;
}

.slv-cm-item-actions {
        display: flex;
        gap: 4px;
        border-top: 1px solid #eef0f2;
        margin-top: 10px;
        padding-top: 4px;
}

.slv-cm-act {
        flex: 1;
        display: inline-block;
        padding: 7px 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #65676b !important;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
}

.slv-cm-act:hover,
.slv-cm-act:focus {
        background: #f0f2f5;
        color: #1c1e21 !important;
}

.slv-cm-act-fav.is-fav {
        color: #1b66c9 !important;
}

/* ---- Comments -------------------------------------------------------------- */

.slv-cm-comments {
        list-style: none;
        margin: 8px 0 0;
        padding: 8px 0 0;
        border-top: 1px solid #eef0f2;
}

.slv-cm-comments .slv-cm-comments {
        border-top: 0;
        margin-left: 34px;
        padding-top: 0;
}

.slv-cm-comment {
        display: flex;
        gap: 8px;
        margin: 0 0 8px;
        flex-wrap: wrap;
}

.slv-cm-comment > img.avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
}

.slv-cm-comment-body {
        flex: 1;
        min-width: 0;
        background: #f0f2f5;
        border-radius: 12px;
        padding: 7px 12px;
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
}

.slv-cm-comment-author a {
        font-weight: 700;
        color: #1c1e21 !important;
        text-decoration: none !important;
}

.slv-cm-comment-text p {
        display: inline;
        margin: 0;
}

.slv-cm-comment-time {
        display: block;
        font-size: 11px;
        color: #65676b;
        margin-top: 2px;
}

.slv-cm-comment-form {
        display: flex;
        gap: 8px;
        margin-top: 8px;
}

.slv-cm-comment-form input[type="text"] {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ccd0d5;
        border-radius: 16px;
        background: #f0f2f5;
        font-size: 13px;
}

.slv-cm-comment-form input[type="text"]:focus {
        outline: none;
        background: #fff;
        border-color: #999;
}

/* ---- Feed misc ---------------------------------------------------------------- */

.slv-cm-empty p {
        margin: 0 0 6px;
        font-size: 14px;
        color: #444;
}

.slv-cm-load-more {
        display: block;
        width: 100%;
        text-align: center;
}

/* ---- Right rail ------------------------------------------------------------------ */

.slv-cm-mini-list {
        list-style: none;
        margin: 0;
        padding: 0;
}

.slv-cm-mini-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        margin: 0;
}

.slv-cm-mini-list img.avatar,
.slv-cm-mini-list img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
}

.slv-cm-mini-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
}

.slv-cm-mini-name {
        font-size: 13px;
        font-weight: 700;
        color: #1c1e21 !important;
        text-decoration: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.slv-cm-mini-name:hover,
.slv-cm-mini-name:focus {
        text-decoration: underline !important;
}

.slv-cm-see-all {
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #1b66c9 !important;
        text-decoration: none !important;
}

.slv-cm-see-all:hover,
.slv-cm-see-all:focus {
        text-decoration: underline !important;
}

/* ---- Responsive -------------------------------------------------------------------- */

@media (max-width: 1080px) {
        #slv-community {
                grid-template-columns: minmax(0, 1fr) 280px;
        }

        .slv-cm-left {
                grid-column: 1 / -1;
                position: static;
        }

        /* Shortcuts become an app-style tab bar: every item visible at once
           (icon above a short label), no sideways scrolling. auto-fit lets
           the grid pick as many columns as fit, wrapping the rest onto a
           second row on narrow phones. */
        .slv-cm-left .slv-cm-shortcuts ul {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
                gap: 4px;
        }

        .slv-cm-left .slv-cm-shortcuts a {
                position: relative;
                flex-direction: column;
                justify-content: flex-start;
                gap: 5px;
                padding: 8px 2px 7px;
                font-size: 11.5px;
                line-height: 1.15;
                text-align: center;
        }

        .slv-cm-left .slv-cm-shortcuts .slv-cm-ico {
                width: 32px;
                height: 32px;
        }

        /* The unread bubble rides the icon's top-right corner (app style)
           instead of pushing to the row end. */
        .slv-cm-left .slv-cm-shortcuts .slv-cm-badge {
                position: absolute;
                top: 3px;
                left: 50%;
                margin-left: 8px;
        }

        .slv-cm-me {
                margin-bottom: 10px;
        }
}

@media (max-width: 760px) {
        #slv-community {
                display: block;
        }

        .slv-cm-right {
                position: static;
        }

        .slv-cm-item-actions {
                gap: 0;
        }

        .slv-cm-act {
                min-height: 40px;
        }

        .slv-cm-shortcuts a {
                min-height: 42px;
        }

        .slv-cm-tab {
                flex: 1;
                text-align: center;
        }
}