/* Dead Feed v2: Windows 98. Built on 98.css (/vendor/98); this file lays the
   site out as windows and adds what 98.css doesn't have. Colors live here.
   (The old dark theme is kept in style-dark.css.) */
:root {
  /* Classic light Windows 98 (silver windows, white panels), with maroon title
     bars and a black desktop. For the dark version, use these instead:
       --face #3c3c3c  --panel #4c4c4c  --light #474747  --text #e6e6e6  --dim #a0a0a0
       --e1 #6a6a6a  --e2 #545454  --e3 #262626  --e4 #0a0a0a  (and light icons) */
  --desk: #000;              /* the desktop behind the windows */
  --face: silver;            /* window and button grey */
  --panel: #fff;             /* the feed, lists, text boxes */
  --light: #dfdfdf;          /* a pressed-in button */
  --hl: #800000;             /* title bars and selection: maroon instead of Win98 blue */
  --text: #000;
  --dim: #444;
  --content: Arial, Helvetica, sans-serif; /* posts and comments, for reading */
  --pixel: "Pixelated MS Sans Serif", Arial, sans-serif;
  /* The 3D edges, in dark shades: outer light, inner light, inner dark, outer dark. */
  --e1: #fff; --e2: #dfdfdf; --e3: grey; --e4: #0a0a0a;
  --raised: inset -1px -1px var(--e4), inset 1px 1px var(--e1), inset -2px -2px var(--e3), inset 2px 2px var(--e2);
  --pressed: inset -1px -1px var(--e1), inset 1px 1px var(--e4), inset -2px -2px var(--e2), inset 2px 2px var(--e3);
  --sunken: inset -1px -1px var(--e1), inset 1px 1px var(--e3), inset -2px -2px var(--e2), inset 2px 2px var(--e4);
  scrollbar-color: var(--face) var(--panel);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk); color: var(--text); font: 11px var(--pixel); overflow: hidden;
  -webkit-font-smoothing: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { color: var(--text); }

/* Icons: your pixel art (16x16 PNGs in /icons), drawn crisp, never blurred. */
.ico {
  display: inline-block; width: 16px; height: 16px; flex: none;
  background: var(--icon) center / contain no-repeat; image-rendering: pixelated;
}
.ico.big { width: 32px; height: 32px; }
.i-like { --icon: url(/icons/like.svg?v=3); }
.i-dislike { --icon: url(/icons/dislike.svg?v=3); }
.i-comment { --icon: url(/icons/comment.svg?v=3); }
.i-share { --icon: url(/icons/share.svg?v=3); }
.i-plus { --icon: url(/icons/plus.svg?v=3); }
.i-send { --icon: url(/icons/send.svg?v=3); }
.i-rooms { --icon: url(/icons/rooms.svg?v=3); }
.i-new-room { --icon: url(/icons/new-room.svg?v=3); }
.i-users { --icon: url(/icons/users.svg?v=3); }
.i-close { --icon: url(/icons/close.svg?v=3); }
.i-sound-on { --icon: url(/icons/sound-on.svg?v=3); }
.i-sound-off { --icon: url(/icons/sound-off.svg?v=3); }
.i-play { --icon: url(/icons/play.svg?v=3); }
.i-pause { --icon: url(/icons/pause.svg?v=3); }
.i-delete { --icon: url(/icons/delete.svg?v=3); }
.i-warning { --icon: url(/icons/warning.svg?v=3); }

/* Title bars: solid maroon, no gradient. */
.title-bar { background: var(--hl); }
.title-bar.inactive { background: grey; }

/* 98.css draws everything light; these redo its pieces in the dark palette. */
.window, button { background-color: var(--face); }
.window { box-shadow: var(--raised); }
button { box-shadow: var(--raised); text-shadow: 0 0 var(--text); }
button:not(:disabled):active { box-shadow: var(--pressed); text-shadow: 1px 1px var(--text); }
button.default { box-shadow: inset -2px -2px var(--e4), inset 1px 1px var(--e4), inset 2px 2px var(--e1), inset -3px -3px var(--e3), inset 3px 3px var(--e2); }
button.default:not(:disabled):active { box-shadow: inset 2px 2px var(--e4), inset -1px -1px var(--e4), inset 3px 3px var(--e3), inset -2px -2px var(--e1), inset -3px -3px var(--e2); }
button:disabled { color: #777; text-shadow: none; }
textarea, input { background-color: var(--panel); color: var(--text); box-shadow: var(--sunken); }
textarea::placeholder, input::placeholder { color: var(--dim); }
label, :disabled + label { color: var(--text); text-shadow: none; }
.status-bar-field { box-shadow: inset -1px -1px var(--e2), inset 1px 1px var(--e4); }
.progress-indicator { box-shadow: inset -2px -2px var(--e2), inset 2px 2px var(--e4); }
.progress-indicator.segmented > .progress-indicator-bar { background-image: linear-gradient(90deg, var(--hl) 16px, transparent 0 2px); }
.title-bar-controls button { background-color: var(--face); box-shadow: var(--raised); }

/* A white box pressed into the window (lists, the feed). */
.sunk { background: var(--panel); box-shadow: var(--sunken); padding: 2px; }
.logo { font: bold 22px var(--pixel); padding: 4px 2px 2px; }

/* Small square toolbar buttons. */
.tool { min-width: 0; min-height: 0; width: 30px; height: 28px; padding: 0; display: inline-grid; place-items: center; flex: none; }
.tool .ico { width: 16px; height: 16px; }

/* --- Layout: two windows on the desktop; on phones the room list slides in -- */
.app { display: flex; gap: 6px; height: 100dvh; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)); }
.window { display: flex; flex-direction: column; min-height: 0; }
.window-body { margin: 6px; }
.sidebar { width: 260px; flex: none; }
.side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.new-room-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.room-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.room-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 4px; min-width: 0; min-height: 0;
  background: none; box-shadow: none; text-align: left; color: var(--text); text-shadow: none;
}
.room-item:not(:disabled):active { box-shadow: none; text-shadow: none; }
.room-item.on { background: var(--hl); color: #fff; }
.room-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-item .people { display: flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.room-icon, .room-letter {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--face); box-shadow: var(--raised); font: bold 14px var(--pixel); color: var(--text); text-transform: uppercase;
}
.room-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .3); }
.rooms-btn { display: none; }
@media (max-width: 899px) {
  .app { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); gap: 0; }
  .sidebar {
    position: fixed; z-index: 26; top: 0; bottom: 0; left: 0; width: min(86vw, 300px);
    transform: translateX(-105%); transition: transform .2s steps(4);
  }
  .sidebar.open { transform: none; }
  .rooms-btn { display: inline-grid; }
}

.main { flex: 1; min-width: 0; position: relative; }
.main-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.main > .status-bar { margin: 0 2px 2px; }
.topbar { display: flex; align-items: center; gap: 4px; }
.room-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.room-titles { min-width: 0; }
.room-name { font: bold 11px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-desc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#soundBtn .ico { --icon: url(/icons/sound-off.svg?v=3); }
#soundBtn.is-on .ico { --icon: url(/icons/sound-on.svg?v=3); }
.users { display: flex; align-items: center; gap: 4px; }

/* --- The room's feed: newest at the bottom (or most liked at the top) --- */
.feed { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; display: flex; flex-direction: column; }
.posts { display: flex; flex-direction: column; gap: 8px; padding: 8px; max-width: 640px; width: 100%; margin: auto auto 0; }
.feed-empty { padding: 30vh 20px 0; text-align: center; color: var(--dim); }

/* Each post is a little window. */
.post { background: var(--face); box-shadow: var(--raised); padding: 3px; cursor: pointer; animation: post-in .2s steps(3); }
@keyframes post-in { from { opacity: 0; } }
.post.going { animation: post-out .3s steps(3) forwards; }
@keyframes post-out { to { opacity: 0; } }
/* Selected: the page stays on it */
.post.followed, .post.followed.bumped { outline: 2px solid var(--hl); outline-offset: 1px; animation: none; }
/* Just moved: it flashes like a window being activated */
.post.bumped { animation: bumped 1.2s steps(6); }
@keyframes bumped { 0%, 60% { outline: 2px dotted var(--hl); outline-offset: 1px; } 100% { outline: 2px dotted transparent; outline-offset: 1px; } }
.media { position: relative; margin: 4px auto 0; background: #000; box-shadow: var(--sunken); padding: 2px; }
.media img, .media video, .media .cover { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.media .cover { pointer-events: none; }
/* Videos are small on purpose; scaled up, they show chunky pixels, not blur. */
.media video, .media .cover, .media img { image-rendering: pixelated; }
.media .cover.off { display: none; }
.body { margin: 0; padding: 8px 6px 2px; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.4 var(--content); }
.post .media + .body:empty { display: none; }
.meta { display: flex; align-items: center; gap: 4px; padding: 4px 3px 2px; }
.vote {
  min-width: 0; min-height: 0; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px;
  color: var(--text); text-shadow: none; font-variant-numeric: tabular-nums;
}
.vote:not(:disabled):active { text-shadow: none; }
.vote.on { box-shadow: var(--pressed); background: var(--light); } /* liked / disliked: stays pressed in */
.meta time { margin-left: auto; padding-right: 4px; color: var(--dim); }

/* Play / pause in the middle of a video */
.center-icon {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 3;
  display: grid; place-items: center; background: var(--face); box-shadow: var(--raised); min-width: 0; padding: 0;
  opacity: 0; transition: opacity .3s steps(3); pointer-events: none;
}
.center-icon .ico { grid-area: 1 / 1; width: 16px; height: 16px; }
.center-icon .i-pause, .center-icon.flash .i-play { display: none; }
.center-icon.flash .i-pause { display: block; }
.center-icon.paused, .center-icon.flash { opacity: 1; }
.center-icon.flash { transition: none; }

.new-below { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; }

/* --- Message bar --------------------------------------------------------- */
.composer { display: flex; flex-direction: column; gap: 6px; }
.view-switch { display: flex; align-self: center; }
.view-switch button { min-width: 0; padding: 0 12px; }
.view-switch button.on { box-shadow: var(--pressed); background: var(--light); font-weight: bold; }
.bar { display: flex; align-items: flex-end; gap: 4px; }
.bar textarea {
  flex: 1; min-width: 0; resize: none; min-height: 28px; max-height: 140px;
  font: 16px/1.3 var(--content); /* 16px stops phones zooming in */
}
.attach-chip { position: relative; display: inline-block; align-self: flex-start; }
.attach-chip img { display: block; image-rendering: pixelated; height: 64px; width: auto; max-width: 140px; object-fit: cover; box-shadow: var(--sunken); padding: 2px; background: #000; }
.chip-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; font: bold 11px var(--pixel); }

.upload-bar { display: flex; align-items: center; gap: 6px; }
.upload-bar #uploadText { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-bar .progress-indicator { flex: 1; min-width: 60px; }
.upload-bar.failed #uploadText { color: #a00; }
.upload-bar.failed .progress-indicator { display: none; }

/* --- Dialogs: comments, new room, trim, the warning ----------------------- */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .25); }
.dialog-window { width: min(100%, 460px); max-height: calc(100dvh - 24px); }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.comment-list { flex: 1; min-height: 140px; max-height: 55dvh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.comment { background: var(--face); box-shadow: var(--raised); padding: 6px 4px 2px; }
.comment p { margin: 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.4 var(--content); }
.comment .meta { padding-top: 4px; }
.comments-empty { color: var(--dim); text-align: center; padding: 30px 0; }
.new-room-body { display: flex; gap: 10px; }
.icon-pick { width: 64px; height: 64px; min-width: 0; padding: 4px; display: grid; place-items: center; flex: none; }
.icon-pick img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.icon-pick .room-letter { width: 100%; height: 100%; box-shadow: none; font-size: 24px; }
.fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fields textarea { width: 100%; resize: none; font: 16px/1.3 var(--content); margin-bottom: 4px; }
.fine { color: var(--dim); margin: 0; line-height: 1.5; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.button-link { text-decoration: none; }

.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--desk); }
.gate .dialog-window { width: min(100%, 420px); }
.gate-body { display: flex; gap: 14px; align-items: flex-start; padding: 6px; }
.gate-body p { margin: 0 0 14px; line-height: 1.6; }

/* --- Falling letters (past a character limit) --------------------------- */
.falling { position: fixed; z-index: 95; pointer-events: none; will-change: transform; white-space: pre; color: var(--text); }

/* --- Toast: a Win98 tooltip --------------------------------------------- */
.toast {
  position: fixed; z-index: 80; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 4px 8px; background: #ffffe1; border: 1px solid #000; font: 11px var(--pixel);
}

/* --- Trim a video ---------------------------------------------------------- */
.sheet-window { width: min(100%, 420px); }
.sheet-inner { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.stage {
  position: relative; aspect-ratio: 9 / 16; width: min(100%, calc(58dvh * 9 / 16)); margin: 0 auto;
  background: #000; box-shadow: var(--sunken); padding: 2px; overflow: hidden;
}
.stage video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; opacity: 0; } /* the preview below is what shows */
.review-low { position: absolute; image-rendering: pixelated; pointer-events: none; }
.hint { margin: 0; color: var(--dim); text-align: center; }
.stage-msg { position: absolute; inset: 2px; display: grid; place-items: center; color: #fff; background: #000; pointer-events: none; }
.sheet.loading .trim, .sheet.loading .trim-play { opacity: .4; pointer-events: none; }
.trim-play { pointer-events: auto; }
.trim { display: flex; flex-direction: column; gap: 6px; width: min(100%, calc(58dvh * 9 / 16)); min-width: 220px; margin: 0 auto; }
.trim-track { position: relative; height: 36px; background: var(--panel); box-shadow: var(--sunken); touch-action: none; }
.trim-sel { position: absolute; top: 2px; bottom: 2px; background: var(--hl); opacity: .35; cursor: grab; }
.trim-head { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; z-index: 2; background: var(--text); pointer-events: none; }
.trim-handle {
  position: absolute; top: 50%; width: 14px; height: 44px; margin: -22px 0 0 -7px; min-width: 0; min-height: 0; padding: 0;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.trim-info { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.trim-now { font-weight: bold; }

/* The hidden player that prepares videos for upload */
video.worker { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }