:root{font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;color:#18232d;background:#f3f6f9}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:10px 15px;font-weight:700}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#06a848;color:#fff}.secondary{background:#e7f3ed;color:#086c38}.danger{background:#db2641;color:white}.ghost{background:#eef2f6;color:#243748}.top{background:#fff;border-bottom:1px solid #dfe6eb;padding:12px max(18px,calc((100vw - 1240px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}.top strong{font-size:20px;color:#087c3b}.top small{display:block;color:#687581}.top-actions{display:flex;gap:8px}main{max-width:1240px;margin:auto;padding:20px}.login{max-width:430px;margin:8vh auto}.card{background:white;border:1px solid #dce4ea;border-radius:16px;padding:20px;box-shadow:0 7px 22px #1e354012}.card h2{margin-top:0}.tabs{display:flex;gap:7px;overflow:auto;margin-bottom:18px}.tabs button{white-space:nowrap;background:#fff;color:#435361;border:1px solid #dce4ea}.tabs button.active{background:#087c3b;color:#fff}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.panel-title h1,.panel h1{margin:0}.panel-title p{margin:3px 0;color:#677684}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:14px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.row>label{flex:1;min-width:160px}.row.actions{margin-top:16px}.fields label,.settings label,.login label,.card>label{display:block;margin:0 0 14px;font-weight:650}.fields input,.fields select,.fields textarea,.settings input,.settings select,.login input,.card>label>input{display:block;margin-top:5px;width:100%;border:1px solid #cdd7df;border-radius:9px;padding:10px;background:#fff;color:#17212a}.fields textarea{font-family:ui-monospace,SFMono-Regular,monospace;min-height:250px;font-size:12px}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto!important;margin:0!important}.editor-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(315px,.8fr);gap:14px}.settings{margin-top:14px}.preview-wrap{align-self:start;position:sticky;top:12px}.preview-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:13px}.preview-head small{color:#72808c}.chat-preview{min-height:440px;overflow:auto;padding:28px 14px;background:#a9bbcc;border-radius:13px;display:flex;align-items:flex-start;gap:10px}.line-bubble{flex:0 0 280px;max-width:280px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px #0002}.line-section{padding:15px}.line-section+ .line-section{border-top:1px solid #e6e9ec}.flex-box{display:flex;gap:8px}.flex-box.horizontal{flex-direction:row}.flex-box.vertical{flex-direction:column}.flex-box.baseline{align-items:baseline}.flex-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}.flex-image{width:100%;object-fit:cover;border-radius:7px}.flex-button{border-radius:8px;padding:9px;text-align:center;background:#e9edf1;color:#202f39;font-weight:700;overflow-wrap:anywhere}.flex-button.primary{background:#08aa4d;color:#fff}.flex-separator{width:100%;height:1px;background:#e1e5e8}.flex-hero{width:100%;display:block}.pill{border-radius:50px;background:#e5f5eb;color:#087c3b;padding:6px 12px;font-size:13px;font-weight:700}.muted{font-size:13px;color:#697784}.error{color:#bf1f35}.chip-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.chip{border:1px solid #cdd7df;background:#fff;border-radius:20px;padding:5px 10px;font-size:13px}.chip.selected{background:#d9f5e5;border-color:#2ca45e;color:#087c3b}.campaign{display:grid;gap:7px}.campaign h2{font-size:18px;margin:0}.campaign p{margin:0;color:#62717d}.campaign .row{align-items:center}.recipient{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf0f2;padding:10px 0}.recipient small{display:block;color:#77848c}.recipient input{width:135px;padding:6px;border:1px solid #ccd5db;border-radius:7px}.template-card{border:1px solid #dce5eb;border-radius:10px;padding:12px;margin:10px 0}.template-card h3{margin:0 0 9px;font-size:15px}#status{min-height:20px;color:#087c3b}#status.error{color:#bf1f35}@media(max-width:790px){.editor-grid{grid-template-columns:1fr}.preview-wrap{position:static}.panel-title{align-items:start}.card{padding:15px}.top{padding:10px 14px}main{padding:12px}.chat-preview{min-height:350px}}
.editor-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.editor-grid>*{min-width:0}.fields textarea{max-width:100%}
@media(max-width:790px){.editor-grid{grid-template-columns:minmax(0,1fr)}}
.chat-list-preview{background:#fff;border:1px solid #dce4ea;border-radius:10px;padding:10px 12px;margin-bottom:9px;font-size:13px;color:#3d4c5b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list-preview strong{display:block;color:#1b2a36;font-size:12px;margin-bottom:2px}
.chat-preview{min-width:0}
.chat-preview{align-items:stretch}
.line-bubble{display:flex;flex-direction:column;align-self:stretch;height:auto}
.line-body{flex:1}
.line-footer{margin-top:auto}
.flex-hero{height:auto;max-width:100%;border-radius:0}
.flex-hero .flex-image{display:block;width:100%;object-fit:cover}
.template-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.template-card-head h3{margin:0}
.template-delete{padding:5px 9px;font-size:13px;color:#ae2232;background:#fff0f1;border:1px solid #f2c7cd}
.action-dialog{width:min(420px,calc(100vw - 28px));border:1px solid #dce4ea;border-radius:16px;padding:22px;box-shadow:0 18px 65px #1e354055;color:#18232d}
.action-dialog::backdrop{background:#142234a8}
.action-dialog h2{font-size:19px;margin:0 0 10px}
.action-dialog p{line-height:1.55;white-space:pre-wrap;margin:0 0 22px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px}
#labelsField[hidden]{display:none}
.template-card textarea{font-family:inherit;font-size:15px;line-height:1.45;min-height:0;resize:vertical;white-space:pre-wrap}
.template-card textarea[data-field="title"]{min-height:62px}
.template-card textarea[data-field="body"]{min-height:88px}
.campaign{min-width:0}
.campaign-chat-list{white-space:normal;overflow-wrap:anywhere;margin:6px 0 0}
.campaign-preview{min-height:0;max-width:100%;padding:12px;gap:8px;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
.campaign-preview .line-bubble{flex:0 0 180px;max-width:180px;scroll-snap-align:start}
.campaign-preview .line-section{padding:9px}
.campaign-preview .line-body .flex-text:first-child{font-size:15px!important}
.campaign-preview .line-body .flex-text{font-size:12px!important}
.campaign-preview .flex-button{font-size:12px;padding:7px}
.campaign-scroll-hint{display:block;margin-top:-2px}
.campaign-preview-details{min-width:0}
.campaign-preview-details summary{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:8px 11px;border:1px solid #cdd7df;border-radius:9px;background:#f5f8fa;color:#243748;font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.campaign-preview-details summary::-webkit-details-marker{display:none}
.campaign-preview-details summary::before{content:'▸';font-size:15px;color:#087c3b;line-height:1}
.campaign-preview-details[open] summary::before{transform:rotate(90deg)}
.campaign-preview-details summary:focus-visible{outline:2px solid #2496d2;outline-offset:2px}
.campaign-preview-details .campaign-chat-list{margin-top:9px}
.campaign-preview-details .campaign-preview{margin-top:8px}
.campaign-insights{border:1px solid #dce4ea;border-radius:11px;background:#f8fafb;padding:13px;min-width:0}
.campaign-insights[hidden]{display:none}
.campaign-insights h3{font-size:16px;margin:0 0 5px}
.campaign-insights h4{font-size:14px;margin:14px 0 5px}
.campaign-insights p{margin:4px 0;overflow-wrap:anywhere}
.insight-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:7px;margin:12px 0}
.insight-metric{background:#fff;border:1px solid #e1e8ed;border-radius:9px;padding:9px;display:grid;gap:2px}
.insight-metric strong{font-size:19px;color:#087c3b}
.insight-metric span{font-size:12px;color:#5b6b77}
.campaign-insights .ghost{margin-top:10px}