/* static/css/annotate.css — highlight-to-comment editor, terminal/dark aesthetic.
   ZK-9: ONE right-side drawer (identity + comment), replacing the two centered modal
   overlays — so the prose you're annotating stays visible while you write. */
.zk-panel {
  position: fixed; top: 0; right: 0; z-index: 1000;
  display: flex; flex-direction: column;
  width: min(92vw, 380px); height: 100vh; height: 100dvh;
  box-sizing: border-box; overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: #111; color: #e6e6e6;
  border-left: 1px solid #2a2a2a;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transform: translateX(100%); transition: transform .18s ease;
}
.zk-panel.zk-panel-open { transform: translateX(0); }

.zk-panel-head { display: flex; align-items: center; justify-content: space-between; }
.zk-panel h2 { margin: 0; font-size: 1.1rem; color: #7fd1c4; }
.zk-close {
  background: none; border: 0; color: #888; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 0 .25rem;
}
.zk-close:hover { color: #e6e6e6; }

.zk-panel label { display: block; margin: .6rem 0 0; font-size: .85rem; }
.zk-panel input, .zk-panel textarea {
  width: 100%; margin-top: .25rem; padding: .5rem; box-sizing: border-box;
  background: #0a0a0a; color: #e6e6e6; border: 1px solid #333; border-radius: 4px; font: inherit;
}
.zk-panel textarea { resize: vertical; min-height: 5rem; }
.zk-comment-label { margin-top: .75rem; }
.zk-id-note { margin: .4rem 0 0; font-size: .72rem; color: #888; }
.zk-id-known { margin: .6rem 0 0; font-size: .82rem; color: #aaa; }
.zk-id-known strong { color: #7fd1c4; font-weight: 600; }

.zk-quote {
  margin: .75rem 0 0; padding: .5rem .75rem; border-left: 3px solid #7fd1c4;
  color: #aaa; font-style: italic; font-size: .9rem;
}
.zk-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }
.zk-actions button {
  padding: .45rem .9rem; border-radius: 4px; border: 1px solid #333; cursor: pointer;
  background: #1a1a1a; color: #e6e6e6; font: inherit;
}
.zk-actions #zk-ok { background: #7fd1c4; color: #06302b; border-color: #7fd1c4; }

/* Mobile: a full-width bottom sheet — a right drawer would crowd a narrow reading column,
   and a bottom sheet sits naturally above the on-screen keyboard. */
@media (max-width: 640px) {
  .zk-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; max-height: 75vh;
    border-left: 0; border-top: 1px solid #2a2a2a;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
    transform: translateY(100%);
  }
  .zk-panel.zk-panel-open { transform: translateY(0); }
}

.zk-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: #3a1414; color: #ffd9d9; border: 1px solid #5a2a2a; padding: .6rem 1rem;
  border-radius: 6px; z-index: 1001; font-family: ui-monospace, monospace; font-size: .85rem;
}