/* 蓝晒 · chat: her words are cream slips, his are printed onto the sheet, his inner voice is a watermark. */
.screen.chat-detail-screen { background: transparent; background-image: none; color: var(--cy-ink); font-family: var(--cy-serif); }
.chat-detail-screen .icon { stroke-width: 1.25; }
/* header: no card, a dusk gradient over the paper */
.chat-detail-screen .chat-header-custom { top: 0; left: 0; right: 0; height: auto; padding: calc(var(--safe-top) + 10px) max(14px, env(safe-area-inset-left)) 18px; gap: 10px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(rgba(10, 26, 52, .82), rgba(10, 26, 52, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--cy-ink); }
.chat-detail-screen .chat-header-custom .header-btn-back, .chat-detail-screen .chat-header-custom .header-btn-info { background: none; color: var(--cy-ink-dim); box-shadow: none; width: 36px; height: 36px; }
.chat-detail-screen .header-avatar-container { display: none; }
.chat-detail-screen .chat-header-name { font-weight: 400; font-size: 18px; letter-spacing: .3em; }
.chat-detail-screen .chat-header-subtitle { color: var(--cy-ink-faint); font-size: 11.5px; letter-spacing: .12em; margin-top: 4px; }
.chat-detail-screen .chat-header-subtitle::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: #9fd0b0; box-shadow: 0 0 6px #9fd0b0; }
.chat-detail-screen .chat-scene-tag { color: var(--cy-amber); }
.chat-detail-screen .chat-messages-area { background: none; margin: 0; padding-top: calc(var(--safe-top) + 84px); }
.chat-detail-screen .load-more { background: none; color: var(--cy-ink-faint); font: 12px var(--cy-serif); letter-spacing: .3em; }
.chat-detail-screen .chat-empty p { color: var(--cy-ink-dim); letter-spacing: .2em; }
.chat-detail-screen .timestamp-custom { color: var(--cy-ink-faint); font: 12px var(--cy-latin); letter-spacing: .3em; }
.chat-detail-screen .timestamp-custom::before, .chat-detail-screen .timestamp-custom::after { content: "✦"; margin: 0 10px; font-size: 9px; }
.chat-detail-screen .msg-me { padding: 0 18px 0 46px; }
.chat-detail-screen .msg-them { padding: 0 40px 0 22px; }
.chat-detail-screen .bubble-me-custom, .chat-detail-screen .bubble-them-custom { font-family: var(--cy-serif); }
.chat-detail-screen .bubble-me-custom { border-radius: 0 !important; padding: 11px 15px 9px; background: var(--cy-slip); color: var(--cy-slip-ink); font-size: 14.5px; line-height: 1.7; letter-spacing: .03em;
  box-shadow: 0 8px 18px rgba(5, 14, 32, .3); clip-path: polygon(0 3%, 4% 0, 50% 2%, 96% 0, 100% 4%, 99% 50%, 100% 96%, 95% 100%, 50% 98%, 4% 100%, 0 96%, 1% 50%); }
.chat-detail-screen .msg-me:nth-of-type(3n) .bubble-me-custom { rotate: .7deg; }
.chat-detail-screen .msg-me:nth-of-type(3n+1) .bubble-me-custom { rotate: -.5deg; }
.chat-detail-screen .bubble-them-custom { border-radius: 0 !important; padding: 2px 0; background: none; color: var(--cy-ink); font-size: 14.5px; line-height: 1.8; letter-spacing: .05em; text-shadow: 0 0 10px rgba(180, 205, 245, .35); }
.chat-detail-screen .msg-bubble-wrapper.is-highlight .bubble-me-custom, .chat-detail-screen .msg-bubble-wrapper.is-highlight .bubble-them-custom { outline: 1px dashed var(--cy-amber); outline-offset: 4px; }
.chat-detail-screen .msg-text a { color: inherit; text-decoration-color: rgba(238, 243, 251, .4); }
.chat-detail-screen .msg-text code, .chat-detail-screen .msg-text pre { background: rgba(10, 26, 52, .35); }
/* his words develop as he writes */
.chat-detail-screen .is-developing span { animation: cy-develop .55s ease-out both; }
@keyframes cy-develop { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
/* inner voice: a watermark */
.chat-detail-screen .msg-subtext-chip { all: unset; display: block; max-width: min(78vw, 330px); margin: 2px 0 8px 22px; cursor: pointer; }
.chat-detail-screen .msg-subtext-chip.is-me { margin: 2px 18px 8px auto; text-align: right; }
.chat-detail-screen .msg-subtext-body { display: block; padding: 0; background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; font: italic 300 13px/1.7 var(--cy-serif); letter-spacing: .06em; color: rgba(238, 243, 251, .16); filter: blur(.6px); transition: color .6s, filter .6s; }
.chat-detail-screen .msg-subtext-body::before { content: "〔心声〕"; font-style: normal; font-size: 11px; margin-right: 4px; }
.chat-detail-screen .msg-subtext-chip.is-open .msg-subtext-body { color: rgba(238, 243, 251, .62); filter: none; }
/* pictures: small prints */
.chat-detail-screen .msg-image-wrapper img:not(.msg-sticker) { border-radius: 0; border: 7px solid #f6f2e8; border-bottom-width: 22px; box-shadow: 0 10px 22px rgba(5, 14, 32, .4); rotate: -1.5deg; }
.chat-detail-screen .msg-me .msg-image-wrapper img:not(.msg-sticker) { rotate: 1.5deg; }
.chat-detail-screen .msg-image-wrapper img.msg-sticker { rotate: 3deg; filter: drop-shadow(0 6px 10px rgba(5, 14, 32, .4)); }
.chat-detail-screen .msg-image-wrapper .photo-stack .photo-card { border-radius: 0; background: #f6f2e8; border: 7px solid #f6f2e8; border-bottom-width: 22px; box-shadow: 0 10px 22px rgba(5, 14, 32, .4); box-sizing: border-box; }
.chat-detail-screen .photo-stack-count { border-radius: 0; font: 11px var(--cy-latin); background: rgba(10, 26, 52, .7); }
/* quotes, reactions, translation, notices */
.chat-detail-screen .msg-reply-block-detached { border-radius: 0; background: none; border-left: 1px solid rgba(238, 243, 251, .35); color: var(--cy-ink-dim); font: 12px var(--cy-serif); padding: 2px 0 2px 10px; }
.chat-detail-screen .msg-reply-detached-name { color: var(--cy-ink-faint); }
.chat-detail-screen .msg-reaction-badge { background: rgba(10, 26, 52, .55); border: 1px solid rgba(238, 243, 251, .25); box-shadow: none; }
.chat-detail-screen .msg-translation-detached-content { font-family: var(--cy-serif); color: var(--cy-ink-dim); }
.chat-detail-screen .msg-system-notice, .chat-detail-screen .msg-system-notice.is-info { color: var(--cy-ink-faint); font: 12px var(--cy-serif); letter-spacing: .15em; background: none; }
.chat-detail-screen .msg-meta-caption, .chat-detail-screen .msg-usage { color: var(--cy-ink-faint); font: 11px var(--cy-latin); letter-spacing: .1em; }
.chat-detail-screen .msg-versions button { color: var(--cy-ink-dim); background: none; }
.chat-detail-screen .nuo-thinking-btn { background: none; color: var(--cy-ink-faint); font: 12px var(--cy-serif); letter-spacing: .2em; border: 1px solid rgba(238, 243, 251, .2); border-radius: 0; }
.chat-detail-screen .nuo-thinking-panel { background: rgba(10, 26, 52, .45); color: var(--cy-ink-dim); border-radius: 0; font: 13px/1.7 var(--cy-serif); }
.chat-detail-screen .msg-tool-chip { border-radius: 0; background: none; border: 1px solid rgba(238, 243, 251, .22); color: var(--cy-ink-faint); font: 11.5px var(--cy-serif); letter-spacing: .1em; box-shadow: none; }
.chat-detail-screen .msg-tool-detail { color: var(--cy-ink-dim); }
.chat-detail-screen .typing-dots span { background: var(--cy-ink); }
.chat-detail-screen .msg-call-card { border-radius: 0; background: none; border: 1px solid rgba(238, 243, 251, .3); color: var(--cy-ink-dim); font: 12.5px var(--cy-serif); box-shadow: none; }
.chat-detail-screen .msg-call-card em { color: var(--cy-ink); }
/* cards sit straight on the paper, not inside a slip */
.chat-detail-screen .bubble-me-custom:has(.link-card), .chat-detail-screen .bubble-them-custom:has(.link-card),
.chat-detail-screen .bubble-me-custom:has(.song-card), .chat-detail-screen .bubble-them-custom:has(.song-card),
.chat-detail-screen .bubble-me-custom:has(.msg-page-card), .chat-detail-screen .bubble-them-custom:has(.msg-page-card),
.chat-detail-screen .bubble-me-custom:has(.msg-page-inline), .chat-detail-screen .bubble-them-custom:has(.msg-page-inline),
.chat-detail-screen .bubble-me-custom:has(.purchase-card), .chat-detail-screen .bubble-them-custom:has(.purchase-card),
.chat-detail-screen .bubble-me-custom:has(.msg-image-wrapper), .chat-detail-screen .bubble-them-custom:has(.msg-image-wrapper) { padding: 0; background: none; clip-path: none; box-shadow: none; text-shadow: none; rotate: 0deg; }
/* a shared link: a postcard */
.chat-detail-screen .link-card { display: flex; gap: 12px; width: min(272px, 76vw); padding: 12px; box-sizing: border-box; background: var(--cy-slip); color: var(--cy-slip-ink); text-decoration: none; box-shadow: 0 10px 22px rgba(5, 14, 32, .35); rotate: -1deg; }
.chat-detail-screen .msg-me .link-card { rotate: 1.2deg; }
.chat-detail-screen .link-ph { flex: none; width: 64px; height: 64px; padding: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); rotate: -3deg; }
.chat-detail-screen .link-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-detail-screen .link-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-detail-screen .link-text b { font-weight: 500; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-detail-screen .link-text small { font-size: 11.5px; line-height: 1.5; opacity: .7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-detail-screen .link-text i { margin-top: auto; font: 17px/1 var(--cy-script); font-style: normal; color: #4a5f8a; }
/* a page he made: a folded envelope that opens in place */
.chat-detail-screen .msg-page-card { position: relative; display: block; width: min(286px, 80vw); padding: 44px 16px 14px; border: 1px solid rgba(238, 243, 251, .45); border-radius: 0; background: rgba(10, 30, 62, .35); color: var(--cy-ink); box-shadow: none; text-align: left; font-family: var(--cy-serif); }
.chat-detail-screen .msg-page-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(to bottom right, transparent 49.5%, rgba(238, 243, 251, .3) 50%, transparent 50.5%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.5%, rgba(238, 243, 251, .3) 50%, transparent 50.5%) right / 50% 100% no-repeat; }
.chat-detail-screen .msg-page-icon { display: none; }
.chat-detail-screen .msg-page-title { display: block; font-weight: 400; font-size: 16px; letter-spacing: .14em; }
.chat-detail-screen .msg-page-sub { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; color: var(--cy-ink-faint); opacity: 1; }
.chat-detail-screen .msg-page-inline { border-radius: 0; background: var(--cy-slip); box-shadow: 0 10px 22px rgba(5, 14, 32, .35); }
.chat-detail-screen .msg-page-bar { background: none; color: var(--cy-slip-ink); border-bottom: 1px dashed rgba(43, 53, 80, .3); font: 12px var(--cy-serif); }
.chat-detail-screen .msg-page-bar button { border-radius: 0; background: none; color: var(--cy-slip-ink); letter-spacing: .2em; }
/* a song: a thin-line tag, the cover as a slowly turning disc */
.chat-detail-screen .song-card { width: min(270px, 76vw); padding: 12px 14px; border: 1px solid rgba(238, 243, 251, .35); background: rgba(10, 30, 62, .35); color: var(--cy-ink); box-shadow: none; }
.chat-detail-screen .song-head { border-bottom: 1px dashed rgba(238, 243, 251, .25); color: var(--cy-ink-faint); font: 11px var(--cy-serif); letter-spacing: .2em; }
.chat-detail-screen .song-cover { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: rgba(238, 243, 251, .1); border: 1px solid rgba(238, 243, 251, .5); animation: cy-spin 14s linear infinite; }
@keyframes cy-spin { to { transform: rotate(360deg); } }
.chat-detail-screen .song-name { font-weight: 400; font-size: 14px; letter-spacing: .08em; }
.chat-detail-screen .song-artist { font-family: var(--cy-latin); color: var(--cy-ink-dim); opacity: 1; }
.chat-detail-screen .song-note { color: var(--cy-ink-dim); font-size: 12.5px; }
.chat-detail-screen .song-listen { border: 1px solid rgba(238, 243, 251, .35); border-radius: 0; background: none; color: var(--cy-ink); font: 12px var(--cy-serif); letter-spacing: .25em; box-shadow: none; }
.chat-detail-screen .purchase-card { background: var(--cy-slip); color: var(--cy-slip-ink); border: 0; box-shadow: 0 10px 22px rgba(5, 14, 32, .35); font-family: var(--cy-serif); }
/* the input: a strip of paper, thin-line buttons */
.chat-detail-screen .input-area-custom { background: linear-gradient(to top, rgba(10, 26, 52, .88), rgba(10, 26, 52, 0)); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 18px; }
.chat-detail-screen .input-action-bar-custom { background: var(--cy-slip); border: 0; border-radius: 0; box-shadow: 0 6px 16px rgba(5, 14, 32, .35);
  clip-path: polygon(0 4%, 3% 0, 97% 2%, 100% 0, 99% 50%, 100% 96%, 97% 100%, 3% 98%, 0 100%, 1% 50%); }
.chat-detail-screen .input-box-custom { color: var(--cy-slip-ink); font: 16px/1.4 var(--cy-serif); letter-spacing: .03em; }
.chat-detail-screen .input-box-custom::placeholder { color: rgba(43, 53, 80, .45); }
.chat-detail-screen .input-btn-plus, .chat-detail-screen .input-btn-ai, .chat-detail-screen .send-btn-custom, .chat-detail-screen .stop-btn-custom,
.chat-detail-screen .bb-sticker-btn, .chat-detail-screen .bb-mic-btn { background: none; color: var(--cy-ink-dim); box-shadow: none; border: 0; }
.chat-detail-screen .send-btn-custom { color: var(--cy-ink); }
.chat-detail-screen .bb-mic-btn.is-recording { background: rgba(233, 163, 106, .25); color: var(--cy-amber); box-shadow: none; animation: none; }
.chat-detail-screen .input-area-custom .icon { width: 25px; height: 25px; }
.chat-detail-screen .input-reply-preview-bar, .chat-detail-screen .more-options-popup, .chat-detail-screen .sticker-panel { background: rgba(10, 26, 52, .9); border: 1px solid rgba(238, 243, 251, .18); border-radius: 0; color: var(--cy-ink); font-family: var(--cy-serif); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.chat-detail-screen .more-options-item-row { color: var(--cy-ink); border-color: rgba(238, 243, 251, .12); letter-spacing: .08em; }
.chat-detail-screen .input-reply-preview-name { color: var(--cy-ink-dim); }
.chat-detail-screen .input-reply-preview-text { color: var(--cy-ink-faint); }

.chat-detail-screen .input-row-wrapper { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 5px 2px; }