/* Help calls (video): full-screen call, ringing bar for the office / supervisors */
body.hc-open { overflow: hidden; }
.hc-overlay { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #07131c; }
.hc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: #0c1f2c; color: #e6eef5; border-bottom: 1px solid #1d3b52; }
.hc-status { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.hc-extra { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-dot { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; flex: none; animation: hc-pulse 1.1s ease-in-out infinite; }
.hc-dot.live { background: #ef4444; }
@keyframes hc-pulse { 50% { opacity: .35; } }
.hc-end { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 800; }
.hc-frame { flex: 1; width: 100%; border: 0; background: #000; }
.hc-ring { position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 390; width: min(560px, calc(100vw - 24px)); display: grid; gap: 8px; }
.hc-ring-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 12px 32px rgba(7,19,28,.35); animation: hc-in .25s ease-out; }
.hc-ring-ic { font-size: 26px; animation: hc-shake 1.2s ease-in-out infinite; }
.hc-ring-t { flex: 1; min-width: 0; display: grid; }
.hc-ring-t small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes hc-in { from { transform: translateY(-12px); opacity: 0; } }
@keyframes hc-shake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.hc-sheet .notice { margin-top: 8px; }
.tfs.tfs-help .tfs-ic { color: #f87171; }
@media (max-width: 420px) { .hc-ring-row { flex-wrap: wrap; } .hc-ring-t { flex: 1 1 calc(100% - 46px); } .hc-ring-t small { white-space: normal; } .hc-ring-row .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-dot, .hc-ring-ic, .hc-ring-row { animation: none; } }
.tm-help { margin-top: 18px; }

/* office -> tech: pick who to call */
.hc-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 280px; overflow: auto; }
.hc-tech { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 44px; flex-wrap: wrap; }
.hc-tech.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); font-weight: 700; }
.hc-tech small { flex-basis: 100%; padding-left: 18px; font-weight: 400; }
.hc-tech-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hc-tech-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-sheet .lbl { display: block; font-weight: 600; margin-bottom: 6px; }