/* «Монитор» (ig.captaindock.io): live feed of sales answers. */
.mon-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.mon-stat { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.55rem 0.8rem; min-width: 7rem; background: var(--card); }
.mon-stat b { display: block; font-size: 1.35rem; letter-spacing: -0.02em; }
.mon-stat span { font-size: 0.78rem; color: var(--muted-foreground); }
.mon-filters { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.mon-filters .input { width: 100%; }
.mon-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.mon-chip { border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.82rem; font-weight: 600; background: transparent; color: var(--muted-foreground); cursor: pointer; min-height: 2.1rem; }
.mon-chip:hover { color: var(--foreground); }
.mon-chip.active { color: var(--foreground); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mon-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mon-feed { display: flex; flex-direction: column; gap: 0.8rem; }
.mon-card { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); padding: 0.9rem 1rem; min-width: 0; }
.mon-card.running { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mon-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.mon-head .who { font-weight: 800; }
.mon-head .when { margin-left: auto; font-size: 0.8rem; color: var(--muted-foreground); white-space: nowrap; }
.mon-q { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.6rem 0; padding: 0.55rem 0.75rem; border-left: 3px solid var(--border); color: var(--muted-foreground); font-size: 0.9rem; }
.mon-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 0.75rem; margin: 0.5rem 0; }
.mon-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.mon-steps { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.8rem; color: var(--muted-foreground); display: grid; gap: 0.15rem; }
.mon-steps li { display: flex; gap: 0.5rem; }
.mon-steps .t { flex: none; font-variant-numeric: tabular-nums; width: 4.2rem; }
.mon-progress { height: 3px; border-radius: 3px; background: var(--muted); overflow: hidden; margin: 0.5rem 0; }
.mon-progress i { display: block; height: 100%; width: 35%; background: var(--accent); animation: mon-slide 1.3s ease-in-out infinite; }
@keyframes mon-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .mon-progress i { animation: none; width: 100%; opacity: 0.5; } }
.mon-sub { margin-top: 0.4rem; border-top: 1px dashed var(--border); padding-top: 0.4rem; }
.mon-sub summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; }
.mon-sub .mon-answer { font-size: 0.86rem; }
.mon-refs { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.3rem; overflow-wrap: anywhere; }
.mon-more { display: flex; justify-content: center; margin: 1rem 0; }
.mon-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted-foreground); }
.mon-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); display: inline-block; }
.mon-live.paused i { background: var(--muted-foreground); }
@media (max-width: 760px) {
  .mon-head .when { margin-left: 0; width: 100%; }
  .mon-chip, .mon-actions .btn, #mon-pause, .mon-more .btn { min-height: 2.75rem; }   /* 44 px touch targets */
  .mon-stat { min-width: calc(50% - 0.25rem); }
}