/* TripChow Communications Hub UI (build task T8), part 2 of 3: the audience builder, Compose (steps, channel tiles, content editor) and the channel previews
   (push lock screen, SMS bubble, WhatsApp bubble, in-app card, e-mail frame, lint list). Same conventions as 92-comms-core.css (every rule under body.tcv2 .tcc). */
@media screen{
/* ---- audience builder ---- */
body.tcv2 .tcc .bld{display:grid;grid-template-columns:270px minmax(0,1fr) 360px;gap:14px;align-items:start}
body.tcv2 .tcc .bld.compact{grid-template-columns:minmax(0,1fr) 360px}
body.tcv2 .tcc .cat .cb{padding:12px 14px}
body.tcv2 .tcc .cat .cg{margin-top:12px}
body.tcv2 .tcc .cat .cgl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
body.tcv2 .tcc .cat .cgc{display:flex;flex-wrap:wrap;gap:6px}
body.tcv2 .tcc .grp{border:1.5px solid var(--line);border-radius:14px;background:#fff;margin-top:10px;padding:10px 12px}
body.tcv2 .tcc .grp.root{border:0;padding:0;margin-top:0;background:transparent}
body.tcv2 .tcc .grp.not{border:1.5px dashed #F87171;background:#FFFBFB}
body.tcv2 .tcc .grp:not(.root):not(.not){border-color:var(--adm);background:#F7FCF9}
body.tcv2 .tcc .ghead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
body.tcv2 .tcc .ghead .segc{flex:none;max-width:100%;overflow-x:auto}
body.tcv2 .tcc .cat .chip{white-space:normal;text-align:left;max-width:100%;line-height:1.3}
body.tcv2 .tcc .ghead .btn{margin-left:auto}
body.tcv2 .tcc .gtag{font-size:11.5px;font-weight:800;color:var(--red);background:var(--redbg);border-radius:999px;padding:3px 10px}
body.tcv2 .tcc .gfoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
body.tcv2 .tcc .gempty{font-size:12.5px;font-weight:600;color:var(--mut);padding:10px 2px}
body.tcv2 .tcc .gbody>.leaf+.leaf,body.tcv2 .tcc .gbody>.leaf+.grp,body.tcv2 .tcc .gbody>.grp+.leaf{margin-top:8px}
body.tcv2 .tcc .leaf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px}
body.tcv2 .tcc .leaf.inc{border-color:#FDBA74;background:#FFFBF5}
body.tcv2 .tcc .leaf .lbl{font-size:12px;font-weight:800;border:1.5px solid var(--line);border-radius:999px;padding:4px 11px;background:#fff;max-width:100%}
body.tcv2 .tcc .leaf .opsel{width:auto;min-width:120px;max-width:200px}
body.tcv2 .tcc .leaf .opfix{font-size:12px;font-weight:700;color:var(--mut)}
body.tcv2 .tcc .leaf .val{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:110px}
body.tcv2 .tcc .leaf .val .inp,body.tcv2 .tcc .leaf .val .sel{width:auto;min-width:90px;max-width:100%}
body.tcv2 .tcc .leaf .vone{display:inline-flex;gap:6px;align-items:center}
body.tcv2 .tcc .leaf .vpair{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
body.tcv2 .tcc .leaf .vobj{display:flex;flex-wrap:wrap;gap:8px}
body.tcv2 .tcc .leaf .vf{display:flex;flex-direction:column;gap:3px}
body.tcv2 .tcc .leaf .vchips{display:flex;flex-wrap:wrap;gap:6px}
body.tcv2 .tcc .leaf>.btn.ico{margin-left:auto}
body.tcv2 .tcc .leaf .need{flex-basis:100%;font-size:11.5px;font-weight:800;color:#C2410C}
body.tcv2 .tcc .excl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.tcv2 .tcc .excl .chip .inp{width:64px;min-height:26px;padding:2px 6px;margin:0 2px}
body.tcv2 .tcc .a11y{border:0;background:none;padding:0;cursor:pointer;color:inherit;display:inline-flex}
body.tcv2 .tcc .bigc{display:flex;align-items:baseline;gap:10px}
body.tcv2 .tcc .bigc b{font-size:34px;font-weight:800;line-height:1.1}
body.tcv2 .tcc .bigc span{font-size:13px;font-weight:700;color:var(--mut)}
body.tcv2 .tcc .bigc.stale b{opacity:.5}
body.tcv2 .tcc .reach{margin-top:12px}
body.tcv2 .tcc .rtot{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;padding:6px 0;border-top:1px solid var(--line)}
body.tcv2 .tcc .rtot b{font-size:16px}
body.tcv2 .tcc .rtot.ok b{color:var(--ok)}
body.tcv2 .tcc .rrow{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;font-weight:700}
body.tcv2 .tcc .rrow .rl{display:flex;gap:8px;align-items:center}
body.tcv2 .tcc .rrow .bar{grid-column:1/-1}
body.tcv2 .tcc .rrow .rwhy{grid-column:1/-1;font-size:11.5px;font-weight:600;color:var(--mut)}
body.tcv2 .tcc .pick{margin-top:10px;max-height:50vh;overflow:auto;display:grid;gap:6px}
body.tcv2 .tcc .prow{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;font-family:inherit;font-size:13px;min-height:44px}
body.tcv2 .tcc .prow:hover{border-color:var(--adm);background:#F7FCF9}
body.tcv2 .tcc .prow small{color:var(--mut);font-weight:600}
/* ---- compose ---- */
body.tcv2 .tcc .cmp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
body.tcv2 .tcc .cmp-l{position:sticky;top:12px}
body.tcv2 .tcc .stp{display:flex;flex-direction:column;gap:8px}
body.tcv2 .tcc .si{display:flex;gap:10px;align-items:center;text-align:left;border:1.5px solid transparent;border-radius:14px;background:transparent;padding:10px 12px;cursor:pointer;font-family:inherit;min-height:52px}
body.tcv2 .tcc .si:hover{background:#fff}
body.tcv2 .tcc .si.on{border-color:var(--adm);background:#fff}
body.tcv2 .tcc .si .sno{width:28px;height:28px;border-radius:50%;background:#E5E7EB;color:#475569;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
body.tcv2 .tcc .si.on .sno{background:var(--adm);color:#fff}
body.tcv2 .tcc .si.done .sno{background:#fff;border:2px solid var(--ok);color:var(--ok)}
body.tcv2 .tcc .si .sno .ic{width:14px;height:14px}
body.tcv2 .tcc .si .stx{display:flex;flex-direction:column;min-width:0}
body.tcv2 .tcc .si .stx b{font-size:13px;font-weight:800}
body.tcv2 .tcc .si .stx small{font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tcv2 .tcc .stpn{margin-top:6px}
body.tcv2 .tcc .ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
body.tcv2 .tcc .ctile{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-family:inherit;min-height:52px}
body.tcv2 .tcc .ctile.on{border-color:var(--adm);background:#F7FCF9}
body.tcv2 .tcc .ctile.off{opacity:.65}
body.tcv2 .tcc .ctile .ct{display:flex;flex-direction:column}
body.tcv2 .tcc .ctile .ct b{font-size:13px;font-weight:800}
body.tcv2 .tcc .ctile .ct small{font-size:11px;font-weight:700;color:var(--mut)}
body.tcv2 .tcc .cmode{margin-top:14px}
body.tcv2 .tcc .ord{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body.tcv2 .tcc .oi{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:3px 6px 3px 12px;font-size:12.5px;font-weight:800}
body.tcv2 .tcc .oi small{font-weight:600;color:var(--mut)}
body.tcv2 .tcc .ctabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 14px;overflow-x:auto}
body.tcv2 .tcc .ctabs button{display:flex;gap:7px;align-items:center;padding:12px 14px;font-size:13px;font-weight:800;color:var(--mut);border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;white-space:nowrap;font-family:inherit;min-height:44px}
body.tcv2 .tcc .ctabs button.on{color:var(--adm);border-bottom-color:var(--adm)}
body.tcv2 .tcc .ctabs .ic{width:15px;height:15px}
body.tcv2 .tcc .cc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px}
body.tcv2 .tcc .cc-r .fl{margin-bottom:8px}
body.tcv2 .tcc .tsend{margin-top:14px;display:flex;flex-direction:column;gap:8px}
body.tcv2 .tcc .tsend .btn{align-self:flex-start}
body.tcv2 .tcc .tr{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600;margin-top:4px}
body.tcv2 .tcc .tr.bad{color:var(--red)}
body.tcv2 .tcc .ph{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
body.tcv2 .tcc .ph .chip{font-size:11px;color:#6D28D9;background:#F5F3FF;border-color:#DDD6FE}
body.tcv2 .tcc .ph .sel{width:auto;min-width:110px}
body.tcv2 .tcc .cwarn{color:#B45309!important}
body.tcv2 .tcc .cerr{color:var(--red)!important}
body.tcv2 .tcc .fl em.cwarn,body.tcv2 .tcc .fl em.cerr{font-weight:800}
body.tcv2 .tcc .pvinfo{font-size:12px;font-weight:700;color:var(--mut);margin-top:8px}
body.tcv2 .tcc .okbadge{width:44px;height:44px;border-radius:14px;background:var(--okbg);color:var(--ok);display:flex;align-items:center;justify-content:center;flex:none}
body.tcv2 .tcc .okbadge .ic{width:22px;height:22px}
/* ---- channel previews ---- */
body.tcv2 .tcc .pv-lock{background:#0F3D2E;border-radius:22px;padding:20px 16px 16px;text-align:center;color:#fff}
body.tcv2 .tcc .pv-time{font-size:44px;font-weight:300;line-height:1.1}
body.tcv2 .tcc .pv-day{font-size:13px;font-weight:600;opacity:.85;margin-bottom:14px}
body.tcv2 .tcc .pv-notif{display:flex;gap:10px;align-items:flex-start;text-align:left;background:rgba(255,255,255,.96);color:#111;border-radius:16px;padding:10px 12px}
body.tcv2 .tcc .pv-app{width:32px;height:32px;border-radius:9px;background:var(--adm);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
body.tcv2 .tcc .pv-tx{display:flex;flex-direction:column;min-width:0;flex:1}
body.tcv2 .tcc .pv-tx b{font-size:13px;font-weight:800}
body.tcv2 .tcc .pv-tx span{font-size:12.5px;font-weight:500;line-height:1.35;word-break:break-word}
body.tcv2 .tcc .pv-notif em{font-size:10.5px;color:#888;font-style:normal}
body.tcv2 .tcc .pv-sms,body.tcv2 .tcc .pv-wa{padding:6px 0}
body.tcv2 .tcc .pv-bub{display:inline-block;max-width:92%;background:#E5E7EB;color:#111;border-radius:16px 16px 16px 4px;padding:10px 13px;font-size:13px;font-weight:500;line-height:1.4;word-break:break-word}
body.tcv2 .tcc .pv-wa .pv-bub{background:#DCF8C6;border-radius:12px 12px 12px 4px}
body.tcv2 .tcc .pv-wa .pv-bub em{display:block;font-size:10.5px;color:#4B7F52;font-style:normal;margin-top:4px;font-weight:700}
body.tcv2 .tcc .pv-inapp{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff}
body.tcv2 .tcc .pv-email{display:flex;flex-direction:column;gap:8px}
body.tcv2 .tcc .pv-esub{display:flex;flex-direction:column}
body.tcv2 .tcc .pv-etabs{align-self:flex-start;flex-wrap:wrap}
body.tcv2 .tcc .pv-eframe{overflow:auto;border:1.5px solid var(--line);border-radius:12px;background:#F3F4F6;padding:8px;text-align:center}
body.tcv2 .tcc .pv-eframe iframe{display:inline-block}
body.tcv2 .tcc .pv-emailp{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff}
body.tcv2 .tcc .pv-ebody{margin-top:10px;font-size:13px;line-height:1.5}
body.tcv2 .tcc ul.lint{display:grid;gap:8px;margin-top:8px}
body.tcv2 .tcc ul.lint li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;font-weight:600}
body.tcv2 .tcc ul.lint li code,body.tcv2 .tcc .tbl code{font-size:11px;background:rgba(0,0,0,.06);padding:0 4px;border-radius:4px}
body.tcv2 .tcc ul.chk{display:grid;gap:4px;margin-bottom:10px}
body.tcv2 .tcc ul.chk li{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700}
body.tcv2 .tcc ul.chk .dk{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#16A34A;color:#fff;flex:none}
body.tcv2 .tcc ul.chk .dk .ic{width:11px;height:11px}
body.tcv2 .tcc ul.chk li.warn .dk{background:var(--amber)}
body.tcv2 .tcc ul.chk li.fail .dk,body.tcv2 .tcc ul.chk li.error .dk{background:#DC2626}
@media (max-width:1280px){
body.tcv2 .tcc .bld{grid-template-columns:minmax(0,1fr) 340px}
body.tcv2 .tcc .bld .bcat{grid-column:1/-1;order:3}
}
@media (max-width:1000px){
body.tcv2 .tcc .cmp{grid-template-columns:minmax(0,1fr)}
body.tcv2 .tcc .cmp-l{position:static}
body.tcv2 .tcc .stp{flex-direction:row;overflow-x:auto;padding-bottom:4px}
body.tcv2 .tcc .si{min-width:0;flex:1 0 auto;padding:8px 10px}
body.tcv2 .tcc .si .stx small{display:none}
body.tcv2 .tcc .stpn{display:none}
body.tcv2 .tcc .cc,body.tcv2 .tcc .bld,body.tcv2 .tcc .bld.compact{grid-template-columns:minmax(0,1fr)}
body.tcv2 .tcc .bld .bcat{order:0}
}
@media (max-width:760px){
body.tcv2 .tcc .leaf{padding:8px}
body.tcv2 .tcc .leaf .opsel{max-width:none;flex:1}
body.tcv2 .tcc .leaf .val{flex-basis:100%}
body.tcv2 .tcc .ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}
body.tcv2 .tcc .pv-time{font-size:36px}
body.tcv2 .tcc .bigc b{font-size:28px}
}
}