/* ход облачного чата и чата компьютера: как журнал режима кода в Докки App (local-journal.css, journal.css, план) */
.work-journal { --journal-positive: #6fc99b; --journal-danger: #ee7b83; margin: 0 0 6px; min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.work-journal[hidden], .work-journal [hidden] { display: none !important; }
.journal-timeline { min-width: 0; }

/* ожидание до первого события */
.work-journal .journal-waiting { margin: 2px 0 14px; gap: 8px; font-size: 14px; animation: journal-swap .2s ease both; }
.journal-waiting .local-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* этап «Работал…»: точки, подпись, правки, секундомер и стрелка в одну строку */
.work-journal .activity { margin: 2px 0 6px; color: var(--muted); }
/* общие details и summary ответа (рамка, жирный заголовок) к журналу не относятся */
.message-body .work-journal details.activity { margin: 2px 0 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.message-body .work-journal summary { font-weight: 400; }
.message-body .work-journal details.journal-change { margin: 8px 0 2px; padding: 0; border: 1px solid var(--line); border-radius: 14px; }
.work-journal .activity > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.work-journal .activity > summary::-webkit-details-marker { display: none; }
.work-journal .activity > summary::marker { content: ''; }
.work-journal .activity > summary > svg { flex: none; width: 14px; height: 14px; transform: translateY(-1px); transition: transform .22s var(--ease); }
.work-journal .activity.is-open > summary > svg { transform: translateY(-1px) rotate(180deg); }
.work-journal .activity::details-content { block-size: auto; transition: none; overflow: visible; }
.journal-summary-copy { flex: 0 1 auto; min-width: 0; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.journal-summary-copy.swap { animation: journal-swap .2s ease both; }
.journal-duration { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--faint); }
.journal-duration:empty { display: none; }
.journal-badge { display: inline-flex; flex: none; overflow: hidden; border-radius: 6px; font-size: 12px; }
.journal-badge b { padding: 1px 6px; font-weight: 600; }
.journal-badge .positive { background: color-mix(in srgb, var(--journal-positive) 20%, transparent); }
.journal-badge .danger { background: color-mix(in srgb, var(--journal-danger) 20%, transparent); }
.journal-dots { display: none; grid-template-columns: repeat(2, 5px); grid-auto-rows: 5px; gap: 3px; flex: none; margin-right: 2px; }
.journal-dots b { border-radius: 50%; background: var(--accent); animation: journal-dot 1.2s ease-in-out infinite; }
.journal-dots b:nth-child(2) { animation-delay: .15s; }
.journal-dots b:nth-child(4) { animation-delay: .3s; }
.journal-dots b:nth-child(3) { animation-delay: .45s; }
.journal-segment.is-running > summary > .journal-dots, .journal-waiting .journal-dots { display: grid; }
@keyframes journal-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes journal-swap { from { opacity: 0; } to { opacity: 1; } }

/* строки этапа в рамке */
.work-journal .activity-body { margin: 6px 0 0; padding: 0; }
.work-journal .journal-history { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.work-journal .journal-history > * { padding: 9px 14px; border-top: 1px solid var(--line); }
.work-journal .journal-history > :first-child { border-top: 0; }
.work-journal .activity-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.work-journal .action-state { display: grid; place-items: center; flex: none; }
.work-journal .action-state svg { width: 14px; height: 14px; }
.work-journal .error-detail { margin: 0; color: var(--journal-danger); font-size: 13px; overflow-wrap: anywhere; }
.work-journal .activity-line .error-detail { flex-basis: 100%; margin-left: 22px; font-size: 12px; }
.journal-stage { padding: 7px 0; color: var(--muted); font-size: 13px; }
.work-journal .journal-history > .journal-stage { padding-block: 9px; }
.journal-segment, .journal-stage, .journal-commentary { animation: journal-swap .22s ease both; }

/* комментарий модели между этапами - обычный текст ответа */
.work-journal .journal-commentary { color: var(--text); padding: 6px 0 12px; overflow-wrap: anywhere; }
.work-journal .journal-commentary > :first-child { margin-top: 0; }
.work-journal .journal-commentary > :last-child { margin-bottom: 0; }

/* дифф или вывод команды под действием */
.journal-change { margin: 8px 0 2px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.journal-change > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 12px; list-style: none; font-size: 12px; }
.journal-change > summary::-webkit-details-marker { display: none; }
.journal-change > summary::marker { content: ''; }
.journal-change > summary svg { flex: none; transition: transform .22s var(--ease); }
.journal-change > summary span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.journal-change > summary b { font-weight: 500; }
.journal-change > summary .positive { color: var(--journal-positive); }
.journal-change > summary .danger { color: var(--journal-danger); }
.journal-change[open] > summary > svg:first-child { transform: rotate(90deg); }
.journal-change-body { max-height: min(360px, 45dvh); margin: 0; padding: 10px 12px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); color: var(--text); font: 12px/1.5 "SFMono-Regular", ui-monospace, Menlo, monospace; white-space: pre; }
.journal-change-body:is(.is-output, .is-text) { white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-change-body span { display: block; }
.journal-change-body .is-add { background: color-mix(in srgb, var(--journal-positive) 14%, transparent); color: var(--journal-positive); }
.journal-change-body .is-del { background: color-mix(in srgb, var(--journal-danger) 14%, transparent); color: var(--journal-danger); }
.journal-change-body .is-hunk { color: var(--muted); }

/* итог хода: остановка и ошибка */
.work-journal .journal-outcome { margin: 0 0 8px; }
.work-journal .journal-error { margin: 0 0 6px; font-size: 13px; }
.work-journal .journal-error-reason { margin: 0 0 10px; white-space: pre-wrap; }

/* живой план под журналом */
.live-plan { margin: 4px 0 16px; padding: 12px 16px 8px; border: 1px solid var(--line); border-radius: 14px; }
.live-plan-heading { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.live-plan .plan-list { margin: 6px 0 0; padding: 0; list-style: none; }
.live-plan .plan-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--text); font-size: 14px; }
.live-plan .plan-list li.completed { color: var(--muted); }
.live-plan .plan-list li > span { min-width: 0; overflow-wrap: anywhere; }
.plan-list .plan-status { flex: 0 0 16px; color: var(--faint); }
.plan-list .running .plan-status { color: var(--accent); animation: spin .8s linear infinite; }
.plan-list .completed .plan-status { color: var(--journal-positive); }
.plan-list li:is(.cancelled, .failed, .blocked) .plan-status { color: var(--journal-danger); animation: none; }

@media (hover: hover) and (pointer: fine) {
  .work-journal .activity > summary:hover, .journal-change > summary:hover { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .work-journal *, .work-journal ::before, .work-journal ::after { animation: none !important; transition: none !important; }
}