/* ===== 기본 리셋 & 폰트 ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* 카카오톡 느낌의 색 팔레트 */
  --kakao-bg: #b2c7d9;      /* 채팅 배경(하늘색) */
  --header-bg: #9bbbd4;     /* 헤더 */
  --bubble-user: #fef01b;   /* 사용자 말풍선(노랑) */
  --bubble-app: #ffffff;    /* 앱 말풍선(흰색) */
  --text-main: #1a1a1a;
  --text-sub: #4a5a68;
}

html, body {
  height: 100%;
  font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  color: var(--text-main);
  background: #e9eef2;
}

/* ===== 앱 컨테이너(가운데 정렬, 폰형 비율) ===== */
.app {
  position: relative; /* "맨 아래로" 버튼 절대배치 기준 */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  margin: 0 auto;
  background: var(--kakao-bg);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
}

/* "맨 아래로" 버튼 (입력창 위에 떠 있음) */
.scroll-bottom-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 84px;
  z-index: 50;
  padding: 7px 14px;
  border: 1px solid #cfd6db;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.scroll-bottom-btn[hidden] {
  display: none;
}

/* ===== 헤더 ===== */
.header {
  flex: 0 0 auto;
  padding: 14px 18px;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header__title {
  font-size: 18px;
  font-weight: 700;
}

.header__subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-sub);
}

/* ===== 채팅 스크롤 영역 ===== */
.chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 메시지 한 줄(말풍선 + 보낸 시간) */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}

.msg-row--user { justify-content: flex-end; }
.msg-row--app { justify-content: flex-start; }

.msg-time {
  flex: 0 0 auto;
  font-size: 10px;
  color: #516170;
  white-space: nowrap;
  margin-bottom: 2px;
}

/* 날짜 구분선(하루 지나면 카톡처럼 yyyy-mm-dd 표시) */
.day-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

.day-divider span {
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 10px;
}

/* 말풍선 공통 */
.bubble {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap; /* 줄바꿈 보존(단, 텍스트는 textContent로만 주입) */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* 사용자(오른쪽 정렬, 노랑) */
.bubble--user {
  align-self: flex-end;
  background: var(--bubble-user);
  border-top-right-radius: 4px;
  cursor: pointer; /* 탭하면 설정 패널 */
}

/* 중요도 ON → 볼드체 (줄 단위로 적용) */
.bubble--bold {
  font-weight: 800;
}

/* 말풍선 안의 개별 할 일 줄 */
.todo-line {
  cursor: pointer;
  padding: 2px 0;
}

/* 둘째 줄부터 약간의 간격만(구분선 없이 텍스트 줄로) */
.todo-line + .todo-line {
  margin-top: 2px;
}

/* 클릭(선택)된 줄 강조 */
.todo-line--active {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}

/* 마감일 지정됨 → 형광펜 하이라이트(텍스트 배경) */
.bubble__mark--hl {
  background: linear-gradient(transparent 55%, #7cfca0 55%);
  border-radius: 2px;
}

/* 마감 정보 표시(작은 글씨) */
.bubble__meta {
  margin-top: 4px;
  font-size: 11px;
  color: #6b5f00;
}

/* 메시지 클릭 시 나타나는 수정/삭제 버튼 줄 */
.bubble-actions {
  align-self: flex-end;
  display: flex;
  gap: 6px;
  margin-top: -2px;
}

.bubble-actions button {
  padding: 5px 14px;
  border: 1px solid #cfd6db;
  border-radius: 14px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bubble-actions .act--edit { color: #2c3a46; }
.bubble-actions .act--delete { color: #e03131; border-color: #f1b0b0; }

/* 앱(왼쪽 정렬, 흰색) */
.bubble--app {
  align-self: flex-start;
  background: var(--bubble-app);
  border-top-left-radius: 4px;
}

/* ===== 매트릭스 표 (실제 HTML/CSS 표) ===== */
:root {
  --q1-bg: #ffe3e3;  --q1-bd: #ff6b6b;  /* Q1 빨강 */
  --q2-bg: #e3efff;  --q2-bd: #3d7bff;  /* Q2 파랑(강조) */
  --q3-bg: #fff6d6;  --q3-bd: #f5c518;  /* Q3 노랑 */
  --q4-bg: #eceff1;  --q4-bd: #b0bec5;  /* Q4 회색 */
}

.matrix {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px;
  width: 100%;
}

/* 축 라벨 */
.matrix__axis,
.matrix__corner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  padding: 2px;
}

/* 4분면 칸 */
.matrix__cell {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 7px 8px;
  min-height: 54px;
  background: #fff;
}

.matrix__cell--q1 { background: var(--q1-bg); border-color: var(--q1-bd); }
.matrix__cell--q2 { background: var(--q2-bg); border-color: var(--q2-bd); }
.matrix__cell--q3 { background: var(--q3-bg); border-color: var(--q3-bd); }
.matrix__cell--q4 { background: var(--q4-bg); border-color: var(--q4-bd); }

/* Q2(중요·비긴급) — 미루기 쉬운 영역이라 가장 눈에 띄게 강조 */
.matrix__cell--q2 {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(61, 123, 255, 0.18);
}

.matrix__cellhead {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.matrix__cell--q2 .matrix__cellhead::after {
  content: " ⭐";
}

.matrix__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.matrix__items li {
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.matrix__empty {
  color: #9aa5ad;
}

/* 축약(미니) 매트릭스: 2×2 칸만, 항목 텍스트 없이 건수만 */
.matrix--mini {
  grid-template-columns: 1fr 1fr;
}

.matrix--mini .matrix__cell {
  min-height: 0;
  padding: 6px 8px;
}

.matrix--mini .matrix__cellhead {
  margin-bottom: 0;
  font-size: 11px;
}

/* ===== 상단 고정(핀) 영역 ===== */
.pinned {
  flex: 0 0 auto;
  background: #f1f5f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
}

.pinned__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.pinned__hint {
  font-weight: 500;
  color: #7a8a98;
}

/* 앱 답장 말풍선 안에 표가 들어갈 땐 더 넓게 */
.bubble--wide {
  max-width: 86%;
}

.bubble__text {
  white-space: pre-wrap;
  margin-bottom: 8px;
}

/* ===== 할 일 설정 시트 ===== */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* hidden 속성이 확실히 먹도록(.sheet의 display:flex가 [hidden]을 덮어쓰는 문제 방지) */
.sheet[hidden] {
  display: none;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 18px 18px 22px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.sheet__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sheet__text {
  width: 100%;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.45;
  margin-bottom: 12px;
}

.sheet__text:focus {
  outline: none;
  border-color: #9bbbd4;
}

.sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.sheet__label {
  font-size: 14px;
  font-weight: 600;
}

.sheet__input {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

/* 중요도 토글 버튼 */
.toggle {
  padding: 7px 16px;
  border: 1px solid #d6d6d6;
  border-radius: 16px;
  background: #f1f1f1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.toggle--on {
  background: #3d7bff;
  border-color: #3d7bff;
  color: #fff;
}

.sheet__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn {
  flex: 1 1 0;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn--ghost {
  background: #eceff1;
  color: #444;
}

.btn--primary {
  background: #3a4a58;
  color: #fff;
}

/* ===== 하단 입력창 ===== */
.composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 전송 전 설정 줄 */
.composer__options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.composer__opt {
  padding: 6px 8px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}

.composer__inputrow {
  display: flex;
  gap: 8px;
}

.composer__input {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 18px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
}

.composer__input:focus {
  outline: none;
  border-color: #9bbbd4;
}

.composer__send {
  flex: 0 0 auto;
  padding: 0 18px;
  border: none;
  border-radius: 18px;
  background: #3a4a58;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.composer__send:hover {
  background: #2c3a46;
}

.composer__send:disabled {
  background: #aab2b9;
  cursor: default;
}