/* DM 다이렉트 메시지 */
.dm-badge[hidden]{display:none;}
.dm-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#ff4d67;border:2px solid #000;color:#fff;
  font-size:9.5px;font-weight:900;line-height:12px;display:flex;align-items:center;justify-content:center;}

/* 높이 = visualViewport(--dm-vvh, 키보드 제외 실제 보이는 영역) — 키보드가 열리면 패널이
   그만큼 줄어 입력바가 키보드 '바로 위'에 앉는다. 안 쓰면 iOS가 페이지를 멋대로 밀어올려
   입력바가 붕 뜨고 위치가 어긋난다(사장님 재현). */
.dm-root{position:fixed;top:0;left:0;right:0;bottom:auto;height:var(--dm-vvh,100dvh);z-index:11500;pointer-events:none;}
.dm-root.open{pointer-events:auto;}
.dm-dim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s;}
.dm-root.open .dm-dim{opacity:1;}
.dm-panel{position:absolute;top:0;right:0;bottom:0;width:100%;max-width:460px;
  background:radial-gradient(120% 80% at 50% 0%,#141419 0%,#0a0a0b 60%);
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow:hidden;}
.dm-root.open .dm-panel{transform:translateX(0);}
.dm-view{position:absolute;inset:0;display:flex;flex-direction:column;}
.dm-view[hidden]{display:none;}

.dm-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;
  height:56px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.07);flex:none;
  padding-top:env(safe-area-inset-top);box-sizing:content-box;}
.dm-title{text-align:center;font-size:16px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 갈라톡 워드마크 — "GALLA"는 실제 로고 이미지(굵은 oblique 브랜드체) 그대로,
   "TALK"만 같은 굵기·기울기(italic+skew)로 맞춰 로고와 이질감 없게.
   ⚠️ GALLA 부분을 다른 페이지 헤더 로고(.logo=height~26px)와 같은 크기로 키워 통일(사장님 요청). */
.dm-wordmark{display:inline-flex;align-items:center;gap:6px;line-height:1;}
.dm-wm-g{height:26px;width:auto;display:block;}
.dm-wm-t{font-weight:900;font-style:italic;font-size:24px;letter-spacing:.3px;
  transform:skewX(-6deg);transform-origin:left center;display:inline-block;
  font-family:'Helvetica Neue',Arial,sans-serif;
  /* 재밌는 효과: 인디고→퍼플→핑크 그라디언트가 좌→우로 흐르는 샤인(사장님 요청) */
  background:linear-gradient(100deg,#5b8cff 0%,#8a6cff 38%,#ff5fa2 72%,#5b8cff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dmTalkShine 3.6s linear infinite;}
@keyframes dmTalkShine{to{background-position:220% 0;}}
@media (prefers-reduced-motion:reduce){.dm-wm-t{animation:none;}}
/* 브랜드 헤더 높이를 공용 헤더(.header-inner 64px)와 맞춰 로고 세로 위치까지 통일 */
.dm-head-brand{height:64px;}
.dm-x,.dm-compose,.dm-back{width:40px;height:40px;background:none;border:none;color:#fff;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dm-back{font-size:30px;}
.dm-compose{font-size:19px;}
.dm-head-sp{width:40px;}

.dm-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.dm-empty{text-align:center;color:#8b909b;font-size:14px;padding:64px 24px;line-height:1.7;}
.dm-empty span{font-size:12.5px;color:#6b7280;}

.dm-thread{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 16px;background:none;border:none;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);}
.dm-thread:active{background:rgba(255,255,255,.04);}
.dm-ava{width:46px;height:46px;flex:none;border-radius:50%;color:#fff;
  font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;}
.dm-thread-mid{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.dm-thread-name{font-size:15px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-thread-prev{font-size:13px;color:#9aa0ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-unread .dm-thread-prev{color:#e6e8ec;font-weight:600;}
.dm-thread-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;}
.dm-thread-time{font-size:11.5px;color:#6b7280;}
.dm-dot{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff4d67;
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* 대화 */
.dm-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 12px;display:flex;flex-direction:column;gap:7px;}
.dm-loading{color:#6b7280;text-align:center;padding:24px;font-size:13px;}
.dm-bubble{max-width:76%;padding:9px 13px;border-radius:16px;position:relative;
  font-size:14.5px;line-height:1.4;color:#fff;word-break:break-word;
  display:flex;flex-direction:column;gap:3px;}
.dm-bubble.you{align-self:flex-start;background:#23252c;border-bottom-left-radius:5px;}
.dm-bubble.me{align-self:flex-end;
  background:linear-gradient(135deg,#3d6bff,#5b7dff);border-bottom-right-radius:5px;}
.dm-bub-time{font-size:10px;opacity:.6;align-self:flex-end;}

.dm-inputbar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);flex:none;background:#0c0c0f;
  box-sizing:border-box;max-width:100%;flex-wrap:nowrap;}
/* ⚠️ width:0 + flex:1 필수 — iOS WKWebView(특히 디스플레이 확대 모드)는 min-width:0만으론
   textarea 고유폭 축소를 거부해 전송 버튼이 화면 밖으로 밀린다(사장님 두 폰 재현).
   width:0으로 고유폭 기여를 죽여 flex가 폭을 전적으로 결정하게 한다. */
.dm-inputbar textarea{flex:1 1 0%;width:0;min-width:0;box-sizing:border-box;resize:none;max-height:120px;background:#1a1b20;
  border:1px solid rgba(255,255,255,.1);border-radius:20px;color:#fff;
  padding:10px 14px;font-size:14.5px;line-height:1.35;font-family:inherit;outline:none;}
.dm-inputbar textarea:focus{border-color:#3d6bff;}
.dm-send{width:40px;height:40px;flex:none;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#3d6bff,#5b7dff);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;}
.dm-send:active{transform:scale(.92);}

/* 검색 */
.dm-search-wrap{padding:12px 16px;flex:none;}
.dm-search-wrap input{width:100%;box-sizing:border-box;background:#1a1b20;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;
  padding:11px 14px;font-size:14.5px;outline:none;}
.dm-search-wrap input:focus{border-color:#c9d1e0;}

/* ═══════ DM 고도화 1차: 영수증·입력중·답장·이미지·공유카드·메뉴 ═══════ */
.dm-peer-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.dm-peer-sub { font-size: 10.5px; color: #6b7488; line-height: 1.2; min-height: 13px; }
.dm-peer-sub.on { color: #4ade80; }        /* 온라인 = 초록 */
.dm-peer-sub.typing { color: #7aa2ff; }    /* 입력 중 = 파랑 */

.dm-receipt { margin-left: 5px; font-size: 9.5px; font-weight: 700; color: #7aa2ff; font-style: normal; }
.dm-bub-body.dm-deleted { color: #6b7488; font-style: italic; }
.dm-uploading { opacity: .6; }

.dm-bub-img { display: block; max-width: 200px; max-height: 260px; border-radius: 12px; object-fit: cover; }

.dm-quote {
  display: block; font-size: 11px; color: #9aa3b5; margin-bottom: 4px;
  padding: 4px 8px; border-left: 2px solid #3d6bff; background: rgba(255,255,255,.05);
  border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}

.dm-share-card {
  display: flex; gap: 9px; align-items: center; text-decoration: none;
  background: #101218; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 9px; min-width: 190px; max-width: 240px;
}
.dm-share-thumb { flex: 0 0 48px; height: 48px; border-radius: 9px; background: #23262f center/cover no-repeat; }
.dm-share-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-share-title { font-size: 12.5px; font-weight: 800; color: #eef0f4; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-share-src { font-size: 10.5px; color: #7aa2ff; font-weight: 700; }

/* display:flex가 [hidden]의 display:none을 이겨서 빈 바가 보이던 버그 — [hidden] 우선 명시 */
.dm-share-banner[hidden] { display: none; }
.dm-share-banner {
  margin: 8px 12px 0; padding: 9px 11px; border-radius: 11px; font-size: 12px; color: #cfd6e4;
  background: rgba(61,107,255,.12); border: 1px solid rgba(61,107,255,.3);
  display: flex; align-items: center; gap: 6px;
}
.dm-share-banner b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-share-banner button { margin-left: auto; border: none; background: rgba(255,255,255,.08);
  color: #9aa3b5; font-size: 11px; padding: 4px 9px; border-radius: 7px; cursor: pointer; }

.dm-reply-strip[hidden] { display: none; }
.dm-reply-strip {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: #14161d; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #9aa3b5;
}
.dm-reply-strip b { color: #7aa2ff; margin-right: 5px; }
.dm-reply-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-reply-x { border: none; background: none; color: #6b7488; cursor: pointer; font-size: 12px; }

.dm-attach {
  flex: 0 0 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); color: #c9d1e0; font-size: 18px; font-weight: 700; line-height: 1;
}
.dm-attach:active { transform: scale(.92); }

.dm-menu {
  position: fixed; z-index: 2147483500; min-width: 150px;
  background: #1b1d25; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); overflow: hidden; padding: 4px;
}
.dm-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  color: #eef0f4; font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 8px;
}
.dm-menu button:active { background: rgba(255,255,255,.08); }
.dm-menu button.danger { color: #ff8595; }

/* ═══════ 카톡 구조 도입: 채팅/친구 탭 · 실제 아바타 · 고급 다크 ═══════ */
/* 세그먼트 탭 — 갈라 액센트(인디고), 알약형 */
.dm-tabs {
  display: flex; gap: 6px; padding: 10px 14px 8px; flex: none;
}
.dm-tab {
  flex: 1; padding: 9px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  background: rgba(255,255,255,.03); color: #8b909b; font-size: 13px; font-weight: 800;
  cursor: pointer; transition: all .18s ease; letter-spacing: -.2px;
}
.dm-tab.on {
  background: linear-gradient(135deg, rgba(61,107,255,.22), rgba(43,79,208,.14));
  border-color: rgba(61,107,255,.55); color: #cdd9ff;
  box-shadow: 0 0 18px -6px rgba(61,107,255,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.dm-tab:active { transform: scale(.97); }

/* 아바타 — 사진이면 사진, 아니면 첫 글자 그라디언트. 은은한 링으로 마감 */
.dm-ava { overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 4px 12px rgba(0,0,0,.35); }
.dm-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 행 다듬기 — 여백을 키우고 구분선을 죽여 카톡처럼 조용하게 */
.dm-thread, .dm-friend {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 13px 16px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.035);
  transition: background .15s ease;
}
.dm-thread:active, .dm-friend:active { background: rgba(61,107,255,.07); }
.dm-thread-name { font-size: 15px; font-weight: 800; color: #f3f4f6; letter-spacing: -.2px; }
.dm-thread-prev { font-size: 12.5px; color: #7c828f; margin-top: 2px; }

/* 안읽음 — 갈라 액센트 인디고 알약(알림의 빨강과 구분: 빨강=경고, 인디고=메시지) */
.dm-dot {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  background: linear-gradient(135deg, #3d6bff, #2b4fd0); color: #fff;
  font-size: 10.5px; font-weight: 900; line-height: 19px; text-align: center;
  box-shadow: 0 3px 10px -3px rgba(61,107,255,.8);
}
.dm-unread .dm-thread-name { color: #fff; }
.dm-unread .dm-thread-prev { color: #aeb6c4; font-weight: 600; }

/* 친구 탭 */
.dm-friend-search { padding: 4px 14px 10px; }
.dm-friend-search input {
  width: 100%; box-sizing: border-box; padding: 10px 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; color: #f3f4f6; font-size: 13.5px; outline: none;
}
.dm-friend-search input:focus { border-color: rgba(61,107,255,.5); }
.dm-sec {
  padding: 6px 16px 8px; font-size: 11.5px; font-weight: 800; color: #6b7280;
  letter-spacing: .3px;
}
.dm-sec b { color: #9ab4ff; }
.dm-mutual {
  display: inline-block; margin-left: 6px; padding: 1.5px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 900; font-style: normal; vertical-align: 1px;
  color: #9ab4ff; background: rgba(61,107,255,.14); border: 1px solid rgba(61,107,255,.35);
}
.dm-friend-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
}
.dm-friend:active .dm-friend-go { background: rgba(61,107,255,.2); border-color: rgba(61,107,255,.5); }

/* ═══════ DM 관리(카톡 차용): 설정·정렬·토글 ═══════ */
.dm-head.has-btns { grid-template-columns: 40px 1fr 84px; }
/* 갈라톡 워드마크 헤더: 좌(+)·우(설정+새메시지) 폭이 달라 로고가 왼쪽으로 쏠렸다 →
   좌우 칸을 84px로 대칭 고정해 GALLA TALK 로고를 화면 정중앙에(다른 페이지 로고와 동일). */
.dm-head-brand.has-btns { grid-template-columns: 84px 1fr 84px; }
/* 오버레이(팝오버) 모드: 우측에 닫기(✕)까지 3개 → 우측 칸을 auto로 넓혀 안 잘리게 */
.dm-root:not(.page) .dm-head-brand.has-btns { grid-template-columns: 84px 1fr auto; }
.dm-head-brand .dm-x { justify-self: start; }
.dm-head-btns { display: flex; justify-content: flex-end; align-items: center; }
.dm-x-close { width: 40px; height: 40px; background: none; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* 대화방 헤드: 육성톡·면상톡·설정 3개 아이콘이 40px 칸에 욱여넣어져 빽빽하던 것 —
   우측 칸을 아이콘 수에 맞춰 auto로 넓히고 살짝 간격을 준다(제목 중앙정렬은 유지). */
.dm-view[data-view="thread"] .dm-head { grid-template-columns: 40px 1fr auto; }
.dm-view[data-view="thread"] .dm-head-btns { gap: 2px; padding-right: 2px; }
.dm-gear { width: 40px; height: 40px; background: none; border: none; color: #9aa3b5;
  font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.dm-sort-row { padding: 2px 16px 6px; }
#dm-sort { border: none; background: none; color: #6b7488; font-size: 11.5px; font-weight: 800;
  cursor: pointer; padding: 4px 0; }
#dm-sort:active { color: #9ab4ff; }

.dm-set-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04); }
.dm-set-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-set-mid b { font-size: 14.5px; font-weight: 800; color: #f3f4f6; }
.dm-set-mid i { font-size: 11.5px; color: #7c828f; font-style: normal; line-height: 1.45; }
.dm-toggle { flex: none; min-width: 52px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #8b909b; font-size: 12px; font-weight: 900; transition: all .18s ease; }
.dm-toggle.on { border-color: rgba(61,107,255,.6); color: #cdd9ff;
  background: linear-gradient(135deg, rgba(61,107,255,.25), rgba(43,79,208,.15));
  box-shadow: 0 0 14px -5px rgba(61,107,255,.6); }
.dm-unset { flex: none; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #c9d1e0; font-size: 12px; font-weight: 800; }
.dm-unset:active { background: rgba(255,77,103,.15); border-color: rgba(255,77,103,.4); }
.dm-set-empty { padding: 10px 16px 16px; font-size: 12.5px; color: #565b66; }

/* ═══════════════════════════════════════════════════════════════
   ✨ DM 모션 레이어 — "1차원적" 정적 UI에 생명을. 원칙:
   · 모든 움직임은 스프링 곡선(cubic-bezier(.2,1.2,.3,1)) — 선형은 죽은 움직임
   · 등장은 폭포(stagger), 상호작용은 즉답(≤180ms), 장식은 은은하게
   · prefers-reduced-motion이면 전부 끈다 — 멀미 나는 고급짐은 고급이 아니다
   ═══════════════════════════════════════════════════════════════ */

/* 패널 — 유리 질감 + 스프링 슬라이드 */
.dm-dim { backdrop-filter: blur(7px) saturate(1.2); -webkit-backdrop-filter: blur(7px) saturate(1.2); }
.dm-panel {
  background:
    radial-gradient(90% 40% at 80% 0%, rgba(61,107,255,.10) 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 0%, #13141a 0%, #08090c 60%);
  transition: transform .42s cubic-bezier(.2,1.1,.3,1);
  box-shadow: -24px 0 60px rgba(0,0,0,.55);
}

/* 리스트 폭포 등장 — JS(staggerRows)가 --i를 심는다 */
.dm-thread.in, .dm-friend.in {
  opacity: 0;
  animation: dmRowIn .38s cubic-bezier(.2,1.2,.3,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes dmRowIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 말풍선 — 내 것은 인디고 그라디언트+글로우, 상대는 유리판. 꼬리 비대칭 */
.dm-bubble {
  max-width: 76%; padding: 9px 13px; margin: 3px 14px; width: fit-content;
  border-radius: 18px; position: relative;
  font-size: 14.5px; line-height: 1.5; color: #f3f4f6;
  transition: transform .12s ease;
}
.dm-bubble:active { transform: scale(.97); }
.dm-bubble.me {
  margin-left: auto;
  background: linear-gradient(135deg, #3f6dff 0%, #2b4fd0 100%);
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(61,107,255,.65), inset 0 1px 0 rgba(255,255,255,.14);
}
.dm-bubble.you {
  margin-right: auto;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  border-bottom-left-radius: 6px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* 메시지 등장 — 초기 로드는 폭포(in), 실시간 새 메시지는 방향성 있는 팝(new) */
.dm-bubble.in {
  opacity: 0;
  animation: dmMsgIn .34s cubic-bezier(.2,1.2,.3,1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes dmMsgIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.dm-bubble.new.me  { animation: dmPopMe .38s cubic-bezier(.2,1.5,.35,1) both; }
.dm-bubble.new.you { animation: dmPopYou .38s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes dmPopMe  { from { opacity: 0; transform: translate(16px, 8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dmPopYou { from { opacity: 0; transform: translate(-16px, 8px) scale(.9); } to { opacity: 1; transform: none; } }

.dm-bub-time { display: inline-block; margin-left: 8px; font-size: 9.5px; color: rgba(255,255,255,.5); vertical-align: bottom; }
.dm-bubble.you .dm-bub-time { color: #6b7488; }
.dm-receipt { animation: dmFade .3s ease both; }
@keyframes dmFade { from { opacity: 0; } to { opacity: 1; } }

/* 타이핑 말풍선 — 점 3개가 파도친다 */
.dm-typing { padding: 13px 15px; }
.dm-typing-dots { display: inline-flex; gap: 5px; }
.dm-typing-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #8b93a5;
  animation: dmDots 1.15s ease-in-out infinite;
}
.dm-typing-dots i:nth-child(2) { animation-delay: .15s; }
.dm-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dmDots { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* 헤더 아바타 + 온라인 맥동 링 */
.dm-peer-wrap { flex-direction: row !important; align-items: center; justify-content: center; gap: 9px; }
.dm-peer-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dm-peer-col .dm-title { text-align: left; font-size: 15px; }
.dm-head-ava { position: relative; flex: none; display: none; }
.dm-head-ava:not(:empty) { display: block; }
.dm-ava.sm { width: 32px; height: 32px; font-size: 13px; }
.dm-head-ava.on::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; border: 2px solid #0a0a0c;
  animation: dmPulse 2s ease-in-out infinite;
}
@keyframes dmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50% { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}

/* 입력바 — 포커스 글로우 + 전송 비행 */
.dm-inputbar { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.06); }
#dm-input {
  transition: border-color .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 9px 15px;
  background: rgba(255,255,255,.05);
}
#dm-input:focus {
  outline: none; border-color: rgba(61,107,255,.55);
  box-shadow: 0 0 0 3px rgba(61,107,255,.12), 0 0 18px -6px rgba(61,107,255,.4);
}
.dm-send {
  width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, #3f6dff, #2b4fd0); color: #fff; font-size: 15px;
  box-shadow: 0 5px 14px -5px rgba(61,107,255,.7);
  transition: transform .15s cubic-bezier(.2,1.4,.4,1);
}
.dm-send:active { transform: scale(.88); }
.dm-send.fly { animation: dmFly .45s cubic-bezier(.3,1.2,.4,1); }
@keyframes dmFly {
  0% { transform: none; }
  35% { transform: translate(3px, -6px) rotate(-14deg) scale(1.08); }
  70% { transform: translate(-1px, 2px) rotate(3deg) scale(.96); }
  100% { transform: none; }
}

/* 메뉴·시트 등장도 스프링으로 */
.dm-menu { animation: dmMenuIn .22s cubic-bezier(.2,1.3,.35,1) both; transform-origin: top left; }
@keyframes dmMenuIn { from { opacity: 0; transform: scale(.85) translateY(-4px); } to { opacity: 1; transform: none; } }

/* 안읽음 뱃지 — 새로 뜰 때 통통 */
.dm-unread .dm-dot { animation: dmBounce .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes dmBounce { from { transform: scale(.4); } 60% { transform: scale(1.18); } to { transform: none; } }

/* 스크롤바 — 가늘게 */
.dm-list::-webkit-scrollbar, .dm-msgs::-webkit-scrollbar { width: 3px; }
.dm-list::-webkit-scrollbar-thumb, .dm-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

/* 접근성 — 움직임 최소화 설정이면 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  .dm-panel, .dm-thread.in, .dm-friend.in, .dm-bubble.in, .dm-bubble.new,
  .dm-typing-dots i, .dm-head-ava.on::after, .dm-send.fly, .dm-menu,
  .dm-unread .dm-dot { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══════ ➕ 친구 추가 ═══════ */
.dm-friend-search { display: flex; gap: 8px; align-items: center; }
.dm-friend-search input { flex: 1 1 auto; min-width: 0; }
.dm-add-btn {
  flex: 0 0 auto; padding: 10px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(61,107,255,.45); font-size: 12.5px; font-weight: 900; color: #cdd9ff;
  background: linear-gradient(135deg, rgba(61,107,255,.2), rgba(43,79,208,.12));
  transition: transform .15s cubic-bezier(.2,1.4,.4,1);
}
.dm-add-btn:active { transform: scale(.94); }

/* 내 친구 코드 카드 — 이 화면의 주인공. 코드가 크게 빛난다 */
.dm-mycode {
  margin: 12px 14px 4px; padding: 18px 16px; border-radius: 18px; text-align: center;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(61,107,255,.16) 0%, transparent 70%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(61,107,255,.3);
  box-shadow: 0 0 28px -12px rgba(61,107,255,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.dm-mycode-label { font-size: 11px; font-weight: 800; color: #8b93a5; letter-spacing: .5px; }
.dm-mycode-code {
  margin: 8px 0 12px; font-size: 34px; font-weight: 900; letter-spacing: 8px; color: #fff;
  text-shadow: 0 0 24px rgba(122,162,255,.6); font-variant-numeric: tabular-nums;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1);
}
.dm-mycode-code.flash { transform: scale(1.12); color: #9ab4ff; }
.dm-mycode-btns { display: flex; gap: 8px; justify-content: center; }
.dm-mycode-btns button {
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 800;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #eef0f4;
}
.dm-mycode-btns button:active { transform: scale(.94); }
.dm-mycode-hint { margin-top: 11px; font-size: 10.5px; color: #6b7488; line-height: 1.5; }

.dm-code-row { display: flex; gap: 8px; padding: 2px 14px 6px; }
.dm-code-row input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 11px 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; color: #f3f4f6; font-size: 14px; outline: none;
  letter-spacing: 2px; text-transform: uppercase;
}
#dm-add-q { letter-spacing: normal; text-transform: none; }
.dm-code-row input:focus { border-color: rgba(61,107,255,.5); }
.dm-code-row button {
  flex: 0 0 auto; padding: 0 18px; border-radius: 12px; cursor: pointer; font-size: 13px;
  font-weight: 900; border: none; color: #fff;
  background: linear-gradient(135deg, #3f6dff, #2b4fd0);
}
.dm-sec-sub { font-weight: 600; color: #565b66; }

.dm-follow-btn {
  flex: none; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 900; border: none; color: #fff;
  background: linear-gradient(135deg, #3f6dff, #2b4fd0);
  box-shadow: 0 4px 12px -5px rgba(61,107,255,.7);
  transition: transform .15s cubic-bezier(.2,1.4,.4,1);
}
.dm-follow-btn:active { transform: scale(.92); }
.dm-follow-btn.done {
  background: rgba(74,222,128,.13); color: #7ee2a0; box-shadow: none;
  border: 1px solid rgba(74,222,128,.35); cursor: default;
}

/* ═══════ ✏️ 편집 모드 칩 — 길게 누르기에 숨어 있던 관리를 드러낸다 ═══════ */
.dm-edit-chips { flex: none; display: flex; gap: 6px; }
.dm-chip {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s cubic-bezier(.2,1.4,.4,1);
}
.dm-chip:active { transform: scale(.88); }
.dm-chip.on { border-color: rgba(255,207,77,.55); background: rgba(255,207,77,.12); }
.dm-chip.danger:active { background: rgba(255,77,103,.18); border-color: rgba(255,77,103,.45); }