.cs-vd{--vd-bg:#07090d;--vd-panel:#11151d;--vd-text:#f5f7fa;--vd-muted:#9da7b6;--vd-primary:#8c6cff;--vd-border:#29303c;position:relative;min-height:620px;background:var(--vd-bg);color:var(--vd-text);border:1px solid var(--vd-border);border-radius:18px;overflow:hidden}.cs-vd *{box-sizing:border-box}.cs-vd [hidden]{display:none!important}.cs-vd__picker,.cs-vd__ended{padding:28px}.cs-vd__picker header{text-align:center;max-width:720px;margin:20px auto}.cs-vd__picker header p,.cs-vd__hint{color:var(--vd-muted)}.cs-vd__characters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;max-width:1000px;margin:auto}.cs-vd__character-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:15px;border:1px solid var(--vd-border);border-radius:14px;background:var(--vd-panel);color:var(--vd-text);cursor:pointer}.cs-vd__character-card:hover{border-color:var(--vd-primary);transform:translateY(-1px)}.cs-vd__character-card img,.cs-vd__avatar-placeholder{width:100%;aspect-ratio:4/5;border-radius:11px;object-fit:cover;background:#050608;display:flex;align-items:center;justify-content:center;font-size:42px}.cs-vd__character-card small,.cs-vd__character-card p{color:var(--vd-muted)}.cs-vd__character-card p{font-size:12px;margin:5px}.cs-vd__session{display:grid;grid-template-rows:minmax(420px,1fr) auto auto auto;height:min(86vh,900px)}.cs-vd__stage{position:relative;background:#000;min-height:0}.cs-vd__character-video,.cs-vd__character-fallback{width:100%;height:100%;object-fit:cover}.cs-vd__character-fallback{display:flex;align-items:center;justify-content:center;font-size:32px;color:#777}.cs-vd__self-video{position:absolute;right:16px;bottom:16px;width:min(23%,220px);aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:#111;transform:scaleX(-1)}.cs-vd__caption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:70%;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.72);text-align:center}.cs-vd__character-name{position:absolute;left:15px;top:15px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.58);font-weight:700}.cs-vd__interaction-bar{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:9px;border-top:1px solid var(--vd-border);background:var(--vd-panel)}.cs-vd-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 12px;border:1px solid var(--vd-border);border-radius:10px;background:var(--vd-panel);color:var(--vd-text);cursor:pointer;text-decoration:none}.cs-vd-button:hover{border-color:var(--vd-primary)}.cs-vd-button--primary{background:var(--vd-primary);border-color:var(--vd-primary);color:#fff}.cs-vd-button--danger{border-color:#d4484c}.cs-vd__interaction-menu{position:absolute;z-index:10;left:50%;bottom:145px;transform:translateX(-50%);display:grid;gap:7px;width:min(520px,92%);padding:12px;background:rgba(12,15,21,.97);border:1px solid var(--vd-border);border-radius:14px}.cs-vd__interaction-menu>.cs-vd-button{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.cs-vd__interaction-menu small{color:var(--vd-muted)}.cs-vd__conversation{max-height:160px;overflow-y:auto;padding:9px 14px;background:#090b10;border-top:1px solid var(--vd-border)}.cs-vd__line{display:flex;gap:7px;margin:4px 0}.cs-vd__line strong{color:var(--vd-primary)}.cs-vd__line.is-mine strong{color:#69b7ff}.cs-vd__composer{display:grid;grid-template-columns:1fr auto;gap:7px;padding:9px 12px;background:var(--vd-panel);border-top:1px solid var(--vd-border)}.cs-vd__composer input{min-width:0;background:#080a0e;color:var(--vd-text);border:1px solid var(--vd-border);border-radius:10px;padding:9px}.cs-vd__hint{font-size:10px;text-align:center;padding:0 8px 8px;background:var(--vd-panel)}.cs-vd__ended{text-align:center;display:flex;min-height:620px;flex-direction:column;justify-content:center;align-items:center}.cs-vd-locked{padding:22px;border:1px solid var(--cs-border,#29303c);border-radius:12px;text-align:center}@media(max-width:650px){.cs-vd{min-height:calc(100dvh - 20px)}.cs-vd__session{height:calc(100dvh - 20px);grid-template-rows:minmax(300px,1fr) auto auto auto}.cs-vd__self-video{width:34%;right:8px;bottom:8px}.cs-vd__caption{max-width:88%;bottom:8px}.cs-vd__interaction-bar{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}.cs-vd__composer{grid-template-columns:1fr}.cs-vd__composer button{width:100%}}

/* v1.0.2: compact premium character catalogue */
.cs-vd__characters{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:16px;
 width:100%;
 max-width:1120px;
 margin:0 auto;
}
.cs-vd__character-card{
 --vd-card-bg:var(--vd-panel);
 --vd-card-border:var(--vd-border);
 --vd-card-hover-border:var(--vd-primary);
 --vd-card-overlay:rgba(0,0,0,.88);
 position:relative;
 display:flex;
 flex-direction:column;
 width:100%;
 min-width:0;
 padding:0;
 overflow:hidden;
 border:1px solid var(--vd-card-border);
 border-radius:16px;
 background:var(--vd-card-bg);
 color:var(--vd-text);
 text-align:left;
 cursor:pointer;
 transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cs-vd__character-card:hover{
 transform:translateY(-4px);
 border-color:var(--vd-card-hover-border);
 box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.cs-vd__character-media{
 position:relative;
 display:block;
 width:100%;
 aspect-ratio:4 / 5;
 overflow:hidden;
 background:#050608;
}
.cs-vd__character-media>img,
.cs-vd__character-media>.cs-vd__avatar-placeholder{
 position:absolute;
 inset:0;
 display:flex;
 width:100%;
 height:100%;
 border-radius:0;
 object-fit:cover;
 align-items:center;
 justify-content:center;
 font-size:42px;
 transition:transform .28s ease;
}
.cs-vd__character-card:hover .cs-vd__character-media>img{
 transform:scale(1.035);
}
.cs-vd__character-overlay{
 position:absolute;
 z-index:1;
 inset:35% 0 0;
 background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--vd-card-overlay) 55%,transparent) 38%,var(--vd-card-overlay) 100%);
 pointer-events:none;
}
.cs-vd__character-meta{
 position:absolute;
 z-index:2;
 left:0;
 right:0;
 bottom:0;
 display:flex;
 flex-direction:column;
 gap:7px;
 padding:15px;
}
.cs-vd__character-title-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
}
.cs-vd__character-name-title{
 min-width:0;
 overflow:hidden;
 color:#fff;
 font-size:20px;
 font-weight:800;
 line-height:1.05;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.cs-vd__character-age{
 flex:0 0 auto;
 padding:4px 8px;
 border:1px solid rgba(255,255,255,.18);
 border-radius:999px;
 background:rgba(0,0,0,.48);
 color:#fff;
 font-size:11px;
 font-weight:700;
 backdrop-filter:blur(5px);
}
.cs-vd__character-sub-row{
 display:flex;
 align-items:center;
 gap:6px;
 min-height:24px;
}
.cs-vd__character-gender{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:25px;
 height:25px;
 border:1px solid rgba(255,255,255,.18);
 border-radius:50%;
 background:rgba(0,0,0,.45);
 color:#fff;
 font-size:12px;
 line-height:1;
 backdrop-filter:blur(5px);
}
.cs-vd__character-gender svg{
 display:block;
 width:12px;
 height:12px;
 fill:currentColor;
}
.cs-vd__character-gender i{
 font-size:12px;
 line-height:1;
}
.cs-vd__character-gender-label{
 color:rgba(255,255,255,.78);
 font-size:11px;
 font-weight:600;
}
.cs-vd__character-description{
 display:-webkit-box;
 min-height:50px;
 padding:12px 14px 14px;
 overflow:hidden;
 color:var(--vd-muted);
 font-size:12px;
 line-height:1.45;
 text-align:left;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
}

/* v1.0.2: local camera is always a true picture-in-picture overlay */
.cs-vd__stage .cs-vd__self-video{
 position:absolute !important;
 z-index:20 !important;
 right:18px !important;
 bottom:18px !important;
 left:auto !important;
 top:auto !important;
 display:block !important;
 width:210px !important;
 height:auto !important;
 max-width:32% !important;
 min-width:0 !important;
 aspect-ratio:16 / 9 !important;
 object-fit:cover !important;
 border:2px solid rgba(255,255,255,.72) !important;
 border-radius:14px !important;
 background:#090a0d !important;
 box-shadow:0 10px 32px rgba(0,0,0,.5) !important;
 transform:scaleX(-1);
}

/* Elementor can override width with a more specific inline widget selector. */
@media(max-width:900px){
 .cs-vd__characters{grid-template-columns:repeat(2,minmax(0,1fr));}
 .cs-vd__stage .cs-vd__self-video{width:180px !important;max-width:35% !important;}
}
@media(max-width:520px){
 .cs-vd__characters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .cs-vd__character-meta{padding:10px;}
 .cs-vd__character-name-title{font-size:16px;}
 .cs-vd__character-description{display:none;}
 .cs-vd__stage .cs-vd__self-video{width:30% !important;max-width:30% !important;right:8px !important;bottom:8px !important;border-radius:10px !important;}
}


/* v1.0.3: full-bleed character cards and filters */
.cs-vd__filters{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 width:100%;
 max-width:1120px;
 margin:0 auto 16px;
}
.cs-vd__filter{
 padding:7px 14px;
 border:1px solid var(--vd-border);
 border-radius:999px;
 background:var(--vd-panel);
 color:var(--vd-muted);
 font:inherit;
 font-size:12px;
 font-weight:700;
 cursor:pointer;
 transition:.16s ease;
}
.cs-vd__filter:hover,
.cs-vd__filter.is-active{
 border-color:var(--vd-primary);
 background:color-mix(in srgb,var(--vd-primary) 18%,var(--vd-panel));
 color:var(--vd-text);
}

.cs-vd__character-card{
 padding:0 !important;
 background:transparent !important;
 overflow:hidden !important;
 aspect-ratio:4 / 5;
}
.cs-vd__character-media{
 position:absolute !important;
 inset:0 !important;
 width:100% !important;
 height:100% !important;
 aspect-ratio:auto !important;
 overflow:hidden !important;
 border-radius:inherit !important;
}
.cs-vd__character-media>img,
.cs-vd__character-media>.cs-vd__avatar-placeholder{
 inset:0 !important;
 width:100% !important;
 height:100% !important;
 object-fit:cover !important;
 border-radius:inherit !important;
}
.cs-vd__character-overlay{
 inset:22% 0 0 !important;
 background:linear-gradient(
  to bottom,
  transparent 0%,
  color-mix(in srgb,var(--vd-card-overlay) 30%,transparent) 32%,
  color-mix(in srgb,var(--vd-card-overlay) 72%,transparent) 62%,
  var(--vd-card-overlay) 100%
 ) !important;
}
.cs-vd__character-top{
 position:absolute;
 z-index:3;
 top:10px;
 left:10px;
 right:10px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
}
.cs-vd__character-meta{
 position:absolute !important;
 z-index:3;
 left:0 !important;
 right:0 !important;
 bottom:0 !important;
 display:flex !important;
 flex-direction:column !important;
 gap:7px !important;
 padding:14px !important;
 max-width:100% !important;
 overflow:hidden !important;
}
.cs-vd__character-name-title{
 display:block !important;
 max-width:100% !important;
 overflow:hidden !important;
 text-overflow:ellipsis !important;
 white-space:nowrap !important;
}
.cs-vd__character-stats{
 display:flex;
 flex-wrap:wrap;
 gap:6px;
 max-width:100%;
}
.cs-vd__character-stat{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:3px 7px;
 border:1px solid rgba(255,255,255,.14);
 border-radius:999px;
 background:rgba(0,0,0,.42);
 color:rgba(255,255,255,.92);
 font-size:10px;
 font-weight:700;
 line-height:1.2;
 backdrop-filter:blur(5px);
}
.cs-vd__character-description{
 display:-webkit-box !important;
 width:100% !important;
 min-height:0 !important;
 max-height:3em !important;
 padding:0 !important;
 margin:0 !important;
 overflow:hidden !important;
 color:rgba(255,255,255,.72);
 font-size:11px;
 line-height:1.45;
 text-align:left;
 overflow-wrap:anywhere;
 word-break:break-word;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
}
.cs-vd__character-gender{
 flex:0 0 auto;
}
@media(max-width:520px){
 .cs-vd__filters{justify-content:flex-start;overflow-x:auto;padding-bottom:2px;}
 .cs-vd__filter{flex:0 0 auto;}
 .cs-vd__character-meta{padding:9px !important;gap:5px !important;}
 .cs-vd__character-stat{font-size:9px;padding:2px 5px;}
 .cs-vd__character-description{display:none !important;}
}
\n/* v1.0.4: keep all card copy inside the card */\n.cs-vd__character-card{contain:layout paint;}\n.cs-vd__character-meta{box-sizing:border-box !important;width:100% !important;max-height:46% !important;overflow:hidden !important;}\n.cs-vd__character-description{box-sizing:border-box !important;flex:0 1 auto !important;min-width:0 !important;max-width:100% !important;max-height:2.9em !important;overflow:hidden !important;text-overflow:ellipsis !important;}\n

/* v1.0.5: reserve a real bottom safe-zone for character card copy */
.cs-vd__character-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
}
.cs-vd__character-meta{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:24px !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    padding:14px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}
.cs-vd__character-description{
    display:-webkit-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:2.8em !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    line-height:1.4 !important;
    text-overflow:ellipsis !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
}
.cs-vd__character-overlay{ inset:15% 0 0 !important; }
.cs-vd__character-media{ overflow:hidden !important; border-radius:inherit !important; }
@media(max-width:520px){
    .cs-vd__character-meta{ bottom:14px !important; padding:10px !important; }
}


/* v1.0.6: online presence and camera badge */
.cs-vd__character-top-right{
 display:flex;
 align-items:center;
 gap:6px;
}
.cs-vd__camera-badge{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:28px;
 height:28px;
 border:1px solid rgba(255,255,255,.18);
 border-radius:50%;
 background:rgba(0,0,0,.46);
 color:#fff;
 font-size:12px;
 line-height:1;
 backdrop-filter:blur(5px);
}
.cs-vd__camera-badge svg{
 width:1em;
 height:1em;
 fill:currentColor;
}
.cs-vd__camera-badge i{
 font-size:1em;
 line-height:1;
}
.cs-vd__presence{
 display:inline-flex;
 align-items:center;
 gap:6px;
 width:max-content;
 max-width:100%;
 color:rgba(255,255,255,.88);
 font-size:10px;
 font-weight:700;
 line-height:1.15;
}
.cs-vd__presence-dot{
 display:inline-block;
 flex:0 0 auto;
 width:7px;
 height:7px;
 border-radius:50%;
 background:#35d06f;
 box-shadow:0 0 0 2px rgba(53,208,111,.12),0 0 8px rgba(53,208,111,.35);
}


/* v1.0.18: terminal call-ended state */
.cs-vd__call-ended{
 position:absolute;
 inset:0;
 z-index:20;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#000;
 color:#fff;
 text-align:center;
 border-radius:inherit;
}
.cs-vd__call-ended[hidden]{
 display:none !important;
}
.cs-vd__call-ended-inner{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:12px;
 padding:24px;
}
.cs-vd__call-ended-inner strong{
 font-size:clamp(18px,2.4vw,30px);
 line-height:1.2;
 font-weight:700;
 letter-spacing:.01em;
}
.cs-vd__call-ended-dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:#d33;
 box-shadow:0 0 0 5px rgba(220,50,50,.12);
}
.cs-vd button:disabled,
.cs-vd input:disabled{
 opacity:.45;
 cursor:not-allowed;
}


/* v1.0.22: character availability */
.cs-vd__character-card.is-offline{
 cursor:not-allowed !important;
 filter:saturate(.5);
}
.cs-vd__character-card.is-offline:hover{
 transform:none !important;
 border-color:var(--vd-card-border) !important;
 box-shadow:none !important;
}
.cs-vd__character-card.is-offline .cs-vd__character-media>img{
 transform:none !important;
 opacity:.72;
}
.cs-vd__character-card.is-offline .cs-vd__character-overlay{
 background:linear-gradient(to bottom,rgba(0,0,0,.16) 0%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.94) 100%) !important;
}
.cs-vd__presence.is-offline{
 color:rgba(255,255,255,.72);
}
.cs-vd__presence.is-offline .cs-vd__presence-dot{
 background:#8b9098 !important;
 box-shadow:none !important;
}