/* ===== Base ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Pretendard','Noto Sans KR',sans-serif; }
html, body { height:100%; background:#0a0a0a; color:#fff; }

/* ===== Header ===== */
.top-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#111; border-bottom:1px solid #222;
}
.left-section { display:flex; align-items:center; gap:8px; }
.logo { height:15px; width:auto; max-width:160px; object-fit:contain; }
.right-section button {
  border:none; cursor:pointer; padding:.5rem 1rem; border-radius:8px; font-weight:600; margin-left:.5rem;
}
.login-btn { background:none; color:#ddd; border:1px solid #333; }
.signup-btn { background:#00aef0; color:#fff; }

/* ===== Layout ===== */
.chat-container {
  display:flex; flex-direction:column;
  height:100dvh;        /* 모바일 UI/주소창 변동 대응 */
  max-width:960px; width:100%; margin:0 auto; background:#0d0d0d;
}

/* 메시지 영역(바닥정렬) */
.chat-window {
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; overflow:hidden;
}

/* 실제 스크롤 컨테이너 */
.chat-scroll {
  max-height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; padding-right:.5rem;
  scrollbar-width:thin; scrollbar-color:#333 #111;
}
.chat-scroll::-webkit-scrollbar{ width:8px; }
.chat-scroll::-webkit-scrollbar-track{ background:#111; }
.chat-scroll::-webkit-scrollbar-thumb{ background:#444; border-radius:4px; }
.chat-scroll::-webkit-scrollbar-thumb:hover{ background:#555; }

/* ===== Message ===== */
.message { max-width:80%; padding:.75rem 1rem; border-radius:10px; line-height:1.5; font-size:.95rem; word-break:break-word; }
.message.user { align-self:flex-end; background:#1a1a1a; }
.message.bot  { align-self:flex-start; background:#202020; }

/* 타이핑 표시(…) 잘림 방지) */
.message.bot.loading { overflow:visible !important; }
.typing { display:inline-flex; gap:6px; align-items:center; }
.typing .dot { width:8px; height:8px; border-radius:50%; background:#9aa0a6; animation:blink 1.2s infinite ease-in-out; }
.typing .dot:nth-child(2){ animation-delay:.15s } .typing .dot:nth-child(3){ animation-delay:.30s }
@keyframes blink { 0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} }

/* ===== Input ===== */
.chat-input {
  display:flex; gap:.8rem; padding:1rem; background:#141414; border-top:1px solid #222;
  position:sticky; bottom:0; z-index:50;
}
.chat-input textarea {
  flex:1; min-height:44px; max-height:150px; padding:.9rem; border:1px solid #333; border-radius:8px; background:#0d0d0d; color:#fff; font-size:1rem;
  resize:none; overflow-y:auto; font-family:inherit; line-height:1.5;
}
.chat-input button {
  flex:0 0 auto; min-width:80px; background:#00aef0; border:none; color:#fff; border-radius:8px; padding:0 1.2rem; cursor:pointer;
}
.chat-input button:hover { background:#0092c8; }

/* ===== Footer ===== */
.footer { background:#111; text-align:center; padding:.7rem; font-size:.9rem; color:#aaa; border-top:1px solid #222; }

/* ===== Modal (한도 안내) ===== */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; justify-content:center; align-items:center; z-index:100; }
.modal.hidden{ display:none; }
.modal-content{ background:#1a1a1a; border-radius:12px; padding:2rem; width:400px; text-align:center; border:1px solid #333; }
.modal-content h2{ color:#00aef0; margin-bottom:1rem; }
.modal-content p{ color:#ccc; line-height:1.6; margin-bottom:1.5rem; }
.modal-buttons{ display:flex; justify-content:center; gap:.8rem; }
.btn{ background:#00aef0; color:#fff; padding:.6rem 1.2rem; border-radius:8px; text-decoration:none; }
.btn-outline{ border:1px solid #555; color:#ddd; padding:.6rem 1.2rem; border-radius:8px; text-decoration:none; }

/* ===== Optional: Consult popup (미사용 시 무시) ===== */
.consult-popup{ position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,.7); z-index:50; }
.consult-popup.hidden{ display:none; }
.consult-popup-content{ background:#1a1a1a; border-radius:12px; padding:2rem; width:400px; text-align:center; }
.consult-popup-content h2{ color:#00aef0; margin-bottom:1rem; }
.consult-popup-content p{ color:#ccc; line-height:1.6; margin-bottom:1.5rem; }
.consult-popup-content .primary{ background:#00aef0; border:none; padding:.7rem 1.4rem; border-radius:8px; color:#fff; cursor:pointer; }

/* ===== List indentation override (apply to BOTH chat.css & dashboard.css) ===== */
:root{
  --list-indent: 1.45rem;   /* 불릿/숫자 안쪽 들여쓰기 폭 */
  --list-offset: .45rem;    /* 제목 대비 전체 리스트 블록 이동 폭 */
  --list-gap: .28rem;       /* 리스트 위/아래 간격 */
}

/* 공통: 봇 메시지 안의 리스트 기본 들여쓰기 & 간격 */
.message.bot ul,
.message.bot ol{
  margin: var(--list-gap) 0 calc(var(--list-gap) + .45rem) var(--list-offset);
  padding-left: var(--list-indent);
  list-style-position: outside;
}

/* 제목 바로 뒤에 오는 리스트는 한 칸 더 안쪽으로 */
.message.bot h1 + ul, .message.bot h1 + ol,
.message.bot h2 + ul, .message.bot h2 + ol,
.message.bot h3 + ul, .message.bot h3 + ol{
  margin-left: calc(var(--list-offset) + .25rem);
}

/* ✅ 번호목록을 기본 list-item으로 되돌려 '제목 안쪽 들여쓰기'가 자연스럽게 보이게 */
.message.bot ol{
  counter-reset: none !important;
  list-style: decimal !important;
  padding-left: calc(var(--list-indent) + .15rem);
}
.message.bot ol > li{
  display: list-item !important;
  grid-template-columns: unset !important;
  margin: .22rem 0;
}
.message.bot ol > li::before{ content: none !important; }

/* ✅ 체크리스트(마크다운 task-list)도 동일 들여쓰기 유지 */
.message.bot ul.contains-task-list,
.message.bot ul.task-list{
  list-style: none;
  margin-left: var(--list-offset);
  padding-left: 0;
}
.message.bot li.task-list-item{
  margin: .22rem 0;
  padding: 6px 10px;
}

/* 폴백(:has 미지원 브라우저)용 클래스도 동일 들여쓰기 */
.message.bot li.task-item{ margin-left: 0; }

/* 답변 컨테이너에 .ans 클래스를 쓰는 경우도 강제 통일 */
.message.bot .ans ul,
.message.bot .ans ol{
  margin-left: var(--list-offset) !important;
  padding-left: var(--list-indent) !important;
  list-style-position: outside !important;
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .title{ display:none !important; }
  .logo{ height:15px !important; }
  
  .chat-input textarea {
    width:90%;
  }

  .chat-input > #submitBtn{
    padding:0px;
    min-width:50px;
    width:50px;
  }

  .message { max-width:100%; padding:.75rem 1rem; border-radius:10px; line-height:1.5; font-size:.95rem; word-break:break-word; }

  }