/* agent-extras: Need help, supervisor badge, call guide, shift card
   (agent-extras.js, docs/AGENT_EXTRAS.md). Lagoon tokens only. */

/* ---------- Need help ---------- */
.ag-helpbtn.hidden { display: none; }
.ag-helpstrip {
  display: flex; align-items: center; gap: 12px; margin: 10px 20px 0; padding: 10px 10px 10px 16px;
  border-radius: var(--pill); background: var(--warn-soft); color: var(--warn-text); font-size: 15px;
}
.ag-helpstrip.hidden { display: none; }
.ag-helpstrip.is-acked { background: var(--ok-soft); color: var(--ok-text); }
.ag-helpdot { width: 12px; height: 12px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(224, 138, 30, 0.25); }
.ag-helpstrip.is-acked .ag-helpdot { background: var(--ok); box-shadow: 0 0 0 4px rgba(30, 158, 96, 0.25); }
.ag-helptext { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ag-helptext b { font-weight: 800; }
.ag-helptext .sub { color: inherit; opacity: 0.85; overflow-wrap: anywhere; }
.ag-helpcancel { min-height: 40px; background: var(--panel); color: var(--text); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .ag-helpstrip:not(.is-acked) .ag-helpdot { animation: ag-helppulse 1.8s ease-in-out infinite; }
}
@keyframes ag-helppulse { 50% { box-shadow: 0 0 0 7px rgba(224, 138, 30, 0.05); } }

.ag-helppop {
  position: fixed; z-index: 56; top: 64px; right: 20px; width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--panel); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lift); color: var(--text);
}
.ag-helppop.hidden { display: none; }
.ag-helppop-title { font-weight: 800; font-size: 16px; }
.ag-helppop-acts { display: flex; gap: 8px; }
.ag-helppop-acts button { min-height: 44px; flex: 1 1 auto; }
@media (max-width: 800px) {
  .ag-helpstrip { margin: 8px 10px 0; border-radius: 22px; flex-wrap: wrap; }
  .ag-helppop { top: 120px; left: 12px; right: 12px; width: auto; }
  .ag-head .ag-helpbtn { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- supervisor badge in the call bar ---------- */
.ag-monbadge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill);
  background: var(--machine-soft); color: var(--machine-text); font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.ag-monbadge.hidden { display: none; }
.ag-monbadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ag-monbadge[data-mode="barge"] { background: var(--call-soft); color: var(--call-text); }
.ag-ctimer:has(.ag-monbadge:not(.hidden)) { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; }

/* ---------- call guide ---------- */
.ag-guide.hidden { display: none; }
.ag-gd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ag-gd-head h2 { font-size: 17px; margin: 0; }
.ag-gd-count { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-gd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-gd-item { border-radius: var(--radius-sm); padding: 6px 8px; min-width: 0; }
.ag-gd-item:hover { background: var(--panel-2); }
.ag-gd-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.4; }
.ag-gd-label input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.ag-gd-text { min-width: 0; overflow-wrap: anywhere; }
.ag-gd-say { margin: 4px 0 0 30px; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; font-style: italic; overflow-wrap: anywhere; }
.ag-gd-item.is-done .ag-gd-text { color: var(--muted); text-decoration: line-through; }
.ag-gd-item.is-done .ag-gd-say { opacity: 0.6; }
@media (min-width: 801px) {
  .ag-oncall #guideCard { grid-column: var(--cc); margin: 0 0 14px; min-width: 0; order: 0; }
  .ag-oncall.ag-wrapup #guideCard { display: none; }
  .ag-oncall #guideCard:not(.hidden) ~ #liveNotesCard:not(.hidden) { min-height: 0; }
}

/* ---------- My day: shift ---------- */
.ag-shift { padding: 14px 18px; }
.ag-sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ag-sh-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ag-sh-time { font-size: 22px; font-weight: 500; }
.ag-sh-pill { padding: 3px 12px; border-radius: var(--pill); font-size: 13.5px; font-weight: 800; background: var(--pause-soft); color: var(--pause-text); }
.ag-sh-pill[data-tone="on"] { background: var(--ok-soft); color: var(--ok-text); }
.ag-sh-pill[data-tone="wait"] { background: var(--call-soft); color: var(--call-text); }
.ag-sh-next { margin-top: 6px; font-size: 14px; }

/* phone: the guide follows the call card, the customer card and the actions */
@media (max-width: 800px) {
  #guideCard { order: 2; }
}