/* product-2: team inbox (views, assignment, tags, notes, AI summary, ratings), bot instructions, page rules */

/* views: chips wrap onto a second line so every view is always in sight (nothing hidden off to the side) */
#dashboardPage .tabs.views{flex-wrap:wrap;overflow:visible;row-gap:6px}
#dashboardPage .tabs.views .tab{flex:none}

/* list rows */
.cv.closed{opacity:.72}
.cv .cv-sum{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:var(--brand-800);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cv .cv-sum .i{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--brand-600)}
.badge-closed{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.badge-open{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200)}
.badge-assignee{background:#EEF2FF;color:#3730A3;border-color:#C7D2FE}
.badge-tag{background:#FFF;color:var(--ink-2);border-color:var(--line-2)}
.badge-rate{padding-left:6px;padding-right:6px}
.badge-rate.up{background:var(--ok-bg);color:var(--ok);border-color:#BFE6D5}
.badge-rate.down{background:var(--err-bg);color:var(--err);border-color:#F5C2C2}

/* the bar under the conversation header */
.convo-bar{border-bottom:1px solid var(--line);background:var(--surface);padding:10px 16px;display:flex;flex-direction:column;gap:10px}
.convo-bar[hidden]{display:none}
.sum-card{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:12px;padding:9px 12px}
.sum-card[hidden]{display:none}
.sum-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sum-l{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700)}
.sum-card p{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--ink);white-space:pre-line}
.sum-refresh{border:0;background:none;color:var(--brand-700);width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sum-refresh:hover{background:var(--brand-100)}
.sum-refresh.spin .i{animation:p2spin .8s linear infinite}
@keyframes p2spin{to{transform:rotate(360deg)}}
.cb-row{display:flex;align-items:center;gap:8px;min-width:0}
.cb-assign{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink-2);min-width:0;flex:0 1 auto}
.cb-assign .sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.assign-sel{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);border:0;background:transparent;height:32px;max-width:170px;min-width:0;cursor:pointer;padding-right:2px}
.assign-sel:focus{outline:none}
.cb-tags{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.cb-tags::-webkit-scrollbar{display:none}
.tag-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer;flex:none}
.tag-chip .i{width:13px;height:13px}
.tag-chip.on{background:var(--sunken);cursor:default}
.tag-chip.on button{border:0;background:none;padding:0;margin-left:2px;color:var(--muted);cursor:pointer;display:inline-flex}
.tag-chip.on button:hover{color:var(--err)}
.cb-row .btn{flex:none;height:34px}
.cb-status.is-closed{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-800)}
.cb-details{display:none}
.cb-details .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#FDE68A;color:#713F12;font-size:11px;font-weight:700;margin-left:4px}

/* reply / note switch in the composer */
.cmode{display:inline-flex;background:var(--sunken);border-radius:9px;padding:2px;gap:2px;flex:none}
.cmode[hidden]{display:none}
.cmode button{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);height:28px;padding:0 11px;border-radius:7px;cursor:pointer}
.cmode button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,26,36,.12)}
.cmode #cmNote.on{background:#FEF3C7;color:#78350F}
.composer.is-note{background:#FFFBEB;border-top-color:#FDE68A}
.composer.is-note textarea{background:#FFFDF5;border-color:#FCD34D}
.composer.is-note .who{color:#92400E}

/* notes in the thread */
.note-b{align-self:stretch;margin:8px 0;max-width:560px;width:calc(100% - 24px);margin-left:auto;margin-right:auto;background:#FEF9C3;border:1px solid #FDE68A;border-radius:12px;padding:9px 12px;color:#422006}
.note-b .nb-h{display:flex;align-items:center;gap:6px;font-size:12px;color:#854D0E}
.note-b .nb-h b{font-weight:700}
.note-b .nb-h span{color:#A16207}
.note-b .nb-x{margin-left:auto;border:0;background:none;color:#A16207;cursor:pointer;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center}
.note-b .nb-x:hover{background:#FDE68A}
.note-b p{margin:4px 0 0;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.event.closed-ev{color:var(--muted)}
.event.rate-ev.up{color:var(--ok)}
.event.rate-ev.down{color:var(--err)}

/* details panel (and the sheet on smaller screens) */
.details .sheet-head{display:none}
.team-sec .fld-l{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 6px}
.team-sec select.input{height:40px;font-size:14px;max-width:none;width:100%;border:1px solid var(--line-2);padding:0 12px;background:var(--surface)}
.status-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag-list .none{font-size:13.5px;color:var(--faint)}
.tag-add{display:flex;gap:8px;margin-top:10px}
.tag-add .input{height:38px;font-size:14px}
.tag-add .btn{height:38px;flex:none}
.tag-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.panel-sec .fine{font-size:13px;color:var(--muted);margin:0 0 10px}
.rate-show{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:6px 12px;border-radius:999px}
.rate-show.up{background:var(--ok-bg);color:var(--ok)}
.rate-show.down{background:var(--err-bg);color:var(--err)}
.details-scrim{display:none}

@media (max-width:1280px){
  body.has-convo .cb-details{display:inline-flex}
  body.show-details .details{display:block;position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:70;box-shadow:-12px 0 40px rgba(20,26,36,.18);padding:0 20px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.show-details .details .sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);margin:0 -20px 14px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line);z-index:1}
  body.show-details .details .sheet-head b{font-size:16px}
  body.show-details .details-scrim{display:block;position:fixed;inset:0;background:rgba(20,26,36,.35);z-index:69}
}
@media (max-width:1700px){ #dashboardPage .composer .tools .hint{display:none} }
@media (max-width:760px){
  /* the header grows to fit the AI / You switch, so nothing sits on top of the bar below it */
  #dashboardPage .chat-head{height:auto;min-height:56px}
  .cb-tags{display:none}
  .cb-assign{flex:1 1 auto}
  .assign-sel{max-width:none;width:100%}
  .sum-card{padding:8px 10px}
  .sum-card p{font-size:13.5px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .cb-row .btn{height:34px;padding:0 10px}
  body.view-chat #dashboardPage .chat{flex-direction:column}
  .composer .tools{flex-wrap:wrap}
  .composer .tools .hint{display:none}
}


/* ===== bot instructions (Settings) ===== */
.bi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.bi-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.bi-field .hint{font-weight:400;color:var(--faint)}
.bi-field textarea.input{height:auto;min-height:84px;padding:10px 14px;line-height:1.45;resize:vertical;font-family:inherit}
.bi-full{grid-column:1 / -1}
.bi-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.bi-note{font-size:13px;color:var(--muted);margin:10px 0 0}
@media (max-width:760px){ .bi-grid{grid-template-columns:1fr} .bi-actions .btn{flex:1 1 auto} }

/* ===== page rules (Widget page) ===== */
.pr-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.pr-row{display:grid;grid-template-columns:minmax(0,1.1fr) 104px minmax(0,2fr) 38px;gap:8px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pr-row label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 4px}
.pr-row .input{height:40px;font-size:14px}
.pr-row .iconbtn{height:40px;width:38px}
.hide-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pr-add{display:flex;gap:8px;margin-top:10px}
.pr-add .input{height:40px;font-size:14px}
.pr-add .btn{height:40px;flex:none}
.pr-h{font-size:14.5px;font-weight:700;margin:18px 0 4px}
@media (max-width:760px){
  .pr-row{grid-template-columns:1fr 92px 38px}
  .pr-row .pr-text{grid-column:1 / -1;order:3}
  .pr-row .pr-del{order:2}
}

/* analytics: five numbers */
#statCards.five{grid-template-columns:repeat(5,minmax(0,1fr))}
#statCards .stat small{padding-right:40px;line-height:1.3;min-height:32px;display:flex;align-items:center}
@media (max-width:1280px){ #statCards.five{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ #statCards.five{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* product-3: hot lead score */
.badge-score{font-weight:700}
.badge-score.hot{background:var(--hot-bg);color:var(--hot-700);border:1px solid var(--hot-line)}
.badge-score.warm{background:var(--warn-bg);color:#8A5A12;border:1px solid #F5E1B5}
.badge-score.cold{background:#F2F4F7;color:#475467;border:1px solid #E4E7EC}
.tabs .tab-hot.on,.tab.tab-hot.on{color:var(--hot-700)}
.tab.tab-hot small .i{width:12px;height:12px;vertical-align:-2px}
.score-pill{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.score-pill[hidden]{display:none}
.score-pill .i{width:13px;height:13px}
.score-pill.hot{background:var(--hot);color:#fff}
.score-pill.warm{background:var(--warn-bg);color:#8A5A12;border:1px solid #F5E1B5}
.score-pill.cold{background:#F2F4F7;color:#475467;border:1px solid #E4E7EC}
.score-pill + .sum-refresh{margin-left:6px}
.sum-card p.score-why{margin:4px 0 0;font-size:13px;color:var(--ink-2,#475467)}
.sum-card p[hidden],.qual-ans[hidden]{display:none}
.qual-ans{margin-top:6px;display:grid;gap:3px}
.qa-row{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:13px;line-height:1.35}
.qa-q{color:var(--muted,#667085)}
.qa-a{font-weight:600;color:var(--ink)}
.qa-a.none{font-weight:400;color:#98A2B3}
.list-empty.hot-locked .btn{margin-top:12px}
.list-empty.hot-locked > .i{color:var(--hot)}
.qual-list{display:grid;gap:8px;margin:4px 0 12px}
.lockchip-s{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--hot-bg);color:var(--hot-700);vertical-align:middle}
.lockchip-s[hidden]{display:none}
.lockchip-s .i{width:12px;height:12px}
@media (max-width:640px){
  .score-why{font-size:12.5px}
  .qa-row{font-size:12.5px}
}

/* product-3: phone alerts card */
.push-state{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--sunken,#F4F2ED);font-size:14px;margin:4px 0 12px}
.push-state .i{width:16px;height:16px;flex:none}
.push-state.on{background:var(--ok-bg);color:var(--ok)}
.push-state.blocked{background:var(--warn-bg);color:#8A5A12}
.push-ios{padding:10px 12px;border-radius:12px;background:var(--team-bg);color:var(--team-700);font-size:13.5px;line-height:1.45;margin:0 0 12px}
.push-ios[hidden],.push-prefs[hidden]{display:none}
.push-actions{display:flex;flex-wrap:wrap;gap:8px}
.push-actions .btn[hidden]{display:none}
.push-prefs{display:grid;gap:10px;margin-top:14px}

/* product-3: webhooks card */
.hook-events{margin-top:12px}
.hook-key{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hook-key[hidden],.hook-log[hidden]{display:none}
.hook-key .inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center}
.hook-key-v{font-size:12.5px;background:var(--sunken,#F4F2ED);padding:6px 9px;border-radius:8px;word-break:break-all;flex:1 1 100%;min-width:0;height:auto}
.hook-log{margin-top:14px}
.hook-log-h{margin-bottom:6px}
.hook-row{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.hook-row .i{width:14px;height:14px}
.hook-row.ok .i{color:var(--ok)}
.hook-row.bad .i{color:var(--err)}
.hook-row .hr-st{grid-column:2;color:var(--muted,#667085);font-size:12.5px;overflow-wrap:anywhere}
.hook-row time{grid-row:1;grid-column:3;color:var(--muted,#667085);font-size:12px;white-space:nowrap}
.hook-row .hr-ev{font-weight:600}

/* ===== truth-1: Integrations page (counter + list) and the extra price dialog ===== */
.integ-counter .ic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.integ-counter .ic-top b{display:block;font-size:22px;letter-spacing:-.01em}
.integ-counter .ic-top small{display:block;color:var(--muted,#667085);margin-top:2px;max-width:46ch}
.integ-counter .ic-bar{height:10px;border-radius:99px;background:#EEF0F3;margin-top:14px;overflow:hidden}
.integ-counter .ic-bar span{display:block;height:100%;border-radius:99px;background:var(--brand,#0F5D46);transition:width .3s}
.integ-counter.full .ic-bar span{background:#C2410C}
.integ-list{display:grid;gap:10px;margin:0 0 16px}
.integ-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line,#E8E4DC);border-radius:14px;background:#fff}
.integ-row .ir-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#F2F4F7;flex:none}
.integ-row.on .ir-ic{background:#E8F3EE;color:var(--brand,#0F5D46)}
.integ-row .ir-t{flex:1;min-width:0}
.integ-row .ir-t b{display:block}
.integ-row .ir-t small{display:block;color:var(--muted,#667085);line-height:1.35}
.integ-row .ir-st{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:#F2F4F7;color:#475467;flex:none}
.integ-row.on .ir-st{background:#E8F3EE;color:var(--brand,#0F5D46)}
.ie-price{display:flex;align-items:baseline;gap:6px;margin:6px 0 4px}
.ie-price b{font-size:30px;letter-spacing:-.02em}
.ie-price span{color:var(--muted,#667085)}
#integExtraModal .btns{flex-wrap:wrap}

/* ===== truth-1: Premium site switcher + white label mark ===== */
.site-switch{margin:4px 12px 10px}
.site-switch select{width:100%;padding:8px 10px;font-weight:600}
.site-switch .fine{display:block;margin:0 0 4px}
.site-switch-m{margin:0 0 14px}
.white-label .side .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.wl-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand,#0F5D46);color:#fff;font-weight:800;font-size:13px;flex:none}
.wl-name{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

/* wa-1: WhatsApp channel */
.badge-wa{background:#E7F8EE;color:#0E7A3D;border-color:#BFE9D0}
.event.wa-ev{max-width:92%;text-align:left;align-items:flex-start;background:#F1FBF5;border-color:#BFE9D0;color:#0E5A30}
.event.wa-ev .i{color:#128C4B;flex:none;margin-top:1px}
.event.wa-fail{background:#FEF3F2;border-color:#FECDCA;color:#912018}
.wa-tick{margin-left:6px;color:var(--muted,#667085);font-size:11.5px;white-space:nowrap}
.wa-tick.read{color:#1D8CE0}
.wa-card .integ-state.on{color:#0E7A3D}
.wa-card .integ-state.bad{color:var(--err,#B42318)}
.wa-live{display:flex;gap:10px;align-items:flex-start;background:#F1FBF5;border:1px solid #BFE9D0;border-radius:12px;padding:10px 12px;margin:4px 0 14px;font-size:13.5px}
.wa-live .i{color:#128C4B;flex:none;margin-top:2px}
.wa-live div{display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-live span{color:var(--ink-2,#475467);overflow-wrap:anywhere}
.wa-live.bad{background:#FEF3F2;border-color:#FECDCA}
.wa-live.bad .i{color:var(--err,#B42318)}
.wa-guide{border:1px solid var(--line,#EAECF0);border-radius:12px;padding:10px 14px;margin:0 0 16px;background:var(--surface,#FCFCFD)}
.wa-guide summary{cursor:pointer;font-weight:600;font-size:14px}
.wa-guide-list{margin:10px 0 6px;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.5}
.wa-step{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:14px 0;border-top:1px solid var(--line,#EAECF0)}
.wa-step > div{min-width:0}
.wa-n{width:26px;height:26px;border-radius:50%;background:#E7F8EE;color:#0E7A3D;font-weight:700;display:grid;place-items:center;font-size:13px}
.wa-step label{display:block;margin-top:10px}
.wa-hint{margin:4px 0 0;color:var(--muted,#667085);font-size:12.5px;line-height:1.4}
.wa-step .input[aria-invalid="true"]{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.15)}
.wa-copy{display:flex;gap:8px;align-items:center;margin-top:4px}
.wa-copy code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--surface-2,#F2F4F7);border-radius:8px;padding:8px 10px;font-size:12.5px}
.wa-verified{margin-top:8px}
.wa-verified.ok{color:#0E7A3D}
.wa-verified .i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.wa-test{display:grid;gap:8px;margin-top:12px}
.wa-tr{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.wa-tr div{display:flex;flex-direction:column;min-width:0}
.wa-tr span{color:var(--ink-2,#475467);overflow-wrap:anywhere}
.wa-tr.ok .i{color:var(--ok,#067647)}
.wa-tr.bad .i{color:var(--err,#B42318)}
.wa-banner div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wa-banner .btn{flex:none}

/* wiz-1: step by step WhatsApp setup */
.wa-wiz{margin-top:14px;border:1px solid var(--line,#EAECF0);border-radius:14px;padding:16px;background:#fff}
.wz-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.wz-top b{font-size:13px;color:#0E7A3D;white-space:nowrap}
.wz-bar{flex:1;height:8px;border-radius:99px;background:#EEF2F0;overflow:hidden}
.wz-bar span{display:block;height:100%;background:#25D366;border-radius:99px;transition:width .25s}
.wz-step h3{font-size:18px;margin:2px 0 8px;line-height:1.3}
.wz-step p{margin:0 0 10px;line-height:1.5}
.wz-list{margin:0 0 12px;padding-left:20px;line-height:1.55}
.wz-list li{margin:4px 0}
.wz-mock{border:1px solid #D0D5DD;border-radius:10px;overflow:hidden;margin:10px 0 14px;font-size:12.5px;max-width:420px;background:#F9FAFB}
.wz-mock-bar{display:flex;align-items:center;gap:5px;padding:6px 10px;background:#F2F4F7;border-bottom:1px solid #EAECF0;color:#475467;font-weight:600}
.wz-mock-bar i{width:8px;height:8px;border-radius:50%;background:#D0D5DD;display:inline-block}
.wz-mock-bar span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-mock-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.wz-m-row{color:#344054}
.wz-m-opt{border:1px solid #D0D5DD;border-radius:8px;padding:7px 9px;background:#fff}
.wz-m-btn{align-self:flex-start;background:#1877F2;color:#fff;border-radius:6px;padding:6px 10px;font-weight:600}
.wz-m-val{color:#667085;margin-left:6px}
.wz-m-show{color:#1877F2;font-weight:600;margin-left:6px}
.wz-m-side{display:flex;gap:10px;color:#667085;flex-wrap:wrap}
.wz-hl{outline:3px solid #25D366;outline-offset:2px}
.wz-hl-t{color:#0E7A3D;font-weight:700;text-decoration:underline}
.wz-check{min-height:18px;margin:6px 0 10px;font-size:13px;color:#475467}
.wz-check.ok{color:#0E7A3D}.wz-check.bad{color:#B42318}.wz-check.warn{color:#B54708}
.wz-numbers{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.wz-num{display:flex;gap:10px;align-items:flex-start;border:1px solid #D0D5DD;border-radius:10px;padding:10px 12px;cursor:pointer}
.wz-num:has(input:checked){border-color:#25D366;background:#F0FBF4}
.wz-num span{display:flex;flex-direction:column}.wz-num small{color:#667085}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.wz-nav #wzNext{margin-left:auto}
.wz-help{margin:12px 0 0;font-size:13px;color:#667085}
.wz-help a{font-weight:600}
.wz-hook{margin-top:12px;padding:12px;border-radius:10px;background:#FFFAEB;border:1px solid #FEDF89}
.wz-done{text-align:center;padding:10px 4px}
.wz-done-ic{width:64px;height:64px;border-radius:50%;background:#25D366;color:#fff;font-size:34px;font-weight:800;display:grid;place-items:center;margin:4px auto 12px}
.wz-done h3{font-size:20px}
.wz-live{font-weight:600;color:#475467}.wz-live.ok{color:#0E7A3D}
.wz-back-wiz{margin:10px 0 0}
@media (max-width:480px){.wa-wiz{padding:12px}.wz-step h3{font-size:17px}}
.wz-help a.wz-pulse{background:#FFFAEB;border-radius:6px;padding:2px 6px;outline:2px solid #FDB022}

/* support-widget-1: pictures from visitors in the inbox */
.m .b.has-img{padding:4px;overflow:hidden;max-width:min(320px,78%)}
.m .b.has-img .msg-img-link{display:block;line-height:0}
.m .b.has-img .msg-img{display:block;max-width:100%;width:auto;height:auto;max-height:280px;border-radius:11px;background:var(--surface-2,#f2f4f7);cursor:zoom-in}
.m .b.has-img .img-cap{display:block;padding:7px 9px 5px}
.support-cust .kv .none{color:var(--muted,#667085)}
/* support-widget-1: room at the end of each page so the support button never sits on the last control */
body.support-chat-on .page.pg::after{content:"";display:block;height:92px}

/* bughunt-1: send a picture back from the reply box */
.composer .tools .reply-photo{margin-left:0;background:transparent;color:var(--ink-2);box-shadow:none}
.composer .tools .reply-photo:hover{background:var(--sunken)}
.composer.human .tools .reply-photo{background:transparent;color:var(--team-700)}
.composer.human .tools .reply-photo:hover{background:var(--team-bg)}
.composer.test .reply-photo,.composer.is-note .reply-photo,.composer.idle .reply-photo,.composer.locked .reply-photo{display:none}
.composer.is-note .reply-att,.composer.test .reply-att{display:none}
.reply-att{display:flex;align-items:center;gap:10px;margin:0 10px 8px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--sunken)}
.reply-att[hidden]{display:none}
.reply-att img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none;background:#eee}
.reply-att span{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.35}
.composer .reply-att .btn{margin-left:0;background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.composer .reply-att .btn:hover{background:var(--sunken)}
.composer .tools .reply-photo{width:34px;padding:0;justify-content:center;flex:none}

/* bughunt-1: the reply tools never run past the reply box (narrow inbox with the details pane open) */
.composer{container-type:inline-size}
.composer .tools{flex-wrap:wrap;row-gap:6px}
@container (max-width:440px){
  .composer .tools #savedRepliesBtn > span:not(.lockb){display:none}
  .composer .tools .hint{display:none}
}
/* the support chat button sits over the bottom right corner: the details pane can scroll every control clear of it */
@media (min-width:601px){ #details{padding-bottom:96px} }
/* bughunt-1: the chat code breaks evenly instead of leaving a lone ">" on the last line */
.codebox textarea#embedCode{word-break:break-all;overflow-wrap:anywhere}
@container (max-width:400px){
  .composer .tools{gap:4px;padding-left:8px;padding-right:8px}
  .composer .tools #savedRepliesBtn{padding:0 6px}
  .composer .tools #savedRepliesBtn .lockb{font-size:0;gap:0;padding:3px 4px}
  .composer .tools .reply-photo{width:32px}
}

/* wa-photo-1: the header's second line ("Mia is answering · No contact details yet") wraps onto its own
   line when there's no room beside the badge, and long text ends with an ellipsis instead of a hard cut */
#dashboardPage .chat-head{height:auto;min-height:64px;padding-top:8px;padding-bottom:8px;flex-shrink:0} /* never squeezed by a short window */
#dashboardPage .chat-head .who small{flex-wrap:wrap;row-gap:2px;white-space:normal;overflow:hidden;min-width:0;text-overflow:clip}
#dashboardPage .chat-head #modePill{flex:0 1 auto;max-width:100%;min-width:0;overflow:hidden}
#dashboardPage .chat-head #modePill .mp-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#dashboardPage .chat-head #chatSubtitle{flex:1 1 9em;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:761px) and (max-width:1100px){
  /* a narrow chat column (laptop or tablet): the name and who is answering get the whole first row,
     the buttons and the AI / You switch move to a second row, so the words are never squeezed away */
  #dashboardPage .chat-head{flex-wrap:wrap;row-gap:8px}
  #dashboardPage .chat-head .who{flex:1 1 calc(100% - 64px)}
  #dashboardPage .chat-head .acts{margin-left:54px}
  #dashboardPage .chat-head .mode{margin-left:auto}
}

/* ===== polish-2: tablet (761 to 1023 px) inbox in two columns =====
   The menu becomes a slim icon rail, so the inbox is the conversation list plus the chat; the details
   open from the Details button as a panel (same as narrow laptops). The menu button at the top of the
   rail opens the full menu over the page. Phones (760 and under) and laptops/desktops are unchanged. */
.side-toggle,.side-scrim{display:none}
@media (min-width:761px) and (max-width:1023px){
  .app{grid-template-columns:68px 1fr}
  #dashboardPage.active{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
  .side-toggle{display:grid;place-items:center;width:44px;height:40px;margin:0 auto 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
  .side-toggle .i{width:20px;height:20px}
  body:not(.side-open) .side{padding:14px 8px 12px;align-items:center}
  body:not(.side-open) .side .logo{font-size:0;padding:0 0 12px;justify-content:center}
  body:not(.side-open) .side .logo svg{width:28px;height:28px}
  body:not(.side-open) .side .biz{margin-bottom:12px;justify-content:center}
  body:not(.side-open) .side .biz>div,
  body:not(.side-open) .side .site-switch,
  body:not(.side-open) .side .sec,
  body:not(.side-open) .side .plan-card,
  body:not(.side-open) .side .nv-new,
  body:not(.side-open) .side .lockb,
  body:not(.side-open) .side .soonb,
  body:not(.side-open) .side .help-q{display:none!important}
  body:not(.side-open) .side nav{width:100%;align-items:center}
  body:not(.side-open) .side .nv{font-size:0;width:48px;height:44px;padding:0;gap:0;justify-content:center;position:relative;margin:1px auto}
  body:not(.side-open) .side .nv .i{width:20px;height:20px}
  body:not(.side-open) .side .nv .cnt{position:absolute;top:3px;right:2px;margin:0;font-size:10px;min-width:17px;height:17px;padding:0 4px}
  body:not(.side-open) .side .side-foot{padding-top:6px;width:100%}
  body.side-open .side{position:fixed;top:0;left:0;bottom:0;width:256px;z-index:80;box-shadow:12px 0 40px rgba(20,26,36,.18)}
  body.side-open .side-toggle{margin:0 0 12px auto}
  body.side-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(20,26,36,.35);z-index:79}
}

/* polish-2: translation inside the inbox */
#dashboardPage .event.tr-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:center;text-align:center}
#dashboardPage .event.tr-head .btn{height:30px}
.m .b .tr-line{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(20,26,36,.12);font-size:.92em;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.m .b .tr-line b{font-weight:650}

/* polish-2 (button sweep): from 761 to 1280 px the chat column reaches the right edge, so the reply box
   leaves room for the support chat button in the corner and Send is never under it */
@media (min-width:761px) and (max-width:1280px){
  body.support-chat-on #dashboardPage .composer{margin-right:100px}
}

/* reply-translate: "Send in Spanish" next to Send. A switch: off by default, on = the visitor gets the reply in their language */
.composer .tools .tr-send{margin-left:0;gap:6px;background:transparent;color:var(--ink-2);box-shadow:none;border:1px solid var(--line-2);flex:none;white-space:nowrap}
.composer .tools .tr-send:hover{background:var(--sunken)}
.composer.human .tools .tr-send{background:transparent;color:var(--team-700)}
.composer.human .tools .tr-send:hover{background:var(--team-bg)}
.composer .tools .tr-send[hidden],.composer.test .tr-send,.composer.is-note .tr-send,.composer.idle .tr-send,.composer.locked .tr-send{display:none}
.composer .tools .tr-send .trs-sw{position:relative;width:26px;height:15px;border-radius:99px;background:var(--line-2);flex:none;transition:background .15s}
.composer .tools .tr-send .trs-sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,26,36,.25);transition:transform .15s}
.composer .tools .tr-send.on,.composer.human .tools .tr-send.on{background:var(--team-bg);color:var(--team-700);border-color:var(--team-line)}
.composer .tools .tr-send.on .trs-sw{background:var(--team)}
.composer .tools .tr-send.on .trs-sw::after{transform:translateX(11px)}
.composer .tools .tr-send:focus-visible{outline:2px solid var(--team);outline-offset:2px}
#sendBtn.busy-tr{opacity:.7;cursor:progress}
.m.team .b .tr-line{color:rgba(255,255,255,.9);border-top-color:rgba(255,255,255,.32)}
.composer .tools .tr-send .trs-short{display:none}
@container (max-width:440px){
  .composer .tools .tr-send{padding:0 8px;gap:5px}
  .composer .tools .tr-send .trs-pre,.composer .tools .tr-send > svg{display:none}
  .composer .tools .tr-send .trs-short{display:inline}
}

/* sweep-1013: with "Send in Spanish" showing, the tools go compact earlier so Send stays on the same row (was wrapping at 1366 and 1440) */
@container (max-width:600px){
  .composer .tools:has(.tr-send:not([hidden])) #savedRepliesBtn > span:not(.lockb){display:none}
  .composer .tools .tr-send{padding:0 8px;gap:5px}
  .composer .tools .tr-send .trs-pre,.composer .tools .tr-send > svg{display:none}
  .composer .tools .tr-send .trs-short{display:inline}
}
@container (max-width:440px){
  .composer .tools:has(.tr-send:not([hidden])){gap:4px;padding-left:8px;padding-right:8px}
}

/* build-1014: Free plan accounts (Saved replies locked, with its plan badge): with "Send in Spanish" showing, the tools go
   compact a little earlier and the badge becomes a lock dot on the icon, so Send stays on the same row at 1280 and up */
@container (max-width:680px){
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) #savedRepliesBtn > span:not(.lockb){display:none}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) #savedRepliesBtn{position:relative;padding:0 9px}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) #savedRepliesBtn .lockb{position:absolute;top:-6px;right:-6px;margin:0;font-size:0;gap:0;padding:2px;line-height:0;box-shadow:0 0 0 2px var(--surface)}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) #savedRepliesBtn .lockb .i{width:9px;height:9px}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) .tr-send{padding:0 8px;gap:5px}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) .tr-send .trs-pre,.composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) .tr-send > svg{display:none}
  .composer .tools:has(.tr-send:not([hidden])):has(#savedRepliesBtn .lockb:not([hidden])) .tr-send .trs-short{display:inline}
}

/* build-1014: "Load more" at the end of the conversation list */
.convs .list-more{display:flex;margin:10px auto 16px;min-height:36px;padding:0 16px;color:var(--brand-700);font-weight:600}