/* ══════════════ Lecture recorder — slides & photos panel ══════════════
   The panel is its own container, so it lays out by the room the recorder
   page gives it rather than by the window: beside the sidebar on a tablet the
   page is phone-narrow even on a wide screen. */

.lm-panel {
  position: relative;
  container: lm-panel / inline-size;
  min-width: 0;
}

/* Without a deck the panel is one small card — its name, a line on what it
   does, the tools — so it reads as a part of the recorder rather than a row
   of loose buttons. An open deck takes its place: the viewer is the card then,
   and its head (the deck's name, the Beta mark, close) stands in for the
   panel's own. */
.lm-panel[data-deck="none"] {
  padding: .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
}

.lm-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin-bottom: .375rem;
}
.lm-panel[data-deck="open"] .lm-head { display: none; }
.lm-head-icon { color: #6366f1; }
.lm-head-title {
  min-width: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: #111827;
}

.lm-grid {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  min-width: 0;
}

.lm-side { display: flex; flex-direction: column; min-width: 0; }

/* Under the head, the hint is the panel's helper text and comes before the
   tools; beside an open deck it stays under them, where it explains Follow. */
.lm-grid:not(.lm-has-deck) .lm-notes { order: -1; }
.lm-grid:not(.lm-has-deck) .lm-notes > * { margin-top: 0; }
.lm-grid:not(.lm-has-deck) .lm-notes:not(:empty) { margin-bottom: .625rem; }

.lm-panel button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.lm-icon { flex-shrink: 0; }

/* ── the slide viewer ── */
.lm-viewer {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .625rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
  min-width: 0;
}
.lm-viewer[hidden] { display: none; }

.lm-viewer-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding-left: .25rem;
}

/* The name gives way before the Beta mark and the close button do. */
.lm-deck-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin: -.375rem -.25rem -.375rem auto;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lm-icon-btn:hover { background: #f3f4f6; color: #111827; }

/* A fixed shape from the page's own proportions, so moving between slides
   never makes the page below jump. */
.lm-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  overflow: hidden;
  border-radius: .625rem;
  background: #f3f4f6;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.lm-slide-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.lm-panel .lm-slide-open:focus-visible { outline-offset: -3px; }

.lm-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  /* The button is the target: no native image drag, no long-press image menu. */
  pointer-events: none;
  -webkit-user-drag: none;
  transition: opacity .15s ease;
}
.lm-slide-img[hidden] { display: none; }
.lm-stage.is-loading .lm-slide-img { opacity: .35; }

.lm-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(99, 102, 241, .25);
  border-top-color: #6366f1;
  border-radius: 999px;
  animation: lm-rotate .8s linear infinite;
  pointer-events: none;
}
.lm-stage.is-loading .lm-spinner { display: block; }

.lm-stage-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: .8125rem;
  color: #6b7280;
  pointer-events: none;
}
.lm-stage-msg[hidden] { display: none; }

@keyframes lm-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── moving through the deck ── */
.lm-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.lm-nav { display: flex; align-items: center; gap: .375rem; }

.lm-nav-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  color: #374151;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}
.lm-nav-btn:hover { border-color: #a5b4fc; background: #eef2ff; }
.lm-nav-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.lm-nav-btn[aria-disabled="true"]:hover { border-color: #e5e7eb; background: #fff; }

.lm-count {
  min-width: 4.5rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  color: #111827;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lm-slide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin-left: auto;
}

.lm-follow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  font-size: .8125rem;
  color: #4b5563;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.lm-follow[hidden] { display: none; }
.lm-follow[aria-pressed="true"] {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}

.lm-switch {
  position: relative;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #d1d5db;
  transition: background-color .15s ease;
}
.lm-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
.lm-follow[aria-pressed="true"] .lm-switch { background: #4f46e5; }
.lm-follow[aria-pressed="true"] .lm-switch::after { transform: translateX(12px); }

/* ── tools ── */
.lm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0 .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  font-size: .8125rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease;
}
.lm-btn:hover:not(:disabled) { border-color: #a5b4fc; background: #f9fafb; }
.lm-btn:disabled { opacity: .5; cursor: not-allowed; }
.lm-btn[hidden] { display: none; }
.lm-btn .lm-icon { color: #6b7280; }

.lm-btn-reopen { min-width: 0; }
.lm-btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A mouse needs less room than a thumb. */
@media (pointer: fine) {
  .lm-btn,
  .lm-follow { min-height: 36px; }
}

/* ── status lines ── */
.lm-note {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .75rem;
  color: #4b5563;
}

/* #6b7280 on the page's #f9fafb is 4.8:1, readable for the one line that
   explains what Follow does. */
.lm-hint {
  margin-top: .5rem;
  font-size: .75rem;
  line-height: 1.5;
  color: #6b7280;
}

.lm-notice {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 500;
  color: #4338ca;
}

.lm-spinner-sm {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 2px solid rgba(99, 102, 241, .25);
  border-top-color: #6366f1;
  border-radius: 999px;
  animation: lm-rotate .8s linear infinite;
}

/* ── "Slide 6 added · Undo" ──
   The chip floats at the bottom of the window instead of sitting in the
   panel. Undo is needed most right after a ✕ far down the transcript, or a
   slide change while reading it — exactly when the panel has scrolled out of
   view or is covered by the sticky live bar. On a phone it docks just above
   the bottom bar: higher up it lands on the panel's own controls (Follow, the
   arrows) right when they are wanted after a move. The app's toasts make room
   above it while it shows (app.css, body.lm-chip-shown). */
.lm-live { min-width: 0; }

.lm-chip {
  position: fixed;
  left: 50%;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  max-width: calc(100vw - 2rem);
  padding: .125rem .125rem .125rem .875rem;
  border-radius: 999px;
  background: #1f2937;
  color: #f9fafb;
  font-size: .8125rem;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
  animation: lm-chip-in .18s ease;
}
@media (min-width: 768px) {
  .lm-chip { bottom: 4.5rem; }
}
.lm-chip-plain { padding: .625rem .875rem; }

.lm-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-chip-dot { opacity: .5; }

.lm-chip-undo {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 .875rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a5b4fc;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.lm-chip-undo:hover { background: rgba(255, 255, 255, .1); }

@media (pointer: fine) {
  .lm-chip-undo { min-height: 32px; }
  .lm-chip-plain { padding: .375rem .875rem; }
}

@keyframes lm-chip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The file inputs are opened from the buttons; they only need to exist. */
.lm-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

/* ── room to spare: the slide beside the tools ── */
@container lm-panel (min-width: 700px) {
  .lm-grid.lm-has-deck {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    align-items: start;
    column-gap: 1rem;
  }
  /* While recording there is no hint beside the viewer, only the photo
     buttons: the column shrinks to them instead of leaving a blank area. */
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-grid.lm-has-deck {
    grid-template-columns: minmax(0, 520px) max-content;
    justify-content: start;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-tools {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── phone-narrow: slide full width, big arrows, buttons sharing a row ── */
@container lm-panel (max-width: 479px) {
  .lm-viewer { padding: .5rem; }
  .lm-nav { width: 100%; }
  .lm-nav-btn { flex: 1; }
  .lm-slide-actions { width: 100%; margin-left: 0; }
  .lm-slide-actions > * { flex: 1 1 auto; justify-content: center; }
  .lm-tools .lm-btn { flex: 1 1 auto; }
  .lm-stage { max-height: 50vh; }

  /* With no deck open the tools are equal tiles, the icon over its label —
     three across for a thumb, and the reopen button joins them as a fourth.
     The minimum is small enough for four to share a 360px phone, and rows
     stretch, so a two-line label never leaves its neighbours shorter. */
  .lm-grid:not(.lm-has-deck) .lm-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: .5rem;
  }
  .lm-grid:not(.lm-has-deck) .lm-tools .lm-btn {
    flex-direction: column;
    gap: .3rem;
    min-height: 64px;
    padding: .5rem .375rem;
    font-size: .75rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .lm-grid:not(.lm-has-deck) .lm-tools .lm-icon { width: 20px; height: 20px; }
  .lm-grid:not(.lm-has-deck) .lm-tools .lm-btn-text { max-width: 100%; white-space: nowrap; }

  /* While recording the viewer is compact, so the transcript stays on screen
     under it and the arrows stay clear of the sticky live bar when the page is
     scrolled down to the words: one head row holds Follow (as a switch), the
     photo buttons (as icons) and the deck's name, and the arrows sit on the
     slide's lower edges. The grid lays out the viewer's and the tools' parts
     together; the card look moves to it. The arrows are not inside the stage,
     so a tap on them is a move, never an enlarge. Idle and the finish screen
     keep the roomier layout above. */
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-grid.lm-has-deck {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "actions tools head" "stage stage stage" "notes notes notes" "live live live";
    align-items: center;
    gap: 0 .375rem;
    padding: .5rem;
    border: 1px solid #e5e7eb;
    border-radius: .875rem;
    background: #fff;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck :is(.lm-viewer, .lm-controls, .lm-side) {
    display: contents;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-viewer-head { grid-area: head; padding-left: 0; }
  /* The head row is shared with Follow and the photo buttons: the deck's name
     keeps the room, the panel's mark and the Beta pill give way. */
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-viewer-head :is(.lm-head-icon, .beta-pill) { display: none; }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-stage {
    grid-area: stage;
    margin-top: .375rem;
    max-height: 22vh;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-nav {
    grid-area: stage;
    align-self: stretch;
    align-items: flex-end;
    z-index: 1;
    width: auto;
    margin-top: .375rem;
    padding: 0 .25rem .25rem;
    justify-content: space-between;
    pointer-events: none;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-nav-btn {
    flex: 0 0 auto;
    pointer-events: auto;
    background: rgba(255, 255, 255, .92);
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-count {
    align-self: flex-end;
    min-width: 0;
    margin-bottom: .125rem;
    padding: .0625rem .5rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, .65);
    color: #fff;
    font-size: .75rem;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-slide-actions {
    grid-area: actions;
    flex-wrap: nowrap;
    width: auto;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-slide-actions > * { flex: 0 0 auto; }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-follow { padding: 0 .625rem; }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-tools {
    grid-area: tools;
    flex-wrap: nowrap;
  }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-notes { grid-area: notes; }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-live { grid-area: live; }
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-btn-photo {
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
  }
  /* Out of sight, still the buttons' names for a screen reader. */
  .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck :is(.lm-btn-photo, .lm-follow) > span:not(.lm-switch) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .dark .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-grid.lm-has-deck { background: #111827; border-color: #1f2937; }
  .dark .lm-panel:is([data-status="recording"], [data-status="paused"]) .lm-has-deck .lm-nav-btn { background: rgba(17, 24, 39, .9); }
}

/* ── dropping photos onto the recorder page ── */
#rec-body.rec-dropping {
  border-radius: .875rem;
  outline: 2px dashed #6366f1;
  outline-offset: 6px;
  background-color: rgba(99, 102, 241, .04);
}
#rec-body.rec-dropping::after {
  content: 'Drop to add to the transcript';
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 60;
  transform: translateX(-50%);
  padding: .5rem .875rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px -10px rgba(79, 70, 229, .6);
  pointer-events: none;
}

/* ── dark mode ── */
.dark .lm-panel[data-deck="none"],
.dark .lm-viewer,
.dark .lm-btn,
.dark .lm-nav-btn,
.dark .lm-follow { background: #111827; border-color: #1f2937; }
.dark .lm-head-icon { color: var(--d-brand); }
.dark .lm-head-title { color: #f3f4f6; }
.dark .lm-btn,
.dark .lm-nav-btn,
.dark .lm-follow { color: #d1d5db; }
.dark .lm-btn .lm-icon { color: #9ca3af; }
.dark .lm-btn:hover:not(:disabled),
.dark .lm-nav-btn:hover { background: #1f2937; border-color: #4338ca; }
.dark .lm-nav-btn[aria-disabled="true"]:hover { background: #111827; border-color: #1f2937; }
.dark .lm-deck-name,
.dark .lm-count { color: #f3f4f6; }
.dark .lm-icon-btn { color: #9ca3af; }
.dark .lm-icon-btn:hover { background: #1f2937; color: #f3f4f6; }
.dark .lm-stage { background: #1f2937; }
.dark .lm-stage-msg { color: #9ca3af; }
.dark .lm-follow[aria-pressed="true"] {
  background: rgba(67, 56, 202, .25);
  border-color: #4338ca;
  color: #c7d2fe;
}
.dark .lm-switch { background: #374151; }
.dark .lm-follow[aria-pressed="true"] .lm-switch { background: #6366f1; }
.dark .lm-note { color: #9ca3af; }
.dark .lm-hint { color: #9ca3af; }
.dark .lm-notice { color: #a5b4fc; }
.dark .lm-chip { background: #e5e7eb; color: #111827; }
.dark .lm-chip-undo { color: #4338ca; }
.dark .lm-chip-undo:hover { background: rgba(0, 0, 0, .06); }
.dark #rec-body.rec-dropping { outline-color: #818cf8; background-color: rgba(129, 140, 248, .06); }

@media (prefers-reduced-motion: reduce) {
  .lm-chip { animation: none; }
  .lm-switch,
  .lm-switch::after,
  .lm-slide-img { transition: none; }
}

@media (forced-colors: active) {
  .lm-follow[aria-pressed="true"] { outline: 2px solid CanvasText; }
  .lm-nav-btn[aria-disabled="true"] { color: GrayText; }
}