/* Texts view, texting setup, phone-app install banner. Colors only through tokens (light and dark). */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tx-inbox{min-height:min(640px,calc(100vh - 220px));min-height:min(640px,calc(100dvh - 220px))}
.tx-list{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.tx-list .threads{border-right:0;flex:1;max-height:none;min-height:0}
.tx-lhead{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tx-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--surface);min-height:40px}
.tx-search input{border:0;background:none;color:var(--ink);flex:1;min-width:0;padding:8px 0;font:inherit}
.tx-search input:focus{outline:none}
.tx-search:focus-within{outline:2px solid var(--lake);outline-offset:1px}
.tx-lhead .chips button{min-height:36px}
.tx-threads .th{min-height:64px;align-items:flex-start;color:var(--ink)}
.tx-threads .th:focus-visible,.tx-tpl:focus-visible,.tx-prov:focus-visible,.tx-pick:focus-visible{outline:2px solid var(--lake);outline-offset:-2px}
.tx-threads .th .t{font-weight:650}
.tx-threads .th .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.tx-threads .th .s{display:block}
.tx-acts a.btn{text-decoration:none}
.tx-note summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px;list-style:none}
.tx-note summary::-webkit-details-marker{display:none}
.tx-note summary::after{content:"+";margin-left:auto;font-size:1rem}
.tx-note[open] summary::after{content:"\2212"}
.tx-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tx-when{font-size:.75rem;font-weight:500;color:var(--muted);flex:none;margin-left:auto}
.unread .tx-when{color:var(--lake);font-weight:700}
.tx-threads .unread .t::after{margin-left:6px}
.tx-mini{font-size:.75rem;margin-top:4px;display:inline-block;align-self:flex-start}
.tx-pad{padding:16px}
.tx-convo{min-height:0}
.tx-none{margin:auto;text-align:center;color:var(--muted);padding:40px 20px}
.tx-big{width:40px;height:40px;opacity:.5}
.tx-ch{flex-wrap:nowrap!important;gap:10px}
.tx-back{display:none;flex:none;width:44px;height:44px}
.tx-who{flex:1;min-width:0}
.tx-who .tx-nm{font-weight:700;display:block}
.tx-num{font-size:.7813rem;color:var(--muted);text-decoration:none}
.tx-num:hover{color:var(--lake);text-decoration:underline}
.tx-acts{display:flex;gap:6px;flex:none}
.tx-acts .btn{min-height:36px}
.tx-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line);font-size:.8125rem;background:var(--sunk)}
.tx-banner.tx-bad{background:var(--eye-soft);color:var(--ink)}
.tx-banner .ico{width:18px;height:18px;color:var(--eye)}
.tx-small{font-size:.7813rem}
.tx-msgs{max-height:none;min-height:240px}
.tx-day{align-self:center;font-size:.75rem;font-weight:600;color:var(--muted);padding:6px 0 2px}
.msg .tx-body{white-space:pre-wrap;font-size:.9063rem;line-height:1.45}
.msg.tx-failed{opacity:.85;outline:1px solid var(--eye);outline-offset:1px}
.tx-err{font-size:.75rem;color:var(--eye);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msg.out .tx-err{color:var(--lake-ink);font-weight:600}
.tx-media{display:inline-flex;gap:6px;align-items:center;margin-top:6px;color:inherit;font-weight:600}
.tx-composer textarea{font:inherit;color:var(--ink);min-height:48px}
.tx-composer textarea:focus{outline:2px solid var(--lake);outline-offset:1px}
.tx-composer .btn{min-height:40px}
.tx-count{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tx-count.tx-warn{color:var(--amber);font-weight:600}
.tx-prev{border:1px dashed var(--line);border-radius:8px;padding:8px 10px;font-size:.8438rem;background:var(--sunk)}
.tx-prev .eyebrow{margin-bottom:2px}
/* template picker */
.tx-tplpop{position:fixed;z-index:80;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));margin-inline:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px));max-width:560px;max-height:min(70vh,560px);max-height:min(70dvh,560px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.tx-tplhead{display:flex;gap:8px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}
.tx-tplhead .grow{flex:1}
.tx-tplhead .iconbtn{width:40px;height:40px}
.tx-tplbody{overflow-y:auto;padding:6px 10px 12px}
.tx-cat{margin:12px 2px 6px}
.tx-tpl{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 12px;margin-bottom:6px;min-height:44px;cursor:pointer}
.tx-tpl:hover{border-color:var(--lake);background:var(--lake-soft)}
.tx-tpl span{font-size:.7813rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* new text */
.tx-new{display:flex;flex-direction:column;gap:10px}
.tx-new .tx-composer{border:1px solid var(--line);border-radius:10px}
.tx-picks{max-height:220px;overflow-y:auto}
.tx-pick{width:100%;text-align:left;border:0;background:none;color:var(--ink);min-height:48px;cursor:pointer;border-radius:8px}
.tx-pick:hover{background:var(--sunk)}
/* setup */
.tx-setup{display:flex;flex-direction:column;gap:14px}
.tx-note p{margin:6px 0 0;font-size:.8438rem;line-height:1.55}
.tx-note .eyebrow .ico,.tx-alerts .eyebrow .ico{width:14px;height:14px;vertical-align:-2px}
.tx-lbl{font-size:.7813rem;font-weight:600;color:var(--muted)}
.tx-provs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tx-prov{min-height:48px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font-weight:650;cursor:pointer}
.tx-prov[aria-checked="true"]{border-color:var(--lake);background:var(--lake-soft);box-shadow:inset 0 0 0 1px var(--lake)}
.tx-steps{margin:8px 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:.8438rem;line-height:1.5}
.tx-copy{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}
.tx-copy code{font-family:var(--f-mono);font-size:.75rem;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:4px 6px;overflow-wrap:anywhere;max-width:100%}
.tx-setup .field input,.tx-setup .field select{min-height:42px}
.tx-setup .sw{width:44px;height:26px}
.tx-setup .sw::after{width:20px;height:20px}
.tx-setup .sw[aria-checked="true"]::after{transform:translateX(18px)}
.tx-test{display:flex;gap:8px;flex-wrap:wrap}
.tx-test .input{flex:1;min-width:180px;min-height:42px}
.tx-alerts{display:flex;flex-direction:column;gap:12px}
.tx-alerts p{margin:6px 0 10px}
.btn:focus-visible,.iconbtn:focus-visible,.sw:focus-visible,.chips button:focus-visible{outline:2px solid var(--lake);outline-offset:2px}
/* install banner */
/* Centered with left/right and auto margins, not a translate: the slide-in animation writes its own transform. */
.pw-banner{position:fixed;z-index:60;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));margin-inline:auto;max-width:520px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px 10px 10px 12px}
.pw-banner img{border-radius:10px;flex:none}
.pw-txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.8125rem;line-height:1.35}
.pw-txt span{color:var(--muted);font-size:.75rem}
.pw-banner .btn{min-height:44px}
.pw-banner .iconbtn{width:44px;height:44px;flex:none}
.pw-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;line-height:1.5}
@media (max-width:860px){
  .tx-back{display:grid}
  .tx-inbox{min-height:calc(100vh - 190px);min-height:calc(100dvh - 190px);border-radius:10px}
  .tx-list{border-right:0}
  .tx-msgs{min-height:calc(100vh - 380px);min-height:calc(100dvh - 380px)}
  /* An open conversation fills the screen, like Messages: header on top, messages, composer pinned at the bottom. */
  .tx-inbox.open .tx-convo{position:fixed;inset:0;z-index:35;background:var(--surface);display:flex;flex-direction:column;
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  .tx-inbox.open .tx-msgs{flex:1;min-height:0;max-height:none;overflow-y:auto}
  .tx-inbox.open .tx-composer{flex:none}
  .tx-inbox.open .tx-ch{padding-top:8px}
  .pw-banner{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .tx-tplpop{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  .hide-xs{display:none}
  .tx-acts .btn{padding:6px 10px;min-width:40px;justify-content:center}
  .tx-provs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tx-ch{padding:10px 10px!important}
}