/**
 * BAS Chat — Unified Chat Styling
 * Shared across all projects (DW, Driver, Kurir)
 * Theme-aware via CSS variables from host page
 */

/* ── Chat Layout ────────────────────────── */
.chat-layout{display:flex;height:calc(100vh - 120px);background:var(--bg2);border-radius:12px;border:1px solid var(--border);overflow:hidden}

/* ── Sidebar ────────────────────────────── */
.chat-sidebar{width:320px;min-width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg1)}
.chat-sidebar-header{padding:16px;border-bottom:1px solid var(--border)}
.chat-sidebar-header .chat-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--t1);font-size:.78rem;outline:none;transition:border .2s}
.chat-sidebar-header .chat-search:focus{border-color:var(--accent)}
.chat-sidebar-header .chat-filter-row{display:flex;gap:8px;margin-top:8px}
.chat-sidebar-header .chat-filter-row select{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--t2);font-size:.7rem}
.chat-conv-list{flex:1;overflow-y:auto;scrollbar-width:thin}
.chat-conv-list::-webkit-scrollbar{width:4px}
.chat-conv-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── Conversation Item ──────────────────── */
.chat-conv-item{display:flex;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);position:relative}
.chat-conv-item:hover{background:var(--bg2)}
.chat-conv-item.active{background:var(--accent-d)}
.chat-conv-item.pinned{background:var(--bg2)}
.chat-conv-pin{position:absolute;top:6px;right:8px;font-size:10px;color:var(--t3)}
.chat-conv-avatar{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:var(--accent);position:relative}
.chat-conv-avatar .online-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg1)}
.chat-conv-avatar .online-dot.online{background:#22C55E}
.chat-conv-avatar .online-dot.away{background:#EAB308}
.chat-conv-avatar .online-dot.offline{background:#6B7280}
.chat-conv-body{flex:1;min-width:0}
.chat-conv-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.chat-conv-name{font-size:.8rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-project{font-size:.55rem;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.3px}
.chat-conv-project.dw{background:rgba(6,182,212,.15);color:#06B6D4}
.chat-conv-project.driver{background:rgba(34,197,94,.15);color:#22C55E}
.chat-conv-project.kurir{background:rgba(249,115,22,.15);color:#F97316}
.chat-conv-location{font-size:.65rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-status{display:inline-block;font-size:.55rem;padding:1px 6px;border-radius:3px;margin-top:2px;font-weight:600}
.chat-conv-preview{font-size:.7rem;color:var(--t3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:50px}
.chat-conv-time{font-size:.6rem;color:var(--t3);white-space:nowrap}
.chat-conv-unread{background:#EF4444;color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}
.chat-conv-label{width:8px;height:8px;border-radius:50%;margin-top:2px}
.chat-conv-separator{padding:6px 16px;font-size:.6rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;background:var(--bg2)}

/* ── Chat Main Area ─────────────────────── */
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--bg1)}
.chat-main-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--t3)}
.chat-main-empty svg{width:48px;height:48px;opacity:.3}
.chat-main-empty span{font-size:.8rem}

/* ── Chat Header ────────────────────────── */
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:.85rem;font-weight:700;color:var(--t1)}
.chat-header-detail{font-size:.65rem;color:var(--t3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chat-header-status select{padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg2);color:var(--t2);font-size:.65rem}
.chat-header-actions{display:flex;gap:6px}
.chat-header-actions button{background:none;border:none;color:var(--t3);cursor:pointer;padding:6px;border-radius:6px;transition:all .15s}
.chat-header-actions button:hover{background:var(--bg2);color:var(--t1)}
.chat-header-typing{font-size:.65rem;color:var(--accent);font-style:italic;margin-top:2px}

/* ── Messages Area ──────────────────────── */
.chat-messages{flex:1;overflow-y:auto;padding:12px 12px 60px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── Bubble ─────────────────────────────── */
.chat-bubble{max-width:70%;padding:8px 12px;border-radius:12px;position:relative;font-size:.78rem;line-height:1.5;word-wrap:break-word;transition:transform .2s ease;touch-action:pan-y}
.chat-bubble--mine{align-self:flex-end;background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(99,102,241,.2)}
.chat-bubble--theirs{align-self:flex-start;background:var(--bg1);color:var(--t1);border-bottom-left-radius:4px;border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.chat-bubble--highlight{animation:chatHighlight .8s ease}
@keyframes chatHighlight{0%,100%{background:inherit}50%{background:rgba(56,189,248,.25)}}

.chat-sender{font-size:.65rem;font-weight:700;color:var(--accent);margin-bottom:2px}
.chat-text{white-space:pre-wrap}
.chat-text a{color:inherit;text-decoration:underline;opacity:.9}
.chat-text a:hover{opacity:1}
.chat-bubble--mine .chat-text a{color:#fff}
.chat-meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:4px}
.chat-time{font-size:.55rem;opacity:.6}
.chat-read{display:inline-flex;opacity:.6}
.chat-read.read{color:#34D399;opacity:1}

/* ── Reply Quote ────────────────────────── */
.chat-reply-quote{padding:6px 8px;border-left:3px solid var(--accent);border-radius:4px;margin-bottom:6px;font-size:.7rem;cursor:pointer;background:rgba(0,0,0,.05)}
.chat-bubble--mine .chat-reply-quote{background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.5)}
.chat-reply-name{font-weight:700;font-size:.65rem;margin-bottom:2px}
.chat-reply-text{opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Reply Bar ──────────────────────────── */
.chat-reply-bar{display:none;padding:8px 16px;border-top:1px solid var(--border);background:var(--bg2);align-items:center;gap:8px}
.chat-reply-bar-content{flex:1;min-width:0;border-left:3px solid var(--accent);padding-left:8px}
.chat-reply-bar-name{font-size:.65rem;font-weight:700;color:var(--accent)}
.chat-reply-bar-text{font-size:.7rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-bar-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px}

/* ── Swipe Reply Indicator ──────────────── */
.chat-bubble .swipe-reply-icon{position:absolute;left:-32px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s;color:var(--t3)}
.chat-bubble.swiping .swipe-reply-icon{opacity:1}

/* ── Reply Button (hover) ───────────────── */
.chat-reply-btn{position:absolute;top:50%;right:-28px;transform:translateY(-50%);opacity:0;background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;border-radius:4px;transition:opacity .15s}
.chat-bubble:hover .chat-reply-btn{opacity:1}
.chat-reply-btn:hover{color:var(--accent);background:var(--bg2)}
.chat-bubble--mine .chat-reply-btn{right:auto;left:-28px}

/* ── Reaction ───────────────────────────── */
.chat-reaction{position:absolute;bottom:-8px;right:8px;font-size:14px;background:var(--bg2);border-radius:10px;padding:1px 4px;border:1px solid var(--border);line-height:1;cursor:pointer}
.chat-bubble--mine .chat-reaction{right:auto;left:8px}
.chat-reaction-picker{position:absolute;bottom:100%;right:0;background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:6px;display:none;gap:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10}
.chat-reaction-picker.show{display:flex}
.chat-reaction-picker span{cursor:pointer;font-size:18px;padding:4px;border-radius:4px;transition:background .1s}
.chat-reaction-picker span:hover{background:var(--bg2)}

/* ── Image ──────────────────────────────── */
.chat-image-wrap{border-radius:8px;overflow:hidden;cursor:pointer;max-width:240px;margin-bottom:4px}
.chat-image-wrap img{width:100%;display:block;border-radius:8px}

/* ── File Card ──────────────────────────── */
.chat-file-card{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.05);border-radius:8px;text-decoration:none;color:inherit;margin-bottom:4px}
.chat-bubble--mine .chat-file-card{background:rgba(255,255,255,.15)}
.chat-file-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--accent-d);color:var(--accent);border-radius:6px}
.chat-file-info{flex:1;min-width:0}
.chat-file-name{font-size:.7rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-file-size{font-size:.6rem;opacity:.6}
.chat-file-dl{opacity:.5}

/* ── Location Card ──────────────────────── */
.chat-location-card{display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;margin-bottom:4px}
.chat-location-preview{height:100px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.chat-location-pin{color:#EF4444}
.chat-location-coords{font-size:.6rem;opacity:.7}
.chat-location-action{padding:6px 10px;font-size:.7rem;font-weight:600;color:var(--accent);text-align:center;background:var(--bg2)}

/* ── Voice Note ─────────────────────────── */
.chat-voice{display:flex;align-items:center;gap:8px;padding:4px 0;min-width:180px}
.chat-voice-play{width:28px;height:28px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-voice-wave{flex:1;height:24px;display:flex;align-items:center;gap:1px}
.chat-voice-wave .bar{width:3px;border-radius:2px;background:currentColor;opacity:.4}
.chat-voice-dur{font-size:.6rem;opacity:.6;min-width:30px}

/* ── Input Bar ──────────────────────────── */
.chat-input-bar{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;align-items:flex-end;gap:8px;background:var(--bg1);position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.chat-input-actions{display:flex;gap:2px}
.chat-input-actions button{background:none;border:none;color:var(--t3);cursor:pointer;padding:8px;border-radius:8px;transition:all .15s}
.chat-input-actions button:hover{color:var(--accent);background:var(--bg2)}
.chat-input-text{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg2);color:var(--t1);font-size:14px;resize:none;max-height:100px;outline:none;font-family:inherit;line-height:1.4;min-height:40px}
.chat-input-text:focus{border-color:var(--accent)}
.chat-input-send{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;flex-shrink:0}
.chat-input-send:hover{transform:scale(1.05)}
.chat-input-send:active{transform:scale(.95)}

/* ── Canned Response Popup ──────────────── */
.chat-canned{position:absolute;bottom:100%;left:0;right:0;background:var(--bg1);border:1px solid var(--border);border-radius:8px;max-height:200px;overflow-y:auto;display:none;box-shadow:0 -4px 16px rgba(0,0,0,.1);z-index:10}
.chat-canned.show{display:block}
.chat-canned-item{padding:8px 14px;cursor:pointer;font-size:.75rem;border-bottom:1px solid var(--border);transition:background .1s}
.chat-canned-item:hover{background:var(--bg2)}
.chat-canned-item:last-child{border-bottom:none}
.chat-canned-cmd{font-weight:700;color:var(--accent);margin-right:8px}

/* ── Broadcast Modal ────────────────────── */
.chat-broadcast{padding:20px}
.chat-broadcast-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.chat-broadcast-textarea{width:100%;min-height:100px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--t1);font-size:.78rem;resize:vertical;font-family:inherit}
.chat-broadcast-count{font-size:.72rem;color:var(--t3);margin:8px 0}

/* ── Notes Panel ────────────────────────── */
.chat-notes{padding:12px;background:var(--bg2);border-radius:8px;margin:0 16px 8px}
.chat-notes textarea{width:100%;min-height:60px;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg1);color:var(--t1);font-size:.72rem;resize:vertical;font-family:inherit}
.chat-notes-label{font-size:.65rem;font-weight:600;color:var(--t3);margin-bottom:4px}

/* ── Search in Chat ─────────────────────── */
.chat-search-bar{padding:8px 16px;border-bottom:1px solid var(--border);display:none;background:var(--bg2)}
.chat-search-bar.show{display:flex;align-items:center;gap:8px}
.chat-search-bar input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg1);color:var(--t1);font-size:.75rem}
.chat-search-bar .chat-search-nav{font-size:.65rem;color:var(--t3)}

/* ── Lightbox ───────────────────────────── */
.chat-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chat-lightbox img{max-width:90vw;max-height:90vh;border-radius:4px}
.chat-lightbox-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.1);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}

/* ── User-side Chat Wrap ────────────────── */
.chat-user-wrap{display:flex;flex-direction:column;height:100%}

/* ── Chat Wallpaper ────────────────────── */
.chat-wallpaper{background-color:var(--bg2);background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:20px 20px}

/* ── Date Separator ────────────────────── */
.chat-date-sep{text-align:center;padding:12px 0 8px}
.chat-date-sep span{font-size:.65rem;background:var(--bg1);color:var(--t3);padding:4px 14px;border-radius:10px;font-weight:600;border:1px solid var(--border);letter-spacing:.3px}

/* ── Responsive ─────────────────────────── */
@media(max-width:768px){
    .chat-sidebar{width:100%;position:absolute;z-index:5;height:100%}
    .chat-main{width:100%}
    .chat-layout{position:relative}
    .chat-layout.conv-open .chat-sidebar{display:none}
    .chat-layout:not(.conv-open) .chat-main{display:none}
}