/* Help & support panel (ui_v2/_help_panel.html, help_v2.js) + the nav footer's Help count.
   Uses shell.css tokens only (loaded on native and bridged pages). Owner rules: status = dot +
   word (no pills), counts = plain mono numbers, no accent edges, long text wraps. */

/* Nav footer "Help" count: plain magenta mono number, not a pill. */
.v2-nav a .help-count,.v2-sheet a .help-count{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--brand-300)}

.v2p.hlp .v2p-head{align-items:center}
.v2p.hlp .hlp-back{order:-1;flex:none}
.v2p.hlp .v2p-body section{gap:14px}

/* status: dot + coloured word */
.hlp-st{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.hlp-st .dot{width:8px;height:8px;border-radius:50%;flex:none}
.hlp-st.i{color:var(--brand-deep)}.hlp-st.i .dot{background:var(--brand)}
.hlp-st.a{color:var(--warn-fg)}.hlp-st.a .dot{background:var(--warn-dot)}
.hlp-st.n{color:var(--na-fg)}.hlp-st.n .dot{background:#C2C8D0}
.hlp-urg{color:var(--crit-fg);font-weight:600}

/* list */
.hlp-groups{display:flex;flex-direction:column;gap:10px}
.hlp-sec{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.hlp-sec .n{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted)}
.hlp-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.hlp-list li + li{border-top:1px solid var(--line-soft)}
.hlp-row{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;min-height:64px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.hlp-row:hover{background:#F8F9FB}
.hlp-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hlp-row .l1{display:flex;gap:14px;align-items:flex-start;width:100%}
.hlp-row .m{flex:1;min-width:0;font-size:14.5px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hlp-row.un .m{font-weight:600}
.hlp-row .when{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap;padding-top:2px}
.hlp-row .l2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.hlp-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--text);background:#F8F9FB;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.hlp-fallback{margin:4px 0 0;font-size:13px;color:var(--muted)}
.hlp-fallback a{color:var(--brand-deep);font-weight:600}

/* conversation */
.hlp-tstat{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.hlp-msgs{display:flex;flex-direction:column;gap:12px}
.hlp-mg{max-width:84%;border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.hlp-mg .who{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px}
.hlp-mg .who .mono{font-family:var(--mono);font-weight:500;font-size:11.5px}
.hlp-mg .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.hlp-mg.me{align-self:flex-end;background:#F1F3F6}
.hlp-mg.dr{align-self:flex-start;background:#F1F3F6}
.hlp-mg.fc{align-self:flex-start;background:var(--brand-50);border:1px solid #F9CFE6}
.hlp-mg.fc .who{color:var(--brand-deep)}

/* new request */
.hlp-urgent{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14.5px}
.hlp-urgent input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--brand)}
.hlp-urgent span{margin-left:auto;font-size:13px;color:var(--muted)}
.hlp-contact{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.hlp-contact > div{flex:1;min-width:0}
.hlp-contact small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.hlp-contact b{display:block;font-size:14.5px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.hlp-contact b .mono{font-family:var(--mono);font-weight:600}
.hlp-contact .btn{width:96px;flex:none}

/* footers (one shown per step) */
.v2p.hlp .v2p-foot{padding:0}
.hlp-foot{display:flex;align-items:center;gap:10px;flex:1 1 auto;padding:12px 20px}
.hlp-foot .sp{flex:1 1 auto}
.hlp-foot .hlp-w{min-width:120px}
.hlp-reply{align-items:flex-end;margin:0}
.hlp-reply textarea{flex:1 1 auto;min-width:0;min-height:44px;max-height:144px;resize:none;border:1px solid var(--field);border-radius:10px;padding:11px 14px;font:inherit;font-size:15px;line-height:1.4;color:var(--ink);background:#fff;box-sizing:border-box}
.hlp-reply textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.hlp-reply .btn{flex:none;width:96px;min-height:44px}
.hlp-appnote-t{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.hlp-appnote-t svg{flex:none;color:var(--muted)}
.hlp-appnote .btn{width:96px}

/* "Sent" toast, inside the dialog so it sits in the top layer */
.hlp-toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(15,23,42,.25);z-index:2}
.hlp-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--ok-dot)}
.v2p.hlp .v2p-box{position:relative}

@media (max-width:860px){
  .hlp-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .v2p .hlp-foot .btn{flex:1 1 0}
  .v2p .hlp-reply .btn,.v2p .hlp-appnote .btn{flex:none}
  .hlp-row .m{font-size:15px}
  .hlp-contact .btn{min-height:44px}
}