/* Ojerk V16.0.1 — sidebar About, editable chat input and persistent live player. */

/* The home keeps the catalogue title, but no longer prints “300 models”. */
.oj-v13-home .oj-v13-grid-head > strong { display:none !important; }

/* About returns to the profile panel beside the player. */
.oj-v1601-sidebar-about{
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(var(--oj-accent-rgb),.09),rgba(255,255,255,.018));
}
.oj-v1601-sidebar-about>span{
  display:block;
  color:var(--oj-accent-hover);
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.oj-v1601-sidebar-about h2{
  margin:6px 0 10px;
  font-size:clamp(19px,1.8vw,27px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.oj-v1601-sidebar-about p{
  margin:0 0 10px;
  color:#b7bbc5;
  font-size:13px;
  line-height:1.68;
}
.oj-v1601-sidebar-about p:last-child{margin-bottom:0}
.oj-v1601-sidebar-about a{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(var(--oj-accent-rgb),.7);
  text-underline-offset:3px;
}
/* The former large About card below the player is retired. */
.oj-v1502-model-about{display:none!important}

/* The middle bar segment is now a genuine editable field. */
.oj-v1601-chat-form{
  min-width:0;
  display:flex;
  align-items:center;
  border-left:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.08);
}
.oj-v1601-chat-form:focus-within{
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(var(--oj-accent-rgb),.42);
}
.oj-v1601-chat-form input{
  width:100%;
  min-width:120px;
  height:100%;
  padding:0 8px 0 18px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
.oj-v1601-chat-form input::placeholder{color:#d1ced0;opacity:.8}
.oj-v1601-chat-send{
  width:52px;
  height:100%;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-left:1px solid rgba(255,255,255,.08);
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.oj-v1601-chat-send:hover{background:rgba(255,255,255,.08)}
.oj-v1601-chat-send svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Preserve the same iframe/video node while it becomes a floating mini-player. */
.oj-player-sticky-placeholder{display:none;min-width:0}
.oj-player-sticky-placeholder.is-active{
  display:block;
  grid-column:1;
  min-height:var(--oj-sticky-placeholder-height,1px);
}
.oj-player-column.is-oj-floating{
  position:fixed!important;
  z-index:99990;
  right:18px;
  bottom:18px;
  width:min(460px,calc(100vw - 36px));
  min-width:0;
  animation:oj-v1601-player-in .2s ease both;
}
.oj-player-column.is-oj-floating .oj-player{
  border-radius:14px;
  box-shadow:0 24px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.08);
}
.oj-player-column.is-oj-floating .oj-v1502-room-bar{display:none!important}
@keyframes oj-v1601-player-in{
  from{opacity:0;transform:translateY(14px) scale(.975)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .oj-v1601-sidebar-about{grid-column:1/-1}
}
@media(max-width:620px){
  .oj-v1601-chat-form{min-width:240px;flex:1 0 240px}
  .oj-v1601-chat-form input{min-height:56px;font-size:12px}
  .oj-player-column.is-oj-floating{
    right:8px;
    bottom:76px;
    width:calc(100vw - 16px);
  }
  .oj-player-column.is-oj-floating .oj-player{border-radius:10px}
}
