/* ==========================================================================
   OPTILOUNGE: the reviews and questions page, in both designs.
   eclipse.css or horizon.css loads first; this file only adds the lounge,
   built from that design's own tokens. The lounge sits in space (the scene
   is worlds2/lounge.js), so both designs are night here.
   Everything is text floating over the sky: no panels, no boxed rows, no
   loading placeholders. The only surfaces are controls (buttons, fields,
   the reply bar) and the message bubbles themselves.
   Anything that can be pressed is at least 44px to the touch; posting and
   sending are larger. Text people wrote is set as text, never as HTML.
   ========================================================================== */

/* -------------------------------------------------------------- roles */
body[data-lounge] {
  --l-text: #f6f3ff;
  --l-text-2: rgba(244, 241, 255, .88);
  --l-text-3: rgba(236, 232, 255, .7);
  --l-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .8);
  --l-rule: rgba(240, 236, 255, .14);
  --l-field: rgba(255, 255, 255, .07);
  --l-field-edge: inset 0 0 0 1px rgba(255, 255, 255, .14);
  --l-mark: var(--lux);
  --l-mark-rgb: var(--lux-rgb);
  --l-accent: var(--l-mark);
  --l-star: var(--l-mark);
  --l-star-off: rgba(255, 255, 255, .22);
  /* you: the coloured bubble on the right; everyone else: grey on the left */
  --l-me: var(--l-mark);
  --l-me-ink: #05060a;
  --l-them: rgba(58, 56, 72, .86);
  --l-them-ink: #f6f3ff;
  --l-bar: rgba(22, 20, 34, .78);
  --l-bar-edge: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -18px rgba(0, 0, 0, .9);
  --l-danger: #ff8a80;
  --l-danger-fill: #e5484d;
  --l-toast: rgba(246, 243, 255, .96);
  --l-toast-ink: #07060f;
  --l-head: "Instrument Heading", var(--f);
  --l-head-stretch: 82%;
  --l-body: var(--f);
  --l-title: var(--ink, linear-gradient(96deg, #f6f9ff, #c9d1da));
  --l-sign: #f1f4f7;
  --l-sign-glow: 0 0 16px rgba(var(--lux-rgb), .55), 0 0 40px rgba(var(--lux-rgb), .3);
  background: #020205;
}
body[data-lounge][data-design="horizon"] {
  --l-me: var(--hue);
  --l-me-ink: #fff;
  --l-them: rgba(255, 255, 255, .16);
  --l-head: "Funnel Heading", var(--fd);
  --l-head-stretch: 100%;
  --l-body: var(--ft);
  --l-title: linear-gradient(96deg, #fff8ea 0%, #ffd98a 30%, #c9a6ff 64%, #7ff0c8 100%);
  --l-sign: #ffe2a8;
  --l-sign-glow: 0 0 16px rgba(255, 190, 90, .6), 0 0 40px rgba(255, 170, 80, .35);
  background: #070913;
  color: var(--n-fg);
}
/* Eclipse has no light of its own for OptiCord; this one is the Horizon page's. */
body[data-design="eclipse"][data-product="cord"] {
  --lux: #9fb0ff; --lux-rgb: 159, 176, 255; --deep: #1a2a8f;
  --ink: linear-gradient(96deg, #f5f7ff 0%, #dfe5ff 38%, #9fb0ff 72%, #a59dff 100%);
}

/* ---------------------------------------------------------------- Horizon
   Horizon reads in daylight: the evening sky and its planets fill the hero,
   then a lit horizon opens onto a bright lounge, as on every Horizon page.
   Inside the day the roles turn to ink on paper. */
body[data-design="horizon"] .day {
  --l-text: var(--ink);
  --l-text-2: var(--ink-2);
  --l-text-3: var(--ink-3);
  --l-shadow: none;
  --l-rule: var(--line);
  --l-mark: var(--hue);
  --l-mark-rgb: var(--hue-rgb);
  --l-accent: var(--hue);
  --l-star: var(--hue);
  --l-field: #fff;
  --l-field-edge: inset 0 0 0 1px var(--line);
  --l-star-off: rgba(18, 22, 30, .16);
  --l-them: #e9e9eb;
  --l-them-ink: var(--ink);
  --l-bar: rgba(255, 255, 255, .94);
  --l-bar-edge: 0 0 0 1px rgba(18, 22, 30, .1), 0 16px 36px -18px rgba(18, 22, 30, .35);
  --l-danger: #c4271b;
  color: var(--ink);
}
body[data-design="horizon"] .day .bubble { -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-design="horizon"] .day .app img { opacity: .8; }
body[data-design="horizon"] .day .app[aria-current="true"] img { opacity: 1; }
body[data-design="horizon"] .day .board__icon { filter: drop-shadow(0 10px 22px rgba(18, 22, 30, .18)); }
body[data-design="horizon"] .day .chip[aria-pressed="true"] { color: var(--ink); }
.lhero + .day { margin-top: var(--arc); }
body[data-design="horizon"] .day .lounge { padding-top: calc(var(--sec) * .6); }
body[data-design="horizon"] .day .rules { padding-bottom: clamp(60px, 7vw, 110px); }
body[data-lounge].no-webgl {
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(255, 196, 90, .18), transparent 70%),
    radial-gradient(55% 55% at 85% 35%, rgba(140, 90, 255, .22), transparent 70%),
    radial-gradient(60% 50% at 40% 95%, rgba(40, 200, 150, .16), transparent 70%),
    #05040b;
}
/* the sky dims for reading (stage.js sets --dim from the section in view) */
body[data-lounge] .veil { background: radial-gradient(120% 80% at 50% 0%, rgba(5, 4, 11, .35), transparent 60%); }
body[data-lounge] .veil::after {
  content: ""; position: absolute; inset: 0; background: #05040b;
  opacity: var(--dim, 0); transition: opacity 1.1s var(--ease);
}
body[data-lounge] .page { color: var(--l-text); }
body[data-lounge][data-design="eclipse"] .foot { background: linear-gradient(180deg, transparent, rgba(5, 4, 11, .92) 40%); color: var(--l-text); }

/* -------------------------------------------------------------- hero
   One opening, played once: the sign comes on, light passes along the
   headline the way it does across Apple's animated headlines. The lounge
   below is there from the first frame. Without html.motion it is all simply there. */
.lhero {
  position: relative;
  padding: calc(var(--gbar) + clamp(72px, 14vh, 160px)) var(--gutter) clamp(56px, 8vw, 104px);
  text-align: center;
}
.lhero__in { width: min(100%, 900px); margin-inline: auto; }
.lhero__sign { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-bottom: 22px; }
.lhero__name {
  font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(19px, 1.6vw, 23px); font-weight: 620; letter-spacing: -.01em;
  color: var(--l-sign); text-shadow: var(--l-sign-glow);
}
.lhero__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.lhero__status i { width: 7px; height: 7px; border-radius: 50%; background: #6fe0a0; box-shadow: 0 0 10px rgba(111, 224, 160, .9); animation: lounge-breathe 2.8s var(--ease-io) infinite; }
.lhero__count { color: var(--l-text-3); }
.lhero__count:empty { display: none; }
@keyframes lounge-breathe { 50% { opacity: .45; box-shadow: 0 0 4px rgba(111, 224, 160, .4); } }
.lhero__title {
  font-family: var(--l-head); font-stretch: 80%; font-weight: 620; letter-spacing: -.016em;
  font-size: clamp(56px, 8vw, 124px); line-height: .94; text-wrap: balance;
  width: fit-content; max-width: 100%; margin-inline: auto; padding-bottom: .06em;
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat,
    var(--l-title);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff8ea;
  filter: drop-shadow(0 4px 30px rgba(5, 4, 11, .6));
}
body[data-design="horizon"] .lhero__title { font-stretch: 100%; letter-spacing: -.03em; line-height: .98; }
.lhero .t-lead { margin: 26px auto 0; max-width: 640px; color: var(--l-text-2); text-shadow: var(--l-shadow); }

html.motion .lhero__sign { animation: lounge-sign 1.2s var(--ease) .15s both; }
html.motion .lhero__title { animation: lounge-rise 1.3s var(--ease-out) .35s both, lounge-sweep 2.2s var(--ease-io) .7s both; }
html.motion .lhero .t-lead { animation: lounge-rise 1.2s var(--ease-out) .6s both; }
@keyframes lounge-sign {
  0% { opacity: 0; filter: brightness(.3); }
  30% { opacity: 1; filter: brightness(1.35); }
  42% { filter: brightness(.6); }
  58%, 100% { opacity: 1; filter: none; }
}
@keyframes lounge-rise { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } }
@keyframes lounge-sweep { from { background-position: 140% 0, 0 0; } to { background-position: -40% 0, 0 0; } }

/* ------------------------------------------------------------ the lounge */
.lounge { position: relative; padding: 0 0 clamp(80px, 9vw, 130px); }
.lounge__shell {
  width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto;
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: clamp(20px, 3vw, 48px); align-items: start;
}

/* the apps: names floating down the left, the one you sit at lit up */
.apps { position: sticky; top: 28px; }
.apps__label { margin: 0 0 8px 6px; font-size: 13px; font-weight: 600; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.apps__list { display: grid; gap: 2px; }
.app {
  position: relative; display: flex; align-items: center; gap: 13px; min-height: 56px; padding: 6px 6px;
  color: var(--l-text-2); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .3s var(--ease);
}
.app img { width: 38px; height: 38px; flex: none; opacity: .85; transition: opacity .3s var(--ease), transform .45s var(--ease-out), filter .45s var(--ease); }
.app__text { display: grid; min-width: 0; }
.app__name { font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; text-shadow: var(--l-shadow); }
.app__meta { font-size: 12.5px; line-height: 1.35; color: var(--l-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--l-shadow); }
.app:hover { color: var(--l-text); }
.app:hover img { opacity: 1; }
.app[aria-current="true"] { color: var(--l-text); }
.app[aria-current="true"] img { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(var(--l-mark-rgb), .55)); }
.app[aria-current="true"] .app__meta { color: var(--l-text-2); opacity: 1; }
.app::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--l-mark); box-shadow: 0 0 10px var(--l-mark); opacity: 0; transform: scale(.4);
  transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}
.app[aria-current="true"]::before { opacity: 1; transform: none; }

/* Eclipse reads on the sky itself, so a soft pool of dark sits behind the
   words: no edge and no surface, just less sky where the text is. */
body[data-design="eclipse"] .board, body[data-design="eclipse"] .apps { position: relative; isolation: isolate; }
body[data-design="eclipse"] .board::before, body[data-design="eclipse"] .apps::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 2, 5, .92), rgba(2, 2, 5, .72) 60%, transparent);
}
body[data-design="eclipse"] .board::before { inset: -80px -14% -60px; }
body[data-design="eclipse"] .apps::before { inset: -70px -90px -70px -110px; }

/* ------------------------------------------------------------ the board */
.board { min-width: 0; text-align: center; }
.board__head { display: grid; justify-items: center; gap: 10px; margin-bottom: 26px; }
.board__icon { width: 64px; height: 64px; filter: drop-shadow(0 0 22px rgba(var(--l-mark-rgb), .4)); }
.board__name {
  font-family: var(--l-head); font-stretch: var(--l-head-stretch);
  font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; font-weight: 620; letter-spacing: -.014em; color: var(--l-text);
  text-shadow: var(--l-shadow);
}
.board__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 15px; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.board__write { margin-top: 6px; min-height: 52px; padding: 12px 28px; font-size: 16.5px; touch-action: manipulation; }

.stars { display: inline-flex; gap: 2px; color: var(--l-star); filter: drop-shadow(0 0 6px rgba(var(--l-mark-rgb), .45)); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.stars .is-off { color: var(--l-star-off); }
.stars--lg svg { width: 20px; height: 20px; }

/* Reviews and Questions: two words in the middle, the chosen one lit and underlined */
/* both designs style a .seg of their own; the lounge's rules are scoped to the board so they win */
.board .seg { position: relative; display: flex; justify-content: center; gap: clamp(8px, 2vw, 22px); margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.seg .seg__opt {
  position: relative; height: auto; min-height: 50px; padding: 8px 18px; border-radius: 0; background: none; touch-action: manipulation;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.01em;
  color: var(--l-text-3); text-shadow: var(--l-shadow); transition: color .3s var(--ease);
}
.seg .seg__opt::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--l-mark); box-shadow: 0 0 12px var(--l-mark);
  transform: scaleX(0); transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.seg .seg__opt:hover { color: var(--l-text-2); }
.seg .seg__opt[aria-selected="true"] { color: var(--l-text); background: none; }
.seg .seg__opt[aria-selected="true"]::after { transform: none; }
.seg__n { font-family: var(--l-body); font-size: 13px; font-weight: 500; color: var(--l-text-3); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 4px; }
.chip {
  min-height: 44px; padding: 6px 10px; touch-action: manipulation;
  font-size: 14.5px; font-weight: 500; color: var(--l-text-3); text-shadow: var(--l-shadow);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.chip:hover { color: var(--l-text-2); }
.chip[aria-pressed="true"] { color: var(--l-text); text-decoration-color: var(--l-mark); }

/* ---------------------------------------------------------------- posts
   Each post is text on the sky; the whole post is the button. */
.panel { margin-top: 22px; text-align: left; transition: opacity .18s var(--ease); }
.panel.is-loading { opacity: .25; }
.posts { display: grid; gap: clamp(30px, 3vw, 42px); width: min(100%, 680px); margin-inline: auto; padding-top: 12px; }
.post { position: relative; transition: transform .35s var(--ease-out); }
.post__open { position: absolute; inset: -12px -14px; z-index: 1; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
.post__open:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 0; }
.post:hover { transform: translateX(6px); }
.post:hover .post__title, .post:hover .post__text { color: var(--l-text); }
.post__top { display: flex; align-items: center; gap: 12px; }
.post__top time { font-size: 13.5px; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.post__title {
  font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.22; font-weight: 600; letter-spacing: -.014em;
  color: var(--l-text); text-shadow: var(--l-shadow); text-wrap: pretty; overflow-wrap: anywhere; transition: color .25s var(--ease);
}
.post__text {
  margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--l-text-2); text-shadow: var(--l-shadow);
  white-space: pre-line; overflow-wrap: anywhere; transition: color .25s var(--ease);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.post--review .post__text { margin-top: 10px; font-size: 18px; color: var(--l-text); }
.post__foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13.5px; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.post__foot b { font-weight: 600; color: var(--l-text-2); }
.post__said { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.post__said b { font-weight: 650; color: var(--l-text); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.post__said .tick { width: 13px; height: 13px; color: var(--l-accent); flex: none; }
.post.is-held { opacity: .6; }
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--l-accent); }
.flag--warn { color: var(--l-danger); }
.flag--quiet { color: var(--l-text-3); font-weight: 500; }
.flag .tick { width: 12px; height: 12px; flex: none; }
.poster { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

.posts__state { padding: 24px 0; text-align: center; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.posts__state:empty { display: none; }
.state--error { color: var(--l-danger); }
.retry { margin-left: 6px; min-height: 44px; padding: 0 6px; color: var(--l-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.empty { padding: clamp(20px, 4vw, 48px) 0; text-align: center; }
.empty__title { font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(24px, 2.4vw, 30px); font-weight: 620; letter-spacing: -.01em; color: var(--l-text); text-shadow: var(--l-shadow); }
.empty p { margin: 8px auto 22px; max-width: 420px; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.more {
  display: flex; align-items: center; justify-content: center; margin: 28px auto 0; min-height: 48px; padding: 0 16px;
  font-size: 15.5px; font-weight: 600; color: var(--l-text-2); text-shadow: var(--l-shadow); transition: color .2s var(--ease);
}
.more:hover { color: var(--l-text); }

/* ---------------------------------------------------------- conversation */
.convo { width: min(100%, 720px); margin-inline: auto; text-align: left; }
.convo__bar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px -10px; }
.back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 8px 14px 8px 6px;
  font-size: 16.5px; font-weight: 500; color: var(--l-accent); text-shadow: var(--l-shadow); touch-action: manipulation;
}
.back:hover { color: var(--l-text); }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.convo__head { padding: 6px 0 4px; text-align: center; }
.convo__kind { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--l-accent); text-shadow: var(--l-shadow); margin-bottom: 10px; }
.convo__title {
  font-family: var(--l-head); font-stretch: var(--l-head-stretch);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 620; letter-spacing: -.014em; color: var(--l-text);
  text-shadow: var(--l-shadow); text-wrap: balance; overflow-wrap: anywhere;
}
.convo__by { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; font-size: 14px; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.convo__by b { font-weight: 600; color: var(--l-text-2); }
.convo__head .acts { justify-content: center; margin-top: 4px; }

/* the messages: yours in colour on the right, everyone else's in grey on the left */
.bubbles { display: flex; flex-direction: column; padding: 18px 0 10px; }
.when { align-self: center; margin: 18px 0 6px; font-size: 12.5px; font-weight: 500; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.when:first-child { margin-top: 4px; }
.bubbles__none { align-self: center; margin: 18px 0 6px; font-size: 15px; color: var(--l-text-3); text-align: center; text-shadow: var(--l-shadow); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 560px); margin-top: 2px; }
.msg--me { align-self: flex-end; align-items: flex-end; }
.msg__who { margin: 10px 16px 3px; font-size: 12.5px; color: var(--l-text-3); display: flex; align-items: center; gap: 6px; text-shadow: var(--l-shadow); }
.msg__who b { font-weight: 600; color: var(--l-text-2); }
.msg__who .tick, .convo__by .tick { width: 13px; height: 13px; color: var(--l-accent); }
.tag { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--l-text-2); box-shadow: inset 0 0 0 1px var(--l-rule); }
.bubble {
  position: relative; padding: 9px 15px 10px; border-radius: 20px;
  background: var(--l-them); color: var(--l-them-ink);
  font-size: 17px; line-height: 1.38; letter-spacing: -.008em; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.msg--me .bubble { background: var(--l-me); color: var(--l-me-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* the tail, cut by a mask so it sits on any sky */
.msg.is-tail .bubble::before {
  content: ""; position: absolute; bottom: 0; left: -6px; width: 18px; height: 18px; background: inherit;
  -webkit-mask: radial-gradient(14px 16px at 0 0, transparent 97%, #000 100%);
          mask: radial-gradient(14px 16px at 0 0, transparent 97%, #000 100%);
}
.msg--me.is-tail .bubble::before {
  left: auto; right: -6px;
  -webkit-mask: radial-gradient(14px 16px at 100% 0, transparent 97%, #000 100%);
          mask: radial-gradient(14px 16px at 100% 0, transparent 97%, #000 100%);
}
.msg.is-pending .bubble { opacity: .55; }
.msg.is-new .bubble { animation: lounge-pop .5s cubic-bezier(.34, 1.36, .64, 1); transform-origin: 0 100%; }
.msg--me.is-new .bubble { transform-origin: 100% 100%; }
@keyframes lounge-pop { from { transform: translateY(12px) scale(.9); opacity: 0; } 40% { opacity: 1; } }
.msg.is-held .bubble { outline: 2px dashed var(--l-danger); outline-offset: 2px; }
.msg__meta { display: flex; align-items: center; gap: 2px; margin: 1px 6px 0; font-size: 12.5px; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.msg__meta time { padding: 0 8px; }

/* quiet actions under a message: small to look at, full size to press */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.act {
  min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--l-text-3);
  text-shadow: var(--l-shadow); touch-action: manipulation; transition: color .2s var(--ease), background-color .2s var(--ease);
}
.act:hover { color: var(--l-text); }
.act--danger { color: var(--l-danger); }
.act.is-confirm { color: #fff; background: var(--l-danger-fill); text-shadow: none; }
.act:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .msg .acts { opacity: 0; transition: opacity .2s var(--ease); }
  .msg:hover .acts, .msg:focus-within .acts, .msg .acts:has(.is-confirm) { opacity: 1; }
}

/* the reply bar stays under the thumb while the conversation scrolls */
.reply__who { margin-top: 6px; }
.reply__as { display: flex; align-items: center; gap: 2px; margin: 0 0 2px 14px; font-size: 13px; color: var(--l-text-3); text-shadow: var(--l-shadow); }
.reply__change { min-height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--l-accent); }
.reply__name { margin: 0 0 8px; }
.reply__name input {
  width: min(100%, 320px); min-height: 48px; padding: 12px 16px; border: 0; border-radius: 16px; font: inherit; font-size: 16px;
  color: var(--l-text); background: var(--l-bar); box-shadow: var(--l-bar-edge);
}
.reply { position: sticky; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 5; margin-top: 2px; }
.reply__bar {
  display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 20px; border-radius: 28px; cursor: text;
  background: var(--l-bar); box-shadow: var(--l-bar-edge);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  transition: box-shadow .2s var(--ease);
}
.reply__bar:focus-within { box-shadow: var(--l-bar-edge), 0 0 0 3px rgba(var(--l-mark-rgb), .4); }
.reply__bar textarea {
  flex: 1; min-width: 0; min-height: 48px; max-height: 180px; padding: 13px 0 12px; margin: 0;
  border: 0; outline: none; resize: none; background: none; color: var(--l-text);
  font: inherit; font-size: 17px; line-height: 1.35; letter-spacing: -.008em;
}
.reply__bar textarea::placeholder { color: var(--l-text-3); }
/* a 48px target around a 38px circle */
.send {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; touch-action: manipulation;
  color: var(--l-me-ink); -webkit-tap-highlight-color: transparent;
}
.send::before { content: ""; grid-area: 1 / 1; width: 38px; height: 38px; border-radius: 50%; background: var(--l-me); transition: transform .15s var(--ease), opacity .2s var(--ease); }
.send svg { grid-area: 1 / 1; position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.send:active::before { transform: scale(.86); }
.send:disabled { cursor: default; }
.send:disabled::before { opacity: .3; }
.reply__error { margin: 8px 14px 0; font-size: 14px; color: var(--l-danger); }
.reply__error:empty { display: none; }

/* --------------------------------------------------------------- owner */
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; margin-bottom: 18px; font-size: 14.5px; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.owner-bar b { font-weight: 650; color: var(--l-text); }
.owner-bar__acts { display: flex; gap: 6px; }

/* the owner page opens on its sign-in, over the room */
/* A still screen: a live blur over the moving scene recomposites on every
   keystroke and flickers while typing, so the scene pauses behind it (lounge.js)
   and the backdrop is plain. */
.gate {
  position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px var(--gutter);
  background: radial-gradient(120% 90% at 50% 40%, rgba(5, 4, 11, .9), rgba(5, 4, 11, .97));
  transition: opacity .35s var(--ease), visibility 0s;
}
/* it appears at once and only waits out its fade when it leaves */
.gate.is-gone { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
html.owner-resume .gate { opacity: 0; visibility: hidden; transition: none; }
.gate__form { width: min(100%, 420px); text-align: center; }
.gate__title {
  margin: 10px 0 8px; font-family: var(--l-head); font-stretch: var(--l-head-stretch);
  font-size: clamp(34px, 4vw, 48px); line-height: 1.02; font-weight: 620; letter-spacing: -.014em; color: var(--l-text);
}
.gate__lead { margin: 0 auto 24px; max-width: 360px; color: var(--l-text-2); }
.gate__input {
  width: 100%; min-height: 56px; padding: 14px 18px; border: 0; border-radius: 18px; text-align: center;
  font: inherit; font-size: 18px; color: var(--l-text); background: var(--l-field); box-shadow: var(--l-field-edge);
}
.gate__input:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 0; }
.gate .form__error { margin-top: 12px; }
.gate .lsend { margin-top: 14px; }
html.motion .gate__form { animation: lounge-rise 1s var(--ease-out) .1s both; }

/* --------------------------------------------------------------- rules */
.rules { padding: 0 var(--gutter) clamp(80px, 9vw, 140px); }
.rules__in { width: min(100%, 680px); margin-inline: auto; text-align: center; }
.rules__title { font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(24px, 2.2vw, 30px); font-weight: 620; letter-spacing: -.012em; color: var(--l-text); text-shadow: var(--l-shadow); }
.rules__list { margin-top: 18px; display: grid; gap: 10px; color: var(--l-text-2); text-shadow: var(--l-shadow); }
.rules__list b { color: var(--l-text); font-weight: 600; }
.rules__note { margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--l-text-3); text-shadow: var(--l-shadow); }

/* ------------------------------------------------------- compose sheet
   No panel: the room blurs back and the form floats in the middle of it. */
body[data-design="horizon"] .gate { background: rgba(245, 247, 249, .97); }
body[data-design="horizon"] .lmodal, body[data-design="horizon"] .gate {
  color: var(--ink);
  --l-text: var(--ink); --l-text-2: var(--ink-2); --l-text-3: var(--ink-3); --l-shadow: none;
  --l-mark: var(--hue); --l-mark-rgb: var(--hue-rgb); --l-accent: var(--hue); --l-star: var(--hue);
  --l-field: #fff; --l-field-edge: inset 0 0 0 1px var(--line);
  --l-star-off: rgba(18, 22, 30, .16); --l-danger: #c4271b;
}
body[data-design="horizon"] .lmodal { background: rgba(245, 247, 249, .82); }
body[data-design="horizon"] .lmodal .modal__close { background: rgba(18, 22, 30, .06); color: var(--ink); }
body[data-design="horizon"] .gate .lhero__name { color: var(--hue); text-shadow: none; }
.lmodal { background: rgba(5, 4, 11, .66); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); }
.lmodal .modal__panel.compose { width: min(100%, 560px); padding: 24px 8px; background: transparent; box-shadow: none; color: var(--l-text); }
.lmodal .modal__close { width: 44px; height: 44px; top: 4px; right: 4px; background: rgba(255, 255, 255, .1); color: var(--l-text); }
.compose__app { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--l-accent); }
.compose__app img { width: 28px; height: 28px; }
.compose h2 { font-family: var(--l-head); font-stretch: var(--l-head-stretch); font-size: clamp(28px, 3.2vw, 36px); line-height: 1.08; padding-right: 48px; color: var(--l-text); }
.compose form { margin-top: 18px; }
.compose .field { margin-bottom: 16px; }
.compose .field > span { font-size: 14px; font-weight: 600; color: var(--l-text-2); }
.compose .field i { font-style: normal; font-weight: 400; opacity: .75; }
.compose .field input, .compose .field textarea {
  min-height: 54px; padding: 14px 16px; border-radius: 16px; font-size: 17px; line-height: 1.45;
  color: var(--l-text); background: var(--l-field); box-shadow: var(--l-field-edge);
}
.compose .field textarea { min-height: 150px; max-height: 46svh; resize: none; padding-bottom: 30px; }
.compose .field input:focus-visible, .compose .field textarea:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 0; }
.compose .field__count { color: var(--l-text-3); }
.rate { border: 0; margin: 0 0 14px; padding: 0; min-inline-size: 0; }
.rate legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--l-text-2); }
.rate__row { display: flex; align-items: center; gap: 0; margin-left: -6px; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rate label {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; cursor: pointer;
  color: var(--l-star-off); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), transform .2s var(--ease-out), filter .2s var(--ease);
}
.rate label svg { width: 38px; height: 38px; fill: currentColor; }
.rate label.is-on { color: var(--l-star); filter: drop-shadow(0 0 8px rgba(var(--l-mark-rgb), .6)); }
.rate label:active { transform: scale(.88); }
.rate input:focus-visible + label { outline: 2px solid var(--l-accent); outline-offset: -4px; }
.rate__word { margin-left: 10px; font-size: 15px; font-weight: 500; color: var(--l-text-3); white-space: nowrap; }
@media (max-width: 400px) { .rate label { width: 50px; } .rate label svg { width: 36px; height: 36px; } }
.lsend {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; margin-top: 6px;
  border-radius: 18px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; touch-action: manipulation;
  background: var(--l-me); color: var(--l-me-ink);
  transition: transform .15s var(--ease), opacity .2s var(--ease), box-shadow .25s var(--ease);
}
.lsend:hover { box-shadow: 0 10px 34px -10px rgba(var(--l-mark-rgb), .8); }
.lsend:active { transform: scale(.985); }
.lsend:disabled { opacity: .5; cursor: progress; }
.form__error { margin: 0 0 10px; font-size: 14.5px; line-height: 1.4; color: var(--l-danger); }
.form__error:empty { display: none; }
.compose .form__note { text-align: center; color: var(--l-text-3); }
.kbd-hint { white-space: nowrap; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--l-rule); }
@media (hover: none), (pointer: coarse) { .kbd-hint { display: none; } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 190;
  max-width: calc(100% - 32px); padding: 13px 22px; border-radius: 999px;
  background: var(--l-toast); color: var(--l-toast-ink); font-size: 15px; font-weight: 500; text-align: center;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------- moving about
   Opening a post pushes it in from the right and Back brings the list in
   from the left, as a navigation stack does. A freshly loaded list settles
   line by line, 40 ms apart. */
html.motion .is-push { animation: lounge-push .55s var(--ease-out) both; }
html.motion .is-pop { animation: lounge-pop-back .55s var(--ease-out) both; }
@keyframes lounge-push { from { opacity: 0; transform: translateX(28px); } }
@keyframes lounge-pop-back { from { opacity: 0; transform: translateX(-28px); } }
html.motion .posts.is-fresh > li { animation: lounge-row .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes lounge-row { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

/* ---------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
  .lounge__shell { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lounge__shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .apps { position: static; margin-inline: calc(var(--gutter) * -1); }
  .apps__label { display: none; }
  .apps__list {
    display: flex; gap: 4px; overflow-x: auto; padding: 4px var(--gutter) 6px;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .apps__list::-webkit-scrollbar { display: none; }
  .apps__list li { flex: none; scroll-snap-align: start; }
  .app { min-height: 52px; padding: 4px 12px 4px 4px; gap: 9px; }
  .app img { width: 34px; height: 34px; }
  .app__meta { display: none; }
  .app::before { left: 50%; top: auto; bottom: 0; margin: 0 0 0 -2px; }
}
@media (max-width: 600px) {
  .board__icon { width: 54px; height: 54px; }
  .board__write { width: 100%; }
  .msg { max-width: 86%; }
  .lmodal { align-items: end; padding: 0; }
  .lmodal .modal__panel.compose {
    width: 100%; max-height: calc(100svh - 24px); padding: 26px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(40px);
  }
  .lmodal.is-open .modal__panel.compose { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lhero__status i { animation: none; }
  .msg.is-new .bubble { animation: none; }
  .post:hover { transform: none; }
  .toast { transition: opacity .2s linear; transform: translate(-50%, 0); }
}
.convo .convo__head, .convo .bubbles { transition: opacity .18s var(--ease); }
.convo.is-loading .convo__head, .convo.is-loading .bubbles { opacity: .45; }