/* Soundlarp (soundlarp.online) — menu item, inline chips, link cards.
   The pink → violet tile is the Soundlarp mark. */

:root { --sl-a: #ec4899; --sl-b: #7c3aed; }

/* Menu item: tile + name + arrow, like a profile link card */
.sidebar-item.sl-nav { position: relative; }
.sl-nav-ico {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--sl-a), var(--sl-b));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(168, 85, 247, .35);
}
.sl-nav-ico svg { width: 15px; height: 15px; }
.sl-nav-go { width: 16px; height: 16px; margin-left: auto; color: var(--text-muted); opacity: .7; transition: transform .15s ease, opacity .15s ease; }
.sidebar-item.sl-nav:hover .sl-nav-go { transform: translateX(3px); opacity: 1; }

/* Inline chip inside post / message text */
.sl-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px 1px 3px;
    margin: 0 1px;
    border-radius: 999px;
    border: 1px solid rgba(192, 132, 252, .35);
    background: linear-gradient(100deg, rgba(236, 72, 153, .14), rgba(124, 58, 237, .1));
    color: var(--text-main) !important;
    font-weight: 700;
    font-size: .92em;
    text-decoration: none !important;
    vertical-align: 1px;
    white-space: nowrap;
}
.sl-inline:hover { border-color: rgba(192, 132, 252, .7); }
.sl-inline-ico { width: 17px; height: 17px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--sl-a), var(--sl-b)); }
.sl-inline-ico svg { width: 11px; height: 11px; }

/* Card under a post or a message (image 2 of the brief) */
.sl-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    max-width: 360px;
    margin-top: 10px;
    padding: 9px 16px 9px 9px;
    border-radius: 999px;
    border: 1.5px solid rgba(168, 85, 247, .38);
    background:
        linear-gradient(100deg, rgba(236, 72, 153, .10), rgba(124, 58, 237, .06) 60%, transparent),
        rgba(18, 12, 22, .6);
    color: var(--text-main) !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
body.light-theme .sl-card { background: linear-gradient(100deg, rgba(236, 72, 153, .08), rgba(124, 58, 237, .05) 60%, transparent), #fff; }
.sl-card:hover { border-color: rgba(192, 132, 252, .8); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(168, 85, 247, .2); }
.sl-card-ico {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--sl-a), var(--sl-b));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px rgba(168, 85, 247, .4);
}
.sl-card-ico svg { width: 20px; height: 20px; }
.sl-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-card-copy b { font-size: 16px; font-weight: 800; letter-spacing: -.1px; }
.sl-card-copy small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-card-go { flex: none; width: 20px; height: 20px; color: var(--text-muted); transition: transform .15s ease, color .15s ease; }
.sl-card-go svg { width: 100%; height: 100%; display: block; }
.sl-card:hover .sl-card-go { transform: translateX(3px); color: var(--text-main); }

/* Soundlarp tab: the site inside the messenger ----------------------------- */
#soundlarpTabContent { padding: 0; }
.sl-view { display: flex; flex-direction: column; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
.sl-view-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background:
        linear-gradient(100deg, rgba(236, 72, 153, .10), rgba(124, 58, 237, .06) 55%, transparent),
        var(--card-bg);
}
.sl-view-head .sl-card-ico { width: 38px; height: 38px; border-radius: 12px; }
.sl-view-head .sl-card-ico svg { width: 18px; height: 18px; }
.sl-view-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-view-copy b { font: 800 16px/1.1 'Outfit', 'Plus Jakarta Sans', sans-serif; color: var(--text-main); }
.sl-view-copy small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-view-ext {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, .4);
    color: var(--text-main) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}
.sl-view-ext svg { width: 14px; height: 14px; }
.sl-view-ext:hover { border-color: rgba(192, 132, 252, .8); }
.sl-view-frame { position: relative; flex: 1; min-height: 0; background: #0b0a10; }
.sl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s ease; }
.sl-view-frame.is-loaded .sl-frame { opacity: 1; }
.sl-view-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-weight: 700; font-size: 14px; }
.sl-view-frame.is-loaded .sl-view-loading { display: none; }
@media (max-width: 800px) {
    .sl-view { height: calc(100dvh - 57px - 72px); }
    .sl-view-ext { padding: 8px 10px; font-size: 0; gap: 0; }
    .sl-view-ext svg { width: 16px; height: 16px; }
}

/* Mini pill while Soundlarp keeps playing in another tab */
.sl-pill {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, .45);
    background: rgba(18, 12, 26, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 72, 153, .12);
    animation: sl-pill-in .3s cubic-bezier(.16, 1, .3, 1);
}
.sl-pill[hidden] { display: none; }
body.light-theme .sl-pill { background: rgba(255, 255, 255, .95); }
.sl-pill button { border: 0; background: transparent; color: var(--text-main); font: inherit; cursor: pointer; }
.sl-pill-back { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13.5px; font-weight: 800; }
.sl-pill-back:hover { background: rgba(168, 85, 247, .14); }
.sl-pill-back .sl-inline-ico { width: 26px; height: 26px; border-radius: 9px; }
.sl-pill-back .sl-inline-ico svg { width: 14px; height: 14px; }
.sl-pill-x { width: 30px; height: 30px; border-radius: 50%; font-size: 18px !important; color: var(--text-muted) !important; }
.sl-pill-x:hover { background: rgba(244, 33, 46, .14); color: #f87171 !important; }
.sl-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sl-eq b { width: 3px; border-radius: 2px; background: linear-gradient(var(--sl-a), var(--sl-b)); animation: sl-eq 1s ease-in-out infinite; }
.sl-eq b:nth-child(2) { animation-delay: -.3s; }
.sl-eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes sl-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@keyframes sl-pill-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) {
    .sl-pill { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .sl-eq b { animation: none; height: 8px; } }

/* Account link in the Soundlarp tab */
.sl-link { display: flex; align-items: center; gap: 8px; flex: none; }
.sl-link-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.sl-link-state svg { width: 14px; height: 14px; }
.sl-link-state.is-on { color: #c084fc; }
.sl-link-btn {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--sl-a), var(--sl-b));
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.sl-link-btn.is-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
.sl-link-btn.is-ghost:hover { color: #f87171; border-color: rgba(244, 33, 46, .4); }
@media (max-width: 800px) { .sl-link-state { display: none; } }

/* «Soundlarp · @name» on a linked profile */
.sub-user-branch.sl-profile-row { display: flex !important; width: 100%; margin: 8px 0 2px; }
.sl-profile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.sl-profile:hover { color: var(--text-main) !important; border-color: rgba(192, 132, 252, .45); background: rgba(168, 85, 247, .06); }
.sl-profile-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: #c084fc; flex: none; }
.sl-profile-ico svg { width: 14px; height: 14px; }
.sl-profile-copy { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.sl-profile-copy b { color: var(--text-main); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sl-profile-dot { opacity: .5; }
.sl-profile-go { font-size: 12px; opacity: .55; flex: none; }

/* «Войти в Soundlarp через xnight?» — asked inside the messenger, not in the frame */
.sl-consent {
    position: fixed;
    inset: 0;
    z-index: 100060;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sl-fade .2s ease;
}
.sl-consent-card {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 18px;
    border-radius: 24px;
    background: var(--card-bg, #0c0c0e);
    border: 1px solid rgba(168, 85, 247, .35);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    text-align: center;
    color: var(--text-main);
}
.sl-consent-card > b { font: 800 19px/1.2 'Outfit', 'Plus Jakarta Sans', sans-serif; }
.sl-consent-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.sl-consent-logos { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.sl-consent-logos .sl-card-ico { width: 46px; height: 46px; border-radius: 15px; }
.sl-consent-logos .sl-card-ico svg { width: 22px; height: 22px; }
.sl-consent-logos i { width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sl-a), #1d9bf0); }
.sl-consent-logos img { width: 46px; height: 46px; border-radius: 15px; object-fit: contain; background: #111214; border: 1px solid rgba(255, 255, 255, .14); padding: 8px; }
.sl-consent-who { padding: 10px; border-radius: 14px; background: rgba(128, 128, 128, .1); font-weight: 800; font-size: 14px; }
.sl-consent-who span { color: var(--text-muted); font-weight: 600; }
.sl-consent-card .sl-link-btn { width: 100%; height: 44px; font-size: 14.5px; }
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }