/* 대화 기록 Q 레일: 스크롤 옆 유리 기둥에 Q1·Q2 번호 칩을 실제 위치대로 꽂고, 누르면 그 질문으로 이동 */
.messages.has-q-rail { padding-right:62px; }
.q-rail {
  position:fixed; z-index:6; width:38px; pointer-events:auto; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
  border:1px solid #e8cfa22e; border-radius:19px;
  background:linear-gradient(180deg,#2a2131b3,#1e1824c7); box-shadow:inset 0 1px #ffffff14,0 6px 18px #0005;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.q-rail::before {
  content:''; position:absolute; top:14px; bottom:14px; left:50%; width:1px;
  background:linear-gradient(transparent,#e8cfa240 10%,#e8cfa240 90%,transparent);
}
.q-mark {
  position:absolute; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center;
  padding:0; border:0; background:transparent; cursor:pointer; pointer-events:auto;
}
.q-chip {
  display:block; min-width:28px; padding:2px 0; border:1px solid #e8cfa266; border-radius:99px;
  background:#3a2d40; color:#e9d6b4; font:700 9.5px/1.2 var(--font, inherit); letter-spacing:.2px; text-align:center;
  font-variant-numeric:tabular-nums; transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* 칩끼리 겹치는 자리는 작은 점으로: 올려 보거나 지금 보는 질문이면 번호가 다시 보인다 */
.q-mark.dot .q-chip { min-width:0; width:6px; height:6px; padding:0; overflow:hidden; color:transparent; border-color:#e8cfa280; background:#e8cfa255; }
.q-mark:hover, .q-mark:focus-visible, .q-mark.current { z-index:2; }
.q-mark:hover .q-chip, .q-mark:focus-visible .q-chip,
.q-mark.dot:hover .q-chip, .q-mark.dot:focus-visible .q-chip {
  min-width:28px; width:auto; height:auto; padding:2px 0; color:#2b2030; background:#f3d69e; border-color:#f3d69e; transform:scale(1.08);
}
.q-mark.current .q-chip {
  min-width:30px; width:auto; height:auto; padding:3px 0; color:#2b2030; border-color:#ffe2a8;
  background:linear-gradient(180deg,#f6dca6,#d9ad62); box-shadow:0 0 0 3px #e8c27c33,0 0 12px #e8c27c88;
}
.q-mark:focus-visible { outline:none; }
/* 끄는 중: 레일이 살짝 밝아지고, 지금 붙은 번호가 커진다 */
.q-rail.dragging { cursor:grabbing; border-color:#e8cfa266; background:linear-gradient(180deg,#3a2d45d9,#2a2133e6); }
.q-rail.dragging .q-tip { display:none !important; }
.q-mark.snap .q-chip { transform:scale(1.22); box-shadow:0 0 0 4px #e8c27c44,0 0 16px #e8c27caa; transition:transform .12s cubic-bezier(.3,1.6,.5,1); }
.q-tip {
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); display:none;
  width:max-content; max-width:min(380px,60vw); padding:10px 13px; border:1px solid #e8cfa27a; border-radius:12px;
  background:#2b2233f7; color:#f2e8f5; font-size:12.5px; line-height:1.6; text-align:left;
  white-space:normal; overflow-wrap:anywhere; box-shadow:0 10px 28px #000a; pointer-events:none;
}
.q-tip b { display:block; margin-bottom:4px; color:#f3d69e; font-size:11px; letter-spacing:.3px; }
.q-tip span { display:-webkit-box; overflow:hidden; white-space:pre-line; -webkit-box-orient:vertical; -webkit-line-clamp:9; }
.q-mark:hover .q-tip, .q-mark:focus-visible .q-tip { display:block; }
.q-mark.tip-down .q-tip { top:-8px; transform:none; }
.q-mark.tip-up .q-tip { top:auto; bottom:-8px; transform:none; }
@media (max-width:600px) {
  .messages.has-q-rail { padding-right:48px; }
  .q-rail { width:32px; }
  .q-chip, .q-mark:hover .q-chip, .q-mark.current .q-chip { min-width:24px; font-size:9px; }
  .q-tip { display:none !important; }
}
/* 오피스 대화도 레일 자리만큼 오른쪽을 비운다 */
.office-conversation.has-q-rail { padding-right:56px; }
@media (max-width:600px) { .office-conversation.has-q-rail { padding-right:44px; } }

/* 답변 머리글: 비서 이름 대신 질문 번호(Q28)와 질문 한 줄 요약 */
.q-title { display:inline-flex; align-items:baseline; gap:7px; min-width:0; max-width:100%; overflow:hidden; }
.q-title .q-no {
  flex-shrink:0; padding:1px 7px; border:1px solid #e8cfa288; border-radius:99px;
  background:#e8c27c22; color:#f3d69e; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.2px;
}
.q-title .q-gist { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:inherit; font-weight:600; }
.messages .card-head .q-title { flex:1 1 auto; }

/* 업무 기록(대화 목록) 레일: 목록 오른쪽 안쪽에 세우고, 설명 상자는 화면 안쪽(오른쪽)으로 펼친다 */
.conversation-list.has-q-rail { padding-right:48px; }
.q-rail.side { width:34px; z-index:30; }
.q-rail.side .q-chip { min-width:26px; font-size:8.5px; letter-spacing:0; }
/* 위 폭 지정이 겹친 자리의 작은 점까지 24px 막대로 늘리지 않게 한다 */
.q-rail.side .q-mark.dot:not(:hover):not(:focus-visible):not(.current) .q-chip { min-width:0; }
.q-rail.side .q-tip { right:auto; left:calc(100% + 12px); max-width:min(340px,70vw); }
/* 좁은 화면에선 목록이 서랍으로 들락거려 고정 레일이 엇나가므로 숨긴다 */
@media (max-width:900px) { .q-rail.side { display:none !important; } .conversation-list.has-q-rail { padding-right:10px; } }

/* 업무 기록 카드 제목 앞 질문 번호: 금색 배지로 또렷하게 */
.conv-item .t .conv-qno {
  display:inline-block; margin-right:7px; padding:1px 7px; border:1px solid #e8cfa2aa; border-radius:99px;
  background:#e8c27c2e; color:#f6dba6; font-size:11px; font-weight:800; line-height:16px; vertical-align:1px;
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
}
.conv-item.active .t .conv-qno { background:linear-gradient(180deg,#f6dca6,#d9ad62); border-color:#ffe2a8; color:#2b2030; }

/* 대화 목록: 레일에서 강조된 번호와 같은 카드 */
.conv-row.q-current { border-radius:12px; background:linear-gradient(90deg,#e8c27c2e,#e8c27c12); box-shadow:inset 3px 0 0 #e8c27c, 0 0 0 1px #e8c27c40; transition:background .2s ease, box-shadow .2s ease; }

/* 레일이 뜬 곳은 기본 스크롤바를 숨기고, 레일 안의 띠가 지금 보이는 구간을 알려 준다(휠·트랙패드 스크롤은 그대로) */
.messages.has-q-rail, .office-conversation.has-q-rail { scrollbar-width:none; }
.messages.has-q-rail::-webkit-scrollbar, .office-conversation.has-q-rail::-webkit-scrollbar { display:none; width:0; height:0; }
/* 목록 레일은 좁은 화면에서 숨으므로 그때는 스크롤바를 남긴다 */
@media (min-width:901px) {
  .conversation-list.has-q-rail { scrollbar-width:none; }
  .conversation-list.has-q-rail::-webkit-scrollbar { display:none; width:0; height:0; }
}
.q-view {
  position:absolute; left:3px; right:3px; z-index:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(180deg,#e8cfa21f,#e8cfa230,#e8cfa21f); box-shadow:inset 0 0 0 1px #e8cfa238;
}
.q-mark { z-index:1; }

/* 대화 목록 레일: 카드마다 질문 번호가 뒤섞여 어지러우므로 평소엔 점만, 지금 보는 카드와 올린 칩만 번호를 보인다 */
.q-rail.side .q-mark:not(:hover):not(:focus-visible):not(.current) .q-chip {
  min-width:0; width:6px; height:6px; padding:0; overflow:hidden; color:transparent; border-color:#e8cfa280; background:#e8cfa255;
}