/* ═══════════════════════════════════════════════════════════════
   MESSAGE TEMPLATES  (message_settings.php)
   Scoped to .ms-page — uses the PropHog tokens from base.css.
   Load after style.css.
═══════════════════════════════════════════════════════════════ */


/* ── Cool neutral palette for this page (overrides the warm cream/tan tokens) ── */
body:has(.ms-page){
  --ph-bg:#F6F7F9; --bs-body-bg:#F6F7F9;
  --ph-surface:#FFFFFF; --ph-surface-2:#F1F3F6; --ph-surface-3:#E6E9EE;
  --ph-border:#E3E7ED; --ph-border-2:#CBD2DC;
  --ph-black:#1A2235; --ph-text:#334155; --ph-muted:#64748B; --ph-muted-2:#94A3B8;
  --ph-gold-lo:#D39A0B;
  background:var(--ph-bg);
}
body:has(.ms-page) .ph-main,
body:has(.ms-page) .ph-content{background:var(--ph-bg);}

/* ── No top header on this page (the page has its own title).
      Below 1080px the bar stays so the mobile menu button still works. ── */
@media (min-width:1081px){
  body:has(.ms-page) .ph-topbar{display:none;}
}
@media (max-width:1080px){
  body:has(.ms-page) .ph-topbar-back,
  body:has(.ms-page) .ph-topbar-title,
  body:has(.ms-page) .ph-topbar-sub{display:none;}
  .ms-library{max-height:calc(100dvh - var(--ph-topbar-h,56px) - 32px);}
}

.ms-page{
  --ms-radius:12px;
  --ms-radius-sm:8px;
  --ms-email:#3B5BDB; --ms-email-bg:#EDF1FE;
  --ms-sms:#15803D;   --ms-sms-bg:#E8F6EC;
  --ms-warn:#D97706;  --ms-warn-bg:#FFFBEB;
  --ms-danger:var(--ph-red,#DC2626);
  --ms-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.06);
  padding:22px 28px 0;
  max-width:1480px;
  font-family:'Sora',sans-serif;
  color:var(--ph-text);
}
.ms-page *{box-sizing:border-box;}
.ms-page h1,.ms-page h2,.ms-page h3{text-wrap:balance;}
.ms-page p{text-wrap:pretty;}
.ms-page button{font-family:inherit;}
.ms-page :focus-visible{outline:2px solid var(--ph-gold);outline-offset:2px;}

/* ── Page head ─────────────────────────────────────────────── */
.ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap;}
.ms-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:36px;line-height:1;letter-spacing:.03em;color:var(--ph-black);margin:0 0 6px;}
.ms-lede{margin:0;font-size:13px;line-height:1.55;color:var(--ph-muted);max-width:62ch;}
.ms-stats{display:flex;gap:10px;}
.ms-stat{background:var(--ph-surface);border:1px solid var(--ph-border);border-radius:10px;padding:10px 16px;text-align:right;min-width:120px;}
.ms-stat-num{display:block;font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;color:var(--ph-black);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.ms-stat-num.is-text{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;line-height:26px;letter-spacing:0;}
.ms-stat-num.is-empty{color:var(--ph-muted-2);}
.ms-stat-lbl{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-muted);}

/* ── Layout ────────────────────────────────────────────────── */
.ms-layout{display:grid;grid-template-columns:minmax(290px,350px) minmax(0,1fr);gap:20px;align-items:start;}

/* ── Buttons & chips ───────────────────────────────────────── */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;border-radius:var(--ms-radius-sm);border:1px solid transparent;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;}
.ms-btn-primary{background:var(--ph-navy);color:#fff;}
.ms-btn-primary:hover{background:#243050;box-shadow:0 4px 10px rgba(26,34,53,.18);}
.ms-btn-primary:disabled{opacity:.55;cursor:default;box-shadow:none;}
.ms-btn-ghost{background:var(--ph-surface);color:var(--ph-text);border-color:var(--ph-border);}
.ms-btn-ghost:hover{border-color:var(--ph-border-2);background:var(--ph-surface-2);}
.ms-btn-sm{height:32px;padding:0 12px;font-size:12px;}
.ms-btn-ghost:disabled{opacity:.5;cursor:default;background:var(--ph-surface);border-color:var(--ph-border);}
.ms-btn .fa{font-size:12px;}

.ms-chip{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap;line-height:1.4;}
.ms-chip-gold{background:#FEF3C7;color:#1A2235;}
.ms-chip-blue{background:var(--ms-email-bg);color:var(--ms-email);}
.ms-chip-green{background:var(--ms-sms-bg);color:var(--ms-sms);}
.ms-chip .fa{font-size:9px;}
.ms-chip-gold .fa{color:#E6A817;}

/* ── Library (left) ────────────────────────────────────────── */
.ms-library{position:sticky;top:16px;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);background:var(--ph-surface);border:1px solid var(--ph-border);border-radius:var(--ms-radius);overflow:hidden;}
.ms-lib-head{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--ph-border);}
.ms-search{position:relative;flex:1;min-width:0;}
.ms-search .fa{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--ph-muted-2);pointer-events:none;}
.ms-search input{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:var(--ph-surface-2);font:400 12.5px 'Sora',sans-serif;color:var(--ph-text);outline:none;transition:border-color .14s,box-shadow .14s,background .14s;}
.ms-search input:focus{border-color:var(--ph-gold);box-shadow:0 0 0 3px var(--ph-gold-glow);background:#fff;}
.ms-search input::placeholder{color:var(--ph-muted-2);}
.ms-search input[readonly]{cursor:text;}
.ms-search-clear{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--ph-muted-2);font-size:18px;line-height:1;cursor:pointer;}
.ms-search-clear:hover{background:var(--ph-surface-2);color:var(--ph-text);}
.ms-search-clear[hidden]{display:none;}
.ms-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ph-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
/* phone-only chrome — desktop never sees these */
.ms-mobar,.ms-chan,.ms-card-edit{display:none;}
.ms-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:500 10px 'JetBrains Mono',monospace;color:var(--ph-muted);border:1px solid var(--ph-border);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:#fff;pointer-events:none;}
.ms-search input:focus + kbd,.ms-search input:not(:placeholder-shown) + kbd{display:none;}

.ms-lib-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--ph-border-2) transparent;}
.ms-lib-list .cards-container{display:flex;flex-direction:column;gap:8px;}
.ms-lib-count{padding:2px 4px 4px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ph-muted);}

/* Card */
.ms-card{position:relative;padding:12px 14px 10px;border:1px solid var(--ph-border);border-radius:10px;background:var(--ph-surface);transition:border-color .15s,box-shadow .15s,background .15s;}
.ms-card:hover{border-color:var(--ph-border-2);}
.ms-card.is-active{border-color:var(--ph-gold);box-shadow:0 0 0 3px var(--ph-gold-glow);background:#FFFFFF;}
.ms-card.is-removing{opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;}
.ms-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ms-card-open{all:unset;cursor:pointer;min-width:0;font-size:13.5px;font-weight:700;color:var(--ph-black);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ms-card-open::after{content:"";position:absolute;inset:0;border-radius:10px;}
.ms-card-open:focus-visible::after{outline:2px solid var(--ph-gold);outline-offset:2px;}
.ms-card-line{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45;color:var(--ph-text);min-width:0;}
.ms-card-line + .ms-card-line{margin-top:3px;}
.ms-card-line .fa{flex:0 0 14px;font-size:11px;text-align:center;}
.ms-card-line.is-email .fa{color:var(--ms-email);}
.ms-card-line.is-sms .fa{color:var(--ms-sms);}
.ms-card-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-card-line.is-sms span{color:var(--ph-muted);}
.ms-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--ph-border);}
.ms-card-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ph-muted);letter-spacing:.02em;}
.ms-card-actions{position:relative;z-index:2;display:flex;gap:2px;}
.ms-icon-btn{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--ph-muted);cursor:pointer;transition:background .14s,color .14s;}
.ms-icon-btn:hover{background:var(--ph-surface-2);color:var(--ph-black);}
.ms-icon-btn.is-danger:hover{background:#FDECEC;color:var(--ms-danger);}
.ms-icon-btn .fa{font-size:13px;}

/* Skeleton / empty */
.ms-skel{height:104px;border-radius:10px;background:linear-gradient(90deg,var(--ph-surface-2) 0%,var(--ph-surface-3) 50%,var(--ph-surface-2) 100%);background-size:200% 100%;animation:ms-shimmer 1.3s linear infinite;}
@keyframes ms-shimmer{to{background-position:-200% 0;}}
.ms-empty{padding:28px 18px;text-align:center;border:1px dashed var(--ph-border-2);border-radius:10px;background:var(--ph-surface-2);}
.ms-empty h3{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ph-black);}
.ms-empty p{margin:0 auto 14px;font-size:12px;line-height:1.5;color:var(--ph-muted);max-width:30ch;}
.ms-pagination{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:10px 2px 4px;
  border-top:1px dashed var(--ph-border);
  font-size:11px;
}
.ms-pagination .row{display:contents;margin:0;}
.ms-pagination [class*="col-"]{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  padding:0 !important;
}
.ms-pagination .ph-entries,
.ms-pagination .pagination-records{
  width:100%;
  margin:0;
  text-align:center;
  color:var(--ph-muted);
}
.ms-pagination .ph-entries small{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ms-pagination .ph-pagination{
  display:flex !important;
  justify-content:center !important;
  flex-wrap:nowrap;
  gap:4px !important;
  margin:0 !important;
  width:100% !important;
  text-align:center;
}
.ms-pagination .ph-pg-btn,
.ms-pagination .ph-pg-btn.wide{
  width:28px !important;
  min-width:28px;
  height:28px !important;
  padding:0 !important;
  flex:0 0 28px;
}
.ms-pagination .ph-pg-btn.wide > a.page-link,
.ms-pagination .ph-pg-btn.wide > span.page-link{padding:0 !important;}
.ms-pagination .ph-pg-btn.disabled{opacity:.4;cursor:default;}
/* One page: keep the count, drop the all-disabled « < 1 > » row */
.ms-pagination:not(:has(.ph-pg-btn:not(.disabled):not(.active))) .ph-pagination{display:none !important;}

/* ── Editor (right) ────────────────────────────────────────── */
.ms-editor{min-width:0;}
.ms-panel{background:var(--ph-surface);border:1px solid var(--ph-border);border-radius:var(--ms-radius);margin-bottom:16px;}

/* Identity panel */
.ms-ident{padding:18px 20px 16px;}
.ms-ident-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ms-ident-name{flex:1;min-width:240px;}
.ms-mode{display:inline-flex;margin-bottom:8px;}
.ms-name-input{width:100%;height:44px;padding:0 12px;margin-left:-12px;border:1px solid transparent;border-radius:var(--ms-radius-sm);background:transparent;font:700 21px/1.2 'Sora',sans-serif;color:var(--ph-black);outline:none;transition:border-color .14s,box-shadow .14s,background .14s;width:calc(100% + 12px);}
.ms-name-input:hover{background:var(--ph-surface-2);}
.ms-name-input:focus{background:#fff;border-color:var(--ph-gold);box-shadow:0 0 0 3px var(--ph-gold-glow);}
.ms-name-input::placeholder{color:var(--ph-muted-2);font-weight:600;}

/* Default switch */
.ms-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:8px 12px;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:var(--ph-surface-2);}
.ms-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.ms-switch-track{position:relative;width:34px;height:20px;border-radius:20px;background:var(--ph-border-2);transition:background .18s;flex-shrink:0;}
.ms-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s;}
.ms-switch input:checked + .ms-switch-track{background:var(--ph-gold);}
.ms-switch input:checked + .ms-switch-track::after{transform:translateX(14px);}
.ms-switch input:focus-visible + .ms-switch-track{outline:2px solid var(--ph-gold);outline-offset:2px;}
.ms-switch-text{display:flex;flex-direction:column;line-height:1.25;}
.ms-switch-text b{font-size:12.5px;color:var(--ph-black);}
.ms-switch-text small{font-size:11px;color:var(--ph-muted);}

/* Merge fields */
.ms-vars{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--ph-border);}
.ms-vars-lbl{font-size:12px;font-weight:600;color:var(--ph-black);}
.ms-vars-lbl small{display:block;font-weight:400;color:var(--ph-muted);font-size:11px;}
.ms-vars-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ms-vars-group > span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ph-muted);margin-right:2px;}
.ms-var{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--ph-border);border-radius:14px;background:#fff;font-size:11.5px;font-weight:600;color:var(--ph-text);cursor:pointer;transition:border-color .14s,background .14s,color .14s;}
.ms-var::before{content:"+";font-weight:700;color:var(--ph-gold-lo);}
.ms-var:hover{border-color:var(--ph-gold);background:var(--ph-surface-2);color:var(--ph-black);}
.ms-var.is-you::before{color:var(--ms-email);}

/* Channel panels */
.ms-panel-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ph-border);}
.ms-tile{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.ms-tile-email{background:var(--ms-email-bg);color:var(--ms-email);}
.ms-tile-sms{background:var(--ms-sms-bg);color:var(--ms-sms);}
.ms-panel-title{flex:1;min-width:0;}
.ms-panel-title h2{margin:0;font-size:15px;font-weight:700;color:var(--ph-black);}
.ms-panel-title p{margin:2px 0 0;font-size:12px;color:var(--ph-muted);}
.ms-panel-body{padding:18px 20px 20px;}

.ms-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--ph-surface-2);border:1px solid var(--ph-border);}
.ms-seg button{height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;font-size:12px;font-weight:600;color:var(--ph-muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.ms-seg button[aria-selected="true"]{background:#fff;color:var(--ph-black);box-shadow:0 1px 2px rgba(0,0,0,.08);}

/* Fields */
.ms-field + .ms-field{margin-top:16px;}
.ms-field-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
.ms-label{font-size:12.5px;font-weight:600;color:var(--ph-black);}
.ms-count{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ph-muted);white-space:nowrap;}
.ms-count.is-warn{color:var(--ms-warn);}
.ms-count.is-full{color:var(--ms-danger);font-weight:600;}
.ms-input,.ms-textarea{width:100%;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:#fff;font:400 13.5px/1.6 'Sora',sans-serif;color:var(--ph-black);outline:none;transition:border-color .14s,box-shadow .14s;}
.ms-input{height:42px;padding:0 13px;}
.ms-textarea{display:block;padding:11px 13px;resize:vertical;min-height:150px;}
.ms-input:focus,.ms-textarea:focus{border-color:var(--ph-gold);box-shadow:0 0 0 3px var(--ph-gold-glow);}
.ms-input::placeholder,.ms-textarea::placeholder{color:var(--ph-muted-2);}
.ms-input.is-invalid,.ms-textarea.is-invalid{border-color:var(--ms-danger);box-shadow:0 0 0 3px rgba(220,38,38,.1);}

.ms-lint{display:none;margin-top:8px;padding:8px 10px;border-radius:7px;font-size:12px;line-height:1.45;background:var(--ms-warn-bg);border:1px solid #FCD34D;color:var(--ph-black);}
.ms-lint.is-on{display:flex;gap:8px;align-items:flex-start;}
.ms-lint code{font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(217,119,6,.12);padding:0 4px;border-radius:3px;}
.ms-lint .fa{margin-top:2px;color:var(--ms-warn);}

/* Email preview */
.ms-email-prev{border:1px solid var(--ph-border);border-radius:10px;overflow:hidden;}
.ms-email-meta{padding:14px 16px;background:var(--ph-surface-2);border-bottom:1px solid var(--ph-border);font-size:12px;line-height:1.7;color:var(--ph-muted);}
.ms-email-meta b{display:inline-block;min-width:54px;font-weight:600;color:var(--ph-muted);}
.ms-email-meta .ms-email-subj{margin-top:6px;font-size:16px;font-weight:700;line-height:1.35;color:var(--ph-black);}
.ms-email-body{padding:18px 16px 22px;font-size:14px;line-height:1.7;color:var(--ph-black);max-width:68ch;overflow-wrap:anywhere;min-height:150px;}
.ms-email-body:empty::before,.ms-bubble:empty::before{content:attr(data-empty);color:var(--ph-muted-2);}
.ms-merge{background:#FEF3C7;color:inherit;padding:0 2px;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(230,168,23,.55);}
.ms-merge.is-unknown{background:#FDECEC;box-shadow:inset 0 -1px 0 rgba(220,38,38,.4);}
.ms-prev-note{margin:10px 0 0;font-size:11.5px;color:var(--ph-muted);}

/* SMS */
.ms-sms-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start;}
.ms-sms-grid .ms-textarea{min-height:190px;}
.ms-sms-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.ms-tip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:var(--ph-surface-2);font-size:12px;line-height:1.45;color:var(--ph-text);}
.ms-tip[hidden]{display:none;}

.ms-phone{border-radius:30px;padding:9px;background:var(--ph-navy);box-shadow:var(--ms-shadow);}
.ms-phone-screen{border-radius:22px;background:#fff;overflow:hidden;min-height:340px;display:flex;flex-direction:column;}
.ms-phone-bar{padding:12px 12px 10px;text-align:center;border-bottom:1px solid #E5E7EB;background:#F8FAFC;}
.ms-phone-notch{width:70px;height:5px;border-radius:4px;background:#D1D5DB;margin:0 auto 10px;}
.ms-phone-avatar{width:34px;height:34px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;background:var(--ph-gold);color:#fff;font-size:12px;font-weight:700;}
.ms-phone-name{font-size:11.5px;font-weight:600;color:var(--ph-black);}
.ms-phone-thread{flex:1;padding:14px 12px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;}
.ms-phone-time{align-self:center;font-size:10px;color:#94A3B8;margin-bottom:6px;}
.ms-bubble{max-width:88%;padding:8px 12px;border-radius:17px 17px 17px 5px;background:#E9E9EB;color:#111;font-size:13px;line-height:1.42;overflow-wrap:anywhere;white-space:pre-wrap;}
.ms-bubble .ms-merge{background:rgba(230,168,23,.28);box-shadow:none;}
.ms-bubble .ms-merge.is-unknown{background:rgba(220,38,38,.16);}
.ms-phone-cap{margin-top:8px;text-align:center;font-size:11px;color:var(--ph-muted);}

/* Save bar */
.ms-savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 -2px;padding:12px 2px 18px;background:linear-gradient(to bottom,rgba(246,247,249,0) 0,var(--ph-bg) 14px);}
.ms-savebar-inner{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 16px;background:var(--ph-surface);border:1px solid var(--ph-border);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow);}
.ms-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ph-muted);}
.ms-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ph-green);flex-shrink:0;}
.ms-status.is-dirty{color:var(--ph-black);font-weight:600;}
.ms-status.is-dirty::before{background:var(--ph-gold);box-shadow:0 0 0 3px var(--ph-gold-glow);}
.ms-status.is-new::before{background:var(--ms-email);}
.ms-status kbd{font:500 10px 'JetBrains Mono',monospace;border:1px solid var(--ph-border);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:#fff;color:var(--ph-muted);font-weight:400;}
.ms-savebar-actions{display:flex;gap:8px;}

/* Toast */
.ms-toasts{position:fixed;right:22px;bottom:22px;z-index:3000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.ms-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:380px;padding:11px 14px;border-radius:10px;background:var(--ph-navy);color:#fff;font-size:13px;line-height:1.4;box-shadow:0 10px 30px rgba(20,27,43,.28);animation:ms-toast-in .22s ease-out;}
.ms-toast .fa{color:var(--ph-gold);}
.ms-toast.is-error .fa{color:#F87171;}
.ms-toast.is-out{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;}
@keyframes ms-toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.ms-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1240px){
  .ms-sms-grid{grid-template-columns:minmax(0,1fr) 240px;}
}
@media (max-width:1120px){
  .ms-layout{grid-template-columns:minmax(0,1fr);}
  .ms-library{position:static;max-height:420px;}
}
@media (max-width:760px){
  /* ── nothing on this page may be wider than the phone ─────────────
     The page sits inside the platform's content wrapper, which is built for
     a desktop. Pin every container on this page to the viewport and let
     nothing scroll sideways, whatever the wrapper does. */
  body:has(.ms-page){overflow-x:hidden;}
  body:has(.ms-page) .results-panel,
  .ms-page,.ms-layout,.ms-library,.ms-editor,.ms-lib-list,.ms-lib-list .cards-container,
  .item,.ms-panel,.ms-panel-body,.ms-field,.ms-sms-grid,.ms-ident-row,.ms-ident-name,
  form#apiForm{min-width:0 !important;max-width:100% !important;width:auto;}
  .ms-page{overflow-x:hidden;max-width:100vw !important;}
  .ms-ident-name{min-width:0;}                 /* was 240px — overflows a 360px phone */
  .ms-input,.ms-textarea,.ms-name-input{width:100%;max-width:100%;}
  .ms-page,.ms-card-line span,.ms-email-body,.ms-prev-note{overflow-wrap:anywhere;word-break:break-word;}
  .ms-card-line span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* the list loses its outer frame so the cards get the full width */
  .ms-library{border:0;background:transparent;border-radius:0;}
  .ms-lib-head{padding:0 0 10px;}
  .ms-lib-list{padding:0;}

  /* the one obvious way in: a full-width Edit button on every card */
  .ms-card-edit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:12px;border:1px solid var(--ph-navy);border-radius:var(--ms-radius-sm);background:var(--ph-navy);color:#fff;font:600 15px 'Sora',sans-serif;cursor:pointer;position:relative;z-index:2;}
  .ms-card-edit .fa{font-size:13px;}
  .ms-card.is-active .ms-card-edit{background:var(--ph-gold);border-color:var(--ph-gold);color:var(--ph-black);}
  .ms-card-foot{justify-content:space-between;}
  .ms-card-actions .ms-icon-btn[data-action="edit"]{display:none;}   /* the button above replaces it */

  /* ── one screen at a time ──────────────────────────────────────────
     List view: header, search, New, the cards — and nothing else.
     Editor view: a back bar, the channel switcher, one channel's fields,
     and the save bar pinned to the bottom. The other view is display:none,
     so there is never a 420px list sitting on top of a 1,200px form. */
  .ms-page{padding:12px 12px 0;}
  .ms-layout{display:block;}
  .ms-library{position:static;max-height:none;}

  .ms-view-list .ms-editor{display:none;}
  .ms-view-editor .ms-library,
  .ms-view-editor .ms-head{display:none;}

  /* header: the title only. The stats and the explainer are desktop furniture. */
  .ms-head{margin-bottom:10px;}
  .ms-title{font-size:26px;}
  .ms-lede,.ms-stats{display:none;}

  /* search + New on one row, both reachable with a thumb */
  .ms-lib-head{gap:8px;}
  .ms-search input{height:46px;font-size:16px;padding-left:38px;}  /* 16px stops iOS zooming the page */
  .ms-search .fa{left:14px;font-size:14px;}
  .ms-search kbd{display:none;}
  .ms-search-clear{right:10px;width:32px;height:32px;font-size:22px;}
  #msNew{height:46px;padding:0 16px;font-size:15px;}

  /* cards: the whole card is the tap target, the icons are real buttons */
  .item{padding:14px 14px 10px;}
  .ms-card-open{font-size:17px;}
  .ms-icon-btn{width:44px;height:44px;font-size:16px;}
  .ms-card-foot{flex-wrap:wrap;gap:6px;}

  /* ── editor view ─────────────────────────────────────────────────── */
  .ms-mobar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:6;margin:-12px -12px 10px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--ph-bg);border-bottom:1px solid var(--ph-border);}
  .ms-mobar-back{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 8px;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:#fff;font:600 14px 'Sora',sans-serif;color:var(--ph-text);cursor:pointer;}
  .ms-mobar-back .fa{font-size:12px;}
  .ms-mobar-title{min-width:0;flex:1;font:700 16px 'Sora',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .ms-chan{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 10px;padding:3px;border:1px solid var(--ph-border);border-radius:var(--ms-radius-sm);background:var(--ph-surface-2);}
  .ms-chan button{height:42px;border:0;border-radius:calc(var(--ms-radius-sm) - 3px);background:transparent;font:600 14px 'Sora',sans-serif;color:var(--ph-muted);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
  .ms-chan button[aria-selected="true"]{background:#fff;color:var(--ph-text);box-shadow:0 1px 2px rgba(16,23,32,.08);}
  .ms-chan-email #msSmsPanel{display:none;}
  .ms-chan-sms #msEmailPanel{display:none;}

  /* identity: name on its own line, the default toggle underneath */
  .ms-ident-row{flex-direction:column;align-items:stretch;gap:10px;}
  .ms-name-input{font-size:20px;height:48px;}
  .ms-switch{width:100%;}

  /* merge fields wrap into rows — nothing on this page scrolls sideways */
  .ms-vars{display:block;margin-top:12px;padding-top:12px;}
  .ms-vars-lbl small{display:none;}
  .ms-vars-group{flex-wrap:wrap;gap:6px;padding:4px 0 6px;}
  .ms-vars-group>span{flex:0 0 100%;font-size:11px;}
  .ms-vars-group .ms-var{flex:0 0 auto;height:40px;font-size:14px;}

  /* the panels: heads stack, fields get thumb-sized */
  .ms-panel{padding:14px;}
  .ms-panel-head{flex-wrap:wrap;gap:10px;}
  .ms-panel-title p{display:none;}
  .ms-seg{width:100%;}
  .ms-seg button{flex:1;height:40px;}
  .ms-input,.ms-textarea{font-size:16px;}
  .ms-input{height:48px;}
  .ms-textarea{min-height:200px;}
  .ms-sms-grid{grid-template-columns:minmax(0,1fr);}
  .ms-phone{max-width:290px;margin:0 auto;}

  /* save bar fixed to the bottom of the screen: Save is always one tap away,
     and it can't inherit the wrapper's width or padding because it's out of
     the flow entirely. The form gets bottom room so nothing hides under it. */
  .ms-savebar{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ph-bg);border-top:1px solid var(--ph-border);box-shadow:0 -6px 18px rgba(18,35,61,.08);}
  .ms-view-editor form#apiForm{padding-bottom:150px;}
  .ms-savebar-inner{width:100%;flex:none;gap:8px;padding:8px 10px;}
  .ms-status{width:100%;font-size:13px;}
  .ms-savebar-actions{width:100%;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;}
  .ms-savebar-actions .ms-btn{height:48px;font-size:15px;justify-content:center;min-width:0;padding:0 10px;white-space:nowrap;}
}
/* the narrowest phones still in use: the two save-bar buttons stack */
@media (max-width:380px){
  .ms-savebar-actions{grid-template-columns:1fr;}
  .ms-view-editor form#apiForm{padding-bottom:210px;}
}
@media (prefers-reduced-motion:reduce){
  .ms-page *,.ms-toast{animation:none !important;transition:none !important;}
}

/* ── Folder settings extras (folder_settings.php) ──────────── */
.ms-card-top .drag-handle{
  position:relative;z-index:2;flex:0 0 28px;width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--ph-muted);cursor:grab;
}
.ms-card-top .drag-handle:hover{background:var(--ph-surface-2);color:var(--ph-navy);}
.ms-card-top .drag-handle:active{cursor:grabbing;}
.ms-card.is-folder .ms-card-open{padding-right:4px;}
.ms-help{margin:0;font-size:13px;line-height:1.6;color:var(--ph-muted);}
.ms-help + .ms-help{margin-top:10px;}
.ms-sort-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px dashed var(--ph-border);border-radius:var(--ms-radius-sm);background:var(--ph-surface-2);font-size:12px;line-height:1.45;color:var(--ph-text);}
.ms-sort-note .fa{margin-top:2px;color:var(--ph-gold-lo);}
.ms-lib-list .list-group{display:flex;flex-direction:column;gap:8px;}
.ms-card.sorting-ghost{opacity:.55;}
.ms-textarea.ms-textarea-sm{min-height:88px;}
.ms-page.is-folders .ms-ident-row{align-items:flex-start;}