/* Room comunitario del residente. Todo el alcance queda aislado bajo resident-community-page. */
.resident-community-page {
    --room-ink:#183747;
    --room-muted:#687982;
    --room-gold:#b48b47;
    --room-sand:#f2eadc;
    --room-paper:#fffefa;
    --room-avatar-start:#0d4661;
    --room-avatar-end:#1b607d;
    background-color:#f3eee6;
    background-image:
        radial-gradient(circle at 12% 18%,rgba(180,139,71,.06) 0 1px,transparent 1.6px),
        linear-gradient(180deg,rgba(255,255,255,.68),transparent 420px);
    background-size:22px 22px,100% 100%;
}
.resident-community-page * { min-width:0; }
.resident-community-shell { width:min(100%,820px); }
.resident-room-heading { margin:0 auto 1.25rem; padding:.8rem .2rem; }
.resident-room-heading>span { color:var(--room-gold); font-size:.75rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.resident-room-heading h1 { margin:.2rem 0 .35rem; color:var(--room-ink); font-size:clamp(1.8rem,5vw,2.65rem); font-weight:850; letter-spacing:-.04em; }
.resident-room-heading p { max-width:620px; margin:0; color:var(--room-muted); line-height:1.55; }
.resident-feed { display:grid; gap:1.35rem; }
.resident-room-empty { border:1px solid var(--app-border); border-radius:24px; padding:clamp(2rem,8vw,4rem) 1.2rem; background:#fff; text-align:center; box-shadow:0 14px 34px rgba(20,47,61,.07); }
.resident-room-empty .resident-ui-icon { width:2.4rem; height:2.4rem; color:var(--room-gold); }
.resident-room-empty h2 { margin:.7rem 0 .25rem; color:var(--room-ink); font-size:1.25rem; }
.resident-room-empty p { margin:0; color:var(--room-muted); }
.resident-ui-icon { width:1em; height:1em; display:inline-block; flex:0 0 auto; overflow:visible; fill:none; vertical-align:-.125em; }

.resident-post-card {
    --room-card-rotation:0deg;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(86,71,50,.16);
    border-radius:20px 22px 18px 21px;
    background-color:var(--room-paper);
    background-image:linear-gradient(105deg,rgba(183,151,97,.025),transparent 42%,rgba(255,255,255,.5));
    box-shadow:0 12px 30px rgba(43,44,38,.09);
    opacity:1;
    transform:rotate(var(--room-card-rotation));
    transform-origin:50% 6%;
    transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
.resident-feed>.resident-post-card:nth-child(3n+1) { --room-card-rotation:-.18deg; }
.resident-feed>.resident-post-card:nth-child(3n+2) { --room-card-rotation:.2deg; }
.resident-post-card::before { content:""; width:74px; height:18px; position:absolute; z-index:2; top:-7px; left:50%; background:rgba(225,204,157,.62); box-shadow:0 2px 4px rgba(78,55,30,.08); transform:translateX(-50%) rotate(-1deg); pointer-events:none; }
.resident-post-card.is-pinned { border-top:3px solid var(--room-gold); }
.resident-post-card.is-pinned::before { width:17px; height:17px; top:-6px; border:3px solid #e7ca84; border-radius:50%; background:#76502c; box-shadow:0 4px 7px rgba(47,31,19,.28); }
.resident-post-card:hover,.resident-post-card:focus-within { border-color:rgba(180,139,71,.36); box-shadow:0 17px 38px rgba(43,44,38,.115); transform:translateY(-2px) rotate(var(--room-card-rotation)); }
.community-motion-enabled .resident-post-card.community-reveal-pending:not(.is-visible) { opacity:0; transform:translateY(14px) rotate(var(--room-card-rotation)) scale(.993); }
.community-motion-enabled .resident-post-card.community-reveal-pending.is-visible { animation:residentCardIn .45s cubic-bezier(.2,.75,.25,1) both; }
@keyframes residentCardIn { from { opacity:0; transform:translateY(14px) rotate(var(--room-card-rotation)) scale(.993); } to { opacity:1; transform:rotate(var(--room-card-rotation)); } }

.resident-post-header { display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.15rem .65rem; }
.resident-avatar { position:relative; overflow:hidden; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--room-avatar-start),var(--room-avatar-end)); font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.24); text-transform:uppercase; box-shadow:0 5px 12px rgba(20,47,61,.2); }
.resident-avatar>span { position:relative; z-index:0; }
.resident-avatar>img { width:100%; height:100%; position:absolute; z-index:1; inset:0; display:block; object-fit:cover; }
.resident-avatar>img[hidden] { display:none; }
.resident-author-avatar { width:46px; height:46px; border:2px solid #fff; outline:1px solid rgba(13,70,97,.28); }
.resident-author-copy { display:flex; flex:1; flex-direction:column; }
.resident-author-copy>strong { overflow:hidden; color:var(--room-ink); font-size:.98rem; text-overflow:ellipsis; white-space:nowrap; }
.resident-author-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .38rem; color:var(--room-muted); font-size:.75rem; }
.resident-author-meta>span:first-child { display:inline-flex; align-items:center; gap:.22rem; }
.resident-author-meta .resident-ui-icon { color:var(--room-gold); }
.resident-pinned-badge { flex:0 0 auto; border-radius:999px; padding:.3rem .55rem; color:#654916; background:#f8e8bd; font-size:.67rem; font-weight:850; }
.resident-post-body { padding:.3rem 1.2rem 1rem; }
.resident-category { display:inline-flex; align-items:center; gap:.3rem; margin-bottom:.55rem; border-radius:999px; padding:.28rem .55rem; color:#745c32; background:#f4ead8; font-size:.68rem; font-weight:820; }
.resident-post-title { color:inherit; text-decoration:none; }
.resident-post-title h2 { margin:0 0 .5rem; color:var(--room-ink); font-size:clamp(1.14rem,3vw,1.4rem); font-weight:840; line-height:1.25; }
.resident-post-title:hover h2,.resident-post-title:focus-visible h2 { color:#815f28; }
.resident-post-body>p { margin:0; color:#2a3e48; font-size:.95rem; line-height:1.62; overflow-wrap:anywhere; white-space:pre-wrap; }

.resident-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(190px,1fr); gap:3px; overflow:hidden; margin:.15rem 0; background:#e9e0d3; }
.resident-photo-item { min-width:0; min-height:0; position:relative; margin:0; aspect-ratio:4/3; }
.resident-photo-open { width:100%; height:100%; display:block; overflow:hidden; border:0; padding:0; background:#e6ded2; cursor:zoom-in; }
.resident-photo-open img { width:100%; height:100%; display:block; object-fit:cover; transition:filter .22s ease,transform .3s ease; }
.resident-photo-open:hover img,.resident-photo-open:focus-visible img { filter:brightness(.95); transform:scale(1.025); }
.resident-photo-open:focus-visible { position:relative; z-index:2; outline:3px solid var(--room-gold); outline-offset:-3px; }
.resident-photo-count-1 { grid-template-columns:1fr; }
.resident-photo-count-1 .resident-photo-item { aspect-ratio:16/10; }
.resident-photo-count-3 { grid-template-columns:1.35fr 1fr; }
.resident-photo-count-3 .resident-photo-item:first-child { grid-row:span 2; aspect-ratio:auto; }

.resident-engagement { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin:0 1.1rem; border-bottom:1px solid rgba(86,71,50,.13); padding:.75rem 0; color:var(--room-muted); font-size:.76rem; }
.resident-reaction-total,.resident-engagement-counts,.resident-engagement-counts>span,.resident-engagement-counts>button { display:inline-flex; align-items:center; gap:.3rem; }
.resident-reaction-icons { display:inline-flex; align-items:center; margin-right:.15rem; color:#b44954; filter:drop-shadow(0 2px 2px rgba(0,0,0,.1)); }
.resident-reaction-icons>span { margin-right:-.28rem; position:relative; z-index:1; }
.resident-reaction-icons .resident-ui-icon { width:1.1rem; height:1.1rem; fill:#f8dadd; }
.resident-engagement-counts { justify-content:flex-end; gap:.75rem; }
.resident-engagement-counts button { min-height:36px; border:0; border-radius:9px; padding:.3rem .38rem; color:inherit; background:transparent; cursor:pointer; }
.resident-engagement-counts button:hover,.resident-engagement-counts button:focus-visible { color:var(--app-primary); background:#f1ece4; }

.resident-reactions { padding:.5rem .9rem .7rem; }
.resident-reaction-breakdown { min-height:.2rem; display:flex; flex-wrap:wrap; gap:.3rem; }
.resident-reaction-breakdown span { border-radius:999px; padding:.18rem .42rem; color:#725b35; background:#f5ecdd; font-size:.62rem; font-weight:750; }
.resident-reaction-buttons { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.22rem; margin-top:.4rem; }
.resident-reaction-buttons form { margin:0; }
.resident-reaction-button { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.1rem; position:relative; border:0; border-radius:12px; padding:.3rem .1rem; color:#64737a; background:transparent; font-size:.6rem; font-weight:760; transition:color .17s ease,background .17s ease,transform .17s ease; }
.resident-reaction-button .community-reaction-glyph { display:grid; place-items:center; font-size:1.12rem; line-height:1; transform-origin:50% 80%; }
.resident-reaction-button:hover,.resident-reaction-button:focus-visible { color:var(--room-ink); background:#f4efe7; transform:translateY(-1px); }
.resident-reaction-button:active { transform:scale(.96); }
.resident-reaction-button.is-selected { color:#71521e; background:#f5e6c8; box-shadow:inset 0 0 0 1px #dec18b; }
.resident-reaction-button.is-selected .community-reaction-glyph { transform:scale(1.08); }
.resident-reaction-button.is-pending::after { content:""; width:4px; height:4px; position:absolute; right:7px; bottom:6px; border-radius:50%; background:var(--room-gold); }
.resident-reaction-button.is-reacting .community-reaction-glyph { animation:residentReactionPop .24s cubic-bezier(.2,.8,.3,1.35); }
@keyframes residentReactionPop { 0% { transform:scale(.9); } 65% { transform:scale(1.2); } 100% { transform:scale(1.08); } }

.resident-comments { scroll-margin-top:80px; border-top:1px solid rgba(86,71,50,.13); padding:.78rem 1rem .85rem; background:rgba(251,248,242,.84); }
.resident-comments-closed { display:flex; align-items:center; gap:.45rem; border-radius:12px; padding:.72rem; color:#68747a; background:#ece9e3; font-size:.8rem; }
.resident-comment-thread { display:grid; gap:.5rem; }
.resident-comment { display:flex; align-items:flex-start; gap:.42rem; min-width:0; }
.resident-comment-avatar { width:32px; height:32px; border:1px solid rgba(255,255,255,.92); font-size:.64rem; outline:1px solid rgba(13,70,97,.2); }
.resident-comment-main { min-width:0; flex:1; }
.resident-comment-bubble { width:fit-content; max-width:min(100%,620px); border:1px solid rgba(86,71,50,.1); border-radius:5px 14px 14px; padding:.46rem .62rem .5rem; background:#f2ece2; box-shadow:0 2px 6px rgba(43,44,38,.04); }
.resident-comment-bubble header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.14rem .58rem; }
.resident-comment-bubble strong { color:var(--room-ink); font-size:.77rem; }
.resident-comment-bubble header span { color:var(--room-muted); font-size:.62rem; }
.resident-comment-bubble p { margin:.18rem 0 0; font-size:.81rem; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap; }
.resident-replies { display:grid; gap:.42rem; margin:.45rem 0 0 2.25rem; padding-left:.55rem; border-left:2px solid rgba(180,139,71,.2); }
.resident-comment.is-reply .resident-comment-bubble { background:#f8f3eb; }
.resident-comment.is-sticker-only .resident-comment-bubble { border:0; padding:.12rem .2rem; background:transparent; box-shadow:none; }
.resident-comment.is-sticker-only .resident-comment-bubble>header { width:fit-content; border-radius:10px; padding:.3rem .48rem; background:#f2ece2; }
.resident-comment-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.08rem .38rem; margin:.08rem 0 0 .35rem; }
.resident-comment-actions form { margin:0; }
.resident-comment-actions summary,.resident-comment-actions>form>button { min-height:28px; display:inline-flex; align-items:center; gap:.2rem; border:0; border-radius:8px; padding:.14rem .26rem; color:#705c39; background:transparent; cursor:pointer; font-size:.64rem; font-weight:800; list-style:none; }
.resident-comment-actions summary::-webkit-details-marker { display:none; }
.resident-comment-actions summary:hover,.resident-comment-actions summary:focus-visible,.resident-comment-actions>form>button:hover,.resident-comment-actions>form>button:focus-visible { background:#eee6d8; }
.resident-comment-actions .danger { color:#9a3741; }
.resident-comment-actions details[open] { width:min(100%,520px); flex-basis:100%; }
.resident-comment-actions details form { display:grid; gap:.4rem; margin-top:.3rem; }
.resident-comment-actions textarea { width:100%; min-height:76px; border:1px solid var(--app-border); border-radius:12px; padding:.65rem; resize:vertical; }
.resident-small-button { width:max-content; min-height:38px; border:0; border-radius:999px; padding:.45rem .75rem; color:#fff; background:var(--app-primary); font-size:.7rem; font-weight:800; }
.resident-comments-empty { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.75rem; color:var(--room-muted); font-size:.78rem; text-align:center; }
.resident-comment.is-new { animation:residentCommentIn .34s cubic-bezier(.2,.75,.25,1) both; }
.resident-comments.is-updated .resident-comment-thread { animation:residentThreadRefresh .3s ease-out; }
@keyframes residentCommentIn { from { opacity:0; transform:translateY(7px) scale(.986); } to { opacity:1; transform:none; } }
@keyframes residentThreadRefresh { 50% { opacity:.84; } }

.resident-comment-composer { display:flex; align-items:flex-start; gap:.52rem; margin-top:.9rem; }
.resident-comment-editor { min-width:0; flex:1; overflow:hidden; border:1px solid rgba(86,71,50,.18); border-radius:17px; background:#fff; box-shadow:0 5px 14px rgba(43,44,38,.045); transition:border-color .18s ease,box-shadow .18s ease; }
.resident-comment-editor:focus-within { border-color:var(--room-gold); box-shadow:0 0 0 3px rgba(180,139,71,.12); }
.resident-comment-editor>textarea { width:100%; min-height:43px; max-height:160px; display:block; border:0; padding:.7rem .78rem .42rem; background:transparent; font-size:.82rem; line-height:1.45; resize:none; }
.resident-comment-editor>textarea:focus { outline:0; }
.resident-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.35rem; border-top:1px dashed rgba(86,71,50,.14); padding:.48rem .55rem .52rem .72rem; }
.resident-composer-footer small { color:var(--room-muted); font-size:.62rem; }
.resident-send-button { min-width:92px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; border:0; border-radius:999px; padding:.5rem .75rem; color:#fff; background:var(--app-primary); font-size:.72rem; font-weight:820; transition:background .17s ease,transform .17s ease; }
.resident-send-button:hover,.resident-send-button:focus-visible { background:var(--app-primary-dark); transform:translateY(-1px); }
.resident-send-button:active,.resident-small-button:active { transform:scale(.97); }
.resident-send-button:disabled,.resident-small-button:disabled,.resident-reaction-button:disabled { cursor:wait; opacity:.55; }
.resident-field-error { margin:.15rem .7rem .45rem; color:#9b2f3d; font-size:.7rem; }
.resident-field-error:empty { display:none; }

.resident-media-controls { display:grid; gap:.32rem; padding:0 .55rem; }
.resident-media-controls>small { color:var(--room-muted); font-size:.6rem; }
.resident-comment-editor>.resident-media-controls>small { display:none; }
.resident-media-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.28rem; }
.resident-media-toolbar button { min-height:36px; display:inline-flex; align-items:center; gap:.25rem; border:1px solid #d8c9b4; border-radius:999px; padding:.34rem .52rem; color:#695530; background:#fffdfa; cursor:pointer; font-size:.66rem; font-weight:800; transition:background .17s ease,border-color .17s ease,transform .17s ease; }
.resident-media-toolbar button:hover,.resident-media-toolbar button:focus-visible { border-color:var(--room-gold); background:#fff6e5; transform:translateY(-1px); }
.resident-media-toolbar button:active { transform:scale(.97); }
.resident-media-selection { width:fit-content; max-width:100%; display:flex; align-items:center; gap:.42rem; border:1px dashed #cdb68f; border-radius:12px; padding:.36rem; background:#fffaf0; }
.resident-media-selection[hidden] { display:none; }
.resident-media-selection img { width:54px; height:54px; border-radius:8px; object-fit:contain; background:#fff; }
.resident-media-selection span { overflow:hidden; max-width:180px; color:var(--room-ink); font-size:.64rem; font-weight:740; text-overflow:ellipsis; white-space:nowrap; }
.resident-media-selection button { border:0; color:#9a3741; background:transparent; font-size:.64rem; font-weight:820; }
.resident-remove-media { display:flex; align-items:center; gap:.35rem; color:#705c39; font-size:.65rem; font-weight:730; }

.resident-comment-sticker { display:grid; place-items:start; padding:.1rem 0 0; }
.resident-comment-sticker img { width:clamp(96px,20vw,160px); height:clamp(96px,20vw,160px); object-fit:contain; filter:drop-shadow(0 5px 5px rgba(65,42,23,.14)); }
.resident-comment.is-new .resident-comment-sticker img { animation:residentStickerIn .28s cubic-bezier(.2,.75,.25,1.15) both; }
@keyframes residentStickerIn { from { opacity:0; transform:translateY(4px) scale(.96); } to { opacity:1; transform:none; } }
.resident-comment-gif { margin-top:.28rem; }
.resident-comment-gif img { width:min(260px,100%); height:auto; max-height:260px; display:block; border-radius:11px; object-fit:contain; background:#eee7dc; box-shadow:0 4px 12px rgba(43,44,38,.12); }
.resident-comment-photo { width:min(220px,100%); margin-top:.28rem; }
.resident-comment-photo .resident-photo-open { height:auto; aspect-ratio:auto; border:4px solid #fff; border-bottom-width:8px; border-radius:3px; box-shadow:0 5px 12px rgba(43,44,38,.14); transform:rotate(-.25deg); }
.resident-comment-photo .resident-photo-open img { width:100%; height:auto; max-height:240px; object-fit:contain; background:#eee7dc; }

.resident-media-sheet { width:min(92vw,650px); max-height:min(78vh,650px); overflow:auto; position:fixed; z-index:2000; inset:50% auto auto 50%; border:1px solid rgba(86,71,50,.2); border-radius:20px; padding:.8rem; background:#fffefa; box-shadow:0 26px 70px rgba(20,32,37,.3); transform:translate(-50%,-50%); animation:residentSheetIn .2s ease-out both; }
.resident-media-sheet[hidden] { display:none; }
.resident-media-sheet::before { content:""; position:fixed; z-index:-1; inset:-100vh; background:rgba(12,30,39,.45); }
.resident-media-sheet>header { position:sticky; z-index:2; top:-.8rem; display:flex; align-items:center; justify-content:space-between; margin:-.8rem -.8rem .65rem; border-bottom:1px solid var(--app-border); padding:.72rem .85rem; color:var(--room-ink); background:#fffefa; }
.resident-media-sheet>header button { width:40px; height:40px; border:0; border-radius:50%; color:var(--room-ink); background:#f0e9de; font-size:1.3rem; }
.resident-media-catalog { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; }
.resident-media-catalog[hidden] { display:none; }
.resident-media-catalog button { min-width:0; display:grid; place-items:center; gap:.2rem; border:1px solid transparent; border-radius:13px; padding:.35rem; color:var(--room-ink); background:transparent; font-size:.58rem; font-weight:730; }
.resident-media-catalog button[hidden] { display:none; }
.resident-media-catalog button:hover,.resident-media-catalog button:focus-visible { border-color:#d8bb82; background:#fff3dc; transform:translateY(-1px); }
.resident-media-catalog img { width:100%; max-width:92px; aspect-ratio:1; object-fit:contain; }
.resident-gif-catalog { grid-template-columns:repeat(4,minmax(0,1fr)); }
.resident-gif-catalog img { max-width:none; border-radius:9px; background:#f1ece5; }
.community-picker-panel[hidden] { display:none; }
.community-picker-tabs { display:flex; gap:.35rem; overflow-x:auto; margin:0 0 .65rem; padding:.05rem .05rem .35rem; scrollbar-width:thin; }
.community-picker-tabs button { flex:0 0 auto; min-height:34px; border:1px solid #d8c9b4; border-radius:999px; padding:.3rem .62rem; color:#695530; background:#fffdfa; font-size:.66rem; font-weight:800; }
.community-picker-tabs button.is-active { border-color:var(--room-gold); color:#fff; background:var(--app-primary); }
.community-emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(38px,1fr)); gap:.25rem; max-height:330px; overflow:auto; padding:.15rem; }
.community-emoji-grid button { min-height:42px; border:0; border-radius:10px; padding:.2rem; background:transparent; font-size:1.45rem; line-height:1; }
.community-emoji-grid button:hover,.community-emoji-grid button:focus-visible { background:#f3eadc; transform:scale(1.06); }
.community-emoji-toolbar-icon { font-size:1rem; line-height:1; }
.community-gif-search-wrap { position:sticky; z-index:1; top:45px; margin:-.1rem 0 .45rem; padding:.12rem 0 .35rem; background:#fffefa; }
.community-gif-search-wrap input { width:100%; min-height:42px; border:1px solid #d8c9b4; border-radius:12px; padding:.55rem .7rem; color:var(--room-ink); background:#fff; }
.community-gif-search-wrap input:focus { border-color:var(--room-gold); outline:3px solid rgba(180,139,71,.14); }
.community-gif-status { min-height:1.2rem; margin:.2rem 0 .45rem; color:var(--room-muted); font-size:.7rem; }
.community-tenor-results:empty { display:none; }
.community-tenor-results button { overflow:hidden; padding:0; background:#eee7dc; }
.community-tenor-results button img { width:100%; height:100%; min-height:90px; aspect-ratio:1; object-fit:cover; }
.community-gif-more { min-height:38px; display:block; margin:.6rem auto; border:1px solid var(--room-gold); border-radius:999px; padding:.4rem .8rem; color:#70552a; background:#fff8e9; font-size:.7rem; font-weight:800; }
.community-local-gifs { margin-top:.7rem; border-top:1px solid rgba(86,71,50,.12); padding-top:.6rem; }
.community-local-gifs>strong { display:block; margin-bottom:.4rem; color:var(--room-ink); font-size:.7rem; }
.community-tenor-attribution { width:max-content; display:block; margin:.75rem 0 0 auto; color:var(--room-muted); font-size:.65rem; font-weight:800; text-decoration:none; }
.resident-media-catalog [data-community-catalog-choice="sticker"] { border:0; background:transparent; }
.resident-media-catalog [data-community-catalog-choice="sticker"]:hover,.resident-media-catalog [data-community-catalog-choice="sticker"]:focus-visible { background:rgba(242,234,220,.58); }
@keyframes residentSheetIn { from { opacity:0; transform:translate(-50%,calc(-50% + 10px)) scale(.985); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

.resident-lightbox[hidden] { display:none; }
.resident-lightbox { position:fixed; z-index:2100; inset:0; display:grid; grid-template-columns:minmax(46px,1fr) minmax(0,12fr) minmax(46px,1fr); grid-template-rows:1fr auto; align-items:center; color:#fff; background:rgba(8,23,30,.96); animation:residentLightboxIn .18s ease-out both; }
.resident-lightbox-stage { overflow:auto; max-width:100%; max-height:calc(100vh - 95px); display:grid; place-items:center; }
.resident-lightbox-stage img { max-width:100%; max-height:calc(100vh - 105px); object-fit:contain; transform-origin:center; transition:transform .18s ease; }
.resident-lightbox-close,.resident-lightbox-nav,.resident-lightbox-toolbar button { border:0; color:#fff; background:rgba(255,255,255,.12); }
.resident-lightbox-close { width:44px; height:44px; position:absolute; z-index:2; top:1rem; right:1rem; border-radius:50%; font-size:1.7rem; }
.resident-lightbox-nav { width:42px; height:64px; justify-self:center; border-radius:999px; font-size:2.2rem; }
.resident-lightbox-toolbar { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:1rem; padding:.8rem; }
.resident-lightbox-toolbar button { width:40px; height:40px; border-radius:50%; font-size:1.25rem; }
@keyframes residentLightboxIn { from { opacity:0; } to { opacity:1; } }
body.community-lightbox-open { overflow:hidden; }
body.community-media-open { overflow:hidden; }

.resident-post-footer { border-top:1px solid rgba(86,71,50,.12); padding:.72rem 1.1rem; }
.resident-post-footer a,.resident-back-link { min-height:40px; display:inline-flex; align-items:center; color:var(--app-primary); font-size:.76rem; font-weight:800; text-decoration:none; }
.resident-back-link { margin-bottom:.7rem; }
.resident-pagination { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:1.2rem; border-radius:16px; padding:.65rem; background:#fff; font-size:.75rem; }
.resident-pagination a { min-height:40px; display:flex; align-items:center; border-radius:10px; padding:.35rem .6rem; font-weight:780; text-decoration:none; }
.resident-pagination span { color:var(--room-muted); }

@media (max-width:767.98px) {
    .resident-community-shell { padding-right:.7rem; padding-left:.7rem; }
    .resident-room-heading { padding-right:.35rem; padding-left:.35rem; }
    .resident-feed { gap:1rem; }
    .resident-post-card { --room-card-rotation:0deg !important; border-radius:17px; transform:none; }
    .resident-post-card:hover,.resident-post-card:focus-within { transform:none; }
    .resident-post-header { align-items:flex-start; padding:1rem .85rem .55rem; }
    .resident-post-body { padding:.3rem .9rem .85rem; }
    .resident-engagement { margin:0 .85rem; }
    .resident-reactions { padding:.45rem .55rem .65rem; }
    .resident-reaction-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .resident-reaction-button { min-height:52px; font-size:.62rem; }
    .resident-comments { padding:.7rem .65rem .78rem; }
    .resident-photo-grid { grid-auto-rows:minmax(155px,1fr); }
}

@media (max-width:575.98px) {
    .resident-room-heading h1 { font-size:1.85rem; }
    .resident-author-avatar { width:42px; height:42px; }
    .resident-author-meta { align-items:flex-start; flex-direction:column; gap:.08rem; }
    .resident-author-meta>span:nth-child(2) { display:none; }
    .resident-pinned-badge { padding:.27rem .42rem; font-size:.61rem; }
    .resident-engagement { align-items:flex-start; flex-direction:column; gap:.25rem; }
    .resident-engagement-counts { width:100%; justify-content:flex-start; }
    .resident-photo-grid { grid-auto-rows:minmax(135px,1fr); }
    .resident-photo-count-1 .resident-photo-item { aspect-ratio:4/3; }
    .resident-replies { margin-left:.85rem; padding-left:.4rem; }
    .resident-comment-composer>.resident-comment-avatar { display:none; }
    .resident-comment-bubble { width:fit-content; max-width:100%; }
    .resident-comment-photo,.resident-comment-gif img { max-width:min(100%,210px); }
    .resident-comment-sticker img { width:clamp(92px,35vw,130px); height:clamp(92px,35vw,130px); }
    .resident-media-toolbar button { min-height:42px; padding:.42rem .55rem; }
    .resident-send-button { min-width:98px; min-height:44px; }
    .resident-media-sheet { width:100%; max-height:min(80vh,680px); inset:auto 0 0; border-radius:22px 22px 0 0; padding:max(.85rem,env(safe-area-inset-top)) .7rem calc(.85rem + env(safe-area-inset-bottom)); transform:none; animation:residentBottomSheetIn .22s ease-out both; }
    .resident-media-sheet::before { inset:-100vh 0 100% 0; }
    .resident-media-sheet>header { top:calc(-1 * max(.85rem,env(safe-area-inset-top))); margin:calc(-1 * max(.85rem,env(safe-area-inset-top))) -.7rem .65rem; padding:.8rem; }
    .resident-media-catalog { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .resident-gif-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .community-emoji-grid { grid-template-columns:repeat(7,minmax(38px,1fr)); max-height:48vh; }
    .resident-media-catalog button { min-height:94px; }
    .resident-pagination span { display:none; }
    .resident-pagination a { flex:1; justify-content:center; }
    @keyframes residentBottomSheetIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
}

@media (prefers-reduced-motion:reduce) {
    .resident-post-card,.resident-photo-open img,.resident-reaction-button,.resident-media-toolbar button,.resident-send-button,.community-emoji-grid button { transition:none !important; transform:none !important; }
    .community-motion-enabled .resident-post-card.community-reveal-pending,
    .community-motion-enabled .resident-post-card.community-reveal-pending.is-visible,
    .resident-reaction-button.is-reacting .community-reaction-glyph,
    .resident-comment.is-new,
    .resident-comments.is-updated .resident-comment-thread { animation:none !important; opacity:1 !important; transform:none !important; }
    .resident-media-sheet,.resident-lightbox { animation:none !important; }
    .resident-reaction-button.is-selected .community-reaction-glyph { transform:none; }
}

/* Room multimedia v2: conversación compacta y selectores inspirados en mensajería */
.resident-author-avatar { width:40px; height:40px; border-width:1px; box-shadow:0 2px 7px rgba(13,70,97,.15); }
.resident-avatar>img { filter:saturate(1.06) contrast(1.04); }
.resident-comment-thread { gap:10px; }
.resident-comment { gap:8px; }
.resident-comment-avatar { width:36px; height:36px; border:1px solid rgba(255,255,255,.95); box-shadow:0 2px 6px rgba(13,70,97,.14); }
.resident-comment-main { display:grid; justify-items:start; }
.resident-comment-identity { display:flex; align-items:baseline; flex-wrap:wrap; gap:.18rem .45rem; margin:0 0 .2rem .34rem; line-height:1.2; }
.resident-comment-identity strong { color:var(--room-ink); font-size:.75rem; }
.resident-comment-identity span { color:var(--room-muted); font-size:.6rem; }
.resident-comment-bubble { max-width:min(100%,560px); border:0; border-radius:4px 15px 15px; padding:.46rem .66rem; background:#f0ebe3; box-shadow:none; }
.resident-comment-bubble p { margin:0; font-size:.8rem; line-height:1.38; }
.resident-comment:nth-child(even) .resident-comment-bubble { background:#f5f0e8; }
.resident-comment.is-sticker-only .resident-comment-bubble,
.resident-comment.is-gif-only .resident-comment-bubble { border:0; padding:0; background:transparent; }
.resident-comment.is-reply { margin-left:1.65rem; }
.resident-comment-actions { gap:.05rem .32rem; margin:.08rem 0 0 .28rem; }
.resident-comment-actions summary,.resident-comment-actions>form>button { min-height:25px; padding:.1rem .22rem; font-size:.62rem; }
.resident-comment-sticker img { width:clamp(110px,17vw,150px); height:clamp(110px,17vw,150px); filter:drop-shadow(0 4px 5px rgba(29,43,47,.16)); }
.resident-comment-gif { margin:0; }
.resident-comment-gif img { width:min(290px,100%); max-height:300px; border-radius:12px; background:#ebe8e2; }
.resident-comment-photo { width:min(260px,100%); margin:0; }
.resident-comment-photo .resident-photo-open { overflow:hidden; border:0; border-radius:12px; box-shadow:0 3px 11px rgba(43,44,38,.13); transform:none; }
.resident-comment-photo .resident-photo-open img { max-height:260px; object-fit:cover; }
.resident-comment-composer { gap:.48rem; margin-top:.75rem; }
.resident-comment-composer>.resident-comment-avatar { width:36px; height:36px; }
.resident-comment-editor { border-radius:20px; box-shadow:0 3px 10px rgba(26,52,61,.045); }
.resident-comment-editor>textarea { min-height:40px; padding:.62rem .75rem .3rem; }
.resident-media-controls { padding:0 .46rem; }
.resident-media-toolbar { gap:.14rem; }
.resident-media-toolbar button { min-height:32px; border-color:transparent; padding:.27rem .4rem; color:#47616f; background:transparent; font-size:.63rem; }
.resident-media-toolbar button:hover,.resident-media-toolbar button:focus-visible { border-color:rgba(13,70,97,.14); background:#edf5f8; }
.resident-composer-footer { margin-top:.28rem; padding:.38rem .45rem .43rem .7rem; }
.resident-send-button { min-width:82px; min-height:34px; padding:.42rem .65rem; }
.resident-media-selection { border:0; border-radius:12px; padding:.3rem .42rem; background:#eef5f7; }
.resident-media-selection img { width:58px; height:58px; border-radius:10px; background:transparent; }
.resident-media-selection.is-sticker img { width:86px; height:86px; }
.resident-media-selection.is-gif img { width:110px; height:72px; object-fit:cover; }
.resident-media-sheet { width:min(94vw,440px); max-height:min(76vh,610px); border-radius:18px; padding:.7rem; }
.resident-media-sheet[data-community-picker-kind="gif"] { width:min(94vw,610px); }
.resident-media-sheet>header { top:-.7rem; margin:-.7rem -.7rem .55rem; padding:.62rem .72rem; }
.resident-media-sheet>header button { width:34px; height:34px; }
.community-emoji-search-wrap,.community-gif-search-wrap { position:sticky; z-index:1; top:39px; margin:0 0 .45rem; padding:.1rem 0 .28rem; background:#fffefa; }
.community-emoji-search-wrap input,.community-gif-search-wrap input { width:100%; min-height:38px; border:1px solid #d8c9b4; border-radius:11px; padding:.48rem .65rem; color:var(--room-ink); background:#fff; font-size:.76rem; }
.community-emoji-search-wrap input:focus,.community-gif-search-wrap input:focus { border-color:var(--room-gold); outline:3px solid rgba(180,139,71,.12); }
.community-picker-tabs { gap:.25rem; margin-bottom:.45rem; }
.community-picker-tabs button { min-height:31px; padding:.25rem .5rem; }
.community-emoji-grid { grid-template-columns:repeat(8,minmax(36px,1fr)); gap:.16rem; max-height:300px; }
.community-emoji-grid button { min-height:39px; font-size:1.38rem; transition:background .15s ease,transform .15s ease; }
.resident-media-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.resident-media-catalog button { min-height:125px; border-radius:12px; padding:.25rem; }
.resident-media-catalog [data-community-catalog-choice="sticker"] img { max-width:112px; filter:drop-shadow(0 3px 5px rgba(26,42,48,.12)); }
.resident-media-catalog [data-community-catalog-choice="sticker"] span { font-size:.61rem; }
.resident-gif-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }
.resident-gif-catalog button { min-height:0; overflow:hidden; padding:0; }
.resident-gif-catalog img { width:100%; min-height:96px; aspect-ratio:1.22; object-fit:cover; }

@media (max-width:575.98px) {
    .resident-author-avatar { width:38px; height:38px; }
    .resident-comment-avatar { width:34px; height:34px; }
    .resident-comment-thread { gap:9px; }
    .resident-comment { gap:7px; }
    .resident-comment.is-reply { margin-left:.75rem; }
    .resident-comment-gif img { width:min(100%,240px); max-height:240px; }
    .resident-comment-photo { width:min(100%,230px); }
    .resident-media-toolbar { justify-content:space-between; }
    .resident-media-toolbar button { min-width:0; min-height:36px; padding:.3rem .34rem; }
    .resident-media-toolbar button span:last-child { font-size:.59rem; }
    .resident-send-button { min-width:78px; min-height:38px; }
    .resident-media-sheet { width:100%; max-height:78vh; }
    .community-emoji-grid { grid-template-columns:repeat(7,minmax(36px,1fr)); }
    .resident-media-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .resident-media-catalog button { min-height:105px; }
    .resident-gif-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce) {
    .resident-media-catalog button,.resident-media-selection img { transition:none !important; transform:none !important; }
}