/* =====================================
   SAMSUNG MESSAGES
   목록 이름 12pt / 미리보기 10pt
===================================== */
#messagesApp {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #fff;
  color: #111;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

#messagesApp.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#messagesApp [hidden] { display: none !important; }
#messagesApp button { font: inherit; cursor: pointer; }
#messagesApp svg { width: 100%; height: 100%; }

.sm-view {
  position: absolute;
  inset: 0 0 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sm-list-view { background: #f2f2f2; }

.sm-list-header {
  flex: none;
  padding: 0 8px;
  background: #f2f2f2;
}

.sm-list-header h2 {
  height: clamp(155px, 25vh, 242px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 9.2vh, 92px);
  margin: 0;
  color: #174c83;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -2px;
}

.sm-title-plus {
  color: #82b6ef;
  font-size: .66em;
  margin: -4px 0 0 1px;
}

.sm-toolbar {
  display: flex;
  align-items: center;
  height: 49px;
  gap: 4px;
  padding: 0 4px 8px;
}

.sm-filters {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.sm-filter {
  border: 0;
  background: transparent;
  color: #929292;
  border-radius: 25px;
  padding: 7px 10px;
  font-size: 10pt !important;
}

.sm-filter.active { background: #d9dfe5; color: #174c83; font-weight: 700; }

.sm-toolbar-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: none;
  color: #174c83;
  padding-right: 5px;
}

.sm-toolbar-icons svg { width: 18px !important; height: 18px !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm-toolbar-icons .sm-more { fill: currentColor; stroke: none; width: 14px !important; }

.sm-threads {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  /* 양옆/아래에 회색 여백을 둬서 흰 카드가 잘려 보이지 않도록 */
  margin: 0 10px 10px;
  border-radius: 27px;
  padding: 6px 14px 20px 15px;
  scrollbar-width: none;
}
.sm-threads::-webkit-scrollbar, .sm-messages::-webkit-scrollbar { display: none; }

.sm-new-message {
  position: absolute;
  right: 18px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #79afe6;
  background: #fff;
  box-shadow: 0 2px 9px #0002;
  pointer-events: none;
}
.sm-new-message svg {
  width: 24px !important;
  height: 24px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-thread {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  color: inherit;
  text-align: left;
}

button.sm-thread:active { background: #f8fafd; }
.sm-thread:not(button) { cursor: default; }

.sm-avatar {
  width: 35px;
  height: 35px;
  flex: none;
  border-radius: 50%;
  background: #e9e9e9;
  color: #9c9c9c;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 650;
}

.sm-avatar-tae { color: #fff; background: #8da3bb; }
.sm-avatar-alert { background: #ff755e; color: #fff; }
.sm-avatar svg { width: 19px !important; height: 19px !important; fill: currentColor; }
.sm-avatar-person { position: relative; }
.sm-avatar-person::before,
.sm-avatar-person::after { content: ''; position: absolute; background: #b1b1b1; }
.sm-avatar-person::before { width: 7px; height: 7px; border-radius: 50%; top: 8px; }
.sm-avatar-person::after { width: 16px; height: 9px; border-radius: 12px 12px 8px 8px; top: 19px; }

.sm-thread-main { min-width: 0; }
.sm-thread-heading { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.sm-thread-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10pt;
  font-weight: 660;
  line-height: 1.35;
}
.sm-thread-date { flex: none; font-size: 8pt; font-weight: 400; color: #929292; white-space: nowrap; }
.sm-thread-preview {
  margin-top: 2px;
  font-size: 8pt;
  line-height: 1.44;
  font-weight: 400;
  color: #858585;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* 열린 채팅방 */
.sm-room-view { background: #fff; }
.sm-room-header {
  flex: none;
  min-height: 67px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 24px 13px 7px;
  color: #174c83;
}
.sm-room-header strong { min-width: 0; flex: 1; font-size: 14px; font-weight: 740; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sm-room-back { border: 0; background: transparent; width: 27px; height: 33px; padding: 4px; color: #174c83; flex: none; }
.sm-room-back svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm-room-avatar { width: 30px; height: 30px; font-size: 13px; }
.sm-room-actions { display: flex; align-items: center; gap: 12px; }
.sm-room-actions svg { width: 19px !important; height: 19px !important; fill: none; stroke: currentColor; stroke-width: 2; }
.sm-room-actions .sm-more { width: 14px !important; fill: currentColor; stroke: none; }

.sm-messages {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0px 20px 24px;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sm-day 
{ margin: 21px auto 20px; width: fit-content;
  max-width: 100%; text-align: center;
  color: #888; font-size: 7pt; }

.sm-day:first-child { margin-top: 20px; }
.sm-message { display: flex; align-items: flex-end; margin: 7px 0; gap: 6px; }
.sm-message.mine { justify-content: flex-end; }
.sm-bubble {
  max-width: 78%;
  width: fit-content;
  padding: 8px 11px;
  background: #d7e7fa;
  color: #1c1c1c;
  border-radius: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 10pt;
  line-height: 1.45;
}
.sm-message.mine .sm-bubble { background: #e9e9e9; }
.sm-message-time 
{ flex: none; color: #8b8b8b; font-size: 7pt;
  white-space: nowrap; margin-bottom: 3px; }
.sm-message.mine .sm-message-time { order: -1; }

/* 읽기 전용: 그림만 보이는 입력 영역 */
.sm-compose {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 11px;
  color: #282828;
  pointer-events: none;
}
.sm-compose-icon { width: 20px; height: 20px; flex: none; }
.sm-compose-icon svg, .sm-compose-voice svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm-compose-plus { font-size: 25px; font-weight: 300; line-height: 1;  transform: translateY(-3px); }
.sm-compose-field { flex: 1; height: 38px; border-radius: 30px; background: #f1f1f1; }
.sm-compose-voice { width: 32px; height: 32px; flex: none; background: #f1f1f1; padding: 8px; border-radius: 50%; }
/* 음성 버튼 안의 파형만 위로 이동 */
.sm-compose-voice svg {
  transform: translateY(-2px);}

.sm-exit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 23px;
  border: 0;
  background: #f2f2f2;
  display: grid;
  place-items: center;
}
.sm-exit span { width: 105px; height: 4px; border-radius: 8px; background: #777; }

@media (max-width: 395px) {
  .sm-filter { padding-inline: 7px; font-size: 9.5pt !important; }
  .sm-toolbar-icons { gap: 7px; }
  .sm-threads { padding-inline: 14px; }
}

/* 안전 안내 문자만 위로 이동 */
.sm-avatar-alert,
.sm-avatar-alert + .sm-thread-main {
  transform: translateY(-3px);
}

/* =====================================
   태현이 메시지 고정 아이콘
===================================== */

.sm-thread-name-pinned {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sm-thread-pin {
  width: 11px;
  height: 11px;

  object-fit: contain;
  flex-shrink: 0;

  opacity: 0.7;
}