:root{
 --oled:#000000;
 --tfoc-dkred:#610c00;
 --tfoc-ltred:#ae3322;
 --tfoc-dkpeach:#F58239;
 --tfoc-ltpeach:#e4aa85;
}

/* FAB */
.or-fab{
 position: fixed;
 right: 18px;
 bottom: 18px;
 z-index: 99999;
 width: 56px;
 height: 56px;
 background: var(--tfoc-dkred);
 color: var(--tfoc-dkpeach);
 border: 2px solid var(--tfoc-dkpeach);
 border-radius: 6px; /* not bubbly */
 cursor: pointer;
 box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.or-fab:hover{
 background: var(--tfoc-ltred);
}
.or-fab:active{
 transform: translateY(1px);
}
.or-fab-icon{
 display:flex;
 align-items:center;
 justify-content:center;
 font-size: 22px;
 line-height: 1;
}

/* Panel (visual styling only — placement is defined once at bottom) */
.or-panel{
 background: rgba(0,0,0,.92);
 color: var(--tfoc-ltpeach);
 border: 2px solid var(--tfoc-dkpeach);
 border-radius: 4px;
 box-shadow: 0 10px 22px rgba(0,0,0,.65);
 font-family: Arial, Helvetica, sans-serif;
}

.or-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 10px;
 padding: 10px 10px;
 background: var(--tfoc-dkred);
 border-bottom: 1px solid var(--tfoc-dkpeach);
}

.or-status{
 font-size: 12px;
 color: var(--tfoc-ltpeach);
 opacity: .95;
}

.or-close{
 background: transparent;
 color: var(--tfoc-dkpeach);
 border: 1px solid var(--tfoc-dkpeach);
 border-radius: 2px;
 width: 28px;
 height: 28px;
 cursor: pointer;
}

.or-row{
 display:flex;
 flex-wrap:wrap;
 gap: 8px;
 padding: 10px;
}

.or-btn{
 background: var(--oled);
 color: var(--tfoc-dkpeach);
 border: 1px solid var(--tfoc-dkpeach);
 border-radius: 2px;
 padding: 8px 10px;
 cursor: pointer;
 font-weight: 700;
 letter-spacing: .2px;
}
.or-btn:hover{
 background: rgba(245,130,57,.08);
}
.or-btn:disabled{
 opacity: .45;
 cursor: not-allowed;
}
.or-btn-secondary{
 border-color: var(--tfoc-ltpeach);
}
.or-btn-strong{
 background: rgba(97,12,0,.55);
}

.or-player{
 padding: 0 10px 10px 10px;
}
.or-player audio{
 width: 100%;
}

/* Tracks */
.or-tracks{
 border-top: 1px solid rgba(245,130,57,.35);
 padding: 10px;
}
.or-tracks-head{
 font-weight: 800;
 margin-bottom: 8px;
 color: var(--tfoc-dkpeach);
}
.or-track-list{
 list-style: none;
 margin: 0;
 padding: 0;
}
.or-track{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 8px;
 padding: 8px;
 border: 1px solid rgba(245,130,57,.35);
 margin-bottom: 6px;
 background: rgba(0,0,0,.45);
}
.or-track-empty{
 opacity: .8;
}

.or-track-pick{
 background: transparent;
 color: var(--tfoc-ltpeach);
 border: 0;
 text-align: left;
 cursor: pointer;
 padding: 0;
 font-weight: 700;
 display: inline-flex;
 align-items: baseline;
 gap: 8px;
}

.or-track-del{
 background: transparent;
 color: var(--tfoc-dkpeach);
 border: 1px solid var(--tfoc-dkpeach);
 border-radius: 2px;
 padding: 6px 8px;
 cursor: pointer;
}
.or-track-del:hover{
 background: rgba(245,130,57,.08);
}

/* --- OrchardRecorder: track owner + selected flare --- */
.or-track-owner{
 color: var(--tfoc-dkpeach);
 font-weight: 800;
 letter-spacing: 0.2px;
}
.or-track-meta{
 opacity: .85;
 font-weight: 700;
 color: var(--tfoc-ltpeach);
}

/* Selected track: tfo-drkpeach body + tfo-red flare */
.or-track.is-selected{
 border: 1px solid var(--tfoc-ltred);
 background: var(--tfoc-dkpeach);
 box-shadow: 0 0 0 1px rgba(174,51,34,0.35), 0 6px 18px rgba(0,0,0,0.35);
}
.or-track.is-selected .or-track-owner,
.or-track.is-selected .or-track-pick,
.or-track.is-selected .or-track-meta{
 color: #000000;
}

/* Selected track: keep Delete button visible */
.or-track.is-selected .or-track-del{
  color: #000000;
  border-color: #000000;
  background: transparent;
}

.or-track.is-selected .or-track-del:hover{
  background: rgba(0,0,0,.08);
}

/* Playing indicator (subtle) */
.or-track.is-playing{
 outline: 1px dashed rgba(174,51,34,0.65);
 outline-offset: 2px;
}

/* --- Fix: keep native audio control from stealing clicks over the track list --- */
/* Keep the player in its lane (lower stacking) */
#or-player{
 position: relative;
 z-index: 1;
}

/* Put the tracks UI above the player (higher stacking) */
#or-tracks,
#or-track-list,
#or-track-list .or-track,
#or-track-list .or-track-pick,
#or-track-list .or-track-del{
 position: relative;
 z-index: 50;
}

/* small spacing insurance */
#or-tracks{ margin-top: 6px; }

/* --- OrchardRecorder: canonical panel placement (single source of truth) --- */
#or-panel.or-panel{
 position: fixed;
 top: 90px;
 right: 18px;
 left: auto;

 width: 360px;
 box-sizing: border-box;

 /* dvw avoids some “viewport width includes scrollbar” weirdness in modern browsers */
 max-width: calc(100dvw - 36px);

 margin: 0;
 transform: none;
 z-index: 99999;
}

/* Fallback for older browsers that don’t support dvw */
@supports not (width: 1dvw) {
 #or-panel.or-panel{
  max-width: calc(100vw - 36px);
 }
}

/* Make wrap2 the positioning context for the audio icon */
.thumbnails .wrap2 {
  position: relative;
}

/* Mic icon indicator for photos with recordings - thumbnails */
.or-has-audio-icon {
  position: absolute !important;
  bottom: 6px !important;
  right: 1px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  background: rgba(139, 0, 0, 0.85);
  border: 2px solid rgba(255, 140, 0, 0.9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 999;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.or-has-audio-icon::before {
  content: "🎙️";
  display: block;
  line-height: 1;
}

/* For full-size picture page (inline, not absolute) */
.or-picture-has-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  width: 36px;
  height: 36px;
  background: rgba(139, 0, 0, 0.85);
  border: 2px solid rgba(255, 140, 0, 0.9);
  border-radius: 4px;
  font-size: 20px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.or-picture-has-audio::before {
  content: "🎙️";
  display: block;
  line-height: 1;
}