/* ============================================================ Skin: Classical 古典 · 宣纸水墨 Design spec: design/skin_classical/mobile_04_chat_response_设计规范.md Activates via [data-theme="classical"] on . Only overrides --yl-* variables + adds classical-specific styles. Does NOT modify app.css or any JS. ============================================================ */ /* ================================================================ 0. FONT ================================================================ */ @font-face { font-family: 'Huiwen-mincho'; src: url('../fonts/huiwenmingzhao.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* ================================================================ 1. VARIABLE OVERRIDES ================================================================ */ [data-theme="classical"] { /* --- Core accent (muted, ink-like) --- */ --yl-accent: #8b7b6b; --yl-accent-hover: #7a6a5a; --yl-accent-subtle: rgba(139,123,107,0.10); --yl-accent-text: #faf8f4; /* --- Background: rice paper --- */ --yl-bg: #faf8f4; --yl-bg-secondary: #f5f2ec; --yl-bg-gradient: none; --yl-bg-image: none; --yl-bg-overlay: rgba(0,0,0,0); /* --- Chat area --- */ --yl-chat-bg: transparent; /* --- Bubbles: assistant (them) — NO bubble, transparent --- */ --yl-bubble-them-bg: transparent; --yl-bubble-them-text: #324c77; --yl-bubble-them-border: transparent; /* --- Bubbles: user (me) — NO bubble, transparent --- */ --yl-bubble-me-bg: transparent; --yl-bubble-me-text: #5f5f5f; --yl-bubble-me-border: transparent; /* --- Bubble geometry: no bubble feel --- */ --yl-bubble-radius: 0; --yl-bubble-tail: 0; --yl-bubble-padding: 2px 0; --yl-bubble-gap: 4px; --yl-bubble-them-width: 100%; --yl-bubble-me-width: 100%; --yl-msg-spacing: normal; /* --- Typography: Huiwen-mincho serif --- */ --yl-font-family: 'Huiwen-mincho', 'Noto Serif SC', 'Source Han Serif CN', 'Songti SC', 'SimSun', 'Georgia', serif; --yl-font-size: 15px; --yl-font-size-mobile: 15px; --yl-line-height: 1.85; --yl-msg-font-weight: 400; /* --- Avatars: both visible --- */ --yl-avatar-them-size: 47px; --yl-avatar-me-size: 47px; --yl-avatar-them-radius: 50%; --yl-avatar-me-radius: 50%; --yl-show-avatar-them: 1; --yl-show-avatar-me: 1; /* --- Name display --- */ --yl-name-them-display: none; --yl-name-them-size: 12px; --yl-name-them-color: #5f5f5f; /* --- Timestamp --- */ --yl-ts-display: none; --yl-ts-size: 11px; --yl-ts-color: #c9c9c9; /* --- Input area --- */ --yl-input-bg: transparent; --yl-input-text: #5f5f5f; --yl-input-border: transparent; --yl-input-radius: 0; --yl-input-height: 36px; --yl-input-focus-border: transparent; /* --- Send button --- */ --yl-send-bg: transparent; --yl-send-text: #a6a6a6; --yl-send-radius: 50%; --yl-send-size: 36px; /* --- Sidebar --- */ --yl-sidebar-bg: #f5f2ec; --yl-sidebar-text: #5f5f5f; --yl-sidebar-active-bg: rgba(0,0,0,0.05); --yl-sidebar-width: 350px; /* --- Panel / Settings --- */ --yl-panel-bg: #faf8f4; --yl-panel-text: #5f5f5f; --yl-panel-border: #ece8e1; /* --- Scrollbar --- */ --yl-scrollbar-width: 4px; --yl-scrollbar-track: transparent; --yl-scrollbar-thumb: #ddd8d0; /* --- Glass effect: none --- */ --yl-glass-blur: 0px; --yl-glass-opacity: 1; /* --- Selection --- */ --yl-selection-bg: rgba(201,201,201,0.3); --yl-selection-text: inherit; /* --- System messages --- */ --yl-system-bg: transparent; --yl-system-text: #c9c9c9; --yl-system-size: 12px; /* --- Chat max width --- */ --yl-chat-max-width: 850px; /* --- Header --- */ --yl-header-bg: #faf8f4; --yl-header-text: #5f5f5f; --yl-header-height: auto; /* --- Misc --- */ --yl-link-color: #324c77; --yl-danger: #773232; --yl-success: #8da58c; --yl-warning: #c49a6c; --yl-border-color: #ece8e1; /* --- Classical-specific custom props --- */ --cl-user: #5f5f5f; --cl-assistant: #324c77; --cl-dialogue: #773232; --cl-thinking: #a6a6a6; --cl-status: #c9c9c9; --cl-dot-online: #8da58c; --cl-dot-offline: #dfaca9; --cl-dot-away: #f3d89d; --cl-ink-line: #eeeae5; --cl-placeholder: #a6a6a6; --cl-btn: #a6a6a6; /* --- New accent colors (Phase 1) --- */ --cl-accent-blue: #94a9c1; /* right sidebar mood, profile card text */ --cl-accent-pink: #c194ab; /* user signature, profile card, 主权者模式 toggle */ --cl-accent-muted: #758baf; /* +号 bottom sheet only */ /* --- Heart separator: derived from accent colors, tuned for decoration --- */ --cl-heart-1: #c194a9; /* pink variant, based on accent-pink */ --cl-heart-2: #94a9c1; /* blue variant, based on accent-blue */ /* --- Dot: online indicator size & spacing --- */ --yl-dot-size: 6px; --yl-dot-gap: 7px; } /* ================================================================ 2. HEADER — status dot + ink divider ================================================================ */ /* Header: classical layout */ [data-theme="classical"] .yl-header, [data-theme="classical"] .yl-chat-header { background: var(--yl-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--cl-user); padding: 0 5px 0 5px !important; height: 45px !important; min-height: 45px !important; gap: 4px; flex-wrap: nowrap; align-items: center; } /* Header info: single line — dot + name + status */ [data-theme="classical"] .yl-chat-header-info, [data-theme="classical"] .yl-header-info { flex: 1; min-width: 0; display: flex !important; align-items: baseline; gap: var(--yl-dot-gap, 6px); transform: translateY(2.5px); } [data-theme="classical"] .yl-header-title { font-size: 15px; font-weight: 400; letter-spacing: 0.5px; color: var(--cl-user); margin-left: 1px; } [data-theme="classical"] .yl-header-status { font-size: 11.5px; color: var(--cl-thinking); opacity: 1 !important; display: inline !important; margin-top: 0 !important; align-self: center; transform: translateY(1.5px); } /* Online dot: ink-blob style */ [data-theme="classical"] .yl-chat-header-info .yl-online-dot { width: var(--yl-dot-size, 6px); height: var(--yl-dot-size, 6px); border-radius: 50% 48% 52% 46%; background: var(--cl-dot-online); flex-shrink: 0; align-self: center; margin-right: 0; } /* Ink brush divider — inside header-info, same flex parent as dot */ [data-theme="classical"] .yl-chat-header-info, [data-theme="classical"] .yl-header-info { position: relative; padding-bottom: 6px; } [data-theme="classical"] .yl-chat-header-info::after, [data-theme="classical"] .yl-header-info::after { content: ""; position: absolute; left: -5px; bottom: 0; width: min(465px, calc(100% + 5px)); height: 2px; background: linear-gradient( to right, var(--cl-ink-line) 0%, var(--cl-ink-line) 80%, transparent 100% ); opacity: 0.7; border-radius: 1px; } /* Hide header border-bottom (replaced by ink line) */ [data-theme="classical"] .yl-header, [data-theme="classical"] .yl-chat-header { border-bottom: none !important; position: relative; } /* Fade-out overlay below header, matching bottom composer style */ [data-theme="classical"] .yl-header::after, [data-theme="classical"] .yl-chat-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6.85px; height: 12px; background: linear-gradient(to bottom, rgba(250,248,244,0.5), transparent); pointer-events: none; z-index: 1; } /* Header actions — stay in flex flow, not absolute */ [data-theme="classical"] .yl-header-actions { position: static; margin-left: auto; } /* Menu button: hide on portrait touch devices, show on landscape/desktop */ /* Portrait phone: swipe to open, no button needed */ @media (max-width: 768px) and (orientation: portrait) { [data-theme="classical"] .yl-menu-btn { display: none !important; } [data-theme="classical"] .yl-right-btn { display: none !important; } [data-theme="classical"] .yl-chat-header { padding-left: 15px !important; } } /* Landscape or desktop: show buttons, stay in header flex flow */ @media (min-width: 769px), (orientation: landscape) { [data-theme="classical"] .yl-menu-btn { display: flex !important; color: var(--cl-thinking); opacity: 1; } [data-theme="classical"] .yl-menu-btn:hover { opacity: 0.6; background: rgba(201,201,201,0.25); } [data-theme="classical"] .yl-right-btn { display: flex !important; } } /* Right panel button — symmetric with menu btn */ [data-theme="classical"] .yl-right-btn { color: var(--cl-thinking); opacity: 1; transform: translateY(-1.5px); } [data-theme="classical"] .yl-right-btn:hover { opacity: 0.6; background: rgba(201,201,201,0.25); } [data-theme="classical"] .yl-menu-btn { line-height: 1; padding-bottom: 0px !important; } [data-theme="classical"] .yl-btn-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; } [data-theme="classical"] .yl-btn-icon:hover { background: rgba(201,201,201,0.25) !important; } /* ================================================================ 3. CHAT MESSAGES — no bubbles, book-reader feel ================================================================ */ /* Remove bubble visual entirely */ [data-theme="classical"] .yl-bubble { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 2px 0 !important; white-space: pre-wrap; word-break: break-word; position: relative; } /* Assistant bubble: full width */ [data-theme="classical"] .yl-msg.them .yl-bubble { width: 100% !important; max-width: 100% !important; } /* User bubble: fit-content, pushed right, lines left-aligned */ [data-theme="classical"] .yl-msg.me .yl-bubble { color: var(--cl-user); width: fit-content !important; max-width: calc(100% - 110px) !important; margin-left: auto !important; text-align: justify !important; text-justify: inter-character; padding-left: 0 !important; } /* Assistant text: deep blue, leave space for opposite avatar+40px */ [data-theme="classical"] .yl-msg.them .yl-bubble { color: var(--cl-assistant); padding-right: 60px !important; text-align: justify !important; text-justify: inter-character; } /* Compress blank-line gap: keep line-height breathing but reduce paragraph breaks */ [data-theme="classical"] .yl-bubble br + br { content: ""; display: block; margin-top: -14px; } /* User text color (layout handled in bubble section above) */ /* Avatar alignment: center-to-center with first line of text First line center = line-height(28px) / 2 = 14px from top Avatar center = size(45px) / 2 = 22.5px from top Offset = 14 - 22.5 = -8.5px */ [data-theme="classical"] .yl-avatar { align-self: flex-start; margin-top: 0; transform: translateY(calc((15px * 1.85 - var(--yl-avatar-them-size)) / 2)); background: transparent; color: transparent; border: none !important; } /* Messages: wider spacing + entrance animation */ [data-theme="classical"] .yl-msg { margin-bottom: 12px; gap: 22px; width: 100%; max-width: 100% !important; align-self: stretch !important; } /* Text container (the div after avatar, not the avatar itself) */ [data-theme="classical"] .yl-msg > div:not(.yl-avatar) { flex: 1; min-width: 0; } /* Smooth reroll button appearance */ [data-theme="classical"] .yl-msg-actions { opacity: 0; transition: opacity 0.2s; } [data-theme="classical"] .yl-msg:hover .yl-msg-actions { opacity: 0.5; } /* Typing dots: DOM-based three bouncing dots */ [data-theme="classical"] .yl-typing-dots { background: transparent !important; border: none !important; padding: 0 !important; gap: 4px; display: inline-flex; align-items: center; position: absolute; top: calc((15px * 1.85 - var(--yl-avatar-them-size)) / 2 + var(--yl-avatar-them-size) / 2 - 2.5px); left: 0; } [data-theme="classical"] .yl-typing-dots span { width: 5px; height: 5px; background: var(--cl-assistant); opacity: 0.3; animation: cl-dot 1.4s ease-in-out infinite; } [data-theme="classical"] .yl-typing-dots span:nth-child(2) { animation-delay: 0.2s; } [data-theme="classical"] .yl-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes cl-dot { 0%, 80%, 100% { opacity: 0.15; transform: translateY(0); } 40% { opacity: 0.5; transform: translateY(-3px); } } [data-theme="classical"] #chat-typing { display: none !important; } /* Chat inner: visual padding only (not for scroll logic) */ [data-theme="classical"] .yl-chat-inner { padding-top: 16px; /* visual spacing from header */ padding-bottom: 8px; } /* Chat area: comfortable padding */ [data-theme="classical"] .yl-chat { padding: 0 20px 10px; margin-top: -3.45px; } /* ================================================================ 4. INPUT AREA — minimal, blends into page ================================================================ */ /* Composer area — kill the rounded box and shadow from app.css */ [data-theme="classical"] .yl-composer { background: #faf8f4 !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; padding-top: 8px; position: relative; } [data-theme="classical"] .yl-composer-inner { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 0 6px 0 !important; position: relative; } [data-theme="classical"] .yl-composer-inner:focus-within { border: none !important; box-shadow: none !important; } /* Also override .yl-input-area if used elsewhere */ [data-theme="classical"] .yl-input-area { background: var(--yl-bg) !important; border-top: none !important; } /* Ink divider above composer */ [data-theme="classical"] .yl-composer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(var(--yl-chat-max-width) - 105px), calc(100% - 105px)); height: 2px; box-shadow: 0 -5px 10px 3px rgba(250, 248, 244, 0.5), 0 -2px 3px 1px rgba(250, 248, 244, 0.5); background: linear-gradient( to right, transparent 0%, var(--cl-ink-line) 12%, var(--cl-ink-line) 88%, transparent 100% ); opacity: 0.7; border-radius: 1px; } /* Input field: transparent, blending — force override app.css */ [data-theme="classical"] .yl-input { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 13px 60px 13px 60px !important; font-family: var(--yl-font-family); color: var(--cl-user); min-height: 32px; box-shadow: none !important; } [data-theme="classical"] .yl-input:focus { border: none !important; box-shadow: none !important; outline: none !important; } [data-theme="classical"] .yl-input::placeholder { color: var(--cl-placeholder); font-family: var(--yl-font-family); } /* Static cursor line left of input */ [data-theme="classical"] .yl-input-area .yl-chat-inner { position: relative; } [data-theme="classical"] .yl-input-area .yl-chat-inner::before { content: ""; display: block; width: 1.5px; height: 18px; background: var(--cl-placeholder); border-radius: 1px; flex-shrink: 0; align-self: center; } /* Send button: paper plane style, subdued */ [data-theme="classical"] .yl-send-btn { background: transparent; color: var(--cl-btn); box-shadow: none; font-size: 16px; position: absolute !important; right: 2px; bottom: 2px; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; } [data-theme="classical"] .yl-send-btn svg { transform: rotate(-135deg) translateX(0.5px) translateY(1px); display: block; } [data-theme="classical"] .yl-send-btn:hover { background: rgba(201,201,201,0.25); border-radius: 50%; } [data-theme="classical"] .yl-send-btn:active { transform: scale(0.95); } /* ================================================================ 5. SETTINGS PANEL — light theme match ================================================================ */ [data-theme="classical"] .yl-settings-panel { background: var(--yl-panel-bg); border-left: 1px solid var(--yl-border-color); } [data-theme="classical"] .yl-settings-header { background: var(--yl-panel-bg); border-bottom: 1px solid var(--yl-border-color); } [data-theme="classical"] .yl-tab { color: var(--cl-user); } [data-theme="classical"] .yl-tab.active { color: var(--cl-assistant); border-bottom-color: var(--cl-assistant); } [data-theme="classical"] .yl-btn { border-color: var(--yl-border-color); background: transparent; color: var(--cl-user); } [data-theme="classical"] .yl-btn:hover { background: rgba(0,0,0,0.04); color: var(--cl-assistant); } [data-theme="classical"] .yl-crop-actions .yl-btn { border: none; color: var(--cl-dialogue); } [data-theme="classical"] .yl-crop-actions .yl-btn-primary { color: var(--cl-assistant); } [data-theme="classical"] .yl-crop-actions .yl-btn:hover, [data-theme="classical"] .yl-crop-actions .yl-btn-primary:hover { background: transparent; } /* ================================================================ 7. SYSTEM MESSAGES ================================================================ */ [data-theme="classical"] .yl-msg-system .yl-bubble { background: transparent; color: var(--cl-status); border: none; font-size: 12px; } /* ================================================================ 8. AVATAR IMAGES ================================================================ */ [data-theme="classical"] .yl-msg.them .yl-avatar { background-image: url('../assets/avatar/yelin/assistant_1.png'); background-size: cover; background-position: center; color: transparent; font-size: 0; } /* Force user avatar visible even when layout-config says hide */ [data-theme="classical"] .yl-msg.me .yl-avatar { display: flex !important; background-image: url('../assets/avatar/yelin/user_2.png'); background-size: cover; background-position: center; color: transparent; font-size: 0; width: var(--yl-avatar-me-size); height: var(--yl-avatar-me-size); } /* ================================================================ 9. DIALOGUE COLORING (quoted speech in assistant messages) ================================================================ */ [data-theme="classical"] .yl-dialogue { color: var(--cl-dialogue); } /* ================================================================ 10. THINKING CHAIN ================================================================ */ [data-theme="classical"] .yl-thinking { margin-bottom: 0; position: relative; white-space: normal; } [data-theme="classical"] .yl-thinking-toggle { position: absolute; right: -40px; top: 0; height: calc(13.5px * 1.75); /* match first line height of thinking-text */ display: inline-flex; align-items: center; justify-content: center; width: 24px; background: none; border: none; cursor: pointer; padding: 0; color: var(--cl-thinking); opacity: 1; } [data-theme="classical"] .yl-thinking-toggle svg { transition: transform 0.3s; } /* Collapsed state: hide text + heart, rotate arrow */ [data-theme="classical"] .yl-thinking.collapsed .yl-thinking-text { max-height: 0; overflow: hidden; margin: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.2s; } [data-theme="classical"] .yl-thinking.collapsed .yl-heart-sep { max-height: 0; overflow: hidden; opacity: 0; padding: 0; transition: max-height 0.3s, opacity 0.2s; } [data-theme="classical"] .yl-thinking.collapsed .yl-thinking-toggle svg { transform: rotate(180deg); } /* Expanded state */ [data-theme="classical"] .yl-thinking-text { color: var(--cl-thinking); font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; margin-top: 0; max-height: 500px; opacity: 1; transition: max-height 0.3s ease-in-out, opacity 0.2s; } /* ================================================================ 11. HEART SEPARATOR ================================================================ */ [data-theme="classical"] .yl-heart-sep { display: flex; justify-content: center; padding: 10px 0 17px; opacity: 0.7; max-height: 50px; transition: max-height 0.3s, opacity 0.3s; } /* ================================================================ 12. LEFT DRAWER — classical style ================================================================ */ [data-theme="classical"] .yl-drawer-user-header { padding: 18px 16px 10px; border-bottom: none; } [data-theme="classical"] .yl-drawer-user-name { color: var(--cl-user); font-weight: 400; font-size: 15px; display: flex; align-items: center; } [data-theme="classical"] .yl-user-dot { background: var(--cl-dot-online); border-radius: 50% 48% 52% 46%; } [data-theme="classical"] .yl-drawer-user-status { color: var(--cl-thinking); opacity: 1; } [data-theme="classical"] .yl-drawer-user-sig { color: var(--cl-accent-pink); opacity: 0.85; } [data-theme="classical"] .yl-drawer-user-avatar { background: url('../assets/avatar/yelin/user_2.png') center/cover no-repeat; color: transparent; } /* Per-contact avatar images in classical theme */ [data-theme="classical"] .yl-contact-item[data-cid="yelin"] .yl-contact-avatar { background: url('../assets/avatar/yelin/assistant_1.png') center/cover no-repeat; color: transparent; font-size: 0; } [data-theme="classical"] .yl-contact-avatar { background-size: cover; background-position: center; } [data-theme="classical"] .yl-drawer-footer { border-top: none; position: relative; padding-top: 8px; display: flex; align-items: center; gap: 12px; } /* Ink line above footer */ [data-theme="classical"] .yl-drawer-footer::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(to right, transparent 0%, var(--cl-ink-line) 12%, var(--cl-ink-line) 88%, transparent 100%); opacity: 0.7; } [data-theme="classical"] .yl-drawer-footer-link { color: var(--cl-user); font-size: 13px; opacity: 0.6; } /* ================================================================ 13. RIGHT PANEL — classical style ================================================================ */ [data-theme="classical"] .yl-right-avatar { background: url('../assets/avatar/yelin/assistant_1.png') center/cover no-repeat; color: transparent; } /* ================================================================ 14. PROFILE CARD — classical style ================================================================ */ [data-theme="classical"] .yl-profile-overlay { background: var(--yl-bg); } [data-theme="classical"] .yl-profile-back { color: var(--cl-user); } [data-theme="classical"] .yl-profile-cover-bg { background: linear-gradient(135deg, rgba(148,169,193,0.12) 0%, rgba(193,148,171,0.12) 100%); } [data-theme="classical"] .yl-profile-avatar { background-image: url('../assets/avatar/yelin/assistant_1.png'); background-size: cover; color: transparent; border-color: var(--yl-bg); } [data-theme="classical"] .yl-profile-name { color: var(--cl-user); font-weight: 400; } [data-theme="classical"] .yl-profile-model { color: var(--cl-status); } [data-theme="classical"] .yl-profile-quote { color: var(--cl-accent-pink); font-style: italic; } [data-theme="classical"] .yl-profile-stats { color: var(--cl-status); } [data-theme="classical"] .yl-profile-entry { color: var(--cl-user); } [data-theme="classical"] .yl-profile-entry-badge { color: var(--cl-accent-pink); } [data-theme="classical"] .yl-profile-talk { color: var(--cl-accent-blue); } /* ================================================================ 15. SOVEREIGN MODE — classical style ================================================================ */ [data-theme="classical"] .yl-sovereign-prompt-hint { color: var(--cl-accent-pink); font-style: italic; } [data-theme="classical"] .yl-sovereign-prompt { background: transparent; border: none; color: var(--cl-user); font-size: 13px; line-height: 1.75; padding: 8px 0; border-radius: 0; } [data-theme="classical"] .yl-sovereign-prompt:focus { border: none; border-bottom: 1px solid var(--cl-ink-line); } [data-theme="classical"] .yl-sovereign-param { border-bottom: 1px solid var(--cl-ink-line); } /* ================================================================ 16. BOTTOM SHEET — classical style ================================================================ */ [data-theme="classical"] .yl-bottom-sheet { background: #faf8f4 !important; border-top: none; } [data-theme="classical"] .yl-bottom-sheet::before { content: ""; display: block; width: 60%; height: 2px; margin: 0 auto 12px; background: linear-gradient(to right, transparent 0%, var(--cl-ink-line) 20%, var(--cl-ink-line) 80%, transparent 100%); opacity: 0.7; } [data-theme="classical"] .yl-sheet-actions { border-bottom: none; } [data-theme="classical"] .yl-sheet-action { color: var(--cl-user); } [data-theme="classical"] .yl-sheet-toggle { color: var(--cl-accent-muted); } [data-theme="classical"] .yl-sheet-toggle-btn { color: var(--cl-accent-muted); background: transparent; border: 1px solid var(--cl-ink-line); } [data-theme="classical"] .yl-sheet-toggle-btn.active { background: var(--cl-accent-blue); color: var(--yl-bg); border-color: var(--cl-accent-blue); } [data-theme="classical"] .yl-plus-btn { color: var(--cl-thinking); opacity: 1; position: absolute !important; right: 37px; bottom: 2px; width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; overflow: visible !important; } [data-theme="classical"] .yl-plus-btn svg { overflow: visible !important; } [data-theme="classical"] .yl-plus-btn:hover { background: rgba(201,201,201,0.25) !important; opacity: 0.85 !important; } /* ================================================================ 15. DELIVERY STATUS & ACTIONS ================================================================ */ [data-theme="classical"] .yl-delivery[data-status="sending"] { color: var(--cl-status); } [data-theme="classical"] .yl-delivery[data-status="delivered"] { color: var(--cl-dot-online); } [data-theme="classical"] .yl-delivery[data-status="failed"] { color: var(--cl-dialogue); } /* ================================================================ 16. SCROLL-TO-BOTTOM BUTTON ================================================================ */ [data-theme="classical"] .yl-zone { position: relative; } [data-theme="classical"] .yl-scroll-bottom-btn { position: absolute; right: 24px; bottom: 70px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); background: rgba(250, 248, 244, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cl-thinking); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 10; } [data-theme="classical"] .yl-scroll-bottom-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } [data-theme="classical"] .yl-scroll-bottom-btn:hover { background: rgba(250, 248, 244, 0.95); box-shadow: 0 2px 12px rgba(0,0,0,0.1); } [data-theme="classical"] .yl-scroll-bottom-btn:active { transform: scale(0.92); } /* ================================================================ 9. RESPONSIVE ================================================================ */ @media (max-width: 768px) { [data-theme="classical"] .yl-chat { padding: 8px 20px; } [data-theme="classical"] .yl-header { padding: 10px 16px 0; } [data-theme="classical"] .yl-input-area { padding: 4px 14px 8px; } [data-theme="classical"] .yl-msg { gap: 10px; } [data-theme="classical"] .yl-avatar, [data-theme="classical"] .yl-msg.me .yl-avatar { width: 40px !important; height: 40px !important; } [data-theme="classical"] .yl-avatar, [data-theme="classical"] .yl-msg.me .yl-avatar { margin-top: 0 !important; transform: translateY(calc((15px * 1.85 - 40px) / 2)) !important; } [data-theme="classical"] .yl-msg.them .yl-bubble { padding-right: 60px !important; } [data-theme="classical"] .yl-msg.me .yl-bubble { max-width: calc(100% - 75px) !important; } } /* ================================================================ 10. NOTICE BAR — light theme ================================================================ */ [data-theme="classical"] #notice-bar { background: #f9f6f0; color: var(--cl-user); border-bottom: 1px solid var(--yl-border-color); } /* ================================================================ 11. OFFLINE OVERLAY — classical feel ================================================================ */ [data-theme="classical"] #offline-overlay { background: rgba(250,248,244,0.95); color: var(--cl-assistant); font-family: var(--yl-font-family); }