/* 对话录的群聊窗口：所有名片共用；名片可用 --dlg-* 变量给它染色。 */
.dlg { --dlg-bg: #f3efe6; --dlg-paper: #fffdf8; --dlg-ink: #1d1b18; --dlg-ink-2: #514b43; --dlg-ink-3: #6b655b; --dlg-rule: rgba(29, 27, 24, .14);
  --dlg-me: #1d1b18; --dlg-me-ink: #fbf8f1; --dlg-acc: #9b3b22; --dlg-mod: rgba(29, 27, 24, .06);
  --dlg-font: "Noto Serif SC", "Songti SC", serif; --dlg-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 18px; background: rgba(12, 10, 8, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: dlg-in .22s ease-out; }
.dlg[hidden] { display: none; }
@keyframes dlg-in { from { opacity: 0; } to { opacity: 1; } }
.dlg__win { position: relative; display: flex; flex-direction: column; width: min(520px, 100%); height: min(86vh, 820px); overflow: hidden;
  background: var(--dlg-bg); color: var(--dlg-ink); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  font-family: var(--dlg-font); animation: dlg-up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes dlg-up { from { transform: translateY(24px) scale(.98); } to { transform: none; } }
.dlg__h { flex: none; padding: 14px 16px 10px; border-bottom: 1px solid var(--dlg-rule); background: var(--dlg-paper); }
.dlg__k { margin: 0 34px 2px 0; font: 600 11.5px/1.4 var(--dlg-ui); letter-spacing: .08em; color: var(--dlg-acc); }
.dlg__k i { font-style: normal; color: var(--dlg-ink-3); font-weight: 400; letter-spacing: 0; }
.dlg__t { margin: 0 34px 4px 0; font-size: 21px; line-height: 1.3; font-weight: 900; }
.dlg__w { margin: 0; font: 12.5px/1.5 var(--dlg-ui); color: var(--dlg-ink-2); }
.dlg__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--dlg-ink-2);
  font: 22px/1 var(--dlg-ui); cursor: pointer; }
.dlg__x:hover { background: var(--dlg-mod); color: var(--dlg-ink); }
.dlg__mem { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dlg__mem a, .dlg__mem span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; text-decoration: none; border-radius: 50%; transition: transform .15s; }
.dlg__mem a:hover { transform: translateY(-2px); }
.dlg__mem .av { width: 26px; height: 26px; font-size: 10px; }
.dlg__mem .is-me .av { box-shadow: 0 0 0 2px var(--dlg-acc); }
.dlg__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 22px; scroll-behavior: smooth; }
.dlg__note { margin: 0 auto 14px; max-width: 34em; text-align: center; font: 12px/1.6 var(--dlg-ui); color: var(--dlg-ink-3); }
.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; margin: 0 0 14px; animation: msg-in .32s ease-out both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg .av { width: 34px; height: 34px; font-size: 11.5px; }
.msg > a.msg__av, .msg > span.msg__av { grid-row: 1 / span 2; align-self: start; text-decoration: none; }
.msg__name { margin: 0 0 3px; font: 12px/1.4 var(--dlg-ui); color: var(--dlg-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.msg__name b { color: var(--dlg-ink); font-weight: 700; }
.msg__name a { color: inherit; text-decoration: none; }
.msg__name a:hover b { text-decoration: underline; }
.msg__name .rel { margin: 0; font-size: 10.5px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--dlg-rule); color: var(--dlg-ink-2); opacity: 1; }
.msg__go { margin-left: auto; font-size: 11.5px; color: var(--dlg-acc) !important; white-space: nowrap; }
.msg__b { position: relative; justify-self: start; max-width: 100%; padding: 9px 13px 8px; border-radius: 4px 14px 14px 14px; background: var(--dlg-paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06); font-size: 15.5px; line-height: 1.72; }
.msg__b p { margin: 0; }
.msg__q::before { content: "“"; } .msg__q::after { content: "”"; }
.msg__g { color: var(--dlg-ink-2); }
.msg__g::before { content: "大意"; display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: var(--dlg-mod); font: 600 10.5px/1.7 var(--dlg-ui); color: var(--dlg-ink-3); vertical-align: 2px; }
.msg__o { margin-top: 6px; font: italic 13px/1.55 Georgia, "Times New Roman", serif; color: var(--dlg-ink-3); }
.msg__o summary { cursor: pointer; font: 600 11px/1.6 var(--dlg-ui); font-style: normal; color: var(--dlg-ink-3); list-style: none; }
.msg__o summary::-webkit-details-marker { display: none; }
.msg__o summary::before { content: "原文 ▸"; }
.msg__o[open] summary::before { content: "原文 ▾"; }
.msg__o p { margin: 4px 0 0; }
.msg__src { margin: 5px 0 0; font: 11.5px/1.5 var(--dlg-ui); color: var(--dlg-ink-3); }
.msg__src a { color: inherit; }
/* 名片主人自己的话：靠右 */
.msg--me { grid-template-columns: minmax(0, 1fr) 34px; }
.msg--me > .msg__av { grid-column: 2; grid-row: 1 / span 2; }
.msg--me .msg__name { grid-column: 1; justify-content: flex-end; }
.msg--me .msg__b { grid-column: 1; justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--dlg-me); color: var(--dlg-me-ink); }
.msg--me .msg__g, .msg--me .msg__o, .msg--me .msg__src { color: inherit; opacity: .92; }
.msg--me .msg__o summary { color: inherit; opacity: .9; }
.msg--me .msg__g::before { background: rgba(255, 255, 255, .16); color: inherit; }
.msg--hl .msg__b { box-shadow: 0 0 0 2px var(--dlg-acc); }
/* 策展人的旁白：居中的小字 */
.msg--mod { display: block; margin: 4px auto 16px; max-width: 30em; text-align: center; }
.msg--mod p { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 10px; background: var(--dlg-mod); font: 12.5px/1.65 var(--dlg-ui); color: var(--dlg-ink-2); }
.msg--typing { opacity: .8; }
.msg--typing .msg__b { padding: 12px 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dlg-ink-3); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.dlg__f { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--dlg-rule); background: var(--dlg-paper); font: 13px/1.5 var(--dlg-ui); }
.dlg__ctl { display: flex; align-items: center; gap: 10px; }
.dlg__ctl button { border: 1px solid var(--dlg-rule); background: transparent; color: var(--dlg-ink); border-radius: 999px; padding: 5px 12px; font: inherit; cursor: pointer; }
.dlg__ctl button:hover { border-color: var(--dlg-ink-2); }
.dlg__ctl button[hidden] { display: none; }
.dlg__prog { margin-left: auto; font-size: 11.5px; color: var(--dlg-ink-3); }
.dlg__rel { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dlg__rel span { font-size: 11.5px; color: var(--dlg-ink-3); }
.dlg__rel a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--dlg-mod); color: var(--dlg-ink); text-decoration: none; font-size: 12.5px; }
.dlg__rel a:hover { background: var(--dlg-ink); color: var(--dlg-paper); }
.dlg__more { margin-top: 6px; font-size: 11.5px; color: var(--dlg-ink-3); }
.dlg__more a { color: inherit; }
html.dlg-open, html.dlg-open body { overflow: hidden; }
@media (max-width: 600px) {
  .dlg { padding: 0; }
  .dlg__win { width: 100%; height: 100%; border-radius: 0; }
  .dlg__t { font-size: 19px; }
}