/* Telas específicas da área logada. */
.det { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 1000px) { .det { grid-template-columns: 1fr } }

.player { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px }
.timeline { position: relative; height: 46px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; overflow: hidden }
.timeline .lane { position: absolute; left: 0; right: 0; height: 16px }
.timeline .lane.sys { top: 6px } .timeline .lane.mic { top: 24px }
.timeline .blk { position: absolute; top: 0; bottom: 0; border-radius: 2px }
.timeline .lane.sys .blk { background: var(--teal); opacity: .55 }
.timeline .lane.mic .blk { background: var(--violet); opacity: .55 }
.timeline .blk.silent { opacity: .12 }
.timeline .fr { position: absolute; top: 0; bottom: 0; width: 2px; background: #f0b46b }
.timeline .ph { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none }
.ctrl { display: flex; gap: 12px; align-items: center; margin-top: 10px; font: 12.5px var(--mono); color: var(--muted); flex-wrap: wrap }
.play { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: var(--teal-ink); border: 0; cursor: pointer; font-size: 13px; display: grid; place-items: center }
.legend span { margin-left: 12px }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px }

.transcript { max-height: 70vh; overflow-y: auto; padding-right: 4px }
.seg { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer }
.seg:hover { background: #102028 }
.seg.cur { background: #0f2a31 }
.seg .t { font: 11.5px var(--mono); color: var(--muted); padding-top: 2px }
.seg .who { font-weight: 600; font-size: 12.5px }
.seg .who.mic { color: var(--violet) } .seg .who.system { color: var(--teal) }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px }
.thumb { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; background: var(--bg) }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.thumb small { position: absolute; right: 4px; bottom: 3px; background: rgba(0,0,0,.65); color: #fff; padding: 0 5px; border-radius: 3px; font: 10px var(--mono) }

.item { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.item:last-child { border-bottom: 0 }
.tag { font: 500 10px var(--mono); padding: 2px 6px; border-radius: 4px; height: fit-content; white-space: nowrap }
.tag.decision { background: var(--info-bg); color: var(--info) } .tag.task, .tag.commitment, .tag.request { background: #0c2c33; color: var(--teal) } .tag.risk, .tag.bug { background: var(--warn-bg); color: var(--warn) } .tag.question { background: #211d3a; color: var(--violet) }
.summary { font-size: 13.5px; line-height: 1.6 } .summary h1, .summary h2, .summary h3 { font-size: 14px; margin: 10px 0 4px } .summary ul { padding-left: 18px; margin: 4px 0 }

.prop { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-bottom: 10px }
.prop .act { font: 600 11px var(--mono); color: var(--teal); text-transform: uppercase; letter-spacing: .04em }
.prop h4 { font: 600 14.5px var(--sans); margin: 3px 0 }
.prop q { display: block; font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; margin-top: 4px; quotes: none }
.prop .bt { display: flex; flex-direction: column; gap: 6px; align-items: stretch }

.rule { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px }
.rule.off { opacity: .55 }
.rule .pos { font: 600 13px var(--mono); color: var(--violet) }
.code6 { font: 700 30px var(--mono); letter-spacing: 6px; text-transform: uppercase; text-align: center }
.search-hit { padding: 10px 0; border-bottom: 1px solid var(--line) }
.search-hit mark { background: #2a3d14; color: #d9f99d; border-radius: 3px; padding: 0 2px }

.recpill{display:inline-block;margin:0 0 14px;background:#3a0d12;color:#ff8a8a;border:1px solid #7a1f28;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;text-decoration:none}
.vidbox{display:block;width:100%;max-height:60vh;background:#000;border-radius:10px;margin-bottom:10px;object-fit:contain}
.recprev{width:100%;max-height:300px;background:#000;border-radius:8px;object-fit:contain}
.timeline .lane.vidlane{top:42px;height:8px}
.timeline:has(.vidlane){height:56px}
.lane.vidlane .blk{background:#e879a8;opacity:.7}
.seg .who.spk{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.seg .who.spk-0{color:#2bc5da}.seg .who.spk-1{color:#f0b46b}.seg .who.spk-2{color:#86efac}.seg .who.spk-3{color:#f9a8d4}.seg .who.spk-4{color:#93c5fd}.seg .who.spk-5{color:#fca5a5}