/* ===== Malgari theme extras: Pashto font + AfPass button + Nearby hidden ===== */

/* ---------- 1. Fonts ----------
 * After you buy Nassim (web licence), put the .woff2 files in themes/malgari-r/fonts/
 * with these names. Until then the site uses Noto Naskh Arabic (free) automatically.
 */
@font-face {
  font-family: "Nassim";
  src: url("../fonts/Nassim-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nassim";
  src: url("../fonts/Nassim-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --mg-main: #066287;
  --mg-font-ps: "Nassim", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --mg-font-en: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-family: var(--mg-font-en); }

html[dir="rtl"] body,
[dir="rtl"],
.post-text[dir="rtl"],
.mg-rtl {
  font-family: var(--mg-font-ps);
  line-height: 1.85;
}
html[dir="rtl"] body { font-size: 16px; }

/* ---------- 2. Login with AfPass button ---------- */
.mg-afpass-btn {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 46px; margin: 10px 0;
  padding: 8px 16px; border: 1px solid #cfd9de; border-radius: 999px;
  background: #fff; color: #0f1419; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.mg-afpass-btn:hover { background: #f2f8fb; border-color: var(--mg-main); color: #0f1419; text-decoration: none; }
.mg-afpass-btn img { height: 24px; width: auto; display: block; }
.mg-or { display: flex; align-items: center; gap: 10px; color: #536471; font-size: 13px; margin: 14px 0; }
.mg-or::before, .mg-or::after { content: ""; flex: 1; height: 1px; background: #eff3f4; }

/* ---------- 3. Nearby friends: hidden for now (delete this block to bring it back) ---------- */
a[href*="friends-nearby"],
li:has(> a[href*="friends-nearby"]),
.mg-nearby { display: none !important; }

/* ---------- 4. Messages: clean chat list (WhatsApp/Telegram style) ----------
   Uses #users-message twice so it always wins over older theme CSS. */
html body #users-message#users-message .messages-recipients-list {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 10px 12px !important; margin: 0 !important; min-height: 0 !important;
  border: 0 !important; border-bottom: 1px solid #f0f3f4 !important; border-radius: 0 !important;
  background: #fff !important; cursor: pointer; line-height: 1.4 !important;
  transition: background .12s;
}
html body #users-message#users-message .messages-recipients-list:hover { background: #f5f9fa !important; }
html body #users-message#users-message .messages-recipients-list.active { background: #e7f2f6 !important; }

/* avatar */
html body #users-message#users-message .messages-recipients-list .avatar {
  float: none !important; flex: 0 0 48px; width: 48px !important; height: 48px !important;
  margin: 0 !important; position: relative;
}
html body #users-message#users-message .messages-recipients-list .avatar img {
  width: 48px !important; height: 48px !important; border-radius: 50% !important; object-fit: cover;
}

/* text block: [name ........ time] / [last message] */
html body #users-message#users-message .msg_rght_prt {
  flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name time" "msg msg"; column-gap: 8px; row-gap: 2px; align-items: center;
}
html body #users-message#users-message .msg_rght_prt .msg_ava_name { grid-area: name; min-width: 0; display: block !important; margin: 0 !important; }
html body #users-message#users-message .msg_rght_prt .messages-user-name {
  display: block !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 15px !important; font-weight: 600 !important; color: #0f1419 !important; line-height: 1.35 !important;
}
html body #users-message#users-message .msg_rght_prt .messages-last-sent {
  grid-area: time; float: none !important; margin: 0 !important; white-space: nowrap;
  font-size: 12px !important; font-weight: 400 !important; color: #8899a6 !important;
}
html body #users-message#users-message .msg_rght_prt > p {
  grid-area: msg; margin: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13.5px !important; font-weight: 400 !important; color: #536471 !important; line-height: 1.45 !important;
}
html[dir="rtl"] body #users-message#users-message .msg_rght_prt > p { text-align: right; }
html[dir="ltr"] body #users-message#users-message .msg_rght_prt > p { text-align: left; }

/* hide @username and float-clearers (delete the .user_nname line to show usernames again) */
html body #users-message#users-message .msg_rght_prt .user_nname,
html body #users-message#users-message .msg_rght_prt .clear { display: none !important; }

/* unread chat: bold name, darker last message, blue time */
html body #users-message#users-message .messages-recipients-list:has(.new-message-alert:not(.hidden)) .messages-user-name { font-weight: 700 !important; }
html body #users-message#users-message .messages-recipients-list:has(.new-message-alert:not(.hidden)) .msg_rght_prt > p { color: #0f1419 !important; font-weight: 600 !important; }
html body #users-message#users-message .messages-recipients-list:has(.new-message-alert:not(.hidden)) .messages-last-sent { color: var(--mg-main) !important; font-weight: 600 !important; }
html body #users-message#users-message .new-message-alert:not(.hidden) {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--mg-main); border: 2px solid #fff;
}


/* ---------- 5. Messages page: Malgari brand design (#066287) ---------- */
/* chat background: soft brand tint + light Afghan star pattern (under 1 KB, no image download) */
html body #wo_nw_msg_page#wo_nw_msg_page .messagejoint,
html body #wo_nw_msg_page#wo_nw_msg_page .messages-container {
  background-color: #eef5f8 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23066287%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M32%2018l4%2010%2010%204-10%204-4%2010-4-10-10-4%2010-4z%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2216%22%20height%3D%2216%22%20transform%3D%22rotate%2845%2032%2032%29%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%220%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2264%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%225%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 15% 10%, rgba(6,98,135,.10), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(6,98,135,.08), transparent 40%) !important;
  background-size: 64px 64px, 100% 100%, 100% 100% !important;
  background-attachment: local, scroll, scroll !important;
}
html body #wo_nw_msg_page#wo_nw_msg_page .messages-container { background: transparent !important; padding: 12px 14px 18px !important; }

/* bubbles */
html body #wo_nw_msg_page#wo_nw_msg_page .message-model .message {
  border-radius: 18px !important; padding: 8px 13px !important; max-width: 75%;
  font-size: 15px !important; line-height: 1.6 !important; border: 0 !important;
  box-shadow: 0 1px 2px rgba(15,20,25,.08) !important;
}
html body #wo_nw_msg_page#wo_nw_msg_page .incoming .message-model .message {
  background: #ffffff !important; color: #0f1419 !important;
  border-start-start-radius: 6px !important;
}
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .message-model .message {
  background: linear-gradient(135deg, #0a7aa6 0%, #066287 60%, #05506e 100%) !important; color: #fff !important;
  border-start-end-radius: 6px !important;
}
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .message-model .message p,
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .message-model .message a { color: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .message-model .message .hash { text-decoration: underline; }

/* time under bubbles: small and quiet */
html body #wo_nw_msg_page#wo_nw_msg_page .messages-container .time,
html body #wo_nw_msg_page#wo_nw_msg_page .messages-container .message-seen,
html body #wo_nw_msg_page#wo_nw_msg_page .messages-container .messages-time { font-size: 11px !important; color: #7b8d97 !important; font-weight: 400 !important; }

/* ---- voice message: wave style player (green-audio-player) ---- */
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player {
  width: 250px !important; min-width: 0 !important; max-width: 100%;
  background: transparent !important; box-shadow: none !important; padding: 2px 0 !important;
  display: flex !important; align-items: center !important; gap: 10px; direction: ltr;
}
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .play-pause-btn {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  background: #066287; cursor: pointer;
}
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .play-pause-btn svg { width: 14px; height: 16px; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .play-pause-btn svg path { fill: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .green-audio-player .play-pause-btn { background: #fff; }
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .green-audio-player .play-pause-btn svg path { fill: #066287 !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .controls {
  flex: 1 1 auto; display: flex !important; align-items: center; gap: 8px; margin: 0 !important;
  font-size: 11px !important; color: inherit !important;
}
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .controls span { font-size: 11px !important; opacity: .85; min-width: 30px; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .controls__current-time { display: none !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .slider {
  flex: 1 1 auto; height: 28px !important; margin: 0 !important; border-radius: 0 !important;
  background: rgba(6,98,135,.25) !important; cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%2228%22%3E%3Crect%20x%3D%220%22%20y%3D%222.0%22%20width%3D%222.4%22%20height%3D%2224%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%224%22%20y%3D%228.0%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%228%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2220%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2224%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2228%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2232%22%20y%3D%222.0%22%20width%3D%222.4%22%20height%3D%2224%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2236%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2244%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2248%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2256%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2260%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2264%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2268%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2272%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2276%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2280%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2284%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2288%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2292%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2296%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22100%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22112%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22120%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22124%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22128%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22136%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22144%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22148%22%20y%3D%228.0%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22152%22%20y%3D%224.0%22%20width%3D%222.4%22%20height%3D%2220%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22156%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3C/svg%3E") left center / auto 28px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%2228%22%3E%3Crect%20x%3D%220%22%20y%3D%222.0%22%20width%3D%222.4%22%20height%3D%2224%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%224%22%20y%3D%228.0%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%228%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2220%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2224%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2228%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2232%22%20y%3D%222.0%22%20width%3D%222.4%22%20height%3D%2224%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2236%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2244%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2248%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2252%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2256%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2260%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2264%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2268%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2272%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2276%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2280%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2284%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2288%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2292%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%2296%22%20y%3D%229.5%22%20width%3D%222.4%22%20height%3D%229%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22100%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2210.0%22%20width%3D%222.4%22%20height%3D%228%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22112%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22116%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22120%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22124%22%20y%3D%223.0%22%20width%3D%222.4%22%20height%3D%2222%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22128%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22136%22%20y%3D%226.0%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2211.0%22%20width%3D%222.4%22%20height%3D%226%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22144%22%20y%3D%225.0%22%20width%3D%222.4%22%20height%3D%2218%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22148%22%20y%3D%228.0%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22152%22%20y%3D%224.0%22%20width%3D%222.4%22%20height%3D%2220%22%20rx%3D%221.2%22/%3E%3Crect%20x%3D%22156%22%20y%3D%227.0%22%20width%3D%222.4%22%20height%3D%2214%22%20rx%3D%221.2%22/%3E%3C/svg%3E") left center / auto 28px repeat-x;
}
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .slider .gap-progress { height: 100% !important; background: #066287 !important; border-radius: 0 !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .slider .gap-progress .pin { display: none !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .green-audio-player .slider { background: rgba(255,255,255,.4) !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing .green-audio-player .slider .gap-progress { background: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .volume,
html body #wo_nw_msg_page#wo_nw_msg_page .green-audio-player .download { display: none !important; }

/* ---- composer ---- */
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages { position: relative; background: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #sendMessage { border-radius: 22px !important; background: #f2f6f8 !important; border: 1px solid transparent !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #sendMessage:focus { border-color: rgba(6,98,135,.35) !important; background: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages .send-button { background: #066287 !important; border-color: #066287 !important; color: #fff !important; border-radius: 50% !important; }

/* ---- recording bar (shown by malgari.js while recording) ---- */
.mg-recbar {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #fff; border-radius: 16px; direction: ltr;
  box-shadow: 0 -2px 12px rgba(6,98,135,.10); animation: mgRecIn .18s ease-out;
}
@keyframes mgRecIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mg-recbar button {
  flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.mg-recbar .mg-rec-cancel { background: #fdeeee; color: #d13b3b; }
.mg-recbar .mg-rec-cancel:hover { background: #f9dcdc; }
.mg-recbar .mg-rec-send { background: #066287; color: #fff; box-shadow: 0 3px 10px rgba(6,98,135,.35); }
.mg-recbar .mg-rec-send:hover { background: #05506e; }
.mg-recbar .mg-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0245e; animation: mgBlink 1s infinite; }
@keyframes mgBlink { 50% { opacity: .25; } }
.mg-recbar .mg-rec-time { font: 600 14px/1 system-ui, sans-serif; color: #0f1419; min-width: 38px; font-variant-numeric: tabular-nums; }
.mg-recbar .mg-rec-wave { flex: 1 1 auto; min-width: 60px; height: 36px; }
form.sendMessages.mg-recording .send-button { visibility: hidden; }

/* ---------- 6. Message ticks (added by malgari.js) ---------- */
html body #wo_nw_msg_page#wo_nw_msg_page .outgoing time { display: inline-flex !important; align-items: center; gap: 3px; }
.mg-tick { display: inline-flex; vertical-align: middle; line-height: 0; }
.mg-tick.mg-sent { color: #8899a6; }
.mg-tick.mg-read { color: #066287; }
html body #wo_nw_msg_page#wo_nw_msg_page .message-seen { display: none !important; }   /* old "Seen (time)" text */

/* ---------- 7. Mic button: one clear style (white mic on #066287) ---------- */
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #messages-record {
  background: #066287 !important; border-radius: 50% !important; border: 0 !important;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 3px 10px rgba(6,98,135,.30) !important; cursor: pointer;
}
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #messages-record svg { width: 22px !important; height: 22px !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #messages-record svg path { fill: #fff !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #messages-record:hover { background: #05506e !important; }
html body #wo_nw_msg_page#wo_nw_msg_page form.sendMessages #messages-record[data-record="1"] { background: #e0245e !important; }


/* ---------- 8. Login page: light Malgari design (classes added by malgari.js) ---------- */
html.mg-login-page body {
  background-color: #f3f8fa !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23066287%22%20stroke-opacity%3D%22.06%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M32%2018l4%2010%2010%204-10%204-4%2010-4-10-10-4%2010-4z%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2216%22%20height%3D%2216%22%20transform%3D%22rotate%2845%2032%2032%29%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 0% 0%, rgba(6,98,135,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(10,122,166,.10), transparent 60%) !important;
  background-size: 64px 64px, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
}

/* left side: clean brand hero, no blurry box */
html.mg-login-page .mg-login-hero {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.mg-login-page .mg-login-hero::before, html.mg-login-page .mg-login-hero::after { display: none !important; }
html.mg-login-page .mg-login-hero img { max-height: 64px; width: auto; }
html.mg-login-page .mg-login-title {
  font-size: clamp(32px, 4vw, 52px) !important; line-height: 1.12 !important; font-weight: 800 !important;
  letter-spacing: -0.02em; color: #0f1419 !important; margin: 18px 0 14px !important;
}
html.mg-login-page .mg-login-title * { color: inherit; }
html.mg-login-page .mg-login-title > :first-child, html.mg-login-page .mg-login-title span:first-child {
  background: linear-gradient(120deg, #0a7aa6, #066287 55%, #04435d); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.mg-login-page .mg-login-hero p { font-size: 17px !important; line-height: 1.7 !important; color: #536471 !important; max-width: 440px; }

/* right side: the card */
html.mg-login-page .mg-login-card {
  background: rgba(255,255,255,.92) !important; border: 1px solid rgba(6,98,135,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 18px 50px -12px rgba(6,98,135,.18) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html.mg-login-page .mg-login-card h1, html.mg-login-page .mg-login-card h2, html.mg-login-page .mg-login-card h3 { font-weight: 800 !important; color: #0f1419 !important; letter-spacing: -0.01em; }
html.mg-login-page .mg-login-card a { color: #066287 !important; }
html.mg-login-page .mg-login-card label { font-size: 13.5px !important; font-weight: 600 !important; color: #3d4c55 !important; margin-bottom: 6px !important; }

/* inputs */
html.mg-login-page .mg-login-form input[type="text"], html.mg-login-page .mg-login-form input[type="email"], html.mg-login-page .mg-login-form input[type="password"] {
  height: 50px !important; border-radius: 14px !important; padding: 0 16px !important; font-size: 15px !important;
  background: #f6f9fb !important; border: 1px solid #e1e9ee !important; box-shadow: none !important; color: #0f1419 !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
html.mg-login-page .mg-login-form input[type="text"]:focus, html.mg-login-page .mg-login-form input[type="email"]:focus, html.mg-login-page .mg-login-form input[type="password"]:focus {
  background: #fff !important; border-color: #066287 !important; box-shadow: 0 0 0 4px rgba(6,98,135,.12) !important; outline: 0 !important;
}
html.mg-login-page .mg-login-form input[type="checkbox"] { accent-color: #066287; }

/* Sign In */
html.mg-login-page .mg-login-form button[type="submit"], html.mg-login-page .mg-login-form input[type="submit"] {
  height: 52px !important; border-radius: 14px !important; border: 0 !important; width: 100%;
  background: linear-gradient(135deg, #0a7aa6 0%, #066287 55%, #05506e 100%) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: .01em;
  box-shadow: 0 8px 20px -6px rgba(6,98,135,.55) !important; transition: transform .12s, box-shadow .12s;
}
html.mg-login-page .mg-login-form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(6,98,135,.6) !important; }

/* AfPass */
html.mg-login-page .mg-afpass-wrap { margin: 6px 0 4px; }
html.mg-login-page .mg-afpass-wrap .mg-or { margin: 16px 0 !important; }
html.mg-login-page .mg-afpass-btn {
  box-sizing: border-box !important; width: 100% !important;
  height: 52px !important; min-height: 52px; border-radius: 14px !important; margin: 0 !important;
  background: #fff !important; border: 1.5px solid #cfe0e8 !important; color: #0f1419 !important;
  font-size: 15.5px !important; font-weight: 700 !important; gap: 12px !important;
}
html.mg-login-page .mg-afpass-btn:hover { border-color: #066287 !important; background: #f2f8fb !important; color: #0f1419 !important; }
html.mg-login-page .mg-afpass-btn img { height: 38px !important; width: auto !important; }
html.mg-login-page .mg-afpass-btn span { color: #0f1419 !important; }

@media (max-width: 991px) {
  html.mg-login-page .mg-login-title { font-size: 32px !important; }
  html.mg-login-page .mg-login-card { border-radius: 20px !important; }
}