/* ============ edge strip + glow ============ */
.edge-strip {
  position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: 22px;
  cursor: pointer;
}
.edge-glow {
  position: absolute; right: 1px; top: var(--glow-top); height: var(--glow-span); width: 3px;
  border-radius: 99px;
  background: linear-gradient(to bottom, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  box-shadow: 0 0 22px 5px var(--accent-soft);
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.edge-strip:hover .edge-glow, .edge-strip:focus-visible .edge-glow { opacity: 1; animation: none; width: 4px; }
.no-glow .edge-glow { animation: none; opacity: .22; box-shadow: none; }
.shelf-open .edge-strip { opacity: 0; pointer-events: none; }
.edge-strip { transition: opacity .2s ease; }
.edge-glow.flare { animation: flare .9s ease; }
@keyframes flare { 30% { opacity: 1; box-shadow: 0 0 44px 14px var(--accent-soft); } }

/* touch: the glow becomes a grabber tab */
@media (hover: none) {
  .edge-glow {
    width: 5px; right: 2px; opacity: .95;
    top: 32%; height: 22%;
    box-shadow: 0 0 26px 7px var(--accent-soft);
  }
}

/* ============ shelf ============ */
.shelf {
  position: fixed; z-index: 60;
  top: calc(var(--menubar-h) + 8px); bottom: 14px; right: 12px;
  width: var(--shelf-w);
  border-radius: 19px;
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 30px));
  transition: transform var(--close-t) cubic-bezier(.5, 0, .8, .4);  /* collapse: ease-in */
  visibility: hidden;
}
.shelf.open {
  transform: none; visibility: visible;
  transition: transform var(--open-t) cubic-bezier(.16, .8, .3, 1);  /* expand: ease-out */
}
.shelf { transition: transform var(--close-t) cubic-bezier(.5,0,.8,.4), visibility 0s var(--close-t); }

.sh-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sh-view[hidden] { display: none; }

.sh-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px 9px;
}
.sh-deleted .sh-title, .sh-settings .sh-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 15px;
}
.sh-title-wrap { display: inline-flex; align-items: center; gap: 8px; }
.sh-title { font-family: var(--f-display); font-size: 16.5px; font-weight: 700; }
.sh-head-actions { display: flex; gap: 2px; min-width: 28px; }
.sh-ic { width: 17px; height: 17px; }
.sh-ic.accent { color: var(--accent); }
.sh-ic.dim { color: var(--frost-35); }
.sh-ic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
  color: var(--frost-70);
  transition: background .12s ease, color .12s ease;
}
.sh-ic-btn:hover { background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.06)); color: var(--frost); }
.sh-ic-btn[aria-pressed="true"] { color: var(--accent); }
.pin-ic { transform: rotate(45deg); }
.sh-back { color: var(--accent); font-weight: 600; }
.sh-back-label { font-size: 14px; }
.sh-back:hover { background: rgba(255,255,255,.07); }

.sh-rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px; }
.sh-row {
  display: block; width: 100%; text-align: left;
  padding: 10px 10px 11px; border-radius: 11px;
  transition: background .12s ease;
}
.sh-row:hover { background: rgba(255,255,255,.06); }
.sh-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.sh-row-title { font-size: 13.5px; font-weight: 600; }
.sh-row-time { font-size: 11px; color: var(--frost-35); font-variant-numeric: tabular-nums; flex: none; }
.sh-row-preview { font-size: 12px; color: var(--frost-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-row + .sh-row { margin-top: 1px; }
.sh-row-restore {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  margin-top: 6px;
}
.sh-foot {
  display: flex; justify-content: space-between;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sh-note { padding: 10px 16px 14px; font-size: 11.5px; color: var(--frost-35); line-height: 1.5; }

/* editor */
.ed-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 12px; }
.ed-title { font-family: var(--f-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; outline: none; }
.ed-body {
  min-height: 120px; outline: none;
  font-size: 13px; line-height: 1.65; color: var(--frost-70);
  white-space: pre-wrap;
}
.ed-body:empty::before { content: attr(data-ph); color: var(--frost-35); }

/* recorder */
.sh-rec-foot { padding: 8px 12px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.live-line {
  display: flex; gap: 7px; align-items: baseline;
  font-size: 11.5px; color: var(--frost-50); line-height: 1.5;
  padding: 2px 6px 8px; max-height: 54px; overflow: hidden;
}
.live-speaker { font-weight: 700; color: var(--sc, var(--accent)); flex: none; }
.rec-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 38px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; color: #fff;
  background: color-mix(in srgb, var(--accent) 82%, #fff 0%);
  box-shadow: 0 6px 20px -6px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.22);
  transition: filter .15s ease, transform .12s ease, background .25s ease;
}
.rec-btn:hover { filter: brightness(1.08); }
.rec-btn:active { transform: scale(.98); }
.rec-btn svg { width: 16px; height: 16px; }
.rec-btn.recording { background: var(--rec); box-shadow: 0 6px 20px -6px rgba(255,69,58,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 700; }

/* post-recording + AI */
.rec-done { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.rec-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  font-size: 12px; color: var(--frost-70);
}
.rec-row-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--frost); }
.rec-row-label { flex: 1; color: var(--frost-50); }
.ai-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; border-radius: 999px;
  font-size: 13px; font-weight: 650; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 90%, #fff 6%), color-mix(in srgb, var(--accent) 65%, #b06df5 35%));
  box-shadow: 0 6px 18px -6px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.25);
}
.ai-btn:hover { filter: brightness(1.08); }
.ai-btn svg { width: 15px; height: 15px; fill: #fff; stroke: none; }
.ai-card {
  margin-top: 12px; border-radius: 13px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.ai-card-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px 0; font-size: 12px; font-weight: 650; color: var(--frost);
}
.ai-card-head svg { width: 14px; height: 14px; fill: var(--accent); stroke: none; }
.ai-card-foot { padding: 0 12px 10px; font-size: 10.5px; color: var(--frost-35); }

/* shelf settings */
.set-body { padding: 4px 16px; overflow-y: auto; }
.set-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--frost-35); margin: 14px 0 8px; }
.set-accents { display: flex; gap: 9px; }
.acc {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c); border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease;
}
.acc:hover { transform: scale(1.12); }
.acc.on { border-color: #fff; }
.set-seg {
  display: inline-flex; padding: 2px; border-radius: 9px; background: rgba(255,255,255,.07);
  font-size: 12px; font-weight: 600;
}
.set-seg span { padding: 4px 14px; border-radius: 7px; }
.seg-off { color: var(--frost-35); cursor: not-allowed; }
.seg-on { background: color-mix(in srgb, var(--accent) 75%, transparent); color: #fff; }
.set-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.set-switch input { position: absolute; opacity: 0; }
.sw {
  width: 38px; height: 23px; border-radius: 99px; background: rgba(255,255,255,.16);
  position: relative; transition: background .2s ease; flex: none;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: left .2s ease;
}
.set-switch input:checked + .sw { background: var(--accent); }
.set-switch input:checked + .sw::after { left: 17px; }
.set-switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-label { font-size: 12.5px; color: var(--frost-70); }