/* The community page: a channel rail beside one channel view, in the site's terminal palette. */
.community-page{max-width:1240px;margin:auto;padding:46px max(5vw,20px) 80px}
.community-intro{margin-bottom:28px}
.community-intro h1{font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-2px;margin:14px 0 12px}
.community-deck{max-width:640px;font-size:15px;line-height:1.8;color:var(--t-muted,#93a08c)}
/* Two sections, not three rooms: tabs across the top give the feed the width a side rail was
   taking, and the side column carries what people come here needing. */
.community-intro h1{margin-top:0}
.community-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.community-main{min-width:0}
.channel-rail{display:flex;gap:4px;padding:4px;margin-bottom:14px;border:1px solid var(--t-line,#243024);border-radius:12px;background:#0b0e14;width:fit-content;max-width:100%}
.channel{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:9px;padding:11px 18px;color:var(--t-muted,#93a08c);font:600 14px/1 Archivo,Arial,sans-serif;cursor:pointer;transition:background .15s ease,color .15s ease}
.channel:hover{color:var(--t-ink,#e8efe4)}
/* The site restyles every .guide-page button with three :not()s and !important, which outranks a
   plain class rule. The tabs have to out-specify it to be tabs at all. */
body.guide-page .channel-rail button.channel{background:transparent !important;border-color:transparent !important;color:var(--t-muted,#93a08c) !important}
body.guide-page .channel-rail button.channel:hover{color:var(--t-ink,#e8efe4) !important}
body.guide-page .channel-rail button.channel.is-active{background:var(--t-lime,#c6ef79) !important;border-color:var(--t-lime,#c6ef79) !important;color:#0b0e14 !important}
.channel:focus-visible,.side-card:focus-visible,.side-links a:focus-visible{outline:2px solid var(--t-lime,#c6ef79);outline-offset:3px}
.channel-flag{font:500 10px/1 'JetBrains Mono',monospace;padding:3px 6px;border-radius:5px;background:#1b2130;color:var(--t-muted,#93a08c)}
.channel-rail .channel.is-active .channel-flag{background:#0b0e1426;color:#0b0e14}
.channel-body{min-width:0}

.community-side{display:grid;gap:12px;position:sticky;top:96px}
.side-card{display:grid;gap:6px;padding:18px;border:1px solid var(--t-line,#243024);border-radius:14px;background:#0b0e14;color:var(--t-ink,#e8efe4);text-decoration:none}
a.side-card{transition:border-color .15s ease,background .15s ease}
a.side-card:hover{border-color:var(--t-edge-hi,#5b7d4f);background:#0e131b}
.side-card strong{font-size:16px;line-height:1.3;font-weight:700;color:var(--t-ink-hi,#eef4ea)}
.side-copy{font-size:13.5px;line-height:1.6;color:var(--t-muted,#93a08c)}
.side-go{margin-top:6px;font-size:13px;font-weight:600;color:var(--t-lime,#c6ef79);text-decoration:underline;text-underline-offset:3px}
/* The one card that matters most: where the conversation actually is. */
.side-track{border-color:#3a5230;background:linear-gradient(160deg,#121b10,#0b0e14 70%)}
.side-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--t-lime,#c6ef79)}
.side-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t-lime,#c6ef79);box-shadow:0 0 0 4px #c6ef7926}
.side-safe ul{margin:2px 0 4px;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--t-ink,#e8efe4)}
.side-links{display:flex;flex-wrap:wrap;gap:6px 16px;padding:4px 6px;font-size:13.5px}
.side-links a{color:var(--t-muted,#93a08c);text-decoration:underline;text-underline-offset:3px}
.side-links a:hover{color:var(--t-ink,#e8efe4)}
.chat-rules-title{margin-top:20px;font:9px/1 'JetBrains Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--t-violet,#ad9cff)}
.chat-rules{margin:12px 0 0;padding-left:18px;display:grid;gap:10px;font-size:13px;line-height:1.75;color:#c3cdbb}
.chat-rules a{color:#7fb3ff;text-decoration:none;border-bottom:1px solid #7fb3ff55}
.chat-note{margin-top:18px;padding:12px 14px;border:1px solid #3b3358;background:#171327;border-radius:10px;font-size:12.5px;line-height:1.7;color:#cfc8e6}
/* Crew Chat and Support: the same .chat-* furniture as #announcements, inside a fixed-height
   column so the message list scrolls under a pinned header and above a pinned composer. */
.chat-live{display:flex;flex-direction:column;height:min(74vh,720px)}
.chat-live-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2d4433 transparent}
.chat-scroll::-webkit-scrollbar{width:10px}
.chat-scroll::-webkit-scrollbar-thumb{background:#243024;border-radius:6px;border:3px solid #0b0e14}
.chat-scroll::-webkit-scrollbar-track{background:transparent}

/* A wallet has no picture, so its address draws one: the hue comes from the address itself. */
.chat-avatar.ident{display:grid;place-items:center;font:700 12px/1 'JetBrains Mono',monospace;color:#10140f;letter-spacing:.04em}
.chat-you{font:7px/1 'JetBrains Mono',monospace;letter-spacing:1.2px;padding:3px 5px;border-radius:4px;background:#243024;color:var(--t-muted,#93a08c);font-weight:700}
/* In a private thread the two sides must never be confusable, so the crew's replies carry a
   violet edge and their own tint; the member's own messages stay the plain channel style. */
.chat-thread .chat-msg.from-team{background:#15122a;box-shadow:inset 2px 0 0 var(--t-violet,#ad9cff)}
.chat-thread .chat-msg.from-team:hover{background:#1a1633}

.chat-older{display:flex;justify-content:center;padding:14px 18px 4px}
.chat-older-btn{background:none!important;border:1px solid var(--t-line-2,#2d4433)!important;border-radius:999px;padding:6px 14px;font:9px/1 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--t-muted,#93a08c)!important;cursor:pointer}
.chat-older-btn:hover:not(:disabled){color:var(--t-ink,#e8efe4)!important;border-color:var(--t-edge-hi,#5b7d4f)!important}

.chat-jump{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);border:1px solid var(--t-accent,#c6f36b)!important;background:#0e1411f2!important;color:var(--t-accent,#c6f36b)!important;border-radius:999px;padding:7px 15px;font:9px/1 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px #0009}

.chat-privacy{margin:0;padding:10px 18px;border-bottom:1px solid var(--t-line,#243024);background:#0d1119;font:10px/1.7 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--t-lilac,#b9abd2)}
.chat-faq{border-bottom:1px solid var(--t-line,#243024);background:#0d1119}
.chat-faq>summary{cursor:pointer;padding:10px 18px;font:9px/1.6 'JetBrains Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--t-violet,#ad9cff)}
.chat-faq>summary::marker{color:var(--t-muted,#93a08c)}
.chat-faq .chat-rules{padding:0 18px 16px 34px;margin:0}

.chat-foot{border-top:1px solid var(--t-line,#243024);background:#0f131b;padding:12px 14px;display:grid;gap:9px}
.chat-status{margin:0;font:10px/1.6 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--t-muted,#93a08c)}
.chat-status.is-warn{color:var(--t-warn,#ffc56b)}
.chat-status.is-error{color:var(--t-danger,#ff9fae)}
/* These three are shown and hidden from JS with the `hidden` attribute, and each sets `display`
   below. A class beats the browser's own `[hidden]` rule, so without this the attribute has no
   visible effect: the sign-in prompt, the composer and the signed-in line all render at once, and
   a signed-in reader is still told to sign in. */
.chat-signin[hidden],.chat-composer[hidden],.chat-who[hidden]{display:none}
.chat-signin{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chat-signin-copy{margin:0;flex:1;min-width:220px;font-size:12.5px;line-height:1.7;color:var(--t-muted,#93a08c)}
.chat-signin-btn{border-radius:10px;padding:10px 16px;font-size:13px;cursor:pointer}
.chat-composer{display:flex;align-items:flex-end;gap:10px}
.chat-input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chat-input{flex:1;min-width:0;resize:none;max-height:140px;background:#12161f;border:1px solid var(--t-line-2,#2d4433);border-radius:11px;padding:11px 13px;color:var(--t-ink,#e8efe4);font-family:inherit;font-size:13.5px;line-height:1.6}
.chat-input::placeholder{color:#68755f}
.chat-input:focus{outline:none;border-color:var(--t-edge-hi,#5b7d4f)}
.chat-send{border-radius:10px;padding:11px 18px;font-size:13px;cursor:pointer;flex:none}
.chat-who{display:flex;align-items:center;gap:10px;margin:0;font:10px/1 'JetBrains Mono',monospace;color:var(--t-muted,#93a08c)}
.chat-signout{background:none!important;border:0!important;padding:0;font:10px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted,#93a08c)!important;cursor:pointer;text-decoration:underline}
.chat-signout:hover{color:var(--t-ink,#e8efe4)!important}
.chat-foot-note{margin:0;font:10px/1.7 'JetBrains Mono',monospace;color:#68755f}

@media(max-width:980px){
  .community-shell{grid-template-columns:1fr}
  /* The track card leads on a phone: it is the thing most people opened this page looking for. */
  .community-side{position:static;order:-1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .side-links{grid-column:1/-1}
}
@media(max-width:820px){
  .chat-live{height:min(78vh,640px)}
  .chat-foot-note{display:none}
}
@media(max-width:560px){
  .community-page{padding-top:28px}
  .channel-rail{width:100%}
  .channel{flex:1;justify-content:center;padding:12px 10px}
  .side-safe{display:none} /* repeated inside Support, where it is needed */
}
@media (prefers-reduced-motion:reduce){.channel,a.side-card{transition:none}.chat-scroll{scroll-behavior:auto}}

/* ---------- Your own messages sit on the right ----------
   The row flips rather than the text: the grid swaps its two columns so the avatar stays beside
   its message and the whole thing reads as your side of the conversation, the way a messenger
   does. The header flips with it so the timestamp does not end up stranded mid-row.

   Only crew chat gets this. In Support the distinction that matters is you versus the crew, and
   that is already carried by .from-team. */
#channel-crew-chat .chat-msg.is-you{grid-template-columns:1fr 56px;padding:6px 0 6px 18px}
#channel-crew-chat .chat-msg.is-you .chat-gutter{grid-column:2;grid-row:1}
#channel-crew-chat .chat-msg.is-you .chat-content{grid-column:1;grid-row:1;padding-right:0;padding-left:8px}
#channel-crew-chat .chat-msg.is-you .chat-head{justify-content:flex-end}
#channel-crew-chat .chat-msg.is-you .chat-body{text-align:right}

/* ---------- First-time chatter, moderation, counter ---------- */
/* A newcomer's first words are marked: a welcome for the room, and the thing that makes a wave
   of fresh wallets posting the same link obvious instead of blending in. */
.chat-new{font:9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;padding:3px 6px;border-radius:4px;
  color:#0c140e;background:var(--t-lime,#c6ef79);white-space:nowrap}

/* Moderation sits on the message, team only, and stays out of the way until hovered. The server
   checks the team list on every call, so hiding these is presentation, never the gate. */
.chat-mod{display:inline-flex;gap:6px;margin-left:auto;opacity:0;transition:opacity .12s ease}
.chat-msg:hover .chat-mod,.chat-mod:focus-within{opacity:1}
.chat-mod-btn{font:9px/1 'JetBrains Mono',monospace;letter-spacing:.06em;padding:4px 7px;cursor:pointer;
  border:1px solid var(--t-line-2,#2d4433);border-radius:5px;background:var(--t-raised,#0c140e);
  color:var(--t-muted,#93a08c)}
.chat-mod-btn:hover{border-color:var(--t-edge-hi,#5b7d4f);color:var(--t-ink,#dce5d8)}
.chat-mod-btn:last-child:hover{border-color:#5b2f38;color:var(--t-danger,#ff9fae)}
.chat-mod-btn:disabled{opacity:.4;cursor:default}

/* Silent until it is worth knowing. A counter reading "500 left" over an empty box is noise. */
.chat-count{align-self:center;font:10px/1 'JetBrains Mono',monospace;color:var(--t-muted,#93a08c);
  min-width:26px;text-align:right}
.chat-count.is-low{color:var(--t-danger,#ff9fae)}

/* A team message of your own is both: it sits on the right like the rest of yours, so its violet
   edge moves to the right too rather than hanging off the far side of the row. */
#channel-crew-chat .chat-msg.from-team.is-you{box-shadow:inset -2px 0 0 var(--t-violet,#ad9cff)}