/* Social, finition : sélecteur Social / Hub, publications, actions, citations, sondages, réponses, Kapsules. */

/* ---------- Sélecteur Social / Hub ---------- */
#appKommuSwitcher { gap: 4px; margin: 10px 12px; padding: 4px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .03); }
#appKommuSwitcher button { border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .6); font-weight: 900; transition: background .25s ease, color .25s ease; }
#appKommuSwitcher button.is-active { background: linear-gradient(90deg, #ff6a3d, #ff5c8a); color: #1d0610; box-shadow: 0 6px 18px -6px #ff5c8a; }

/* ---------- Publications ---------- */
#appFeed .app-post,
#appPostDetail .app-post { position: relative; border-bottom: 0; transition: background .2s ease; }
#appFeed .app-post::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent); }
#appFeed .app-post:active { background: rgba(255, 255, 255, .015); }
#appFeed .app-post .app-post-meta strong { font-size: .98rem; }
#appFeed .app-post .app-post-head .app-avatar-frame-wrap .app-avatar { box-shadow: 0 0 0 2px #0f1013, 0 0 0 3.5px color-mix(in srgb, var(--post-accent, #ff6a3d) 70%, transparent); }
#appFeed .app-post-body { font-size: 1rem; line-height: 1.5; }
#appFeed .app-post-media,
#appFeed .app-carousel { border-radius: 18px; box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .9); }
#appFeed .app-post-media { border-color: rgba(255, 255, 255, .08); }

/* Libellés « a repartagé » et « épinglé ». */
.app-repost-label,
.app-pinned-label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 999px; background: rgba(83, 230, 165, .1); color: #7ff0bf; font-size: .7rem; font-weight: 800; }
.app-pinned-label { background: rgba(255, 179, 71, .12); color: #ffc97a; }

/* Citation : la publication d'origine dans une carte. */
.app-embedded-post { margin: 4px 0 12px 54px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.app-embedded-post .app-post-body { margin-left: 0; font-size: .92rem; }
.app-embedded-post .app-post-media { width: 100%; margin-left: 0; }
@media (max-width: 620px) { .app-embedded-post { margin-left: 0; } }

/* ---------- Barre d'actions ---------- */
#appFeed .app-post-actions,
#appPostDetail .app-post-actions { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-right: 6px; }
.app-post-actions .app-action { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border-radius: 999px; transition: background .2s ease, transform .15s ease; }
.app-post-actions .app-action:active { transform: scale(.9); }
.app-post-actions .app-action:hover { background: rgba(255, 255, 255, .05); }
.app-post-actions .app-action.app-action-keur.is-active { background: rgba(255, 92, 138, .14); box-shadow: inset 0 0 0 1px rgba(255, 92, 138, .4); color: #ff8fb0; }
.app-post-actions .app-action.app-action-ouin.is-active { background: rgba(255, 200, 87, .14); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .4); color: #ffd27a; }
.app-post-actions .app-action.app-action-repost.is-active { background: rgba(83, 230, 165, .14); color: #7ff0bf; }
.app-post-actions .app-action img { width: 22px; height: 22px; object-fit: contain; }

/* ---------- Sondages ---------- */
.app-poll { display: grid; gap: 8px; margin: 4px 0 12px 54px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(143, 92, 255, .14), transparent 60%), rgba(255, 255, 255, .02); }
.app-poll > strong { font-size: .95rem; }
.app-poll-option { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03); color: #fff; text-align: left; transition: border-color .2s ease, transform .15s ease; }
.app-poll-option:not(:disabled):active { transform: scale(.98); }
.app-poll-option > i { position: absolute; inset: 0 auto 0 0; z-index: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(143, 92, 255, .35), rgba(143, 92, 255, .12)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.app-poll-option > span, .app-poll-option > small { position: relative; z-index: 1; }
.app-poll-option > span { font-weight: 800; }
.app-poll-option > small { color: rgba(255, 255, 255, .7); font-weight: 800; font-variant-numeric: tabular-nums; }
.app-poll-option.is-selected { border-color: rgba(255, 106, 61, .7); }
.app-poll-option.is-selected > i { background: linear-gradient(90deg, rgba(255, 106, 61, .5), rgba(255, 179, 71, .2)); }
.app-poll-option.is-selected > span::before { content: "✓ "; color: #ffb347; }
.app-poll-voters-toggle { justify-self: start; border: 0; background: none; color: #b79bff; font-size: .74rem; font-weight: 800; }
@media (max-width: 620px) { .app-poll { margin-left: 0; } }

/* ---------- Réponses ---------- */
.app-comments > summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 4px 0 8px 54px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .75); font-size: .76rem; font-weight: 800; list-style: none; cursor: pointer; }
.app-comments > summary::-webkit-details-marker { display: none; }
.app-comments > summary::before { content: "💬"; }
.app-comments[open] > summary { background: rgba(255, 106, 61, .14); color: #ffb08f; }
@media (max-width: 620px) { .app-comments > summary { margin-left: 0; } }
.app-comment { position: relative; align-items: start; margin-left: calc(var(--comment-depth, 0) * 14px); }
.app-comment > .app-avatar-button { align-self: start; margin-top: 2px; }
.app-comment-head button { padding: 0; border: 0; background: none; color: inherit; }
.app-comment::before { position: absolute; top: 44px; bottom: 6px; left: 17px; width: 2px; content: ""; border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .12), transparent); }
.app-comment > div:last-child { padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, .04); }
.app-comment-head strong { font-size: .84rem; }
.app-comment-body { font-size: .9rem; line-height: 1.45; }
.app-comment-reaction.is-active { background: rgba(255, 92, 138, .14); border-radius: 999px; }

/* ---------- Kapsules : l'anneau des nouvelles tourne doucement ---------- */
.app-kapsule-ring.is-new { position: relative; background: none; }
.app-kapsule-ring.is-new::before { position: absolute; inset: 0; z-index: -1; content: ""; border-radius: 50%; background: conic-gradient(from 0deg, #ff6a3d, #ff5c8a, #ffc857, #8b3dff, #ff6a3d); animation: social-ring 4s linear infinite; }
.app-kapsule-ring { isolation: isolate; transition: transform .15s ease; }
.app-kapsule-ring:active { transform: scale(.94); }
.app-kapsule small { font-weight: 700; }

@keyframes social-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-kapsule-ring.is-new::before { animation: none; } .app-poll-option > i { transition: none; } }

/* ---------- Profil minimaliste : l'essentiel en haut, le reste dans « Infos » ---------- */
#appProfileView .app-profile-summary { padding-bottom: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
#appProfileView .app-profile-banner { border-radius: 0 0 22px 22px; }
#appProfileView .app-profile-identity { display: grid; justify-items: center; gap: 10px; margin-top: -46px; padding: 0 16px; text-align: center; }
#appProfileView .app-profile-avatar-wrap .app-profile-avatar { box-shadow: 0 0 0 4px var(--app-bg, #0f1013), 0 0 0 6px var(--screen); }
#appProfileView .app-profile-name { display: grid; justify-items: center; gap: 2px; }
#appProfileView .app-profile-name strong { font-size: 1.45rem; }
#appProfileView .app-profile-name small { color: rgba(255, 255, 255, .5); font-size: .82rem; }
#appProfileView .app-profile-line { margin-top: 4px; color: rgba(255, 255, 255, .55); font-size: .74rem; font-style: normal; }
#appProfileView .app-profile-line.is-online { color: #7ff0bf; }
#appProfileView .app-profile-actions { display: flex; justify-content: center; gap: 8px; }
#appProfileView .app-profile-edit-button { min-height: 36px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #fff; font-size: .78rem; font-weight: 800; }
#appProfileView .app-profile-edit-button.is-icon { width: 36px; padding: 0; }
#appProfileView .app-profile-metrics { display: flex; justify-content: center; gap: 26px; margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
#appProfileView .app-profile-metrics span { display: grid; justify-items: center; gap: 0; }
#appProfileView .app-profile-metrics strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: 1.15rem; }
#appProfileView .app-profile-metrics small { color: rgba(255, 255, 255, .5); font-size: .7rem; }
#appProfileView .app-profile-metrics > i { display: none; }
#appProfileView .app-profile-track { width: min(100%, 360px); margin: 16px auto 0; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); text-align: left; }
/* Onglets en simple soulignement. */
#appProfileView .app-profile-tabs { gap: 0; margin: 4px 0 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none; }
#appProfileView .app-profile-tabs button { position: relative; flex: 1; border-radius: 0; background: none; color: rgba(255, 255, 255, .5); font-weight: 800; }
#appProfileView .app-profile-tabs button.is-active { background: none; color: #fff; }
#appProfileView .app-profile-tabs button.is-active::after { position: absolute; right: 30%; bottom: -1px; left: 30%; height: 3px; content: ""; border-radius: 3px; background: var(--screen); }
#appProfileView .app-profile-tabs button span { margin-left: 4px; background: none; color: rgba(255, 255, 255, .4); }
/* Onglet Infos : progression, vitrine et détails, rangés. */
#appProfileView [data-profile-panel="about"] { display: grid; gap: 12px; }
#appProfileView [data-profile-panel="about"] .app-profile-kafprogress,
#appProfileView [data-profile-panel="about"] .app-profile-showcase { margin: 0; }
#appProfileView > .app-screen-heading { display: none; }
#appProfileView .app-profile-summary .app-profile-identity { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
#appProfileView .app-profile-summary .app-profile-identity > * { grid-column: 1; grid-row: auto; justify-self: center; }
#appProfileView .app-profile-actions { flex-wrap: nowrap; width: auto; }
#appProfileView .app-profile-actions .app-profile-edit-button:not(.is-icon) { width: auto; }

/* Le sélecteur Social / Hub reste sous l'en-tête quand on fait défiler. */
#appKommuSwitcher { position: sticky; top: var(--app-header-height, 0px); z-index: 16; background: rgba(15, 16, 19, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9); }