/* UG-UI-20261015-08 · WeChat-like message rhythm on a mentor-specific blue dream canvas.
 * Scoped to conversations: history, directory and original page styles stay untouched. */
.phone #appMain.chat-view:has(> .chat-only) {
  padding: calc(72px + env(safe-area-inset-top, 0px)) 0 0;
}
.chat-workspace .mentor-conversation { position: relative; isolation: isolate; overflow: hidden; }
.mentor-chat-backdrop {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(155deg, #edf5ff 2%, #e5effc 48%, #f3f7ff);
}
.mentor-chat-halo {
  position: absolute; width: min(90vw, 700px); aspect-ratio: 1; border-radius: 50%;
  right: max(-5%, calc(50% - 580px)); top: 7%;
  background: radial-gradient(circle, #d4e6ff 0%, #dfeaff70 56%, transparent 72%);
}
.mentor-chat-art {
  position: absolute; right: max(0px, calc(50% - 570px)); bottom: 4%;
  width: min(67%, 650px); height: 94%; object-fit: contain; object-position: center bottom;
  opacity: .32; filter: saturate(.72); user-select: none;
  mask-image: linear-gradient(#000 65%, transparent 100%);
}
.mentor-chat-backdrop[data-art-kind="portrait"] .mentor-chat-art {
  border-radius: 48%; opacity: .16; object-fit: cover; object-position: center 20%;
  mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
}
.chat-workspace .mentor-conversation .waterfall-stream {
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 26px 28px 24px;
  gap: 24px; min-height: 0; box-sizing: border-box; scroll-padding-block: 24px;
}
.mentor-conversation .chat-message-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; flex-shrink: 0; }
.mentor-conversation .chat-message-row--user { flex-direction: row-reverse; }
.mentor-conversation .chat-message-avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; object-fit: cover;
  object-position: center 25%; border: 1px solid rgba(255,255,255,.9); background: #f5f8ff;
  box-shadow: 0 3px 10px #34588912;
}
.mentor-conversation .chat-message-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(540px, calc(100% - 64px)); }
.mentor-conversation .chat-message-row--user .chat-message-body { align-items: flex-end; }
.mentor-conversation .chat-sender { margin: 0 0 7px 2px; color: #506888; font-size: 12px; line-height: 1.5; }
.chat-workspace .mentor-conversation .message,
.chat-workspace .mentor-conversation .message.execution-card {
  position: relative; width: auto; max-width: 100%; padding: 13px 16px;
  border: 1px solid #d8e5f7; border-radius: 4px 17px 17px 17px;
  background: rgba(255,255,255,.96); color: #253d61;
  box-shadow: 0 3px 12px #31538406; font-size: 15px; line-height: 1.75;
}
.chat-workspace .mentor-conversation .message.user {
  border-radius: 17px 4px 17px 17px; background: #d5e6ff; border-color: #c6dbf8;
}
.mentor-conversation .message::before {
  content: ''; position: absolute; width: 8px; height: 8px; top: 13px; left: -5px;
  transform: rotate(45deg); background: #fff; border: solid #d8e5f7; border-width: 0 0 1px 1px;
}
.mentor-conversation .message.user::before { left: auto; right: -5px; background: #d5e6ff; border-color: #c6dbf8; border-width: 1px 1px 0 0; }
.mentor-conversation .mentor-handoff {
  align-self: center; display: flex; align-items: flex-start; gap: 7px;
  width: auto; max-width: min(520px, 92%); padding: 8px 12px; border-radius: 14px;
  background: #ffffffb8; color: #516c92; font-size: 12px; line-height: 1.65;
}
.mentor-conversation .mentor-handoff img { width: 24px; height: 28px; object-fit: contain; flex-shrink: 0; }
.mentor-conversation .mentor-handoff span { min-width: 0; }
.phone .mentor-conversation .chat-compose {
  position: relative; width: min(980px, calc(100% - 40px)); margin: 0 auto calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px; border: 1px solid #d5e3f6; background: rgba(255,255,255,.97);
  box-shadow: 0 6px 28px #3e649114; box-sizing: border-box;
}
.mentor-conversation > .composer-question-panel { width: min(980px, calc(100% - 40px)); margin: 0 auto 8px; box-sizing: border-box; }
.mentor-conversation .chat-empty { margin: 12dvh auto auto; padding: 22px 26px; border-radius: 22px; background: #ffffffb8; }
.mentor-conversation .chat-empty h2 { color: var(--ink); margin: 0 0 10px; }
.mentor-conversation .chat-empty p { margin: 0; font-size: 14px; line-height: 1.7; }
.phone:has(.mentor-conversation) .subpage-header h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
  .mentor-chat-art { width: 108%; max-width: none; height: 88%; right: -21%; bottom: 8%; opacity: .25; }
  .chat-workspace .mentor-conversation .waterfall-stream { padding: 20px 14px; gap: 20px; }
  .mentor-conversation .chat-message-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .mentor-conversation .chat-message-row { gap: 9px; }
  .mentor-conversation .chat-message-body { max-width: calc(100% - 54px); }
  .chat-workspace .mentor-conversation .message { padding: 11px 13px; }
  .phone .mentor-conversation .chat-compose, .mentor-conversation > .composer-question-panel { width: calc(100% - 24px); }
  .phone .mentor-conversation .chat-compose { margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.theme-dark .mentor-chat-backdrop { background: linear-gradient(155deg, #1b304d, #1e3452 50%, #192b43); }
.theme-dark .mentor-chat-halo { opacity: .12; }
.theme-dark .mentor-chat-art { opacity: .22; }
.theme-dark .mentor-conversation .chat-sender { color: #adc3e3; }
.theme-dark .mentor-conversation .mentor-handoff, .theme-dark .mentor-conversation .chat-empty { background: #203858e8; color: #c2d4ef; }
.theme-dark .chat-workspace .mentor-conversation .message,
.theme-dark .chat-workspace .mentor-conversation .message.execution-card { background: #213650; color: #e5efff; border-color: #405a7c; }
.theme-dark .chat-workspace .mentor-conversation .message.user { background: #304f7c; border-color: #486c9e; }
.theme-dark .mentor-conversation .message::before { background: #213650; border-color: #405a7c; }
.theme-dark .mentor-conversation .message.user::before { background: #304f7c; border-color: #486c9e; }
.phone.theme-dark .mentor-conversation .chat-compose { background: #203651; border-color: #405a7c; }

/* UG-API-20261020-01: truthful request states, scoped to the existing chat. */
.chat-ai-status { align-self: flex-start; max-width: min(540px, 100%); box-sizing: border-box; padding: 12px 16px; border-radius: 14px; color: #456181; background: #fffffff0; border: 1px solid #cfdef1; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.chat-ai-error { display: flex; flex-direction: column; gap: 10px; border-color: #d9c6aa; color: #6d4d2d; }
.chat-ai-error button { align-self: flex-start; min-height: 40px; }
.chat-ai-caption { margin: 0 auto 7px; padding: 0 12px; color: #526987; font-size: 11px; text-align: center; }
.mentor-conversation .message { white-space: pre-wrap; overflow-wrap: anywhere; }
.mentor-conversation .execution-card-completion { margin: 8px 0; font-size: 12px; line-height: 1.65; color: #526987; }
.mentor-conversation .composer-send:disabled { opacity: .45; cursor: wait; }
.theme-dark .chat-ai-status { background: #203858; color: #d2e2f5; border-color: #486383; }
.theme-dark .chat-ai-caption, .theme-dark .execution-card-completion { color: #b1c6e1; }