.akm-corner{position:fixed;right:18px;bottom:86px;width:360px;max-width:95vw;height:520px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;overflow:hidden}
.akm-corner__head{display:flex;align-items:center;justify-content:space-between;background:#0073aa;color:#000;padding:8px 10px;font-weight:600}
.akm-corner__close{border:none;background:#f44336;color:#000;border-radius:50%;width:26px;height:26px;cursor:pointer}
.akm-corner__body{flex:1;overflow:auto;background:#fff}
.akm-head__info{display:flex;align-items:center;gap:10px}
.akm-head__avatar{width:34px;height:34px;border-radius:50%;display:none;background:#f2f2f2}
.akm-head__names{display:flex;flex-direction:column;line-height:1.1}

.akm-fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#000;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 6px 18px rgba(0,0,0,.2);cursor:pointer;z-index:9999}
.akm-badge{position:absolute;top:-6px;right:-6px;background:#ff5252;color:#000;border-radius:10px;min-width:18px;height:18px;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 4px}

.akm-chat{display:flex;border-top:1px solid #eee;background:#fff}
.akm-chat__side{width:42%;border-right:1px solid #eee;max-height:460px;overflow:auto}
.akm-chat__head{padding:10px;font-weight:600;border-bottom:1px solid #eee;background:#fafafa}
.akm-chat__list{padding:8px}
.akm-chat__item{display:grid;grid-template-columns:36px 1fr;grid-gap:8px;align-items:center;padding:8px;border:1px solid #eee;border-radius:8px;margin-bottom:8px;cursor:pointer}
.akm-chat__item:hover{background:#f8f8f8}
.akm-chat__thumb{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f0f0f0}
.akm-chat__title{font-weight:600}
.akm-chat__main{flex:1;display:flex;flex-direction:column;max-height:460px}
.akm-chat__thread{flex:1;padding:10px;overflow:auto;background:#fcfcfc}
.akm-chat__form{display:flex;border-top:1px solid #eee}
.akm-chat__form input[type=text]{flex:1;padding:10px;border:none}
.akm-chat__form .button{margin:6px}
.akm-chat__msg{max-width:74%;margin:6px 0;padding:8px 10px;border-radius:10px}
.akm-chat__msg.me{margin-left:auto;background:#e1f5fe}
.akm-chat__msg.them{margin-right:auto;background:#f1f1f1}
.akm-chat__time{font-size:11px;opacity:.7;margin-top:4px}

/* Vendor forms */
.akm-add-product input[type=text], .akm-add-product input[type=number]{max-width:420px}
.akm-vendor-register input{max-width:420px}


/* === AKM Chat Polished UI === */
.akm-chat__head{background:#1f2937;color:#000;border-radius:10px 10px 0 0;padding:10px 12px;font-weight:600;display:flex;align-items:center;gap:10px}
.akm-chat__thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-inline-end:8px;border:2px solid #fff}
.akm-chat__item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #eee;cursor:pointer}
.akm-chat__item:hover{background:#f9fafb}
.akm-chat__body{background:#ffffff;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px}
.akm-chat__msg{max-width:78%;margin:8px 12px;padding:10px 12px;border-radius:14px;line-height:1.5}
.akm-chat__msg.me{margin-left:auto;background:#e0f2fe}
.akm-chat__msg.them{margin-right:auto;background:#f3f4f6}
.akm-chat__time{font-size:11px;color:#6b7280;margin-top:4px;text-align:right}
#akm-chat-form{gap:8px;border-top:1px solid #e5e7eb;padding:10px;background:#fff}
#akm-chat-form input[name=message]{flex:1;border:1px solid #d1d5db;border-radius:10px;padding:10px}
#akm-send-btn{border-radius:10px}
#akm-typing{font-style:italic}
#akm-seen{color:#059669}

:root{--akm-color-primary:#e11d48;--akm-color-head:#111827;--akm-color-bubble-me:#ffe4e6;--akm-color-bubble-them:#f3f4f6;}

#akm-debug{position:fixed;bottom:8px;left:8px;background:rgba(17,24,39,.92);color:#000;font:12px/1.4 ui-sans-serif,system-ui,Arial;padding:8px 10px;border-radius:10px;z-index:99999;max-width:60vw;box-shadow:0 4px 20px rgba(0,0,0,.3);}
#akm-debug b{color:#93c5fd}
#akm-debug .ok{color:#86efac}
#akm-debug .err{color:#fca5a5}
#akm-debug .muted{opacity:.75}
#akm-debug .row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#akm-debug .btn{margin-left:8px;border:1px solid #334155;background:#1f2937;border-radius:6px;padding:2px 6px;color:#e5e7eb;cursor:pointer}



/* ===== Blue/White Chat Theme (Messenger-like) ===== */
:root{
  --akm-blue:#1877f2;
  --akm-blue-700:#145bd1;
  --akm-gray:#e5e7eb;
  --akm-text:#111827;
  --akm-head:#ffffff;
}

#akm-chat-corner{
  position:fixed !important;
  right:16px !important;
  left:auto !important;
  bottom:16px !important;
  width:340px;
  max-width:92vw;
  background:#ffffff;
  border:1px solid var(--akm-gray);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  overflow:hidden;
  z-index:2147483000;
}

/* Header */
.akm-corner__head{
  display:flex;align-items:center;gap:8px;
  background:var(--akm-blue);
  color:#000;
  padding:10px 12px;
  font-weight:600;
}
.akm-corner__head .akm-title{flex:1}
.akm-corner__head .akm-actions button{
  background:rgba(255,255,255,.18);
  color:#000;border:0;border-radius:8px;padding:4px 8px;cursor:pointer
}
.akm-corner__head .akm-actions button:hover{background:rgba(255,255,255,.3)}

/* Messages area */
.akm-chat__list{
  background:#f8fafc;
  max-height:55vh;
  overflow:auto;
  padding:10px;
}
.akm-msg{margin:8px 0;display:flex;flex-direction:column;gap:4px}
.akm-msg .bubble{
  display:inline-block;
  max-width:80%;
  padding:8px 12px;
  border-radius:16px;
  line-height:1.5;
  word-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.akm-msg.me{align-items:flex-end}
.akm-msg.me .bubble{background:var(--akm-blue);color:#000;border-bottom-right-radius:6px}
.akm-msg.them{align-items:flex-start}
.akm-msg.them .bubble{background:#ffffff;border:1px solid var(--akm-gray);color:var(--akm-text);border-bottom-left-radius:6px}
.akm-time{font-size:11px;color:#6b7280}

/* Composer */
.akm-chat__form{
  position:sticky;bottom:0;background:#fff;
  display:flex;gap:8px;align-items:center;
  border-top:1px solid var(--akm-gray);
  padding:8px;
}
.akm-chat__form input[type="text"],
.akm-chat__form textarea{
  flex:1;border:1px solid var(--akm-gray);border-radius:12px;padding:10px 12px;outline:none
}
.akm-chat__form button[type="submit"]{
  border:0;background:var(--akm-blue);color:#000;border-radius:12px;padding:10px 14px;cursor:pointer;
  transition:background .15s ease;
}
.akm-chat__form button[type="submit"]:hover{background:var(--akm-blue-700)}

/* FAB (if exists) */
.akm-chat-fab{right:16px !important;left:auto !important;background:var(--akm-blue) !important;color:#fff !important}
.akm-chat-fab:hover{filter:brightness(1.05)}

/* Ensure clickability on top */
.akm-overlay, .akm-chat-corner-overlay{pointer-events:none !important}



/* Online badge */
.akm-online-badge{
  display:inline-block;
  width:10px;height:10px;
  background:#22c55e;
  border-radius:50%;
  margin-right:6px;
}

/* Seen ticks */
.akm-seen{
  font-size:11px;color:#6b7280;display:flex;align-items:center;gap:2px
}
.akm-seen .tick{color:#1d4ed8;font-size:14px;line-height:1}


.akm-corner__head .akm-actions .akm-del{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:4px 8px;cursor:pointer;margin-inline-start:6px}
.akm-corner__head .akm-actions .akm-del:hover{background:rgba(255,255,255,.32)}

/* Sound toggle button */
.akm-corner__head .akm-actions .akm-sound-toggle{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:4px 8px;cursor:pointer;margin-inline-start:6px}
.akm-corner__head .akm-actions .akm-sound-toggle:hover{background:rgba(255,255,255,.32)}
.akm-sound-off{opacity:.6;filter:grayscale(1)}


/* Ensure black text */
#akm-chat-corner, #akm-chat-corner * { color:#000 !important; }
.akm-online-badge{display:inline-block;width:10px;height:10px;background:#22c55e;border-radius:50%;margin-right:6px}
.akm-seen{font-size:11px;color:#6b7280;display:flex;align-items:center;gap:2px}
.akm-seen .tick{color:#1d4ed8;font-size:14px;line-height:1}
.akm-delete-btn{background:rgba(255,0,0,.1);color:#b91c1c;border:1px solid #ef4444;border-radius:8px;padding:4px 10px;cursor:pointer;margin-inline-start:6px}
.akm-delete-btn:hover{background:#ef44441a}
.akm-sound-toggle{background:rgba(0,0,0,.08);color:#000;border:1px solid #e5e7eb;border-radius:8px;padding:4px 10px;cursor:pointer;margin-inline-start:6px}
.akm-sound-toggle.akm-sound-off{opacity:.6;filter:grayscale(1)}


/* === UXPOLISH: Clean Messenger-like Layout (RTL) === */
#akm-chat-corner{width:360px;max-width:95vw;max-height:78vh;bottom:16px;right:16px;left:auto;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 12px 28px rgba(0,0,0,.18)}
#akm-chat-corner *{box-sizing:border-box;}

.akm-corner__head{direction:rtl;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1877f2;color:#fff;padding:10px 12px}
.akm-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.akm-title .akm-online-badge{width:10px;height:10px;background:#22c55e;border-radius:50%}
.akm-actions{display:flex;flex-direction:row;align-items:center;gap:8px}
.akm-actions button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:6px 10px;cursor:pointer;background:rgba(255,255,255,.18);color:#fff}
.akm-actions button:hover{background:rgba(255,255,255,.30)}
.akm-delete-btn{background:rgba(255,0,0,.18)!important}
.akm-delete-btn:hover{background:rgba(255,0,0,.3)!important}

.akm-chat__body{display:flex;flex-direction:column;height:calc(78vh - 52px);background:#f8fafc}
.akm-chat__list{flex:1;overflow-y:auto;padding:12px}
.akm-msg{margin:8px 0;display:flex;flex-direction:column;gap:4px;direction:rtl}
.akm-msg .bubble{display:inline-block;max-width:82%;padding:9px 12px;border-radius:16px;line-height:1.6;word-wrap:break-word;box-shadow:0 1px 1px rgba(0,0,0,.06);font-weight:500}
.akm-msg.me{align-items:flex-end}
.akm-msg.me .bubble{background:#1877f2;color:#fff;border-bottom-right-radius:6px}
.akm-msg.them{align-items:flex-start}
.akm-msg.them .bubble{background:#fff;border:1px solid #e5e7eb;color:#111827;border-bottom-left-radius:6px}
.akm-time,.akm-seen{font-size:11px;color:#6b7280}

.akm-chat__form{direction:rtl;display:flex;gap:8px;align-items:center;padding:10px;background:#fff;border-top:1px solid #e5e7eb}
.akm-chat__form input[type="text"], .akm-chat__form textarea{flex:1;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;outline:none;background:#fff}
.akm-chat__form button[type="submit"]{border:0;background:#1877f2;color:#fff;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer}

@media (max-width:640px){
  #akm-chat-corner{width:96vw;right:2vw;bottom:12px}
  .akm-chat__body{height:calc(80vh - 52px)}
  .akm-msg .bubble{max-width:92%}
}
/* Force readable text */
#akm-chat-corner, #akm-chat-corner *{color:#111 !important}


/* ===== LAYOUTFIX 0818: prevent header overlap and keep footer visible ===== */
#akm-chat-corner{position:fixed; inset:auto 16px 16px auto; width:360px; max-width:95vw; z-index:2147483000;}
.akm-corner__head{position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#1877f2; color:#fff; padding:10px 12px;}
.akm-chat__body{display:flex; flex-direction:column; height:calc(78vh - 52px); background:#f8fafc;}
.akm-chat__list{position:relative; z-index:1; flex:1; overflow-y:auto; padding:12px; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;}
.akm-chat__form{position:sticky; bottom:0; z-index:2; display:flex; gap:8px; align-items:center; padding:10px; background:#fff; border-top:1px solid #e5e7eb;}
.akm-actions{display:flex; align-items:center; gap:8px}
.akm-actions button{display:inline-flex; align-items:center; gap:6px; border:0; border-radius:10px; padding:6px 10px; cursor:pointer; background:rgba(255,255,255,.18); color:#fff}
.akm-actions button:hover{background:rgba(255,255,255,.30)}
.akm-overlay, .akm-chat-corner-overlay{pointer-events:none !important}
#akm-chat-corner .akm-actions, #akm-chat-corner .akm-corner__head{pointer-events:auto !important}
@media (max-width:640px){
  #akm-chat-corner{width:96vw; right:2vw; bottom:12px}
  .akm-chat__body{height:calc(80vh - 52px)}
}


/* ===== SPLITVIEW 0818: side list + main thread ===== */
#akm-chat-corner{width:720px; max-width:96vw;}
#akm-chat-ui{display:grid; grid-template-columns:25% 75%; height:calc(78vh - 0px); direction:rtl; gap:0; height:calc(78vh - 0px); direction:rtl;}
.akm-chat__side{background:#ffffff; border-left:1px solid #e5e7eb; display:flex; flex-direction:column; min-width:0;}
.akm-chat__side .akm-chat__head{position:sticky; top:0; z-index:4; background:#1877f2; color:#fff; padding:10px 12px;}
#akm-chat-list{flex:1; overflow-y:auto; padding:8px; background:#fff;}

.akm-chat__main{display:flex; flex-direction:column; min-width:0; background:#f8fafc;}
.akm-chat__thread{flex:1; overflow-y:auto; padding:12px; position:relative; z-index:1;}
.akm-chat__form{position:sticky; bottom:0; z-index:2; display:flex; gap:8px; align-items:center; padding:10px; background:#fff; border-top:1px solid #e5e7eb;}

@media (max-width: 760px){
  #akm-chat-corner{width:96vw;}
  #akm-chat-ui{display:flex; flex-direction:column;}
  .akm-chat__side{order:1; border-left:0; border-top:1px solid #e5e7eb;}
  .akm-chat__main{order:2;}
  #akm-chat-list, .akm-chat__thread{max-height:unset;}
}


/* ===== MESSENGERSTYLE 0818 ===== */
#akm-chat-corner{
  position:fixed; right:16px; bottom:16px; left:auto;
  width:720px; max-width:96vw; max-height:78vh;
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18); overflow:hidden; z-index:2147483000;
  font-size:13px;
}
#akm-chat-corner *{box-sizing:border-box; color:#111 !important}

#akm-chat-ui{display:grid; grid-template-columns:25% 75%; height:calc(78vh - 0px); direction:rtl; height:calc(78vh - 0px); direction:rtl}
.akm-chat__side{background:#fff; border-left:1px solid #e5e7eb; display:flex; flex-direction:column; min-width:0}
.akm-chat__side .akm-chat__head{position:sticky; top:0; z-index:4; background:#1877f2; color:#fff; padding:8px 10px; font-weight:700; font-size:14px}
#akm-chat-list{flex:1; overflow-y:auto; padding:6px}
#akm-chat-list .conv{display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; cursor:pointer}
#akm-chat-list .conv:hover{background:#f3f4f6}
#akm-chat-list .conv .ava{width:36px; height:36px; border-radius:50%; object-fit:cover; background:#eee}
#akm-chat-list .conv .name{font-weight:600; font-size:13px}
#akm-chat-list .conv .last{font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.akm-chat__main{display:flex; flex-direction:column; min-width:0; background:#f8fafc}
.akm-corner__head{position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#1877f2; color:#fff !important; padding:8px 10px; font-size:14px; font-weight:700}
.akm-title{display:flex; align-items:center; gap:8px}
.akm-online-badge{display:inline-block; width:10px; height:10px; background:#22c55e; border-radius:50%}
.akm-actions{display:flex; align-items:center; gap:6px}
.akm-actions button{display:inline-flex; align-items:center; gap:6px; border:0; border-radius:10px; padding:6px 10px; cursor:pointer; background:rgba(255,255,255,.18); color:#fff !important; font-size:12px}
.akm-actions button:hover{background:rgba(255,255,255,.28)}
.akm-delete-btn{background:rgba(255,0,0,.2) !important}
.akm-delete-btn:hover{background:rgba(255,0,0,.3) !important}
.akm-sound-toggle.akm-sound-off{opacity:.6; filter:grayscale(1)}

.akm-chat__thread{flex:1; overflow-y:auto; padding:10px; position:relative; z-index:1}
.akm-msg{margin:6px 0; display:flex; flex-direction:column; gap:3px}
.akm-msg .bubble{display:inline-block; max-width:82%; padding:6px 10px; border-radius:16px; line-height:1.55; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.akm-msg.me{align-items:flex-end}
.akm-msg.me .bubble{background:#1877f2; color:#fff !important; border-bottom-right-radius:6px}
.akm-msg.them{align-items:flex-start}
.akm-msg.them .bubble{background:#fff; color:#111 !important; border:1px solid #e5e7eb; border-bottom-left-radius:6px}
.akm-time, .akm-seen{font-size:11px; color:#6b7280 !important}

.akm-chat__form{position:sticky; bottom:0; z-index:2; display:flex; gap:8px; align-items:center; padding:8px; background:#fff; border-top:1px solid #e5e7eb}
.akm-chat__form input[type="text"], .akm-chat__form textarea{flex:1; border:1px solid #e5e7eb; border-radius:12px; padding:8px 10px; background:#fff; font-size:13px}
.akm-chat__form button[type="submit"]{border:0; background:#1877f2; color:#fff !important; border-radius:12px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer}

@media (max-width: 760px){
  #akm-chat-corner{inset:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh; border-radius:0; right:0; bottom:0}
  #akm-chat-ui{display:flex; flex-direction:column}
  .akm-chat__side{display:none} /* hide sidebar on mobile for focus */
  .akm-chat__main{flex:1}
  .akm-chat__thread{padding:12px}
}


/* === MESSENGERSTYLE FIX 75/25 === */
#akm-chat-ui{gap:0 !important}
.akm-chat__side{min-width:220px; max-width:360px}
.akm-chat__main{min-width:0}
/* remove any stray margins that create a white gap */
.akm-chat__main, .akm-chat__side{margin:0 !important}
/* smaller, consistent font sizes */
#akm-chat-corner{font-size:13px}
.akm-chat__form input[type="text"], .akm-chat__form textarea{font-size:13px}
.akm-actions button{font-size:12px}
.akm-time, .akm-seen{font-size:11px}