:root{ --radius:16px; --soft:0 10px 30px rgba(18,38,63,.06); --blur:saturate(180%) blur(6px); --app-height:100vh; }
html,body{height:var(--app-height);overflow:hidden;}
body{background:#f6f8fc}
.app{max-width:1400px;padding:24px;height:65%;display:flex;overflow:hidden}
.app>.row{flex:1 1 auto;}
.card{border:0;border-radius:var(--radius);box-shadow:var(--soft)}
.card-header{border-bottom:1px dashed #edf1f7}

/* ============ CONTACTS ============ */
.contacts-header{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.9);backdrop-filter:var(--blur)}
.search-pill{border-radius:999px;padding:.65rem 1rem;background:#f1f4f9;border:1px solid #ecf0f6;transition:.2s;width:100%}
.search-pill:focus{background:#fff;box-shadow:0 0 0 .25rem rgba(29,104,255,.12);outline:0}
.contact-item{border-radius:14px;padding:.75rem;transition:.15s}
.contact-item:hover{background:#f2f6ff}
.contact-item.active{background:#eef6ff;outline:1px solid rgba(29,104,255,.15)}
.contact-item .unread-badge{background:#0d6efd;color:#fff;border-radius:999px;padding:.1rem .55rem;font-size:.75rem;font-weight:600;min-width:1.5rem;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.contact-item.has-unread .contact-name{color:#0d6efd}
.h-90{height:90% !important;}
/* ============ MESSENGER ============ */
.chat-header{position:sticky;top:0;z-index:1;background:rgba(255,255,255,.85);backdrop-filter:var(--blur)}
.inline-search{display:none}
.inline-search .search-pill{background:#f4f6fb}
#chat .card-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
}
.messages{
  flex:1 1 auto;
  overflow:auto;
  padding:1.25rem;
  min-height:0;
}
.day-sep{text-align:center;margin:1rem 0}
.day-sep .badge{border-radius:999px}
.msg-row{display:flex;margin:.5rem 0}
.bubble{max-width:68%;border-radius:16px;padding:.75rem .95rem;border:1px solid #e9edf5;background:#fff;box-shadow:var(--soft)}
.me .bubble{background:#eef6ff;border-color:rgba(29,104,255,.14)}
.meta{font-size:.75rem;color:#99a1b7;margin-top:.25rem}
.msg-actions{opacity:0;transition:.12s;display:flex;gap:.25rem}
.msg-row:hover .msg-actions{opacity:1}
.msg-menu{position:fixed;z-index:2000;background:#fff;border:1px solid #e9edf5;border-radius:10px;box-shadow:var(--soft);padding:.25rem 0;min-width:120px}
.msg-menu button{background:none;border:0;width:100%;text-align:right;padding:.35rem .75rem;font-size:.9rem}
.msg-menu button:hover{background:#f1f4f9}
[data-bs-theme="dark"] .msg-menu{background:#141a22;border-color:#1e2633}
[data-bs-theme="dark"] .msg-menu button:hover{background:#1b2533}
.typing{display:inline-flex;gap:4px}
.typing span{width:6px;height:6px;border-radius:50%;background:#a1a5b7;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.35}40%{opacity:1}}
@keyframes send-spin{to{transform:rotate(360deg)}}

/* File message */
.file-attachment{border:1px dashed #dfe4ee;border-radius:10px;padding:.25rem .5rem;background:#fff}
.file-attachment .progress-circle{--p:0;width:32px;height:32px;border-radius:50%;background:conic-gradient(#0d6efd calc(var(--p)*1%), #e9edf5 0);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#0d6efd}
.file-attachment .progress-circle::after{content:attr(data-pct) '%'}

/* ============ COMPOSER (مینیمال) ============ */
.composer{border-top:1px dashed #edf1f7;background:#fff;padding-bottom:env(safe-area-inset-bottom,1rem)}
.composer-min{border-top:1px solid var(--kt-border-color,#eef2f7);background:transparent}
.chip-min{border:1px solid #edf1f5;background:transparent;color:#475569;border-radius:999px;padding:.2rem .6rem;font-size:.82rem;transition:.12s}
.chip-min:hover{background:#f7f9fc}
.chip-min:active{transform:scale(.98)}

.field-min{position:relative;border:1px solid #ecf0f6;border-radius:14px;background:#f8fafc;transition:.15s;padding-inline:.35rem}
.field-min:focus-within{background:#fff;border-color:#cfe2ff;box-shadow:0 0 0 .15rem rgba(29,104,255,.06)}
.input-min{border:0;background:transparent;resize:none;min-height:48px;max-height:160px;padding-inline-start:3rem;padding-inline-end:3rem;font-size:.95rem}
.input-min::placeholder{color:#a0abc0}

.send-min,.attach-min{
  position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:transparent;color:#7f8aa3;transition:.15s
}
.send-min{inset-inline-start:.35rem}
.attach-min{inset-inline-end:.35rem}
.attach-min:hover{background:#f1f4f9}
.emoji-min{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;color:#7f8aa3;transition:.15s;inset-inline-end:2.35rem}
.emoji-min:hover{background:#f1f4f9}
.emoji-picker{position:absolute;bottom:calc(100% + .5rem);inset-inline-end:2.35rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem;padding:.5rem;border:1px solid #dfe4ee;border-radius:10px;background:#fff;box-shadow:var(--soft);z-index:10}
.emoji-picker .emoji-item{background:none;border:0;font-size:1.25rem;line-height:1;padding:.25rem;cursor:pointer}
.send-min[disabled]{opacity:.6;cursor:not-allowed}
.send-min .send-icon{display:inline-flex;align-items:center;justify-content:center}
.send-min .send-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:send-spin .75s linear infinite}
.send-min.sending{background:#0d6efd;color:#fff;box-shadow:0 6px 16px rgba(13,110,253,.15);pointer-events:none}
.send-min.sending,.send-min.sending:hover{transform:translateY(-50%)}
.send-min.sending .send-icon{display:none}
.send-min.sending .send-spinner{display:inline-flex}
.field-min.has-text .send-min{background:#0d6efd;color:#fff;box-shadow:0 6px 16px rgba(13,110,253,.15)}
.field-min.has-text .send-min:hover{transform:translateY(calc(-50% - 1px))}

.sending-indicator{display:inline-flex;align-items:center;gap:.35rem;color:#0d6efd;font-size:.75rem;font-weight:500}
.sending-indicator::before{content:"";width:.75rem;height:.75rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:send-spin .75s linear infinite}

.attachments-min{display:flex;gap:.4rem;flex-wrap:wrap;padding-top:.5rem}
.attachments-min .chip{border:1px dashed #dfe4ee;border-radius:10px;padding:.25rem .5rem;background:#fff;display:inline-flex;gap:.35rem;align-items:center;font-size:.82rem}

.line-min{width:120px;height:3px;background:#e9edf5;border-radius:999px;overflow:hidden}
.line-min>span{display:block;height:100%;width:0%;background:#0d6efd;transition:.15s}

/* Avatars */
.symbol .symbol-label{font-weight:700}
.symbol-45px .symbol-label{font-size:1.05rem}
.symbol-35px .symbol-label{font-size:.85rem}

/* highlight */
mark{background:#fff2b2;padding:0 .15rem;border-radius:4px}

/* Dark */
[data-bs-theme="dark"] body{background:#0d1015}
[data-bs-theme="dark"] .card{box-shadow:none}
[data-bs-theme="dark"] .search-pill{background:#141a22;border-color:#1d2633;color:#cdd6e3}
[data-bs-theme="dark"] .contact-item:hover{background:#151a22}
[data-bs-theme="dark"] .contact-item.active{background:#111a2b}
[data-bs-theme="dark"] .contact-item .unread-badge{background:#2563eb;color:#fff}
[data-bs-theme="dark"] .contact-item.has-unread .contact-name{color:#5ca4ff}
[data-bs-theme="dark"] .bubble{background:#141a22;border-color:#1e2633}
[data-bs-theme="dark"] .me .bubble{background:#13232f;border-color:#1b3142}
[data-bs-theme="dark"] mark{background:#2a2f12}
[data-bs-theme="dark"] .field-min{background:#121925;border-color:#1e2633}
[data-bs-theme="dark"] .field-min:focus-within{background:#0f131a;border-color:#2a3a4d}
[data-bs-theme="dark"] .attachments-min .chip{background:#141a22;border-color:#243040}
[data-bs-theme="dark"] .line-min{background:#1f2633}

/* Responsive mobile view */
@media (max-width: 991.98px){
  #chatPanel{display:none;}
  .app.show-chat #chatPanel{display:block;}
  .app.show-chat #contactsPanel{display:none;}
  .app{padding:12px;}
}