/* Diálogo de crear historia en ESCRITORIO: estilo Facebook sobre el diálogo que ya existe. Solo >=769px. */
.mbs-head,.mbs-panel,.mbs-cards{display:none}
@media (min-width:769px){
.mbs[data-mbs="select"],.mbs[data-mbs="preview"]{padding:0!important;background:var(--background)!important;display:block!important}
.mbs[data-mbs="select"]>div,.mbs[data-mbs="preview"]>div{max-width:none!important;width:100%!important;height:100vh!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--background)!important;color:var(--foreground);overflow:hidden!important;display:grid!important;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto auto 1fr}
.mbs[data-mbs="select"]>div::before,.mbs[data-mbs="preview"]>div::before{content:"";grid-column:1;grid-row:1/-1;background:var(--card);border-right:1px solid var(--border)}
/* barra vieja: solo queda el botón X arriba a la izquierda */
.mbs[data-mbs="select"]>div>div:first-child,.mbs[data-mbs="preview"]>div>div:first-child{position:absolute!important;top:10px!important;left:12px!important;right:auto!important;width:auto!important;padding:0!important;background:none!important;z-index:6}
.mbs[data-mbs="select"]>div>div:first-child>p,.mbs[data-mbs="preview"]>div>div:first-child>p{display:none}
.mbs[data-mbs="select"]>div>div:first-child>button,.mbs[data-mbs="preview"]>div>div:first-child>button{width:40px!important;height:40px!important;background:rgba(127,127,127,.25)!important;color:var(--foreground)!important}
/* cabecera izquierda */
.mbs[data-mbs="select"]>div>.mbs-head,.mbs[data-mbs="preview"]>div>.mbs-head{display:block;grid-column:1;grid-row:1;padding:58px 16px 0;position:relative;z-index:1}
.mbs-logo{position:absolute;top:10px;left:62px;height:36px;width:36px}
.mbs-head h2{font-size:24px;font-weight:700;margin:12px 0}
.mbs-user{display:flex;align-items:center;gap:12px;margin:0 -16px;padding:12px 16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mbs-user b{font-size:16px}
.mbs-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:rgba(127,127,127,.3);display:grid;place-items:center;font-weight:700}
.mbs-av img{width:100%;height:100%;object-fit:cover}
/* paso 1: elegir (3 tarjetas) */
.mbs[data-mbs="select"]>div>div.p-6{display:none!important}
.mbs[data-mbs="select"]>div>.mbs-cards{display:flex;grid-column:2;grid-row:1/-1;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:24px;position:relative;z-index:1}
.mbs-card{width:220px;height:330px;border:0;border-radius:8px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;cursor:pointer;font-size:14px;font-weight:600;line-height:1.3}
.mbs-card:hover{filter:brightness(1.07)}
.mbs-card .ic{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.7);display:grid;place-items:center}
.mbs-c1{background:linear-gradient(135deg,#5b3fe8,#8fd8ff)}
.mbs-c2{background:linear-gradient(180deg,#a444d6,#e5577f)}
.mbs-c3{background:linear-gradient(180deg,#f5a623,#e5307a)}
/* paso 2: vista previa a la derecha, datos y botones a la izquierda */
.mbs[data-mbs="preview"]>div>.mbs-panel{display:block;grid-column:2;grid-row:1/-1;margin:24px;padding:16px;background:var(--card);border-radius:8px;position:relative;z-index:0}
.mbs-panel b{font-size:15px}
.mbs-pin{position:absolute;inset:48px 16px 16px;border:1px solid var(--border);border-radius:8px;background:rgba(127,127,127,.08)}
.mbs[data-mbs="preview"]>div>div.flex-col{display:contents!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:first-child{grid-column:2!important;grid-row:1/-1!important;z-index:2;align-self:center;justify-self:center;height:min(calc(100vh - 170px),760px)!important;aspect-ratio:9/16!important;max-width:calc(100% - 80px)!important;margin:0!important;border-radius:8px;overflow:hidden}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child{grid-column:1;grid-row:3;display:flex!important;flex-direction:column;gap:12px;padding:16px!important;background:transparent!important;min-height:0;position:relative;z-index:2}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child>*{margin:0!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child>:last-child{margin-top:auto!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child input[placeholder]{background:transparent!important;color:var(--foreground)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:10px 12px!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child label{display:none!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child button{height:36px;border-radius:6px!important;font-weight:600}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child button:first-child{background:rgba(127,127,127,.25)!important;color:var(--foreground)!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child button:last-child{background:var(--foreground)!important;background-image:none!important;color:var(--background)!important}
.mbs[data-mbs="preview"]>div>div.flex-col>div:last-child button:last-child:disabled{opacity:.5}
}
@media (max-width:768px){.mbs-head,.mbs-panel,.mbs-cards{display:none!important}}