/* These controls belong to the editor only; the rendered/exported chat stays clean. */
[data-post-editor="ios-messages"]{--ios-sent:#007aff;--ios-sent-wash:#eef5ff;--ios-sent-line:#c6dcfb}
[data-post-editor="ios-messages"][data-service="sms"]{--ios-sent:#24883c;--ios-sent-wash:#eef9ef;--ios-sent-line:#bfe2c6}
.ios-service-switch{flex-shrink:0;min-width:0;margin:0;padding:17px 18px 19px;border:0;border-bottom:1px solid #e4e8e0;background:#fcfdfa}
.ios-service-switch legend{float:left;width:100%;padding:0;margin-bottom:10px;font-size:11px;font-weight:600;color:#5a655d}
.ios-service-switch>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;clear:both}
.ios-service-switch label{position:relative;cursor:pointer;min-width:0}.ios-service-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ios-service-option{--choice:#007aff;--choice-wash:#eef5ff;display:grid;grid-template-columns:20px 1fr;gap:4px 8px;padding:12px 9px;border:1px solid #dfe4dc;border-radius:10px;background:white;color:#364238;transition:background .15s,border-color .15s}
.ios-service-green{--choice:#24883c;--choice-wash:#edf8ef}.ios-service-option strong{font-size:12px;font-weight:600;line-height:1.4}.ios-service-option small{grid-column:2;font-size:10px;line-height:1.3;color:#6c776e}
.ios-service-option i{grid-row:1/3;width:19px;height:15px;margin-top:3px;background:var(--choice);border-radius:7px;position:relative}.ios-service-option i:after{content:'';position:absolute;bottom:-2px;left:2px;border-top:5px solid var(--choice);border-right:5px solid transparent}
.ios-service-switch input:checked+span{border-color:var(--choice);background:var(--choice-wash);box-shadow:0 0 0 1px var(--choice);color:var(--choice)}.ios-service-switch input:focus-visible+span{outline:2px solid #254dd6;outline-offset:3px}
[data-post-editor="ios-messages"] .app-message-list{gap:12px}
.ios-message-card{border:1px solid #d9dfe5;border-radius:12px;background:white;overflow:clip;min-width:0;box-shadow:0 2px 3px #23304704}
.ios-message-card[open]{border-color:#9caebf;box-shadow:0 0 0 1px #9caebf22,0 4px 12px #23304708}
.ios-message-card[data-sender="you"]{border-color:var(--ios-sent-line)}.ios-message-card[data-sender="you"][open]{border-color:var(--ios-sent)}
.app-control-section .ios-message-summary{display:grid;grid-template-columns:28px minmax(0,1fr) 14px;gap:9px;padding:13px 11px;background:#f3f5f7;align-items:center;list-style:none;cursor:pointer}
[data-post-editor="ios-messages"] .app-control-section .ios-message-summary:after{content:'';width:6px;height:6px;border-right:1.5px solid #75818b;border-bottom:1.5px solid #75818b;transform:rotate(45deg);justify-self:center;margin-top:-4px}
[data-post-editor="ios-messages"] .app-control-section .ios-message-card[open]>.ios-message-summary:after{transform:rotate(225deg);margin-top:3px}.ios-message-summary::-webkit-details-marker{display:none}
.ios-message-card[data-sender="you"]>.ios-message-summary{background:var(--ios-sent-wash)}
.ios-message-number{display:grid;place-items:center;width:28px;height:28px;background:#e3e8ee;color:#586574;border-radius:8px;font:11px ui-monospace,monospace}
.ios-message-card[data-sender="you"] .ios-message-number{background:var(--ios-sent);color:white}
.ios-message-summary-copy{display:grid;gap:5px;min-width:0}.ios-message-summary-copy strong{font-size:12px;font-weight:600;color:#324052;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ios-message-summary-copy>span{font-size:11px;line-height:1.5;font-weight:400;color:#6b7784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ios-message-body{display:grid;gap:14px;padding:14px 12px 16px;border-top:1px solid #e4e9ee;min-width:0}
.ios-message-body .app-message-actions{justify-content:space-between;align-items:center;gap:5px}.ios-message-body .app-message-actions>span{font-size:10px;color:#7b8791;margin-right:auto}.ios-message-body .app-message-actions button{padding:5px;display:flex;align-items:center;justify-content:center;min-width:27px;height:27px}.ios-message-body .app-message-actions [data-message-action="remove"]{color:#a65050;margin-left:3px}
.ios-sender-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce3e9;border-radius:8px;background:#f4f6f8;padding:3px;gap:3px}.ios-sender-switch label{position:relative;cursor:pointer}.ios-sender-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.ios-sender-switch span{display:block;text-align:center;padding:7px 4px;border-radius:5px;font-size:11px;color:#65717b}.ios-sender-switch input:checked+span{background:white;color:#263b53;box-shadow:0 1px 4px #172b4215}.ios-sender-switch input:focus-visible+span{outline:2px solid #007aff}
.ios-reaction-picker{border:0;min-width:0;padding:0;margin:0}.ios-reaction-picker legend{font-size:11px;font-weight:500;color:#465146;margin-bottom:8px}.ios-reaction-picker>div{display:flex;gap:3px;flex-wrap:wrap}.ios-reaction-picker label{position:relative;cursor:pointer}.ios-reaction-picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.ios-reaction-picker label>span{display:grid;place-items:center;width:29px;height:34px;border:1px solid #e1e6eb;border-radius:7px;background:white;color:#87939e;font-size:19px}.ios-reaction-picker input:checked+span{border-color:#007aff;background:#eef5ff;box-shadow:0 0 0 1px #007aff}.ios-reaction-picker input:focus-visible+span{outline:2px solid #007aff;outline-offset:3px}
.ios-photo-position{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:9px;background:#edf0f2;cursor:grab;touch-action:none;outline-offset:3px}.ios-photo-position:active{cursor:grabbing}.ios-photo-position:focus-visible{outline:2px solid #007aff}.ios-photo-position img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.ios-photo-position span{pointer-events:none;position:absolute;bottom:7px;left:7px;border-radius:5px;background:#172230b8;color:white;padding:4px 6px;font-size:9px;line-height:1.4}
.ios-photo-actions{display:flex;justify-content:space-between;align-items:center;gap:9px}.ios-photo-upload{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#0965c4;cursor:pointer;padding:7px 9px;border:1px solid #cddcec;border-radius:7px;background:#f6faff}.ios-photo-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.ios-photo-upload:focus-within{outline:2px solid #007aff;outline-offset:2px}.ios-photo-actions button{font-size:10px!important}
[data-post-editor="ios-messages"] .app-preview-stage{position:relative;padding-left:50px;padding-right:50px}
[data-post-editor="ios-messages"] [data-ios-message]{cursor:text;outline:none}[data-post-editor="ios-messages"] [data-ios-message][data-message-type="photo"]{cursor:grab;touch-action:none}
[data-post-editor="ios-messages"] [data-ios-message]:focus-visible>rect:first-child{stroke:#7ab7ff;stroke-width:2}
.ios-canvas-layer{position:absolute;pointer-events:none;z-index:2}.ios-canvas-layer button,.ios-canvas-layer input,.ios-canvas-layer textarea{pointer-events:auto;font:inherit}
.ios-canvas-insert{position:absolute;left:-25px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #c8d3de;border-radius:50%;background:#fff;color:#6a7c8e;box-shadow:0 1px 4px #142b4710;cursor:pointer;transform:translate(-50%,-50%)}.ios-canvas-insert[data-side="you"]{left:auto;right:-25px;transform:translate(50%,-50%);color:var(--ios-sent);border-color:var(--ios-sent-line)}.ios-canvas-insert:hover,.ios-canvas-insert:focus-visible{color:#007aff;border-color:#007aff;outline:2px solid #007aff22;outline-offset:2px}.ios-canvas-insert svg{pointer-events:none}
.ios-canvas-selection{position:absolute;border:2px solid #3e91ed;border-radius:19px;box-shadow:0 0 0 3px #3e91ed1a;pointer-events:none}
.ios-canvas-bar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-height:58px;padding:10px 18px;background:#fafcfe;border:1px solid #e1e5dd;border-bottom:0}
.app-page .ios-canvas-hint{font-size:11px;line-height:1.6;color:#6a7c8e;margin:0}.ios-canvas-label{font-size:11px;color:#6a7c8e;white-space:nowrap}
.ios-canvas-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ios-canvas-bar button{padding:6px 8px;border:1px solid #dbe3eb;border-radius:6px;background:white;color:#3a5167;font-size:11px!important;white-space:nowrap;cursor:pointer;min-height:30px;display:flex;align-items:center;justify-content:center}.ios-canvas-bar button:hover{background:#e2edfa;color:#075eba}.ios-canvas-bar [data-canvas-close]{background:#007aff;border-color:#007aff;color:white}.ios-canvas-tools [data-canvas-remove]{color:#a65050}.ios-canvas-tools .ios-canvas-zoom{display:flex;gap:8px;align-items:center;padding:4px 6px;font-size:10px;color:#6a7c8e}.ios-canvas-tools input[type=range]{width:80px;accent-color:#007aff;min-width:60px}
.ios-canvas-text{position:absolute;resize:none;outline:2px solid #78b3f4;outline-offset:2px;border:0;border-radius:19px;box-sizing:border-box;overflow:hidden;box-shadow:0 0 0 5px #007aff16;z-index:3;caret-color:currentColor}
@media(max-width:520px){.ios-service-switch{padding:16px 18px}.ios-canvas-bar{padding:10px 12px;gap:7px}.ios-canvas-bar button{padding:5px 7px;font-size:10px!important}[data-post-editor="ios-messages"] .app-preview-stage{padding-left:38px;padding-right:38px}.ios-canvas-insert{left:-20px;width:28px;height:28px}.ios-canvas-insert[data-side="you"]{right:-20px}}
.ios-start-actions{display:flex;gap:13px;align-items:center}.ios-start-actions [data-clear-chat]{color:#657780}
.ios-canvas-bar{position:sticky;top:64px;z-index:5}

.ios-canvas-reactions{display:flex;align-items:center;gap:8px;margin-left:5px;padding-left:9px;border-left:1px solid #dfe6ed}.ios-canvas-reactions>span{font-size:10px;color:#6a7c8e}.ios-canvas-reactions label>span{width:27px;height:30px}.ios-canvas-reactions>div{gap:3px}

[data-post-editor="ios-messages"] .ios-canvas-editing>text{visibility:hidden}.ios-canvas-text{background:transparent!important}
.ios-canvas-reactions button{display:grid;place-items:center;width:27px;height:30px;padding:0;border-radius:7px;font-size:19px!important;color:#87939e}.ios-canvas-reactions button[aria-pressed="true"]{border-color:#007aff;background:#eef5ff;box-shadow:0 0 0 1px #007aff}.ios-canvas-reactions button:focus-visible{outline:2px solid #007aff;outline-offset:3px}
[data-post-editor="ios-messages"] [data-ios-contact]{cursor:pointer;outline:none}[data-post-editor="ios-messages"] [data-ios-contact]:focus-visible>circle{stroke:#007aff;stroke-width:2}

/* Canvas colors are shared by the still and animation controls. */
.ios-chat-background .app-segment{width:100%}.ios-chat-background .app-segment label{flex:1}.ios-chat-background .app-segment label>span{text-align:center}
.ios-background-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:14px 0 16px;padding:2px}
.ios-background-presets button{display:block;width:100%;height:34px;min-width:0;padding:3px;border:1px solid #e1e5dd;border-radius:9px;background:#fff;box-shadow:none;cursor:pointer}
.ios-background-presets button span{display:block;height:100%;border-radius:5px;background:var(--background-swatch)}
.ios-background-presets button[aria-pressed=true]{border-color:#2954ef;box-shadow:0 0 0 2px #2954ef18}.ios-background-presets button:focus-visible{outline:2px solid #2954ef;outline-offset:2px}
.ios-background-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ios-background-color{display:grid;gap:7px;min-width:0;font-size:11px;color:#60705b}
.ios-background-color-input{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid #dce1d8;border-radius:8px;background:#fff;padding:9px 7px;font-size:10px;font-variant-numeric:tabular-nums}
.ios-background-color-input input[type=color]{display:block;width:24px;height:24px;min-width:24px;padding:0;border:0;border-radius:5px;background:transparent;appearance:none;cursor:pointer}
.ios-background-color-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.ios-background-color-input input[type=color]::-webkit-color-swatch{border:1px solid #0001;border-radius:5px}.ios-background-color-input input[type=color]::-moz-color-swatch{border:1px solid #0001;border-radius:5px}
.ios-background-color-input:focus-within{outline:2px solid #2954ef;outline-offset:2px}
.ios-animation-background{margin-top:22px;padding-top:18px;border-top:1px solid #e9ede6}
.app-page .ios-animation-background h4{margin:0 0 12px;font-size:12px;font-weight:600;line-height:1.5;color:#344130}
.ios-background-color[hidden],.ios-animation-guide-controls[hidden],.ios-shorts-guide[hidden]{display:none}
.ios-animation-guide-controls{padding:12px 18px;border:1px solid #e1e5dd;border-top:0;background:#fff}
.ios-animation-guide-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dfe5db;border-radius:7px;padding:7px 10px;background:#fff;color:#60705b;font-family:inherit;font-weight:500;font-size:11px;line-height:1.5;cursor:pointer}
.ios-animation-guide-controls button svg{flex-shrink:0}.ios-animation-guide-controls button:hover{background:#f6f8f3;border-color:#c6d0bd}.ios-animation-guide-controls button[aria-pressed=true]{color:#285be7;border-color:#bdcdf5;background:#eff4ff}.ios-animation-guide-controls button:focus-visible{outline:2px solid #285be7;outline-offset:2px}
.app-page .ios-animation-guide-controls p{font-size:11px;line-height:1.6;color:#72806a;margin:9px 0 0;max-width:65ch}
.ios-shorts-guide{position:absolute;z-index:2;overflow:hidden;pointer-events:none}
.ios-shorts-crop{position:absolute;border:1.5px dashed #fff;box-shadow:0 0 0 200vmax #18212670,inset 0 0 0 1px #17201b3d}
.ios-shorts-crop span{position:absolute;top:8px;left:8px;border-radius:4px;padding:4px 6px;color:#fff;background:#23312ae6;font:500 10px/1.3 Arial,sans-serif;letter-spacing:.02em;white-space:nowrap}
.ios-shorts-crop[data-top-crop=true] span{top:auto;bottom:calc(100% + 7px)}
@media(max-width:600px){.ios-animation-guide-controls{padding:10px 12px}.ios-animation-guide-controls button{font-size:10px;padding:7px 8px}}