@layer views {
/* Screenshots with markup, video player, attachments, upload tray */
.shot { position: relative; border-radius: var(--r-12); overflow: hidden; border: 1px solid var(--line-2); margin: 0 0 14px; cursor: zoom-in; max-width: 720px; background: var(--bg-3); }
.shot img { display: block; width: 100%; height: auto; }
.markup-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.markup-layer.editing { pointer-events: auto; cursor: crosshair; }
.markup-layer path, .markup-layer ellipse, .markup-layer line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.markup-layer text { font-family: var(--f-hand); font-weight: 700; font-size: var(--fs-26); }
.markup-layer .draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.4s 0.3s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mk-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; background: rgb(var(--ink-rgb) / 0.82); backdrop-filter: blur(8px); border: 1px solid rgb(var(--white-rgb) / 0.1); border-radius: var(--r-10); padding: 3px; cursor: default; z-index: var(--z-local-2); }
.mk-tools button { width: 28px; height: 28px; border-radius: var(--r-7); display: grid; place-items: center; color: var(--fg-2); }
.mk-tools button:hover { background: rgb(var(--white-rgb) / 0.08); color: var(--fg); }
.mk-tools button.on { background: var(--mark); color: var(--white); }
.mk-tools .sw { width: 14px; height: 14px; border-radius: var(--r-round); background: var(--c); box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.8); }
.mk-tools .vr { width: 1px; background: rgb(var(--white-rgb) / 0.12); margin: 5px 3px; }
.shot .cap { position: absolute; left: 10px; bottom: 10px; font-size: var(--fs-11); color: var(--fg); background: rgb(var(--ink-rgb) / 0.75); border-radius: var(--r-6); padding: 3px 8px; display: flex; gap: 6px; align-items: center; }

.video { border-radius: var(--r-12); overflow: hidden; border: 1px solid var(--line-2); background: var(--black); position: relative; max-width: 720px; margin: 0 0 14px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--black); }
.v-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(rgb(var(--black-rgb) / 0.65), transparent); font-size: var(--fs-12); color: var(--fg); pointer-events: none; }
.v-top .mono { font-size: var(--fs-11); color: var(--fg-2); }
.v-play { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: var(--r-round); background: color-mix(in srgb, var(--fg) 94%, transparent); color: var(--fg-on-light); display: grid; place-items: center; box-shadow: 0 10px 30px rgb(var(--black-rgb) / 0.5); transition: transform 150ms; }
.v-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.v-play .i { width: 26px; height: 26px; margin-left: 3px; }
.video.playing .v-play { opacity: 0; pointer-events: none; }
.v-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; background: linear-gradient(transparent, rgb(var(--black-rgb) / 0.8)); display: flex; align-items: center; gap: 10px; color: var(--fg); }
.v-bar button { width: 28px; height: 28px; border-radius: var(--r-7); display: grid; place-items: center; flex: none; }
.v-bar button:hover { background: rgb(var(--white-rgb) / 0.12); }
.v-bar .t { font-family: var(--f-mono); font-size: var(--fs-11); color: var(--fg-2); white-space: nowrap; }
.track { flex: 1; height: 22px; position: relative; cursor: pointer; display: flex; align-items: center; }
.track .rail2 { position: absolute; left: 0; right: 0; height: 4px; border-radius: var(--r-2); background: rgb(var(--white-rgb) / 0.22); }
.track .fill { position: absolute; left: 0; height: 4px; border-radius: var(--r-2); background: var(--loop); width: 0; }
.track .knob { position: absolute; width: 12px; height: 12px; border-radius: var(--r-round); background: var(--white); transform: translateX(-50%); left: 0; box-shadow: 0 0 0 3px var(--accent-line); }
.track .mk { position: absolute; top: -14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.track .mk i { width: 3px; height: 10px; border-radius: var(--r-2); background: var(--mark); margin-top: 16px; }
.track .mk span { position: absolute; bottom: calc(100% - 8px); font-size: var(--fs-10); white-space: nowrap; background: var(--mark); color: var(--white); padding: 1px 6px; border-radius: var(--r-4); opacity: 0; transition: 150ms; font-weight: 600; }
.track .mk:hover span { opacity: 1; }
.speed { font-family: var(--f-mono); font-size: var(--fs-11); border: 1px solid rgb(var(--white-rgb) / 0.25); border-radius: var(--r-5); padding: 1px 5px; width: auto !important; height: auto !important; }

.atts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; max-width: 900px; }
.att { border: 1px solid var(--line-2); border-radius: var(--r-11); overflow: hidden; background: var(--bg-2); cursor: pointer; text-align: left; position: relative; }
.att:hover { border-color: var(--fg-4); }
.att .th { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--bg-3); position: relative; overflow: hidden; }
.att .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att .th .big { font-family: var(--f-mono); font-size: var(--fs-12); font-weight: 600; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: var(--r-6); padding: 4px 8px; background: var(--bg-2); }
.att .th .ov { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); }
.att .th .ov span { width: 30px; height: 30px; border-radius: var(--r-round); background: rgb(var(--black-rgb) / 0.55); display: grid; place-items: center; }
.att .meta { padding: 7px 10px; display: flex; flex-direction: column; }
.att .meta b { font-weight: 500; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .meta span { font-size: var(--fs-10-5); color: var(--fg-3); }
.att .rm { position: absolute; top: 6px; right: 6px; opacity: 0; background: rgb(var(--ink-rgb) / 0.8); }
.att:hover .rm { opacity: 1; }

.uploads { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 900px; }
.up { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-10); background: var(--bg-2); font-size: var(--fs-12); }
.up .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up .st { color: var(--fg-3); font-size: var(--fs-11); white-space: nowrap; }
.up .bar { grid-column: 1 / -1; height: 4px; border-radius: var(--r-2); background: var(--bg-5); overflow: hidden; }
.up .bar i { display: block; height: 100%; background: var(--loop); transition: width 200ms; }
.up.error .st { color: var(--bad); }

/* Attachments panel */
.attachments { margin-top: 4px; }
.attachments .aside .toggle { margin-right: 10px; font-size: var(--fs-11-5); }
.drop-hint { display: flex; align-items: center; gap: 8px; max-width: 900px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-12); color: var(--fg-4); font-size: var(--fs-11-5); }
.sheet.file-over { box-shadow: inset 0 0 0 2px var(--accent-line); }
.sheet.file-over .drop-hint { border-color: var(--accent-line); color: var(--fg-2); }

/* Files shown inside Markdown */
.prose img.att-img { max-width: min(100%, 560px); border-radius: var(--r-9); border: 1px solid var(--line-2); cursor: zoom-in; display: block; margin: 6px 0; }
.prose a.att-link::before { content: "📎 "; }

/* Viewer pieces */
.lb-tools { display: flex; align-items: center; gap: 6px; padding: 0 16px 10px; color: var(--fg-2); flex-wrap: wrap; }
.lb-tools .vr { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.lb-tools .mk-bar { display: flex; gap: 2px; background: rgb(var(--ink-rgb) / 0.82); border: 1px solid rgb(var(--white-rgb) / 0.1); border-radius: var(--r-9); padding: 3px; }
.lb-tools .mk-bar button { width: 28px; height: 28px; border-radius: var(--r-7); display: grid; place-items: center; color: var(--fg-2); }
.lb-tools .mk-bar button:hover { background: rgb(var(--white-rgb) / 0.08); color: var(--fg); }
.lb-tools .mk-bar button.on { background: var(--mark); color: var(--white); }
.lb-tools .mk-bar .sw { width: 14px; height: 14px; border-radius: var(--r-round); background: var(--c); box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.8); }
.lb-tools .mk-bar .vr { height: auto; margin: 5px 3px; background: rgb(var(--white-rgb) / 0.12); }
.lb-stage.marking { cursor: crosshair; }
.lb-body { flex: 1; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center; }
.lb-body .video { width: min(1200px, 100%); max-width: none; }
.lb-body .empty { margin-top: 10vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v-markers { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: min(1200px, 100%); }
.v-markers .input.sm { height: 28px; width: 260px; }
.log-view { width: min(1200px, 100%); }
.log-view pre { max-height: none; }
}