/* 베어러블 이사회 대화 뷰어
   팔레트는 myfolio.im 실측값(satisfaction-dashboard-research/PLAN-2-theme.md)을 따른다. */

:root {
  --blue:        #226dff;
  --blue-bright: #4e8aff;
  --blue-pale:   #a7c5ff;
  --blue-deep:   #217ad1;
  --navy:        #002148;
  --pink:        #fe5677;

  --text:        #363d4a;
  /* myfolio 실측값은 #8e96a1 이지만 흰 배경에서 대비가 2.9:1 이라 본문 보조
     텍스트로 쓰기엔 모자란다. 색조는 유지한 채 명도만 낮춰 5.3:1 로 올렸다.
     테두리·비활성처럼 텍스트가 아닌 곳에는 원래 값(--line-soft)을 그대로 쓴다. */
  --text-sub:    #5f6875;
  --line:        #e0e0e0;
  --line-soft:   #8e96a1;
  --bg:          #f5f4f5;
  --surface:     #ffffff;
  --bubble-them: #ffffff;
  --bubble-me:   #226dff;

  --radius:      14px;
  --radius-sm:   10px;

  /* 앰비언트 + 직광 2겹 (WIG: 레이어드 섀도) */
  --shadow: 0 1px 2px rgb(16 24 40 / .04), 0 8px 24px -8px rgb(16 24 40 / .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:        #e6e9ef;
    --text-sub:    #a8b1c0;
    --line:        #263041;
    --line-soft:   #56607a;
    --bg:          #0b1220;
    --surface:     #131c2b;
    --bubble-them: #1b2536;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -8px rgb(0 0 0 / .55);
  }
}

* { box-sizing: border-box; }

/* hidden 속성은 브라우저 기본 스타일시트의 display:none 으로 동작한다.
   작성자 스타일이 display 를 지정하면 특이성에서 이겨버려 hidden 이 무시된다.
   실제로 .replyChip { display:flex } 때문에 답장을 걸지 않았는데도 빈 칸이 남았고
   X 버튼을 눌러도 사라지지 않았다. hidden 이 항상 이기도록 못 박는다. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Malgun Gothic", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 컨트롤 공통: 더블탭 확대 방지 + 탭 하이라이트를 디자인에 맞춘다 */
button, a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

/* 스크린리더 전용 */
.srOnly {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 본문 건너뛰기 — 탭하면 나타난다 */
.skipLink {
  position: fixed;
  /* 노치 밑으로 들어가지 않게. viewport-fit=cover 라 인셋을 직접 피해야 한다. */
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  z-index: 10;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skipLink:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--surface);
  outline-offset: 2px;
}

/* 비교 대상이 되는 숫자는 자릿수 정렬 (WIG: tabular-nums) */
.num { font-variant-numeric: tabular-nums; }

/* ── 레이아웃 ────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  /* --kb 는 화면 키보드가 가린 높이다(app.js 가 visualViewport 로 잰다).
     dvh 는 브라우저 UI만 반영하고 키보드는 반영하지 않아서, 빼주지 않으면
     입력창이 키보드 뒤로 들어간다. */
  height: calc(100dvh - var(--kb, 0px));
  /* 노치·홈 인디케이터 회피. viewport-fit=cover 를 켜두고 인셋을 안 주면
     아이폰에서 내용이 노치 밑으로 들어간다. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pane--list {
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.pane--chat { background: var(--bg); }

.pane__head {
  padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pane__head--chat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand__sub,
.pane__head--chat p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-sub);
}
.managementLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.managementLink:hover { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.managementLink:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 안건이 길수록 대화 헤더가 끝없이 자란다. 실제로 안건 하나가 헤더를 열 줄
   넘게 밀어 대화를 화면 밖으로 내보냈다. 제목·부제를 한 줄로 접는다.
   안건 원문은 이 회의의 첫 발언에 그대로 있으므로 여기서 다 보여줄 이유가 없다.
   전체 문구는 title 속성으로도 남는다(app.js). */
.pane__head--chat .chatTitle { min-width: 0; flex: 1 1 auto; }
.chatTitle h2,
.pane__head--chat p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatTitle h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.backBtn {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;      /* 모바일 최소 히트 타깃 44px */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.backBtn:hover { border-color: var(--blue); color: var(--blue); }
.backBtn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── 회의 목록 ───────────────────────────────────────────────── */
.list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* 목록 끝에서 페이지가 같이 밀리지 않게 */
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}

/* 열기와 삭제, 두 동작이 있어서 항목을 통째로 button 으로 둘 수 없다 —
   button 안의 button 은 허용되지 않는 마크업이다. 감싸는 div 에 나란히 둔다. */
.room {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.room:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.room[aria-current="true"] {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.room__open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.room__open:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.room__del {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin-right: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.room__del:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.room__del:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 무한 스크롤 보초. 보이면 다음 장을 불러온다 — 자리만 차지하고 내용은 없다. */
.listSentinel { height: 1px; }

/* ── 확인 모달 ──────────────────────────────────────────────────
   <dialog> 는 포커스 가둠·Esc 닫기·바깥 어둡게를 브라우저가 해준다. */
.modal {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgb(16 24 40 / .45); }
.modal__box { margin: 0; padding: 20px; }
.modal__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.modal__body { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-sub); }
.modal__bar { display: flex; justify-content: flex-end; gap: 8px; }

.modalBtn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.modalBtn:hover { border-color: var(--blue); color: var(--blue); }
.modalBtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.modalBtn--danger { border-color: #b42318; background: #b42318; color: #fff; }
.modalBtn--danger:hover { background: #8f1d13; border-color: #8f1d13; color: #fff; }

/* ── 알림 ────────────────────────────────────────────────────── */
.brandRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.bell {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.bell:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.bell:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bell__count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

/* 알림 패널 — 모달과 뼈대를 공유하되 세로로 길고 안이 스크롤된다 */
.modal--panel { width: min(460px, calc(100vw - 24px)); }
.panel { display: flex; flex-direction: column; max-height: min(70dvh, 620px); }
.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.panel__title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; }
.panel__act, .panel__close {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.panel__close { min-width: 44px; }
.panel__act:hover, .panel__close:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.panel__act:focus-visible, .panel__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.panel__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}

.notif {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.notif:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.notif--unread { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.notif__open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.notif__open:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.notif__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.notif__kind {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-sub) 14%, transparent);
  font-size: 11.5px;
}
.notif__time { font-size: 11.5px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.notif__body {
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.notif__del {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.notif__del:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.notif__del:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.room__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.room__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room__date {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.room__preview {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.room__meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

/* ── 대화 ────────────────────────────────────────────────────── */
.thread {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 건너뛰기 링크의 착지점이라 tabindex="-1" 을 뒀다. 마우스 클릭 때
   테두리가 번쩍이지 않도록 :focus-visible 만 표시한다. */
.thread:focus { outline: none; }
.thread:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.daySep {
  align-self: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-sub) 16%, transparent);
  color: var(--text-sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.msg {
  display: flex;
  gap: 10px;
  max-width: min(760px, 100%);
}
.msg--me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--blue-pale);
  border: 1px solid var(--line);
}
.avatar--fallback {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}

.msg__col { min-width: 0; }
.msg--me .msg__col { align-items: flex-end; display: flex; flex-direction: column; }

.msg__who {
  font-size: 12.5px;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.msg__who b { color: var(--text); font-weight: 600; }

.bubble {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bubble-them);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* UGC 내성 — 긴 발언·URL이 레이아웃을 밀지 않게 */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg--me .bubble {
  background: var(--bubble-me);
  border-color: var(--blue-deep);
  color: #fff;
}

/* 결정 사항은 색만이 아니라 라벨로도 구분 (WIG: 색만으로 상태 전달 금지) */
.bubble--decision {
  border-left: 3px solid var(--pink);
}

.messageSources {
  margin-top: 4px;
  max-width: 620px;
  color: var(--text-sub);
  font-size: 12px;
}
.messageSources summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-sub);
}
.messageSources summary:hover { color: var(--blue); }
.messageSources summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.messageSources ul { margin: 2px 0 8px; padding-left: 20px; }
.messageSources li { margin: 4px 0; }
.messageSources a { display: block; color: var(--blue-deep); overflow-wrap: anywhere; }
.messageSources li span { display: block; font-size: 11px; }

.responseProgress {
  flex: 0 0 auto;
  margin: 8px 16px 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  font-size: 12px;
}
.responseProgress__row { display: flex; justify-content: space-between; gap: 12px; }
.responseProgress__label { min-width: 0; overflow-wrap: anywhere; }
.responseProgress__value { flex: 0 0 auto; color: var(--blue); font-weight: 700; }
.responseProgress__track { height: 3px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 15%, transparent); overflow: hidden; }
.responseProgress__track span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s ease; }
.responseProgress--error { border-color: color-mix(in srgb, #ef4444 35%, var(--line)); background: color-mix(in srgb, #ef4444 7%, var(--surface)); }
.responseProgress--error .responseProgress__value { color: #ef4444; }
.tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--pink) 15%, transparent);
  color: var(--pink);
}

/* 시각과 동작 버튼을 한 줄에 둔다. 두 줄로 나누면 발언 하나당 30px 남짓을 더
   먹는데, 발언 30건이면 화면 하나보다 많은 세로가 그냥 사라진다. */
.msg__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.msg--me .msg__foot { flex-direction: row-reverse; }

.msg__time {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

.sys {
  align-self: center;
  max-width: 620px;
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
}

/* ── 빈 상태 / 오류 (WIG: 모든 상태 설계) ───────────────────── */
.empty {
  margin: auto;
  max-width: 420px;
  text-align: center;
  color: var(--text-sub);
  padding: 32px 20px;
}
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 15px; }
.empty code {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-sub) 14%, transparent);
  font-size: 12.5px;
}

.moreBtn {
  align-self: center;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.moreBtn:hover { border-color: var(--blue); color: var(--blue); }
.moreBtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 로딩 중에도 라벨은 그대로 두고 상태만 덧붙인다 (라벨을 바꾸면 무엇을
   누른 건지 사라진다). 점은 장식이므로 스크린리더에서 감춘다. */
.moreBtn[aria-busy="true"] { color: var(--text-sub); cursor: progress; }
.moreBtn[aria-busy="true"]::after {
  content: "…";
  margin-left: 4px;
}

/* ── 모바일: 한 화면씩 ─────────────────────────────────────────
   폭만 보면 폰을 눕혔을 때(844×390)가 "데스크톱"으로 잡혀 2단이 나오고,
   390px 높이를 헤더와 입력창이 다 먹어 대화가 서너 줄만 남는다. 높이도 같이 본다. */
@media (max-width: 760px), (max-height: 520px) {
  .app { grid-template-columns: 1fr; }
  .pane--list, .pane--chat { grid-column: 1; grid-row: 1; }
  .app[data-view="list"] .pane--chat { display: none; }
  .app[data-view="chat"] .pane--list { display: none; }
  .app[data-view="chat"] .backBtn { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 인용된 답장 (카카오톡식) ──────────────────────────────── */
.quote {
  display: block;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--blue-pale);
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-top: 0; border-right: 0; border-bottom: 0;
  color: inherit;
  font-family: inherit;
}
.quote:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.quote:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.msg--me .quote {
  border-left-color: rgb(255 255 255 / .55);
  background: rgb(255 255 255 / .16);
}
.quote__who { display: block; font-weight: 600; font-size: 12px; opacity: .85; }
.quote__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .8;
}
.quote--gone { font-style: italic; cursor: default; }

/* 답장으로 점프했을 때 잠깐 강조 */
.msg--flash .bubble {
  animation: flash 1.2s ease-out;
}
@keyframes flash {
  0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 55%, transparent); }
  100%    { box-shadow: var(--shadow); }
}

/* ── 발언별 동작 (답장·수정·삭제) ──────────────────────────── */
.msg__actions {
  display: flex;
  gap: 2px;
  /* 포인터가 없는 기기에서는 항상 보인다 — 호버로만 드러나면 터치로는 못 쓴다 */
  opacity: 1;
}
.msg__action {
  /* 44×44 는 터치 최소 히트 타깃이다. 높이가 32였어서 손가락으로 빗나갔다. */
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.msg__action:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.msg__action:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.msg__action--danger:hover { background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent); color: #ef4444; }

.msg__edited { font-style: normal; opacity: .75; }

/* 인라인 편집 — 저장·취소를 명시적으로 누르게 한다.
   예전엔 blur 가 곧 저장이었는데, 폰에는 Esc 가 없어서 키보드를 내리는 순간
   되돌릴 수 없이 저장돼 버렸다(취소할 방법 자체가 없었다). */
.editBox { width: 100%; }
.msg--editing .msg__col { flex: 1 1 auto; min-width: 0; }
.msg--editing .bubble { width: 100%; }

.editBar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
.editBtn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.editBtn:hover { border-color: var(--blue); color: var(--blue); }
.editBtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.editBtn--save {
  border-color: var(--blue-deep);
  background: var(--blue);
  color: #fff;
}
.editBtn--save:hover { background: var(--blue-deep); color: #fff; }
.editBtn[disabled] { opacity: .6; cursor: progress; }

.editArea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;          /* iOS Safari 자동 확대 방지 */
  line-height: 1.6;
  resize: vertical;
}
.editArea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ── 입력창 ────────────────────────────────────────────────── */
.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.composer__row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
#composerInput {
  flex: 1;
  min-height: 44px;
  max-height: 40vh;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;          /* 16px 미만이면 iOS가 포커스 시 확대한다 */
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
#composerInput:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }
#composerInput::placeholder { color: var(--text-sub); }

.sendBtn {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--blue-deep);
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sendBtn:hover { background: var(--blue-deep); }
.sendBtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sendBtn[aria-busy="true"] { opacity: .7; cursor: progress; }

.composer__hint {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--text-sub);
}
/* 폰에는 ⌘도 Ctrl도 없어서 app.js 가 기본 안내를 비운다. 빈 줄이 자리를
   차지하지 않도록 접는다(오류 문구가 들어오면 다시 펼쳐진다). */
.composer__hint:empty { display: none; }
.composer__hint--error { color: #ef4444; }

/* 새 발언 알림 — 위쪽을 읽는 중일 때만 뜬다 */
.newBadge {
  align-self: center;
  position: relative;
  z-index: 2;
  margin: -18px auto 4px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--blue-deep);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.newBadge:hover { background: var(--blue-deep); }
.newBadge:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 눈에 보이는 알림 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--shadow);
}
.toast--error { background: #b42318; }

/* 답장 대상 미리보기 */
.replyChip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  font-size: 13px;
}
.replyChip__body { min-width: 0; }
.replyChip__to { font-weight: 600; margin-right: 6px; }
.replyChip__text {
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}
.replyChip__cancel {
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  cursor: pointer;
}
.replyChip__cancel:hover { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.replyChip__cancel:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 이름 옆 직무 — 이사가 12명이라 직무 없이는 누가 누군지 모른다 */
.msg__role {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-sub) 14%, transparent);
  font-size: 11.5px;
}
.msg--me .msg__who { text-align: right; }

/* ── 홈 링크 + 새 안건 입력 ────────────────────────────────── */
.brand__home {
  color: inherit;
  text-decoration: none;
}
.brand__home:hover { color: var(--blue); }
.brand__home:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.agenda {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
#agendaInput {
  flex: 1;
  min-width: 0;
  min-height: 44px;          /* 터치 최소 히트 타깃 */
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;          /* 16px 미만이면 iOS가 포커스 시 확대한다 */
}
#agendaInput:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }
#agendaInput::placeholder { color: var(--text-sub); }

.agenda__go {
  flex: 0 0 auto;
  min-height: 44px;          /* 터치 최소 히트 타깃 */
  padding: 0 14px;
  border: 1px solid var(--blue-deep);
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.agenda__go:hover { background: var(--blue-deep); }
.agenda__go:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.agenda__go[aria-busy="true"] { opacity: .7; cursor: progress; }

.agenda__hint {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--text-sub);
  min-height: 1em;          /* 문구가 생겼다 사라져도 레이아웃이 안 튀게 */
}
.agenda__hint--error { color: #ef4444; }