/* «Команда» в «Постачальниках» — та сама панель, що в «Клієнтах», одним кодом (24.10; supplier-team-panel-plan.md). Це
   ШАБЛОН: блок між маркерами порожній — сервер кладе туди правила панелі з ПОТОЧНОГО style.css «Клієнтів»
   (teampanel_build.py); тут — господар: місце панелі в розмітці «Постачальників» (третя колонка / шухляда / аркуш). */

/* кольори «Клієнтів» (--text, --border, --bg-sidebar, --bubble-in…) → тема «Постачальників», як previews.css робить для
   вікон з тексту (там — лише вікнам, панелі не дістається). Без цього панель прозора: шторкою на вузькому вікні крізь неї
   видно розмову (24.10). Змінні поля v2 (--cx-*) — у копії нижче */
#agent-panel, #agent-btn {
  --text: var(--txt); --text-dim: var(--muted); --text-muted: var(--muted2);
  --accent-strong: var(--accent2); --badge: var(--ok); --danger: var(--bad); --warning: var(--warn);
  --border: var(--line); --bg-hover: var(--bg3); --bg-header: var(--bg2); --bg-sidebar: var(--bg2);
  --bg-thread: var(--bg); --bubble-in: var(--in); --bubble-out: var(--out);
  --radius: 12px; --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
:root { --ap-w: 480px; }

/* місце панелі: ≥1280 — третя колонка поруч із чатом (#app — flex-рядок «Постачальників»), вужче — шухляда справа,
   на телефоні — на весь екран (правила самої панелі для цих ширин — у копії) */
@media (min-width: 1280px) {
  #app > #agent-panel:not([hidden]) { position: relative; flex: 0 0 var(--ap-w); width: var(--ap-w); min-width: 320px;
    height: 100vh; border-left: 1px solid var(--line); }
}
#app > #agent-panel[hidden] { display: none; }
/* кнопка «Команда» в шапці кімнати — як у «Клієнтах» (лічильник і @) */
.head-actions #agent-btn { position: relative; }
/* агент у панелі ввімкнено (app.js: /api/supplier/me → agent_dialog) — кнопки «Агент» у полі немає, як у «Клієнтах» */
:root[data-team-agent] #composer #agentBtn { display: none; }

/* ═══ СПІЛЬНЕ З «КЛІЄНТАМИ» — збирає сервер (teampanel_build.py) з frontend/css/style.css; тут порожньо ═══ */
#agent-panel .sidebar { display: flex; flex-direction: column; background: var(--bg-sidebar); min-width: 0; min-height: 0; position: relative; }
#agent-panel .icon-btn { background: transparent; border: none; color: var(--text-dim); font-size: 16px; padding: 4px 6px; border-radius: 6px; line-height: 1; }
#agent-panel .icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.room-thumb-order { width: 100%; height: 100%; border-radius: inherit; display: flex; align-items: center; justify-content: center; background: rgba(51,144,236,.15); color: #4aa3ff; font-size: 17px; }
.room-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.02); min-width: 0; }
.room-item:hover { background: var(--bg-hover); }
.room-item.active { background: var(--bg-active); }
.room-item.active .room-preview, .room-item.active .room-time { color: rgba(255,255,255,.7); }
#agent-panel .room-thumb { position: relative; width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--avatar); display: flex; align-items: center; justify-content: center; }
#agent-panel .room-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#agent-panel .room-main { flex: 1; min-width: 0; }
#agent-panel .room-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#agent-panel .room-name { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-item.unread .room-name { font-weight: 700; }
#agent-panel .room-time { color: var(--text-muted); font-size: 12px; flex: none; }
#agent-panel .room-preview { color: var(--text-dim); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.thread-header { display: flex; align-items: center; padding: 10px 18px; background: var(--bg-header); min-height: 56px; z-index: 2; }
#agent-panel .ctx-menu { position: fixed; z-index: 10050; min-width: 190px; padding: 5px; background: #1c2230; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
#agent-panel .toast { --tt: rgba(255,255,255,.95); --tt-bg: rgba(255,255,255,.2); --t-line: rgba(255,255,255,.28); --t-track: rgba(255,255,255,.2); position: relative; overflow: hidden; opacity: 0; transform: translateX(calc(100% + 40px)); padding: 12px 12px 16px 14px; border-radius: 14px; border: 1px solid var(--t-line); background: linear-gradient(180deg, #2b7fff, #1f6feb); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 44px -14px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.22); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease; z-index: 10005; white-space: normal; text-align: left; overflow-wrap: anywhere; }
#agent-panel .toast.err { background: linear-gradient(180deg, #b0413f, #8f3130); }
@media (prefers-reduced-motion: reduce) {
    #agent-panel .toast { transform: none; transition: opacity .15s ease; }
}
:root[data-toast="glass"] #agent-panel .toast { --tt: var(--accent-strong); --tt-bg: color-mix(in srgb, var(--tt) 18%, transparent); --t-line: color-mix(in srgb, var(--text) 11%, transparent); --t-track: color-mix(in srgb, var(--text) 9%, transparent); background: color-mix(in srgb, var(--bg-sidebar) 78%, transparent); color: var(--text); font-weight: 500; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 24px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); }
:root[data-toast="card"] #agent-panel .toast { --tt: var(--accent-strong); --tt-bg: transparent; --t-line: color-mix(in srgb, var(--text) 10%, transparent); --t-track: color-mix(in srgb, var(--text) 8%, transparent); background: var(--bg-header); color: var(--text); font-weight: 500; padding-left: 16px; box-shadow: inset 4px 0 0 var(--tt), 0 18px 40px -16px rgba(0,0,0,.7); }
:root[data-toast="vivid"] #agent-panel .toast { --tt: var(--accent-strong); --tt-bg: var(--tt); --t-line: color-mix(in srgb, var(--tt) 50%, transparent); --t-track: color-mix(in srgb, var(--tt) 20%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--tt) 30%, transparent), color-mix(in srgb, var(--tt) 7%, transparent) 70%), color-mix(in srgb, var(--bg-sidebar) 86%, transparent); color: #fff; font-weight: 500; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--tt) 45%, #000), 0 4px 14px -4px rgba(0,0,0,.55), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); }
:root[data-toast="light"] #agent-panel .toast { --tt: #2563eb; --tt-bg: color-mix(in srgb, var(--tt) 13%, transparent); --t-line: color-mix(in srgb, #fff 80%, transparent); --t-track: color-mix(in srgb, #0f172a 9%, transparent); background: color-mix(in srgb, #f6f8fb 94%, transparent); color: #0f172a; font-weight: 500; padding-left: 16px; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 4px 0 0 var(--tt), 0 22px 50px -16px rgba(0,0,0,.8), 0 3px 10px rgba(0,0,0,.3); }
:root[data-toast="bank"] #agent-panel .toast { --tb: #1f5fae; --tt: #7cc0ff; --tt-bg: #fff; --t-line: transparent; --t-track: color-mix(in srgb, #000 22%, transparent); background: var(--tb); color: #fff; font-weight: 400; border-radius: 16px; padding: 14px 12px 18px 16px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.7), 0 3px 10px rgba(0,0,0,.3); }
#agent-panel .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 8px; display: flex; flex-direction: column; scroll-behavior: smooth; }
.msg-body { white-space: pre-wrap; line-height: 1.35; font-size: 14px; }
#agent-panel .composer-row { display: flex; align-items: flex-end; gap: 8px; position: relative; }
#agent-panel .sticker-panel { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-header); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
#agent-panel .sticker-panel[hidden] { display: none; }
#agent-panel .sticker-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 4px; }
#agent-panel .sticker-item { background: none; border: 0; padding: 4px; border-radius: 8px; cursor: pointer; }
#agent-panel .sticker-item:hover, #agent-panel .sticker-item:focus-visible { background: var(--bg-hover); }
#agent-panel .sticker-item img { width: 56px; height: 56px; display: block; }
#agent-panel .sticker-preview { position: fixed; z-index: 60; pointer-events: none; padding: 10px; background: var(--bg-header); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 32px rgba(0, 0, 0, .45); }
#agent-panel .sticker-preview[hidden] { display: none; }
#agent-panel .sticker-preview img { width: 300px; height: 300px; display: block; }
#agent-panel .messages::-webkit-scrollbar { width: 8px; }
#agent-panel .messages { --sbc: transparent; transition: --sbc .6s ease .1s; }
#agent-panel .messages::-webkit-scrollbar-thumb { background: var(--sbc); border-radius: 4px; }
#agent-panel .room-group-gap { height: auto; margin: 16px 14px 6px; padding-top: 9px; text-align: center; border-top: 1px solid var(--border, rgba(128,128,128,.4)); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted, #8a8a8a); }
#agent-panel .room-group-gap::after { content: 'вирішені'; }
#agent-panel .ap-time { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hold-act { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; cursor: pointer; }
.hold-act:hover { background: var(--bg-active); }
.hold-act i { font-size: 11px; }
.hold-act.primary { background: color-mix(in srgb, var(--badge, #46b46e) 20%, transparent); border-color: color-mix(in srgb, var(--badge, #46b46e) 45%, var(--border)); }
.hold-act.primary i { color: var(--badge, #46b46e); }
#agent-panel .act-block { margin-top: 10px; font-size: 12.5px; }
#agent-panel .act-cap { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
#agent-panel .act-cap > i { font-size: 11px; color: var(--warning, #d9a95a); }
#agent-panel .act-row { position: relative; padding: 8px 10px 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); border-left: 3px solid var(--warning, #d9a95a); }
#agent-panel .act-row + .act-row { margin-top: 6px; }
#agent-panel .act-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
#agent-panel .act-title { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.4; word-break: break-word; }
#agent-panel .act-text { margin-top: 6px; padding: 6px 9px; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.act-seen { margin-top: 5px; font-size: 11.5px; color: var(--warning, #d9a95a); }
#agent-panel .act-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
#agent-panel .act-row > .act-btns { visibility: hidden; opacity: 0; transition: opacity .12s, visibility .12s; }
#agent-panel .act-row:focus-within > .act-btns { visibility: visible; opacity: 1; }
@media (hover: none) {
    #agent-panel .act-row > .act-btns { visibility: visible; opacity: 1; }
}
#agent-panel .act-btn { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; color: var(--accent-strong, #8ab4f2); background: none; border: 0; }
#agent-panel .act-btn:hover { background: var(--bg-hover); text-decoration: underline; }
#agent-panel .act-btn i { font-size: 11px; opacity: .9; }
#agent-panel .act-btn.dismiss:hover { color: var(--danger, #d96a6a); }
#agent-panel .act-title { min-width: 0; }
#agent-panel .agent-btn { font-size: 19px; padding: 8px; }
#agent-panel .agent-btn:disabled { opacity: .35; cursor: not-allowed; }
#agent-panel .agent-btn { position: relative; }
#agent-panel .agent-req-hint { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
#agent-panel .agent-req-bar { display: flex; justify-content: flex-end; gap: 8px; }
#agent-panel .ent:hover { opacity: .85; }
.agent-panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-sidebar); border-left: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); }
.agent-panel[hidden] { display: none; }
@media (max-width: 1279px) {
    .agent-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--ap-w), 92vw); z-index: 40; box-shadow: -10px 0 28px rgba(0, 0, 0, .38); }
    html.pwa-ios .agent-panel { top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100dvh); padding-top: var(--safe-top, env(safe-area-inset-top, 0px)); }
}
@media (max-width: 720px) {
    .agent-panel { width: 100vw; border-left: 0; }
    .ap-resize { display: none; }
}
.ap-resize { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: 3; cursor: col-resize; touch-action: none; }
.ap-resize::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s; }
.ap-resize:hover::after, .ap-resize.dragging::after { background: var(--accent); }
@media (hover: none) {
    .ap-resize { display: none; }
}
body.ap-resizing { cursor: col-resize; user-select: none; }
body.ap-resizing iframe { pointer-events: none; }
#agent-panel .ap-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; min-height: 56px; background: var(--bg-header); }
.ap-back { display: none; }
@media (max-width: 720px) {
    .ap-back { display: inline-flex; }
    .ap-close { display: none; }
    #agent-panel .ap-head { padding-left: 6px; }
}
@media (max-width: 1279px) {
    :root[data-ap-close="drawer"] .ap-back { display: inline-flex; }
    :root[data-ap-close="drawer"] .ap-close { display: none; }
    :root[data-ap-close="drawer"] #agent-panel .ap-head { padding-left: 6px; }
}
:root[data-ap-close="back"] .ap-back { display: inline-flex; }
:root[data-ap-close="back"] .ap-close { display: none; }
:root[data-ap-close="back"] #agent-panel .ap-head { padding-left: 6px; }
.ap-title-wrap { flex: 1 1 auto; min-width: 0; }
.ap-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-title i { color: var(--accent); margin-right: 2px; }
.ap-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; min-height: 18px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.ap-dot.tone-run { background: var(--accent); animation: agent-breathe 1.4s ease-in-out infinite; }
.ap-dot.tone-warn { background: var(--warning, #d9a95a); }
.ap-st.warn { color: var(--warning, #d9a95a); }
.ap-clock { font-variant-numeric: tabular-nums; color: var(--accent); }
.ap-prog-line { position: relative; height: 1.35em; margin: 2px 0 0; overflow: hidden; font-size: 12.5px; color: var(--text-dim); }
.ap-prog-line[hidden] { display: none; }
.ap-prog-line .ap-tick-line { position: absolute; top: 0; left: 0; right: 0; }
.ap-tick-line { display: block; line-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tick-line.in { animation: ap-tick-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.ap-tick-line.out { position: absolute; top: 0; left: 0; right: 0; animation: ap-tick-out .34s cubic-bezier(.2, .8, .2, 1) both; }
.ap-msg.agent.ap-pend { border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--bg-sidebar) 72%, transparent); }
.ap-msg.agent.ap-pend.tone-warn { border-color: color-mix(in srgb, var(--warning, #d9a95a) 55%, transparent); }
.ap-pend.enter { animation: ap-pend-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.ap-pend .ap-msg-body { white-space: normal; }
.ap-pend .ap-clock { color: var(--accent); font-variant-numeric: tabular-nums; }
.ap-pend-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ap-pend-st { color: var(--text-dim); font-size: 13.5px; }
.ap-pend.tone-warn .ap-pend-st { color: var(--warning, #d9a95a); }
.ap-typing { display: inline-flex; gap: 3px; align-self: center; width: 18px; overflow: hidden; }
.ap-typing span { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .75; animation: ap-conv 1s cubic-bezier(.3, .7, .3, 1) infinite; }
.ap-typing span:first-child { animation-name: ap-conv-in; }
.ap-typing span:nth-child(4) { animation-name: ap-conv-out; }
.ap-pend.tone-warn .ap-typing { display: none; }
.ap-roll { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; }
.ap-roll > b { display: inline-block; font-weight: inherit; }
.ap-roll.go > b { animation: ap-roll-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.ap-roll.go::before { content: attr(data-old); position: absolute; left: 0; top: 0; animation: ap-roll-out .32s cubic-bezier(.2, .8, .2, 1) both; }
.ap-pend-x { align-self: center; width: 26px; height: 22px; margin: -3px -4px -3px 0; padding: 0; border-radius: 8px; font-size: 14px; opacity: .85; }
.ap-pend-x:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ap-pend-x[hidden] { display: none; }
@media (hover: none) {
    .ap-pend-x { width: 36px; height: 32px; margin: -8px -9px -8px 0; font-size: 16px; }
}
.ap-pend-why { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ap-pend-why:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
    .ap-tick-line.in { animation: none; }
    .ap-tick-line.out { display: none; }
    .ap-pend.enter { animation: none; }
    .ap-typing span { animation: none; transform: none; }
    .ap-roll.go > b { animation: none; }
    .ap-roll.go::before { display: none; }
}
.ap-x { border: 0; background: transparent; color: var(--danger); cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1; }
.ap-x:disabled { opacity: .45; cursor: default; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 6px; }
.ap-chips:empty { display: none; }
.ap-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; line-height: 1.5; color: var(--text-dim); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.ap-chip.card { cursor: pointer; color: var(--text); }
.ap-chip.card:hover { filter: brightness(1.15); }
.ap-chip.warm.warm { color: var(--badge); }
.ap-chip.handoff { gap: 4px; }
.ap-chip.handoff .ap-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; opacity: .7; }
.ap-chip.handoff .ap-chip-x:hover { opacity: 1; }
.ap-notes { padding: 0 12px 6px; }
.ap-notes[hidden] { display: none; }
.ap-notes-head { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.ap-notes-head:hover { color: var(--text); }
.ap-notes-list { display: flex; flex-direction: column; gap: 6px; max-height: 28vh; overflow-y: auto; padding-top: 2px; }
.ap-note { position: relative; padding: 7px 30px 7px 10px; border-radius: 10px; background: var(--bg); border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); font-size: 13px; line-height: 1.45; }
.ap-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-note-meta { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); margin-top: 3px; }
.ap-note-x { position: absolute; top: 5px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-muted); font-size: 12px; }
.ap-note-x:hover { color: var(--danger); background: var(--bg-hover); }
.ap-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px; background: var(--bg-thread); }
.ap-empty { margin: auto 8px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ap-empty-h { color: var(--text); font-weight: 600; margin-bottom: 6px; }
.ap-empty ul { text-align: left; margin: 6px 0 8px; padding-left: 18px; }
.ap-empty li { margin: 6px 0; }
.ap-empty li b { color: var(--text); font-weight: 600; }
.ap-empty-ex { color: var(--text); white-space: nowrap; }
.ap-empty-f { font-size: 12px; }
.ap-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; color: var(--text-dim); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.ap-link { border: 0; background: transparent; color: var(--accent-strong); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; }
.ap-msg { align-self: flex-start; max-width: 88%; padding: 6px 11px 8px; border-radius: 12px; background: var(--bubble-in); font-size: 14px; line-height: 1.45; box-shadow: var(--shadow); }
.ap-msg.mine { align-self: flex-end; background: var(--bubble-out); }
.ap-msg.agent { align-self: stretch; max-width: none; background: var(--bg-sidebar); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ap-msg.pending, .ap-sys.pending { opacity: .78; }
.ap-msg.ap-hl { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; transition: outline-color .4s; }
.ap-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 12px; font-weight: 600; }
.ap-who { color: var(--accent-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-msg.mine .ap-who { color: var(--text-dim); }
.ap-msg.agent .ap-who { color: var(--accent); }
#agent-panel .ap-time { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.ap-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-msg-body.muted { color: var(--text-dim); font-style: italic; }
.ap-md > * + * { margin-top: 6px; }
.ap-md .md-h { font-weight: 700; }
.ap-md > .md-h:not(:first-child) { margin-top: 10px; }
.ap-md .md-list { display: flex; flex-direction: column; gap: 3px; }
.ap-md .md-li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; margin: 0 -5px; padding: 1px 5px; border-radius: 6px; transition: background-color .12s; }
.ap-md .md-li.sub { padding-left: 21px; }
@media (hover: hover) {
    .ap-md .md-li:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
}
.ap-md .md-mark { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ap-md .md-pre { position: relative; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent); }
.ap-md .md-pre-t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; padding-right: 26px; }
.ap-md .md-pre-copy { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-muted); background: transparent; opacity: 0; transition: opacity .12s; }
.ap-md .md-pre:hover .md-pre-copy, .ap-md .md-pre-copy:focus-visible { opacity: 1; }
.ap-md .md-pre-copy:hover { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (hover: none) {
    .ap-md .md-pre-copy { opacity: .7; }
}
.ap-mref { color: var(--accent-strong); cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.ap-mref i { font-size: .85em; opacity: .8; }
.ap-mref:hover, .ap-mref:focus-visible { color: var(--text); outline: none; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ap-md strong { font-weight: 700; }
.ap-md .md-code { padding: 0 4px; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.ap-card-link { margin-top: 6px; padding: 2px 9px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ap-card-link:hover { filter: brightness(1.15); }
.ap-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#agent-panel .ap-card-acts:hover .act-row > .act-btns { visibility: visible; opacity: 1; }
.ap-tag { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.ap-sys { align-self: center; display: flex; align-items: baseline; gap: 6px; max-width: 94%; font-size: 12px; line-height: 1.45; color: var(--text-muted); text-align: left; }
.ap-sys-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-sys .ap-time { margin-left: 4px; }
.ap-readonly { padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); background: var(--bg-header); }
.ap-readonly[hidden] { display: none; }
#agent-panel .ap-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg-header); }
#agent-panel .ap-composer[hidden] { display: none; }
.ap-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--bg-sidebar); }
.ap-quick[hidden] { display: none; }
.ap-q { padding: 3px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-dim); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ap-q:hover, .ap-q:focus-visible { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
#agent-panel .ap-input { flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 30vh; resize: none; box-sizing: border-box; padding: 9px 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent); background: var(--bg-hover); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; outline: none; }
#agent-panel .ap-input:focus { border-color: var(--accent); }
#agent-panel .ap-input::placeholder { color: var(--text-muted); }
#agent-panel .ap-input[readonly] { opacity: .7; }
.ap-send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; border: 0; border-radius: 20px; cursor: pointer; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ap-send:hover { filter: brightness(1.1); }
.ap-send:disabled { opacity: .55; cursor: default; }
.ap-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ap-new { display: flex; flex-direction: column; gap: 12px; }
.ap-prev { display: flex; flex-direction: column; gap: 6px; }
.ap-prev-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; }
.ap-prev-row:hover { background: var(--bg-hover); }
.ap-prev-n { color: var(--text-muted); white-space: nowrap; }
.agent-btn.is-open { color: var(--accent); }
.agent-btn.has-news::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 2px var(--bg-header); }
.ap-hint { padding: 8px 14px; font-size: 12.5px; line-height: 1.45; color: var(--warning, #d9a95a); background: var(--bg-header); border-top: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent); }
.ap-hint[hidden] { display: none; }
.ap-attach { flex: none; align-self: flex-end; width: 36px; height: 40px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--text-muted); font-size: 16px; }
.ap-attach:hover { color: var(--text); background: var(--bg-hover); }
.ap-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--bg-header); }
.ap-files[hidden] { display: none; }
.ap-file { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 26px 4px 4px; border-radius: 10px; font-size: 12px; color: var(--text-dim); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.ap-file img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }
.ap-file > i { font-size: 18px; padding: 0 4px; }
.ap-file .fa-file-pdf { color: #e2574c; }
.ap-file-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-file-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-muted); font-size: 11px; }
.ap-file-x:hover { color: var(--danger); background: var(--bg-hover); }
.agent-panel.ap-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.ap-att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ap-att-i.img img { display: block; max-width: 180px; max-height: 140px; border-radius: 8px; object-fit: cover; }
.ap-att-i.pdf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.ap-att-i.pdf i { color: #e2574c; }
#agent-panel .ap-composer { position: relative; }
.ap-sticker-panel { left: 12px; bottom: calc(100% + 6px); max-height: min(380px, calc(100vh - 160px)); overflow-y: auto; }
.ap-msg.ap-sticker { background: transparent; box-shadow: none; border-color: transparent; padding: 4px 2px; }
.ap-msg.ap-sticker .ap-msg-body:empty { display: none; }
.ap-msg.ap-sticker .ap-att { margin-top: 2px; }
.ap-msg.ap-sticker .ap-att-i.img img { width: 96px; height: 96px; max-width: none; max-height: none; object-fit: contain; border-radius: 0; }
.team-row-watch { color: var(--text-muted); font-style: italic; }
.ap-item.ap-thread { margin-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ap-to-who.none { color: var(--text-muted); font-style: italic; }
.ap-item-src { margin-top: 1px; font-size: 11px; color: var(--text-muted); font-style: italic; }
.team-badge { position: absolute; right: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: var(--text-dim); background: var(--bg-sidebar, var(--bg)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text-muted) 45%, transparent); }
.team-badge.unseen { color: #fff; background: #e06c6c; box-shadow: 0 0 0 1.5px var(--bg-sidebar, var(--bg)); }
.room-group-gap.team-gap::after { content: attr(data-label); color: var(--text-muted); }
.room-item.team-row .room-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-item.team-dev, .room-item.team-from { opacity: .72; }
.room-item.team-dev:hover, .room-item.team-from:hover { opacity: 1; }
.ap-to-tag { flex: none; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--warning, #d9a95a); background: color-mix(in srgb, var(--warning, #d9a95a) 14%, transparent); white-space: nowrap; }
.ap-to-tag.both { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ap-item { margin-top: 6px; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; line-height: 1.4; background: color-mix(in srgb, var(--text-muted) 10%, transparent); border-left: 3px solid var(--warning, #d9a95a); }
.ap-item.mention { border-left-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ap-item.quiet { margin-top: 4px; padding: 0; border: 0; background: transparent; font-size: 11px; color: var(--text-muted); }
.ap-item.ap-hl { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.ap-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ap-item-head > i { color: var(--text-dim); font-size: 11px; }
.ap-item-to { font-weight: 600; color: var(--text); }
.ap-item-st { color: var(--text-dim); }
.ap-item-ord { color: var(--accent-strong); font-weight: 600; }
.ap-item-due { color: var(--text-dim); }
.ap-item-due.late { color: #e06c6c; font-weight: 600; }
.ap-item-text { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ap-item-by { color: var(--text-muted); font-size: 11.5px; }
.ap-item-seen, .ap-item-note, .ap-item-auto { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.ap-item-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ap-item > .ap-item-go { margin-top: 4px; gap: 2px 6px; }
.ap-stock-form { flex: 1 0 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(var(--pattern-ink, 255,255,255), .04); }
.ap-stock-form[hidden], .ap-stock-err[hidden] { display: none; }
.ap-stock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.ap-stock-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ap-stock-num { width: 96px; font: inherit; font-size: 13px; padding: 2px 6px; border-radius: 6px; color: var(--text); background: transparent; border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent); }
.ap-stock-err { font-size: 12px; color: #e06c6c; }
.ap-stock-form .ap-item-b { align-self: flex-start; }
.ap-props { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ap-prop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 5px 7px; border-radius: 8px; background: rgba(var(--pattern-ink, 255,255,255), .04); }
.ap-prop-conflict { box-shadow: inset 3px 0 0 var(--warning, #d9a441); }
.ap-prop-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.ap-prop-text { flex: 1 1 220px; min-width: 0; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-prop-acts { flex-basis: 100%; gap: 2px 6px; }
.ap-item-b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); background: transparent; border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent); }
.ap-item-b:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ap-item-b.ok { border-color: #4fae4e; color: #7fd67e; }
.ap-item-b.more { padding: 2px 7px; color: var(--text-dim); }
.ap-tasks-head.mine { color: var(--warning, #d9a95a); }
.ap-tasks-list .ap-item { margin-top: 0; }
.ap-to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 12px 0; font-size: 12px; color: var(--text-dim); background: var(--bg-header); }
.ap-to[hidden] { display: none; }
.ap-to-l { color: var(--text-muted); border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.ap-to-l:hover { color: var(--text); text-decoration: underline dotted; }
.ap-to-l i { font-size: 10px; }
.ap-to-calm { color: var(--text-muted); }
.ap-to-who { font-weight: 600; color: var(--text); }
.ap-to-who.agent { color: var(--accent-strong); }
.ap-to-who.agent i { font-size: 11px; }
.ap-to-bad { color: #e06c6c; font-weight: 600; }
.ap-to-kind { padding: 0 2px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text-muted); text-decoration: underline dotted; }
.ap-to-kind.mention { color: var(--text-muted); }
.ap-to-kind:hover { color: var(--text); }
.ap-to-agent { color: var(--text-muted); }
.ap-to-agent.on { color: var(--accent-strong); }
.ap-to-plus { padding: 0 8px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; line-height: 18px; border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent); color: var(--text-dim); background: transparent; }
.ap-to-plus:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ap-to-ord, .ap-to-reply { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-strong); }
.ap-to-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 2px; font-size: 11px; }
.ap-to-x:hover { color: #e06c6c; }
.ap-to-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--warning, #d9a95a); }
.ap-at { display: flex; flex-direction: column; gap: 1px; margin: 0 12px; padding: 4px; border-radius: 10px; background: var(--bg-sidebar); box-shadow: 0 4px 16px rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent); }
.ap-at[hidden] { display: none; }
.ap-at-i { display: flex; align-items: center; gap: 4px; padding: 5px 9px; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; color: var(--text); background: transparent; }
.ap-at-i.sel, .ap-at-i:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ap-at-hint { color: var(--text-muted); font-size: 12px; }
.ap-send.people { background: color-mix(in srgb, var(--warning, #d9a95a) 70%, var(--accent)); }
#agent-panel .cx-bg, #agent-panel .cx-plus, .ap-deck { display: none; }
:root[data-cx] #agent-panel .composer-row { display: grid; align-items: end; gap: 0; grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "plus attach sticker text timer resolve send"; }
:root[data-cx] #agent-panel .cx-bg { display: block; grid-row: 1; grid-column: plus-start / send-end; align-self: stretch; cursor: text; background: var(--cx-field); border: 1px solid var(--cx-line); border-radius: 22px; transition: border-color .15s, box-shadow .15s; }
:root[data-cx="card"] #agent-panel .composer-row { grid-template-areas: "text text text text text text text" "plus attach sticker . timer resolve send"; }
:root[data-cx="card"] #agent-panel .cx-bg { grid-row: 1 / 3; grid-column: 1 / -1; border-radius: 16px; }
:root[data-cx] #agent-panel .ap-composer { display: grid; align-items: end; gap: 0; padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "to to to to" "files files files files" "attach text deck send"; }
:root[data-cx] #agent-panel .ap-composer > .cx-bg { display: block; grid-area: 3 / 1 / 4 / -1; align-self: stretch; cursor: text; background: var(--cx-field); border: 1px solid var(--cx-line); border-radius: 22px; transition: border-color .15s, box-shadow .15s; }
:root[data-cx] #agent-panel .ap-composer:has(.ap-input:focus) > .cx-bg { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
:root[data-cx] .ap-composer > .ap-to { grid-area: to; padding: 0 4px 6px; background: transparent; }
:root[data-cx] .ap-composer > .ap-files { grid-area: files; padding: 0 0 6px; background: transparent; }
:root[data-cx] #agent-panel .ap-composer > .ap-input { grid-area: text; z-index: 1; align-self: stretch; min-height: 44px; max-height: 30vh; padding: 12px 8px 11px; background: transparent; border: 0; border-radius: 0; font-size: 14.5px; }
:root[data-cx] .ap-composer > .ap-attach, :root[data-cx] .ap-composer > .ap-deck { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; width: 34px; height: 34px; margin: 0 0 5px; padding: 0; border: 0; border-radius: 17px; cursor: pointer; font-size: 15px; color: var(--cx-ic); background: transparent; transition: opacity .15s, color .12s, background .12s; }
:root[data-cx] .ap-composer > .ap-attach { grid-area: attach; margin-left: 5px; }
:root[data-cx] .ap-composer > .ap-deck { grid-area: deck; }
:root[data-cx] .ap-composer > .ap-attach:hover, :root[data-cx] .ap-composer > .ap-deck:hover, :root[data-cx] .ap-composer > .ap-deck.open { color: var(--text); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
@media (hover: hover) {
    :root[data-cx] .ap-composer > .ap-attach { opacity: 0; }
    :root[data-cx] .ap-composer:hover > .ap-attach, :root[data-cx] .ap-composer:focus-within > .ap-attach, :root[data-cx] .ap-composer > .ap-attach:focus-visible { opacity: 1; }
}
:root[data-cx] .ap-composer > .ap-send { grid-area: send; position: relative; z-index: 1; width: 34px; min-width: 34px; height: 34px; margin: 0 5px 5px 2px; padding: 0; border-radius: 50%; font-size: 14px; transition: background .15s, transform .08s; }
:root[data-cx] .ap-composer > .ap-send:active:not(:disabled) { transform: scale(.93); }
:root[data-cx] .ap-send.cx-draft { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-strong); }
:root[data-cx] .ap-send.cx-draft:hover:not(:disabled) { filter: none; background: color-mix(in srgb, var(--accent) 34%, transparent); }
:root[data-cx] .ap-send.cx-idle { background: color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--text) 55%, transparent); }
:root[data-cx] .ap-send.cx-idle:disabled { opacity: 1; }
:root[data-cx="card"] #agent-panel .ap-composer { grid-template-areas: "to to to to" "files files files files" "text text text text" "attach . deck send"; }
:root[data-cx="card"] #agent-panel .ap-composer > .cx-bg { grid-area: 1 / 1 / -1 / -1; border-radius: 16px; }
:root[data-cx="card"] .ap-composer > .ap-to { padding: 9px 12px 0; }
:root[data-cx="card"] .ap-composer > .ap-files { padding: 8px 10px 0; position: relative; z-index: 1; }
:root[data-cx="card"] #agent-panel .ap-composer > .ap-input { padding: 8px 14px 3px; min-height: 38px; }
:root[data-cx]:not([data-cx-quick="chips"]) .ap-quick { display: none; }
:root[data-cx][data-cx-quick="chips"] .ap-composer > .ap-deck { display: none; }
:root[data-cx][data-cx-quick="chips"] .ap-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; padding: 8px 12px 0; background: var(--bg-header); }
:root[data-cx][data-cx-quick="chips"] .ap-quick::-webkit-scrollbar { display: none; }
:root[data-cx][data-cx-quick="chips"] .ap-q { flex: none; padding: 2px 9px; font-size: 12px; border-color: var(--cx-line); color: var(--text-muted); }
#agent-panel .sidebar { container: sb / inline-size; }
@media (max-width: 720px) {
    #agent-panel .messages { padding-left: 10px; padding-right: 10px; }
    .ap-msg { max-width: 95%; }
}
.ap-msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-height: 14px; }
.ap-msg-foot > .ap-time { margin-left: auto; font-size: 11px; }
.ap-msg-foot > .ap-item.quiet { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 11px; color: var(--text-muted); }
.ap-msg-foot > .ap-item.quiet i { font-size: 10px; }
@media (hover: hover) {
    :root[data-cx][data-cx-draft="wand"][data-cx-quick="deck"] .ap-composer > .ap-deck { display: none; }
}
#agent-btn .cx-team-n, #agent-btn .cx-team-at { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10.5px; font-weight: 700; line-height: 1; pointer-events: none; box-shadow: 0 0 0 2px var(--bg-header); }
#agent-btn .cx-team-n { top: -3px; right: -4px; background: var(--badge); color: #fff; }
#agent-btn .cx-team-n.quiet { background: color-mix(in srgb, var(--text-muted) 55%, var(--bg-header)); color: var(--text); font-weight: 600; }
#agent-btn .cx-team-at { bottom: -3px; right: -4px; background: color-mix(in srgb, var(--text-muted) 55%, var(--bg-header)); color: var(--text); }
#agent-btn .cx-team-at.unseen { background: #e06c6c; color: #fff; }
#agent-btn .cx-team-n[hidden], #agent-btn .cx-team-at[hidden] { display: none; }
#agent-btn.has-count.has-news::after { display: none; }
.ap-status:empty { display: none; }
.agent-panel:not([hidden]) { animation: ap-in .18s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 1280px) {
    .agent-panel:not([hidden]) { animation-name: ap-in-col; }
}
@media (prefers-reduced-motion: reduce) {
    .agent-panel:not([hidden]) { animation: none; }
}
.head-actions > #agent-btn { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; font-size: 15px; color: var(--accent-strong); background: var(--bg-hover); cursor: pointer; transition: background .15s; }
.head-actions > #agent-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, var(--bg-hover)); }
.with-agent .head-actions > #agent-btn { display: none; }
:root.cx-flow .head-actions > #agent-btn, :root.cx-flow .with-agent .ap-title { view-transition-name: cx-team; }
.ap-title { width: fit-content; max-width: 100%; }
.ap-q.sit { color: var(--text); border-color: color-mix(in srgb, var(--warning, #d9a95a) 55%, var(--border)); }
:root[data-cx][data-cx-quick="chips"] .ap-q.sit { color: var(--text); border-color: color-mix(in srgb, var(--warning, #d9a95a) 55%, var(--cx-line)); }
#agent-panel .ctx-dots { display: none; }
@media (hover: none) and (pointer: coarse) {
    #agent-panel .ctx-dots { display: inline-flex; position: absolute; top: 2px; right: 2px; z-index: 2; width: 22px; height: 22px; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); opacity: .55; font-size: 12px; cursor: pointer; }
    #agent-panel .ctx-dots:active { opacity: 1; background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
    .ap-msg::before { content: ''; float: right; width: 14px; height: 14px; }
    .ap-msg { position: relative; }
}
.ap-empty { opacity: .32; transition: opacity .2s ease; }
@media (hover: hover) {
    .ap-empty:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-empty { transition: none; }
}
.ap-empty.ap-empty-quiet { position: relative; flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; }
.ap-empty-quiet > i { font-size: 26px; }
.ap-empty-line { font-size: 13px; }
.ap-empty-quiet.holding { opacity: 1; }
.ap-help-btn { position: absolute; top: 0; right: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 16px; cursor: help; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ap-help-btn:hover, .ap-empty-quiet.holding .ap-help-btn { color: var(--text); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.ap-empty-quiet > .ap-help { position: absolute; inset: 34px 0 0; margin: 0; overflow-y: auto; padding: 4px 10px 10px; opacity: 1; text-align: center; background: var(--bg-thread); border-radius: 10px; }
.ap-empty-quiet > .ap-help[hidden] { display: none; }
@keyframes agent-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ap-tick-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ap-tick-out { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes ap-pend-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ap-conv { 0% { transform: translateX(-7px); } 55%, 100% { transform: none; } }
@keyframes ap-conv-in { 0% { transform: translateX(-7px) scale(0); } 55%, 100% { transform: none; } }
@keyframes ap-conv-out { 0% { transform: translateX(-7px); } 55%, 100% { transform: scale(0); } }
@keyframes ap-roll-in { from { transform: translateY(80%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ap-roll-out { from { transform: none; opacity: 1; } to { transform: translateY(-80%); opacity: 0; } }
@keyframes ap-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes ap-in-col { from { opacity: 0; } to { opacity: 1; } }
/* ═══ КІНЕЦЬ СПІЛЬНОГО ═══ */