:root{--bg:#071117;--panel:#0b171d;--panel2:#111f27;--bubble:#182831;--mine:#075e54;--green:#25d366;--green2:#00a884;--text:#eef6f8;--muted:#9fb0b8;--line:#1f343d}
*{box-sizing:border-box}body{margin:0;background:#050b0f;color:var(--text);font-family:Arial,Helvetica,sans-serif}.app{width:min(1080px,100%);height:100vh;margin:auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}.topbar{height:82px;background:#10212a;display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #1d353f}.room-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#1e3a44;font-size:24px}.title{min-width:0;flex:1}.title h1{margin:0;font-size:24px}.title p{margin:3px 0 0;color:var(--muted);font-size:14px}.online{border:0;background:#0f2a26;color:#dffdf0;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:700}.online span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:7px}.dots{border:0;background:none;color:#b9c6cc;font-size:28px}.profile-note{background:#0c3329;color:#a8f2cc;font-size:13px;font-weight:700;padding:9px 18px;border-bottom:1px solid #144f3f}.feed{flex:1;overflow:auto;padding:18px 16px 8px;background-color:#071217;background-image:radial-gradient(circle at 20px 20px,#10232a 1px,transparent 1px);background-size:42px 42px}.loading,.empty{color:var(--muted);text-align:center;padding:24px}.msg{display:flex;gap:10px;margin:0 0 16px;align-items:flex-end}.msg.mine{justify-content:flex-end}.avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 42px;background:#24434d;display:grid;place-items:center;font-weight:700}.avatar img{width:100%;height:100%;object-fit:cover}.msg.mine .avatar{order:2}.msg-content{max-width:min(74%,760px)}.meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin:0 6px 5px}.meta strong{color:#7bc6ff;font-size:13px}.mine .meta{justify-content:flex-end}.loc{opacity:.9}.bubble{background:var(--bubble);padding:10px 12px 7px;border-radius:12px;box-shadow:0 1px 1px #0005;line-height:1.35}.mine .bubble{background:var(--mine)}.bubble .time{float:right;margin-left:12px;color:#b6c6cc;font-size:11px;position:relative;top:4px}.quote{border-left:3px solid var(--green);background:#0003;padding:7px 9px;border-radius:7px;margin-bottom:7px;color:#bfd2d8;font-size:12px}.quote b{color:#7ff1bd}.actions{display:flex;gap:12px;align-items:center;margin:6px 6px 0;color:#a8bac2;font-size:12px}.mine .actions{justify-content:flex-end}.act{border:0;background:none;color:inherit;padding:2px 0;cursor:pointer}.act.liked{color:#ff6d7a}.replies-toggle{color:#69e6ae}.replies{margin-top:8px;padding-left:24px;border-left:2px solid #29434d}.reply-item{margin-top:10px}.load-wrap{background:#071217;padding:5px 16px 10px;text-align:center}.load-more{border:0;background:#1a2c35;color:#dce8eb;border-radius:999px;padding:10px 20px;cursor:pointer}.composer{display:flex;gap:10px;padding:12px 14px;background:#10212a;border-top:1px solid #243943}.my-avatar{position:relative;width:52px;height:52px;border:0;border-radius:50%;overflow:hidden;background:#24434d;flex:0 0 52px;cursor:pointer;padding:0;color:white;font-weight:700}.my-avatar img{width:100%;height:100%;object-fit:cover;display:none}.my-avatar i{position:absolute;width:12px;height:12px;background:var(--green);border:2px solid #10212a;border-radius:50%;right:1px;bottom:2px}.compose-main{flex:1;min-width:0}.me-line{display:flex;gap:8px;align-items:center;margin:0 2px 6px;font-size:12px}.me-line span{color:var(--muted)}.input-row{display:flex;align-items:flex-end;background:#1b2a33;border-radius:22px;padding:5px 7px}.round,.send{border:0;cursor:pointer}.round{background:none;color:#bccbd1;font-size:22px;width:34px}.send{width:42px;height:42px;border-radius:50%;background:var(--green2);color:white;font-size:20px}.input-row textarea{flex:1;resize:none;max-height:120px;border:0;outline:0;background:transparent;color:white;padding:10px 8px;font:inherit}.reply-bar{display:flex;justify-content:space-between;gap:8px;background:#0d493f;border-left:3px solid var(--green);padding:7px 9px;border-radius:8px;margin-bottom:6px}.reply-bar small,.reply-bar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}.reply-bar button{border:0;background:none;color:white;font-size:20px}.emoji-panel{padding:8px 2px 2px;display:flex;gap:7px;flex-wrap:wrap}.emoji-panel button{border:0;background:none;font-size:22px;cursor:pointer}.hidden{display:none!important}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:18px;z-index:100}.modal-card{position:relative;width:min(520px,100%);background:#111f27;border-radius:16px;padding:22px;box-shadow:0 18px 60px #000a}.modal-card.small{width:min(420px,100%)}.modal-x{position:absolute;right:12px;top:8px;border:0;background:none;color:#dbe6ea;font-size:28px;cursor:pointer}.modal-card h2{margin-top:0}.muted{color:var(--muted);font-size:14px;line-height:1.4}.modal-card label{display:block;margin:12px 0 5px;color:#bdd0d7}.modal-card input{width:100%;padding:11px 12px;border-radius:9px;border:1px solid #35505c;background:#09151b;color:white}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.primary,.secondary{border:0;border-radius:9px;padding:10px 16px;cursor:pointer;font-weight:700}.primary{background:var(--green2);color:white}.secondary{background:#283a43;color:white}.online-list{max-height:360px;overflow:auto}.online-user{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #21353e}.online-user .avatar{width:38px;height:38px;flex-basis:38px}.online-user small{color:var(--muted)}#profileStatus{margin-top:10px;color:#ffd2d2}
@media(max-width:650px){.app{height:100dvh}.topbar{height:70px;padding:9px 10px}.room-icon{width:42px;height:42px}.title h1{font-size:20px}.title p{font-size:12px}.msg-content{max-width:82%}.feed{padding:14px 9px 6px}.composer{padding:9px 8px}.my-avatar{width:46px;height:46px;flex-basis:46px}.online{padding:8px 10px}.dots{display:none}.profile-note{font-size:11px;padding:8px 10px}}
/* V3: bandeiras reais e links do YouTube */
.flag-img{display:inline-block;width:18px;height:14px;object-fit:cover;border-radius:2px;vertical-align:-2px;margin-left:3px;box-shadow:0 0 0 1px #ffffff18}
.youtube-link{display:inline-flex;align-items:center;gap:4px;margin:2px 1px;padding:3px 7px;border-radius:8px;background:#ff00331c;color:#ff7b8b;text-decoration:none;font-weight:700;font-size:.92em;border:1px solid #ff315033}
.youtube-link:hover{background:#ff00332d;color:#ff9daa}
.quote span{display:block;margin-top:2px;white-space:normal;overflow-wrap:anywhere}
.dots{display:grid;place-items:center;text-decoration:none;width:34px;height:40px}

/* V5: miniaturas e modal do YouTube */
.youtube-link{font-family:inherit;cursor:pointer}
.youtube-preview{position:relative;display:block;width:min(330px,100%);margin-top:8px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#0b141a;cursor:pointer;text-align:left;color:#fff;box-shadow:0 1px 4px #0007}
.youtube-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);display:grid;place-items:center;width:48px;height:34px;border-radius:10px;background:#ff0033;color:#fff;font-size:18px;box-shadow:0 2px 10px #0009}
.yt-label{display:block;padding:7px 10px;color:#d9e5e9;font-size:12px;font-weight:700}
.video-card{width:min(900px,96vw);padding:42px 10px 10px;background:#050b0f}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:650px){.video-card{width:100%;padding:38px 6px 6px;border-radius:12px}.youtube-preview{width:min(280px,100%)}}
/* V6 - Moderadores */
.moderator-name{color:#56e39f!important}.moderator-name em{font-style:normal;font-size:9px;letter-spacing:.06em;margin-left:5px;padding:2px 5px;border-radius:999px;background:#123d31;color:#78f3ba;border:1px solid #2f755e;vertical-align:1px}.me-line .mod-name{color:#56e39f}.me-line .mod-name::after{content:'MOD';font-size:9px;letter-spacing:.06em;margin-left:5px;padding:2px 5px;border-radius:999px;background:#123d31;color:#78f3ba;border:1px solid #2f755e;vertical-align:1px}.moderator-msg .bubble{box-shadow:0 0 0 1px #2ecb8b33,0 1px 1px #0005}.act.mod-tool{color:#65e7ad;font-weight:700}.mod-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.mod-actions button{border:0;border-radius:10px;padding:11px 12px;cursor:pointer;font-weight:700}.danger-action{background:#7b2530;color:#fff}#modStatus{margin-top:12px;color:#bdebd4;min-height:18px}.send:disabled{opacity:.45;cursor:not-allowed}@media(max-width:520px){.mod-actions{grid-template-columns:1fr}.actions{gap:9px;flex-wrap:wrap}}
/* V7: moderação discreta pelo avatar/nome */
.avatar-action{border:0;padding:0;cursor:pointer;position:relative;transition:transform .12s ease,box-shadow .12s ease}
.avatar-action:hover{transform:scale(1.05);box-shadow:0 0 0 2px #25d36688}
.avatar-action:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.moderation-target{cursor:pointer;text-decoration:none}
.moderation-target:hover{color:#7df2b8!important;text-decoration:underline;text-underline-offset:2px}
.online-user-action{cursor:pointer;border-radius:10px;padding-left:6px;padding-right:6px;transition:background .12s ease}
.online-user-action:hover{background:#17302f}

/* V8: fundo suave inspirado em apps de mensagens, sem imagem externa */
.feed{
  background-color:#071217;
  background-image:
    linear-gradient(rgba(5,14,18,.22),rgba(5,14,18,.22)),
    url('chat-wallpaper.svg');
  background-repeat:repeat,repeat;
  background-size:auto,220px 220px;
  background-position:0 0,0 0;
}
.load-wrap{
  background:linear-gradient(180deg,rgba(7,18,23,.90),#071217 70%);
}
@media(max-width:650px){
  .feed{background-size:auto,190px 190px}
}

/* V12: scrollbar verde combinando com o chat */
.feed,
.online-list,
.replies,
.modal-card,
textarea{
  scrollbar-width: thin;
  scrollbar-color: #22c56e #0d1b20;
}

.feed::-webkit-scrollbar,
.online-list::-webkit-scrollbar,
.replies::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
textarea::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.feed::-webkit-scrollbar-track,
.online-list::-webkit-scrollbar-track,
.replies::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track{
  background: #0d1b20;
  border-radius: 999px;
}

.feed::-webkit-scrollbar-thumb,
.online-list::-webkit-scrollbar-thumb,
.replies::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #2fe083 0%, #19b86a 100%);
  border-radius: 999px;
  border: 2px solid #0d1b20;
}

.feed::-webkit-scrollbar-thumb:hover,
.online-list::-webkit-scrollbar-thumb:hover,
.replies::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #49eb98 0%, #22c56e 100%);
}

.feed::-webkit-scrollbar-corner,
.online-list::-webkit-scrollbar-corner,
.replies::-webkit-scrollbar-corner,
.modal-card::-webkit-scrollbar-corner,
textarea::-webkit-scrollbar-corner{
  background: #0d1b20;
}