
/* YNY CHAT: multimodal content INSIDE a conversation message. */
.yny-message-media {
  margin: 14px 0 4px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
  width: 100%;
}
.message.orb:has(.yny-message-media) {
  max-width: min(100%,850px);
  overflow: visible;
}
.yny-message-media .yny-asset {
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb,var(--text,#e8e8f7) 14%,transparent);
  background: color-mix(in srgb,var(--panel,#151521) 90%,#a18bfa 10%);
  box-shadow: 0 5px 21px rgba(0,0,0,.11);
}
.yny-asset-top {
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:10px 14px;
  font: 700 10px/1.4 system-ui,sans-serif;letter-spacing:.11em;
  color:var(--text,#bcbacb);opacity:.75;
}
.yny-asset-label { text-transform:uppercase; }
.yny-asset-title {
  font-size: clamp(18px,2.5vw,27px);
  line-height:1.16;
  font-weight:790;
  letter-spacing:-.03em;
  word-break:break-word;
  margin:0;
}
.yny-asset-subtitle {font-size:14px;line-height:1.45;margin:0;opacity:.83}
.yny-asset-media {
  display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;
  background:#14121e;border:0;
}
.yny-media-visual{
  position:relative;min-height:290px;isolation:isolate;
  overflow:hidden;border-radius:0;padding:32px 27px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  background:radial-gradient(circle at 83% 19%,#9679ef5a,transparent 45%),
             linear-gradient(138deg,#151424,#322349);
  color:#fff;
}
.yny-media-visual::before{
  content:"";position:absolute;z-index:-1;top:-60%;right:-55%;
  width:110%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);transform:rotate(-25deg);
}
.yny-media-visual .yny-mark{font-size:42px;line-height:1;display:inline-block;width:max-content}
.yny-media-visual ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.yny-media-visual li{
  padding:8px 0 8px 13px;border-left:2px solid #c6b6ff;
  font-size:13px;line-height:1.4;color:inherit
}
.yny-media-visual[data-palette="mono"]{background:linear-gradient(150deg,#121212,#414141)}
.yny-media-visual[data-palette="neon"]{background:radial-gradient(circle at 85% 20%,#d02ec16a,transparent 50%),linear-gradient(150deg,#03050e,#231135)}
.yny-media-visual[data-palette="ocean"]{background:radial-gradient(circle at 80% 20%,#32ddce55,transparent 50%),linear-gradient(150deg,#071723,#164d67)}
.yny-media-visual[data-palette="warm"]{background:radial-gradient(circle at 80% 20%,#ffb6526b,transparent 50%),linear-gradient(145deg,#23150f,#79422d)}
.yny-media-visual[data-palette="light"]{background:linear-gradient(145deg,#f5f2ff,#cbc0f0);color:#221a37}
.yny-media-visual[data-palette="violet"]{background:radial-gradient(circle at 85% 18%,#9f87f277,transparent 55%),linear-gradient(145deg,#181326,#46376e)}
.yny-media-visual[data-kind="motion"][data-preset="bounce"] .yny-mark{animation:ynyMsgBounce 2.8s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="orbit"] .yny-mark{animation:ynyMsgOrbit 5s linear infinite}
.yny-media-visual[data-kind="motion"][data-preset="spark"] .yny-mark{animation:ynyMsgSpark 2s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="parade"] .yny-mark{animation:ynyMsgParade 3.9s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="pulse"] .yny-mark{animation:ynyMsgPulse 2.1s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="reveal"] .yny-mark{animation:ynyMsgReveal 4.3s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="turntable"] .yny-mark{
 transform-style:preserve-3d;animation:ynyMsgTurntable 5s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="unfold"] .yny-mark{
 transform-origin:bottom left;animation:ynyMsgUnfold 5.4s cubic-bezier(.3,.2,.2,1) infinite}
.yny-media-visual[data-kind="motion"][data-preset="flow"] li{
 animation:ynyMsgFlow 5.5s ease-in-out infinite}
.yny-media-visual[data-kind="motion"][data-preset="flow"] li:nth-child(2){animation-delay:.55s}
.yny-media-visual[data-kind="motion"][data-preset="flow"] li:nth-child(3){animation-delay:1.1s}
.yny-media-visual[data-kind="motion"][data-preset="flow"] li:nth-child(4){animation-delay:1.65s}
.yny-media-visual[data-kind="motion"][data-preset="morph"] .yny-mark{
 animation:ynyMsgMorph 6s ease-in-out infinite}
.yny-asset[data-paused="true"] *, .yny-asset[data-paused="true"] .yny-mark {animation-play-state:paused!important}
.yny-asset[data-kind="motion"] .yny-media-visual{cursor:pointer}
.yny-asset-status{padding:28px 22px;font-size:13px;line-height:1.6;text-align:center;opacity:.85}
.yny-asset-footer {padding:10px 14px;font-size:11px;opacity:.67;line-height:1.45}
.yny-asset-actions {display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:0 14px 12px}
.yny-asset-actions button {
  border:1px solid color-mix(in srgb,var(--text,#a9a9b9) 26%,transparent);
  border-radius:9px;background:transparent;color:inherit;
  padding:7px 11px;font-size:12px;cursor:pointer;
}
.yny-media-dialog {border:0;outline:0;background:#0c0b13;
  color:white;padding:18px;border-radius:18px;max-width:97vw;max-height:97vh}
.yny-media-dialog::backdrop{background:#000d}
.yny-media-dialog img{max-height:83vh;max-width:90vw;object-fit:contain}
.yny-media-dialog button {display:block;margin-left:auto;background:none;color:white;
  font-size:22px;border:0;cursor:pointer}
@keyframes ynyMsgBounce{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-23px) rotate(9deg)}}
@keyframes ynyMsgOrbit{to{transform:rotate(360deg) translateX(28px) rotate(-360deg)}}
@keyframes ynyMsgSpark{0%,100%{transform:scale(.93) rotate(-11deg)}50%{transform:scale(1.24) rotate(13deg)}}
@keyframes ynyMsgParade{0%,100%{transform:translateX(-34px) rotate(-9deg)}50%{transform:translateX(39px) rotate(9deg)}}
@keyframes ynyMsgPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.17)}}
@keyframes ynyMsgReveal{0%,100%{transform:translateY(13px);opacity:.6}25%,70%{transform:translateY(0);opacity:1}}
@keyframes ynyMsgTurntable{
  0%,100%{transform:perspective(260px) rotateY(-35deg) scale(.95)}
  25%{transform:perspective(260px) rotateY(12deg) scale(1.10)}
  50%{transform:perspective(260px) rotateY(65deg) scale(.90)}
  75%{transform:perspective(260px) rotateY(145deg) scale(1.08)}
}
@keyframes ynyMsgUnfold{
  0%,100%{transform:perspective(400px) rotateY(75deg) translateX(-20px);opacity:.55}
  25%,75%{transform:perspective(400px) rotateY(0deg) translateX(0);opacity:1}
}
@keyframes ynyMsgFlow{
  0%,10%,95%,100%{opacity:.45;transform:translateX(-10px)}
  25%,75%{opacity:1;transform:translateX(0)}
}
@keyframes ynyMsgMorph{
  0%,100%{transform:scale(.80) rotate(-18deg);filter:hue-rotate(0deg)}
  50%{transform:scale(1.3) rotate(22deg);filter:hue-rotate(70deg)}
}
@media (prefers-reduced-motion:reduce){.yny-media-visual *{animation:none!important}}
@media (max-width:600px){
  .yny-message-media{margin:11px 0 4px;gap:10px}
  .yny-media-visual{min-height:240px;padding:25px 20px}
  .yny-asset-title{font-size:21px}
  .yny-asset-top{padding:9px 12px}
}

/* Native audio player for the spoken Orb answer retained in the message. */
.yny-asset-audio {
  display:block;width:calc(100% - 28px);margin:16px 14px 12px;
  height:46px;max-width:100%;border-radius:12px;
}
