/* V40 / Warga Live Chat. Familiar messenger readability, live-radio attitude.
   The feed contains only approved public messages; composing stays in Warga. */
.playground-site .v37-chat-window{
  background:#1d1827;border:5px solid #292331;border-radius:25px;
  box-shadow:inset 0 0 0 1px #ffffff30,9px 11px 0 #08060e;
  overflow:hidden
}
.playground-site .v40-chat-header{
  position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:9px;min-height:82px;padding:13px 13px 12px;
  background:linear-gradient(120deg,#221b31 0%,#382149 60%,#4d2551 100%);
  color:#fff;border-bottom:1px solid #ffffff2c
}
.v40-chat-identity{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.v40-chat-icon{
  display:grid;place-items:center;flex:none;width:41px;height:41px;
  background:#f02d5e;color:#fff;border:2px solid #fff8;border-radius:13px;
  box-shadow:3px 3px 0 #100a18;font:900 26px/1 var(--body);transform:rotate(-7deg)
}
.v40-chat-identity>div{min-width:0}
.playground-site .v40-chat-header .v37-chat-kicker{display:block;color:#e7fb50;font:900 8px/1.2 var(--body);letter-spacing:.105em}
.playground-site .v40-chat-header h2{
  color:#fff;font:900 clamp(23px,2.15vw,31px)/.97 var(--heading);
  letter-spacing:-.02em;margin:6px 0 0;white-space:normal
}
.playground-site .v40-chat-header h2 span{color:#ff91b2}
.v40-chat-connection{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;width:71px}
.v40-chat-connection small{max-width:78px;text-align:center;color:#f4e5f2;font:900 7px/1.25 var(--body);letter-spacing:.07em}
.playground-site .v40-chat-header .v37-chat-led{width:11px;height:11px;background:#92909d;box-shadow:0 0 0 4px #ffffff1e}
.playground-site .v40-chat-header .v37-chat-led.is-active{background:#e7fb50;box-shadow:0 0 0 4px #e7fb5033,0 0 12px #e7fb50}
.playground-site .v37-chat-program{
  background:#e7fb50;color:#23192c;min-height:36px;padding:8px 13px;border-bottom:2px solid #292331
}
.playground-site .v37-chat-program>span{font:900 8px/1.3 var(--body);letter-spacing:.08em}
.playground-site .v37-chat-program>strong{font:900 13px/1.1 var(--heading);max-width:54%}

/* Only a moderator-pinned real message can activate this top-of-room banner. */
.v40-pinned-spotlight[hidden]{display:none!important}
.v40-pinned-spotlight{
  display:flex;align-items:center;gap:11px;flex:none;min-width:0;width:100%;
  padding:10px 12px;background:#fff0bd;color:#312033;border:0;
  border-bottom:1px solid #e4cf91;text-align:left;cursor:pointer
}
.v40-pinned-mark{flex:none;max-width:95px;font:900 9px/1.25 var(--body);letter-spacing:.035em;color:#a02c57}
#v40-pinned-preview{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 11px/1.35 var(--body)}
.v40-pinned-arrow{flex:none;font:900 18px/1 var(--body)}
.v40-pinned-spotlight:hover{background:#f9e6a3}
.v40-pinned-spotlight:focus-visible{outline:3px solid #e92f64;outline-offset:-3px}

.playground-site .v37-chat-mount{background:#f6f0ea}
.playground-site .v37-chat-mount .ow-feed{
  background-color:#f9f1ec;
  background-image:radial-gradient(circle,#a8829433 .8px,transparent 1px),linear-gradient(160deg,#f8f1e7 0%,#f7eaef 100%);
  background-size:17px 17px,auto;
  padding:13px 10px 10px
}
.playground-site .v37-chat-mount .ow-feed-top{margin-bottom:9px;padding:0 5px 8px;border-bottom:1px solid #6f51622d}
.playground-site .v37-chat-mount .ow-feed-top h3{font:900 10px/1 var(--body);color:#4d3652}
.playground-site .v37-chat-mount .ow-feed-top>span{font:800 8px/1 var(--body);color:#6a5d68}
.playground-site .v37-chat-mount .ow-feed>.ow-message-list{padding:0 6px 10px 0;scrollbar-color:#ec3b72 #e3d7dd}
.playground-site .v37-chat-mount .ow-message{gap:9px;padding:7px 0}
.playground-site .v37-chat-mount .ow-avatar{
  width:32px;height:32px;border:2px solid #fffcf4;border-radius:13px;
  box-shadow:0 2px 0 #27192925;font-size:10px
}
.playground-site .v37-chat-mount .ow-bubble{
  position:relative;padding:10px 12px 9px;border:1px solid #e5d5dd;
  border-radius:5px 16px 16px 16px;background:#fffdfa;
  box-shadow:0 2px 3px #2b102110
}
.playground-site .v37-chat-mount .ow-message header{align-items:flex-start;flex-wrap:wrap;margin-bottom:5px;gap:5px}
.playground-site .v37-chat-mount .ow-message header strong{font:900 11px/1.3 var(--body);color:#6e3d8b}
.playground-site .v37-chat-mount .ow-message time{font:600 9px/1.2 var(--body);color:#8b818a}
.playground-site .v37-chat-mount .ow-message .ow-bubble>p:not(.ow-meta){font:500 13px/1.55 var(--body);color:#211d26}
.playground-site .v37-chat-mount .ow-message .ow-meta{color:#887d89;font-size:9px}
.playground-site .v37-chat-mount .ow-message .ow-report{font-size:9px;min-height:27px;color:#8c7f86}
.playground-site .v37-chat-mount .ow-message .ow-label{background:#e7fb50;color:#2d2532}

/* A reply from the studio reads as its own outgoing message, not a footnote. */
.warga-section .ow-message .ow-reply,.v37-chat-mount .ow-message .ow-reply{
  grid-column:2;justify-self:end;min-width:0;width:min(100%,92%);
  margin:6px 0 1px;padding:11px 13px 10px;
  border:1px solid #f5a0b7;border-left:1px solid #f5a0b7;
  border-radius:15px 15px 4px 15px;background:#ffdae5;
  box-shadow:0 2px 0 #532b3e17
}
.warga-section .ow-message .ow-reply strong,.v37-chat-mount .ow-message .ow-reply strong{color:#b61e4d;font:900 9px/1.35 var(--body);letter-spacing:.04em}
.warga-section .ow-message .ow-reply p,.v37-chat-mount .ow-message .ow-reply p{font:600 12px/1.55 var(--body);color:#331c2d}
.warga-section .ow-message .ow-reply:before,.v37-chat-mount .ow-message .ow-reply:before{
  content:'✳ 1056';display:inline-flex;float:right;margin-left:8px;color:#e82e60;
  font:900 10px/1.3 var(--body)
}

/* Real dates separate older conversations, just like a familiar group chat. */
.warga-section .ow-day-separator,.v37-chat-mount .ow-day-separator{display:flex;align-items:center;justify-content:center;padding:9px 4px 5px}
.warga-section .ow-day-separator:before,.v37-chat-mount .ow-day-separator:before,.warga-section .ow-day-separator:after,.v37-chat-mount .ow-day-separator:after{content:'';height:1px;flex:1;background:#c4b7bd}
.warga-section .ow-day-separator,.v37-chat-mount .ow-day-separator{gap:9px;font:800 9px/1.3 var(--body);color:#756572}
.warga-section .ow-message--new,.v37-chat-mount .ow-message--new{animation:v40-chat-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes v40-chat-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* A messenger-inspired composer cue, but not a fake editable field: it is a
   real link to the existing, moderated Warga form. */
.playground-site .v40-chat-foot{
  min-height:61px;padding:9px 10px;gap:8px;
  background:#231c2c;border-top:2px solid #15111c
}
.v40-chat-hint{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  padding:10px 9px;border:1px solid #ffffff4b;border-radius:21px;
  background:#373043;color:#f0e7ee;font:750 10px/1.2 var(--body);letter-spacing:0}
.v40-chat-hint i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#f02d5e;color:#fff;font-style:normal}
.playground-site .v40-chat-join{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:40px;
  padding:9px 10px;border:0;border-radius:21px;background:#e7fb50;color:#221529;
  font:900 10px/1.1 var(--body);letter-spacing:0;text-decoration:none;white-space:nowrap
}
.v40-chat-join span{font-size:15px}
.playground-site .v40-chat-join:hover{background:#fff9b7;transform:translateY(-1px)}
.playground-site .v40-chat-join:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(max-width:1280px){
  .playground-site .v40-chat-header h2{font-size:30px}
  .playground-site .v37-chat-window{height:560px}
}
@media(max-width:760px){
  /* Native chat-sheet feel on a phone; no phone bezel inside a phone. */
  .playground-site .v37-chat-window{height:min(70svh,560px);min-height:430px;border:2px solid #292331;border-radius:17px;box-shadow:4px 6px 0 #09090b}
  .playground-site .v40-chat-header{min-height:76px;padding:12px}
  .playground-site .v40-chat-header h2{font-size:29px}
  .v40-chat-icon{width:38px;height:38px}
  .playground-site .v37-chat-mount .ow-feed{padding:10px 11px}
  .playground-site .v40-chat-foot{min-height:58px;padding:8px}
}
@media(max-width:410px){
  .playground-site .v37-chat-window{height:min(67svh,520px);min-height:420px}
  .playground-site .v40-chat-header h2{font-size:24px}
  .v40-chat-connection{width:61px}
  .v40-chat-hint{font-size:9px;padding:8px 7px}
  .playground-site .v40-chat-join{font-size:9px;padding:8px 9px}
  .v40-chat-icon{width:34px;height:34px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .warga-section .ow-message--new,.v37-chat-mount .ow-message--new{animation:none!important}
  .playground-site .v40-chat-join{transition:none!important}
}