/* Light Mode – Gradient Purple + Circular Avatars + System Message */
:root{
  --primary1:#4C1D95;
  --primary2:#6D28D9;
  --bubble-buyer:#C4B5FD;
  --bubble-seller:#E5E7EB;
  --active:#DDD6FE;
  --text:#1E1E1E;
  --muted:#6B7280;
}

#dealnology-chat-root{max-width:1100px;margin:20px auto;border:1px solid #eaeaea;border-radius:12px;overflow:hidden;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.04);}
.dl-chat-header{padding:14px 18px;background:linear-gradient(135deg,var(--primary1),var(--primary2));color:#fff;}
.dl-chat-title{font-weight:700;font-size:18px;}
.dl-chat-sub{font-size:12px;opacity:.9;}

.dl-chat-wrap{display:flex;min-height:560px;}
.dl-chat-list{width:370px;border-right:1px solid #f0f0f0;background:#fafafa;padding:12px;overflow:auto;}
.dl-room{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff;border:1px solid #eee;transition:.2s;}
.dl-room:hover{border-color:var(--active);}
.dl-room.active{border-color:var(--primary1);box-shadow:0 0 0 2px rgba(76,29,149,.12) inset;background:#fff;}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.08);}
.avatar.initials{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary1),var(--primary2));color:#fff;font-weight:700;}
.room-text{min-width:0;display:flex;flex-direction:column;}
.room-title{font-weight:600;display:flex;align-items:center;justify-content:space-between;color:var(--text);}
.room-order{font-size:12px;color:#8b8b8b;margin-top:4px;}
.badge{background:var(--primary1);color:#fff;border-radius:999px;padding:2px 7px;font-size:11px;margin-left:8px;display:inline-block;}
.badge.ok{background:#10B981;}

.dl-chat-window{flex:1;display:flex;flex-direction:column;background:#fff;}
.dl-messages{flex:1;padding:20px;background:#fff;overflow:auto;}
.fade-in{animation:fade .15s ease;}
@keyframes fade{from{opacity:.6}to{opacity:1}}
.msg{margin-bottom:14px;display:flex;}
.msg .msg-body{max-width:76%;padding:12px 14px;border-radius:16px;box-shadow:0 1px 1px rgba(0,0,0,.03);color:var(--text);}
.msg-in .msg-body{background:var(--bubble-seller);align-self:flex-start;}
.msg-out{justify-content:flex-end;}
.msg-out .msg-body{background:var(--bubble-buyer);align-self:flex-end;}
.msg-meta{font-size:11px;color:var(--muted);margin-top:6px;text-align:left;}
.msg-out .msg-meta{text-align:right;}

/* System confirmation message */
.msg-system{margin:12px auto;padding:10px 14px;max-width:80%;text-align:center;font-weight:700;color:var(--primary1);background:#F5F3FF;border:1px dashed var(--primary1);border-radius:10px;}

.dl-send-form{display:flex;flex-direction:column;padding:12px;border-top:1px solid #f0f0f0;background:#fafafa;gap:10px;align-items:stretch;}
#dl-message-input{flex:1;padding:13px 16px;border-radius:999px;border:1px solid #ddd;outline:none;box-shadow:0 0 0 3px transparent;transition:.2s;font-size:14px;background:#fff;}
#dl-message-input:focus{border-color:var(--primary1);box-shadow:0 0 0 3px rgba(76,29,149,.12);}
.dl-actions{display:flex;gap:10px;align-items:center;justify-content:flex-start;}
.dl-send-btn,.dl-confirm-btn{display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:44px;padding:0 18px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--primary1),var(--primary2));color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(76,29,149,.22);font-weight:600;letter-spacing:.2px;}
.dl-confirm-btn{min-width:210px;}
.dl-send-btn span,.dl-confirm-btn span{line-height:1;}
.dl-send-btn:hover,.dl-confirm-btn:hover{filter:brightness(1.05);}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--primary1);color:#fff;padding:10px 16px;border-radius:10px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.toast.ok{background:var(--primary1);}
.no-chats{color:#777;padding:10px;}

/* --- Responsive from v1_6_9(2) merged --- */
/* ===== Mobile (stacked) ===== */
@media (max-width: 767px){
  #dealnology-chat-root{border-radius:0;border:none;max-width:100%;margin:0;box-shadow:none;}
  .dl-back-btn{display:inline-block;}
  .dl-chat-wrap{grid-template-columns:100%; position:relative;}
  .dl-chat-list, .dl-chat-window{width:100%; height:calc(100vh - 64px);}
  .dl-chat-list{position:relative; z-index:1;}
  .dl-chat-window{position:absolute; inset:0 0 0 0; transform:translateX(100%); background:#fff; z-index:2; transition:transform .4s ease-in-out;}
  #dealnology-chat-root.mobile-chat-open .dl-chat-window{transform:translateX(0);}
  #dealnology-chat-root.mobile-chat-open .dl-chat-list{filter:blur(1px);}
  .avatar{width:48px;height:48px;flex:0 0 48px;}
  .dl-send-form{position:sticky;bottom:0;background:#fafafa;}
}