/* ==========================================================================
   css/apps/lectures.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3701-3803.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Lectures (App) -- */
.lec-wrap { flex:1; display:flex; min-height:0; }
.lec-left { width:340px; flex-shrink:0; border-right:1px solid var(--border); padding:20px; overflow-y:auto; }
@media (max-width:760px) { .lec-left { width:200px; } }
.lec-recorder { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; }
.lec-rec-title { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:14px; }
.lec-rec-name { width:100%; box-sizing:border-box; background:var(--bg-elevated); border:1px solid var(--border); border-radius:9px; padding:10px 12px; color:var(--text-primary); font-size:13.5px; outline:none; }
.lec-rec-name:focus { border-color:var(--accent); }
.lec-rec-timer { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-secondary); margin:16px 0 4px; letter-spacing:.02em; }
.lec-rec-timer.live { color:#ef4444; }
.lec-spectrum { width:100%; height:56px; display:block; margin:8px 0 4px; border-radius:8px; background:var(--bg-void); border:1px solid var(--border); }
.lec-rec-level { font-size:11.5px; font-weight:700; margin-bottom:12px; }
.lec-rec-level.live { color:#22c55e; }
.lec-rec-level.quiet { color:#f59e0b; }
.lec-rec-hint { font-size:11.5px; color:var(--text-muted); margin-bottom:16px; }
.lec-rec-btn { display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; background:var(--accent); color:#fff; border:none; border-radius:11px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; }
.lec-rec-btn:hover { opacity:.92; }
.lec-rec-btn.stop { background:#ef4444; }
/* Right pane is a column: a pinned folder bar over the scrolling recording list. */
.lec-right { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
/* Folders behave like a file manager: a breadcrumb, folder tiles you double-click to
   open, and recordings you drag onto them. */
.lec-crumbs { flex:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--border); }
.lec-crumb { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 11px; border-radius:8px; }
.lec-crumb:hover { background:var(--bg-hover); color:var(--text-primary); }
.lec-crumb.here { color:var(--text-primary); cursor:default; }
.lec-crumb.here:hover { background:none; }
.lec-crumb.drop-on { background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--text-primary); box-shadow:inset 0 0 0 2px var(--accent); }
.lec-crumb-sep { color:var(--text-muted); opacity:.6; font-size:13px; }
.lec-crumb-new { margin-left:auto; border:1px dashed var(--border-strong); color:var(--text-muted); }
.lec-crumb-new:hover { color:var(--accent); border-color:var(--accent); }
.lec-folder-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin-bottom:22px; }
.lec-folder-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 10px 13px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; user-select:none; }
.lec-folder-tile:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.lec-folder-tile.drop-on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); box-shadow:0 0 0 2px var(--accent); }
.lec-folder-tile > svg { color:var(--accent); }
.lec-folder-name { font-size:13px; font-weight:600; color:var(--text-primary); text-align:center; word-break:break-word; line-height:1.3; }
.lec-folder-count { font-size:11px; color:var(--text-muted); }
.lec-folder-acts { position:absolute; top:5px; right:5px; display:none; gap:1px; }
.lec-folder-tile:hover .lec-folder-acts { display:flex; }
.lec-card.lec-dragging { opacity:.4; }
.lec-drag-hint { font-size:11.5px; color:var(--text-muted); margin:-6px 0 14px; }
.lec-scroll { flex:1; overflow-y:auto; padding:18px 20px; }
.lec-list-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Unposted local drafts (a recording that was interrupted). Amber, because it is a
   call to action: the audio exists only on this device until it is posted. */
.lec-draft { background:color-mix(in srgb,#f59e0b 10%,var(--bg-surface)); border:1px solid color-mix(in srgb,#f59e0b 45%,transparent); border-radius:13px; padding:13px 14px; margin-top:14px; }
.lec-draft-title { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#f59e0b; margin-bottom:6px; }
.lec-draft-meta { font-size:12px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; word-break:break-word; }
.lec-draft-acts { display:flex; flex-wrap:wrap; gap:7px; }
.lec-draft-acts button { border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary); border-radius:8px; padding:6px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.lec-draft-acts button:hover { background:var(--bg-hover); color:var(--text-primary); }
.lec-draft-acts button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.lec-draft-acts button.danger:hover { background:color-mix(in srgb,#ef4444 18%,transparent); border-color:#ef4444; color:#ef4444; }
.lec-icon-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:5px; border-radius:7px; flex-shrink:0; display:inline-flex; }
.lec-icon-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.lec-rename { display:flex; gap:7px; align-items:center; }
.lec-rename input { flex:1; min-width:0; background:var(--bg-void); border:1px solid var(--accent); border-radius:8px; padding:6px 10px; color:var(--text-primary); font-size:14px; font-weight:600; outline:none; }
.lec-rename button { border:none; border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
.lec-card-folder { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-muted); background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; padding:2px 9px; }
.lec-empty { color:var(--text-muted); font-size:13.5px; text-align:center; padding:60px 20px; }
.lec-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:13px; padding:14px 16px; margin-bottom:14px; }
.lec-card-head { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.lec-av { width:38px; height:38px; flex-shrink:0; }
.lec-av img, .lec-av span { width:38px; height:38px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.lec-card-info { flex:1; min-width:0; }
.lec-card-name { font-size:14.5px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lec-card-meta { font-size:12px; color:var(--text-muted); margin-top:1px; }
.lec-like { display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:700; padding:4px 7px; border-radius:8px; flex-shrink:0; }
.lec-like:hover { background:var(--bg-hover); color:var(--text-secondary); }
.lec-like.liked { color:#ef4444; }
.lec-del { background:none; border:none; color:var(--text-muted); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; flex-shrink:0; }
.lec-del:hover { background:color-mix(in srgb,#ef4444 18%,transparent); color:#ef4444; }
.lec-audio { width:100%; height:36px; margin-bottom:8px; }
.lec-cmt-toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 0; }
.lec-cmt-toggle:hover { color:var(--text-secondary); }
.lec-comments { margin-top:10px; border-top:1px solid var(--border); padding-top:10px; }
.lec-cmt-list { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; max-height:280px; overflow-y:auto; }
.lec-cmt { display:flex; gap:9px; }
.lec-cmt-av img, .lec-cmt-av span { width:26px; height:26px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.lec-cmt-meta { font-size:12px; color:var(--text-muted); } .lec-cmt-meta b { color:var(--text-secondary); }
.lec-cmt-text { font-size:13.5px; color:var(--text-primary); line-height:1.45; word-break:break-word; }
.lec-cmt-more { background:none; border:none; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; padding:4px 0; }
.lec-cmt-bar { display:flex; gap:8px; }
.lec-cmt-input { flex:1; background:var(--bg-elevated); border:1px solid var(--border); border-radius:9px; padding:8px 11px; color:var(--text-primary); font-size:13px; outline:none; }
.lec-cmt-input:focus { border-color:var(--accent); }
.lec-cmt-send { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:0 16px; font-size:13px; font-weight:600; cursor:pointer; }
.paint-attrib { position:absolute; display:none; pointer-events:none; background:rgba(0,0,0,.82); color:#fff; font-size:12px; font-weight:600; padding:4px 9px; border-radius:7px; white-space:nowrap; z-index:5; }
.paint-sticker-pop { position:absolute; top:8px; right:8px; width:260px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:12px; padding:12px; z-index:10; box-shadow:0 18px 50px -16px rgba(0,0,0,.6); }
.paint-sp-head { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.paint-sp-emojis { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; margin-bottom:10px; }
.paint-sp-emoji { background:none; border:none; font-size:19px; cursor:pointer; border-radius:6px; padding:3px 0; line-height:1; }
.paint-sp-emoji:hover { background:var(--bg-hover); }
.paint-sp-row { display:flex; gap:6px; margin-bottom:10px; }
.paint-sp-input { flex:1; min-width:0; background:var(--bg-void,#0a0b10); border:1px solid var(--border); border-radius:8px; padding:7px 9px; color:var(--text-primary); font-size:13px; }
.paint-sp-input:focus { outline:none; border-color:var(--accent); }
.paint-sp-upload { background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; white-space:nowrap; }
.paint-sp-upload:hover { border-color:var(--accent); color:var(--accent); }
.paint-sp-sizes { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.paint-sp-size { width:28px; height:26px; border-radius:7px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; font-size:12px; font-weight:700; }
.paint-sp-size.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.paint-sp-hint { font-size:11px; color:var(--text-muted); margin-top:9px; }