/* ===== Чат команды ===== */
.chat-col { min-width: 0; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.chat { position: relative; height: 100%; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); }
.chat-head > div { flex: 1; min-width: 0; }
.chat-title { font-weight: 600; }
.chat-sub { font-size: var(--fs-xs); }
.chat-scroll { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); outline: none; }

.msg { display: flex; gap: 10px; padding: 6px 4px; border-radius: var(--r-md); }
.msg.is-grouped { padding-top: 0; }
.msg-avatar { background: none; border: 0; padding: 0; height: fit-content; border-radius: 50%; }
.msg-avatar[data-open-employee]:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }
.msg-gutter { width: 26px; flex: none; }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xs); margin-bottom: 2px; }
.msg-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.msg-text { overflow-wrap: anywhere; color: var(--text); }
.msg-own .msg-text { background: var(--accent-soft); padding: 8px 12px; border-radius: 4px 12px 12px 12px; display: inline-block; }
.msg-status { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); margin-top: 3px; }
.msg-status .icon { width: 13px; height: 13px; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mention { background: var(--accent-soft); color: var(--accent); border: 0; padding: 0 4px; border-radius: 4px; font-weight: 600; }
.mention:hover { text-decoration: underline; }

.msg-system { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 8px 0; color: var(--text-2); font-size: var(--fs-sm); }
.msg-card { margin: 8px 4px 8px 40px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.msg-card.is-attention { border-color: color-mix(in srgb, var(--st-waiting) 50%, var(--border)); }
.msg-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-2); border-bottom: 1px solid var(--border); }
.msg-card-head span:nth-child(2) { flex: 1; }
.msg-card-head .faint { font-size: var(--fs-xs); }
.msg-card-body { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; }
button.msg-card-body:hover { background: var(--surface-3); }
.msg-card-title { font-weight: 600; }
.msg-card-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.msg-card-row .badge { margin-left: auto; }
.msg-card-actions { display: flex; gap: 8px; }

.chat-typing { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--text-2); font-size: var(--fs-sm); }
.chat-typing[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: dot 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-3px); background: var(--accent); } }

.chat-jump {
    position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-full);
    background: var(--accent); color: var(--on-accent); border: 0; box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 500;
}
.chat-jump[hidden] { display: none; }
.chat-jump .count { background: var(--on-accent); color: var(--accent); }

.chat-drop {
    position: absolute; inset: 8px; z-index: 10; border: 2px dashed var(--accent); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 90%, transparent); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-weight: 600; pointer-events: none;
}
.chat-drop[hidden] { display: none; }

/* Composer */
.composer { position: relative; margin: 0 var(--sp-3) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color var(--dur), box-shadow var(--dur); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-input { display: block; width: 100%; border: 0; background: none; outline: none; resize: none; padding: 10px 12px 4px; max-height: 160px; line-height: 1.45; }
.composer-input::placeholder { color: var(--text-3); }
.composer-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.composer-hint { margin-left: 6px; font-size: var(--fs-xs); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-hint .kbd { height: 17px; font-size: 10px; }
.composer-send { width: 32px; padding: 0; }
.composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.composer-files:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 8px; border-radius: var(--r-sm); background: var(--surface-3); font-size: var(--fs-sm); max-width: 100%; }
.file-chip .faint { font-size: var(--fs-xs); }
.msg-files .file-chip { padding-right: 8px; }
.file-chip-x { background: none; border: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--text-3); }
.file-chip-x:hover { background: var(--surface-2); color: var(--text); }

.mention-pop { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 6px); z-index: 20; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.mention-pop[hidden] { display: none; }
.mention-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: var(--r-sm); text-align: left; }
.mention-item .faint { margin-left: auto; font-size: var(--fs-xs); }
.mention-item.is-focused, .mention-item:hover { background: var(--surface-2); }

/* ===== Панель сотрудника ===== */
.emp-head { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.emp-head-top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.emp-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.emp-head-info .faint { font-size: var(--fs-sm); }
.emp-name { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 650; }
.emp-actions { display: flex; gap: 8px; margin-top: var(--sp-4); flex-wrap: wrap; }
.emp-tabs { padding: 0 var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.emp-tabs { gap: 0; }
.emp-tabs .tab { padding: 10px 7px; font-size: var(--fs-sm); flex: none; }
.emp-tabs .count { transform: scale(.85); }
.emp-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
.emp-section { margin-bottom: var(--sp-5); }
.emp-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.emp-task { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); text-align: left; }
.emp-task:hover { border-color: var(--border-strong); }
.emp-task-title { font-weight: 600; }
.emp-task-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.emp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--sp-5); }
.emp-stat { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.emp-stat .icon { color: var(--text-3); }
.emp-stat .faint { font-size: var(--fs-xs); }
.log-row { display: flex; gap: 12px; padding: 6px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.log-row:last-child { border-bottom: 0; }
.log-row .mono { font-size: var(--fs-xs); padding-top: 1px; }
.log-row.is-current span:last-child { color: var(--accent); font-weight: 500; }
.file-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; margin-bottom: 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); text-align: left; }
.file-row:hover { border-color: var(--border-strong); }
.file-row .icon { color: var(--text-2); }
.file-row-title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .faint { font-size: var(--fs-xs); }
.decision-row { padding: 12px; margin-bottom: 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); }
.decision-row.is-open { border-color: color-mix(in srgb, var(--st-waiting) 50%, var(--border)); }
.decision-row-head { display: flex; align-items: center; gap: 8px; }
.memory-row { display: flex; gap: 10px; padding: 8px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.memory-row .icon { color: var(--accent); margin-top: 2px; }
.dm-list { display: flex; flex-direction: column; gap: 8px; }
.dm { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.dm-own { align-self: flex-end; align-items: flex-end; }
.dm-bubble { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-md); }
.dm-own .dm-bubble { background: var(--accent); color: var(--on-accent); }
.dm-time { font-size: var(--fs-xs); margin-top: 2px; }
.emp-composer { display: flex; gap: 8px; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.emp-composer .btn-icon { background: var(--accent); color: var(--on-accent); }

/* Модалки решений и выбор роли */
.decision-author { display: flex; align-items: center; gap: 10px; }
.role-grid, .option-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.option-list { grid-template-columns: 1fr; }
.role-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.role-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.role-option input { accent-color: var(--accent); }
.artifact-preview { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); }
.artifact-preview img { border-radius: var(--r-md); max-height: 380px; width: 100%; object-fit: cover; }
.artifact-noimg { height: 160px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-3); }
.artifact-preview-meta { display: flex; align-items: center; gap: 10px; }
.artifact-preview-meta .faint { font-size: var(--fs-xs); }

@media (max-width: 860px) {

}

/* Узкий экран: чат выезжает слева поверх офиса */
.chat-toggle, .chat-scrim { display: none; }
@media (max-width: 860px) {
    .view-office { position: relative; }
    .view-office .chat-col {
        display: block; position: absolute; top: 0; bottom: 0; left: 0; z-index: 60; width: min(380px, 92vw);
        transform: translateX(-100%); transition: transform 240ms var(--ease); box-shadow: var(--shadow-lg);
    }
    .view-office.chat-open .chat-col { transform: none; }
    .chat-scrim { position: absolute; inset: 0; z-index: 55; background: var(--backdrop); }
    .view-office.chat-open .chat-scrim { display: block; }
    .chat-toggle { display: inline-flex; position: absolute; left: 12px; bottom: 12px; z-index: 6; box-shadow: var(--shadow-md); }
    .chat-toggle .count { background: var(--on-accent); color: var(--accent); }
    .composer-hint { display: none; }
    .emp-drawer { width: 100%; }
}

/* U-06: токены и $ под ответом агента. */
.msg-usage { margin-top: 4px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* K21: карточка вопроса агента в чате */
.msg-card-who { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: inherit; font-weight: 600; cursor: pointer; }
.msg-card-options { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; color: var(--text-2, inherit); }
.msg-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-card-title p { margin: 0; }
.msg-card-head > span:not(.faint) { white-space: nowrap; }
.msg-card-answer { display: flex; align-items: flex-start; gap: 6px; color: var(--text-2, inherit); }
.msg-card .badge.status { align-self: flex-start; }
.msg-card-head { flex-wrap: wrap; row-gap: 2px; }
.msg-plan-btn .icon { color: var(--accent); }
/* K25: карточка результата */
.msg-card.is-result { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.msg-card.is-result .msg-card-head .icon:first-child { color: var(--accent); }
.result-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.result-thumb { padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); cursor: zoom-in; aspect-ratio: 3 / 4; }
.result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-thumb:hover { border-color: var(--accent); }