/* annotations.css - Versie 1.21.2 */
/* OPM-1B-2: opgeslagen opmerkingen plaatsen en lezen. Componenttokens komen uit style.css. */

.annotation-selection-actions {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.annotation-selection-actions[hidden] { display: none; }
.annotation-selection-actions .annotation-comment-action {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
  background: var(--menu-bg);
  color: var(--text-color);
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}
.annotation-selection-actions .annotation-comment-action {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}
.annotation-selection-actions svg { display: block; width: 22px; height: 22px; }
.annotation-selection-actions :focus-visible,
.annotation-comment-prototype :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.annotation-comment-prototype {
  position: fixed;
  z-index: 90;
  top: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  width: min(var(--modal-width-standard), calc(100vw - 32px));
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--menu-bg);
  color: var(--text-color);
  border: 1px solid var(--modal-border-color);
  border-radius: var(--modal-radius);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.45;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.annotation-comment-prototype[hidden] { display: none; }
.annotation-comment-prototype header,
.annotation-comment-prototype footer {
  flex: 0 0 auto;
  background: var(--menu-bg);
}
.annotation-comment-prototype header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--modal-header-height);
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--menu-border);
}
.annotation-comment-prototype h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.annotation-prototype-label {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  opacity: .65;
}
.annotation-comment-prototype header button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  font-size: 0;
  cursor: pointer;
}
.annotation-comment-prototype header button::before,
.annotation-comment-prototype header button::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.annotation-comment-prototype header button::before { transform: rotate(45deg); }
.annotation-comment-prototype header button::after { transform: rotate(-45deg); }
.annotation-comment-prototype blockquote,
.annotation-comment-prototype > label,
.annotation-comment-prototype > textarea,
.annotation-comment-prototype > .annotation-comment-help,
.annotation-comment-prototype > .annotation-comment-status {
  margin-left: var(--modal-padding);
  margin-right: var(--modal-padding);
}
.annotation-comment-prototype blockquote {
  max-height: 28vh;
  margin-top: var(--modal-padding);
  margin-bottom: 14px;
  padding: 11px 12px;
  overflow: auto;
  border: 1px solid var(--menu-border);
  border-left: 3px solid var(--text-color);
  border-radius: 8px;
  background: var(--bg-color);
}
.annotation-comment-prototype > label { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.annotation-comment-prototype textarea {
  width: auto;
  min-height: 120px;
  margin-bottom: 9px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.annotation-comment-prototype textarea:focus-visible { outline-offset: 2px; }
.annotation-comment-help,
.annotation-comment-status { margin-top: 0; margin-bottom: 0; font-size: 12px; line-height: 1.45; }
.annotation-comment-help { opacity: .7; }
.annotation-comment-status { min-height: 1.4em; margin-top: 7px; font-weight: 700; }
.annotation-comment-prototype footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px var(--modal-padding) var(--modal-padding);
  padding: 0;
  border-top: 0;
  background: transparent;
}
.annotation-comment-prototype footer button {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--menu-border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.annotation-comment-prototype #annotation-comment-submit {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}
body.annotation-prototype-open #reader-scroll-container { overflow: hidden; }

@media (max-width: 600px) {
  .annotation-selection-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(74px, calc(66px + env(safe-area-inset-bottom)));
    flex-wrap: nowrap;
    padding: 6px;
    border: 1px solid var(--menu-border);
    border-radius: 999px;
    background: var(--menu-bg);
    box-shadow: 0 8px 25px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .annotation-selection-actions .annotation-comment-action {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }
  .annotation-comment-prototype {
    inset: auto 0 0;
    width: 100%;
    max-height: min(78vh, 680px);
    max-height: min(78dvh, 680px);
    border-radius: 18px 18px 0 0;
  }
  .annotation-comment-prototype::before {
    content: '';
    flex: 0 0 auto;
    align-self: center;
    width: 42px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .3;
  }
  .annotation-comment-prototype header { min-height: 58px; padding-top: 10px; }
  .annotation-comment-prototype textarea { min-height: 110px; resize: none; }
  .annotation-comment-prototype footer { margin-bottom: max(var(--modal-padding), env(safe-area-inset-bottom)); }
}

/* OPM-1B-2: opgeslagen opmerkingen en eenvoudig overzicht */
.annotation-anchor { background: color-mix(in srgb, #f3b30c 38%, transparent); border-bottom: 2px solid #b57900; border-radius: 2px; cursor: pointer; }
.annotation-anchor:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.annotation-overview-action { position: fixed; right: 16px; bottom: 72px; z-index: 44; display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 5px; min-height: 44px; padding: 0 13px; border: 1px solid var(--menu-border); border-radius: 999px; background: var(--menu-bg); color: var(--text-color); font: inherit; font-weight: 700; cursor: pointer; }
.annotation-overview-action[hidden] { display:none; }
.annotation-overview-action span { min-width: 1.25em; text-align:center; }
.annotation-overview { position:fixed; z-index:91; top:16px; right:16px; bottom:16px; display:flex; flex-direction:column; width:min(var(--modal-width-standard),calc(100vw - 32px)); overflow:hidden; background:var(--menu-bg); color:var(--text-color); border:1px solid var(--modal-border-color); border-radius:var(--modal-radius); box-shadow:0 8px 25px rgba(0,0,0,.2); font-family:var(--font-family); }
.annotation-overview[hidden]{display:none}.annotation-overview header{display:flex;align-items:center;justify-content:space-between;min-height:var(--modal-header-height);padding:var(--modal-padding);border-bottom:1px solid var(--menu-border)}.annotation-overview h2{margin:0;font-size:18px}.annotation-overview header button{width:36px;height:36px;overflow:hidden;font-size:0;border:1px solid var(--menu-border);border-radius:50%;background:transparent;color:inherit;position:relative}.annotation-overview header button:before,.annotation-overview header button:after{content:'';position:absolute;left:10px;top:17px;width:14px;height:1.5px;background:currentColor}.annotation-overview header button:before{transform:rotate(45deg)}.annotation-overview header button:after{transform:rotate(-45deg)}
.annotation-overview-body{padding:var(--modal-padding);overflow:auto}.annotation-overview-empty{opacity:.7}.annotation-item{width:100%;display:grid;gap:7px;margin:0 0 10px;padding:12px;border:1px solid var(--menu-border);border-radius:10px;background:var(--bg-color);color:var(--text-color);text-align:left;font:inherit;cursor:pointer}.annotation-item blockquote{margin:0;padding-left:9px;border-left:3px solid currentColor;font-size:12px;opacity:.72}.annotation-item p{margin:0}.annotation-item small{opacity:.65}.annotation-comment-status[data-state='error']{color:#d9534f}.annotation-comment-status[data-state='saved']{color:#2f8f46}
@media(max-width:600px){.annotation-overview-action{right:max(12px,env(safe-area-inset-right));bottom:max(74px,calc(66px + env(safe-area-inset-bottom)))}.annotation-overview{inset:auto 0 0;width:100%;max-height:min(78dvh,680px);border-radius:18px 18px 0 0}.annotation-overview-body{min-height:180px}}

/* OPM-1B-2 correctie: zwevende acties zijn wederzijds exclusief */
.annotation-selection-actions:not([hidden]) + .annotation-comment-prototype ~ .annotation-overview-action { visibility: hidden; pointer-events: none; }
body.annotation-prototype-open .annotation-selection-actions, body.annotation-prototype-open .annotation-overview-action { display: none !important; }


/* OPM-1B-2 afronding: tijdelijke doelaanduiding voor passage en opmerking */
.annotation-anchor,
.annotation-item {
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, outline-color .22s ease;
}
.annotation-anchor.annotation-anchor-target {
  outline: 3px solid color-mix(in srgb, #f3b30c 82%, var(--text-color));
  outline-offset: 4px;
  background: color-mix(in srgb, #f3b30c 68%, transparent);
  box-shadow: 0 0 0 7px color-mix(in srgb, #f3b30c 28%, transparent), 0 0 18px color-mix(in srgb, #f3b30c 48%, transparent);
}
.annotation-item.annotation-item-target {
  border-color: color-mix(in srgb, #f3b30c 82%, var(--text-color));
  outline: 3px solid color-mix(in srgb, #f3b30c 62%, transparent);
  outline-offset: 2px;
  background: color-mix(in srgb, #f3b30c 18%, var(--bg-color));
  box-shadow: 0 0 0 5px color-mix(in srgb, #f3b30c 18%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .annotation-anchor,
  .annotation-item {
    transition: none;
  }
}


/* OPM-1B-3A: gespreksdetail en antwoorden */
#annotation-conversation-view[hidden] { display: none; }
.annotation-conversation-back { margin: 0 0 12px; padding: 7px 11px; border: 1px solid var(--menu-border); border-radius: 18px; background: transparent; color: var(--text-color); font: inherit; font-weight: 650; cursor: pointer; }
#annotation-conversation-quote { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--menu-border); border-left: 3px solid var(--text-color); border-radius: 8px; background: var(--bg-color); font-size: 12px; opacity: .8; }
.annotation-message { display: grid; gap: 5px; margin: 0 0 10px; padding: 12px; border: 1px solid var(--menu-border); border-radius: 10px; background: var(--bg-color); color: var(--text-color); }
.annotation-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.annotation-message small { opacity: .65; }
.annotation-message-main { border-left: 3px solid var(--text-color); }
.annotation-message-reply { margin-left: 18px; }
#annotation-replies-title { margin: 18px 0 10px; font-size: 15px; }
.annotation-replies-empty { margin: 0 0 14px; opacity: .7; }
.annotation-reply-form { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--menu-border); }
.annotation-reply-form[hidden] { display: none; }
.annotation-reply-form label { font-weight: 700; }
.annotation-reply-form textarea { width: 100%; min-height: 100px; padding: 10px 12px; resize: vertical; border: 1px solid var(--menu-border); border-radius: 8px; background: var(--bg-color); color: var(--text-color); font: inherit; }
.annotation-reply-status { min-height: 1.4em; font-size: 12px; font-weight: 700; }
.annotation-reply-status[data-state='error'] { color: #d9534f; }
.annotation-reply-status[data-state='saved'] { color: #2f8f46; }
.annotation-conversation-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.annotation-conversation-actions button { min-height: 38px; padding: 8px 14px; border: 1px solid var(--menu-border); border-radius: 20px; background: transparent; color: var(--text-color); font: inherit; font-weight: 650; cursor: pointer; }
#annotation-reply-submit { background: var(--text-color); color: var(--bg-color); border-color: var(--text-color); }
.annotation-message.annotation-message-target { outline: 3px solid color-mix(in srgb, #f3b30c 62%, transparent); outline-offset: 2px; background: color-mix(in srgb, #f3b30c 18%, var(--bg-color)); box-shadow: 0 0 0 5px color-mix(in srgb, #f3b30c 18%, transparent); }
@media(max-width:600px){.annotation-message-reply{margin-left:10px}.annotation-conversation-actions{display:grid;grid-template-columns:1fr 1fr}.annotation-conversation-actions #annotation-conversation-passage{grid-column:1/-1}.annotation-conversation-actions button{width:100%}.annotation-reply-form textarea{resize:none;min-height:90px}}


/* OPM-1B-3A UX-afronding: headernavigatie en documentvolgorde */
.annotation-overview-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.annotation-overview-heading .annotation-conversation-back {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}
.annotation-overview-heading .annotation-conversation-back[hidden] {
  display: none;
}
.annotation-overview-heading .annotation-conversation-back svg {
  display: block;
}


/* OPM-1B-3A correctie: expliciete headericonen, passageactie en focusveilige layout */
.annotation-overview header button::before,
.annotation-overview header button::after {
  content: none;
}
#annotation-overview-close::before,
#annotation-overview-close::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 17px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
#annotation-overview-close::before { transform: rotate(45deg); }
#annotation-overview-close::after { transform: rotate(-45deg); }
#annotation-conversation-back svg { display: block; width: 22px; height: 22px; }
.annotation-passage-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--menu-border);
  border-left: 3px solid var(--text-color);
  border-radius: 9px;
  background: var(--bg-color);
}
.annotation-passage-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}
#annotation-conversation-quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  opacity: .85;
}
#annotation-conversation-passage {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}
#annotation-conversation-passage svg { display: block; }
.annotation-conversation-actions { display: grid; grid-template-columns: 1fr 1fr; }
.annotation-conversation-actions button { width: 100%; }
@media(max-width:600px){.annotation-passage-card{grid-template-columns:minmax(0,1fr) 44px}.annotation-conversation-actions{grid-template-columns:1fr 1fr}}


/* OPM-1B-3A correctie: lange passages en standaard sluiticoon */
#annotation-overview-close::before,
#annotation-overview-close::after {
  content: none;
}
#annotation-overview-close svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.annotation-anchor {
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.annotation-anchor[data-annotation-segment] {
  margin: 0;
}
.annotation-anchor.annotation-anchor-target {
  position: relative;
}


/* OPM-1B-3B: eigen opmerkingen en antwoorden bewerken */
.annotation-message-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.annotation-message-edit{flex:0 0 auto;padding:5px 9px;border:1px solid var(--menu-border);border-radius:999px;background:transparent;color:var(--text-color);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.annotation-message-editing{gap:9px}
.annotation-message-editing>label{font-size:12px;font-weight:700}
.annotation-message-edit-text{width:100%;min-height:110px;padding:10px 12px;resize:vertical;border:1px solid var(--menu-border);border-radius:8px;background:var(--bg-color);color:var(--text-color);font:inherit;line-height:1.45}
.annotation-message-edit-status{min-height:1.4em;font-size:12px;font-weight:700}
.annotation-message-edit-status[data-state='error']{color:#d9534f}
.annotation-message-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.annotation-message-edit-actions button{min-height:38px;padding:8px 12px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:650;cursor:pointer}
.annotation-message-edit-actions .annotation-message-edit-save{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color)}
.annotation-edit-confirmation{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.58)}
.annotation-edit-confirmation-box{width:min(100%,390px);padding:18px;border:1px solid var(--modal-border-color);border-radius:12px;background:var(--menu-bg);color:var(--text-color);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.annotation-edit-confirmation-box h3{margin:0 0 8px;font-size:17px}
.annotation-edit-confirmation-box p{margin:0 0 16px;line-height:1.45}
.annotation-unsaved-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.annotation-unsaved-edit-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:650;cursor:pointer}
.annotation-unsaved-edit-actions .annotation-discard-edit{color:#d9534f;border-color:rgba(217,83,79,.45)}
@media(max-width:600px){.annotation-message-edit-text{min-height:100px;resize:none}.annotation-unsaved-edit-actions{grid-template-columns:1fr}.annotation-edit-confirmation{align-items:end;padding:12px}.annotation-edit-confirmation-box{margin-bottom:max(8px,env(safe-area-inset-bottom))}}


/* OPM-1B-3C: eigen opmerkingen en antwoorden verwijderen */
.annotation-message-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.annotation-message-delete{flex:0 0 auto;padding:5px 9px;border:1px solid rgba(217,83,79,.45);border-radius:999px;background:transparent;color:#d9534f;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.annotation-message-deleted{opacity:.82}
.annotation-message-deleted>p{font-style:italic}
.annotation-delete-confirmation{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:max(var(--modal-edge),env(safe-area-inset-top)) max(var(--modal-edge),env(safe-area-inset-right)) max(var(--modal-edge),env(safe-area-inset-bottom)) max(var(--modal-edge),env(safe-area-inset-left));background:rgba(0,0,0,.62);pointer-events:auto;touch-action:none}
.annotation-delete-confirmation-box{width:min(100%,390px);padding:18px;border:1px solid rgba(217,83,79,.6);border-radius:12px;background:var(--menu-bg);color:var(--text-color);box-shadow:0 10px 30px rgba(0,0,0,.38)}
.annotation-delete-confirmation-box h3{margin:0 0 8px;font-size:17px}
.annotation-delete-confirmation-box p{margin:0 0 12px;line-height:1.45}
.annotation-delete-status{min-height:1.4em;margin-bottom:8px;font-size:12px;font-weight:700}
.annotation-delete-status[data-state='error']{color:#d9534f}
.annotation-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.annotation-delete-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:650;cursor:pointer}
.annotation-delete-actions .annotation-delete-confirm{border-color:#d9534f;background:#d9534f;color:#fff}
@media(max-width:600px){.annotation-message-header{align-items:flex-start}.annotation-message-actions{max-width:52%;justify-content:flex-end}.annotation-delete-confirmation-box{width:min(100%,390px)}.annotation-delete-actions{grid-template-columns:1fr 1fr}}


/* OPM-1B-3C correctie: definitief verwijderen, geblokkeerde contextwissel en compacte icoonacties */
.annotation-message-edit,
.annotation-message-delete{
  display:inline-grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border-radius:50%;
  font-size:0;
}
.annotation-message-edit{border:1px solid var(--menu-border);background:transparent;color:var(--text-color)}
.annotation-message-delete{border:1px solid rgba(217,83,79,.45);background:transparent;color:#d9534f}
.annotation-message-edit svg,.annotation-message-delete svg{display:block;width:18px;height:18px}
.annotation-message-actions{flex-wrap:nowrap}
@media(max-width:600px){
  .annotation-message-actions{max-width:none;gap:7px}
  .annotation-message-edit,.annotation-message-delete{flex-basis:40px;width:40px;min-width:40px;height:40px;min-height:40px}
}


/* OPM-1B-4A: actuele ankerstatussen */
.annotation-anchor-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:7px;
  padding:4px 8px;
  border:1px solid var(--menu-border);
  border-radius:999px;
  font-size:11px;
  font-weight:750;
  line-height:1.2;
}
.annotation-anchor-status::before{
  content:'';
  width:7px;
  height:7px;
  margin-right:6px;
  border:2px solid currentColor;
  border-radius:50%;
}
.annotation-anchor-status-attached_correctly{color:#2f8f46;background:color-mix(in srgb,#2f8f46 12%,transparent)}
.annotation-anchor-status-needs_review{color:#b57900;background:color-mix(in srgb,#f3b30c 16%,transparent)}
.annotation-anchor-status-orphaned{color:#d9534f;background:color-mix(in srgb,#d9534f 10%,transparent)}
.annotation-item-status-needs_review{border-left:4px solid #b57900}
.annotation-item-status-orphaned{border-left:4px solid #d9534f}
#annotation-conversation-passage[hidden]{display:none}
@media(max-width:600px){.annotation-anchor-status{font-size:12px}}

/* OPM-1B-4B: handmatige herankering */
.annotation-anchor-repair-action{grid-column:1/-1;min-height:38px;padding:8px 14px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:700;cursor:pointer}.annotation-anchor-repair-action[hidden]{display:none}.annotation-anchor-repair-bar{position:fixed;z-index:94;left:50%;bottom:max(76px,calc(68px + env(safe-area-inset-bottom)));transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;width:min(760px,calc(100vw - 32px));padding:16px;border:1px solid var(--modal-border-color);border-radius:var(--modal-radius);background:var(--menu-bg);color:var(--text-color);box-shadow:0 10px 32px rgba(0,0,0,.28)}.annotation-anchor-repair-bar[hidden]{display:none}.annotation-anchor-repair-bar strong{font-size:17px}.annotation-anchor-repair-bar p{margin:5px 0}.annotation-anchor-repair-bar blockquote{max-height:90px;margin:9px 0;padding:8px 10px;overflow:auto;border-left:3px solid currentColor;background:var(--bg-color);font-size:12px;opacity:.8}.annotation-anchor-repair-preview{margin-top:10px}.annotation-anchor-repair-preview span{font-size:11px;font-weight:750;opacity:.7}.annotation-anchor-repair-preview p{padding:8px 10px;border:1px solid var(--menu-border);border-radius:8px;background:var(--bg-color)}#annotation-anchor-repair-status{min-height:1.4em;font-size:12px;font-weight:700}#annotation-anchor-repair-status[data-state='error'],.annotation-anchor-repair-confirmation-status[data-state='error']{color:#d9534f}.annotation-anchor-repair-actions{display:flex;align-items:flex-end;gap:8px}.annotation-anchor-repair-actions button,.annotation-anchor-repair-confirmation-actions button{min-height:40px;padding:8px 14px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:700;cursor:pointer}.annotation-anchor-repair-actions #annotation-anchor-repair-save,.annotation-anchor-repair-confirmation-save{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color)}.annotation-anchor-repair-confirmation{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.62)}.annotation-anchor-repair-confirmation-box{width:min(100%,420px);padding:18px;border:1px solid var(--modal-border-color);border-radius:12px;background:var(--menu-bg);color:var(--text-color);box-shadow:0 10px 32px rgba(0,0,0,.4)}.annotation-anchor-repair-confirmation-box h3{margin:0 0 8px}.annotation-anchor-repair-confirmation-box p{margin:0 0 12px;line-height:1.45}.annotation-anchor-repair-confirmation-status{min-height:1.4em;margin-bottom:8px;font-size:12px;font-weight:700}.annotation-anchor-repair-confirmation-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}body.annotation-anchor-repair-open .annotation-overview-action,body.annotation-anchor-repair-open .annotation-selection-actions{display:none!important}.annotation-anchor-repair-bar :focus-visible,.annotation-anchor-repair-confirmation :focus-visible,.annotation-anchor-repair-action:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:600px){.annotation-anchor-repair-bar{left:0;right:0;bottom:0;transform:none;grid-template-columns:1fr;width:100%;max-height:min(72dvh,620px);overflow:auto;padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-radius:18px 18px 0 0}.annotation-anchor-repair-actions{display:grid;grid-template-columns:1fr 1fr}.annotation-anchor-repair-actions button{width:100%}.annotation-anchor-repair-confirmation{align-items:end;padding:12px}.annotation-anchor-repair-confirmation-box{margin-bottom:max(8px,env(safe-area-inset-bottom))}.annotation-anchor-repair-confirmation-actions{grid-template-columns:1fr}}

/* OPM-1B-4B interactievergrendeling */
body.annotation-anchor-repair-open{user-select:none;-webkit-user-select:none}
body.annotation-anchor-repair-open #reader-content{user-select:text;-webkit-user-select:text}
body.annotation-anchor-repair-open #reader-content a,body.annotation-anchor-repair-open #reader-content button,body.annotation-anchor-repair-open #reader-content mark{pointer-events:none}
body.annotation-anchor-repair-open #reader-content{pointer-events:auto}
body.annotation-anchor-repair-open .annotation-anchor-repair-bar{pointer-events:auto}
.annotation-anchor-repair-confirmation{pointer-events:auto;touch-action:none}
.annotation-anchor-repair-confirmation-box{pointer-events:auto}
body.annotation-anchor-repair-confirming #reader-content{user-select:none!important;-webkit-user-select:none!important;pointer-events:none!important}

/* OPM-1B-4B definitieve zichtbaarheid Opmerkingen openen */
#annotation-overview-action[data-visible='true']:not([hidden]){display:inline-grid!important;visibility:visible!important;pointer-events:auto!important;opacity:1!important}
#annotation-overview-action[data-visible='false'],#annotation-overview-action[hidden]{display:none!important}

/* OPM-1B-4C: gesprekken afhandelen en heropenen */
.annotation-overview-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.annotation-overview-filter{min-height:40px;padding:8px 12px;border:1px solid var(--menu-border);border-radius:999px;background:transparent;color:var(--text-color);font:inherit;font-weight:700;cursor:pointer}.annotation-overview-filter.active{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color)}.annotation-item-resolved{opacity:.82;border-left:4px solid color-mix(in srgb,var(--text-color) 45%,transparent)}.annotation-conversation-state{margin:14px 0 10px;padding:11px 12px;border:1px solid var(--menu-border);border-radius:9px;background:var(--bg-color)}.annotation-conversation-state[hidden]{display:none}.annotation-conversation-state p{margin:0;line-height:1.45}.annotation-conversation-status-action{width:100%;min-height:40px;padding:8px 14px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:700;cursor:pointer}.annotation-conversation-status-action[hidden]{display:none}.annotation-status-confirmation{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.62)}.annotation-status-confirmation-box{width:min(100%,420px);padding:18px;border:1px solid var(--modal-border-color);border-radius:12px;background:var(--menu-bg);color:var(--text-color);box-shadow:0 10px 32px rgba(0,0,0,.4)}.annotation-status-confirmation-box h3{margin:0 0 8px}.annotation-status-confirmation-box p{margin:0 0 12px;line-height:1.45}.annotation-status-confirmation-feedback{min-height:1.4em;margin-bottom:8px;font-size:12px;font-weight:700}.annotation-status-confirmation-feedback[data-state='error']{color:#d9534f}.annotation-status-confirmation-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.annotation-status-confirmation-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--menu-border);border-radius:20px;background:transparent;color:var(--text-color);font:inherit;font-weight:700;cursor:pointer}.annotation-status-confirm{background:var(--text-color)!important;color:var(--bg-color)!important;border-color:var(--text-color)!important}.annotation-overview-filter:focus-visible,.annotation-conversation-status-action:focus-visible,.annotation-status-confirmation :focus-visible{outline:2px solid currentColor;outline-offset:3px}@media(max-width:600px){.annotation-status-confirmation{align-items:end;padding:12px}.annotation-status-confirmation-box{margin-bottom:max(8px,env(safe-area-inset-bottom))}.annotation-status-confirmation-actions{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.annotation-item-resolved{transition:none}}

/* OPM-1B-4C UX-correctie: echte modale vergrendeling en ruimere acties */
.annotation-status-confirmation{position:fixed;inset:0;z-index:120;pointer-events:auto;touch-action:none}.annotation-status-confirmation-box{pointer-events:auto}.annotation-conversation-status-action{margin-top:16px}.annotation-reply-form{margin-bottom:0}.annotation-conversation-actions{margin-bottom:0}.annotation-conversation-state+.annotation-conversation-status-action{margin-top:14px}body.annotation-conversation-status-modal-open{overflow:hidden}body.annotation-conversation-status-modal-open #reader-view,body.annotation-conversation-status-modal-open .annotation-overview{pointer-events:none}body.annotation-conversation-status-modal-open .annotation-status-confirmation{pointer-events:auto}@media(max-width:600px){.annotation-conversation-status-action{margin-top:18px}.annotation-status-confirmation{position:fixed;inset:0;z-index:120}}
@media (max-width: 380px) {
  .annotation-comment-prototype footer { grid-template-columns: 1fr; }
}
body.annotation-delete-modal-open{overflow:hidden}
body.annotation-delete-modal-open #reader-view,body.annotation-delete-modal-open .annotation-overview{pointer-events:none}
body.annotation-delete-modal-open .annotation-delete-confirmation{pointer-events:auto}
.annotation-delete-confirmation :focus-visible{outline:2px solid currentColor;outline-offset:3px}