/* SEMA booth track C: calls with technicians (job-calls.js): the job page's Technician panel and My work's call card.
   Shop design tokens only. */
.tcl .tcl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tcl .tcl-head h2 { margin: 0; }
.tcl .tcl-name { color: var(--ink-2); font-size: 14px; }
.tcl-sub { color: var(--ink-2); font-size: 13px; line-height: 1.4; margin: 6px 0 0; }
.tcl .tcl-ack { margin-top: 10px; border-radius: var(--r-m); padding: 10px 12px; background: var(--fill); }
.tcl .tcl-ack-t { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tcl .tcl-ack-s { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.tcl .tcl-ack.t-ok { background: var(--green-soft); }
.tcl .tcl-ack.t-ok .tcl-ack-t { color: var(--green); }
.tcl .tcl-ack.t-ok .tcl-ack-t::before { content: '✓'; }
.tcl .tcl-ack.t-warn { background: var(--amber-soft); }
.tcl .tcl-ack.t-warn .tcl-ack-t { color: var(--amber); }
.tcl .tcl-ack.t-bad { background: var(--red-soft); }
.tcl .tcl-ack.t-bad .tcl-ack-t { color: var(--red); }
.tcl .tcl-earlier { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.tcl .tcl-earlier .t-ok > span:first-child { color: var(--green); }
.tcl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; animation: tcl-pulse 1.4s ease-in-out infinite; }
@keyframes tcl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .tcl-dot { animation: none; } }
.tcl .tcl-start { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tcl .tcl-callbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 44px; }
.tcl-ph { width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; }
.tcl .tcl-more { min-height: 44px; }
.tcl .tcl-scripts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.tcl-chip { border: 0; background: var(--fill); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 34px; }
.tcl-chip:hover { background: var(--fill-hover); }
.tcl .tcl-call { margin-top: 12px; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair-strong); padding: 10px 12px; background: var(--surface); }
.tcl .tcl-call.is-live { box-shadow: 0 0 0 1.5px var(--red); }
.tcl .tcl-call-h { display: flex; align-items: center; gap: 8px; }
.tcl .tcl-call-h strong { font-size: 14px; }
.tcl-end { margin-left: auto; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 6px 16px; font-weight: 600; min-height: 34px; }
.tcl .tcl-tr { list-style: none; margin: 10px 0 0; padding: 8px 10px; max-height: 200px; overflow-y: auto; background: var(--surface-2); border-radius: var(--r-s); box-shadow: 0 0 0 .5px var(--hair); }
.tcl .tcl-turn { font-size: 13px; line-height: 1.45; margin: 3px 0; }
.tcl .tcl-who { font-weight: 600; color: var(--ink-2); margin-right: 6px; }
.tcl .tcl-turn.s-technician .tcl-who { color: var(--accent); }
.tcl .tcl-say { margin-top: 8px; }
.tcl-seg { display: inline-flex; background: var(--fill); border-radius: 9px; padding: 2px; margin-bottom: 6px; }
.tcl-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--ink); min-height: 0; }
.tcl-seg button.is-on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }
.tcl-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tcl-input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 8px 10px; min-height: 40px; box-sizing: border-box; }
.tcl .tcl-acts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tcl .tcl-act { border-radius: var(--r-s); padding: 9px 10px; background: var(--fill); }
.tcl .tcl-act.is-ask.s-proposed { background: var(--accent-soft); }
.tcl .tcl-act.s-applied { background: var(--green-soft); }
.tcl .tcl-act.s-declined { opacity: .6; }
.tcl .tcl-act-t { font-weight: 600; font-size: 14px; line-height: 1.35; }
.tcl .tcl-act-d { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.tcl .tcl-act .tcl-row { justify-content: flex-end; }
.tcl .tcl-tag { margin-right: auto; font-size: 12px; color: var(--ink-2); }
.tcl .tcl-done { font-size: 13px; margin-top: 4px; color: var(--ink-2); }
.tcl .tcl-done.k-done { color: var(--green); font-weight: 600; }
.tcl .tcl-act.k-draft { background: var(--surface-2); box-shadow: 0 0 0 .5px var(--hair); }
.tcl .tcl-draft { font-size: 14px; line-height: 1.45; margin: 6px 0 0; white-space: pre-wrap; }
.tcl .tcl-act.k-draft .tcl-row { justify-content: space-between; }
.tcl .tcl-msg { margin-top: 8px; }
.tcl .tcl-notes { margin-top: 12px; border-top: .5px solid var(--hair); padding-top: 8px; }
.tcl .tcl-notes-h { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.tcl .tcl-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; }
.tcl .tcl-note .tcl-withdraw { margin-left: 6px; font-size: 12px; min-height: 28px; padding: 2px 8px; }
.tcl .tcl-note.is-withdrawn { color: var(--ink-3); }
.tcl .tcl-note-tag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--fill); color: var(--ink-2); }
.tcl .tcl-confirm { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tcl .tcl-confirm p { flex-basis: 100%; margin: 0; }

/* My work */
.tcl-ring { border-radius: var(--r-l); padding: 14px; margin: 0 0 14px; background: var(--surface); box-shadow: 0 0 0 2px var(--green), var(--shadow-pop); }
.tcl-ring-h { display: flex; align-items: center; gap: 12px; }
.tcl-ring-h strong { font-size: 17px; }
.tcl-ph.is-ring { width: 14px; height: 14px; color: var(--green); box-shadow: 0 0 0 0 var(--green); animation: tcl-ring 1.2s ease-out infinite; }
@keyframes tcl-ring { 0% { box-shadow: 0 0 0 0 var(--green-soft); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .tcl-ph.is-ring { animation: none; } }
.tcl-line { font-size: 16px; line-height: 1.45; margin: 12px 0 4px; }
.tcl-big { flex-wrap: wrap; }
.tcl-big > button { flex: 1 1 140px; }
.tcl-mine { margin-bottom: 8px; }
.tcl-notice { border-radius: var(--r-m); padding: 12px; margin-bottom: 8px; background: var(--amber-soft); display: grid; gap: 6px; }
.tcl-notice-t { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.tcl-confirmed { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--green); display: grid; gap: 3px; }
.tcl-badge:empty { display: none; }
.tcl-badge { font-size: 12px; margin-top: 6px; border-radius: 999px; padding: 3px 10px; display: inline-block; }
.tcl-badge.is-ok { background: var(--green-soft); color: var(--green); }
.tcl-badge.is-ask { background: var(--amber-soft); color: var(--amber); font-weight: 600; }