/* Bulk Sender tools (Suggested Replies, Link & QR, Reminders, Drip Campaigns, AI Agent, Forms, Payments).
   Shared wt-* pieces only; each tool keeps its own extras in assets/whatsapp-<tool>.css (wsr-, wl-, wrm-, wd-,
   wai-, wfo-, wp-). Built on the Bulk Sender's own look (we-* classes: we-head, we-card, we-table, we-label,
   we-switch, we-empty, we-phone). */

.wt-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.wt-layout.wide-side{grid-template-columns:minmax(0,1fr) 380px}
.wt-side{display:grid;gap:16px;position:sticky;top:12px}
.wt-card{background:#fff;border:1px solid var(--we-line);border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.wt-card+.wt-card{margin-top:16px}
.wt-card>h2,.wt-card-title{font-size:15px;font-weight:650;margin:0 0 4px;color:var(--we-ink)}
.wt-card-sub{margin:0 0 14px;font-size:12.5px;color:var(--we-muted);line-height:1.5}
.wt-back{display:flex;align-items:center;gap:14px;margin:6px 0 20px}
.wt-back-btn{width:38px;height:38px;border-radius:50%;border:1px solid #d0d5dd;background:#fff;color:#344054;display:grid;place-items:center;flex-shrink:0}
.wt-back-btn:hover{border-color:var(--we-brand);color:var(--we-brand)}
.wt-back h1{font-size:22px;margin:0;letter-spacing:-.3px}
.wt-back p{margin:2px 0 0;font-size:13px;color:var(--we-muted)}
.wt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wt-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wt-field{display:block;margin:0 0 14px}
.wt-field>span:first-child,.wt-label{display:block;font-size:12.5px;font-weight:600;color:#24385d;margin-bottom:6px}
.wt-field>span:first-child small,.wt-label small{font-weight:400;color:var(--we-muted);margin-left:4px}
.wt-req{color:#d92d20}
.wt-hint{display:block;font-size:11.5px;color:var(--we-muted);margin-top:5px;line-height:1.45}
.wt-count{float:right;font-size:11px;color:#98a2b3;margin-top:4px}

/* A choice of kinds, like the message types of a suggested reply. */
.wt-tiles{display:flex;flex-wrap:wrap;gap:8px}
.wt-tile{width:76px;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #e4e7ec;border-radius:9px;background:#fff;color:#475467;font-size:11.5px;font-weight:500;padding:8px 4px;transition:border-color .15s,background .15s,color .15s}
.wt-tile:hover{border-color:#9db4f2;color:#1d4ed8}
.wt-tile.on{border-color:#2563eb;background:#eff4ff;color:#1d4ed8;box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.wt-tile[aria-disabled="true"]{opacity:.55}

/* Segmented choice: Manual / Keyword / API, Wait duration / At specific time. */
.wt-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.wt-seg>label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #e4e7ec;border-radius:10px;padding:12px 8px;cursor:pointer;background:#fff;font-size:12.5px;font-weight:600;color:#475467;text-align:center}
.wt-seg>label small{font-weight:400;font-size:11px;color:var(--we-muted)}
.wt-seg>label input{position:absolute;opacity:0;width:1px;height:1px}
.wt-seg>label.on{border-color:#7c3aed;background:#f7f3ff;color:#6d28d9;box-shadow:0 0 0 2px rgba(124,58,237,.12)}
.wt-seg>label:focus-within{outline:2px solid #7c3aed;outline-offset:2px}
.wt-pills{display:inline-flex;background:#f2f4f7;border-radius:9px;padding:3px;gap:2px}
.wt-pills button{border:0;background:none;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:600;color:#475467}
.wt-pills button.on{background:#fff;color:#6d28d9;box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* A row with a title, a line of help and a switch. */
.wt-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #eef0f5;border-radius:10px;background:#fcfcfd;margin:0 0 10px}
.wt-toggle strong{display:block;font-size:13px;color:#1d2939}
.wt-toggle small{display:block;font-size:11.5px;color:var(--we-muted);margin-top:2px}
.wt-toggle .we-switch{margin:0;flex-shrink:0}

/* Keywords typed in as chips. */
.wt-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;border:1px solid #d0d5dd;border-radius:9px;padding:5px 8px;background:#fff}
.wt-chips:focus-within{border-color:var(--we-brand);box-shadow:0 0 0 3px rgba(76,76,224,.1)}
.wt-chip{display:inline-flex;align-items:center;gap:4px;background:#eef4ff;color:#1d4ed8;border-radius:999px;padding:2px 4px 2px 10px;font-size:12px;font-weight:500}
.wt-chip button{border:0;background:none;color:inherit;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0}
.wt-chip button:hover{background:#dbe7ff}
.wt-chips input{border:0;outline:0;flex:1;min-width:120px;font-size:13px;padding:4px 2px;background:none}

/* Day pills (Mon–Sun) for business hours and repeats. */
.wt-days{display:flex;flex-wrap:wrap;gap:6px}
.wt-days button{min-width:42px;height:34px;border-radius:8px;border:1px solid #e4e7ec;background:#f9fafb;color:#475467;font-size:12px;font-weight:600}
.wt-days button.on{background:#4f46e5;border-color:#4f46e5;color:#fff}

/* A wizard's steps: numbered circles joined by a line. */
.wt-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.wt-step{display:flex;align-items:center;gap:8px;font-size:13px;color:#98a2b3;font-weight:500;border:0;background:none;padding:0}
.wt-step i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:#eef0f5;color:#667085}
.wt-step.on{color:#1d2939}
.wt-step.on i{background:#2563eb;color:#fff}
.wt-step.done{color:#667085}
.wt-step.done i{background:#16a34a;color:#fff}
.wt-step-line{width:34px;height:2px;background:#e4e7ec;border-radius:2px}

/* A setup checklist beside a wizard. */
.wt-checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wt-checklist li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:12.5px;color:#344054}
.wt-checklist li>span:first-child{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#eef0f5;color:#98a2b3;margin-top:1px}
.wt-checklist li.ok>span:first-child{background:#dcfae6;color:#079455}
.wt-checklist strong{display:block;font-weight:600}
.wt-checklist small{display:block;font-size:11px;color:var(--we-muted)}
.wt-warn{margin-top:14px;background:#fffaeb;border:1px solid #fedf89;color:#93370d;border-radius:9px;padding:9px 12px;font-size:12px}

/* Summary card: label/value rows, a primary action and a quiet discard. */
.wt-summary dl{margin:0 0 16px;display:grid;gap:10px}
.wt-summary dl div{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#475467}
.wt-summary dd{margin:0;font-weight:650;color:#1d2939}
.wt-summary .btn{width:100%;justify-content:center}
.wt-discard{display:block;width:100%;margin-top:8px;border:0;background:none;color:#475467;font-size:13px;padding:8px}
.wt-how ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:wt}
.wt-how li{counter-increment:wt;display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;font-size:12px;color:#475467;line-height:1.5}
.wt-how li:before{content:counter(wt);font-weight:700;color:#7c3aed}

/* Numbered blocks in a sequence (drip steps, form fields). */
.wt-block{border:1px solid #eef0f5;border-radius:12px;padding:14px 16px;background:#fff;margin:0 0 12px}
.wt-block-head{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.wt-block-head b{width:22px;height:22px;border-radius:50%;background:#f4f3ff;color:#6d28d9;display:grid;place-items:center;font-size:11px}
.wt-block-head span{font-size:12px;font-weight:700;letter-spacing:.6px;color:#667085;text-transform:uppercase}
.wt-block-tools{margin-left:auto;display:flex;gap:2px}
.wt-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1.5px dashed #c4b5fd;background:#fbfaff;color:#6d28d9;border-radius:10px;padding:11px;font-weight:600;font-size:13px}
.wt-add:hover{background:#f5f3ff}

/* Stat tiles above a list. */
.wt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.wt-stat{background:#fff;border:1px solid var(--we-line);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-start}
.wt-stat span{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;color:#667085;text-transform:uppercase}
.wt-stat strong{display:block;font-size:24px;margin-top:6px}
.wt-stat i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.wt-stat.blue strong{color:#1d4ed8}.wt-stat.green strong{color:#079455}.wt-stat.red strong{color:#d92d20}
.wt-stat.blue i{background:#eff4ff;color:#2563eb}.wt-stat.green i{background:#ecfdf3;color:#079455}.wt-stat.red i{background:#fef3f2;color:#d92d20}.wt-stat.grey i{background:#f2f4f7;color:#667085}

/* List pages: a search box and filters in one row, then the table. */
.wt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.wt-toolbar .we-search,.wt-toolbar .wt-search{margin-left:auto}
.we-page .wt-toolbar .input{width:auto;min-width:150px;margin:0;min-height:38px;height:38px;padding:0 10px}
.wt-search{display:flex;align-items:center;gap:7px;border:1px solid #d0d5dd;border-radius:9px;padding:0 10px;height:38px;background:#fff;color:#98a2b3;min-width:240px}
.wt-search input{border:0;outline:0;background:none;flex:1;min-width:0;font-size:13px;color:var(--we-ink)}
/* Row actions: put the buttons in a <div class="wt-actions"> inside the cell, never on the <td> itself. */
.wt-actions{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.wt-link{color:#2563eb;text-decoration:none;font-size:12.5px;word-break:break-all}
.wt-link:hover{text-decoration:underline}
.wt-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 4px 0;font-size:12.5px;color:var(--we-muted)}
.we-page .wt-pager .input{width:auto;margin:0;min-height:32px;height:32px;padding:0 8px;font-size:12px}

/* A WhatsApp-style preview beside a form. */
.wt-preview{background:#fff;border:1px solid var(--we-line);border-radius:14px;padding:16px}
.wt-preview h3{font-size:15px;margin:0 0 12px;text-align:center}
.wt-preview .we-phone{max-width:100%;margin:0 auto}

@media(max-width:1180px){.wt-layout,.wt-layout.wide-side{grid-template-columns:minmax(0,1fr)}.wt-side{position:static}.wt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wt-row,.wt-row.three{grid-template-columns:minmax(0,1fr)}.wt-seg{grid-auto-flow:row}.wt-card{padding:16px}.wt-search{min-width:0;width:100%}.wt-toolbar .wt-search{margin-left:0}}
@media(prefers-reduced-motion:reduce){.wt-tile{transition:none}}