/* Tail Lift Media client inbox. The look is the plan's "After" phones: cream ground, one accent, Inter. Nothing under 12px. */
@font-face{font-family:Inter;src:url(fonts/inter-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#9E5B5B;
  --bg:#FBF7F4;--ink:#2A2220;--soft:#74655F;--line:#EADFD9;--card:#FFFFFF;
  --blush:color-mix(in srgb,var(--accent) 13%,#fff);
  --me:#2A2220;--on-me:#FBF7F4;
  --sms:#5E6670;--wa:#1E7B47;--ig:#B0306A;--ms:#2D6BE0;--lead:var(--accent);
  --red:#8B2B24;--redbg:#F6DEDA;--green:#1F6B3A;--greenbg:#E3F2E8;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%;
  overflow-x:hidden;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;text-align:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.small{font-size:13px}.soft{color:var(--soft)}.center{text-align:center}
.wrapany{overflow-wrap:anywhere}

/* ---- shell ---- */
#app{height:100dvh;display:flex;min-width:0}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;height:100dvh;background:var(--bg)}
.pane.list{flex:1 1 auto;width:100%}
.pane.main{flex:1 1 auto;width:100%;display:none}
#app[data-view="thread"] .pane.list,#app[data-view="settings"] .pane.list{display:none}
#app[data-view="thread"] .pane.main,#app[data-view="settings"] .pane.main{display:flex}
.safe-t{padding-top:env(safe-area-inset-top,0px)}
.safe-b{padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---- buttons and fields ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:15px;text-align:center}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.acc{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn.ghost{background:transparent}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.btn.wide{width:100%}
.ibtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.ibtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld>span{font-size:13px;font-weight:600;color:var(--soft)}
.inp{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:16px}
textarea.inp{min-height:96px;resize:vertical;line-height:1.4}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.err{color:var(--red);font-size:14px;min-height:20px;margin:-4px 0 10px}
.err.ok{color:var(--green)}

/* ---- sign in ---- */
.sign{flex:1;min-width:0;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.sign .card{width:100%;max-width:380px}
.sign h1{font-size:28px;letter-spacing:-.02em;margin-bottom:6px}
.sign .lead{color:var(--soft);margin-bottom:22px}
.sign form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
.sign .code{font-size:26px;letter-spacing:.35em;text-align:center;font-weight:700}
.brandmark{width:44px;height:44px;border-radius:12px;margin-bottom:18px;display:block}
.sign .links{display:flex;justify-content:space-between;margin-top:14px}
.linkbtn{color:var(--accent);font-weight:600;font-size:14px;min-height:44px;padding:0 4px;display:inline-flex;align-items:center}

/* ---- list ---- */
.top{display:flex;align-items:center;gap:8px;padding:10px 12px 0 16px}
.top .who{flex:1;min-width:0}
.top .who small{display:block;font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top h1{font-size:24px;letter-spacing:-.02em;line-height:1.15}
.listhead{padding-bottom:10px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:0 14px;border-radius:999px;background:var(--blush);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--ink);color:var(--bg)}
.chip b{font-weight:700}
.search{padding:10px 16px 0;position:relative}
.search .inp{min-height:44px;border-radius:999px;padding-left:16px}
.rows{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:start;width:100%;min-height:64px}
.row:hover{background:color-mix(in srgb,var(--blush) 50%,transparent)}
.row.sel{background:var(--blush)}
.av{width:42px;height:42px;border-radius:50%;background:var(--blush);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--accent);flex:none}
.row .who{font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.row .who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.row .msg{color:var(--soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.row.unread .msg{color:var(--ink);font-weight:600}
.row .sub{font-size:13px;color:var(--soft);margin-top:2px}
.row .t{font-size:13px;color:var(--soft);text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;white-space:nowrap}
.row.unread .t{color:var(--ink);font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.ch{font-size:12px;font-weight:700;padding:1px 7px;border-radius:5px;color:#fff;line-height:1.5}
.ch.sms{background:var(--sms)}.ch.whatsapp{background:var(--wa)}.ch.instagram{background:var(--ig)}.ch.messenger{background:var(--ms)}.ch.lead{background:var(--lead)}.ch.note{background:var(--soft)}
.tag{font-size:12px;font-weight:700;padding:1px 7px;border-radius:5px;line-height:1.5}
.tag.out{color:var(--red);background:var(--redbg)}
.tag.booked{color:var(--green);background:var(--greenbg)}
.empty{padding:48px 24px;text-align:center;color:var(--soft)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* ---- conversation ---- */
.thead{display:flex;align-items:center;gap:4px;padding:8px 8px 0 4px}
.thead .back{display:inline-flex;align-items:center;min-height:44px;padding:0 10px 0 6px;color:var(--accent);font-weight:600;gap:2px}
.thead .back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.thead .sp{flex:1}
.cinfo{padding:2px 16px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cinfo h2{font-size:22px;letter-spacing:-.02em;line-height:1.2;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cinfo .sub{font-size:14px;color:var(--soft)}
.cchips{display:flex;gap:8px;flex-wrap:wrap}
.cchip{min-height:40px;padding:0 14px;border-radius:999px;background:var(--blush);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.cchip.on{background:var(--green);color:#fff}
.convo{flex:1;overflow-y:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.leadcard{background:var(--blush);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-size:14px;overflow-wrap:anywhere}
.leadcard b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.bub{max-width:86%;padding:9px 13px;border-radius:16px;font-size:15px;overflow-wrap:anywhere;white-space:pre-wrap}
.bub.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.bub.me{background:var(--me);color:var(--on-me);align-self:flex-end;border-bottom-right-radius:5px}
.bub.failed{background:var(--redbg);color:var(--red)}
.meta{font-size:13px;color:var(--soft);align-self:flex-end;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.meta.l{align-self:flex-start;justify-content:flex-start}
.meta .bad{color:var(--red);font-weight:600}
.meta .del{color:var(--soft);text-decoration:underline;min-height:32px;padding:0 4px}
.sys{font-size:13px;color:var(--soft);text-align:center;padding:2px 12px}
.day{font-size:13px;color:var(--soft);text-align:center;padding:6px 0 0;font-weight:600}
.compose{border-top:1px solid var(--line);padding:10px 12px;background:var(--bg)}
.compose form{display:flex;gap:8px;align-items:flex-end}
.compose textarea{flex:1;min-height:44px;max-height:140px;border:1px solid var(--line);border-radius:22px;padding:10px 16px;background:#fff;resize:none;font-size:16px;line-height:1.35}
.compose .send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.compose .send:disabled{opacity:.45}
.compose .send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.compose .note{font-size:13px;color:var(--soft);margin-top:6px;padding:0 6px}
.closed{background:var(--redbg);color:var(--red);border-radius:14px;padding:12px 14px;font-size:14px}
.closed b{display:block}

/* ---- menu sheet and confirm ---- */
.scrim{position:fixed;inset:0;background:rgba(42,34,32,.45);z-index:20;display:flex}
.scrim.right{justify-content:flex-end}
.scrim.mid{align-items:center;justify-content:center;padding:20px}
.sheet{background:var(--bg);width:min(340px,88vw);height:100%;display:flex;flex-direction:column;padding:16px 16px 12px;gap:6px;overflow-y:auto}
.sheet h3{font-size:20px;letter-spacing:-.01em}
.sheet .who{font-size:14px;color:var(--soft);margin-bottom:10px;overflow-wrap:anywhere}
.sheet .mi{display:flex;align-items:center;min-height:48px;padding:0 6px;font-weight:600;border-top:1px solid var(--line);width:100%}
.sheet .grow{flex:1}
.sheet .foot{font-size:12px;color:var(--soft);text-align:center;padding-top:14px}
.dlg{background:var(--card);border-radius:20px;padding:22px;width:min(380px,100%);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dlg h3{font-size:19px;margin-bottom:8px}
.dlg p{color:var(--soft);margin-bottom:18px}
.dlg .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
#toasts{position:fixed;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:40;pointer-events:none;padding:0 16px}
.toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;max-width:100%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.bad{background:var(--red)}

/* ---- settings ---- */
.sbody{flex:1;overflow-y:auto;padding:4px 16px 40px;-webkit-overflow-scrolling:touch}
.sbody .wrapin{max-width:640px}
.sec{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:14px}
.sec h3{font-size:17px;margin-bottom:4px}
.sec .lede{font-size:14px;color:var(--soft);margin-bottom:14px}
.cnt{font-size:13px;color:var(--soft);display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.cnt.over{color:var(--red);font-weight:600}
.sw{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px}
.sw .lbl{font-weight:600}
.sw .lbl small{display:block;font-weight:400;font-size:13px;color:var(--soft)}
.sw button.tog{width:54px;height:32px;border-radius:999px;background:#CFC3BD;position:relative;flex:none;transition:background .15s}
.sw button.tog::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .15s}
.sw button.tog[aria-checked="true"]{background:var(--green)}
.sw button.tog[aria-checked="true"]::after{transform:translateX(22px)}
.prev{background:var(--blush);border-radius:14px;padding:10px 12px;margin-top:10px;font-size:14px;overflow-wrap:anywhere}
.prev b{display:block;font-size:13px;color:var(--soft);font-weight:600}
.prev+.prev{margin-top:8px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.set-row:first-of-type{border-top:0}
.pill{font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px}
.pill.yes{color:var(--green);background:var(--greenbg)}
.pill.no{color:var(--red);background:var(--redbg)}
.urow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.urow:first-of-type{border-top:0}
.urow .n{min-width:0}.urow .n b{display:block}.urow .n span{font-size:13px;color:var(--soft);overflow-wrap:anywhere}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.emptymain{display:none}

/* ---- wide screens: list on the left, the conversation beside it ---- */
@media (min-width:900px){
  #app[data-view] .pane.list{display:flex;flex:0 0 380px;width:380px;border-right:1px solid var(--line)}
  #app[data-view] .pane.main{display:flex;flex:1 1 auto;width:auto;background:var(--bg)}
  .emptymain{display:flex;flex:1;align-items:center;justify-content:center;color:var(--soft);text-align:center;padding:24px}
  .thead .back.phoneonly{display:none}
  .convo{padding:18px 28px 10px}
  .cinfo{padding:2px 28px 14px}
  .compose{padding:12px 28px}
  .bub{max-width:70%}
  .sbody{padding:4px 28px 40px}
  .thead{padding-left:20px}
}