/* Only the opt-in conversation panel. Shared comment controls keep their existing CSS. */
.dm-conversation { position: relative; }
.dm-conversation { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; width: 100%; height: min(760px, calc(100dvh - 150px)); min-height: 340px; overflow: hidden; color: var(--ui-ink); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: 12px; }
.dm-conversation [hidden] { display: none !important; }
.dm-conversation__head { grid-row: 1; }
.dm-notice { grid-row: 2; }
.dm-timeline { grid-row: 3; }
.dm-jump-slot { grid-row: 4; }
.dm-composer { grid-row: 5; }
.dm-conversation__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 6px 18px; border: 0; border-bottom: 1px solid var(--ui-line); }
.dm-conversation__head h2 { margin: 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.dm-conversation__head p { margin: 3px 0 0; color: var(--ui-dim); font-size: .72rem; }
.dm-action { min-height: 32px; padding: 4px 6px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: .75rem; cursor: pointer; }
.dm-action:hover { color: var(--ui-accent, #6554cf); }
.dm-peer { position: relative; min-width: 0; }
.dm-peer__toggle { display: flex; align-items: center; gap: 11px; max-width: 100%; padding: 3px 5px 3px 0; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; min-height: 44px; }
.dm-peer__toggle .profile-medallion { flex-shrink: 0; }
.dm-peer__copy { display: grid; min-width: 0; gap: 3px; }
.dm-peer__name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: inherit; font-size: inherit; font-weight: 750; }
.dm-peer__name > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dm-peer__context { color: var(--ui-dim); font-size: .72rem; font-weight: 400; }
.dm-peer__chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ui-dim); transition: transform .16s ease; }
.dm-peer__toggle[aria-expanded="true"] .dm-peer__chevron { transform: rotate(180deg); }
.dm-conversation .dm-conversation__close { width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; flex: none; padding: 11px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-dim); transition: color .16s ease, background-color .16s ease; }
.dm-conversation__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dm-conversation .dm-conversation__close:hover { color: var(--ui-ink); background: color-mix(in srgb, var(--ui-line) 60%, var(--ui-paper)); }
.dm-conversation .dm-conversation__close:focus-visible { outline: 2px solid #a993ff; outline-offset: 3px; }
.dm-peer__menu { position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 12px 16px 16px; border: 1px solid var(--ui-line); border-radius: 18px; color: var(--ui-ink); background: var(--ui-paper); box-shadow: 0 12px 38px #10142124; }
.dm-peer__menu::backdrop { background: transparent; pointer-events: none; }
.dm-peer__menu:popover-open { animation: dm-profile-enter 150ms ease-out; }
.dm-peer__profile-heading { display: flex; justify-content: space-between; align-items: center; padding-left: 2px; }
.dm-peer__profile-heading > span { font-size: .69rem; font-weight: 650; color: var(--ui-dim); }
.dm-peer__menu .dm-peer__profile-close { width: 32px; height: 32px; min-height: 32px; padding: 8px; margin-right: -6px; }
.dm-peer__menu .dm-peer__profile-close svg { width: 16px; height: 16px; }
.dm-peer__profile-identity { display: flex; align-items: center; gap: 16px; padding: 16px 4px 20px; }
.dm-peer__profile-identity .profile-medallion { flex: none; }
.dm-peer__profile-identity > div { display: grid; gap: 6px; min-width: 0; }
.dm-peer__profile-identity strong { font-size: .91rem; line-height: 1.5; overflow-wrap: anywhere; }
.dm-peer__profile-identity small { color: var(--ui-dim); font-size: .68rem; }
.dm-peer__profile-stat { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; margin-bottom: 12px; border-radius: 10px; background: var(--ui-paper-2); font-size: .74rem; }
.dm-peer__profile-stat > span { color: var(--ui-dim); }
.dm-peer__profile-link { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px; border: 1px solid color-mix(in srgb, #a993ff 35%, var(--ui-line)); border-radius: 11px; color: var(--ui-ink); background: color-mix(in srgb, #a993ff 10%, var(--ui-paper)); font-size: .78rem; font-weight: 650; text-decoration: none; }
.dm-peer__profile-link:hover { background: color-mix(in srgb, #a993ff 17%, var(--ui-paper)); }
.dm-peer__profile-link > span { flex: 1; }
.dm-peer__profile-link .icon { width: 14px; height: 14px; }
.dm-peer__profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dm-peer__profile-actions .dm-action { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-ink); }
.dm-peer__profile-actions .icon { width: 15px; height: 15px; flex: none; }
.dm-peer__profile-actions .dm-action:hover { background: var(--ui-paper-2); }
@keyframes dm-profile-enter { from { opacity: .4; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dm-peer__confirmation { width: min(390px, calc(100% - 36px)); border: 1px solid var(--ui-line); border-radius: 18px; padding: 26px; color: var(--ui-ink); background: var(--ui-paper); }
.dm-peer__confirmation::backdrop { background: #10142166; }
.dm-peer__confirmation h2 { font-size: 1.1rem; margin: 0 0 18px; }
.dm-peer__confirmation p { font-size: .83rem; line-height: 1.8; }
.dm-peer__confirmation > div { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.dm-report { width: min(460px, calc(100% - 36px)); max-height: calc(100dvh - 40px); overflow-y: auto; color: var(--ui-ink); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: 18px; padding: 26px; }
.dm-report::backdrop { background: #10142166; }
.dm-report h2 { margin: 0 0 14px; font-size: 1.12rem; }
.dm-report p { font-size: .8rem; line-height: 1.8; }
.dm-report label { display: grid; gap: 8px; margin-top: 18px; font-size: .82rem; }
.dm-report select, .dm-report textarea { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 9px; color: inherit; background: var(--ui-paper); font: inherit; }
.dm-report textarea { resize: vertical; }
.dm-report__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dm-report button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--ui-paper-2); color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
.dm-report button[type="submit"] { background: var(--ui-ink); color: var(--ui-paper); }
.dm-report button:disabled { opacity: .5; cursor: default; }
.dm-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dm-action:disabled { opacity: .5; cursor: default; }
.dm-notice { margin: 0; padding: 10px 20px; color: var(--ui-dim); background: var(--ui-paper-2); font-size: .76rem; line-height: 1.5; }
.dm-timeline { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; padding: 22px 26px; background: color-mix(in srgb, var(--ui-paper-2) 64%, var(--ui-paper)); }
.dm-timeline:focus { outline: none; }
.dm-scroll-region { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.dm-scroll-region::-webkit-scrollbar { width: 6px; height: 6px; }
.dm-scroll-region::-webkit-scrollbar-track { background: transparent; }
.dm-scroll-region::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.dm-scroll-region.dm-scroll-active { scrollbar-color: color-mix(in srgb, var(--ui-dim) 50%, transparent) transparent; }
.dm-scroll-region.dm-scroll-active::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ui-dim) 50%, transparent); }
@media (forced-colors: active) { .dm-scroll-region { scrollbar-color: auto; } }
.dm-older { display: block; margin: 0 auto 12px; }
.dm-timeline-state { color: var(--ui-dim); font-size: .8rem; text-align: center; padding: 28px 0; }
.dm-messages { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: flex-end; gap: 15px; margin: 0; padding: 0; list-style: none; }
.dm-message { max-width: min(78%, 520px); align-self: flex-start; overflow-wrap: anywhere; transform-origin: bottom right; }
.dm-message--mine { align-self: flex-end; }
.dm-message__sender { display: flex; align-items: center; gap: 9px; min-height: 36px; max-width: 100%; margin: 0 0 5px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ui-ink); font: inherit; font-size: .73rem; font-weight: 650; text-align: start; cursor: pointer; }
.dm-message__sender .profile-medallion { flex: none; }
.dm-message__sender > span:last-child { overflow-wrap: anywhere; }
.dm-message__sender:hover { color: var(--ui-accent); }
.dm-message__sender:focus-visible { outline: 2px solid #a993ff; outline-offset: 3px; }
.dm-message__bubble { width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ui-line) 70%, transparent); border-radius: 11px 18px 18px 18px; background: var(--ui-paper); font-size: .86rem; line-height: 1.65; box-shadow: none; }
.dm-message--mine .dm-message__bubble { margin-left: auto; border-radius: 18px 11px 18px 18px; border-color: color-mix(in srgb, #a993ff 22%, var(--ui-line)); background: color-mix(in srgb, #a993ff 16%, var(--ui-paper)); }
.dm-message:has(.dm-message__sender) > .dm-message__bubble, .dm-message:has(.dm-message__sender) > .dm-message__meta { margin-left: 35px; }
.dm-message:has(.dm-message__sender) > .dm-message__bubble { max-width: calc(100% - 35px); }
/* 사진·이모티콘만 있는 메시지는 말풍선 없이 그림 그대로(오너 2026-10-04). */
.dm-message__bubble.dm-message__bubble--media,
.dm-message--mine .dm-message__bubble.dm-message__bubble--media { padding: 0; border: 0; background: transparent; box-shadow: none; }
.dm-message__bubble p { margin: 0; }
.dm-message__bubble p + p { margin-top: .35em; }
.dm-message__bubble pre { max-width: 100%; overflow-x: auto; }
.dm-message__bubble a { color: inherit; text-decoration: underline; }
.dm-message__meta { display: flex; gap: 7px; padding-inline: 4px; margin-top: 5px; color: var(--ui-dim); font-size: .62rem; }
.dm-message--mine .dm-message__meta { justify-content: flex-end; }
.dm-message__error { margin: 5px 0 0; color: var(--ui-dim); font-size: .7rem; line-height: 1.55; }
.dm-message__error .dm-action { display: block; padding-left: 0; }
.dm-image { display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 300px; object-fit: contain; border-radius: 8px; }
.dm-message__bubble p:not(:empty) + .dm-image { margin-top: 8px; }
.dm-media-unavailable { display: block; padding: 12px 0; color: var(--ui-dim); font-size: .75rem; }
.dm-jump-slot { min-height: 0; text-align: center; }
.dm-jump-slot:has(button:not([hidden])) { padding: 5px 12px; }
.dm-composer.comment-composer { display: block; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: color-mix(in srgb, var(--ui-paper-2) 64%, var(--ui-paper)); box-shadow: none; }
.dm-send-pricing { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; padding: 0 4px 7px; color: var(--ui-dim); font-size: .67rem; line-height: 1.35; }
.dm-send-pricing__balance, .dm-send-pricing__costs { display: flex; align-items: center; gap: 7px; }
.dm-send-pricing__balance strong { color: var(--ui-ink); font-size: .72rem; font-variant-numeric: tabular-nums; }
.dm-send-pricing__costs span + span::before { content: "·"; margin-right: 7px; color: color-mix(in srgb, var(--ui-dim) 55%, transparent); }
.dm-composer .comment-compose-stack { width: 100%; max-width: none; min-width: 0; }
.dm-conversation .dm-composer .comment-compose-bar { width: 100%; min-height: 52px; border: 0; box-shadow: none; border-radius: 17px; }
.dm-conversation .dm-composer .comment-compose-send { border: 0; }
.dm-composer .comment-compose-stack > .emote-picker-slot:not([hidden]) { position: absolute; bottom: calc(100% + 8px); top: auto; left: 0; right: 0; width: 100%; max-width: 100%; }
.dm-conversation .dm-composer .comment-compose-tools {
  position: fixed; inset: auto; margin: 0; --dm-menu-row: clamp(30px, calc((100dvh - 120px) / 7), 56px);
  width: min(236px, calc(100vw - 32px)); padding: 10px;
  max-height: none; overflow: visible; border: 1px solid #cbd2d3; border-radius: 24px;
  color: #17191b; background: #fff; box-shadow: 0 12px 32px #10182026, 0 3px 9px #1018200f;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform-origin: left bottom; animation: dm-tools-rise 420ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes dm-tools-rise {
  0% { opacity: 0; transform: translateY(18px) scale(.96, .9); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.015, 1.025); }
  82% { opacity: 1; transform: translateY(1px) scale(1.005, .985); }
  100% { opacity: 1; transform: none; }
}
.dm-conversation .dm-attachment-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0; border: 0; background: transparent; }
.dm-attachment-menu > button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--dm-menu-row); padding: 6px 10px; border: 0; border-radius: 16px; color: #17191b; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.dm-conversation .comment-compose-tools:popover-open .dm-attachment-menu > button { animation: dm-tool-follow 260ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(45ms + var(--dm-menu-order) * 28ms); }
@keyframes dm-tool-follow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dm-attachment-menu__icon { display: grid; place-items: center; flex: none; width: calc(var(--dm-menu-row) - 12px); height: calc(var(--dm-menu-row) - 12px); border-radius: 50%; background: #f0f1f2; }
.dm-attachment-menu__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-conversation .dm-attachment-menu button:hover { color: #17191b; background: #f3f4f5; }
.dm-conversation .dm-attachment-menu button:focus-visible { outline: 2px solid #69747d; outline-offset: 2px; }
.dm-conversation .dm-attachment-menu button:disabled { opacity: .45; cursor: default; }
.dm-conversation .comment-compose-tools::backdrop { background: transparent; }
.dm-conversation .comment-compose-tools:not(:popover-open) { animation: none; }
.dm-conversation .dm-composer .comment-compose-bar { border: 1px solid #191b1d; border-radius: 24px; background: #fff; }
.dm-conversation .dm-composer .comment-compose-bar:focus-within { border-color: #191b1d; background: #fff; box-shadow: 0 0 0 1px #191b1d; }
.dm-conversation .dm-composer .comment-compose-field :is(.rich-editor, textarea) { color: #191b1d; }
.dm-conversation .dm-composer .comment-compose-field .rich-editor[data-empty="true"]::before,
.dm-conversation .dm-composer .comment-compose-field textarea::placeholder { color: #8b9197; }
.dm-conversation .dm-composer .comment-compose-bar :is(.comment-compose-more, .comment-compose-emote) { color: #858b91; background: transparent; -webkit-tap-highlight-color: transparent; }
/* 누르거나 연 상태에서도 회색 네모를 깔지 않는다(오너 2026-10-04). 폰에서는 :hover 가 눌린 뒤에도 남아 네모로 보였다. 아이콘 색만 바꾼다. */
.dm-conversation .dm-composer .comment-compose-bar :is(.comment-compose-more, .comment-compose-emote):is(:hover, :active, :focus, [aria-expanded="true"]) { color: #3d4349; background: transparent; outline: none; box-shadow: none; }
.dm-conversation .dm-composer .comment-compose-send { width: 36px; height: 36px; justify-self: center; align-self: center; border: 1px solid #b8babc; border-radius: 50%; color: #111; background: transparent; }
.dm-conversation .dm-composer .comment-compose-send:hover { background: #f2f3f4; }
.dm-conversation .dm-composer .comment-compose-send .comment-send-symbol { width: 24px; height: 24px; border-radius: 0; }
.dm-composer .emote-picker__panel { max-height: min(320px, 40dvh); }
.dm-composer .emote-picker__pack-grid { max-height: min(230px, 30dvh); }
.dm-composer-status { margin: 0; color: var(--ui-dim); font-size: .73rem; line-height: 1.5; }
.dm-composer-status:not(:empty) { margin-top: 8px; }
.dm-attachments { display: flex; flex-wrap: wrap; gap: 10px; max-height: 150px; overflow-y: auto; padding-top: 9px; }
.dm-attachment { width: 86px; margin: 0; }
.dm-attachment .dm-image { width: 86px; height: 72px; object-fit: contain; background: var(--ui-paper-2); }
.dm-attachment .dm-action { width: 100%; font-size: .67rem; }
.dm-upload { margin: 0; color: var(--ui-dim); font-size: .73rem; }
@media (max-width: 600px) {
  .dm-conversation { height: calc(100dvh - 112px); min-height: 300px; border-radius: 0; }
  .dm-conversation__head { padding: 6px 12px; }
  .dm-timeline { padding: 12px; }
  .dm-message { max-width: 86%; }
  .dm-composer.comment-composer { padding-inline: 8px; }
  .dm-send-pricing { gap: 8px; overflow: hidden; white-space: nowrap; }
  .dm-send-pricing__costs { gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .dm-send-pricing__costs span + span::before { margin-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-conversation .dm-composer .comment-compose-tools,
  .dm-conversation .comment-compose-tools:popover-open .dm-attachment-menu > button { animation: none; }
  .dm-conversation *, .dm-conversation *::before, .dm-conversation *::after { scroll-behavior: auto; animation: none; transition: none; }
}