/* =============================================================================
   DM — 전체 폭 상단 표시줄 + 2단 레이아웃 (통합 표준 6절)
   ============================================================================= */

.app-navbar {
  background: #1e1e2e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--navbar-h);
  min-height: var(--navbar-h);
  padding: 0 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
}
.navbar-brand img { width: 20px; height: 20px; display: block; }

.navbar-user { display: flex; align-items: center; gap: 10px; }
.navbar-user .user-chip {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.navbar-user .nav-link {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
}
.navbar-user .nav-link:hover { color: #fff; text-decoration: underline; }

/* 사이드바+메인을 감싸는 영역은 표시줄 높이만큼 빼야 한다 */
/*
  --shell-bottom: ONE 플랫폼 쉘의 아래 탭바가 덮는 높이. boot.js 가 쉘에게서 받아 넣는다.
  이만큼 빼 두지 않으면 화면 맨 아래(= 입력줄과 그 아래 첨부·보내기 줄)가 탭바에 깔린다.
  쉘 밖에서 열면 값이 없어 0 이 되고, 예전과 똑같이 동작한다.
*/
.layout {
  display: flex;
  height: calc(100vh - var(--navbar-h) - var(--shell-bottom, 0px));
  overflow: hidden;
}

/*
  NOTE — iframe 대응 (통합 표준 3절)
  이 시스템에는 "여러 시스템을 오가는 전역 사이드바"가 없다.
  왼쪽 .dm-list-panel 은 DM 고유의 대화 목록이므로 iframe 안에서도 숨기지 않는다.
  숨겨야 할 전역 메뉴가 생긴다면 아래 형태로 추가할 것:
    html.is-embedded .global-sidebar { display: none !important; }
*/

.dm-list-panel {
  width: var(--list-w);
  min-width: var(--list-w);
  border-right: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dm-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* 부팅 스플래시 */
#boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  font-size: 13px;
  background: var(--bg);
  z-index: 50;
}

/* 연결 상태 배너 */
.conn-banner {
  background: oklch(94% 0.06 85);
  color: oklch(38% 0.09 70);
  font-size: 12px;
  padding: 6px 14px;
  text-align: center;
  border-bottom: 1px solid oklch(88% 0.07 85);
}

/* ---- 좁은 화면: 목록/대화 중 하나만 ------------------------------------- */
@media (max-width: 860px) {
  :root { --list-w: 100%; }
  .dm-list-panel { border-right: 0; }
  body.has-active .dm-list-panel { display: none; }
  body:not(.has-active) .dm-main { display: none; }
  .back-to-list { display: inline-flex !important; }
}
.back-to-list { display: none; }

/* =========================================================================
   휴대폰 (≤ 560px)

   [왜 따로 두나]
   860px 짜리 규칙은 '목록이냐 대화냐' 만 갈랐다. 폭이 좁아진 것 말고도
   휴대폰에서만 생기는 문제가 따로 있다 —

     ⑴ 100vh 가 주소창 높이를 뺀 값이 아니다. 그래서 입력칸이 주소창에 가려
        마지막 줄이 안 보였다. dvh 로 바꾼다(모르는 브라우저는 위 100vh 를 쓴다).
     ⑵ iOS 는 글자가 16px 보다 작은 입력칸에 손을 대면 **화면을 확대한다.**
        한 번 확대되면 되돌아오지 않아 그다음부터 가로로 밀린다.
     ⑶ 손가락은 마우스보다 굵다. 44px 이 눌러서 안 빗나가는 최소 크기다.
     ⑷ 홈 표시줄(제스처 바)이 보내기 버튼을 덮는다 — safe-area 만큼 띄운다.
   ========================================================================= */
@media (max-width: 560px) {
  /* ⑴ 100vh 대신 dvh — 주소창 높이를 뺀 값이다 */
  .layout { height: calc(100dvh - var(--navbar-h) - var(--shell-bottom, 0px)); }

  /* 상단 표시줄이 좁아 이름이 밀린다 */
  .navbar-user .nav-link { padding: 4px; }

  /*
    ★ 나머지 휴대폰 규칙은 전부 dm.css 끝으로 옮겼다.

    왜: index.html 은 layout.css → dm.css 순으로 읽는다. 그런데 여기 있던 규칙들은
    .msg / .conv-item / .composer textarea 처럼 **dm.css 가 정의하는 것**을 덮으려 했고,
    세기가 같으면 나중에 읽은 dm.css 가 이긴다. 그래서 이 블록의 거의 전부가
    한 줄도 적용되지 않고 있었다 — 휴대폰에서 '전혀 최적화가 안 된' 화면의 정체다.

    같은 파일 안에서 덮어야 순서로 이긴다. 자기 파일에서 덮는다는 규칙을 지킨다.
  */
}

/* 가로로 눕혔을 때(높이가 아주 낮을 때) 모달이 화면을 다 먹지 않게 */
@media (max-width: 560px) and (max-height: 460px) {
  .modal { max-height: 96dvh; }
  .modal-body { max-height: 66dvh; }
}

/* 상단 표시줄 아이콘 버튼 (알림 설정) */
.navbar-user .nav-icon {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.navbar-user .nav-icon:hover { background: rgba(255, 255, 255, .16); }