/* ============================================================
   consult.css — AI 진료 대화 화면 (#consult / .content02)
   index_style.css 의 토큰을 그대로 쓴다. 대화 화면에만 필요한 것이 여기 있다.

   2026년 리뉴얼에서 정한 것
     · 배경은 흰색. 회색 판 위에 흰 말풍선이 떠 있는 대신,
       흰 종이에 글이 놓인 모양으로 간다.
     · AI 말에는 말풍선을 두지 않는다. 진료 답변은 길어서 말풍선에 가두면
       읽는 폭이 좁아지고 좌우 여백이 두 번 겹친다.
     · 사람 말만 오른쪽에 부드러운 상자로 둔다. 누가 한 말인지는
       그것만으로 충분히 갈린다.
     · 입력부는 상자 하나. 예전엔 텍스트 칸과 버튼 줄이 테두리 두 개로
       나뉘어 있어 아래쪽이 무거웠다.

   ⚠ .chat-message · .choice-btn · .diagnosis-btn · .typing-dots 는
     여기 것이 아니다. /doctor/ 가 index_style.css 의 그 규칙들을 쓴다.
   ============================================================ */

.content02 {
    background: #fff;
}
.content02.active { height: 100vh; height: 100dvh; }   /* 주소창 대응 — 섹션 5 주석 참고 */

.cx-wrap {
    flex: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;              /* 좌우 여백은 자식이 가진다 — 스크롤바를 끝에 붙이려고 */
    position: relative;
}

/* ---------- 대화 영역 ---------- */
.cx-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* 아직 아무 말도 오가지 않은 첫 화면은 위쪽에 둔다.
   한때 세로 가운데에 뒀는데 두 가지가 걸렸다.
     · 제목이 화면 한복판까지 내려와 무겁다
     · 기기 화면 높이에 따라 위치가 들쭉날쭉해진다 (짧은 화면에서는 거의 위,
       긴 화면에서는 한참 아래) — 같은 화면인데 기기마다 달라 보인다
   위에 붙이면 늘 같은 자리다. 아래 빈 곳은 곧 대화가 채운다. */
.cx-body.intro-only { padding-top: 26px; }
.cx-body::-webkit-scrollbar { width: 4px; }
.cx-body::-webkit-scrollbar-track { background: transparent; }
.cx-body::-webkit-scrollbar-thumb {
    background: rgba(140, 160, 180, 0.4);
    border: none; border-radius: 999px;
}
@supports not selector(::-webkit-scrollbar) {
    .cx-body { scrollbar-width: thin; scrollbar-color: rgba(140,160,180,.4) transparent; }
}

/* ---------- 첫 화면 ---------- */
.cx-open { display: flex; flex-direction: column; gap: 16px; }
.cx-intro { padding: 0 2px; }   /* 위 여백은 .cx-body.intro-only 가 준다 */
.cx-intro h1 {
    font-size: 1.42rem; font-weight: 800; letter-spacing: -0.035em;
    color: var(--ink); line-height: 1.35; margin-bottom: 8px;
}
.cx-intro p {
    font-size: 0.92rem; color: var(--ink-2); line-height: 1.7;
    word-break: keep-all;
}
.cx-intro-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 16px; padding: 11px 13px;
    background: var(--brand-soft); border-radius: var(--r-sm);
    font-size: 0.78rem; color: #1f6f5c; line-height: 1.6; word-break: keep-all;
}
.cx-intro-note i { margin-top: 2px; }

/* ---------- 말 ---------- */
.cx-msg { display: flex; flex-direction: column; gap: 10px; }
.cx-msg.me { align-items: flex-end; }

/* 사람 말 — 부드러운 상자. 초록 그라디언트는 길어지면 눈이 아프다. */
.cx-me-box {
    max-width: 82%;
    background: var(--brand-soft);
    color: #14493d;
    padding: 10px 14px;
    border-radius: 18px 18px 5px 18px;
    font-size: 0.94rem;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}
.cx-me-box img { display: block; max-width: 200px; border-radius: 12px; }

/* AI 말 — 상자 없이 글로.
   대신 왼쪽에 동그란 얼굴을 두어 누가 하는 말인지 알린다.
   (주치의 화면 doctor.css 의 .chat-message.ai 와 같은 값이다.
    한쪽만 바꾸면 두 화면이 다르게 보인다)

   얼굴은 /img/bot.webp 다 (원본 img/bot.png 를 192px 로 줄여 만들었다).
   ⚠ 그림을 바꿀 때는 ::before 의 background-image 만 갈아 끼운다. */
.cx-msg.ai { position: relative; padding-left: 44px; }
.cx-msg.ai::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-soft) url('/img/bot.webp') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(10, 155, 181, 0.18);
}
.cx-ai-text {
    /* 오른쪽 끝까지 가지 않는다 — 거기는 내가 말하는 자리다 */
    max-width: 86%;
    font-size: 0.96rem;
    line-height: 1.78;
    color: var(--ink);
    word-break: break-word;
}
.cx-ai-text strong { font-weight: 800; }

/* 좁은 화면 — 얼굴을 «글 위» 로 올린다 (주치의 화면과 같다).
   폰에서는 얼굴이 왼쪽 44px 을 먹고 오른쪽 여백까지 겹쳐서
   글이 지나갈 폭이 300px 남짓밖에 안 남는다. */
@media (max-width: 640px) {
    /* 글만 6px 안으로 들인다 — 얼굴은 동그라미라 왼쪽 끝이 한 점뿐이라서,
       글의 반듯한 왼쪽 선을 같은 자리에 두면 더 왼쪽에서 시작해 보인다.
       (주치의 화면과 같은 값) */
    .cx-msg.ai { padding-left: 6px; }
    .cx-msg.ai::before {
        position: static;
        display: block;
        margin-bottom: 7px;
        margin-left: -6px;      /* 얼굴은 원래 자리에 그대로 */
    }
    .cx-ai-text { max-width: 100%; }
}

/* ---------- 보기 버튼 ---------- */
.cx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cx-chip {
    font-family: inherit;
    font-size: 0.86rem; font-weight: 650;
    color: var(--ink); background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.cx-chip:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.cx-chip:active { transform: scale(0.97); }
.cx-chip[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- 병명 후보 ---------- */
.cx-picks { display: flex; flex-direction: column; gap: 8px; }
.cx-picks-label {
    font-size: 0.76rem; font-weight: 800; color: var(--ink-3);
    letter-spacing: 0.02em;
}
.cx-pick {
    font-family: inherit;
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.14s, box-shadow 0.14s;
}
.cx-pick:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cx-pick-name { flex: 1; min-width: 0; font-size: 0.93rem; font-weight: 750; color: var(--ink); }
.cx-pick-pct  { font-size: 0.86rem; font-weight: 800; color: var(--brand-deep); flex: 0 0 auto; }
.cx-pick-bar {
    height: 4px; border-radius: 999px; background: var(--line-soft);
    margin-top: 6px; overflow: hidden;
}
.cx-pick-bar i { display: block; height: 100%; background: var(--brand-grad); border-radius: 999px; }
.cx-picks[data-locked="1"] .cx-pick { pointer-events: none; opacity: 0.5; }

/* ---------- 생각 중 ---------- */
.cx-think { display: flex; gap: 5px; padding: 2px 0; }
.cx-think span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c2d0dd;
    animation: cxThink 1.15s infinite ease-in-out;
}
.cx-think span:nth-child(2) { animation-delay: 0.14s; }
.cx-think span:nth-child(3) { animation-delay: 0.28s; }
@keyframes cxThink {
    0%, 62%, 100% { transform: translateY(0);    opacity: 0.45; }
    31%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 맨 아래로 ---------- */
.cx-jump {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(100% - 4px); z-index: 5;   /* 입력부 바로 위 */
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff; color: var(--ink-2);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.cx-jump[hidden] { display: none; }

/* 주치의에게서 넘어왔을 때 시작 화면 맨 위에 붙는 안내.
   알리지 않으면 환자는 아무것도 안 넘어간 줄 알고 처음부터 다시 설명한다. */
.cx-handoff {
    display: flex; gap: 11px; align-items: flex-start;
    margin-bottom: 16px; padding: 13px 14px;
    border: 1px solid var(--brand); border-radius: var(--r-sm);
    background: var(--brand-soft);
}
.cx-handoff > i { flex: 0 0 auto; margin-top: 2px; color: var(--brand-deep); font-size: 15px; }
.cx-handoff div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-handoff strong { font-size: 0.88rem; font-weight: 800; color: var(--brand-deep); }
.cx-handoff span { font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.cx-handoff small { font-size: 0.74rem; color: var(--ink-3); }

/* ---------- 입력부 ---------- */
.cx-dock {
    flex: 0 0 auto;
    position: relative;          /* .cx-jump 를 이 상자 위에 띄운다 */
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
}
.cx-attach {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 8px 10px;
    background: var(--line-soft); border-radius: var(--r-sm);
}
.cx-attach[hidden] { display: none; }
.cx-attach img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cx-attach-txt { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }
.cx-attach-txt strong { display: block; font-size: 0.82rem; color: var(--ink); font-weight: 750; }
.cx-attach-x {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: none; background: #fff; color: var(--ink-3); cursor: pointer;
}

/* 테두리 하나짜리 상자. 예전엔 위아래 두 상자로 나뉘어 무거웠다. */
.cx-box {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    padding: 8px 8px 8px 14px;
    box-shadow: var(--shadow-1);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cx-box.focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cx-text {
    width: 100%;
    min-width: 0;
    border: none; outline: none; resize: none;
    background: transparent;
    font-family: inherit; font-size: 0.95rem; line-height: 1.55;
    color: var(--ink);
    max-height: 132px;
    padding: 5px 0 2px;
    display: block;
}
.cx-text::placeholder { color: var(--ink-3); }
.cx-tools { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.cx-tools .cx-gap { flex: 1; }
.cx-ico {
    width: 34px; height: 34px; border-radius: 10px;
    border: none; background: none; color: var(--ink-3);
    font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
}
.cx-ico:hover { background: var(--line-soft); color: var(--ink-2); }
.cx-send {
    width: 34px; height: 34px; border-radius: 50%;
    border: none; cursor: pointer;
    background: #d7e0e9; color: #fff;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.16s, transform 0.12s;
}
.cx-send.on { background: var(--brand-grad); box-shadow: 0 3px 10px rgba(0,184,148,0.3); }
.cx-send.on:active { transform: scale(0.93); }

/* 입력부 아래 줄. 지금은 '새 진료 시작' 하나뿐이다.
   여백을 이 줄이 아니라 버튼에 주는 이유 — 버튼이 숨으면 in-flow 자식이
   사라져 줄 높이가 0이 된다. 줄에 margin 을 주면 빈 줄이 늘 7px 남는다. */
.cx-note { display: flex; justify-content: center; }
/* '새 진료 시작' 은 대화가 시작된 뒤에만 나온다. 첫 화면에서는 지울 것이 없다. */
.cx-note button {
    margin-top: 7px;
    font-family: inherit; font-size: 0.7rem; font-weight: 700;
    background: none; border: none; padding: 2px 6px;
    color: var(--ink-3); cursor: pointer;
}
.cx-note button:hover { color: var(--brand-deep); }
.cx-note button[hidden] { display: none; }

/* ---------- 음성 ---------- */
.cx-mic-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(8, 20, 34, 0.62);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
}
.cx-mic-overlay.on { display: flex; }
.cx-mic-ring {
    width: 92px; height: 92px; border-radius: 50%;
    background: var(--brand-grad);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 30px;
    animation: cxPulse 1.4s infinite ease-out;
}
@keyframes cxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.55); }
    100% { box-shadow: 0 0 0 26px rgba(0, 206, 201, 0); }
}
.cx-mic-overlay p { color: #fff; font-size: 0.92rem; font-weight: 650; }

/* ---------- 데스크톱 ---------- */
@media (min-width: 992px) {
    /* 넓은 화면에서는 대화 폭을 넓게 쓴다 — 주치의 화면(.md-main)과 «같은 값» 이다.
       760px 은 모바일 폭을 그대로 늘린 값이라 1400px 모니터에서는 양옆이 휑했다.
       무한정 늘리지는 않는다: 한 줄이 너무 길면 눈이 다음 줄 첫 글자를 못 찾는다.

       ⚠ doctor.css 의 «.md-main { max-width: 1080px }» 와 짝이다. 셸(사이드바
         비켜주는 폭)도 두 화면이 같으니, 이 값이 같으면 글이 놓이는 자리도 같다.
         한쪽만 바꾸면 진료에서 주치의로 넘어갈 때 글이 옆으로 튄다. */
    .cx-wrap { max-width: 1080px; }
    .cx-body { padding: 26px 28px 10px; }   /* 좌우 28px — .md-chat 과 같은 값 */
    .cx-dock { padding: 8px 28px 20px; }    /* 입력칸도 같은 선에 맞춘다 */
    .cx-intro h1 { font-size: 1.72rem; }

    /* 모니터는 위아래가 넓어 앱바 아래를 조금 더 띄워야 답답하지 않다 */
    .cx-body.intro-only { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .cx-think span, .cx-mic-ring { animation: none; }
}