/* ============================================================================
 * FIGEIT My Network — Seller <-> Buyer Chat V1 (Phase B Web UI)
 * Shared, fully NAMESPACED stylesheet for the Buyer Web + Seller Web chat widget.
 *
 * Reskinned to the Founder-approved Claude prototype
 * (seller/figeit-chat-prototype.html): the prototype's LAYOUT, SPACING,
 * TYPOGRAPHY, COLORS, empty/loading/error states and interaction patterns are
 * reproduced here. The prototype's generic class names WILL collide with FIGEIT
 * master CSS, so every selector is prefixed `mnchat-` and the whole widget is
 * scoped under a single root `#mnchat-app`. Role theme variables are scoped to
 * that root (NOT :root/body) via `#mnchat-app[data-role="buyer"|"seller"]`, so
 * nothing leaks into the host page.
 *
 * Buyer theme = BLUE; Seller theme = GOLD / Deep Brown; common Cream tokens.
 * V1 shows ONLY backend-supported states: unread counts + a single read tick
 * (is_read/read_at) + real created_at timestamps. NO delivery receipts, typing,
 * presence or attachments are rendered (those are prototype-only scaffolding).
 * ========================================================================== */

#mnchat-app {
  /* Common palette (Deep Brown / Cream + shared neutrals). */
  --mnchat-gold: #FFBF24;
  --mnchat-blue: #1D4ED8;
  --mnchat-blue-deep: #14357F;
  --mnchat-brown: #6B3F06;
  --mnchat-ink: #2B1B05;
  --mnchat-cream: #FFF8E7;
  --mnchat-cream-2: #F6EFDC;
  --mnchat-white: #FFFFFF;
  --mnchat-line: #E8DFCC;
  --mnchat-border: #EADFC7;
  --mnchat-border-soft: #F2EBDA;
  --mnchat-muted: #7A6A55;
  --mnchat-danger: #C62828;
  --mnchat-radius: 16px;
  --mnchat-shadow: 0 10px 36px rgba(60, 40, 10, .18);
  --mnchat-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

  box-sizing: border-box;
  font-family: var(--mnchat-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--mnchat-ink);
  -webkit-font-smoothing: antialiased;
}

#mnchat-app *,
#mnchat-app *::before,
#mnchat-app *::after { box-sizing: border-box; }
#mnchat-app [hidden] { display: none !important; }

/* ---- Role themes (scoped to the widget root) ------------------------------ */
#mnchat-app[data-role="seller"] {
  --mnchat-brand: var(--mnchat-gold);
  --mnchat-on-brand: var(--mnchat-brown);
  --mnchat-on-brand-muted: rgba(107, 63, 6, .8);
  --mnchat-brand-soft: #FFF1C7;
  --mnchat-brand-deep: var(--mnchat-brown);
  --mnchat-sent-bg: #FFE08A;
  --mnchat-sent-text: #3A2606;
  --mnchat-tick: #9A7A3A;
  --mnchat-tick-read: #1B8F3C;
  --mnchat-badge-bg: var(--mnchat-brown);
  --mnchat-badge-text: var(--mnchat-cream);
  --mnchat-newbtn-bg: var(--mnchat-brown);
  --mnchat-newbtn-text: var(--mnchat-cream);
  --mnchat-avatar-bg: #DBEAFE;   /* counterparty is a Buyer */
  --mnchat-avatar-text: #1D4ED8;
  --mnchat-focus: #B07A00;
  --mnchat-focus-row: #FFF6DA;
}
#mnchat-app[data-role="buyer"] {
  --mnchat-brand: var(--mnchat-blue);
  --mnchat-on-brand: #FFFFFF;
  --mnchat-on-brand-muted: rgba(255, 255, 255, .82);
  --mnchat-brand-soft: #E3ECFF;
  --mnchat-brand-deep: var(--mnchat-blue-deep);
  --mnchat-sent-bg: var(--mnchat-blue);
  --mnchat-sent-text: #FFFFFF;
  --mnchat-tick: rgba(255, 255, 255, .7);
  --mnchat-tick-read: #8FF0FF;
  --mnchat-badge-bg: var(--mnchat-blue);
  --mnchat-badge-text: #FFFFFF;
  --mnchat-newbtn-bg: #FFFFFF;
  --mnchat-newbtn-text: var(--mnchat-blue-deep);
  --mnchat-avatar-bg: #FFF1BF;   /* counterparty is a Seller shop */
  --mnchat-avatar-text: var(--mnchat-brown);
  --mnchat-focus: var(--mnchat-blue);
  --mnchat-focus-row: #EEF3FF;
}

#mnchat-app button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
#mnchat-app input,
#mnchat-app textarea { font: inherit; color: inherit; }
#mnchat-app svg.mnchat-i { width: 22px; height: 22px; fill: currentColor; stroke: none; flex: none; display: block; }
#mnchat-app :focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }
#mnchat-app .mnchat-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- App shell (two-panel desktop; stacked full-screen mobile) ------------ */
#mnchat-app .mnchat-app {
  height: 100%;
  display: flex;
  background: var(--mnchat-white);
  border: 1px solid var(--mnchat-line);
  border-radius: var(--mnchat-radius);
  box-shadow: var(--mnchat-shadow);
  overflow: hidden;
  position: relative;
}

/* LEFT pane holds BOTH the conversation-list view and the new-chat picker view. */
#mnchat-app .mnchat-list-panel {
  flex: 0 0 380px; max-width: 380px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mnchat-white); border-right: 1px solid var(--mnchat-line);
}
#mnchat-app .mnchat-view { display: none; flex-direction: column; min-height: 0; flex: 1; }
#mnchat-app .mnchat-view.mnchat-view-on { display: flex; }

/* ---- Headers -------------------------------------------------------------- */
#mnchat-app .mnchat-hbar { background: var(--mnchat-brand); color: var(--mnchat-on-brand); padding: 14px 14px 12px; flex: none; }
#mnchat-app .mnchat-hrow { display: flex; align-items: center; gap: 10px; }
#mnchat-app .mnchat-hrow .mnchat-grow { flex: 1; min-width: 0; }
#mnchat-app .mnchat-hbar h1,
#mnchat-app .mnchat-hbar h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
#mnchat-app .mnchat-sub { font-size: 12px; color: var(--mnchat-on-brand-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#mnchat-app .mnchat-btn-new {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--mnchat-newbtn-bg); color: var(--mnchat-newbtn-text); font-weight: 700; font-size: 13px; flex: none;
}
#mnchat-app .mnchat-btn-new:hover { filter: brightness(.97); }
#mnchat-app .mnchat-btn-new svg { width: 20px; height: 20px; }

#mnchat-app .mnchat-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: inherit; }
#mnchat-app .mnchat-icon-btn:hover { background: rgba(0, 0, 0, .1); }
#mnchat-app[data-role="buyer"] .mnchat-icon-btn:hover { background: rgba(255, 255, 255, .16); }
#mnchat-app .mnchat-icon-btn svg { width: 24px; height: 24px; }

/* ---- Search --------------------------------------------------------------- */
#mnchat-app .mnchat-search {
  display: flex; align-items: center; gap: 8px; background: var(--mnchat-white); border-radius: 12px;
  padding: 0 12px; margin-top: 12px; height: 42px; color: var(--mnchat-muted); border: 1px solid rgba(0, 0, 0, .06);
}
#mnchat-app .mnchat-search svg { width: 20px; height: 20px; flex: none; }
#mnchat-app .mnchat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; color: var(--mnchat-ink); font-size: 14px; }
#mnchat-app .mnchat-search input::placeholder { color: var(--mnchat-muted); }
#mnchat-app .mnchat-search:focus-within { outline: 3px solid #2563EB; outline-offset: 1px; }
#mnchat-app .mnchat-search-clear { display: none; width: 26px; height: 26px; border-radius: 50%; place-items: center; color: var(--mnchat-muted); }
#mnchat-app .mnchat-search-clear.mnchat-show { display: grid; }
#mnchat-app .mnchat-search-clear svg { width: 16px; height: 16px; }

/* ---- Filter chips (All / Unread) ----------------------------------------- */
#mnchat-app .mnchat-chips { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--mnchat-line); flex: none; background: var(--mnchat-white); }
#mnchat-app .mnchat-chip-f { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--mnchat-line); font-weight: 600; font-size: 13px; color: var(--mnchat-muted); background: var(--mnchat-white); }
#mnchat-app .mnchat-chip-f[aria-pressed="true"] { background: var(--mnchat-brand-soft); border-color: var(--mnchat-brand); color: var(--mnchat-brand-deep); }
#mnchat-app[data-role="seller"] .mnchat-chip-f[aria-pressed="true"] { border-color: #E0A100; }

/* ---- Scroll bodies -------------------------------------------------------- */
#mnchat-app .mnchat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; }

/* ---- Rows (conversations + contacts) -------------------------------------- */
#mnchat-app .mnchat-row {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 11px 14px; border-bottom: 1px solid var(--mnchat-border-soft); background: var(--mnchat-white);
}
#mnchat-app .mnchat-row:hover { background: var(--mnchat-focus-row); }
#mnchat-app .mnchat-row[aria-current="true"] { background: var(--mnchat-brand-soft); }
#mnchat-app .mnchat-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mnchat-avatar-bg); color: var(--mnchat-avatar-text); font-weight: 700; font-size: 16px;
  flex: none; letter-spacing: .02em;
}
#mnchat-app .mnchat-avatar.mnchat-sm { width: 40px; height: 40px; font-size: 14px; }
#mnchat-app .mnchat-rmain { flex: 1; min-width: 0; }
#mnchat-app .mnchat-rtop { display: flex; align-items: baseline; gap: 8px; }
#mnchat-app .mnchat-rname { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#mnchat-app .mnchat-rtime { margin-left: auto; font-size: 11.5px; color: var(--mnchat-muted); flex: none; }
#mnchat-app .mnchat-row.mnchat-unread .mnchat-rtime { color: var(--mnchat-brand-deep); font-weight: 700; }
#mnchat-app[data-role="seller"] .mnchat-row.mnchat-unread .mnchat-rtime { color: var(--mnchat-brown); }
#mnchat-app .mnchat-rbot { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#mnchat-app .mnchat-prev { flex: 1; min-width: 0; color: var(--mnchat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
#mnchat-app .mnchat-prev.mnchat-empty { font-style: italic; }
#mnchat-app .mnchat-row.mnchat-unread .mnchat-prev { color: var(--mnchat-ink); font-weight: 600; }
#mnchat-app .mnchat-rsub { font-size: 12.5px; color: var(--mnchat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* Contact picker rows stack three lines: name / masked number / location. Keep
   each line clipped so a long value never breaks the gold responsive layout. */
#mnchat-app .mnchat-contact .mnchat-rmain { display: block; }
#mnchat-app .mnchat-contact .mnchat-rphone { margin-top: 1px; letter-spacing: .2px; }
#mnchat-app .mnchat-contact .mnchat-rloc { margin-top: 1px; }
#mnchat-app .mnchat-badge {
  min-width: 22px; height: 22px; border-radius: 11px; background: var(--mnchat-badge-bg); color: var(--mnchat-badge-text);
  font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 7px; flex: none;
}

/* ---- Notes / empty / loading / error states ------------------------------- */
#mnchat-app .mnchat-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 28px; gap: 10px; }
#mnchat-app .mnchat-state .mnchat-ill { width: 84px; height: 84px; border-radius: 50%; background: var(--mnchat-brand-soft); display: grid; place-items: center; color: var(--mnchat-brand-deep); margin-bottom: 4px; }
#mnchat-app[data-role="seller"] .mnchat-state .mnchat-ill { color: var(--mnchat-brown); }
#mnchat-app .mnchat-state .mnchat-ill svg { width: 40px; height: 40px; }
#mnchat-app .mnchat-state h3 { margin: 0; font-size: 17px; font-weight: 800; }
#mnchat-app .mnchat-state p { margin: 0; color: var(--mnchat-muted); line-height: 1.5; max-width: 300px; font-size: 13.5px; }
#mnchat-app .mnchat-state.mnchat-err .mnchat-ill { background: #FDE7E7; color: var(--mnchat-danger); }
#mnchat-app .mnchat-start-chat-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; background: var(--mnchat-brand); color: var(--mnchat-on-brand); border: 0; cursor: pointer;
}
#mnchat-app .mnchat-start-chat-btn:hover { filter: brightness(.95); }
#mnchat-app .mnchat-start-chat-btn svg { width: 20px; height: 20px; }

/* skeleton shimmer rows (loading) */
#mnchat-app .mnchat-skrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
#mnchat-app .mnchat-sk { background: linear-gradient(90deg, #F1E9D6 25%, #F9F4E7 37%, #F1E9D6 63%); background-size: 400% 100%; animation: mnchat-sh 1.3s infinite; border-radius: 8px; }
#mnchat-app .mnchat-skrow .mnchat-sk-a { width: 48px; height: 48px; border-radius: 50%; }
#mnchat-app .mnchat-skrow .mnchat-sk-l { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#mnchat-app .mnchat-skrow .mnchat-sk-l i { height: 11px; display: block; }
@keyframes mnchat-sh { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { #mnchat-app .mnchat-sk { animation: none; } }

/* ---- Chat panel (right) --------------------------------------------------- */
#mnchat-app .mnchat-chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--mnchat-cream); }

/* right-pane empty card (desktop "select a chat") */
#mnchat-app .mnchat-rempty {
  flex: 1; display: grid; place-items: center;
  background: var(--mnchat-cream);
  background-image: radial-gradient(rgba(107, 63, 6, .06) 1px, transparent 1.4px); background-size: 18px 18px;
  padding: 24px;
}
#mnchat-app .mnchat-rempty .mnchat-card { background: var(--mnchat-white); border: 1px solid var(--mnchat-line); border-radius: 18px; padding: 26px 28px; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#mnchat-app .mnchat-rempty .mnchat-ill { width: 64px; height: 64px; border-radius: 50%; background: var(--mnchat-brand); color: var(--mnchat-on-brand); display: grid; place-items: center; }
#mnchat-app .mnchat-rempty .mnchat-ill svg { width: 30px; height: 30px; }
#mnchat-app .mnchat-rempty h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; }
#mnchat-app .mnchat-rempty p { margin: 0; color: var(--mnchat-muted); font-size: 13px; line-height: 1.5; }

#mnchat-app .mnchat-conv-view { display: none; flex-direction: column; min-height: 0; flex: 1; }
#mnchat-app .mnchat-conv-view.mnchat-view-on { display: flex; }

/* conversation header */
#mnchat-app .mnchat-chead { background: var(--mnchat-brand); color: var(--mnchat-on-brand); display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 6px; flex: none; min-height: 62px; }
#mnchat-app .mnchat-chead .mnchat-who { flex: 1; min-width: 0; padding-left: 2px; }
#mnchat-app .mnchat-chead .mnchat-nm { display: flex; align-items: center; gap: 8px; }
#mnchat-app .mnchat-chead .mnchat-nm strong { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mnchat-app .mnchat-chead .mnchat-sub { margin-top: 1px; }
#mnchat-app .mnchat-chead .mnchat-avatar.mnchat-sm { background: var(--mnchat-avatar-bg); color: var(--mnchat-avatar-text); }
#mnchat-app .mnchat-head-back { display: none; }

/* relationship pill (counterparty role) */
#mnchat-app .mnchat-pill { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; flex: none; letter-spacing: .02em; line-height: 1.5; }
#mnchat-app .mnchat-pill.mnchat-pill-seller { background: #FFF1C7; color: #6B3F06; border: 1px solid #F3D370; }
#mnchat-app .mnchat-pill.mnchat-pill-buyer { background: #E3ECFF; color: #14357F; border: 1px solid #B9CDFA; }
/* 'Connected' tag for an accepted seller<->buyer relationship in the contact picker */
#mnchat-app .mnchat-pill.mnchat-pill-connected { background: #E6F6EA; color: #1B6B33; border: 1px solid #AEDCBB; }

/* messages */
#mnchat-app .mnchat-messages {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 10px;
  background: var(--mnchat-cream);
  background-image: radial-gradient(rgba(107, 63, 6, .06) 1px, transparent 1.4px); background-size: 18px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
#mnchat-app .mnchat-day { align-self: center; background: var(--mnchat-white); color: var(--mnchat-muted); font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin: 10px 0 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
#mnchat-app .mnchat-day:first-child { margin-top: 0; }
#mnchat-app .mnchat-msg { display: flex; flex-direction: column; max-width: 80%; }
#mnchat-app .mnchat-msg.mnchat-me { align-self: flex-end; align-items: flex-end; }
#mnchat-app .mnchat-msg.mnchat-them { align-self: flex-start; align-items: flex-start; }
#mnchat-app .mnchat-bubble {
  padding: 7px 10px 6px 11px; border-radius: 14px; font-size: 14.5px; line-height: 1.42;
  box-shadow: 0 1px 1.5px rgba(60, 40, 10, .14); word-break: break-word; overflow-wrap: anywhere;
}
#mnchat-app .mnchat-msg.mnchat-them .mnchat-bubble { background: var(--mnchat-white); border-top-left-radius: 4px; }
#mnchat-app .mnchat-msg.mnchat-me .mnchat-bubble { background: var(--mnchat-sent-bg); color: var(--mnchat-sent-text); border-top-right-radius: 4px; }
#mnchat-app .mnchat-bubble p { margin: 0; white-space: pre-wrap; }
#mnchat-app .mnchat-bubble::after { content: ""; display: block; clear: both; }
#mnchat-app .mnchat-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 7px 0 -3px 12px; font-size: 10.5px; color: var(--mnchat-muted); line-height: 1; }
#mnchat-app .mnchat-msg.mnchat-me .mnchat-meta { color: inherit; opacity: .8; }
#mnchat-app .mnchat-meta svg { width: 16px; height: 16px; color: var(--mnchat-tick); }
#mnchat-app .mnchat-meta svg.mnchat-read { color: var(--mnchat-tick-read); }

/* in-thread empty / hint */
#mnchat-app .mnchat-convhint { align-self: center; max-width: 340px; text-align: center; margin: auto; padding: 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#mnchat-app .mnchat-convhint .mnchat-avatar { width: 64px; height: 64px; font-size: 22px; }
#mnchat-app .mnchat-convhint h3 { margin: 0; font-size: 16px; font-weight: 800; }
#mnchat-app .mnchat-convhint p { margin: 0; color: var(--mnchat-muted); font-size: 13px; line-height: 1.5; }

/* composer */
#mnchat-app .mnchat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; background: var(--mnchat-cream-2); border-top: 1px solid var(--mnchat-line); flex: none; }
#mnchat-app .mnchat-composer textarea {
  flex: 1; min-width: 0; resize: none; border: 1px solid var(--mnchat-line); outline: 0; background: var(--mnchat-white);
  border-radius: 22px; padding: 11px 16px; font-size: 15px; line-height: 1.35; max-height: 120px; overflow-y: auto;
}
#mnchat-app .mnchat-composer textarea::placeholder { color: var(--mnchat-muted); }
#mnchat-app .mnchat-composer textarea:focus { outline: 3px solid #2563EB; outline-offset: 0; }
#mnchat-app .mnchat-send { width: 46px; height: 46px; border-radius: 50%; background: var(--mnchat-brand); color: var(--mnchat-on-brand); display: grid; place-items: center; flex: none; transition: filter .15s, opacity .15s; }
#mnchat-app .mnchat-send svg { width: 22px; height: 22px; margin-left: 2px; }
#mnchat-app .mnchat-send:disabled { background: #D9D2C2; color: #8F8571; cursor: not-allowed; }
#mnchat-app .mnchat-cnote { font-size: 11px; color: var(--mnchat-muted); text-align: center; padding: 0 12px 8px; background: var(--mnchat-cream-2); flex: none; }

/* ---- Inline error banner -------------------------------------------------- */
#mnchat-app .mnchat-banner {
  display: none; margin: 10px 14px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: #FDECEC; color: #B91C1C; border: 1px solid #F5C2C2;
}
#mnchat-app .mnchat-banner.mnchat-show { display: block; }

/* ============================================================================
 * DESKTOP (>=769px): fixed two-column layout — list/picker left, conversation
 * right. Both panes always visible; the right pane shows its empty card until a
 * chat is opened. The picker swaps IN PLACE for the list in the left pane.
 * ========================================================================== */
@media (min-width: 769px) {
  #mnchat-app .mnchat-head-back { display: none !important; }
}

/* ============================================================================
 * MOBILE (<=768px): full-screen single-pane flow driven by data-view on the
 * app shell — list  ->  picker  ->  conversation — with working Back navigation
 * (reuses the existing mnchat-chat-open mechanism + per-view Back buttons).
 * ========================================================================== */
@media (max-width: 768px) {
  #mnchat-app .mnchat-app { display: block; }
  #mnchat-app .mnchat-list-panel { flex: none; max-width: none; width: 100%; height: 100%; border-right: 0; position: absolute; inset: 0; z-index: 1; }
  #mnchat-app .mnchat-chat-panel { position: absolute; inset: 0; z-index: 2; visibility: hidden; transform: translateX(28px); opacity: 0; transition: transform .22s ease, opacity .22s ease, visibility .22s; }
  #mnchat-app .mnchat-app.mnchat-chat-open .mnchat-chat-panel { visibility: visible; transform: none; opacity: 1; }
  #mnchat-app .mnchat-head-back { display: grid; }
  #mnchat-app .mnchat-rempty { display: none; }
  #mnchat-app .mnchat-messages { padding: 14px 12px; }
  #mnchat-app .mnchat-msg { max-width: 84%; }
  #mnchat-app .mnchat-composer textarea { font-size: 16px; }
}