/* Sherlock'un defteri: sağ kenarda sekme, baloncuk, açılır sayfa */
.nb-tab {
  position: fixed; right: 0; top: 46%; z-index: 140; display: grid; justify-items: center; gap: 8px;
  padding: 14px 8px 12px; border-radius: 10px 0 0 10px; background: #efe4c8; color: #1b140e;
  box-shadow: -6px 10px 30px rgba(0, 0, 0, .35); transform-origin: 100% 50%;
}
.nb-tab__t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .14em; }
.nb-tab__n { min-width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: #b3261e; color: #fff; font: 700 11px var(--mono); }
.nb-tab:hover { padding-right: 14px; }

.nb-bubble {
  position: fixed; right: 54px; top: 46%; z-index: 140; max-width: min(300px, 70vw); pointer-events: none;
  padding: 12px 16px; border-radius: 10px; background: #efe4c8; color: #1b140e;
  font: 700 clamp(19px, 1.5vw, 23px)/1.15 'Caveat', cursive; box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateX(16px) rotate(-1.5deg); transition: opacity .35s, transform .5s var(--ease-out);
}
.nb-bubble::after { content: ''; position: absolute; right: -8px; top: 18px; border: 8px solid transparent; border-right: 0; border-left-color: #efe4c8; }
.nb-bubble.is-on { opacity: 1; transform: translateX(0) rotate(-1.5deg); }

.nb-panel {
  position: fixed; right: 12px; top: 80px; bottom: 80px; z-index: 210; width: min(380px, 88vw); overflow: auto;
  padding: 20px 22px 26px; border-radius: 6px; color: #1b140e; rotate: -1deg;
  background: #efe4c8 linear-gradient(transparent 0 calc(100% - 1px), rgba(27, 20, 14, .08) 0) 0 0 / 100% 2.1em;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.nb-panel[hidden] { display: none; }
.nb-panel::before { content: ''; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: rgba(179, 38, 30, .35); }
.nb-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-left: 22px; }
.nb-panel__head p { font-size: 11px; }
.nb-panel__sub { padding-left: 22px; margin-top: 6px; font-size: 10px; opacity: .65; text-transform: none; letter-spacing: .02em; }
.nb-close { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(27, 20, 14, .3); font-size: 14px; display: grid; place-items: center; }
.nb-list { margin-top: 16px; padding-left: 22px; display: grid; gap: 12px; }
.nb-list li { display: grid; gap: 2px; }
.nb-list time { font-size: 10px; color: #b3261e; }
.nb-list span { font: 700 21px/1.12 'Caveat', cursive; }
.nb-list li:first-child span { color: #b3261e; }
@media (max-width: 760px) {
  .nb-tab { top: auto; bottom: 120px; padding: 10px 6px; }
  .nb-bubble { top: auto; bottom: 120px; right: 48px; }
  .nb-panel { top: 70px; bottom: 70px; right: 8px; }
}