/* ════════════════════════════════════════════════════════════════════════
   mantra-shout.css — THE SHOUT. The community's live room.

   Neoglass over the dark field: a bordered vessel that feels like a lit
   window rather than a form. Newest at the bottom. Every message carries a
   thin life-bar showing how much of its 72 hours remains — the room's
   ephemerality made visible instead of hidden.
   ════════════════════════════════════════════════════════════════════════ */

.sh {
  --sh-edge: rgba(255, 255, 255, .10);
  --sh-ink: #f2f4ff;
  --sh-dim: rgba(233, 236, 255, .58);
  --sh-vio: #b15cff;
  --sh-cyan: #3df2ff;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sh-edge);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(177, 92, 255, .07), rgba(8, 10, 20, .55) 32%),
    rgba(10, 12, 22, .62);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    0 30px 90px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
}

/* a soft aurora at the crown, so the room feels lit from within */
.sh::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 60%;
  background: radial-gradient(60% 100% at 50% 0, rgba(177, 92, 255, .22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── head ── */
.sh__head {
  position: relative;
  z-index: 1;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sh__title { display: flex; align-items: center; gap: 9px; }
.sh__title b {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--sh-ink);
}
.sh__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4affa3;
  box-shadow: 0 0 0 0 rgba(74, 255, 163, .55);
  animation: sh-pulse 2.6s ease-out infinite;
  flex: none;
}
@keyframes sh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 255, 163, .5); }
  70% { box-shadow: 0 0 0 11px rgba(74, 255, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 255, 163, 0); }
}
.sh__count {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--sh-dim);
  font-variant-numeric: tabular-nums;
}
.sh__eph {
  margin: 7px 0 0;
  font-size: .69rem;
  letter-spacing: .04em;
  color: rgba(233, 236, 255, .42);
}

/* ── the stream ── */
.sh__stream {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 180px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.sh__stream::-webkit-scrollbar { width: 6px; }
.sh__stream::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 99px;
}

.sh__loading, .sh__empty {
  margin: auto;
  text-align: center;
  color: var(--sh-dim);
  font-size: .84rem;
  padding: 26px 10px;
}
.sh__e1 { margin: 0; color: var(--sh-ink); font-weight: 600; }
.sh__e2 { margin: 5px 0 0; font-size: .78rem; }
.sh__retry {
  margin-top: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--sh-edge);
  color: var(--sh-ink);
  border-radius: 99px;
  padding: 7px 15px;
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}

/* ── one message ── */
.sh__m {
  display: flex;
  gap: 11px;
  animation: sh-in .42s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes sh-in {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.sh__m.is-pending { opacity: .58; }
.sh__m.is-failed .sh__txt { text-decoration: line-through rgba(255, 107, 138, .6); }

.sh__av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--sh-vio), var(--sh-cyan));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: #0a0c16;
  border: 1px solid rgba(255, 255, 255, .16);
}
.sh__body { min-width: 0; flex: 1; }

.sh__who {
  margin: 0 0 3px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: .76rem;
}
.sh__wn {
  font-weight: 650;
  color: var(--sh-ink);
  text-decoration: none;
}
a.sh__wn:hover { color: var(--sh-cyan); }
.sh__vf { color: var(--sh-cyan); font-size: .68rem; }
.sh__t { color: rgba(233, 236, 255, .38); font-size: .68rem; font-variant-numeric: tabular-nums; }
.sh__flight { font-size: .64rem; color: var(--sh-dim); letter-spacing: .06em; }
.sh__flight.is-bad { color: #ff6b8a; }

/* a quoted parent, so a reply reads as a reply */
.sh__q {
  margin: 0 0 4px;
  padding-left: 8px;
  border-left: 2px solid rgba(177, 92, 255, .4);
  font-size: .71rem;
  color: rgba(233, 236, 255, .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh__txt {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(242, 244, 255, .93);
  overflow-wrap: anywhere;
}
.sh__txt a { color: var(--sh-cyan); text-decoration: none; border-bottom: 1px solid rgba(61, 242, 255, .3); }
.sh__at { color: var(--sh-vio) !important; border: 0 !important; font-weight: 600; }

.sh__acts {
  display: flex;
  gap: 12px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity .22s ease;
}
.sh__m:hover .sh__acts, .sh__m:focus-within .sh__acts { opacity: 1; }
@media (hover: none) { .sh__acts { opacity: .72; } }
.sh__a {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .69rem;
  letter-spacing: .05em;
  color: var(--sh-dim);
  cursor: pointer;
}
.sh__a:hover { color: var(--sh-cyan); }
.sh__a.is-del:hover { color: #ff6b8a; }

/* the life bar — how much of its 72 hours this message has left */
.sh__life {
  display: block;
  height: 1.5px;
  margin-top: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.sh__life i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(177, 92, 255, .5), rgba(61, 242, 255, .5));
  transition: width .8s linear;
}

/* ── the composer ── */
.sh__composer {
  position: relative;
  z-index: 1;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(6, 8, 16, .35);
}
.sh__composer.is-locked { opacity: .72; }

/* The reply bar. `display:flex` on a class BEATS the [hidden] attribute's
   UA `display:none`, so without this explicit rule the bar rendered as an
   empty coloured strip whenever nothing was being replied to. Any element
   styled with a display value needs its own [hidden] guard. */
.sh__replyto[hidden] { display: none !important; }
.sh__replyto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(177, 92, 255, .12);
  border: 1px solid rgba(177, 92, 255, .24);
  font-size: .72rem;
  color: rgba(242, 244, 255, .8);
}
.sh__rtl { flex: 1; }
.sh__rtx {
  background: none; border: 0; padding: 2px 4px;
  color: var(--sh-dim); cursor: pointer; font-size: .8rem; line-height: 1;
}

.sh__crow { display: flex; gap: 9px; align-items: flex-end; }
.sh__in {
  flex: 1 1 auto;
  /* ☠️ min-width:0 IS THE FIX. A <textarea> carries an intrinsic minimum
     width from its `cols` default, and flex items default to
     `min-width:auto` — so `flex:1` alone CANNOT shrink it below that.
     On a narrow phone (or with Android's larger system font) the row grows
     past the card and `.sh { overflow:hidden }` clips whatever is last:
     the send button. Letting the textarea shrink keeps the button on screen
     at every width. */
  min-width: 0;
  /* one line of 16px text + padding, so the placeholder is never cut in half.
     The old 42px clipped a 68px two-line placeholder at ≤390px. */
  min-height: 48px;
  max-height: 120px;
  resize: none;
  border-radius: 16px;
  border: 1px solid var(--sh-edge);
  background: rgba(255, 255, 255, .05);
  color: var(--sh-ink);
  font: inherit;
  font-size: .92rem;      /* ≥16px on mobile via the media query below */
  line-height: 1.45;
  padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sh__in::placeholder { color: rgba(233, 236, 255, .34); }
.sh__in:focus {
  outline: 0;
  border-color: rgba(177, 92, 255, .55);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(177, 92, 255, .13);
}
.sh__in:disabled { cursor: not-allowed; }

.sh__send {
  /* 0 0 auto + explicit basis: the button keeps its full 44px no matter how
     cramped the row gets. It is the one element that must never be sacrificed. */
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(140deg, var(--sh-vio), #6d3bff);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 24px -12px rgba(177, 92, 255, .9);
}
.sh__send:disabled { opacity: .35; cursor: default; box-shadow: none; }
.sh__send:not(:disabled):hover { transform: translateY(-1px) scale(1.05); }
.sh__send:not(:disabled):active { transform: scale(.94); }
/* the glyph is a paper-plane drawn in CSS — no icon font, no SVG request */
.sh__sendg {
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.sh__cfoot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  min-height: 14px;
  padding: 0 3px;
}
.sh__cc { font-size: .66rem; color: var(--sh-dim); font-variant-numeric: tabular-nums; }
.sh__cc.is-near { color: #ffb37a; }
.sh__note { font-size: .7rem; color: var(--sh-dim); margin-left: auto; }
.sh__note.is-bad { color: #ff6b8a; }
.sh__note a { color: var(--sh-cyan); text-decoration: none; }

/* ── mobile ── */
@media (max-width: 700px) {
  .sh { border-radius: 22px; }
  .sh__stream { max-height: 52vh; padding: 12px 13px 4px; gap: 12px; }
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus */
  .sh__in { font-size: 16px; min-height: 50px; padding: 13px 12px; }
  .sh__av { width: 30px; height: 30px; font-size: .74rem; }
  .sh__txt { font-size: .88rem; }
  /* claw back horizontal room so the row never has to fight for it */
  .sh__composer { padding: 10px 10px 12px; }
  .sh__crow { gap: 7px; }
}

/* Very narrow phones (and anything with Android font scaling). The composer
   stacks: full-width field on top, a full-width send BAR beneath it. A round
   42px button crammed beside a textarea at 320px is what got clipped — at
   this width a bar is both unmissable and easier to hit. */
@media (max-width: 359px) {
  .sh__crow { flex-wrap: wrap; }
  .sh__in { flex: 1 1 100%; }
  .sh__send {
    flex: 1 1 100%;
    width: 100%;
    height: 44px;
    border-radius: 14px;
  }
  .sh__sendg { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sh__m { animation: none; }
  .sh__dot { animation: none; }
  .sh__life i { transition: none; }
  .sh__send { transition: none; }
}


/* ════ SourceCrowd v2 — the rainbow room (2026-08-08) ════
   The name wears the spectrum; ⛶ opens the room FULL SCREEN inside a
   conic rainbow ring. One static ring — no loops, no standing cost. */
.sh__title b{ background:linear-gradient(115deg,#b15cff,#3df2ff,#54ffa8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sh__full{ margin-left:auto; width:32px; height:32px; border-radius:13px; cursor:pointer;
  display:grid; place-items:center; font-size:.95rem; color:#cfeaff;
  background:rgba(12,16,34,.6); border:1px solid rgba(140,180,255,.25);
  transition:border-color .22s ease, box-shadow .22s ease, transform .15s ease; }
.sh__full:hover{ border-color:rgba(97,218,251,.6); box-shadow:0 0 16px -6px rgba(97,218,251,.6); }
.sh__full:active{ transform:scale(.92); }
.sh--full{ position:fixed !important; inset:8px !important; z-index:300; margin:0 !important;
  max-width:none !important; display:flex; flex-direction:column; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, rgba(12,15,32,.97), rgba(7,9,20,.985)) !important;
  box-shadow:0 0 60px -12px rgba(97,218,251,.3), 0 0 90px -30px rgba(177,92,255,.4) !important; }
.sh--full::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:2px;
  pointer-events:none; z-index:5; opacity:.55;
  background:conic-gradient(from 180deg,#b15cff,#3df2ff,#54ffa8,#ffd166,#ff6ad5,#b15cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; }
.sh--full .sh__stream{ flex:1 1 auto; max-height:none !important; min-height:0; }
html.sh-lock, html.sh-lock body{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .sh__full{ transition:none; } }

/* ════ SourceCrowd v3 — THE PORTAL FULL + WORLDS + THREADS (2026-08-08) ════
   FULL now lives on <body> (the JS portals it out), so fixed truly means the
   whole display — and it BLOOMS in instead of snapping. */
.sh--full{
  inset:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px !important;
  animation:shFullIn .55s cubic-bezier(.18,.8,.24,1.04);
}
/* the base card's ::before carries a fixed height — with inset:0, height WINS
   over bottom, so the ring stopped mid-room. In FULL the ring must stretch. */
.sh--full::before{ height:auto !important; width:auto !important; inset:0 !important; }
/* an author display on the class would defeat the hidden attribute — never */
.sh__thbar[hidden]{ display:none !important; }
@keyframes shFullIn{
  from{ opacity:0; transform:scale(.955) translateY(20px); }
  to{ opacity:1; transform:none; }
}
.sh--full .sh__composer{ flex:none; }

/* WORLDS — the flywheel's doors as channels of the one room */
.sh__worlds{ display:flex; gap:7px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sh__worlds::-webkit-scrollbar{ display:none; }
.sh__w{ flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-family:"Sora",system-ui,sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.1em;
  color:#9fb2d8; padding:6px 11px; border-radius:16px;
  background:rgba(12,16,34,.55); border:1px solid rgba(140,170,255,.18);
  transition:color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease; }
.sh__w i{ font-style:normal; font-size:.72rem; line-height:1; }
.sh__w:active{ transform:scale(.94); }
.sh__w.on{ color:#eaf6ff; border-color:rgba(97,218,251,.55); box-shadow:0 0 14px -6px rgba(97,218,251,.7); }
.sh__w.on[data-world="mantra"]{ border-color:rgba(177,92,255,.6); box-shadow:0 0 14px -6px rgba(177,92,255,.75); }
.sh__w.on[data-world="mind"]{ border-color:rgba(61,242,255,.6); box-shadow:0 0 14px -6px rgba(61,242,255,.75); }
.sh__w.on[data-world="model"]{ border-color:rgba(255,209,102,.6); box-shadow:0 0 14px -6px rgba(255,209,102,.7); }
.sh__w.on[data-world="move"]{ border-color:rgba(84,255,168,.6); box-shadow:0 0 14px -6px rgba(84,255,168,.7); }

/* THREADS — one conversation, lifted out of the room */
.sh__thbar{ display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid rgba(140,170,255,.14);
  background:linear-gradient(90deg, rgba(97,218,251,.08), rgba(177,92,255,.08));
  animation:shFullIn .4s ease; }
.sh__thback{ cursor:pointer; font-family:"Sora",system-ui,sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.06em; color:#bfe4ff; padding:6px 12px; border-radius:16px;
  background:rgba(12,16,34,.6); border:1px solid rgba(140,180,255,.25);
  transition:border-color .2s ease, transform .15s ease; }
.sh__thback:active{ transform:scale(.94); }
.sh__thname{ font-size:.72rem; font-weight:700; color:#dff0ff; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh__a.is-th{ color:#9fd8ff; }
@media (prefers-reduced-motion:reduce){ .sh--full, .sh__thbar{ animation:none; } .sh__w{ transition:none; } }