.sim-messages{padding:8px 14px;background:#eef5fc;border-top:1px solid #c9dced;font-size:12px}.sim-messages summary{cursor:pointer;font-weight:700;color:#14539b}.sim-messages label{display:block;margin:9px 0}.sim-messages input{max-width:180px;padding:7px;border-radius:8px;border:1px solid #aac1d9}.sim-messages button{border:0;border-radius:9px;padding:8px 10px;margin:4px;background:#0b5fff;color:#fff;cursor:pointer}.sim-message{padding:10px;margin:8px 0;border-radius:10px;background:#e0f4e5;overflow-wrap:anywhere}.sim-message p{line-height:1.5;margin:4px 0}.phone{position:relative}.sim-messages{position:absolute;z-index:12;bottom:68px;left:12px;right:12px;max-height:46dvh;overflow-y:auto;border:1px solid #bdd4e9;border-radius:14px;box-shadow:0 8px 25px #00274a22}.sim-messages details[open]{min-height:90px}.sim-messages .sim-message{background:#e2f4e8;border-radius:12px 12px 4px 12px}.sim-messages .sim-message div{display:flex;gap:5px;flex-wrap:wrap}.sim-messages .sim-message button{flex:1;min-width:120px}@media(max-width:767px){.sim-messages{bottom:65px;left:7px;right:7px;max-height:52dvh}}

/* Flow in the phone column on all widths: never float above the conversation. */
.phone #simulated-messages{position:relative!important;z-index:1!important;bottom:auto!important;left:auto!important;right:auto!important;flex:0 0 auto;width:100%;max-height:min(36dvh,250px);overflow-y:auto;box-shadow:none;border-radius:0;margin:0;min-height:0}
.phone #simulated-messages details[open]{min-height:0}
.phone #simulated-messages .sim-message{scroll-margin-top:10px}
@media(min-width:768px){.phone #simulated-messages{max-height:min(35dvh,220px)}}

.f-choice-list{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;padding:4px;width:100%}
.f-choice-list button{display:block;text-align:left;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#chips:has(.f-choice-list){width:min(100%,420px);max-height:235px;overflow:hidden}
#chips button{max-width:100%;overflow-wrap:anywhere}

/* CDE final: simulation panel is an independent flex row ABOVE the composer. */
.phone #simulated-messages{order:0;flex:0 1 auto;min-height:0;max-height:min(38dvh,230px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.phone .wa-composer{order:1;position:relative;z-index:2;flex:0 0 auto;margin:0;bottom:auto;transform:none}
.phone .wa-thread{min-height:0;flex:1 1 0}
@media(max-height:600px) and (min-width:768px){
 .phone #simulated-messages{max-height:min(42dvh,210px)}
}