/* 素材引用：正文可视化，协议 textarea 仅供草稿与提交使用。 */
.reference-protocol[hidden] { display:none !important; }
.reference-input-wrap { position:relative; min-width:0; }
.reference-input-wrap > .mention-menu { display:none; position:absolute; bottom:100%; left:0; right:0; z-index:50; max-height:240px; overflow:auto; padding:5px; border:1px solid var(--line,var(--mm-line,#444)); border-radius:7px; background:var(--panel,var(--surface,var(--mm-surface,#242424))); box-shadow:0 5px 20px #0008; }
.reference-input-wrap > .mention-menu.open { display:grid; gap:3px; }
.reference-input-wrap .mention-menu > button { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px; min-width:0; text-align:left; color:inherit; background:transparent; border:1px solid transparent; border-radius:5px; }
.reference-input-wrap .mention-menu > button[aria-selected=true] { border-color:var(--green,var(--mm-green,#80d9b5)); background:#80d9b512; }
.reference-input-wrap .mention-menu img { width:36px; height:36px; object-fit:contain; flex:none; }
.reference-input-wrap .mention-placeholder { width:36px; flex:none; font-size:11px; }
.reference-editor[contenteditable=false] { cursor:default; max-height:360px; }
.reference-editor {
  box-sizing:border-box; width:100%; min-width:0; min-height:150px; max-height:100%;
  padding:10px; border:1px solid var(--line,var(--mm-line,#444)); border-radius:6px;
  background:var(--field,var(--mm-field,#1a1a1a)); color:var(--text,var(--mm-text,#eee));
  font:inherit; font-size:12px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere;
  overflow:auto; outline:none; cursor:text; text-align:left;
}
.reference-editor:focus { border-color:var(--green,var(--mm-green,#80d9b5)); box-shadow:0 0 0 1px var(--green,var(--mm-green,#80d9b5)); }
.reference-editor:empty::before { content:attr(data-placeholder); color:var(--muted,var(--mm-muted,#aaa)); pointer-events:none; }
.reference-editor[aria-disabled=true] { opacity:.5; }
.reference-token {
  display:inline-flex; vertical-align:middle; align-items:center; gap:5px; max-width:100%;
  box-sizing:border-box; height:28px; margin:1px 2px; padding:2px 7px 2px 3px;
  border:1px solid #80d9b54d; border-radius:7px; background:#80d9b514;
  color:inherit; font-size:11px; line-height:1.2; white-space:nowrap; cursor:pointer;
}
.reference-token > img,.reference-token > video { width:22px; height:22px; object-fit:cover; border-radius:4px; flex:none; pointer-events:none; }
.reference-token > span { overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.reference-token:hover,.reference-token:focus-visible { border-color:#80d9b5; outline:none; background:#80d9b526; }
.reference-token.is-missing { color:#efb58c; border-color:#efb58c80; background:#efb58c12; }
.material-prompt-wrap > .reference-editor { flex:1; min-height:118px; height:auto; }
.prompt-editor-wrap > .reference-editor { flex:1; min-height:118px; height:100%; }
.mention-menu video { width:36px; height:36px; object-fit:contain; flex:none; }
.mention-copy { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mention-copy > small { display:block; opacity:.65; font-size:10px; }
.reference-preview {
  position:fixed; z-index:1000; box-sizing:border-box; padding:8px; border:1px solid #555;
  border-radius:9px; background:var(--surface,var(--mm-surface,#242424));
  color:var(--text,var(--mm-text,#eee)); box-shadow:0 8px 30px #0008;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  opacity:1; transition:opacity .18s ease;
}
.reference-preview.is-closing { opacity:0; }
.reference-preview[hidden] { display:none; }
.reference-preview > strong { flex:1; min-width:0; font-size:11px; overflow-wrap:anywhere; }
.reference-preview > button { flex:none; cursor:pointer; padding:5px 8px; color:inherit; background:transparent; border:1px solid #555; border-radius:5px; }
.reference-preview > img,.reference-preview > video { display:block; width:100%; max-height:min(160px,30dvh); object-fit:contain; background:#161616; }
.reference-preview > audio { width:100%; }
@media (prefers-reduced-motion:reduce) { .reference-preview { transition:none; } }
@media(max-width:700px),(max-width:1000px) and (max-height:500px) {
  .reference-editor { min-height:130px; font-size:16px; }
  .reference-token { height:32px; font-size:12px; }
}