/* «Робота команди» — СПІЛЬНІ стилі «Клієнтів» і «Постачальників» (24.10; модуль /shared/teamwork.js). Обидва застосунки
   віддають цей самий файл (у «Постачальниках» — статикою /shared з теки «Клієнтів», без копії). Кольори — змінні --tw-*:
   «Клієнти» їх не задають (тоді діє друге значення — їхні змінні тем), «Постачальники» задають у своєму style.css на свої
   (--bg2, --txt, --muted…). Розташування в шапці й бейдж на телефоні — у style.css кожного застосунку. */
.team-online { display: inline-flex; align-items: center; flex: none; padding-left: 2px; }
.team-online[hidden], .team-queue[hidden] { display: none; }
.tw-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .2px; border: 2px solid var(--tw-bg, var(--bg-sidebar));
    box-sizing: content-box; cursor: pointer; flex: none; position: relative; }
.team-online .tw-av + .tw-av { margin-left: -7px; }
.team-online .tw-av:hover { z-index: 2; transform: translateY(-1px); }
/* на телефоні (24.10): трубка в кутку аватарки */
.tw-av .tw-call-ico { position: absolute; right: -5px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 6.5px; color: #fff;
    background: var(--tw-ok, var(--badge)); border: 1.5px solid var(--tw-bg, var(--bg-sidebar)); }
/* кільце — «Менеджер» зараз (Вікторія або хто в «Режимі менеджера») */
.tw-av.tw-mgr { box-shadow: 0 0 0 1.5px var(--tw-ok, var(--badge)); }
.team-queue { flex: none; border: 0; border-radius: 10px; padding: 2px 8px; background: var(--tw-hover, var(--bg-hover)); color: var(--tw-text, var(--text));
    font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.team-queue:hover { background: var(--tw-active, var(--bg-active)); }
.team-queue.tw-q-calm { color: var(--tw-dim, var(--text-dim)); font-weight: 500; }
/* пісочний годинник черги — іконка Font Awesome, не emoji (Іван 24.10) */
.team-queue .tw-q-ico { margin-right: 5px; font-size: .88em; opacity: .85; }
/* підказка при наведенні: кілька рядків (title браузера їх ріже) */
.tw-tip { position: fixed; z-index: 10050; max-width: 340px; padding: 8px 10px; border-radius: 8px;
    background: var(--tw-head, var(--bg-header)); color: var(--tw-text, var(--text)); border: 1px solid rgba(var(--pattern-ink), .12);
    box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12px; line-height: 1.45; pointer-events: none; }
.tw-tip-h { font-weight: 700; margin-bottom: 2px; }
.tw-tip-l { color: var(--tw-dim, var(--text-dim)); }
/* вікна «Дії — …» і «Робота команди» */
.modal-card.tw-modal, .imodal-card.tw-modal { width: min(720px, 96vw); height: auto; max-height: 92vh; }
.modal-card.tw-modal.tw-modal-wide, .imodal-card.tw-modal.tw-modal-wide { width: min(940px, 96vw); }
.tw-feed, .tw-work { padding: 14px 16px 18px; color: var(--tw-text, var(--text)); font-size: 13px; }
.tw-feed-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.tw-av.tw-av-lg { width: 36px; height: 36px; font-size: 13px; cursor: default; }
.tw-feed-status { font-weight: 600; }
.tw-feed-last { color: var(--tw-dim, var(--text-dim)); font-size: 12.5px; margin-top: 2px; }
.tw-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--tw-hover, var(--bg-hover)); margin-bottom: 12px; }
.tw-seg-b { border: 0; background: transparent; color: var(--tw-dim, var(--text-dim)); font: inherit; font-size: 12.5px; padding: 4px 12px;
    border-radius: 6px; cursor: pointer; }
.tw-seg-b.active { background: var(--tw-active, var(--bg-active)); color: var(--tw-text, var(--text)); }
.tw-count { color: var(--tw-dim, var(--text-dim)); font-size: 12px; margin-bottom: 6px; }
.tw-feed-list { display: flex; flex-direction: column; gap: 1px; }
.tw-feed-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left;
    padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--tw-text, var(--text)); font: inherit; font-size: 13px; }
.tw-feed-row.tw-link { cursor: pointer; }
.tw-feed-row.tw-link:hover { background: var(--tw-hover, var(--bg-hover)); }
.tw-feed-t { color: var(--tw-muted, var(--text-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-feed-x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-feed-c { color: var(--tw-link, var(--accent-strong)); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tw-empty { color: var(--tw-dim, var(--text-dim)); padding: 12px 4px; }
.tw-note { color: var(--tw-muted, var(--text-muted)); font-size: 11.5px; line-height: 1.45; margin-top: 10px; }
.tw-sec { margin-bottom: 18px; }
.tw-sec-h { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.tw-sub { color: var(--tw-dim, var(--text-dim)); font-size: 12px; margin: 8px 0 2px; }
.tw-line { line-height: 1.55; }
.tw-tbl-wrap { overflow-x: auto; }
.tw-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tw-tbl th { text-align: left; font-weight: 600; color: var(--tw-dim, var(--text-dim)); font-size: 11.5px; padding: 4px 8px; border-bottom: 1px solid rgba(var(--pattern-ink), .1); }
.tw-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(var(--pattern-ink), .05); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-tbl td.tw-rowh { font-weight: 600; }
.tw-name { border: 0; background: transparent; color: var(--tw-link, var(--accent-strong)); font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.tw-name:hover { text-decoration: underline; }
.tw-warn { color: var(--tw-bad, var(--danger)); font-size: 12px; margin: 4px 0 8px; }