:root { --support-yellow:#ffb415; --support-orange:#ff8214; --support-bg:#e7edf4; --support-pale:#f0f6fb; --support-line:#e4e9ec; --support-border:#deebf3; }
html, body.song-chat-standalone { min-height:100%; margin:0; background:var(--support-bg); }
.song-chat-shell, .song-chat-shell * { box-sizing:border-box; }
.song-chat-shell { min-width:1200px; min-height:100vh; display:grid; grid-template-rows:74px minmax(720px,calc(100vh - 74px)); grid-template-columns:275fr 198fr 823fr 536fr; gap:17px; padding:0 19px 22px; background:var(--support-bg); color:#111; font-family:"Microsoft YaHei",Arial,sans-serif; }
.song-chat-ad { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:center; margin-top:18px; background:#fff; font-size:19px; }
.song-chat-header { width: 100%; position: static; grid-column:1/-1; grid-row:1; display:flex; align-items:center; padding:30px 60px; background:linear-gradient(105deg,var(--support-yellow),var(--support-orange)); }
.song-chat-header::before{ display:none; }
.song-chat-header h1 { margin:0; font-size:32px; line-height:1; }.song-chat-header em { font-style:italic; }
.song-chat-header p { margin:0 35px 0 auto; font-size:14px; }.song-chat-header>a { color:#111; font-size:14px; }.song-connection-status { margin-right:16px; color:#3f4b53; font-size:12px; }.song-unread-badge { min-width:22px; height:22px; display:inline-grid; place-items:center; margin-right:16px; padding:0 6px; border-radius:11px; background:#e92b68; color:#fff; font-size:12px; }.song-chat-tabs { display:none; }.song-chat-main { display:contents; }
.song-chat-menu,.song-chat-panel,.song-customer-details { min-width:0; margin-top:18px; background:#fff; }
.song-chat-menu { grid-column:2; grid-row:2; position:relative; }.song-chat-panel { grid-column:3; grid-row:2; position:relative; padding:0 13px 13px; border-radius:12px; }.song-customer-details { grid-column:4; grid-row:2; padding:0 28px; border-radius:12px; }
.song-chat-menu h2,.song-chat-panel>h2,.song-customer-details>h2 { height:61px; display:flex; align-items:center; margin:0; border-bottom:1px solid var(--support-line); font-size:21px; font-weight:400; }
.song-chat-menu h2,.song-chat-panel>h2 { justify-content:center; }
.song-chat-menu button,.song-chat-menu span { width:100%; height:50px; display:flex; align-items:center; padding-left:39px; border:0; background:transparent; font-size:16px; }.song-chat-menu button.active { background:var(--support-pale); }
.song-load-earlier { position:absolute; z-index:2; top:68px; left:50%; transform:translateX(-50%); padding:5px 14px; border:1px solid var(--support-border); border-radius:15px; background:#fff; color:#52606b; cursor:pointer; }.song-message-list { height:calc(100% - 290px); overflow-y:auto; padding:48px 10px 20px; }.song-empty { text-align:center; color:#69747d; }
.song-message { max-width:72%; display:flex; align-items:flex-start; gap:18px; margin:14px 0; }.song-message.visitor { margin-left:auto; flex-direction:row-reverse; }
.song-avatar { width:28px; height:28px; display:grid; flex:0 0 28px; place-items:center; border-radius:50%; background:#e95bd7; color:#fff; font-size:14px; }.song-message.visitor .song-avatar { border-radius:0; background:#e92b68; font-size:0; }
.song-bubble { min-width:180px; padding:10px 14px 7px; background:var(--support-pale); color:#243039; }.song-bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }.song-bubble img { display:block; max-width:min(360px,100%); max-height:300px; border-radius:6px; cursor:zoom-in; }
.song-message-meta { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:5px; color:#46515a; font-size:11px; }.song-recall { padding:0; border:0; background:transparent; color:#a45b00; cursor:pointer; }.song-recalled { color:#7a858f; font-style:italic; }
.song-composer { height:229px; position:absolute; right:13px; bottom:13px; left:13px; border:2px solid var(--support-border); border-radius:10px; background:#fff; }.song-composer textarea { width:100%; height:174px; display:block; padding:15px; border:0; outline:0; resize:none; background:transparent; }
.song-composer-tools { height:51px; display:flex; align-items:center; gap:27px; padding:0 23px; }.song-composer-tools button,.song-image-button { padding:3px 0; border:0; background:transparent; cursor:pointer; font-size:12px; white-space:nowrap; }.song-composer-tools .song-send { width:97px; height:38px; margin-left:auto; border-radius:5px; background:var(--support-pale); font-size:14px; }
[data-image-name] { max-width:150px; overflow:hidden; color:#69747d; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.song-emoji-panel { position:absolute; bottom:54px; left:15px; width:280px; padding:10px; border:1px solid var(--support-line); border-radius:8px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.12); z-index:3; }.song-emoji-panel button { padding:5px; border:0; background:transparent; font-size:22px; cursor:pointer; }
.song-status { position:absolute; right:15px; bottom:-28px; margin:0; color:#b42318; font-size:12px; }.song-customer-details>h2 { padding-left:5px; }.song-customer-details>strong { display:block; margin:32px 6px 48px; font-size:20px; font-weight:400; }
.song-customer-details dl { display:grid; grid-template-columns:80px minmax(0,1fr); gap:42px 8px; margin:0 6px; font-size:15px; }.song-customer-details dt { color:#5f6266; }.song-customer-details dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:900px) {
    html, body.song-chat-standalone { background:#fff; }.song-chat-shell { width:min(100%,1000px); min-width:0; min-height:100vh; display:flex; flex-direction:column; gap:0; margin:0 auto; padding:0; background:#fff; }
    .song-chat-ad { height:34vh; min-height:230px; display:flex; flex:0 0 34vh; order:1; margin:0; font-size:24px; }
    .song-chat-header { min-height:150px; display:block; flex:0 0 auto; order:2; margin:0; padding:28px 24px; position:relative; }.song-chat-header h1 { font-size:clamp(28px,7vw,45px); }.song-chat-header p { margin:18px 0 0; font-size:20px; }.song-chat-header>a { position:absolute; right:24px; bottom:24px; font-size:14px; }.song-connection-status { position:absolute; left:24px; bottom:8px; }.song-unread-badge { position:absolute; right:18px; top:22px; margin:0; }
    .song-chat-tabs { height:78px; display:grid; flex:0 0 78px; grid-template-columns:repeat(3,1fr); order:3; margin:0 20px; padding-top:15px; border-bottom:2px solid var(--support-line); }.song-chat-tabs button { height:47px; border:0; border-radius:8px; background:#fff; font-size:19px; }.song-chat-tabs button.active { background:var(--support-pale); }
    .song-chat-main { min-height:520px; display:block; flex:1 1 auto; order:4; position:relative; }.song-chat-menu,.song-customer-details,.song-chat-panel>h2 { display:none; }.song-chat-panel { height:100%; min-height:520px; margin:0; padding:0; border-radius:0; }
    .song-load-earlier { top:8px; }.song-message-list { height:100%; min-height:520px; padding:48px 20px 220px; }.song-message { max-width:88%; gap:12px; }.song-avatar { width:38px; height:38px; flex-basis:38px; font-size:20px; }.song-message.visitor .song-avatar { font-size:0; }.song-bubble { min-width:0; padding:9px 11px 7px; }.song-bubble p { font-size:16px; }.song-bubble img { max-height:220px; }
    .song-composer { height:190px; right:20px; bottom:25px; left:20px; border-width:2px; }.song-composer textarea { height:130px; padding:14px; }.song-composer-tools { height:56px; gap:10px; padding:0 10px; }.song-composer-tools button,.song-image-button { font-size:11px; }.song-composer-tools [data-notification-toggle] { width:24px; overflow:hidden; font-size:0; }.song-composer-tools [data-notification-toggle]::before { content:"🔔"; font-size:16px; }.song-composer-tools .song-send { width:64px; height:40px; font-size:18px; }.song-emoji-panel { bottom:58px; max-width:calc(100vw - 70px); }[data-image-name] { max-width:65px; }
}