/* =============================================================================
   DM — 목록 / 대화 / 작성창 / 모달 / 관리자
   ============================================================================= */

/* ---------------------------------------------------------------- 아바타 -- */
.dm-avatar {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
  user-select: none;
  letter-spacing: -.03em;
}
.dm-avatar.group { border-radius: 30%; }

/* ------------------------------------------------------------ 목록 패널 -- */
.list-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.list-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.list-title { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.list-tools { display: flex; align-items: center; gap: 2px; }

.list-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--text-sub);
}
.switch {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--border);
  border: 0;
  cursor: pointer;
  transition: background .15s;
  flex: none;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 999px;
  background: #fff;
  transition: transform .15s;
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(15px); }

.conv-list { flex: 1; overflow-y: auto; overflow-x: hidden; }

.conv-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--active); }
.conv-item.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.conv-body { flex: 1; min-width: 0; }
.conv-row1 { display: flex; align-items: baseline; gap: 8px; }
.conv-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.conv-item.unread .conv-name { font-weight: 800; }
.conv-time { font-size: 11px; color: var(--text-faint); flex: none; }
.conv-row2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.conv-preview {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-badge {
  flex: none;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.conv-mute { flex: none; font-size: 11px; color: var(--text-faint); }
.conv-star { flex: none; font-size: 11px; color: oklch(70% 0.13 85); }

.conv-menu-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  opacity: 0;
  background: var(--card);
}
.conv-item:hover .conv-menu-btn { opacity: 1; }

.list-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.7;
}

/* -------------------------------------------------------------- 대화 뷰 -- */
/*
  카카오톡식 좌우 말풍선이 아니라 슬랙식 "한 줄씩 쌓이는 기록" 형태다.
  - 모든 메시지를 왼쪽 정렬한다. 내 메시지도 색·위치로 구분하지 않는다.
  - 말풍선 배경/테두리를 없애고 이름과 여백으로만 구분한다.
  - 행에 마우스를 올리면 배경이 옅게 깔리고 오른쪽 위에 액션 바가 뜬다.
*/
.conv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  min-height: 56px;
}
.conv-head-info { flex: 1; min-width: 0; }
.conv-head-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-head-sub { font-size: 11px; color: var(--text-sub); margin-top: 1px; }
.conv-head-tools { display: flex; align-items: center; gap: 2px; flex: none; }

.msg-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 10px;
  background: var(--card);
}
.msg-loading, .msg-top-note {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 10px 0;
}

/* 날짜 구분선 — 가운데 알약 */
.day-sep {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 18px 16px 10px;
  color: var(--text-sub);
  font-size: 11.5px;
  font-weight: 700;
  position: relative;
}
.day-sep::before, .day-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.day-sep > * { margin: 0; }
.day-sep {
  --pill-pad: 12px;
}
.day-sep::before { margin-right: var(--pill-pad); }
.day-sep::after { margin-left: var(--pill-pad); }

/* ---- 메시지 행 ---- */
.msg {
  display: flex;
  gap: 10px;
  padding: 5px 56px 5px 16px;   /* 오른쪽은 액션 바 자리 */
  position: relative;
}
.msg:not(.grouped) { margin-top: 12px; }
.msg.grouped { padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: var(--msg-hover); }

.msg-side { width: 36px; flex: none; display: flex; justify-content: center; }
.msg-hovertime {
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.6;
  opacity: 0;
  white-space: nowrap;
}
.msg:hover .msg-hovertime { opacity: 1; }

.msg-main { flex: 1; min-width: 0; }

.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; flex-wrap: wrap; }
.msg-sender { font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; }
.msg-time { font-size: 11px; color: var(--text-faint); }
.msg-edited { font-size: 10.5px; color: var(--text-faint); }

.msg-text {
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.msg-text a { color: var(--primary); text-decoration: underline; }
.msg-deleted { color: var(--text-faint); font-style: italic; }

.msg-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 3px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.msg-meta .err { color: var(--danger); }
.msg.pending .msg-main { opacity: .55; }
.msg-retry {
  background: none;
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 10.5px;
  padding: 0;
  text-decoration: underline;
}

/* 원본으로 이동했을 때 잠깐 깜빡임 */
.msg.flash { background: var(--mention-bg); transition: background .5s; }

.msg-system {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 14px 16px;
}

.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.att-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  max-width: 320px;
}
.att-file:hover { background: var(--hover); }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { color: var(--text-faint); font-size: 11px; flex: none; }
.att-image {
  max-width: 320px;
  max-height: 260px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: block;
}

/* ---- 답장 인용 (메시지 안) ---- */
.msg-quote {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 4px;
  padding: 3px 0 3px 9px;
  border-left: 3px solid var(--border);
  cursor: pointer;
  max-width: 640px;
}
.msg-quote:hover { border-left-color: var(--accent); }
.msg-quote-name { font-size: 11.5px; font-weight: 700; color: var(--text-sub); flex: none; }
.msg-quote-text {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 리액션 칩 ---- */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
}
.reaction-chip:hover { border-color: var(--text-faint); }
.reaction-chip.mine {
  background: var(--mention-bg);
  border-color: var(--mention);
  color: var(--mention);
  font-weight: 700;
}
.reaction-emoji { font-size: 13px; }
.reaction-count { font-size: 11px; }
.reaction-add {
  border: 1px dashed var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 12px;
  opacity: 0;
}
.msg:hover .reaction-add { opacity: 1; }
.reaction-add:hover { background: var(--hover); color: var(--text); }

/* ---- 호버 액션 바 ---- */
.msg-tools {
  position: absolute;
  top: -14px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  box-shadow: var(--shadow-pop);
  z-index: 4;
}
.msg:hover .msg-tools,
.msg-tools:focus-within { display: flex; }

.tool-btn {
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
}
.tool-btn:hover { background: var(--hover); color: var(--text); }
.tool-btn.quick { font-size: 15px; }
.tool-btn.quick.on { background: var(--mention-bg); }
.tool-btn.wide { font-size: 12px; font-weight: 500; padding: 0 8px; }
.tool-ico { font-size: 13px; }
.tool-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; flex: none; }

/* ---- 이모지 선택 팝오버 ---- */
.emoji-pop { padding: 8px; min-width: 0; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 30px);
  gap: 2px;
}
.emoji-cell {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 17px;
  height: 30px;
  border-radius: 6px;
  line-height: 1;
}
.emoji-cell:hover { background: var(--hover); }
.emoji-cell.on { background: var(--mention-bg); }

/* ---- 답장 작성 바 (작성창 위) ---- */
.reply-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.reply-bar-main { flex: 1; min-width: 0; }
.reply-bar-title { font-size: 12px; font-weight: 700; color: var(--text); }
.reply-bar-excerpt {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-bar-close {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
  flex: none;
}
.reply-bar-close:hover { background: var(--hover); color: var(--text); }

.jump-latest {
  position: absolute;
  right: 22px;
  bottom: 104px;
  z-index: 5;
  box-shadow: var(--shadow-pop);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
}

.typing-line {
  height: 18px;
  padding: 0 18px 2px;
  font-size: 11.5px;
  color: var(--text-sub);
}

/* ------------------------------------------------------------ 작성창 ----- */
.composer-wrap {
  padding: 0 16px 14px;
  background: var(--bg);
  position: relative;
}
.composer {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 8px 10px 6px;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* .composer textarea 의 글꼴·여백은 미러와 반드시 같아야 하므로 아래 '멘션 표시' 절에서 함께 정의한다 */
.composer-bar { display: flex; align-items: center; gap: 2px; }
.composer-bar .spacer { flex: 1; }
.composer-count { font-size: 11px; color: var(--text-faint); margin-right: 6px; }
.composer-count.over { color: var(--danger); font-weight: 700; }

.mention-pop {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  margin-bottom: 6px;
  z-index: 20;
}
.mention-item { padding: 8px 12px; cursor: pointer; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.mention-item.sel, .mention-item:hover { background: var(--accent-soft); }

/* -------------------------------------------------------------- 빈 상태 -- */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 24px;
  line-height: 1.7;
}
.empty-state .big { font-size: 34px; }

/* ---------------------------------------------------------------- 모달 -- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(22% 0.01 260 / .38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 480px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.modal-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: oklch(40% 0.12 300);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  font-weight: 500;
}
.chip button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 13px; line-height: 1; padding: 0 2px; }

.pick-list { margin-top: 10px; max-height: 300px; overflow-y: auto; }
.pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.pick-item:hover { background: var(--hover); }
.pick-item.picked { background: var(--accent-soft); }
.pick-name { font-size: 13px; font-weight: 500; }
.pick-mail { font-size: 11.5px; color: var(--text-faint); }

/* ------------------------------------------------------------- 팝오버 --- */
.popover {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 5px;
  z-index: 85;
  min-width: 178px;
}
.popover button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 11px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
}
.popover button:hover { background: var(--hover); }
.popover .sep { height: 1px; background: var(--border-soft); margin: 4px 0; }
.popover .label { font-size: 11px; color: var(--text-faint); padding: 6px 11px 3px; }

/* ------------------------------------------------------------- 관리자 --- */
.admin-wrap { flex: 1; overflow-y: auto; padding: 22px; }
.admin-wrap h2 { font-size: 17px; margin: 0 0 4px; letter-spacing: -.02em; }
.admin-wrap .sub { color: var(--text-sub); font-size: 12.5px; margin-bottom: 18px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  margin-bottom: 16px;
}
.card h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: -.02em; }
.stat-row { display: flex; gap: 26px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .n { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.stat .k { font-size: 12px; color: var(--text-sub); }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; margin-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.bar {
  width: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  opacity: .85;
}
.bar-lab { font-size: 9.5px; color: var(--text-faint); white-space: nowrap; }

table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th, table.grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
table.grid th { color: var(--text-sub); font-weight: 500; font-size: 11.5px; }

.note {
  background: var(--primary-soft);
  border: 1px solid oklch(88% 0.05 260);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  color: oklch(38% 0.09 260);
  line-height: 1.65;
}

/* --------------------------------------------------------- 알림 설정 모달 -- */
.ns-loading { color: var(--text-faint); font-size: 13px; padding: 8px 0; }

.ns-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ns-row:first-child { padding-top: 2px; }
.ns-row-sub { padding-left: 14px; border-left: 2px solid var(--border); }
.ns-info { flex: 1; min-width: 0; }
.ns-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.ns-desc { font-size: 12px; color: var(--text-sub); margin-top: 4px; line-height: 1.6; }

.ns-row .switch { margin-top: 3px; }
.ns-row .switch:disabled { opacity: .4; cursor: not-allowed; }

.ns-tag {
  flex: none;
  margin-top: 2px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-faint);
}
.ns-tag.on { background: var(--accent-soft); border-color: transparent; color: oklch(40% 0.12 300); }

.ns-action { width: 100%; margin-top: 12px; }

.ns-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-sub);
  background: var(--bg);
  border-radius: 8px;
  padding: 9px 12px;
}

.ns-help {
  margin-top: 16px;
  background: var(--primary-soft);
  border: 1px solid oklch(88% 0.05 260);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: oklch(38% 0.09 260);
  line-height: 1.7;
}
.ns-help strong { display: block; margin-bottom: 6px; font-size: 12.5px; }
.ns-help ul { margin: 0; padding-left: 17px; }

.ns-foot { margin-top: 14px; font-size: 11.5px; color: var(--text-faint); text-align: center; }

/* ------------------------------------------------------------ 멘션 표시 -- */
/*
  작성창은 textarea 라 글자 일부만 색을 바꿀 수 없다.
  그래서 같은 글꼴/여백을 가진 .ta-mirror 를 위에 겹치고, textarea 글자는 투명하게 만든다.
  캐럿과 선택 영역은 textarea 가 계속 그리므로 입력감은 그대로다.
  ★ 아래 두 규칙의 글꼴·여백·줄바꿈 속성이 어긋나면 하이라이트 위치가 밀린다.
*/
.ta-wrap { position: relative; }

.composer textarea,
.ta-mirror {
  width: 100%;
  margin: 0;
  padding: 4px 4px 6px;
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.composer textarea {
  display: block;
  position: relative;
  z-index: 1;
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;             /* 글자는 미러가 그린다 */
  caret-color: var(--text);
  max-height: 190px;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--text-faint); }

.ta-mirror {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--text);
  overflow: hidden;
}

/* 작성창 · 말풍선 공통 */
.mention {
  color: var(--mention);
  background: var(--mention-bg);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 1px;
}
.mention.me {
  color: var(--mention-me);
  background: var(--mention-me-bg);
}

/* ------------------------------------------------------- 첨부 대기 트레이 -- */
.attach-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.attach-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 6px 6px 6px 8px;
  max-width: 260px;
}
.attach-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
  flex: none;
  display: block;
}
.attach-ico { font-size: 20px; width: 40px; text-align: center; flex: none; }
.attach-meta { min-width: 0; flex: 1; }
.attach-chip-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-chip-size { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.attach-remove {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  flex: none;
}
.attach-remove:hover { background: var(--hover); color: var(--text); }

/* ---------------------------------------------- 내 메시지는 오른쪽 정렬 -- */
/*
  슬랙형 평면 레이아웃(말풍선 없음, 호버 액션 바, 리액션, 답장 인용)은 그대로 두고
  **배치만 좌우 반전**한다. 배경색이나 말풍선을 되살리지 않는다.
*/
.msg.mine {
  flex-direction: row-reverse;
  padding: 5px 16px 5px 56px;   /* 툴바 자리를 왼쪽으로 옮긴다 */
}

.msg.mine .msg-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 이름이 아바타 쪽(오른쪽 끝)에 붙도록 순서를 뒤집는다 */
.msg.mine .msg-head { flex-direction: row-reverse; }

/* 본문은 오른쪽에 붙되, 글자는 왼쪽 정렬을 유지해야 여러 줄이 읽힌다 */
.msg.mine .msg-text {
  text-align: left;
  max-width: min(680px, 85%);
}

.msg.mine .msg-meta { flex-direction: row-reverse; }
.msg.mine .msg-reactions { justify-content: flex-end; }
.msg.mine .msg-attachments { justify-content: flex-end; }

/* 답장 인용도 좌우를 뒤집는다 */
.msg.mine .msg-quote {
  border-left: 0;
  border-right: 3px solid var(--border);
  padding-left: 0;
  padding-right: 9px;
  flex-direction: row-reverse;
}
.msg.mine .msg-quote:hover { border-right-color: var(--accent); }

/* 액션 바는 반대쪽으로 — 오른쪽 끝의 아바타·본문과 겹치지 않게 */
.msg.mine .msg-tools { right: auto; left: 14px; }

/* =========================================================================
   그림 크게 보기 (라이트박스)

   쉘(iframe) 안에서 쓰는 화면이라 새 창으로 보내면 보던 자리를 잃는다.
   그래서 이 화면 위에 덮어 띄운다. 바탕이나 Esc 로 닫는다.
   ========================================================================= */
.lb-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(12, 14, 22, .88);
  display: flex; flex-direction: column;
}
.lb-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: #fff;
  background: rgba(0, 0, 0, .35);
  padding-top: max(10px, env(safe-area-inset-top));
}
.lb-name {
  font-size: 13px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-size { font-size: 11.5px; color: rgba(255,255,255,.6); flex: none; }
.lb-btn {
  flex: none; margin-left: auto;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
  color: #fff; border-radius: 8px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
/* 첫 버튼만 왼쪽 여백을 밀어낸다 — 나머지는 바로 옆에 붙는다 */
.lb-btn ~ .lb-btn { margin-left: 0; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-btn:disabled { opacity: .6; cursor: default; }
.lb-btn.lb-x { padding: 7px 11px; font-size: 14px; line-height: 1; }

/* 그림은 화면 안에 다 들어오게 — 잘라 보여 주면 무엇인지 알 수 없다 */
.lb-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.lb-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

@media (max-width: 560px) {
  .lb-bar { padding: 8px 10px; gap: 7px; }
  .lb-btn { padding: 8px 10px; font-size: 12px; }
  .lb-name { font-size: 12px; }
  .lb-size { display: none; }   /* 좁으면 이름이 먼저다 */
  .lb-stage { padding: 8px; }
}

/* =========================================================================
   휴대폰 (≤ 560px) — DM 구성요소

   [왜 layout.css 가 아니라 여기인가]
   index.html 은 layout.css → dm.css 순으로 읽는다. 휴대폰 규칙이 layout.css 에
   있으면 .msg / .conv-item / .composer textarea 처럼 **이 파일이 정의한 것**을
   같은 세기로 덮으려다 순서에서 밀려 한 줄도 안 먹었다.
   실제로 그래서 휴대폰에서 아래가 전부 그대로였다 —
     · 입력칸 글자 13.5px  → iOS 가 손대는 순간 화면을 확대해 버렸다(되돌아오지 않는다).
       사진에서 글자가 크고 오른쪽이 잘려 보이던 것의 정체다.
     · 메시지 좌우 여백 56px → 390px 화면에서 18% 를 툴바 자리로 버렸다.
     · ⋯ 버튼이 숨어 있어 hover 로만 나타남 → iOS 는 '첫 탭 = hover, 두 번째 탭 = 클릭'
       으로 처리한다. 대화를 두 번 눌러야 열리던 것이 이것이다.
   덮을 것은 자기 파일에서 덮는다.
   ========================================================================= */
@media (max-width: 560px) {

  /* ── 확대 방지 ──
     iOS 는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대하고 되돌리지 않는다.
     ★ textarea 와 .ta-mirror 는 **반드시 같은 값**이어야 한다 — 어긋나면 멘션
       하이라이트 위치가 밀린다(위 '멘션 표시' 절의 경고). 그래서 둘을 같이 올린다. */
  .composer textarea,
  .ta-mirror { font-size: 16px; }
  .field, input[type="search"], input[type="text"] { font-size: 16px; }

  /* ── 누르는 것은 넉넉하게 (44px 이 빗나가지 않는 최소 크기) ── */
  .icon-btn, .nav-icon, .send-btn, .attach-btn, .back-to-list {
    min-width: 40px; min-height: 40px;
  }
  .conv-item { padding: 12px 12px; }
  .pick-item { padding-top: 11px; padding-bottom: 11px; }

  /* ── 좁은 폭에 맞춘 메시지 줄 ──
     PC 는 오른쪽 56px 을 hover 툴바 자리로 비워 둔다. 휴대폰에는 hover 가 없어서
     그 자리는 그냥 버려지는 여백이다. 툴바는 아래에서 말풍선 위에 겹쳐 띄운다. */
  .msg { padding: 5px 12px; }
  .msg.mine { padding: 5px 12px; }
  .msg-side { width: 30px; }
  .msg-quote { max-width: none; }
  .att-image, .att-file { max-width: min(240px, 72vw); }
  .msg-attachments { gap: 6px; }
  .msg-text { max-width: none; }
  .msg.mine .msg-text { max-width: 92%; }

  /* 시각과 ⋯ 는 손을 올릴 수가 없다 — 늘 보이게 둔다.
     (숨겨 두면 iOS 가 첫 탭을 hover 로 삼켜 두 번 눌러야 열린다) */
  .msg-hovertime { opacity: 1; }
  .conv-menu-btn { opacity: 1; }

  /* 툴바는 자리를 차지하지 말고 메시지 위쪽에 겹쳐 띄운다 */
  .msg-tools { top: -14px; }
  .msg.mine .msg-tools { left: auto; right: 8px; }
  .msg:not(.mine) .msg-tools { right: auto; left: 8px; }

  /* ── 입력줄이 홈 표시줄에 가리지 않게 ── */
  .composer-wrap { padding: 0 12px max(8px, env(safe-area-inset-bottom)); }

  /* ── 모달은 아래에서 올라오는 카드 ── */
  .modal {
    width: 100%; max-width: none; max-height: 88dvh;
    border-radius: 16px 16px 0 0; margin-top: auto;
  }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-body { max-height: 62dvh; }
  .pick-list { max-height: 46dvh; }
}

/* =========================================================================
   손가락으로 쓰는 기기 — hover 를 아예 쓰지 않는다

   iOS 는 hover 로 **보이는 것이 달라지는** 요소를 누르면 첫 탭을 hover 로 쓰고,
   두 번째 탭에서야 클릭을 보낸다. 대화 목록이 한 번에 안 열리던 이유다.
   hover 로 달라지는 것이 없으면 첫 탭이 그대로 클릭이 된다.
   (마우스가 있는 기기는 hover: hover 라 여기에 걸리지 않는다)
   ========================================================================= */
@media (hover: none) {
  .conv-item:hover { background: transparent; }
  .conv-item.active:hover { background: var(--active); }
  .msg:hover { background: transparent; }
  .conv-item:hover .conv-menu-btn,
  .msg:hover .msg-hovertime,
  .msg:hover .reaction-add { opacity: 1; }
}