.storefront-chat-modal { width:min(1100px,96vw); max-width:1100px; height:min(760px,90vh); display:flex; flex-direction:column; overflow:hidden; }
.storefront-chat-layout { min-height:0; flex:1; display:grid; grid-template-columns:330px minmax(0,1fr); overflow:hidden; border-top:1px solid #e5e7eb; }
.storefront-chat-conversations { min-height:0; overflow-y:auto; background:#f8fafc; border-right:1px solid #e5e7eb; }
.storefront-chat-conversation { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:13px 12px; color:#1f2937; background:transparent; border:0; border-bottom:1px solid #e5e7eb; text-align:left; cursor:pointer; }
.storefront-chat-conversation:hover { background:#fff; }
.storefront-chat-conversation.is-active { background:#fff1f2; box-shadow:inset 4px 0 #dc1f2e; }
.storefront-chat-avatar { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:#dc1f2e; border-radius:50%; font-weight:800; }
.storefront-chat-conversation__copy { min-width:0; display:grid; gap:3px; }
.storefront-chat-conversation__copy strong,.storefront-chat-conversation__copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storefront-chat-conversation__copy strong { font-size:.9rem; }
.storefront-chat-conversation__copy small { color:#64748b; font-size:.75rem; }
.storefront-chat-conversation > b { min-width:21px; height:21px; display:grid; place-items:center; padding:0 5px; color:#fff; background:#dc1f2e; border-radius:99px; font-size:.68rem; }
.storefront-chat-thread { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#fff; }
.storefront-chat-thread__header { display:grid; gap:2px; padding:12px 16px; border-bottom:1px solid #e5e7eb; }
.storefront-chat-thread__header strong { font-size:1rem; }
.storefront-chat-thread__header small { color:#64748b; font-size:.75rem; }
.storefront-chat-messages { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:18px; background:#fafafa; }
.storefront-chat-message { max-width:78%; display:grid; gap:3px; align-self:flex-start; }
.storefront-chat-message.is-staff { align-self:flex-end; }
.storefront-chat-message > span { padding:0 5px; color:#64748b; font-size:.68rem; }
.storefront-chat-message > div { position:relative; padding:10px 12px; color:#1f2937; background:#fff; border:1px solid #e5e7eb; border-radius:14px 14px 14px 4px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.storefront-chat-message > div.has-image { display:grid; gap:7px; padding:5px; }
.storefront-chat-message__image { display:block; width:auto; max-width:min(300px,100%); max-height:360px; object-fit:contain; border-radius:10px; background:#f1f5f9; }
.storefront-chat-message__text { display:block; padding:3px 7px 5px; }
.storefront-chat-message.is-staff > div { color:#111; background:linear-gradient(180deg,#9bea62 0%,#8de055 58%,#83d64e 100%); border:1px solid #70c441; border-radius:15px 5px 15px 15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(52,124,25,.14),0 2px 3px rgba(30,73,19,.22); }
.storefront-chat-message.is-staff > div::after { content:""; position:absolute; top:-1px; right:-8px; width:13px; height:15px; background:linear-gradient(135deg,#9bea62 0%,#8de055 70%); clip-path:polygon(0 0,100% 0,0 100%); filter:drop-shadow(1px 1px .4px rgba(48,106,28,.32)); }
.storefront-chat-message.is-staff > span,.storefront-chat-message.is-staff > time { text-align:right; }
.storefront-chat-message > time { padding:0 5px; color:#94a3b8; font-size:.64rem; }
.storefront-chat-composer { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:9px; align-items:end; padding:12px; border-top:1px solid #e5e7eb; }
.storefront-chat-composer textarea { width:100%; max-height:110px; resize:vertical; padding:10px 12px; border:1.5px solid #dbe0e6; border-radius:10px; font:inherit; outline:none; }
.storefront-chat-composer textarea:focus { border-color:#dc1f2e; box-shadow:0 0 0 3px rgba(220,31,46,.1); }
.storefront-chat-attach { width:42px; height:42px; padding:0; border-radius:10px; font-size:1rem; }
.storefront-chat-attachment-preview { grid-column:1/-1; position:relative; width:max-content; max-width:220px; padding:5px; background:#fff; border:1px solid #dbe0e6; border-radius:12px; box-shadow:0 3px 10px rgba(15,23,42,.12); }
.storefront-chat-attachment-preview img { display:block; max-width:205px; max-height:130px; object-fit:contain; border-radius:8px; }
.storefront-chat-attachment-preview button { position:absolute; top:-8px; right:-8px; width:24px; height:24px; display:grid; place-items:center; padding:0; color:#fff; background:#dc1f2e; border:2px solid #fff; border-radius:50%; font-size:18px; line-height:1; cursor:pointer; box-shadow:0 2px 5px rgba(15,23,42,.22); }
.storefront-chat-empty { min-height:180px; display:grid; place-content:center; justify-items:center; gap:8px; padding:20px; color:#94a3b8; text-align:center; }
.storefront-chat-empty i { font-size:1.8rem; }
@media (max-width:720px) {
    .storefront-chat-modal { width:100%; height:100dvh; max-height:none; border-radius:0; }
    .storefront-chat-layout { grid-template-columns:140px minmax(0,1fr); }
    .storefront-chat-conversation { grid-template-columns:34px minmax(0,1fr); padding:10px 7px; gap:7px; }
    .storefront-chat-avatar { width:34px; height:34px; }
    .storefront-chat-conversation > b { grid-column:2; justify-self:start; }
    .storefront-chat-message { max-width:90%; }
}