:root { color-scheme: light; --accent:hsl(127, 100%, 50%); --accent-dark:#00d921; --text:#222; --muted:#777; --line:#e9e9e9; --soft:#f5f6f8; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.5 Arial,Helvetica,sans-serif; color:var(--text); background:var(--soft); }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:3px solid #8bff80; outline-offset:3px; }
input:focus,textarea:focus { outline:2px solid #80ff82; outline-offset:1px; }
.chat-app { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.chat-navbar { flex:none; height:70px; padding:0 28px; display:flex; align-items:center; gap:32px; background:white; border-bottom:1px solid var(--line); }
.chat-brand { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:750; letter-spacing:-.5px; white-space:nowrap; }
.brand-symbol { color:var(--accent); font-size:34px; line-height:1; font-weight:900; }
.chat-navbar>p { margin:0; padding-left:28px; border-left:1px solid #ddd; color:#666; }
.chat-navbar nav { margin-left:auto; display:flex; align-items:center; gap:24px; font-size:13px; }
.chat-navbar nav a:hover { color:var(--accent); }
.account-link { border:1px solid #ddd; border-radius:20px; padding:8px 16px; }
.chat-page { display:flex; flex-direction:column; flex:1; min-height:0; padding:0 22px 20px; width:100%; max-width:1680px; margin:0 auto; }
.marketplace-notice { min-height:46px; flex:none; display:flex; align-items:center; gap:9px; color:#777; font-size:12px; }
.marketplace-notice>span { color:var(--accent); font-size:17px; }
.chat-status { flex:none; padding:9px 14px; margin-bottom:10px; border:1px solid #c6ffcc; border-radius:4px; background:#fff5ec; color:#22782b; overflow-wrap:anywhere; }
.chat-status:empty { display:none; }
.chat-layout { flex:1; min-height:0; display:grid; grid-template-columns:320px minmax(0,1fr); background:#fff; border:1px solid #e1e3e6; border-radius:8px; overflow:hidden; box-shadow:0 3px 14px #202c3905; }
.chat-inbox { min-width:0; min-height:0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.chat-inbox-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 20px 17px; }
.chat-inbox-head h1 { margin:0; font-size:22px; letter-spacing:-.6px; }
.unread-total { color:#888; font-size:12px; }
.inbox-search { display:flex; gap:9px; align-items:center; margin:0 18px 16px; padding:8px 12px; background:#f4f5f6; border-radius:6px; color:#999; }
.inbox-search>span { font-size:22px; line-height:1; }
.inbox-search input { width:100%; min-width:0; background:transparent; border:0; padding:3px 0; font-size:13px; }
.inbox-filters { display:flex; gap:24px; padding:0 20px; border-bottom:1px solid var(--line); }
.inbox-filters button { border:0; border-bottom:3px solid transparent; background:none; padding:0 0 13px; color:#777; font-size:13px; }
.inbox-filters button.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:700; }
.conversation-list { flex:1; min-height:0; overflow-y:auto; }
.conversation-link { position:relative; display:flex; width:100%; gap:12px; align-items:flex-start; text-align:left; padding:18px; border:0; border-bottom:1px solid #f3f3f3; background:#fff; color:var(--text); border-left:3px solid transparent; }
.conversation-link:hover { background:#f8f9fa; }
.conversation-link.active { background:#fff3e9; border-left-color:var(--accent); }
.conversation-link img,.inbox-avatar { width:44px; height:44px; border-radius:7px; object-fit:cover; flex:none; background:#f0f1f3; }
.inbox-avatar { display:grid; place-items:center; color:#777; font-size:19px; font-weight:700; }
.conversation-link-copy { min-width:0; flex:1; }
.conversation-link-copy strong,.conversation-link-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-link-copy strong { font-size:14px; }
.conversation-link-copy .inbox-product { color:#888; font-size:11px; margin:2px 0; }
.conversation-link-copy .inbox-preview { color:#666; font-size:12px; margin-top:4px; }
.unread-dot { position:absolute; top:22px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.conversation-panel { min-width:0; min-height:0; display:flex; background:#fff; }
.conversation-empty { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:32px; background:radial-gradient(ellipse at 50% 45%,#fff7ef 0,white 57%); }
.empty-chat-icon { width:92px; height:92px; display:grid; place-items:center; margin-bottom:24px; background:#fff0e3; border:1px solid #ffe0c5; color:var(--accent); border-radius:26px; font-size:46px; }
.conversation-empty strong { font-size:23px; font-weight:650; letter-spacing:-.5px; }
.conversation-empty>span { max-width:350px; margin:12px 0 22px; color:#888; line-height:1.8; }
.browse-link { padding:10px 22px; border:1px solid var(--accent); border-radius:22px; color:var(--accent); font-weight:600; }
.conversation-content { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; overflow:hidden; }
.conversation-head { flex:none; height:80px; display:flex; align-items:center; gap:12px; padding:16px 25px; border-bottom:1px solid var(--line); }
.conversation-head img { width:44px; height:44px; border-radius:8px; object-fit:cover; background:#f5f5f5; }
.conversation-head>div { flex:1; min-width:0; }
.conversation-head strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; }
.private-chat-label { display:block; color:#999; font-size:11px; margin-top:3px; }
.quiet-button { padding:7px 13px; border:1px solid #ddd; border-radius:5px; color:#666; background:white; font-size:12px; }
.back-to-inbox { display:none; background:none; border:0; font-size:24px; padding:4px; }
.chat-product-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fafafa; border-bottom:1px solid var(--line); padding:12px 25px; flex:none; }
.chat-product-bar>div { min-width:0; }
.product-bar-label { display:block; font-size:9px; letter-spacing:1px; color:#999; margin-bottom:3px; }
.chat-product-bar strong { display:block; font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-product-bar a { flex:none; font-size:12px; color:var(--accent); }
.messages-list { min-height:90px; flex:1; overflow-y:auto; padding:26px; display:flex; flex-direction:column; gap:16px; background:#f7f8fa; overscroll-behavior:contain; }
.message { max-width:min(74%,580px); padding:12px 16px; background:white; border:1px solid #e7e9ed; border-radius:0 10px 10px 10px; align-self:flex-start; overflow-wrap:anywhere; box-shadow:0 2px 3px #00000002; }
.message.mine { align-self:flex-end; background:#fff0e3; border-color:#c1f9be; border-radius:10px 0 10px 10px; }
.message p { margin:0; white-space:pre-wrap; line-height:1.6; }
.message time { display:block; text-align:right; font-size:10px; color:#999; margin-top:7px; }
.chat-empty-list { color:#999; font-size:12px; text-align:center; margin:0; padding:24px 20px; line-height:1.7; }
.order-request-list { max-height:24%; flex:none; overflow-y:auto; padding:0 24px; background:#f7f8fa; }
.order-request-list:empty { display:none; }
.order-request-card { background:white; border:1px solid #eadfd5; border-left:3px solid var(--accent); padding:14px; border-radius:5px; margin:0 0 14px; font-size:12px; }
.order-request-card p { margin:5px 0; color:#777; }
.order-request-card button { margin:8px 8px 0 0; padding:6px 12px; background:#fff3e8; border:1px solid #ffd6b4; color:var(--accent-dark); border-radius:4px; }
.conversation-actions { display:flex; flex:none; gap:14px; align-items:center; padding:10px 24px; border-top:1px solid var(--line); }
.conversation-actions>span { font-size:11px; color:#999; }
.request-order-button { flex:none; border:1px solid #bcffb3; border-radius:5px; background:#fff6ee; color:#e65d00; padding:7px 13px; font-size:12px; font-weight:600; }
.message-form { position:sticky; bottom:0; z-index:2; flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; column-gap:10px; row-gap:4px; padding:12px 24px 18px; border-top:1px solid var(--line); background:#fff; }
.message-form textarea { display:block; width:100%; resize:none; border:0; border-radius:4px; padding:8px 0; min-height:65px; max-height:110px; background:white; color:#333; font-size:14px; line-height:1.5; }
.message-form textarea { grid-column:1; grid-row:2; }
.message-form textarea::placeholder { color:#aaa; }
.attachment-input { display:none; }
.attachment-previews { grid-column:1/-1; grid-row:1; display:flex; gap:8px; min-width:0; overflow-x:auto; padding:2px 0 6px; }
.attachment-previews[hidden] { display:none; }
.attachment-preview-item { position:relative; width:82px; height:68px; flex:none; overflow:hidden; border:1px solid #e2e4e7; border-radius:5px; background:#f5f6f8; }
.attachment-preview-item img,.attachment-preview-item video { display:block; width:100%; height:100%; object-fit:cover; }
.attachment-preview-item button { position:absolute; top:3px; right:3px; width:23px; height:23px; padding:0; border:0; border-radius:50%; background:#222c; color:white; font-size:16px; line-height:1; }
.media-kind-badge { position:absolute; bottom:4px; left:4px; padding:1px 5px; border-radius:3px; background:#222c; color:white; font-size:9px; }
.attach-media-button { grid-column:2; grid-row:2 / span 2; align-self:end; min-height:38px; padding:7px 10px; border:1px solid #d8dcdf; border-radius:5px; background:#fff; color:#505860; font-size:12px; font-weight:600; white-space:nowrap; }
.attach-media-button:hover { background:#f4f6f7; }
.composer-footer { display:contents; }
.composer-footer>span { color:#aaa; font-size:10px; }
.composer-footer>span { grid-column:1; grid-row:3; }
.composer-footer button { grid-column:3; grid-row:2 / span 2; align-self:end; flex:none; background:var(--accent); color:white; border:0; border-radius:20px; padding:9px 24px; font-size:13px; font-weight:700; min-width:90px; }
.composer-footer button:hover { background:var(--accent-dark); }
.composer-footer button span { margin-left:10px; }
.message-attachments { display:grid; gap:8px; margin:10px 0; }
.message-attachment { min-width:0; }
.message-attachment img,.message-attachment video { display:block; max-width:100%; max-height:360px; border-radius:6px; background:#edf0f2; }
.message-attachment video { width:min(100%,420px); }
.media-unavailable { color:#888; font-size:12px; }
.order-request-form { flex:none; overflow-y:auto; max-height:45%; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 24px; background:#fffaf6; border-top:1px solid #ffdfc5; }
.order-request-form label { display:grid; gap:5px; font-size:12px; color:#666; }
.order-request-form label:nth-of-type(n+3),.order-request-form>div { grid-column:1/-1; }
.order-request-form input,.order-request-form textarea { width:100%; min-width:0; border:1px solid #ddd; border-radius:4px; padding:8px; background:white; }
.order-request-form>div { display:flex; gap:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1440px) { .chat-layout { grid-template-columns:350px minmax(0,1fr); } }
@media(max-width:960px) { .chat-layout { grid-template-columns:270px minmax(0,1fr); } .chat-navbar>p { display:none; } .chat-page { padding:0 12px 12px; } .conversation-actions>span { display:none; } }
@media(max-width:680px) {
 .chat-navbar { height:58px; padding:0 15px; gap:8px; } .chat-brand { font-size:16px; } .brand-symbol { font-size:29px; }
 .chat-navbar nav { gap:0; } .chat-navbar nav>a:first-child { display:none; } .account-link { padding:6px 10px; font-size:11px; }
 .chat-page { padding:0; } .marketplace-notice { display:none; } .chat-status { margin:0; border-radius:0; font-size:12px; }
 .chat-layout { display:flex; border:0; border-radius:0; } .chat-inbox { width:100%; border:0; } .conversation-panel { display:none; }
 .chat-app.chat-open .chat-inbox { display:none; } .chat-app.chat-open .conversation-panel { display:flex; width:100%; }
 .back-to-inbox { display:block; } .conversation-head { height:70px; padding:12px 14px; gap:9px; }
 .conversation-head strong { font-size:15px; } .chat-product-bar { padding:10px 16px; } .messages-list { padding:20px 14px; }
 .message { max-width:86%; } .conversation-actions { padding:8px 14px; } .message-form { column-gap:6px; padding:8px 14px max(12px,env(safe-area-inset-bottom)); }
 .message-form textarea { min-height:44px; height:56px; } .composer-footer>span { display:none; }
 .attach-media-button { min-height:36px; padding:6px 8px; font-size:11px; } .composer-footer button { min-width:76px; padding:8px 12px; }
 .order-request-form { padding:12px 14px; gap:8px; } .order-request-list { padding:0 14px; } .conversation-empty { padding:24px; }
}
@media(prefers-reduced-motion:no-preference) { button,a { transition:background-color .15s,color .15s; } }