/* Recording control (Zavolať menu, live call) and the conversation timeline ("Priebeh rozhovoru"). */
:root { --lane-0: #1663be; --lane-1: #9fcc2e; --lane-2: #fa9f1b; --lane-3: #00a9b3; --lane-4: #8e5bd6; --lane-5: #df5645; }
.lane-color-0 { color: var(--lane-0); } .lane-color-1 { color: #5f8a0f; } .lane-color-2 { color: #c46f00; }
.lane-color-3 { color: #00808a; } .lane-color-4 { color: var(--lane-4); } .lane-color-5 { color: var(--lane-5); }
.lane-bg-0 { background: var(--lane-0); } .lane-bg-1 { background: var(--lane-1); } .lane-bg-2 { background: var(--lane-2); }
.lane-bg-3 { background: var(--lane-3); } .lane-bg-4 { background: var(--lane-4); } .lane-bg-5 { background: var(--lane-5); }

.call-recording-choice { padding: 8px 10px; border-top: 1px solid var(--fl-light); border-bottom: 1px solid var(--fl-light); }
.dial-pad .call-recording-choice { border: 0; padding: 4px 0; }
.call-recording-choice .switch input:checked + span { background: var(--fl-danger); }
.call-recording-choice .switch input:focus-visible + span { outline: 2px solid var(--fl-link); outline-offset: 2px; }

.recording-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.recording-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fl-light); }
.recording-dot.on { background: var(--fl-danger); animation: recording-pulse 1.4s ease-in-out infinite; }
@keyframes recording-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .recording-dot.on { animation: none; } }
.recording-status .pill { margin-right: 4px; }
.recording-how h3 { font-size: 14px; margin-top: 12px; }
.notetaker-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 8px; }
.notetaker-form blockquote { margin: 4px 0; padding: 8px 12px; border-left: 3px solid var(--fl-secondary); background: var(--fl-zebra); }

.conversation-timeline { margin: 12px 0; }
.conversation-timeline h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.swimlanes { display: grid; gap: 6px; }
.swimlane { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 10px; align-items: center; }
.swimlane-label { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.swimlane-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swimlane-track { position: relative; height: 22px; background: var(--fl-zebra); border-radius: 4px; overflow: hidden; }
.swimlane-segment { position: absolute; top: 3px; bottom: 3px; border: 0; border-radius: 3px; padding: 0; cursor: pointer; opacity: .85; min-width: 3px; }
.swimlane-segment:hover, .swimlane-segment:focus-visible { opacity: 1; outline: 2px solid var(--fl-dark); outline-offset: 0; z-index: 1; }
.swimlane-caption { min-height: 2.6em; margin: 6px 0 10px; }
.conversation-timeline, .conversation-analysis > div { min-width: 0; }
.conversation-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px 20px; }
.conversation-analysis h4 { font-size: 13px; margin: 6px 0; }
.talk-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.talk-blocks li { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px; }
.talk-block-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--fl-light); }
.reaction-list { margin: 0; padding-left: 18px; }
.turn-sequence, .conversation-analysis details ul { max-height: 260px; overflow: auto; padding-left: 22px; }
.conversation-analysis .seek { background: none; border: 0; color: var(--fl-link); font: inherit; font-family: var(--mono); cursor: pointer; padding: 0; }

@media (max-width: 700px) {
  .swimlane { grid-template-columns: 1fr; gap: 2px; }
  .swimlane-label { flex-direction: row; gap: 8px; align-items: baseline; }
}
.conversation { grid-template-columns: minmax(0, 1fr); }