/* One room-aware contract for chapter sharing and personal recording details.
   Loaded after the older paper/room rules; no global palette overrides. */
body #share-chapter-btn {
  color: var(--yd-ink); opacity: 1; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
body #share-chapter-btn svg { width: 20px; height: 20px; }
body #share-chapter-btn:hover { background: var(--yd-tool); opacity: 1; }
body #share-chapter-btn:focus-visible { outline: 2px solid var(--yd-ink); outline-offset: 2px; }

dialog#share-modal-overlay {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: 24px; box-sizing: border-box; border: 0; background: transparent;
  align-items: center; justify-content: center;
}
dialog#share-modal-overlay:not([open]) { display: none; }
dialog#share-modal-overlay[open] { display: flex; }
dialog#share-modal-overlay::backdrop, .memo-details-dialog::backdrop { background: #100c0880; }
#share-modal-overlay .share-modal, .memo-details-dialog {
  color-scheme: light; color: var(--yd-ink); background: var(--yd-reference-panel);
  border: 1px solid var(--yd-tool-border); border-radius: 16px;
  box-shadow: 0 18px 70px #0005;
}
[data-theme="dark"] #share-modal-overlay .share-modal,
[data-theme="dark"] .memo-details-dialog { color-scheme: dark; }
#share-modal-overlay .share-modal { width: 540px; max-width: 100%; max-height: 100%; overflow: auto; }
#share-modal-overlay .share-modal-header { padding: 24px 24px 20px; border-bottom: 1px solid var(--yd-tool-border); }
#share-modal-overlay .share-modal-header h3 { color: var(--yd-ink); font: 600 29px/1.15 var(--serif); }
#share-modal-overlay .share-modal-header p { color: var(--yd-light-ink); font: 15px/1.5 var(--sans); margin: 10px 0 0; }
#share-modal-overlay .share-modal-close { color: var(--yd-ink); min-width: 44px; min-height: 44px; padding: 0; opacity: 1; }
#share-modal-overlay .share-modal-body { padding: 24px; }
#share-modal-overlay .share-desk-label, #share-modal-overlay .share-access-heading {
  color: var(--yd-ink); font: 600 14px/1.5 var(--sans); text-transform: none; letter-spacing: 0; margin: 0 0 8px;
}
#share-modal-overlay .share-input-row { gap: 10px; }
#share-modal-overlay :is(.share-desk-input, .share-link-url), .memo-details-dialog :is(input, textarea) {
  background: var(--yd-paper); color: var(--yd-ink) !important;
  border: 1px solid var(--yd-tool-muted); border-radius: 7px;
  font: 16px/1.4 var(--sans); padding: 11px 12px; min-width: 0;
}
#share-modal-overlay input::placeholder, .memo-details-dialog :is(input, textarea)::placeholder {
  color: var(--yd-room-muted) !important; opacity: 1 !important;
}
#share-modal-overlay :is(.share-email-btn, .share-copy-link-btn, .share-link-copy-btn, .share-revoke-btn),
.memo-details-dialog button {
  font: 600 14px/1.4 var(--sans); min-height: 44px; padding: 10px 14px;
  color: var(--yd-tool-ink); background: var(--yd-tool); border: 1px solid var(--yd-tool-muted);
  border-radius: 7px; opacity: 1; cursor: pointer;
}
#share-modal-overlay .share-email-btn, .memo-details-dialog .memo-details-save {
  background: var(--yd-ink); color: var(--yd-reference-panel); border-color: var(--yd-ink);
}
#share-modal-overlay button:disabled, .memo-details-dialog button:disabled {
  background: var(--yd-tool); color: var(--yd-tool-muted); border-color: var(--yd-tool-border); opacity: 1; cursor: default;
}
#share-modal-overlay :focus-visible, .memo-details-dialog :focus-visible { outline: 2px solid var(--yd-ink); outline-offset: 3px; }
#share-modal-overlay .share-help { font: 13px/1.5 var(--sans); color: var(--yd-light-ink); margin: 9px 0 0; }
#share-modal-overlay .share-desk-confirmation { background: var(--yd-tool); color: var(--yd-tool-ink); font: 15px/1.5 var(--sans); padding: 12px; overflow-wrap: anywhere; }
#share-modal-overlay [hidden] { display: none !important; }
#share-modal-overlay .share-link-option { margin: 22px 0; padding: 20px 0; border-block: 1px solid var(--yd-tool-border); }
#share-modal-overlay .share-copy-link-btn { margin: 0; }
#share-modal-overlay .share-collaborators { border: 0; margin: 0; padding: 0; }
#share-modal-overlay :is(.share-status-text, .share-collaborator-status) { color: var(--yd-light-ink); font: 14px/1.5 var(--sans); }
#share-modal-overlay .share-collaborator-email { color: var(--yd-ink); font: 500 15px/1.4 var(--sans); overflow-wrap: anywhere; }
#share-modal-overlay .share-collaborator { gap: 12px; border-color: var(--yd-tool-border); }
#share-modal-overlay .share-collaborator-info { min-width: 0; }
#share-modal-overlay .share-revoke-btn { flex-shrink: 0; }
#share-modal-overlay .share-link-display { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; border-color: var(--yd-tool-border); }
#share-modal-overlay .share-link-label { flex: 0 0 100%; color: var(--yd-ink); font: 500 14px var(--sans); }
#share-modal-overlay .share-link-url { flex: 1; width: 0; font-size: 13px; }
#share-modal-overlay .share-result-message { color: var(--yd-ink); font: 14px/1.5 var(--sans); padding: 12px 0; }
#share-modal-overlay .share-error { color: var(--yd-error); }
#share-modal-overlay .share-privacy-note { margin-top: 20px; }

.memo-details-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 26px; overflow: auto; }
.memo-details-dialog h2 { font: 600 28px/1.2 var(--serif); margin: 0 0 22px; }
.memo-details-dialog label { display: block; margin: 16px 0 0; font: 600 14px/1.5 var(--sans); }
.memo-details-dialog :is(input, textarea) { display: block; width: 100%; box-sizing: border-box; margin-top: 7px; }
.memo-details-dialog textarea { resize: vertical; min-height: 110px; }
.memo-details-dialog :is(.memo-details-count, .memo-details-status) { font: 13px/1.5 var(--sans); color: var(--yd-light-ink); margin: 8px 0; }
.memo-details-dialog .memo-details-status:empty { display: none; }
.memo-details-dialog .memo-details-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Description takes the space between the date and waveform, not the photo. */
.media-memo-cover-card { grid-template-rows: minmax(0, 1fr); }
.media-memo-cover-card .media-podcast-copy { display: flex; flex-direction: column; min-height: 0; }
.media-memo-cover-card :is(.media-object-label, h3, .media-podcast-byline) { flex-shrink: 0; }
.media-memo-cover-card .media-podcast-copy .media-object-waveform {
  position: static; flex: 0 0 20px; margin-top: auto;
}
.media-memo-description { color: var(--media-ink); font: 11px/1.4 var(--sans); margin: 7px 0; min-height: 0; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.media-memo-cover-card .media-memo-description { flex: 1 1 auto; }
/* A short podcast subtitle stays above the existing playback controls. */
.media-podcast-card:not(.media-memo-cover-card) .media-memo-description {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  max-height: 28px; overflow: hidden; font-size: 10px; margin: 5px 0 0;
}
.media-audio-memo-card .media-memo-description { max-height: 32px; margin-bottom: 0; }
.media-audio-memo-card:has(.media-memo-description) .media-audio-playrow { height: 32px; margin-top: 5px; }
.reader-podcast-copy > .reader-memo-description, .reader-audio-memo-object > .reader-memo-description {
  color: var(--yd-card-ink); font: 15px/1.5 var(--sans); margin: 14px 0 0; overflow-wrap: anywhere; white-space: pre-wrap;
}
.reader-memo-description[hidden] { display: none; }
.audio-description-preview {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
#dv-media-viewer .dv-mv-memo-description { max-width: 600px; margin: 12px auto; font: 16px/1.5 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  dialog#share-modal-overlay { padding: 12px; }
  #share-modal-overlay :is(.share-modal-header, .share-modal-body) { padding: 20px; }
  #share-modal-overlay .share-collaborator { flex-wrap: wrap; }
  #share-modal-overlay .share-modal-header h3 { font-size: 26px; }
}
/* Shared-writing suggestions: red pencil, a short handwritten stroke, then
   a readable paper composer. Love keeps its distinct pink heart. */
.reaction-red svg { stroke: #eea497; }
.reaction-red:hover, .reaction-red:focus-visible { background: rgba(238,164,151,.16); }
.reaction-red:focus-visible { outline: 2px solid #eea497; outline-offset: 1px; }
.reaction-red .suggest-mark { stroke-dasharray: 16; stroke-dashoffset: 16; }
.htb-suggest-active { background: rgba(238,164,151,.2); }
.htb-suggest-active .suggest-pencil {
  transform-origin: center;
  animation: suggestionPencil .7s ease-in-out both;
}
.htb-suggest-active .suggest-mark { animation: suggestionStroke .7s ease-out both; }
@keyframes suggestionPencil {
  0% { transform: translate(0,0) rotate(0); }
  24% { transform: translate(-2px,1px) rotate(-10deg); }
  58% { transform: translate(2px,0) rotate(7deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes suggestionStroke {
  0%, 20% { stroke-dashoffset: 16; opacity: 0; }
  38% { opacity: 1; }
  75%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
.reaction-toolbar.toolbar-expanded { height: auto; max-width: calc(100vw - 24px); border-radius: 20px; }
.reaction-toolbar .collab-toolbar-note-form {
  flex: 0 0 100%; box-sizing: border-box; padding: 16px; margin: 6px 0 2px;
  border: 1px solid var(--chrome-border); border-radius: 12px;
  background: var(--chrome-bg); color: var(--chrome-ink);
  max-height: calc(100dvh - 110px); overflow-y: auto;
}
.reaction-toolbar .collab-suggestion-form { border-top: 3px solid #c45e50; }
.collab-note-heading { display: block; font: 600 20px/1.2 var(--serif); color: inherit; }
.collab-note-help { margin: 8px 0 12px; font: 13px/1.45 var(--sans); color: var(--yd-light-ink); }
.reaction-toolbar .collab-toolbar-note-input {
  box-sizing: border-box; min-height: 96px; padding: 10px; resize: vertical;
  background: var(--chrome-bg-raised, var(--surface)); color: var(--chrome-ink);
  border: 1px solid var(--chrome-border); border-radius: 7px;
  font: 16px/1.5 var(--serif);
}
.reaction-toolbar .collab-toolbar-note-input::placeholder { color: var(--yd-light-ink); opacity: 1; }
.reaction-toolbar .collab-toolbar-note-input:focus {
  border-color: var(--chrome-muted); outline: 2px solid var(--chrome-muted); outline-offset: 2px; box-shadow: none;
}
.collab-note-status { color: inherit; font: 13px/1.4 var(--sans); margin: 10px 0; }
.reaction-toolbar .collab-note-submit-row { justify-content: space-between; gap: 8px; margin-top: 12px; }
.reaction-toolbar .collab-note-submit-btn,
.reaction-toolbar .collab-note-cancel-btn {
  min-height: 40px; padding: 8px 12px; border-radius: 8px; font: 600 13px/1.3 var(--sans); cursor: pointer;
}
.reaction-toolbar .collab-note-submit-btn { background: var(--tool-bg); color: var(--tool-ink); border: 1px solid var(--tool-border); }
.reaction-toolbar .collab-suggestion-form .collab-note-submit-btn { background: #813d34; color: #fff4ed; border-color: #813d34; }
.reaction-toolbar .collab-note-cancel-btn { background: transparent; color: inherit; border: 1px solid var(--chrome-border); }
.reaction-toolbar .collab-note-submit-btn:disabled { opacity: .55; cursor: default; }
.margin-red { background: #EDABA0; color: #49251f; }
.margin-red .margin-note-type, .margin-red .margin-note-meta { opacity: .86; }
.margin-red .margin-reply-send { background: #49251f; color: #fff4ed; }
@media (prefers-reduced-motion: reduce) {
  .htb-suggest-active .suggest-pencil, .htb-suggest-active .suggest-mark { animation: none; }
  .htb-suggest-active .suggest-mark { stroke-dashoffset: 0; opacity: 1; }
}