/* 물어보기 패널
   ⚠️ 다른 시트와 같은 유리 질감을 쓴다. 챗창이라고 따로 놀면
      "이건 다른 앱"처럼 보인다. 색·모서리·흐림은 app.css 를 따른다. */

#askSheet {
  display: flex;
  flex-direction: column;
}

#askSheet .ask-log {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ask-msg {
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: -.1px;
}
.ask-msg p { margin: 0 0 6px; }
.ask-msg p:last-child { margin-bottom: 0; }

/* 내가 쓴 것 — 오른쪽에 붙여 대화의 방향을 만든다 */
.ask-me {
  align-self: flex-end;
  max-width: 82%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px 14px 4px 14px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, .93);
}

/* 답 — 배경 없이. 카드로 감싸면 "정리된 결론"처럼 보이는데,
   실제로는 우리가 센 숫자를 나열한 것뿐이라 그만한 무게를 주지 않는다. */
.ask-bot, .ask-sys { align-self: stretch; color: rgba(255, 255, 255, .8); }

.ask-title {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 4px;
}

.ask-note { font-size: 12px; color: rgba(255, 255, 255, .5); }
.ask-warn { font-size: 12px; color: #ffb84d; }

.ask-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ask-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .05);
  border-radius: 9px;
  font-size: 13px;
}
.ask-items b { font-weight: 500; color: rgba(255, 255, 255, .92); }
.ask-items span { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }

/* 예시 질문 */
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip {
  font: inherit;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s;
}
.ask-chip:hover { background: rgba(255, 255, 255, .13); }

/* 출처 · 근거 — 접어 두되 언제나 있다 */
.ask-src, .ask-why { margin-top: 8px; }
.ask-src > summary, .ask-why > summary {
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.ask-src > summary::before, .ask-why > summary::before { content: '▸ '; }
.ask-src[open] > summary::before, .ask-why[open] > summary::before { content: '▾ '; }
.ask-src > div { padding: 6px 0 0 12px; }

.ask-cite {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  background: rgba(0, 0, 0, .22);
  border-radius: 7px;
  padding: 8px 10px;
  word-break: break-word;
  user-select: text;          /* 논문에 쓰려면 긁어갈 수 있어야 한다 */
}
.ask-copy {
  margin-top: 6px;
  font: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
}

/* 입력 */
.ask-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ask-input {
  flex: 1;
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  padding: 10px 13px;
  outline: none;
}
.ask-input::placeholder { color: rgba(255, 255, 255, .35); }
.ask-input:focus { border-color: rgba(255, 255, 255, .26); }
.ask-send {
  flex: 0 0 auto;
  font: inherit;
  font-size: 17px;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  width: 44px;
  cursor: pointer;
}
.ask-send:hover { background: rgba(255, 255, 255, .17); }