:root {
  color-scheme: dark;
  --bg: #120918;
  --bg-deep: #0c0710;
  --panel: #1b1221;
  --panel-soft: #24172b;
  --panel-raised: #2b1a33;
  --line: rgba(255, 219, 239, .09);
  --line-strong: rgba(255, 219, 239, .16);
  --text: #fff6fb;
  --muted: #b8a7bc;
  --faint: #796b80;
  --pink: #f9449c;
  --pink-hot: #ff368d;
  --pink-light: #ffaad0;
  --pink-pale: #ffe0ef;
  --plum: #2c0d2d;
  --green: #6fe0a5;
  --yellow: #ffc976;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #ff80bd; outline-offset: 2px; }
.hidden { display: none !important; }
.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(100px); opacity: .21; }
.ambient-one { width: 480px; height: 480px; top: -250px; right: 12%; background: #8d1869; }
.ambient-two { width: 360px; height: 360px; bottom: -220px; left: 8%; background: #501047; }

/* Brand and sign-in */
.auth-screen { min-height: 100svh; display: grid; grid-template-columns: minmax(400px, 1.08fr) minmax(460px, .92fr); align-items: center; position: relative; padding: 44px clamp(28px, 7vw, 116px) 74px; overflow: hidden; isolation: isolate; }
.auth-screen::before { content: ""; position: absolute; inset: 0 48% 0 0; z-index: -1; background: radial-gradient(ellipse at 48% 45%, rgba(197, 26, 116, .22), transparent 55%), linear-gradient(140deg, rgba(42, 13, 46, .58), rgba(14, 7, 17, .08)); }
.auth-art { min-height: 550px; position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(10px, 5vw, 72px); }
.auth-art::before { content: ""; position: absolute; left: 5%; top: 10%; width: 440px; height: 440px; border: 1px solid rgba(255, 145, 198, .1); border-radius: 50%; box-shadow: 0 0 100px rgba(249, 68, 156, .1), inset 0 0 110px rgba(249, 68, 156, .05); }
.auth-art::after { content: ""; position: absolute; left: 1%; top: 5%; width: 515px; height: 515px; border: 1px dashed rgba(255, 178, 216, .08); border-radius: 50%; }
.hero-heart { width: 210px; height: 190px; position: absolute; left: 15%; top: 13%; display: grid; place-items: center; transform: rotate(-9deg); border-radius: 30% 30% 20% 20%; background: linear-gradient(145deg, #ff93c3 0%, #f4348d 54%, #b90e69 100%); box-shadow: inset 12px 11px 22px rgba(255,255,255,.25), inset -14px -15px 24px rgba(109, 2, 69, .34), 0 0 45px rgba(247, 39, 132, .28), 0 18px 34px rgba(4, 1, 9, .4); clip-path: path("M 105 181 C 82 160 7 116 8 61 C 9 14 72 1 105 47 C 137 0 201 14 202 60 C 204 112 130 164 105 181 Z"); }
.hero-heart::before { content: ""; position: absolute; inset: 8px; clip-path: path("M 97 167 C 73 146 18 111 18 63 C 18 28 66 17 97 64 C 128 17 190 27 190 63 C 190 105 125 150 97 167 Z"); border: 3px solid rgba(255,255,255,.85); filter: drop-shadow(0 0 5px white); }
.hero-heart span { margin-top: -12px; color: rgba(255,255,255,.96); font-size: 86px; text-shadow: 0 7px 12px rgba(108, 0, 58, .35); }
.hero-heart i { position: absolute; right: 32px; top: 50px; font-size: 22px; color: #fff; font-style: normal; }
.floating-heart { position: absolute; color: var(--pink-light); text-shadow: 0 0 22px rgba(255, 83, 166, .65); }
.heart-one { left: 9%; top: 17%; font-size: 48px; transform: rotate(-20deg); }
.heart-two { right: 17%; top: 42%; font-size: 30px; transform: rotate(15deg); }
.sparkle { position: absolute; color: #ffcae3; text-shadow: 0 0 17px #ff4e9e; }
.sparkle-one { left: 47%; top: 9%; font-size: 26px; }
.sparkle-two { left: 6%; top: 51%; font-size: 35px; }
.sparkle-three { right: 20%; top: 19%; font-size: 18px; }
.auth-brand-copy { position: relative; z-index: 1; margin-top: 310px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: #fff5fb; font-size: 24px; letter-spacing: -.8px; font-weight: 650; }
.brand-lockup b { color: #ff8cc2; font-weight: 760; }
.brand-mark { width: 36px; height: 36px; display: inline-grid; place-items: center; color: white; font-size: 19px; line-height: 1; background: linear-gradient(145deg, #ff84b8, #e82781); border-radius: 12px; box-shadow: 0 5px 18px rgba(238, 45, 132, .25); transform: rotate(-7deg); }
.auth-brand-copy p { margin: 20px 0 22px; color: #faeaf3; font-size: clamp(24px, 2.5vw, 35px); line-height: 1.3; font-weight: 600; letter-spacing: -.9px; }
.brand-stats { display: flex; align-items: center; gap: 21px; color: #bba9c1; font-size: 12px; }
.brand-stats span { display: inline-flex; align-items: center; gap: 7px; }
.brand-stats i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px rgba(111,224,165,.72); }
.auth-card { position: relative; justify-self: center; width: min(100%, 460px); padding: clamp(29px, 4vw, 46px); border-radius: 25px; border: 1px solid rgba(255, 220, 239, .1); background: linear-gradient(145deg, rgba(40, 25, 47, .96), rgba(25, 15, 30, .97)); box-shadow: 0 28px 90px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05); }
.auth-card-heading { margin-bottom: 25px; }
.brand-lockup.compact { font-size: 17px; gap: 8px; margin-bottom: 32px; }
.brand-lockup.compact .brand-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; }
.auth-eyebrow, .modal-eyebrow { color: #ff92c3; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.tiny-heart { margin-right: 5px; font-size: 14px; }
.auth-card h1 { margin: 13px 0 7px; font-size: 27px; letter-spacing: -.8px; }
.auth-card-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 23px; border-radius: 12px; background: rgba(8, 5, 11, .35); }
.auth-tab { border: 0; border-radius: 9px; padding: 11px 8px; color: #9a879f; font-size: 12px; font-weight: 650; background: transparent; cursor: pointer; transition: .18s ease; }
.auth-tab.active { color: #fff8fc; background: linear-gradient(135deg, #46253e, #39203a); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 3px 9px rgba(0,0,0,.12); }
.field-label { display: block; margin: 16px 0 8px; color: #e4d4e4; font-size: 11px; font-weight: 650; }
.input-wrap { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgba(255, 220, 239, .1); border-radius: 11px; background: rgba(12, 8, 16, .42); transition: .18s ease; }
.input-wrap:focus-within { border-color: rgba(255, 105, 177, .6); box-shadow: 0 0 0 3px rgba(247, 61, 146, .09); }
.input-icon { width: 17px; color: #e966a4; font-size: 19px; text-align: center; }
.lock-icon { font-size: 15px; }
.input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: white; background: transparent; font-size: 12px; }
.input-wrap input::placeholder { color: #786b7f; }
.password-toggle { border: 0; padding: 4px; color: #a58da5; background: transparent; cursor: pointer; font-size: 14px; }
.form-error { min-height: 18px; margin: 9px 0 3px; color: #ff9ebd; font-size: 11px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 11px; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button-primary { background: linear-gradient(120deg, #ff64aa, #e92b87 54%, #ca1d79); box-shadow: 0 9px 22px rgba(225, 26, 119, .23), inset 0 1px rgba(255,255,255,.3); }
.auth-submit { width: 100%; justify-content: space-between; padding: 0 17px; margin-top: 4px; }
.button-arrow { font-size: 18px; font-weight: 400; }
.auth-footnote { display: flex; gap: 8px; align-items: flex-start; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); color: #a595ab; font-size: 10px; line-height: 1.45; }
.shield-icon { color: #ff9cc8; font-size: 16px; }
.auth-spark { position: absolute; color: #ff90bf; opacity: .65; }
.auth-spark-a { right: 8%; top: 8%; }
.auth-spark-b { right: 13%; bottom: 12%; font-size: 23px; }
.auth-footer { position: absolute; bottom: 26px; left: 0; right: 0; color: #77667f; text-align: center; font-size: 10px; letter-spacing: .15px; }
.auth-footer span { padding: 0 7px; color: #d05a99; }

/* Chat shell */
.chat-app { height: 100dvh; min-height: 560px; display: flex; flex-direction: column; background: radial-gradient(ellipse at 48% 5%, rgba(106, 32, 85, .14), transparent 39%), var(--bg); }
.topbar { position: relative; z-index: 5; height: 70px; flex: 0 0 70px; display: flex; align-items: center; gap: 17px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(19, 10, 23, .92); backdrop-filter: blur(16px); }
.topbar-brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 660; letter-spacing: -.6px; white-space: nowrap; }
.version-tag { margin-left: -3px; padding: 3px 5px; border: 1px solid rgba(255,163,204,.16); border-radius: 5px; color: #ffadd0; background: rgba(249,68,156,.08); font-size: 7px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.topbar-brand b { color: #ff88bf; font-weight: 760; }
.topbar-brand .brand-mark { width: 31px; height: 31px; font-size: 16px; border-radius: 10px; }
.topbar-center { display: flex; align-items: center; gap: 9px; margin: 0 auto; color: #d0c1d2; font-size: 11px; }
.live-pulse, .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px rgba(111,224,165,.55); }
.topbar-separator { color: #705c75; }
.topbar-topic { color: #96869b; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }
.coin-button { min-width: 58px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,205,91,.25); border-radius: 10px; color: #ffe49b; background: linear-gradient(135deg, rgba(124,81,34,.24), rgba(81,54,32,.19)); cursor: pointer; }
.coin-button:hover { border-color: rgba(255,205,91,.55); background: rgba(181,129,46,.22); }
.coin-button span { color: #ffd45b; font-size: 17px; text-shadow: 0 0 9px rgba(255,204,69,.5); }
.coin-button b { font-size: 10px; font-variant-numeric: tabular-nums; }
.profile-button { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: .2s ease; }
.profile-button:hover { background: rgba(255,255,255,.04); border-color: var(--line); }
.profile-button-name { max-width: 125px; overflow: hidden; color: #f6eaf4; font-size: 11px; font-weight: 650; text-overflow: ellipsis; }
.chevron { width: 12px; fill: none; stroke: #a08ca4; stroke-width: 1.7; }
.icon-button { width: 35px; height: 35px; display: inline-grid; place-items: center; position: relative; border: 1px solid var(--line); border-radius: 10px; color: #d7c6d9; background: rgba(255,255,255,.025); cursor: pointer; transition: .18s ease; }
.icon-button:hover { color: white; background: rgba(255, 112, 177, .1); border-color: rgba(255,112,177,.2); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobile-only { display: none; }
.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 248px minmax(400px, 1fr) 264px; }
.conversation-rail { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 22px 13px 16px; border-right: 1px solid var(--line); background: rgba(21, 12, 25, .62); scrollbar-width: thin; scrollbar-color: rgba(215,108,165,.18) transparent; }
.rail-heading, .rail-divider { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #806e87; font-size: 9px; font-weight: 720; letter-spacing: 1.45px; }
.rail-search { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: #dba5c2; background: rgba(255,255,255,.025); cursor: pointer; font-size: 16px; line-height: 1; }
.rail-search:hover { background: rgba(255, 74, 156, .15); color: white; }
.room-link { width: 100%; display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: inherit; text-align: left; background: transparent; cursor: pointer; transition: .18s ease; }
.room-link:hover { background: rgba(255,255,255,.035); }
.room-link.active { border-color: rgba(251, 104, 171, .15); background: linear-gradient(105deg, rgba(233, 49, 134, .16), rgba(233, 49, 134, .05)); box-shadow: inset 2px 0 #f354a0; }
.room-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #ffacd0; background: linear-gradient(145deg, #58233e, #342039); font-size: 20px; }
.room-link-copy { min-width: 0; flex: 1; }
.room-link-copy b { display: block; color: #fbedf6; font-size: 11px; font-weight: 680; }
.room-link-copy small { display: block; margin-top: 3px; color: #89788f; font-size: 9px; }
.room-unread { min-width: 8px; height: 8px; border-radius: 50%; background: #ff559c; box-shadow: 0 0 10px rgba(255,85,156,.6); }
.rooms-heading { min-height: 24px; flex: 0 0 auto; margin: 17px 0 5px; }
#create-room-button { flex: 0 0 24px; }
.rooms-list { max-height: min(30vh, 240px); display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.rooms-list:empty { display: none; }
.rooms-empty { padding: 6px 10px; color: #85768c; font-size: 9px; line-height: 1.45; }
.room-row { min-width: 0; display: flex; align-items: center; gap: 3px; }
.room-row .room-link { min-width: 0; flex: 1; margin: 0; padding: 7px 8px; }
.room-row .room-link-help:not(.active) { background: rgba(255,173,208,.035); }
.room-link-help .room-icon { color: #ffd5e8; background: linear-gradient(145deg, #772b55, #452042); }
.room-row .room-icon { width: 30px; height: 30px; flex: 0 0 auto; font-weight: 700; }
.room-row .room-link-copy b, .room-row .room-link-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-close { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 8px; color: #a98b9d; background: transparent; cursor: pointer; font-size: 17px; }
.room-close:hover { color: #ffd6e8; background: rgba(249,68,156,.13); }
.rail-divider { margin: 26px 0 9px; }
.rail-count { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; color: #d9aac4; background: rgba(238, 56, 142, .12); font-size: 9px; letter-spacing: 0; }
.conversation-list { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.private-requests-list { display: flex; flex-direction: column; gap: 5px; padding: 0 3px; }
.private-request-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 7px; border: 1px solid rgba(255,150,197,.1); border-radius: 9px; background: rgba(255,255,255,.025); }
.private-request-open { min-width: 0; padding: 0; overflow: hidden; border: 0; color: #e8dce9; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: transparent; cursor: pointer; font-size: 9px; }
.private-request-open small { display: block; margin-top: 3px; color: #96849b; font-size: 8px; }
.private-request-actions { display: flex; gap: 3px; }
.private-request-actions button { min-height: 24px; padding: 3px 6px; border: 1px solid rgba(255,155,204,.16); border-radius: 6px; color: #ffd5e7; background: rgba(243,76,151,.08); cursor: pointer; font-size: 8px; }
.private-request-actions button[data-action="decline-private-request"] { color: #bfaebf; background: transparent; }
.conversation-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 11px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.conversation-item:hover, .conversation-item.active { background: rgba(255,255,255,.045); border-color: var(--line); }
.conversation-item-copy { min-width: 0; flex: 1; }
.conversation-item-copy b { display: block; overflow: hidden; color: #e4d6e4; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item-copy small { display: block; overflow: hidden; margin-top: 3px; color: #84758b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 99px; color: #fff; background: #ee438e; font-size: 9px; font-weight: 700; }
.rail-empty { padding: 24px 11px; color: #8a7a91; text-align: center; }
.empty-heart { color: #c95593; font-size: 22px; }
.rail-empty p { font-size: 10px; line-height: 1.5; }
.rail-empty button { padding: 7px 9px; border: 1px solid rgba(249, 79, 155, .18); border-radius: 8px; color: #f4a0c4; background: rgba(249, 79, 155, .07); font-size: 9px; cursor: pointer; }
.rail-bottom { margin-top: auto; }
.mel-card { display: flex; align-items: center; gap: 9px; position: relative; padding: 10px; border: 1px solid rgba(255, 231, 166, .09); border-radius: 12px; background: linear-gradient(125deg, rgba(96, 54, 54, .19), rgba(42, 25, 43, .55)); }
.mel-avatar { width: 32px; height: 32px; display: grid; place-items: center; position: relative; overflow: visible; border-radius: 10px; background: linear-gradient(145deg, #553345, #332340); font-size: 17px; }
.mel-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.mel-avatar i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #21162a; border-radius: 50%; background: var(--green); }
.mel-card b { display: block; color: #f7e7ee; font-size: 10px; }
.mel-card small { display: block; margin-top: 3px; color: #a3939d; font-size: 9px; }
.mel-spark { margin-left: auto; color: #ffd18b; font-size: 14px; }
.rail-retention { display: flex; align-items: center; gap: 6px; margin: 11px 5px 0; color: #77697e; font-size: 9px; }
.rail-retention span { color: #d974a6; }

.chat-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background: radial-gradient(ellipse at 50% 35%, rgba(91, 31, 75, .07), transparent 57%); }
.chat-heading { min-height: 75px; display: flex; align-items: center; gap: 12px; padding: 12px 23px; border-bottom: 1px solid var(--line); }
.heading-avatar { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #ffaad1; background: linear-gradient(145deg, #612747, #311932); font-size: 24px; }
.heading-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.heading-avatar i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid #1a1120; border-radius: 50%; background: var(--green); }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #ffd5e8; background: linear-gradient(145deg, #66304f, #30203d); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-small { width: 31px; height: 31px; border-radius: 10px; font-size: 11px; }
.avatar-large { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; }
.heading-copy { min-width: 0; flex: 1; }
.heading-title-row { display: flex; align-items: center; gap: 9px; }
.heading-copy h1 { overflow: hidden; margin: 0; color: #fff6fc; font-size: 14px; font-weight: 700; letter-spacing: -.15px; text-overflow: ellipsis; white-space: nowrap; }
.heading-copy p { overflow: hidden; margin: 5px 0 0; color: #9f8fa4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.heading-status { display: flex; align-items: center; gap: 6px; color: #9e8fa2; font-size: 9px; white-space: nowrap; }
.private-chip { padding: 4px 6px; border: 1px solid rgba(255,138,193,.18); border-radius: 5px; color: #ff9fc8; background: rgba(249,68,156,.08); font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.heading-members-button { margin-left: 5px; }
.back-button { width: 26px; height: 30px; padding: 0; border: 0; color: #ed9ec2; background: transparent; font-size: 20px; cursor: pointer; }
.private-banner { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 7px 24px; border-bottom: 1px solid rgba(255,255,255,.04); color: #bca7ba; background: rgba(236, 64, 143, .055); font-size: 9px; }
.private-banner > span { font-size: 12px; }
.private-banner p { flex: 1; margin: 0; }
.private-banner b { color: #f7c2d9; }
.private-banner button { width: 21px; height: 21px; border: 0; color: #ad93a9; background: transparent; font-size: 17px; cursor: pointer; }
.private-banner .ignore-button { width: auto; height: 27px; flex: 0 0 auto; padding: 0 10px; border: 1px solid rgba(255,159,204,.18); border-radius: 8px; color: #ffd1e5; background: rgba(243,76,151,.08); font-size: 9px; }
.private-banner .ignore-button.is-ignored { color: #fff; border-color: rgba(255,159,204,.35); background: rgba(243,76,151,.2); }
.private-access-panel { min-height: 160px; flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; padding: 24px; text-align: center; }
.private-access-panel h2 { margin: 0; color: #f7e6f0; font-size: 16px; }
.private-access-panel p { max-width: 340px; margin: 0; color: #a998ab; font-size: 10px; line-height: 1.5; }
.private-access-actions { display: flex; gap: 7px; margin-top: 4px; }
.private-access-actions button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,160,205,.18); border-radius: 9px; color: #ffd6e8; background: rgba(243,76,151,.11); cursor: pointer; font-size: 9px; }
.private-access-actions button[data-action="decline-private-request"] { color: #c8b7c8; background: rgba(255,255,255,.03); }
.chat-feed { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px clamp(16px, 4vw, 54px) 12px; scrollbar-color: rgba(215, 108, 165, .22) transparent; scrollbar-width: thin; }
.welcome-card { max-width: 520px; margin: 24px auto 31px; padding: 23px 25px; border: 1px solid rgba(255, 198, 225, .09); border-radius: 17px; background: radial-gradient(ellipse at 50% 0, rgba(241, 63, 143, .12), transparent 75%), rgba(39, 24, 44, .56); text-align: center; }
.welcome-art { width: 48px; height: 43px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 14px; color: #ffb5d4; background: linear-gradient(145deg, #572542, #322039); font-size: 26px; transform: rotate(-5deg); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.welcome-card h2 { margin: 0; color: #fff0f7; font-size: 15px; letter-spacing: -.3px; }
.welcome-card p { max-width: 390px; margin: 8px auto 0; color: #a998ad; font-size: 10px; line-height: 1.65; }
.welcome-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.welcome-tags span { padding: 5px 8px; border: 1px solid rgba(255, 163, 204, .09); border-radius: 99px; color: #d5b4c8; background: rgba(255,255,255,.02); font-size: 9px; }
.date-divider { display: flex; align-items: center; gap: 12px; margin: 19px 0 16px; color: #806f89; font-size: 9px; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.chat-message { display: flex; align-items: flex-start; gap: 9px; position: relative; margin: 13px 0; animation: message-in .18s ease-out; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.chat-message.mine { flex-direction: row-reverse; }
.chat-message.system-message { justify-content: center; margin: 14px 0; }
.chat-message.system-message .message-bubble { max-width: 88%; border: 1px solid rgba(255, 210, 149, .11); border-radius: 12px; background: rgba(92, 65, 45, .16); }
.message-main { min-width: 0; max-width: min(74%, 620px); }
.message-meta { display: flex; align-items: center; gap: 7px; margin: 1px 2px 5px; }
.mine .message-meta { flex-direction: row-reverse; }
.message-name { color: #f4c6dd; font-size: 10px; font-weight: 720; }
.message-name.owner-name { color: #ffd391; }
.message-name.admin-name { color: #a8cbff; }
.role-tag { padding: 2px 4px; border-radius: 4px; color: #d7bde0; background: rgba(185, 115, 203, .12); font-size: 7px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.role-tag.owner { color: #ffdaa0; background: rgba(255, 194, 112, .1); }
.role-tag.admin { color: #c2d7ff; background: rgba(133, 167, 239, .12); }
.role-tag.voice { color: #b7f1d2; background: rgba(75, 198, 135, .13); }
.role-tag.bot { color: #ffd796; background: rgba(255, 196, 116, .12); }
.message-time { color: #76687c; font-size: 8px; }
.message-bubble { width: fit-content; max-width: 100%; padding: 9px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 4px 14px 14px 14px; color: #eee1ed; background: linear-gradient(135deg, rgba(57, 39, 62, .97), rgba(43, 29, 49, .97)); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 5px 16px rgba(0,0,0,.08); }
.mine .message-bubble { margin-left: auto; border-color: rgba(255,180,216,.15); border-radius: 14px 4px 14px 14px; color: #fff6fb; background: linear-gradient(135deg, #a42d70, #742651); }
.system-message .message-bubble { margin: auto; color: #e3d1bb; text-align: center; font-size: 9px; }
.message-reply-name { display: inline-block; margin-bottom: 4px; color: #ffacd1; font-size: 8px; font-weight: 700; }
.message-reply-preview { width: 100%; display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; padding: 5px 8px; overflow: hidden; border: 0; border-left: 2px solid #ff77b4; border-radius: 3px 7px 7px 3px; color: #d9c5d6; text-align: left; background: rgba(7,4,10,.2); cursor: pointer; }
.message-reply-preview b { color: #ffacd1; font-size: 9px; }
.message-reply-preview span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message.reply-target-highlight .message-bubble { outline: 2px solid rgba(255,126,183,.6); outline-offset: 3px; }
.reply-composer { min-height: 48px; display: flex; align-items: center; gap: 10px; margin: 0 clamp(14px, 3vw, 36px); padding: 7px 9px; border: 1px solid rgba(255,126,183,.2); border-bottom: 0; border-radius: 11px 11px 0 0; background: rgba(49,29,54,.96); }
.reply-composer-mark { color: #ff91c0; font-size: 17px; }
.reply-composer-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.reply-composer-copy b { overflow: hidden; color: #ffb8d6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reply-composer-copy span { overflow: hidden; color: #bcabbc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reply-composer > button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #c1aabd; background: transparent; cursor: pointer; font-size: 18px; }
.message-actions { display: flex; align-items: center; gap: 4px; position: absolute; z-index: 2; right: 0; top: -9px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: .15s ease; }
.chat-message:hover .message-actions, .chat-message:focus-within .message-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mine .message-actions { right: auto; left: 0; }
.message-action { min-width: 26px; height: 25px; display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #f8d9e9; background: #392541; box-shadow: 0 4px 12px rgba(0,0,0,.19); cursor: pointer; font-size: 12px; }
.message-action:hover { border-color: rgba(255,126,183,.35); background: #513049; }
.reaction-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction-pill { min-height: 23px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; color: #ebd5e5; background: rgba(57, 37, 64, .85); cursor: pointer; font-size: 10px; }
.reaction-pill.mine { border-color: rgba(255,114,175,.45); background: rgba(208,45,124,.2); }
.reaction-pill span:last-child { color: #c4b0c6; font-size: 8px; }
.typing-area { height: 22px; display: flex; align-items: center; gap: 7px; padding: 0 clamp(16px, 4vw, 54px); color: #9a889e; font-size: 9px; }
.typing-dots { display: flex; gap: 3px; }
.typing-dots i { width: 3px; height: 3px; border-radius: 50%; background: #f071aa; animation: type-bounce .9s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .12s; }
.typing-dots i:nth-child(3) { animation-delay: .24s; }
@keyframes type-bounce { 0%,60%,100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
.composer-form { position: relative; padding: 8px clamp(14px, 3vw, 36px) 15px; }
.composer-shell { min-height: 49px; display: flex; align-items: flex-end; gap: 8px; padding: 7px 8px 7px 11px; border: 1px solid rgba(255, 219, 239, .1); border-radius: 14px; background: rgba(34, 22, 41, .93); box-shadow: 0 8px 30px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025); transition: .18s ease; }
.composer-shell:focus-within { border-color: rgba(255, 105, 177, .35); box-shadow: 0 0 0 3px rgba(247, 61, 146, .045), 0 8px 30px rgba(0,0,0,.12); }
.composer-icon { width: 29px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 9px; color: #df8db4; background: transparent; cursor: pointer; font-size: 21px; }
.composer-icon:hover { color: #ffc2db; background: rgba(255, 125, 184, .09); }
.composer-shell textarea { min-height: 28px; max-height: 120px; flex: 1; resize: none; padding: 6px 0; border: 0; outline: 0; color: #fff5fa; background: transparent; font-size: 11px; line-height: 1.45; scrollbar-width: thin; }
.composer-shell textarea::placeholder { color: #8d7d91; }
.character-count { align-self: center; color: #6e5f76; font-size: 8px; white-space: nowrap; }
.send-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 10px; color: white; background: linear-gradient(145deg, #fa66aa, #d62a80); box-shadow: 0 4px 12px rgba(218, 33, 123, .24), inset 0 1px rgba(255,255,255,.28); cursor: pointer; transition: .16s ease; }
.send-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.send-button:disabled { opacity: .45; cursor: not-allowed; }
.send-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.composer-note { display: flex; align-items: center; gap: 5px; padding: 8px 3px 0; color: #786b7e; font-size: 8px; }
.composer-note span { color: #d86c9f; font-size: 11px; }
.emoji-picker { width: 260px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; position: absolute; z-index: 7; bottom: 104px; left: 24px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: #291c30; box-shadow: 0 14px 36px rgba(0,0,0,.42); }
.gif-toggle { width: 36px; font-size: 10px; font-weight: 800; letter-spacing: -.4px; }
.gif-picker { width: min(420px, calc(100vw - 36px)); max-height: min(440px, calc(100dvh - 150px)); display: flex; flex-direction: column; gap: 9px; position: absolute; z-index: 8; bottom: 104px; left: 24px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: #291c30; box-shadow: 0 14px 36px rgba(0,0,0,.48); }
.gif-picker-heading { display: flex; align-items: center; justify-content: space-between; color: #fff1f8; font-size: 12px; font-weight: 750; }
.gif-picker-heading button { width: 26px; height: 26px; border: 0; border-radius: 7px; color: #d9b3c8; background: transparent; cursor: pointer; font-size: 20px; }
.gif-picker-heading button:hover { background: rgba(255,255,255,.07); }
#gif-search { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: #fff1f8; background: rgba(10,7,14,.35); font: inherit; font-size: 12px; }
#gif-search:focus { border-color: rgba(255,105,177,.5); }
.gif-results { min-height: 90px; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 5px; overflow: auto; scrollbar-width: thin; }
.gif-result { min-width: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.035); cursor: pointer; }
.gif-result:hover, .gif-result:focus-visible { border-color: #fb71b2; outline: 0; }
.gif-result img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gif-picker-message { grid-column: 1 / -1; align-self: center; margin: 0; padding: 14px 6px; color: #b9a6be; text-align: center; font-size: 11px; line-height: 1.5; }
.gif-attribution { align-self: flex-end; color: #dbb4cb; font-size: 9px; text-decoration: none; }
.gif-attribution:hover { color: #ff9bc8; text-decoration: underline; }
.message-gif { display: block; max-width: min(380px, 68vw); max-height: 320px; border-radius: 9px; object-fit: contain; }
.chat-message .reaction-picker { width: 226px; bottom: auto; top: -39px; left: 46px; padding: 7px; }
.chat-message.mine .reaction-picker { right: 42px; left: auto; }
.emoji-choice { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 21px; }
.emoji-choice:hover { background: rgba(255, 110, 177, .15); }

.members-panel { min-width: 0; display: flex; flex-direction: column; padding: 21px 15px 16px; border-left: 1px solid var(--line); background: rgba(21, 12, 25, .52); }
.members-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.members-heading h2 { margin: 0; color: #fff3fa; font-size: 13px; letter-spacing: -.2px; }
.members-heading p { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #928399; font-size: 9px; }
.members-heading .status-dot { width: 6px; height: 6px; }
.members-search-wrap { height: 35px; display: flex; align-items: center; gap: 7px; margin-top: 17px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(10, 7, 14, .27); }
.members-search-wrap svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #917e98; stroke-width: 1.5; stroke-linecap: round; }
.members-search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: #f7eaf2; background: transparent; font-size: 9px; }
.members-search-wrap input::placeholder { color: #76697d; }
.member-section-title { display: flex; justify-content: space-between; align-items: center; margin: 22px 1px 7px; color: #806e87; font-size: 8px; font-weight: 720; letter-spacing: 1.25px; }
.member-count-pill { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 6px; color: #d5a7c1; background: rgba(241, 70, 148, .1); font-size: 8px; letter-spacing: 0; }
.members-list { min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(215,108,165,.18) transparent; }
.member-row { min-height: 48px; display: flex; align-items: center; gap: 9px; position: relative; padding: 5px 4px; border-radius: 9px; }
.member-row:hover { z-index: 8; background: rgba(255,255,255,.025); }
.member-row.menu-open { z-index: 8; }
.member-nick-button { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
@media (hover: none), (pointer: coarse) {
  .member-row .member-actions { opacity: 1; pointer-events: auto; }
  .member-row.menu-open { flex-wrap: wrap; }
  .member-row.menu-open .member-actions { position: static; width: 100%; flex-wrap: wrap; }
}
.member-avatar-wrap { position: relative; }
.member-avatar-wrap .avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 10px; }
.member-online-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid #1d1324; border-radius: 50%; background: var(--green); }
.member-copy { min-width: 0; flex: 1; }
.member-name-line { display: flex; align-items: center; gap: 4px; }
.nick-pin { width: 16px; height: 20px; flex: 0 0 auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.nick-pin .pin-shell { fill: currentColor; stroke: rgba(255,255,255,.36); stroke-width: .7; }
.nick-pin .pin-gloss { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.9; stroke-linecap: round; }
.pin-member { color: #2386ff; }
.pin-voice { color: #35df84; }
.pin-admin { color: #fffaf4; }
.pin-room-owner { color: #ff9a34; }
.pin-site-owner { color: #08070b; filter: drop-shadow(0 0 1px #fff); }
.pin-purple { color: #800080; }
.pin-ruby { color: #f13269; filter: drop-shadow(0 0 3px #c6174966); }
.pin-ice { color: #9ceaff; filter: drop-shadow(0 0 4px #8cddff88); }
.pin-aurora { color: #77efbe; filter: drop-shadow(0 0 4px #ae74ff99); }
.pin-aurora .pin-shell { animation: aurora-pin 4s ease-in-out infinite alternate; }
@keyframes aurora-pin { from { fill: #77efbe; } to { fill: #b78bff; } }
.pin-gold { color: #ffd23f; filter: drop-shadow(0 0 5px rgba(255,205,57,.68)); }
.pin-hat-art { image-rendering: auto; }
.pin-party-hat { fill: #e7489b; stroke: #ffd7ec; stroke-width: .7; stroke-linejoin: round; }
.pin-party-band { fill: #fff0a8; stroke: #ffc8e2; stroke-width: .45; stroke-linejoin: round; }
.pin-party-pom { fill: #ffe9a3; stroke: #fff2c9; stroke-width: .5; }
.pin-party-star { fill: #fff7c2; stroke: #fff; stroke-width: .35; }
.pin-gold-glint { fill: #fff9da; stroke: rgba(255,255,255,.78); stroke-width: .3; filter: drop-shadow(0 0 2px #fff2a6); transform-box: fill-box; transform-origin: center; animation: gold-twinkle 1.3s ease-in-out infinite; }
.nick-pin.pin-shiny { animation: pin-shine 1.8s ease-in-out infinite; }
@keyframes pin-shine {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255,255,255,.68)) drop-shadow(0 0 3px currentColor); }
  50% { filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 9px currentColor); }
}
.nick-pin.pin-gold { animation: gold-pin-shine 1.8s ease-in-out infinite; }
@keyframes gold-pin-shine {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,246,190,.7)) drop-shadow(0 0 5px rgba(255,190,30,.7)); }
  50% { filter: drop-shadow(0 0 4px #fff9cf) drop-shadow(0 0 11px rgba(255,190,30,.98)); }
}
@keyframes gold-twinkle {
  0%, 100% { opacity: .62; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .nick-pin.pin-gold, .pin-gold-glint { animation: none; }
}
.nick-label { display: inline-flex; align-items: center; gap: 4px; }
.message-meta .nick-pin { width: 14px; height: 18px; }
.conversation-item-copy .member-name-line { min-width: 0; }
.conversation-item-copy .member-name-line b { min-width: 0; flex: 0 1 auto; overflow: hidden; color: #e4d6e4; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.member-name { overflow: hidden; color: #e8dce9; font-size: 10px; font-weight: 610; text-overflow: ellipsis; white-space: nowrap; }
.member-presence { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #85788c; font-size: 8px; }
.identity-symbol { display: inline-flex; align-items: center; min-height: 11px; color: #c7b4d2; font-size: 11px; font-weight: 700; line-height: 1; }
.identity-male { color: #76b9ff; }
.identity-female { color: #ff91c7; }
.identity-lgbt { font-size: 10px; }
.member-actions { display: flex; position: relative; opacity: 0; transition: .15s ease; }
.member-row:hover .member-actions, .member-row:focus-within .member-actions { opacity: 1; }
.member-action-button { width: 23px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #b99ab2; background: transparent; cursor: pointer; font-size: 12px; }
.member-action-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.member-action-button:hover { color: #fff; background: rgba(249,68,156,.14); }
.member-action-button[data-action="kick"] { color: #e98aaa; font-size: 15px; }
.member-menu-toggle { font-size: 18px; }
.role-tag.room-moderator { color: #e7cdfd; background: rgba(155,91,223,.2); }
.member-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 11px 9px; border: 1px solid rgba(255, 163, 204, .07); border-radius: 10px; background: rgba(247, 71, 148, .035); }
.member-note span { color: #d2699b; font-size: 13px; }
.member-note p { margin: 1px 0 0; color: #88778e; font-size: 8px; line-height: 1.55; }
.nav-dot { width: 7px; height: 7px; position: absolute; top: 3px; right: 3px; border: 1px solid #160d1d; border-radius: 50%; background: #ff549c; }
.mobile-bottom-nav { display: none; }

/* Dialogs and feedback */
.overlay { position: fixed; z-index: 19; inset: 0; background: rgba(8, 4, 11, .46); }
.overlay.drawer-backdrop { z-index: 11; }
.modal { width: min(430px, calc(100vw - 28px)); max-height: min(86svh, 720px); overflow: auto; position: fixed; z-index: 20; top: 50%; left: 50%; padding: 29px; border: 1px solid rgba(255, 219, 239, .13); border-radius: 20px; background: linear-gradient(145deg, #2c1c34, #1b1122); box-shadow: 0 30px 90px rgba(0,0,0,.56); transform: translate(-50%, -50%); scrollbar-width: thin; }
.economy-modal { width: min(560px, calc(100vw - 26px)); }
.wallet-card { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 18px 0; padding: 13px 15px; border: 1px solid rgba(255,206,94,.17); border-radius: 13px; background: linear-gradient(120deg, rgba(116,78,32,.2), rgba(54,34,52,.35)); }
.wallet-card > span { color: #c1abb9; font-size: 10px; }
.wallet-card b { grid-row: span 2; align-self: center; color: #ffe8a8; font-size: 15px; }
.wallet-card i { margin-right: 5px; color: #ffd45b; font-style: normal; }
.wallet-card small { color: #907f93; font-size: 9px; }
.economy-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 8px; color: #fff0f8; font-size: 12px; }
.economy-section-title small { color: #9d899e; font-size: 9px; font-weight: 500; }
.ranking-list { display: flex; flex-direction: column; gap: 4px; }
.ranking-row { min-height: 38px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.045); border-radius: 9px; background: rgba(255,255,255,.025); }
.ranking-place { color: #e7c4d6; font-size: 11px; font-weight: 800; text-align: center; }
.ranking-name { overflow: hidden; color: #f2e5ed; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-messages, .ranking-reward { color: #b29eaf; font-size: 9px; white-space: nowrap; }
.ranking-reward { color: #ffdc83; }
.ranking-rules { margin: 8px 0 0; color: #8f7f92; font-size: 9px; line-height: 1.5; }
.pin-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pin-shop-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); text-align: center; }
.pin-shop-card b { min-height: 26px; color: #f7e9f2; font-size: 10px; }
.pin-shop-card small { color: #bca8b7; font-size: 9px; }
.pin-shop-card p { min-height: 28px; margin: 0; color: #88778c; font-size: 8px; line-height: 1.4; }
.pin-shop-actions { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.pin-shop-actions button { min-height: 29px; padding: 5px 6px; border: 1px solid rgba(255,161,204,.17); border-radius: 8px; color: #ffd8e9; background: rgba(244,68,146,.08); cursor: pointer; font: inherit; font-size: 8px; }
.pin-shop-actions button:hover { border-color: rgba(255,161,204,.42); background: rgba(244,68,146,.15); }
.pin-shop-actions button:disabled { opacity: .55; cursor: default; }
.shop-pin-preview { width: 25px; height: 31px; }
.modal-close { width: 30px; height: 30px; display: grid; place-items: center; position: absolute; top: 15px; right: 15px; border: 1px solid var(--line); border-radius: 9px; color: #c2afc3; background: rgba(255,255,255,.03); cursor: pointer; font-size: 17px; }
.modal h2 { margin: 9px 0 5px; font-size: 21px; letter-spacing: -.5px; }
.modal-intro { margin: 0; color: #a998ab; font-size: 10px; line-height: 1.55; }
.profile-preview-row { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.profile-preview-row b { display: block; color: #f7e9f2; font-size: 12px; }
.profile-preview-row small { display: block; margin-top: 4px; color: #a997ac; font-size: 9px; text-transform: capitalize; }
.upload-button { width: 100%; border-color: rgba(255, 159, 204, .14); color: #ffd6e8; background: rgba(243, 76, 151, .09); }
.avatar-help { margin: 8px 0 0; color: #817187; font-size: 9px; text-align: center; }
.modal-divider { height: 1px; margin: 20px 0; background: var(--line); }
.password-form h3 { margin: 0 0 9px; color: #f3e2ee; font-size: 12px; }
.password-form .field-label { margin-top: 12px; }
.text-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; color: #fff; background: rgba(11,7,14,.36); font-size: 10px; }
.text-input:focus { border-color: rgba(255,105,177,.5); }
.password-submit { width: 100%; margin-top: 4px; border-color: rgba(255, 159, 204, .14); color: #ffd6e8; background: rgba(243, 76, 151, .09); }
.form-feedback { min-height: 16px; margin: 8px 0 5px; color: #91dfb0; font-size: 9px; }
.form-feedback.error { color: #ff9ebd; }
.logout-button { width: 100%; display: flex; justify-content: space-between; padding: 5px 0; border: 0; color: #e99cbd; background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; }
.people-modal { width: min(480px, calc(100vw - 28px)); }
.people-modal .members-search-wrap { margin: 18px 0 8px; }
.reports-button { flex: 0 0 auto; }
.reports-count { min-width: 15px; height: 15px; display: grid; place-items: center; position: absolute; top: -5px; right: -5px; padding: 0 4px; border: 1px solid #241329; border-radius: 6px; color: white; background: #ec438d; font-size: 8px; font-weight: 800; }
.report-message-context { margin: 16px 0 10px; padding: 10px; border-left: 2px solid #ed5b9d; border-radius: 5px 9px 9px 5px; color: #e8d8e4; background: rgba(9,5,12,.28); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.report-message-context small { display: block; margin-bottom: 4px; color: #f4a3c8; font-size: 8px; }
.report-form .field-label { margin-top: 13px; }
.report-details { height: 76px; min-height: 76px; padding: 9px 10px; resize: vertical; }
.report-form .button { width: 100%; }
.reports-list { max-height: 58vh; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; margin-top: 16px; }
.report-card { display: flex; flex-direction: column; gap: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); }
.report-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: #f4dbe9; font-size: 9px; }
.report-card-head small { color: #9c899e; font-size: 8px; text-align: right; }
.report-card-message { padding: 8px; border-radius: 7px; color: #ddcedb; background: rgba(8,5,11,.28); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.report-card-details { margin: 0; color: #f0c4d9; font-size: 9px; line-height: 1.4; }
.report-card-actions { display: flex; justify-content: flex-end; gap: 6px; }
.report-card-actions button { min-height: 27px; padding: 4px 8px; border: 1px solid rgba(255,159,204,.17); border-radius: 7px; color: #ffd6e8; background: rgba(243,76,151,.08); cursor: pointer; font-size: 8px; }
.report-card-actions button[data-status="dismissed"] { color: #c1b3c1; background: rgba(255,255,255,.03); }
.people-list { max-height: 43vh; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.people-option { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.people-option:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.people-option .member-copy { flex: 1; }
.people-option .member-name { color: #f1e3ef; }
.people-option .member-presence { color: #99899e; }
.people-option .people-arrow { color: #e47aa9; font-size: 15px; }
.people-empty { padding: 24px 10px; color: #94849a; text-align: center; font-size: 10px; }
.room-create-form { margin-top: 18px; }
.room-create-form .field-label { margin-top: 0; }
.room-create-submit { width: 100%; }
.manage-button { font-size: 15px; }
.manage-list { max-height: 55vh; gap: 7px; margin-top: 18px; }
.manage-row { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; background: rgba(255,255,255,.025); }
.manage-row .avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; font-size: 11px; }
.manage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 58%; }
.manage-action { padding: 6px 8px; border: 1px solid rgba(255,159,204,.16); border-radius: 8px; color: #ffd6e8; background: rgba(243,76,151,.08); cursor: pointer; font-size: 9px; }
.manage-action:hover { background: rgba(243,76,151,.18); }
.manage-action.danger { color: #ffb7c7; border-color: rgba(255,126,151,.16); background: rgba(180,45,82,.08); }
.kick-screen { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at top, #32152e, #100a15 72%); }
.kick-screen.hidden { display: none; }
.kick-card { width: min(430px, 100%); padding: 34px 28px; border: 1px solid rgba(255,219,239,.15); border-radius: 22px; text-align: center; background: linear-gradient(145deg,#2c1c34,#1b1122); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.kick-heart { display: block; margin-bottom: 12px; color: #fa6ba8; font-size: 44px; }
.kick-card h1 { margin: 8px 0; color: #fff0f7; font-size: 23px; }
.kick-card p { margin: 0 0 18px; color: #bbaabd; font-size: 12px; line-height: 1.6; }
.kick-card .button { margin-top: 8px; }
.kick-card .ban-until { margin: 16px 0 0; }
.toast-stack { display: flex; flex-direction: column; gap: 9px; position: fixed; z-index: 30; top: 82px; right: 20px; width: min(330px, calc(100vw - 28px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border: 1px solid rgba(255, 202, 224, .15); border-radius: 13px; background: rgba(46, 28, 52, .96); box-shadow: 0 13px 35px rgba(0,0,0,.35); animation: toast-in .22s ease-out; pointer-events: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.toast-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #ffd0e4; background: rgba(242, 61, 142, .15); font-size: 14px; }
.toast.private .toast-icon { background: rgba(113, 64, 150, .24); }
.toast-copy { min-width: 0; flex: 1; }
.toast-copy b { display: block; color: #fff2f9; font-size: 10px; }
.toast-copy p { margin: 4px 0 0; color: #bbaabd; font-size: 9px; line-height: 1.45; }
.toast-close { border: 0; color: #a58fa6; background: transparent; cursor: pointer; font-size: 15px; }
.toast-open { margin-top: 7px; padding: 0; border: 0; color: #ff9bc8; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }

@media (max-width: 1160px) {
  .workspace { grid-template-columns: 224px minmax(360px, 1fr); }
  .members-panel { display: none; }
  .members-panel.mobile-open { display: flex; width: min(310px, calc(100vw - 30px)); position: fixed; z-index: 12; top: 70px; right: 0; bottom: 0; border-left: 1px solid var(--line-strong); background: #1b1221; box-shadow: -16px 0 40px rgba(0,0,0,.36); }
  .mobile-only { display: inline-grid; }
  .topbar { padding: 0 20px; }
  .topbar-center { margin-left: auto; margin-right: auto; }
  .members-panel.mobile-open .mobile-only { display: inline-grid; }
}

@media (min-width: 761px) and (max-width: 1160px) {
  #mobile-conversations { display: none; }
}

@media (max-width: 760px) {
  .conversation-rail { overscroll-behavior: contain; }
  .reply-composer { margin-right: 10px; margin-left: 10px; }
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #130a17; }
  .overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 4, 11, .34); }
  .auth-screen { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 26px 18px 58px; }
  .auth-screen::before { inset: 0; background: radial-gradient(ellipse at 50% 4%, rgba(197, 26, 116, .24), transparent 45%); }
  .auth-art { width: 100%; min-height: auto; height: 108px; justify-content: flex-start; padding: 0 10px; }
  .auth-art::before { width: 230px; height: 230px; left: 50%; top: -120px; transform: translateX(-50%); }
  .auth-art::after { display: none; }
  .hero-heart { width: 67px; height: 62px; left: auto; right: 10%; top: -3px; opacity: .8; clip-path: path("M 33 60 C 24 51 2 37 2 20 C 2 4 23 0 33 15 C 44 0 65 5 65 20 C 65 37 42 52 33 60 Z"); }
  .hero-heart::before { display: none; }
  .hero-heart span { margin-top: -3px; font-size: 32px; }
  .hero-heart i { right: 9px; top: 16px; font-size: 9px; }
  .floating-heart { font-size: 20px; }
  .heart-one { left: 12%; top: 1px; }
  .heart-two { right: 25%; top: 38px; font-size: 14px; }
  .sparkle-one { left: 40%; top: 13px; font-size: 17px; }
  .sparkle-two { left: 3%; top: 53px; font-size: 17px; }
  .sparkle-three { right: 5%; top: 59px; font-size: 13px; }
  .auth-brand-copy { margin: 0; }
  .auth-brand-copy .brand-lockup { font-size: 17px; }
  .auth-brand-copy .brand-mark { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; }
  .auth-brand-copy p, .brand-stats { display: none; }
  .auth-card { width: min(100%, 440px); padding: 26px 23px; }
  .brand-lockup.compact { display: none; }
  .auth-card h1 { font-size: 24px; }
  .auth-footer { bottom: 20px; }

  .chat-app { min-height: 0; height: 100dvh; }
  .topbar { height: 58px; flex-basis: 58px; gap: 9px; padding: 0 11px; }
  .topbar .mobile-only { display: inline-grid; width: 31px; height: 31px; border: 0; background: transparent; }
  .topbar-brand { gap: 7px; font-size: 15px; }
  .topbar-brand .brand-mark { width: 27px; height: 27px; border-radius: 9px; font-size: 14px; }
  .topbar-center { gap: 6px; margin: 0 auto; font-size: 9px; white-space: nowrap; }
  .topbar-topic, .topbar-separator { display: none; }
  .topbar-actions { gap: 3px; }
  .coin-button { min-width: 40px; height: 30px; gap: 3px; padding: 0 5px; border-radius: 9px; }
  .coin-button span { font-size: 14px; }
  .coin-button b { font-size: 8px; }
  .profile-button { padding: 3px; }
  .profile-button-name, .profile-button .chevron { display: none; }
  .profile-button .avatar-small { width: 29px; height: 29px; }
  .workspace { display: block; position: relative; height: calc(100dvh - 58px - 55px); flex: 1; }
  .conversation-rail { display: none; width: min(310px, calc(100vw - 34px)); position: fixed; z-index: 12; top: 58px; bottom: 55px; left: 0; padding-top: 20px; border-right: 1px solid var(--line-strong); background: #1b1221; box-shadow: 16px 0 40px rgba(0,0,0,.36); }
  .conversation-rail.mobile-open { display: flex; }
  .members-panel.mobile-open { top: 58px; bottom: 55px; }
  .chat-column { height: 100%; }
  .chat-heading { min-height: 62px; gap: 9px; padding: 8px 13px; }
  .heading-avatar { width: 34px; height: 34px; border-radius: 12px; font-size: 20px; }
  .heading-copy h1 { font-size: 12px; }
  .heading-copy p { max-width: 205px; margin-top: 3px; font-size: 9px; }
  .heading-status { gap: 4px; font-size: 8px; }
  .heading-members-button { display: none; }
  .private-banner { padding: 6px 13px; font-size: 8px; }
  .chat-feed { padding: 13px 12px 7px; }
  .welcome-card { margin: 11px auto 20px; padding: 17px 14px; border-radius: 14px; }
  .welcome-card h2 { font-size: 13px; }
  .welcome-card p { font-size: 9px; }
  .welcome-tags { margin-top: 11px; }
  .welcome-tags span { padding: 5px 7px; font-size: 8px; }
  .date-divider { margin: 13px 0 12px; font-size: 8px; }
  .chat-message { gap: 7px; margin: 11px 0; }
  .chat-message .avatar { width: 29px; height: 29px; border-radius: 9px; }
  .message-main { max-width: 82%; }
  .message-name { font-size: 9px; }
  .message-time { font-size: 7px; }
  .message-bubble { padding: 8px 10px; font-size: 10px; }
  .message-actions { opacity: 1; pointer-events: auto; transform: none; right: -3px; top: -12px; }
  .mine .message-actions { left: -3px; right: auto; }
  .message-action { min-width: 23px; height: 22px; border-radius: 7px; font-size: 10px; }
  .system-message .message-bubble { font-size: 8px; }
  .typing-area { padding: 0 14px; }
  .composer-form { padding: 7px 10px 8px; }
  .composer-shell { min-height: 46px; gap: 5px; padding: 5px 6px 5px 8px; border-radius: 13px; }
  .composer-icon { width: 27px; height: 28px; font-size: 19px; }
  .composer-shell textarea { font-size: 10px; }
  .character-count { font-size: 7px; }
  .send-button { width: 32px; height: 32px; }
  .composer-note { padding-top: 6px; font-size: 7px; }
  .emoji-picker { width: 250px; bottom: 84px; left: 12px; }
  .mobile-bottom-nav { height: 55px; flex: 0 0 55px; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(19,10,23,.98); }
  .mobile-bottom-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; border: 0; color: #8d7d94; background: transparent; cursor: pointer; }
  .mobile-bottom-nav button.active { color: #ff8ebf; }
  .mobile-bottom-nav button span { font-size: 17px; line-height: 1.1; }
  .mobile-bottom-nav button small { font-size: 8px; }
  .mobile-bottom-nav button.has-notification small { color: #ff5b9e; font-weight: 800; text-shadow: 0 0 10px rgba(255,91,158,.6); animation: nav-notification-blink .9s steps(2, start) infinite; }
  @keyframes nav-notification-blink { to { visibility: hidden; } }
  .modal { padding: 25px 20px; }
  .toast-stack { top: 65px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav button.has-notification small { animation: none; visibility: visible; }
}

@media (max-width: 380px) {
  .topbar { gap: 5px; padding: 0 8px; }
  .topbar-brand { font-size: 13px; }
  .topbar-center { font-size: 8px; }
  .auth-card { padding: 24px 19px; }
  .message-main { max-width: 85%; }
  .character-count { display: none; }
}

/* Mobile chat layout: fit the visual viewport, respect phone safe areas and keep controls touchable. */
@media (max-width: 760px) {
  .chat-app { width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .topbar { height: 56px; height: calc(56px + env(safe-area-inset-top)); flex: 0 0 56px; flex-basis: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; gap: 8px; }
  .topbar-brand { flex: 0 0 auto; font-size: 14px; }
  .topbar-brand .version-tag { padding: 2px 4px; font-size: 6px; }
  .topbar-center { min-width: 0; margin: 0 auto; font-size: 10px; }
  .topbar-actions { flex: 0 0 auto; gap: 4px; }
  .topbar-actions .icon-button { width: 36px; height: 36px; }
  .coin-button { min-width: 39px; height: 30px; }
  .pin-shop { grid-template-columns: 1fr; }
  .pin-shop-card { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; text-align: left; }
  .pin-shop-card > small, .pin-shop-card > p { grid-column: 2 / 4; }
  .pin-shop-actions { grid-column: 1 / -1; flex-direction: row; }
  .pin-shop-actions button { flex: 1; }
  #mobile-members { display: none; }
  .workspace { width: 100%; height: auto; min-height: 0; flex: 1 1 0; overflow: hidden; }
  .chat-column { width: 100%; height: 100%; min-height: 0; }
  .chat-heading { min-height: 60px; flex: 0 0 auto; gap: 9px; padding: 8px 13px; }
  .heading-copy h1 { font-size: 14px; }
  .heading-copy p { max-width: 48vw; font-size: 11px; }
  .heading-status { font-size: 10px; }
  .chat-feed { min-height: 0; flex: 1 1 auto; padding: 14px 13px 9px; -webkit-overflow-scrolling: touch; }
  .welcome-card { margin: 10px auto 18px; padding: 16px 13px; }
  .welcome-card h2 { font-size: 15px; }
  .welcome-card p { font-size: 12px; }
  .welcome-tags span { padding: 6px 8px; font-size: 10px; }
  .chat-message { gap: 8px; margin: 12px 0; }
  .chat-message .avatar { width: 32px; height: 32px; }
  .message-main { max-width: 84%; }
  .message-name { font-size: 11px; }
  .message-time { font-size: 9px; }
  .message-bubble { padding: 9px 11px; font-size: 14px; line-height: 1.45; }
  .system-message .message-bubble { font-size: 11px; }
  .message-actions { top: -13px; }
  .message-action { min-width: 34px; height: 32px; font-size: 13px; }
  .typing-area { height: 24px; flex: 0 0 24px; font-size: 11px; }
  .composer-form { flex: 0 0 auto; padding: 7px 10px 8px; }
  .composer-shell { min-height: 50px; align-items: center; gap: 7px; padding: 5px 6px 5px 8px; }
  .composer-icon { width: 36px; height: 38px; font-size: 22px; }
  .composer-shell textarea { min-height: 38px; max-height: 96px; padding: 8px 0; font-size: 16px; line-height: 1.35; }
  .send-button { width: 40px; height: 40px; border-radius: 12px; }
  .character-count, .composer-note { display: none; }
  .mobile-bottom-nav { height: 54px; height: calc(54px + env(safe-area-inset-bottom)); flex: 0 0 54px; flex-basis: calc(54px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); }
  .mobile-bottom-nav button { min-height: 44px; gap: 2px; }
  .mobile-bottom-nav button span { font-size: 18px; }
  .mobile-bottom-nav button small { font-size: 10px; }
  .conversation-rail.mobile-open, .members-panel.mobile-open { top: 56px; top: calc(56px + env(safe-area-inset-top)); bottom: 54px; bottom: calc(54px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 36px)); padding: 16px 14px; overflow-y: auto; }
  .member-action-button { width: 36px; height: 36px; font-size: 16px; }
  .member-action-button svg { width: 19px; height: 19px; }
  .member-actions { opacity: 1; }
  .private-banner { min-height: 40px; flex: 0 0 auto; padding: 7px 13px; font-size: 11px; }
  .emoji-picker { bottom: 69px; left: 10px; width: min(280px, calc(100vw - 20px)); }
  .gif-picker { bottom: 69px; left: 10px; width: min(360px, calc(100vw - 20px)); max-height: min(390px, calc(100dvh - 170px)); padding: 10px; }
  .gif-results { grid-auto-rows: 82px; }
  .message-gif { max-width: min(330px, 72vw); max-height: 280px; }
  .modal { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 25px 19px; }
  .modal .text-input { font-size: 16px; }
  .toast-stack { top: calc(62px + env(safe-area-inset-top)); right: 10px; }
}

@media (max-width: 380px) {
  .topbar { gap: 5px; padding-left: 7px; padding-right: 7px; }
  .topbar-brand { gap: 5px; font-size: 13px; }
  .topbar-brand .brand-mark { width: 25px; height: 25px; }
  .topbar-center { font-size: 9px; }
  #manage-button { width: 32px; height: 32px; }
  .profile-button .avatar-small { width: 27px; height: 27px; }
  .heading-status { font-size: 9px; }
  .heading-copy p { max-width: 43vw; font-size: 10px; }
  .message-main { max-width: 86%; }
}

@media (max-height: 620px) and (max-width: 760px) {
  .chat-heading { min-height: 52px; padding-top: 5px; padding-bottom: 5px; }
  .mobile-bottom-nav { height: calc(48px + env(safe-area-inset-bottom)); flex-basis: calc(48px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav button { min-height: 40px; }
  .welcome-card { margin: 7px auto 12px; padding: 12px; }
  .welcome-art { display: none; }
  .chat-message { margin: 9px 0; }
  .composer-form { padding-top: 5px; padding-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Packs de emojis: seletor com altura limitada também em telemóveis. */
.emoji-picker { max-height: min(340px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.emoji-section-title { grid-column: 1 / -1; padding: 8px 2px 4px; color: #ffd8e9; font-size: 12px; }
.shop-emoji-preview { font-size: 26px; line-height: 1.2; }

/* Mais espaço para a conversa em ecrãs pequenos. */
.reaction-pill:disabled { cursor: default; opacity: 1; }
@media (max-width: 760px) {
  .chat-heading { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
  .heading-copy p { display: none; }
  .chat-feed { padding-top: 8px; }
  .typing-area { height: 18px; flex-basis: 18px; }
}

/* Na sala pública, o topo já identifica o chat e mostra os membros online. */
@media (max-width: 760px) {
  .chat-heading:has(.public-heading-avatar) { display: none; }
}

.frame-heart { outline: 2px solid #ff76ba; box-shadow: 0 0 10px #e45a94; }
.frame-fire { outline: 2px solid #ff9d35; box-shadow: 0 0 12px #ef5225; }
.frame-neon { outline: 2px solid #53ffd8; box-shadow: 0 0 12px #8b5cff; }
.message-bubble.bubble-ocean { background: #145777; color: white; }
.message-bubble.bubble-violet { background: #633c91; color: white; }
.message-bubble.bubble-sunset { background: linear-gradient(120deg,#963f64,#93541c); color: white; }
.chat-sticker { display: block; font-size: 64px; line-height: 1.3; }
.seasonal-pin { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.gift-collection { grid-column: 1 / -1; font-size: 13px; }
.entry-stars { position: absolute; z-index: 8; bottom: 150px; left: 10%; right: 10%; padding: 16px; border-radius: 16px; background: #47234f; color: #ffe3a3; text-align: center; pointer-events: none; animation: entry-glow 1s ease-in-out 3; }
@keyframes entry-glow { 50% { box-shadow: 0 0 25px #e6ac62; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .entry-stars { animation: none; } }

.member-menu-toggle { width: auto; min-width: 60px; padding: 0 8px; font-size: 11px; }
.member-actions-dialog { width: min(420px, calc(100vw - 24px)); max-height: 80dvh; overflow-y: auto; padding: 20px; color: #f8e9f3; background: #291c30; border: 1px solid #745068; border-radius: 18px; }
.member-actions-dialog::backdrop { background: rgba(0,0,0,.65); }
.member-actions-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-actions-dialog h2 { font-size: 20px; margin: 0; overflow-wrap: anywhere; }
.member-actions-dialog p { font-size: 13px; color: #cbb9c9; }
.member-actions-dialog button { min-height: 46px; padding: 10px 14px; color: #fff; background: #563049; border: 1px solid #835670; border-radius: 10px; cursor: pointer; font: inherit; }
.member-actions-options { display: grid; gap: 10px; }
.member-actions-options button { text-align: left; }
@media (max-width: 760px) { .member-row .member-actions { opacity: 1; pointer-events: auto; } }

/* O nick é um alvo independente dos atalhos da mensagem. */
.message-meta { position: relative; z-index: 3; }
.message-name.member-nick-button { position: relative; min-height: 32px; padding: 4px 6px; margin: -4px -6px; touch-action: manipulation; pointer-events: auto; }
@media (pointer: coarse) {
  .message-name.member-nick-button { min-height: 44px; }
  .message-actions { position: static; align-self: flex-end; flex-wrap: wrap; }
}

.message-action.message-moderate { width: auto; padding: 0 10px; font-size: 12px; }
@media (max-width: 760px), (pointer: coarse) {
  .chat-message:not(.mine):not(.system-message) { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; }
  .chat-message:not(.mine):not(.system-message) > .avatar { grid-column: 1; grid-row: 1; }
  .chat-message:not(.mine):not(.system-message) > .message-main { grid-column: 2; grid-row: 1; max-width: 100%; justify-self: start; }
  .chat-message:not(.mine) > .message-actions { grid-column: 1 / -1; position: static; justify-self: start; justify-content: flex-start; align-self: start; margin: 0; opacity: 1; pointer-events: auto; transform: none; flex-wrap: wrap; gap: 5px; }
  .message-actions .message-action { min-width: 40px; min-height: 40px; }
}

/* Atalhos junto à mensagem, encostados ao lado direito. */
@media (max-width: 760px), (pointer: coarse) {
  .chat-message:not(.mine):not(.system-message) { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .chat-message:not(.mine) > .message-actions { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; justify-content: flex-end; display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; }
  .message-actions .message-action { min-width: 36px; width: 36px; min-height: 40px; padding: 0; }
  .message-actions .message-moderate { grid-column: 1 / -1; width: 76px; font-size: 11px; }
  .chat-message:not(.mine) .message-gif { max-width: 100%; }
}

/* Escrita compacta no mobile: uma linha vazia, até três ao escrever. */
@media (max-width: 760px) {
  .composer-form { padding: 3px 8px 4px; }
  .composer-shell { min-height: 44px; gap: 3px; padding: 0 3px 0 5px; border-radius: 12px; }
  .composer-icon { width: 36px; height: 44px; flex: 0 0 36px; font-size: 21px; }
  .composer-icon.gif-toggle { width: 32px; flex-basis: 32px; font-size: 13px; }
  .composer-shell textarea { min-width: 0; min-height: 24px; max-height: 72px; padding: 2px 0; font-size: 16px; line-height: 22px; }
  .send-button { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; }
}

.nick-reaction { flex: 0 0 30px; width: 30px; height: 32px; border: 0; border-radius: 8px; color: #f4c6dd; background: transparent; cursor: pointer; font-size: 18px; }
.message-meta .nick-label { min-width: 0; }
@media (max-width: 760px), (pointer: coarse) {
  .chat-message:not(.mine):not(.system-message) { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .chat-message:not(.mine) > .message-actions { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 110px; gap: 4px; }
  .message-actions .message-moderate { width: auto; min-width: 58px; padding: 0 5px; }
  .message-meta { flex-wrap: wrap; gap: 4px; }
  .nick-reaction { height: 36px; }
}

/* Um único atalho visível à direita de cada membro. */
.member-options-button { flex: 0 0 30px; width: 30px; min-height: 32px; padding: 0; display: grid; place-items: center; line-height: 1; margin-left: auto; border: 1px solid rgba(255,163,204,.16); border-radius: 10px; background: rgba(249,68,156,.06); color: #f4c6dd; font-size: 19px; cursor: pointer; touch-action: manipulation; }
.member-options-button:hover, .member-options-button:focus-visible { background: rgba(249,68,156,.16); outline: 2px solid #b96b94; outline-offset: 1px; }

/* Avatar e nome partilham a mesma altura de cabeçalho. */
.chat-message { --message-avatar-size: 34px; }
.chat-message > .avatar { width: var(--message-avatar-size); height: var(--message-avatar-size); }
.message-meta { min-height: var(--message-avatar-size); margin: 0 0 6px; align-items: center; }
.message-name.member-nick-button { min-height: var(--message-avatar-size); margin: 0; padding: 0; display: inline-flex; align-items: center; }
.message-meta .nick-label { min-height: var(--message-avatar-size); align-items: center; }
.message-meta .nick-reaction { height: var(--message-avatar-size); display: grid; place-items: center; padding: 0; line-height: 1; }
@media (max-width: 760px), (pointer: coarse) {
  .chat-message { --message-avatar-size: 32px; }
}