/* ==========================================================================
   Whitoo — Explore screen (inside chat_room.html) 2026 redesign
   Loaded LAST in chat_room.html.

   The legacy CSS-only classes (.whitoo-explore-profile-*, .whitoo-explore-category-*,
   .whitoo-explore-search-hero, .whitoo-home-search-hero) were removed from the markup,
   so whitoo-refresh.css's ~174 explore rules (31 of them !important) no longer match
   and everything below starts from a clean slate.

   Deliberately KEPT in the markup:
     - body.whitoo-explore-active          -> chatnet.js
     - .whitoo-quick-match-open / .whitoo-create-normal / .whitoo-create-ai -> chatnet.js
     - .whitoo-explore-v2 / .whitoo-explore-board (root) -> still feed #chat-room-loop
       room-card styling from whitoo-refresh.css
   ========================================================================== */

/* ==========================================================================
   INSTANT TAB SWITCHES (not scoped to explore — applies to the whole chat room)
   The main tabs (Messages / Server / Whitoo AI / Explore / Profile) use
   Bootstrap's .fade class = an opacity transition. On refresh or a quick switch
   the panel could get stuck half-faded (the "broken / half-rendered" state).
   Killing the transition makes every switch snap instantly and always render
   the active panel fully. JS still toggles .active/.show — only the animation
   is removed, so nothing functional changes.
   ========================================================================== */
.main-tab-pane.fade {
    transition: none !important;
}

.main-tab-pane.active.show {
    opacity: 1 !important;
}

/* Whitoo AI panel — overflow fix.
   The "Whitoo AI ready" status card sat in a fixed 210px second grid column and
   kept spilling past the right edge of the content area (clipped off-screen).
   Clamping it wasn't enough, so the card is removed and the header runs as a
   single full-width column. Nothing is lost: the card was decorative (the panel
   being open already says the assistant is ready). */
#main-looai,
#main-looai .looai-panel,
#main-looai .looai-header {
    max-width: 100% !important;
    overflow-x: hidden;
}

#main-looai .looai-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

#main-looai .looai-status-card {
    display: none !important;
}

#main-looai .looai-hero-copy {
    min-width: 0;
    max-width: 100%;
}

#main-looai .looai-header h2,
#main-looai .looai-header p {
    max-width: 100%;
}

.whitoo-explore-v2 {
    --wx-panel: #12161f;
    --wx-panel-2: #171c28;
    --wx-line: rgba(255, 255, 255, .07);
    --wx-line-soft: rgba(255, 255, 255, .04);
    --wx-text: #e9edf7;
    --wx-muted: #7d8699;
    --wx-red: #ef2b52;
    --wx-pink: #ec4899;
    --wx-purple: #a855f7;
    --wx-blue: #3b82f6;
    --wx-green: #10b981;
    --wx-radius: 14px;
    --wx-gap: clamp(12px, 1.1vw, 18px);
}

.whitoo-explore-v2 :is(h1, h2, h3, strong, b) {
    letter-spacing: -.015em;
}

.wx26-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wx26-eyebrow i {
    color: var(--wx-red);
    font-size: 12px;
}

/* ============================ DISCOVER ============================ */

.wx26-discover {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(18px, 2.4vw, 44px);
    align-items: center;
    margin-bottom: var(--wx-gap);
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--wx-line);
    border-radius: 18px;
    background:
        radial-gradient(520px 280px at 8% 30%, rgba(239, 43, 82, .1), transparent 62%),
        linear-gradient(140deg, #141926, #0e121b);
}

.wx26-discover-copy h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 900;
    line-height: 1.12;
}

.wx26-discover-copy h2 em {
    font-style: normal;
    color: #fff;
}

.wx26-discover-copy p {
    margin: 0 0 14px;
    color: var(--wx-muted);
    font-size: 13px;
    line-height: 1.6;
}

.wx26-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wx26-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 10.5px;
    font-weight: 600;
}

.wx26-chips i {
    color: var(--wx-red);
    font-size: 13px;
}

/* Feature cards */
.wx26-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wx26-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 17px 16px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-panel-2);
    color: var(--wx-text) !important;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.wx26-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .16);
    background: #1b2130;
}

.wx26-ci {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    color: #fff;
    font-size: 19px;
}

.wx26-c-red    { background: linear-gradient(150deg, #f43f5e, #be123c); box-shadow: 0 6px 16px rgba(239, 43, 82, .35); }
.wx26-c-green  { background: linear-gradient(150deg, #14b8a6, #0f766e); box-shadow: 0 6px 16px rgba(20, 184, 166, .32); }
.wx26-c-blue   { background: linear-gradient(150deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px rgba(59, 130, 246, .32); }
.wx26-c-purple { background: linear-gradient(150deg, #a855f7, #7c3aed); box-shadow: 0 6px 16px rgba(168, 85, 247, .32); }

.wx26-ct {
    min-width: 0;
    line-height: 1.35;
}

.wx26-ct strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}

.wx26-ct small {
    display: block;
    color: var(--wx-muted);
    font-size: 11px;
    line-height: 1.5;
}

.wx26-go {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 14px;
    transition: transform .16s ease;
}

.wx26-g-red    { background: rgba(244, 63, 94, .16);  color: #fb7185; }
.wx26-g-green  { background: rgba(20, 184, 166, .16); color: #2dd4bf; }
.wx26-g-blue   { background: rgba(59, 130, 246, .16); color: #60a5fa; }
.wx26-g-purple { background: rgba(168, 85, 247, .16); color: #c084fc; }

.wx26-card:hover .wx26-go {
    transform: translateX(3px);
}

/* ============================ JOIN BAND ============================ */

/* Explicit placement: auto-flow was dropping BOTH the icon and the card into
   column 1 (stacked), leaving the 1fr column empty — that was the dead space on
   the right. Pinning each item fixes it deterministically. */
.wx26-join {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    /* Both real items are pinned to row 1; collapse any implicit row the
       include's trailing <script> would otherwise open (was ~38px dead space). */
    grid-auto-rows: 0;
    align-items: center;
    column-gap: 18px;
    row-gap: 0;
    margin-bottom: var(--wx-gap);
    padding: 16px 20px;
    border: 1px solid rgba(239, 43, 82, .26);
    border-radius: var(--wx-radius);
    background:
        radial-gradient(420px 200px at 4% 50%, rgba(239, 43, 82, .18), transparent 64%),
        var(--wx-panel);
}

.wx26-join > .wx26-join-ico {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.wx26-join > .lt-join-link-card {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none !important;
}

/* join_by_link.html brings its own panel (.lt-join-link-card) styled by
   index/whitoo-modern/refresh css. Flatten it so it sits INSIDE this band
   instead of rendering a second nested card. */
.wx26-join .lt-join-link-card {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.wx26-join .lt-join-link-card::before,
.wx26-join .lt-join-link-card::after {
    content: none !important;
    display: none !important;
}

.wx26-join .lt-join-link-copy {
    min-width: 0;
    line-height: 1.35;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
}

.wx26-join .lt-join-link-copy span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wx26-join .lt-join-link-copy span i { color: var(--wx-red); font-size: 12px; }

.wx26-join .lt-join-link-copy strong {
    display: block;
    margin: 5px 0 3px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.wx26-join .lt-join-link-copy small {
    display: block;
    color: var(--wx-muted);
    font-size: 11px;
}

.wx26-join .lt-join-link-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.wx26-join .lt-join-link-input {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: rgba(8, 11, 18, .75) !important;
}

.wx26-join .lt-join-link-input i { color: var(--wx-muted); font-size: 15px; }

.wx26-join .lt-join-link-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    background: transparent !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    outline: 0;
    box-shadow: none !important;
}

.wx26-join .lt-join-link-input input::placeholder { color: var(--wx-muted); }

.wx26-join .lt-join-link-form button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(239, 43, 82, .35);
}

.wx26-join .lt-join-link-form button:hover { filter: brightness(1.08); }

.wx26-join .lt-join-link-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #fb7185;
    font-size: 11px;
    display: none;
}

.wx26-join .lt-join-link-error.is-visible { display: block; }

/* Woo AI Studio link (moved out of the card grid to keep it a clean 2x2) */
.wx26-studio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid rgba(168, 85, 247, .4);
    border-radius: 9px;
    background: rgba(168, 85, 247, .1);
    color: #c084fc !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

.wx26-studio:hover {
    background: rgba(168, 85, 247, .2);
    color: #fff !important;
}

.wx26-join-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(150deg, #f43f5e, #be123c);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 6px 18px rgba(239, 43, 82, .4);
}

.wx26-join-copy {
    min-width: 0;
    line-height: 1.35;
}

.wx26-join-copy strong {
    display: block;
    margin: 3px 0 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.wx26-join-copy small {
    color: var(--wx-muted);
    font-size: 10.8px;
}

.wx26-join-form {
    min-width: 0;
}

/* join_by_link.html lives inside — flatten it into the band */
.wx26-join-form form,
.wx26-join-form .join-link-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.whitoo-explore-v2 .wx26-join-form input[type="text"],
.whitoo-explore-v2 .wx26-join-form input:not([type="submit"]):not([type="button"]) {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: rgba(8, 11, 18, .7) !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

.whitoo-explore-v2 .wx26-join-form button,
.whitoo-explore-v2 .wx26-join-form input[type="submit"] {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

/* ============================ WELCOME BAR ============================ */

.wx26-welcome {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: var(--wx-gap);
    padding: 14px 18px;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: var(--wx-radius);
    background: var(--wx-panel);
}

.wx26-me {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.wx26-me img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(239, 43, 82, .5);
    /* whitoo-perf.css: img{content-visibility:auto} can collapse sized images */
    content-visibility: visible;
}

.wx26-me > div {
    min-width: 0;
    line-height: 1.3;
}

.wx26-me span {
    display: block;
    color: var(--wx-muted);
    font-size: 9.8px;
    font-weight: 600;
}

.wx26-me strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx26-me small {
    color: var(--wx-muted);
    font-size: 10px;
}

.wx26-woo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 16px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.wx26-woo.is-active {
    border-color: rgba(16, 185, 129, .45);
    background: linear-gradient(160deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .06));
    box-shadow: 0 6px 18px rgba(16, 185, 129, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.wx26-woo > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--wx-muted);
    font-size: 16px;
}

.wx26-woo.is-active > i {
    background: rgba(255, 207, 77, .16);
    color: #ffcf4d;
}

.wx26-woo > div {
    line-height: 1.3;
}

.wx26-woo strong {
    display: block;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}

.wx26-woo small {
    color: var(--wx-muted);
    font-size: 9.8px;
}

.wx26-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
}

.wx26-quick {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    transform-origin: right center;
    will-change: transform, opacity;
}

/* Explore kisa yolu secildiginde mobildeki gibi menu yukariya akar. */
.wx26-quick.is-launching {
    animation: wx26-menu-launch .68s cubic-bezier(.22, 1, .36, 1) both;
}

.whitoo-explore-v2 .wx26-quick a.is-launching-target {
    z-index: 2;
    color: #fff !important;
    border-color: rgba(255, 77, 105, .92);
    background: linear-gradient(145deg, #f22d50, #b60e2c);
    box-shadow: 0 12px 32px rgba(239, 43, 82, .46), 0 0 0 5px rgba(239, 43, 82, .12);
    animation: wx26-shortcut-launch .58s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes wx26-menu-launch {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    38% { transform: translateY(-18px) scale(.985); opacity: .82; }
    68% { transform: translateY(-8px) scale(.995); opacity: .96; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes wx26-shortcut-launch {
    0% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-7px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wx26-quick.is-launching,
    .whitoo-explore-v2 .wx26-quick a.is-launching-target {
        animation-duration: .01ms !important;
    }
}

.whitoo-explore-v2 .wx26-quick a {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    color: #aeb6c6 !important;
    font-size: 18px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.whitoo-explore-v2 .wx26-quick a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    border-color: rgba(239, 43, 82, .55);
    background: linear-gradient(160deg, rgba(239, 43, 82, .3), rgba(190, 18, 60, .2));
    box-shadow: 0 6px 16px rgba(239, 43, 82, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Icon-only rail: the labels stay for screen readers */
.wx26-quick a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 2026-07-29: grouped and labelled Explore shortcuts. */
/* 2026-08-09: dordunculu grup (Gelistirici) eklendi. Onceden 3 sutun ve
   760px sinir vardi; dorduncu grup alt satira dusuyordu. Artik dordu de
   YAN YANA durur ve sagdaki bos alan kullanilir. */
.whitoo-explore-v2 .wx26-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    width: min(1010px, 100%);
}
.whitoo-explore-v2 .wx26-quick-group {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 13px;
    background: rgba(7,12,22,.46);
}
.whitoo-explore-v2 .wx26-quick-title {
    display: block;
    margin: 0 2px 7px;
    color: rgba(190,199,216,.66);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.whitoo-explore-v2 .wx26-quick-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.whitoo-explore-v2 .wx26-quick .wx26-quick-items a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 13.5px;
}
.whitoo-explore-v2 .wx26-quick .wx26-quick-items a span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: rgba(222,227,237,.82);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
/* Dort sutun daralinca once ikiye, sonra teke duser. */
@media (max-width: 1180px) {
    .whitoo-explore-v2 .wx26-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .whitoo-explore-v2 .wx26-quick { grid-template-columns: 1fr; }
}

/* ============================ CATEGORY PILLS ============================ */

.wx26-cats {
    margin-bottom: var(--wx-gap);
}

.wx26-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: var(--wx-panel);
}

.wx26-cat-arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--wx-line);
    border-radius: 8px;
    background: var(--wx-panel-2);
    color: var(--wx-muted);
    cursor: pointer;
}

.wx26-cat-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.wx26-cat-chips {
    display: flex;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.wx26-cat-chips::-webkit-scrollbar {
    display: none;
}

/* SAYFA KAYMASI DUZELTMESI
   Cipin icindeki gizli radio 'position:absolute' idi ama .wx26-chip
   konumlandirilmamisti; bu yuzden girdinin konum referansi body oluyordu
   (body position:relative). Girdi boylece .wx26-cat-chips seridinin
   overflow kirpmasindan KACIYOR ve serit boyunca x=4031'e kadar uzaniyordu.
   Sonuc: belge genisligi 1920 yerine 4044. body{overflow-x:hidden} gorunur
   kaydirma cubugunu gizledigi icin fark edilmiyordu, ama gercek fare
   tiklamasi etiketin girdisini ODAKLIYOR ve tarayici onu gorunur kilmak
   icin sayfayi saga kaydiriyordu. Geri donecek cubuk olmadigindan sayfa
   kaymis halde kaliyordu.
   Cozum: konum referansini cipin kendisi yap; girdi seridin icinde kalir,
   kirpilir ve odaklandiginda sayfayi degil SERIDI kaydirir. */
.wx26-chip {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.wx26-chip input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wx26-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--wx-line);
    border-radius: 9px;
    background: var(--wx-panel-2);
    color: var(--wx-muted);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wx26-chip > span i {
    font-size: 14px;
}

.wx26-chip:hover > span {
    color: var(--wx-text);
    border-color: rgba(255, 255, 255, .18);
}

.wx26-chip input:checked + span {
    border-color: transparent;
    background: linear-gradient(135deg, #f43f5e, #be123c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 43, 82, .32);
}

/* ============================ TOP COMMUNITIES ============================ */

.wx26-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: var(--wx-gap);
    padding: 12px 14px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: var(--wx-panel);
}

.wx26-top-copy {
    min-width: 0;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search {
    flex: 0 1 380px;
    min-height: 42px;
    padding: 0 5px 0 0;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: var(--wx-panel-2) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.whitoo-explore-v2 .wx26-top .input-icon-addon {
    color: var(--wx-muted);
    background: transparent;
    border: 0;
}

.whitoo-explore-v2 .wx26-top .search_chatroom {
    border: 0 !important;
    background: transparent !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

.whitoo-explore-v2 .wx26-top .search_chatroom::placeholder {
    color: var(--wx-muted);
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-actions {
    border: 0 !important;
    background: transparent !important;
    gap: 4px;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-action {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--wx-muted) !important;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-action:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1200px) {
    .wx26-discover {
        grid-template-columns: minmax(0, 1fr);
    }

    .wx26-welcome {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .wx26-quick {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .wx26-join {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wx26-join-form {
        grid-column: 1 / -1;
    }
}

/* ---------- MOBILE COMPACT: keep cards 2-up, tighten spacing ---------- */
@media (max-width: 640px) {
    .whitoo-explore-v2 { --wx-gap: 10px; }

    .wx26-discover {
        padding: 14px;
        gap: 14px;
    }

    .wx26-discover-copy h2 { font-size: 19px; margin: 8px 0 6px; }
    .wx26-discover-copy p { font-size: 11.5px; margin-bottom: 10px; }
    .wx26-chips { gap: 9px; }

    .wx26-cards { gap: 8px; }
    .wx26-card { padding: 11px 10px; gap: 8px; grid-template-columns: auto minmax(0, 1fr); }
    .wx26-ci { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
    .wx26-ct strong { font-size: 9.8px; }
    .wx26-ct small { font-size: 9.2px; }
    .wx26-go { display: none; }

    .wx26-join { padding: 12px; gap: 10px; }
    .wx26-join-ico { width: 36px; height: 36px; font-size: 17px; }
    .wx26-join-copy strong { font-size: 12.5px; }

    .wx26-welcome { padding: 10px 12px; gap: 10px; }
    .wx26-me img { width: 36px; height: 36px; }
    .wx26-me strong { font-size: 12.5px; }
    .whitoo-explore-v2 .wx26-quick a { width: 32px; height: 32px; font-size: 15px; }

    .wx26-chip > span { height: 30px; padding: 0 11px; font-size: 10.5px; }
    .wx26-top { padding: 10px; }
    .whitoo-explore-v2 .wx26-top .whitoo-room-search { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    /* Still 2-up — do not collapse to a single tall column. */
    .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wx26-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .wx26-ct strong { font-size: 9.2px; }
}