.flush { margin-top: 0; }
.card .row { margin-bottom: 8px; }
#script { min-height: 160px; }
.scenes { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.scene { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.scene > .row { margin-bottom: 8px; align-items: center; }
.scene .acts { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.scene .acts button { min-height: 44px; min-width: 44px; padding: 8px 10px; font-size: 16px; }
.scene textarea { min-height: 84px; margin-bottom: 8px; }
.scene .meta-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scene .meta-row label { font-size: 13px; color: var(--muted); }
.scene .meta-row input[type="number"] { width: 92px; }
.scene .meta-row select { width: auto; }
.canvas-wrap { max-width: 640px; margin: 0 auto 8px; }
#canvas { display: block; width: 100%; height: auto; background: #000; border-radius: 8px; border: 1px solid var(--line); }
#time-label { white-space: nowrap; }

/* Phone controls and long translated labels. */
.scene, .row > *, .meta-row { min-width: 0; }
.scene .meta-row select { max-width: 100%; }
button, .btn { white-space: normal; overflow-wrap: anywhere; }
input, textarea, select { font-size: 16px; }
.wrap .language-control select { font-size: 16px; min-height: 44px; min-width: 44px; }
#voice { width: 24px; height: 24px; flex: 0 0 24px; }
label[for="voice"] { min-height:44px; display:flex; align-items:center; flex:1; }
@media(max-width:400px){.wrap{padding-inline:12px}.card{padding:12px}.scene .acts{margin-inline-start:0}.scene .meta-row{align-items:stretch}.scene .meta-row select{width:100%}}