/* Discord-style message mocks (previews only — uses Discord's palette deliberately). */
.d-frame { border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); background: #313338; color: #dbdee1; font-family: 'gg sans', 'Noto Sans', var(--font-body); box-shadow: 0 20px 40px -24px #000; min-width: 0; }
.d-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; background: #2b2d31; border-bottom: 1px solid #1f2023; font-size: 13px; font-weight: 700; color: #f2f3f5; }
.d-frame-ch { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-frame-ch .ic { color: #80848e; }
.d-frame-note { font-size: 11px; font-weight: 600; color: #80848e; }
.d-frame-body { padding: 14px 14px 16px; min-width: 0; }
.d-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.d-msg + .d-msg { margin-top: 14px; }
.d-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.d-avatar svg { display: block; }
.d-user-avatar { font-weight: 800; color: #fff; font-size: 15px; }
.d-main { min-width: 0; }
.d-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.d-author { font-weight: 600; color: #f2f3f5; font-size: 15px; }
.d-tag { display: inline-flex; align-items: center; gap: 2px; height: 15px; padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; align-self: center; }
.d-tag .ic { stroke-width: 3; }
.d-time { font-size: 12px; color: #949ba4; }
.d-content { font-size: 15px; line-height: 1.375; margin-top: 2px; overflow-wrap: anywhere; white-space: normal; }
.d-content strong, .d-embed strong { font-weight: 700; color: #f2f3f5; }
.d-content code, .d-embed code { background: #2b2d31; border: 1px solid #1e1f22; color: #dbdee1; font-size: 85%; padding: .1em .3em; border-radius: 4px; }
.d-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.d-unknown { color: #f0b232; font-family: var(--font-mono); font-size: 90%; }
.d-quote { display: block; border-left: 4px solid #4e5058; padding-left: 10px; margin: 2px 0; }
.d-h { display: block; font-weight: 700; color: #f2f3f5; margin: 4px 0 2px; }
.d-h1 { font-size: 22px; } .d-h2 { font-size: 19px; } .d-h3 { font-size: 16px; }
.d-embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 6px; max-width: 520px; padding: 10px 14px 14px 12px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--ec, #7c5cff); }
.d-embed-body { min-width: 0; display: grid; gap: 6px; }
.d-embed-author { font-size: 13px; font-weight: 600; color: #f2f3f5; }
.d-embed-title { font-weight: 700; color: #f2f3f5; font-size: 15px; overflow-wrap: anywhere; }
.d-embed-desc { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.d-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.d-field { grid-column: 1 / -1; min-width: 0; }
.d-field.inline { grid-column: auto; }
.d-field-name { font-size: 13px; font-weight: 700; color: #f2f3f5; margin-bottom: 2px; overflow-wrap: anywhere; }
.d-field-value { font-size: 13px; overflow-wrap: anywhere; }
.d-embed-footer { font-size: 12px; color: #b5bac1; margin-top: 4px; }
.d-img { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 4px; background: repeating-linear-gradient(45deg, #232428 0 10px, #26272b 10px 20px); color: #80848e; font-size: 12px; overflow: hidden; }
.d-img span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.d-image { height: 160px; margin-top: 6px; }
.d-thumb { width: 80px; height: 80px; flex-direction: column; text-align: center; }
.d-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.d-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-btn-p { background: #5865f2; } .d-btn-g { background: #248046; } .d-btn-r { background: #da373c; } .d-btn-s { background: #4e5058; }
.d-emoji { font-size: 16px; }
.d-stars { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #f2f3f5; margin-bottom: 4px; font-size: 14px; }
.d-reply { font-size: 13px; color: #949ba4; }

/* transcript */
.transcript { display: grid; gap: 14px; }
.transcript .d-msg + .d-msg { margin-top: 0; }