/* ═══════════════════════════════════════════════════════
   BEYOU WHATSAPP PRO — REDESIGN v2.0
   Messenger-style · Mobile-first · Fluid animations
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Palette */
  --c-bg:        #F0F2F5;
  --c-surface:   #FFFFFF;
  --c-surface2:  #F7F8FA;
  --c-border:    #E4E6EB;
  --c-ink:       #050505;
  --c-ink2:      #65676B;
  --c-ink3:      #A8ABAF;

  /* Brand / Actions */
  --c-primary:   #0084FF;
  --c-primary2:  #006ACC;
  --c-green:     #31A24C;
  --c-red:       #E41E3F;
  --c-orange:    #F7951D;

  /* Messenger bubbles */
  --bubble-in:   #E4E6EB;
  --bubble-out:  linear-gradient(135deg, #0084FF, #0066CC);
  --bubble-in-txt: #050505;
  --bubble-out-txt: #FFFFFF;

  /* Sidebar */
  --sidebar-bg:  #18191A;
  --sidebar-w:   260px;

  /* Elevation */
  --shadow-xs:   0 1px 3px rgba(0,0,0,.10);
  --shadow-sm:   0 4px 16px rgba(0,0,0,.10);
  --shadow-md:   0 8px 32px rgba(0,0,0,.14);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.18);

  /* Radii */
  --r-xs:  6px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-full: 999px;

  /* Motion */
  --ease-spring: cubic-bezier(.34,1.46,.64,1);
  --ease-out:    cubic-bezier(.25,.46,.45,.94);
  --ease-in:     cubic-bezier(.55,.085,.68,.53);
  --t-fast:      120ms;
  --t-mid:       220ms;
  --t-slow:      380ms;

  /* Font */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── RESET & BASE ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: none; color: var(--c-primary2); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
form { margin: 0; }

.muted { color: var(--c-ink2); }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--c-ink3); }

/* ── APP SHELL ───────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 16px;
  box-shadow: 4px 0 24px rgba(0,0,0,.2);
  z-index: 30;
  overflow-y: auto;
  overflow-x: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.brand img {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.1);
  object-fit: cover;
  flex-shrink: 0;
}
.brand strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.brand span   { display: block; color: #8A8D91; font-size: 11.5px; margin-top: 1px; }

/* Nav items */
.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  color: #B0B3B8;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--t-fast) var(--ease-out);
}
.nav a:hover { color: #fff; transform: translateX(3px); background: rgba(255,255,255,.07); }
.nav a:hover::before { opacity: .08; }
.nav a.active {
  background: rgba(0,132,255,.22);
  color: #fff;
  font-weight: 700;
}
.nav a.active::before { opacity: .15; }

.badge {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--c-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  animation: badge-pop .3s var(--ease-spring);
}
@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(0,132,255,.35);
  background: rgba(0,132,255,.12);
  color: #6CB9FF;
  border-radius: var(--r-full);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.sidebar .tag { background: rgba(255,255,255,.09); color: #B0B3B8; border-color: rgba(255,255,255,.14); }

.logout {
  margin-top: auto;
  color: #8A8D91;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.logout:hover { background: rgba(228,30,63,.15); color: #FF6B81; }

/* ── MOBILE TOPBAR ───────────────────────────────────── */
.mobile-top {
  display: none;
  position: sticky;
  top: 0;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--c-border);
  z-index: 60;
}
.mobile-top button {
  width: 38px; height: 38px;
  border: 0;
  background: var(--sidebar-bg);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}
.mobile-top button:active { transform: scale(.92); }

/* ── MAIN CONTENT ────────────────────────────────────── */
.main {
  min-width: 0;
  padding: 28px 26px 60px;
  animation: page-in var(--t-slow) var(--ease-out) both;
}
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-title h1 { margin: 0 0 4px; font-size: 32px; line-height: 1.1; letter-spacing: -.04em; font-weight: 800; }
.page-title p  { margin: 0; color: var(--c-ink2); font-size: 15px; }

/* ── CARDS ───────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 22px;
  margin-bottom: 16px;
  transition: box-shadow var(--t-mid) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card h2 { margin: 0 0 16px; font-size: 22px; letter-spacing: -.03em; font-weight: 800; }
.card h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.02em; font-weight: 800; }

/* ── NOTICE ──────────────────────────────────────────── */
.notice {
  padding: 13px 16px;
  border-radius: var(--r-md);
  margin: 0 0 14px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-weight: 600;
  animation: slide-down .25s var(--ease-out) both;
}
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notice.success { background: #F0FBF4; border-color: #A3D9B1; color: #1A7F37; }
.notice.error   { background: #FFF0F2; border-color: #FFC1CB; color: #C0143C; }
.notice.info    { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }

/* ── STATS GRID ──────────────────────────────────────── */
.stats, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 10px 0 20px;
}
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid);
  animation: stat-in .4s var(--ease-spring) both;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
@keyframes stat-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.stat:nth-child(1) { animation-delay: 0ms; }
.stat:nth-child(2) { animation-delay: 60ms; }
.stat:nth-child(3) { animation-delay: 120ms; }
.stat:nth-child(4) { animation-delay: 180ms; }
.stat span   { display: block; color: var(--c-ink2); font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.stat strong { font-size: 30px; letter-spacing: -.05em; font-weight: 800; }

/* ── ACTION GRID ─────────────────────────────────────── */
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(160px,1fr)); gap: 12px; }
.action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-weight: 700;
  color: var(--c-ink);
  transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid), border-color var(--t-fast);
}
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.action-card span { font-weight: 500; color: var(--c-ink2); font-size: 12.5px; }

/* ── GRID LAYOUTS ────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.two   { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── FORM ELEMENTS ───────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; color: #333; font-weight: 700; font-size: 14px; }
.field small { font-weight: 500; color: var(--c-ink2); }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  padding: 10px 13px;
  color: var(--c-ink);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(0,132,255,.14);
  background: #FAFCFF;
}
input[type=checkbox] { width: 18px; min-height: 18px; accent-color: var(--c-primary); margin-right: 6px; }
label:has(input[type=checkbox]) { display: flex !important; align-items: center !important; gap: 8px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn, button[type=submit], input[type=submit], .btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-fast),
              background var(--t-fast),
              border-color var(--t-fast);
}
.btn:hover, button[type=submit]:hover, input[type=submit]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn:active, button[type=submit]:active { transform: scale(.97); }
.btn.primary, button[type=submit], input[type=submit] {
  background: var(--c-primary);
  border-color: var(--c-primary2);
  color: #fff;
}
.btn.primary:hover, button[type=submit]:hover { background: var(--c-primary2); }
.btn.danger  { border-color: #FFC1CB; color: var(--c-red); }
.btn.danger:hover { background: #FFF0F2; }
.btn.ghost   { background: var(--c-bg); }
.btn.small   { min-height: 34px; padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn.mini    { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: var(--r-xs); }

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.divider { height: 1px; background: var(--c-border); margin: 18px 0; }

/* ── TABLES ──────────────────────────────────────────── */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.table, .data-table, table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 14px; border-bottom: 1px solid #F0F2F5; text-align: left; vertical-align: middle; }
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ink2);
  background: var(--c-bg);
  font-weight: 800;
}
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: #F7F9FF; }

/* ── STATUS PILLS ────────────────────────────────────── */
.status, .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-full);
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  background: #EEF2FF;
  color: #3730A3;
}
.status.sent, .status.completed { background: #F0FBF4; color: #1A7F37; }
.status.failed  { background: #FFF0F2; color: #C0143C; }
.status.pending { background: #EFF6FF; color: #1D4ED8; }
.status.unread  { background: #DBEAFE; color: #1D4ED8; }
.status.stop    { background: #FFF1F2; color: #BE123C; }
.icon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); display: inline-block; }

/* ── CHIPS ───────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: #EFF6FF;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 700;
}
.chip.soft    { background: #EFF6FF; color: #1E40AF; }
.chip.success { background: #ECFDF5; color: #166534; }
.chip.danger  { background: #FEF2F2; color: #991B1B; }
.chip.info    { background: #F1F5F9; color: #334155; }

/* ═══════════════════════════════════════════════════════
   INBOX — MESSENGER STYLE
   ═══════════════════════════════════════════════════════ */

.inbox-shell {
  display: grid;
  grid-template-columns: 340px minmax(0,1fr) 300px;
  gap: 0;
  height: calc(100vh - 56px);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}

/* Also support .pro variant */
.inbox-shell.pro { grid-template-columns: 340px minmax(0,1fr) 300px; gap: 0; align-items: stretch; }

/* ── CONVERSATION LIST ───────────────────────────────── */
.conversation-list, .fixed-panel.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.conversation-head, .list-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c-surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.conversation-head h2, .list-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.conversation-tools, .searchbox { padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.advanced-search input { height: 40px; border-radius: var(--r-full); padding: 0 16px; background: var(--c-bg); border-color: var(--c-bg); font-size: 13.5px; }
.advanced-search input:focus { border-color: var(--c-primary); background: var(--c-surface); }

.search-filters, .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.filter-pill, .filter-pills a {
  min-height: 30px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: #333;
  padding: 5px 11px;
  font-weight: 700;
  font-size: 12px;
  transition: all var(--t-fast);
  cursor: pointer;
}
.filter-pill.active, .filter-pill:hover,
.filter-pills a.active, .filter-pills a:hover {
  background: #E8F3FF;
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ── CONVERSATION ITEMS ──────────────────────────────── */
.conversation-scroll, .conv-list-wrap {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}

.conversation-item, .conv.modern {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--r-md);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring);
  border: 1.5px solid transparent;
  margin-bottom: 2px;
  animation: conv-in .3s var(--ease-out) both;
}
@keyframes conv-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.conversation-item:hover, .conv.modern:hover { background: var(--c-bg); }
.conversation-item.active, .conv.modern.active {
  background: #E8F3FF;
  border-color: rgba(0,132,255,.25);
}

/* ── AVATAR ──────────────────────────────────────────── */
.avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A5C8FF, #7B9AFF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D4ED8;
  font-weight: 800;
  font-size: 17px;
  position: relative;
  flex: none;
  transition: transform var(--t-fast) var(--ease-spring);
}
.avatar:hover { transform: scale(1.06); }
.avatar.large  { width: 46px; height: 46px; border-radius: 50%; }
.avatar.xlarge { width: 70px; height: 70px; border-radius: 50%; font-size: 24px; }

/* Online dot */
.avatar.online::after,
.status-online::after {
  content: '';
  position: absolute;
  right: 1px; bottom: 1px;
  width: 12px; height: 12px;
  background: var(--c-green);
  border: 2.5px solid var(--c-surface);
  border-radius: 50%;
}

.conversation-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.conversation-meta, .conversation-preview, .conv-main span, .conv-main em {
  font-size: 12.5px;
  color: var(--c-ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-main em { font-style: normal; margin-top: 2px; }
.conversation-time, .conv-meta small { font-size: 11px; color: var(--c-ink3); }

.conv-topline { display: flex; gap: 6px; align-items: center; min-width: 0; }
.conv-topline strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 700; }
.conv-meta { text-align: right; display: grid; gap: 5px; justify-items: end; }
.conv-meta b {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  animation: badge-pop .25s var(--ease-spring);
}
.tiny-state { display: inline-flex; border-radius: var(--r-full); padding: 2px 7px; font-size: 10px; font-weight: 800; }
.tiny-state.unread { background: #DBEAFE; color: #1D4ED8; }
.tiny-state.read   { background: #F1F5F9; color: #475569; }
.tiny-state.stop   { background: #FFE4E6; color: #BE123C; }

/* ═══════════════════════════════════════════════════════
   MESSENGER CHAT PANEL
   ═══════════════════════════════════════════════════════ */

.chat-panel, .messenger-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #E9ECF0;
  position: relative;
}

/* Chat wallpaper pattern */
.chat-panel::before, .messenger-panel::before,
.messenger-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(0,0,0,.04) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Chat header */
.chat-head, .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid var(--c-border);
  position: relative;
  z-index: 2;
}
.chat-head h2, .chat-left h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.chat-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-left p { margin: 1px 0 0; color: var(--c-ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-summary { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--c-border); background: rgba(255,255,255,.8); position: relative; z-index: 1; }

/* ── MESSAGE AREA ────────────────────────────────────── */
.message-area, .bubble-area {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  scroll-behavior: smooth;
  z-index: 1;
}

.message-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }

/* ── MESSAGES ────────────────────────────────────────── */
.msg-row, .msg {
  display: flex;
  flex-direction: column;
  margin: 2px 0;
}
.msg-row { flex-direction: row; gap: 8px; }
.msg-row.inbound, .msg.in { align-items: flex-start; }
.msg-row.outbound, .msg.out { align-items: flex-end; }

/* Bubble */
.bubble {
  max-width: min(72%, 680px);
  padding: 10px 14px;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.5;
  position: relative;
  animation: bubble-in .25s var(--ease-spring) both;
  transition: transform var(--t-fast);
}
@keyframes bubble-in {
  from { opacity: 0; transform: scale(.9) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bubble:active { transform: scale(.98); }

/* Inbound */
.msg-row.inbound .bubble,
.msg.in .bubble {
  background: var(--c-surface);
  color: var(--c-ink);
  border-bottom-left-radius: 6px;
}

/* Outbound */
.msg-row.outbound .bubble,
.msg.out .bubble {
  background: var(--c-primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.msg-label, .sender-line {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink2);
  margin: 0 4px 3px;
  max-width: min(76%,760px);
}
.msg.out .sender-line { flex-direction: row-reverse; }

.msg-time, .delivery-dot {
  display: block;
  text-align: right;
  font-size: 10.5px;
  margin-top: 4px;
  opacity: .65;
}

.media-thumb {
  max-width: 240px;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,.08);
  display: block;
  margin-top: 6px;
}

/* Reactions */
.reaction-bubble { display: flex !important; align-items: center; gap: 8px; }
.emoji { font-size: 26px; line-height: 1; }
.reaction-text { display: grid; }
.reaction-text small { color: var(--c-ink2); }
.msg.out .reaction-text small { color: rgba(255,255,255,.75); }

/* ── COMPOSER (Messenger style) ──────────────────────── */
.composer, .replybar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--c-border);
  position: relative;
  z-index: 2;
}
.composer { grid-template-columns: 1fr auto; }
.composer .media-line { grid-column: 1/-1; display: flex; gap: 8px; align-items: center; }

.composer textarea,
.replybar textarea {
  min-height: 42px;
  max-height: 140px;
  border-radius: var(--r-full);
  padding: 10px 16px;
  background: var(--c-bg);
  border-color: transparent;
  font-size: 14.5px;
  resize: none;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.composer textarea:focus, .replybar textarea:focus {
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(0,132,255,.12);
}

.composer-tools { display: flex; gap: 6px; align-items: center; }
.composer-main  { display: grid; gap: 6px; }
.composer-main textarea { border-radius: var(--r-full); }
.media-url-field { min-height: 36px; font-size: 13px; }

/* Tool buttons */
.tool-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-border);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring), border-color var(--t-fast);
  color: var(--c-ink2);
}
.tool-btn:hover { background: #E8F3FF; border-color: var(--c-primary); color: var(--c-primary); transform: scale(1.06); }
.tool-btn input { display: none; }
.composer-tools select { width: 90px; min-height: 40px; padding: 8px; border-radius: var(--r-sm); font-size: 13px; }

/* Send button */
.send-fab {
  height: 44px;
  min-width: 44px;
  width: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,132,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast), background var(--t-fast);
}
.send-fab:hover  { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,132,255,.5); background: var(--c-primary2); }
.send-fab:active { transform: scale(.95); }

.media-preview-mini {
  padding: 8px 12px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  color: #334155;
  font-size: 13px;
  animation: slide-down .2s var(--ease-out);
}

/* ── BACK BUTTON (mobile) ────────────────────────────── */
.back-list {
  display: none;
  border: 0;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  font-size: 20px;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.back-list:hover { background: #E8F3FF; transform: translateX(-2px); }

/* ── CONTACT PANEL ───────────────────────────────────── */
.contact-panel, .contact-panel.card {
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  padding: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto;
}

.contact-head, .contact-head.list-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.contact-head h3 { margin: 0; font-size: 17px; font-weight: 800; }

.contact-card-main {
  text-align: center;
  padding: 24px 16px;
  display: grid;
  gap: 6px;
  justify-items: center;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-surface) 100%);
}
.contact-card-main strong { font-size: 20px; font-weight: 800; }
.contact-card-main span  { color: var(--c-ink2); font-size: 13px; }
.contact-card-main .avatar { width: 72px; height: 72px; font-size: 26px; margin-bottom: 4px; }

.contact-statuses, .contact-stats-grid, .contact-block { padding: 0 14px 14px; }

.status-pill {
  display: inline-flex;
  margin: 0 5px 5px 0;
  border-radius: var(--r-full);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}
.status-pill.success { background: #ECFDF5; color: #166534; }
.status-pill.danger  { background: #FEF2F2; color: #991B1B; }
.status-pill.info    { background: #EFF6FF; color: #1E40AF; }

.contact-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.contact-stats-grid div {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  transition: transform var(--t-fast) var(--ease-spring);
}
.contact-stats-grid div:hover { transform: scale(1.03); }
.contact-stats-grid small  { display: block; color: var(--c-ink2); font-size: 10.5px; font-weight: 600; }
.contact-stats-grid strong { font-size: 22px; font-weight: 800; }

.contact-block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--c-ink2); text-transform: uppercase; letter-spacing: .04em; }

.info-list { display: grid; }
.info-list div { padding: 9px 0; border-bottom: 1px solid var(--c-border); }
.info-list span  { display: block; color: var(--c-ink2); font-size: 11.5px; font-weight: 600; }
.info-list strong { display: block; font-size: 13px; overflow-wrap: anywhere; font-weight: 600; }

.column-actions, .column-actions form { display: grid; gap: 8px; }
.column-actions .btn { width: 100%; }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state, .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--c-ink2);
  padding: 32px;
  gap: 8px;
}
.empty-state.big { min-height: 400px; }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 8px; }

/* ── FORMS: section / grid ───────────────────────────── */
.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.section-title h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: #334155; font-size: 13.5px; }
.form-grid label input, .form-grid label select, .form-grid label textarea { margin-top: 0; }
.form-grid label:has(input[type=checkbox]) { grid-column: 1/-1; flex-direction: row !important; }
.form-grid .primary { justify-self: start; }
.card .form-grid button { margin-top: 2px; }
.section-title + .form-grid { margin-top: 8px; }

/* ── SETTINGS / MISC ─────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.settings-grid textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.webhook-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px; }
.mini-help { font-size: 13px; color: var(--c-ink2); margin-top: 4px; }

/* ── TOAST ───────────────────────────────────────────── */
.toast-zone { position: fixed; bottom: 24px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--c-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: toast-in .25s var(--ease-spring);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(.9); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* ── SOUND TOGGLE ────────────────────────────────────── */
.sound-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  font-size: 17px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
.sound-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }

/* ── NOTIFICATION PULSE ──────────────────────────────── */
@keyframes pulse-ring {
  0%  { box-shadow: 0 0 0 0 rgba(0,132,255,.5); }
  70% { box-shadow: 0 0 0 16px rgba(0,132,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,132,255,0); }
}
body.notification-pulse .mobile-top {
  animation: pulse-ring .8s ease-out;
}

/* ── MISC COMPATIBILITY ──────────────────────────────── */
.small { font-size: 13px; }
.only-mobile { display: none !important; }
.desktop-only { display: block; }
.mobile-only  { display: none; }

.campaign-form { display: grid; gap: 16px; }
.campaign-table-actions { display: flex; gap: 8px; justify-content: flex-end; }
.small-panel { padding: 28px; }
.messenger-actions form { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── TYPING INDICATOR ────────────────────────────────── */
.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  animation: bubble-in .25s var(--ease-spring);
}
.typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-ink3);
  animation: typing-bounce 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 1180px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .inbox-shell, .inbox-shell.pro { grid-template-columns: 320px minmax(0,1fr); }
  .inbox-shell .contact-panel,
  .inbox-shell.pro .contact-panel { display: none; }
  .stats, .kpi-grid, .action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 860px (MOBILE)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root { --sidebar-w: 280px; }

  body { background: var(--c-bg); }

  .mobile-top { display: flex; }
  .app-shell  { display: block; }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-110%);
    transition: transform var(--t-mid) var(--ease-out),
                box-shadow var(--t-mid);
    z-index: 80;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  /* Overlay when sidebar open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 79;
    animation: fade-in var(--t-fast) ease;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .sidebar.open ~ .sidebar-overlay { display: block; }

  .main { padding: 12px 10px 80px; }

  .page-title { margin: 8px 2px 16px; display: block; }
  .page-title h1 { font-size: 26px; }
  .page-title p  { font-size: 14px; }
  .page-title > .tag-row { margin-top: 10px; }

  .card { border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; }

  .grid.two, .grid.three, .settings-grid, .webhook-box,
  .stats, .kpi-grid, .action-grid { grid-template-columns: 1fr; }

  /* Inbox mobile */
  .inbox-shell, .inbox-shell.pro {
    display: block;
    height: auto;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }

  .conversation-list, .fixed-panel.card {
    border-radius: var(--r-md) !important;
    margin-bottom: 10px !important;
  }
  .conversation-scroll, .conv-list-wrap { max-height: 60vh; }

  /* Chat panel: full screen slide-in */
  .chat-panel, .messenger-panel {
    position: fixed;
    inset: 56px 0 0 0;
    border-radius: 0 !important;
    border: 0 !important;
    z-index: 70;
    transform: translateX(105%);
    transition: transform var(--t-mid) var(--ease-out);
    box-shadow: none;
  }
  .chat-panel.open, .chat-panel.mobile-chat-open,
  .messenger-panel.mobile-chat-open,
  .inbox-shell.thread-open .messenger-panel { transform: translateX(0); }

  .chat-head { padding: 10px 12px; }
  .chat-left h2 { font-size: 17px; }
  .chat-left p  { max-width: 160px; font-size: 12px; }
  .avatar.large { width: 40px; height: 40px; }
  .messenger-actions form { display: none; }
  .chat-summary { padding: 8px 10px; }

  .message-area, .bubble-area {
    height: calc(100vh - 56px - 56px - 42px);
    padding: 12px 10px;
  }
  .bubble, .msg .bubble, .sender-line { max-width: 88%; }
  .bubble { font-size: 14px; }

  .replybar {
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: 8px 10px;
    gap: 7px;
  }
  .composer-tools select, .media-url-field { display: none; }
  .send-fab { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
  .tool-btn  { width: 38px; height: 38px; }

  .back-list { display: inline-flex; }

  .contact-panel.fixed-panel {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 75;
    border-radius: 0 !important;
    transform: translateX(105%);
    transition: transform var(--t-mid) var(--ease-out);
    overflow: auto;
  }
  .contact-panel.fixed-panel.open { transform: translateX(0); }

  .desktop-only { display: none !important; }
  .mobile-only  { display: inline-flex; }
  .only-mobile  { display: inline-flex !important; }

  .table-wrap { border-radius: var(--r-sm); }
  th, td { padding: 10px 9px; font-size: 13px; }
  .campaign-table-actions { justify-content: flex-start; }
  .brand { margin-top: 48px; }
  .form-grid { grid-template-columns: 1fr; }
  .section-title { display: block; }
  .actions { margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 520px (SMALL)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .main { padding-left: 8px; padding-right: 8px; }

  .conversation-item, .conv.modern {
    grid-template-columns: 44px minmax(0,1fr);
    position: relative;
  }
  .conversation-time, .conv-meta { position: absolute; right: 10px; top: 10px; }
  .conversation-title { padding-right: 50px; }

  .filter-pill, .filter-pills a { font-size: 11px; padding: 5px 8px; }
  .stat strong { font-size: 24px; }
  .card h2 { font-size: 19px; }
  .action-card { padding: 12px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .btn, button[type=submit], input[type=submit] { width: 100%; }
  .sidebar { width: 88vw; }
  .media-thumb { max-width: 200px; }
}


/* ═══════════════════════════════════════════════════════
   V1.4.3 — Compatibility with current PHP markup + polish
   ═══════════════════════════════════════════════════════ */

/* Layout aliases used by the app */
.app-layout{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.mobile-topbar{display:none;position:sticky;top:0;align-items:center;gap:12px;height:56px;padding:0 14px;background:rgba(255,255,255,.9);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--c-border);z-index:60}.mobile-menu-btn{width:38px;height:38px;border:0;background:var(--sidebar-bg);color:#fff;border-radius:var(--r-sm);font-size:18px;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--ease-spring)}.mobile-menu-btn:active{transform:scale(.92)}.mobile-brand{font-weight:800;letter-spacing:-.02em}.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:79;opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid)}.menu-backdrop.open{opacity:1;visibility:visible}

/* Better page rhythm */
.main{background:linear-gradient(180deg,#f4f7fb 0%,#eef3f8 100%)}
.page-title h1{background:linear-gradient(135deg,#061126,#1d4ed8);-webkit-background-clip:text;background-clip:text;color:transparent}.page-title p{max-width:820px}

/* Dashboard: more premium cards */
.stats .stat,.kpi-grid .stat{min-height:118px;position:relative;overflow:hidden}.stats .stat::after,.kpi-grid .stat::after{content:'';position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:50%;background:rgba(0,132,255,.08)}.stat strong{display:inline-flex;align-items:baseline;gap:4px}.stat em{font-style:normal;color:var(--c-ink2);font-size:13px;font-weight:600}

/* Buttons and actions */
.action-card{min-height:70px}.btn.primary,.primary[type=submit]{background:linear-gradient(135deg,#0084ff,#006acc)}

/* Inbox: real Messenger/WhatsApp alignment */
.inbox-shell.pro{height:calc(100vh - 108px);min-height:650px}.messenger-panel{overflow:hidden}.fixed-panel.card{box-shadow:none}.conv-list-wrap{padding:8px}.conv.modern{min-height:68px}.conv.modern.unread{background:#f0f7ff}.conv.modern.unread .conv-topline strong{font-weight:800}.conv-main{min-width:0}.conv-main span,.conv-main em{display:block}.chat-left .avatar{box-shadow:0 0 0 3px #fff}.messenger-actions form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.messenger-bg{background:#eef5fb;position:relative;flex:1;overflow-y:auto}.message-list{padding-bottom:8px}.msg{display:flex;flex-direction:column;gap:3px;margin:6px 0}.msg.in{align-items:flex-start}.msg.out{align-items:flex-end}.sender-line{font-size:11px;display:flex;gap:7px;align-items:center;max-width:min(78%,760px);margin:0 8px 2px;color:#64748b}.msg.out .sender-line{justify-content:flex-end;color:#2563eb}.bubble{max-width:min(70%,720px);font-size:14.5px;line-height:1.48;padding:10px 14px;border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.12);white-space:pre-wrap;overflow-wrap:anywhere}.msg.in .bubble{background:#fff;color:#0f172a;border-bottom-left-radius:6px}.msg.out .bubble{background:linear-gradient(135deg,#0084ff,#006acc);color:#fff;border-bottom-right-radius:6px}.msg-time{font-size:10.5px;opacity:.68;margin-top:5px;display:block;text-align:right}.msg.out .msg-time{color:rgba(255,255,255,.85)}.reaction-bubble{font-size:16px}.reaction-bubble .emoji{font-size:30px}.media-preview{margin-top:8px}.media-preview.image img,.media-preview img,.media-thumb{max-width:260px;max-height:260px;border-radius:18px;display:block;border:1px solid rgba(0,0,0,.08);object-fit:cover}.media-preview video,.media-preview audio{max-width:280px;border-radius:16px}.media-preview.document a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.18);border:1px solid rgba(0,0,0,.08);font-weight:700}.msg.in .media-preview.document a{background:#f8fafc}

/* Composer */
.replybar{grid-template-columns:auto minmax(0,1fr) auto}.replybar textarea{min-height:44px}.composer-main{display:grid;gap:7px}.media-line{display:grid;grid-template-columns:120px 1fr;gap:7px}.media-url-field{min-height:38px}.send-fab{font-size:0}.send-fab::before{content:'➤';font-size:18px;transform:translateX(1px)}

/* Contacts page */
.contact-table.card{padding:0;overflow:hidden}.contact-table.card h2{padding:22px 22px 0}.contact-table .muted{padding:0 22px 16px;display:block}.contact-table table{border-collapse:separate;border-spacing:0}.contact-table th{position:sticky;top:0;z-index:1}

/* Campaign page */
.campaign-form .form-grid{align-items:end}.campaign-form select,.campaign-form input{min-height:46px}.section-title .actions{margin-top:0}.campaign-table-actions .btn{white-space:nowrap}

/* Settings */
.settings-grid textarea{width:100%;min-height:150px}.webhook-box code{word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;display:block;margin-top:4px}

/* Mobile polish */
@media (max-width:860px){
  .mobile-topbar{display:flex}.app-layout{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-110%);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid);z-index:80}.sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}.brand{margin-top:48px}.main{padding:12px 10px 84px}.page-title{margin:8px 0 14px}.page-title h1{font-size:26px}.tag-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.tag{white-space:nowrap}.stats,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:14px;min-height:100px}.stat strong{font-size:24px}.card{border-radius:20px;padding:16px}.action-grid{grid-template-columns:1fr}.form-grid,.grid.two,.grid.three,.settings-grid,.webhook-box{grid-template-columns:1fr}.inbox-shell.pro{display:block;height:auto;min-height:0;border:0;box-shadow:none;background:transparent}.fixed-panel.card{border-radius:22px!important;margin-bottom:10px!important;border:1px solid var(--c-border)!important}.list-head{position:relative}.conv-list-wrap{max-height:calc(100vh - 250px);min-height:300px}.conv.modern{border-radius:18px;padding:12px}.messenger-panel{position:fixed;inset:56px 0 0 0;z-index:70;transform:translateX(105%);transition:transform var(--t-mid) var(--ease-out);border-radius:0!important;border:0!important;height:auto;box-shadow:none}.messenger-panel.mobile-chat-open,.inbox-shell.thread-open .messenger-panel,body.has-thread .messenger-panel{transform:translateX(0)}.back-list{display:inline-flex}.chat-header{min-height:58px;padding:9px 10px}.chat-left h2{font-size:16px}.chat-left p{max-width:150px}.messenger-actions form{display:none}.chat-summary{overflow-x:auto;flex-wrap:nowrap}.chat-summary .chip{white-space:nowrap}.messenger-bg{height:calc(100vh - 56px - 58px - 48px - 68px)}.bubble-area{height:auto;padding:12px 10px}.bubble{max-width:86%;font-size:14px}.sender-line{max-width:88%;font-size:10.5px}.replybar{grid-template-columns:auto minmax(0,1fr) auto;padding:8px;position:sticky;bottom:0}.replybar textarea{border-radius:22px;min-height:42px}.media-line{grid-template-columns:1fr}.media-url-field{display:none}.composer-tools select{display:none}.tool-btn{width:38px;height:38px}.contact-panel.fixed-panel{position:fixed;inset:56px 0 0 0;z-index:75;border-radius:0!important;transform:translateX(105%);transition:transform var(--t-mid) var(--ease-out);overflow:auto}.contact-panel.fixed-panel.open{transform:translateX(0)}.section-title{display:block}.actions{margin-top:10px}.table-wrap{overflow:auto}.toast-zone{left:12px;right:12px;bottom:78px}.toast{width:100%}.sound-toggle{bottom:76px;left:auto;right:14px}.only-mobile{display:inline-flex!important}.desktop-only{display:none!important}.mobile-only{display:inline-flex!important}
}
@media (max-width:520px){.stats,.kpi-grid{grid-template-columns:1fr 1fr}.stat span{font-size:11px}.conversation-head h2,.list-head h2{font-size:18px}.conv.modern{grid-template-columns:42px minmax(0,1fr) auto}.avatar{width:42px;height:42px}.conv-meta small{display:none}.conv-meta b{min-width:18px;height:18px;font-size:10px}.bubble{max-width:90%;border-radius:18px}.msg.in .bubble{border-bottom-left-radius:5px}.msg.out .bubble{border-bottom-right-radius:5px}.chat-actions .btn{min-height:34px;padding:6px 10px}.media-preview.image img,.media-thumb{max-width:210px}.btn,button[type=submit],input[type=submit]{width:auto}.form-actions .btn,.form-actions button[type=submit]{width:100%}.sidebar{width:88vw}}


/* ═══════════════════════════════════════════════════════
   V1.4.4 — REAL UI POLISH / CURRENT PHP MARKUP COMPAT
   ═══════════════════════════════════════════════════════ */
.app-main{min-width:0;padding:26px 24px 48px;}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;}
.topbar .page-title{display:block;margin:0}
.topbar .page-title h1{margin:0 0 6px;font-size:clamp(28px,3vw,46px);line-height:1.03;letter-spacing:-.045em;font-weight:800;color:#102a63}
.topbar .page-title p{margin:0;color:var(--c-ink2);font-size:15px;max-width:900px}
.topbar .tag-row{padding:0;margin:0;align-items:center}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.toolbar-filters,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.stat-grid .stat{background:#fff;border:1px solid var(--c-border);border-radius:24px;padding:18px 18px 16px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:8px;min-height:138px}
.stat-grid .stat span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-ink2)}
.stat-grid .stat strong{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.05em;color:#101828}
.stat-grid .stat em{font-style:normal;font-size:14px;color:var(--c-ink2)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px;margin-bottom:18px}
.stack-list{display:grid;gap:10px}.stack-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--c-surface2);border:1px solid var(--c-border)}
.stack-row span{color:var(--c-ink2)}.stack-row strong{font-weight:800;color:#111827}.top-space{margin-top:14px}.wrap-gap{flex-wrap:wrap}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.action-card strong{display:block;font-size:18px;line-height:1.15;letter-spacing:-.02em}.action-card span{display:block;margin-top:4px}
.card.compact-card{display:flex;flex-direction:column;justify-content:space-between}
.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.section-title h2{margin:0}
.full{grid-column:1 / -1}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid.one{grid-template-columns:1fr}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#334155}
.form-grid .checkline{flex-direction:row;align-items:center;grid-column:1/-1}
.campaign-form .actions{margin-top:0}
.table-wrap{overflow:auto;border:1px solid var(--c-border);border-radius:20px;background:#fff}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0}.table-wrap th,.table-wrap td{padding:14px 16px}.table-wrap th{background:#f8fafc;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink2)}
.table-wrap tbody tr:hover{background:#f8fbff}
.chip.unread{background:#eef4ff;color:#284ab6}.chip.soft{background:#f3f4f6;color:#475467}.chip.success{background:#e9f9ef;color:#1f8c47}.chip.danger{background:#fff0f2;color:#be123c}
.inbox-shell.pro{height:calc(100vh - 178px)}
.conversation-list,.messenger-panel,.contact-panel{box-shadow:var(--shadow-xs)}
.list-head.sticky{position:sticky;top:0;z-index:2;background:#fff}
.searchbox.advanced-search{padding:12px;border-bottom:1px solid var(--c-border)}
.advanced-search input{font-size:14px;height:44px}
.conv.modern{align-items:flex-start;padding:12px;border-radius:20px}.conv.modern .avatar{margin-top:2px}
.conv-main em{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.modern.active{box-shadow:0 0 0 1px rgba(0,132,255,.18),0 8px 20px rgba(0,132,255,.08)}
.chat-panel.card,.contact-panel.card,.conversation-list.card{padding:0!important;margin:0!important;border-radius:28px!important;overflow:hidden}
.chat-header{padding:14px 16px;background:rgba(255,255,255,.94)}
.chat-left .avatar{box-shadow:0 8px 18px rgba(123,154,255,.22)}
.chat-summary{padding:10px 16px;background:#fff;border-bottom:1px solid var(--c-border)}
.bubble-area{padding:18px 16px 8px}
.msg{margin:0 0 10px}.msg.in .bubble,.msg.out .bubble{padding:12px 14px 9px}
.msg.in .bubble{background:#fff}.msg.out .bubble{background:linear-gradient(135deg,#0084ff,#0066cc)}
.client-msg .sender-line span{color:#667085}.admin-msg .sender-line span{color:#0d6efd}.msg.out .sender-line{justify-content:flex-end}.msg.out .sender-line span,.msg.out .sender-line small{color:#7dafff}
.msg.out .delivery-dot{color:rgba(255,255,255,.75)}.msg.in .delivery-dot{color:#98a2b3}
.replybar{background:#fff;padding:12px 14px;border-top:1px solid var(--c-border)}
.replybar textarea{background:#f5f7fb;border:1px solid #edf1f7}.replybar textarea:focus{background:#fff}
.media-preview-mini{display:none}
.send-fab{font-size:0;position:relative}.send-fab::before{content:'➤';font-size:18px;line-height:1}
.contact-head{background:#fff}.contact-card-main{padding:26px 18px 18px}.contact-card-main strong{font-size:30px;line-height:1.05;letter-spacing:-.03em}.contact-card-main .avatar{background:linear-gradient(135deg,#a5c8ff,#7b9aff);color:#1d4ed8;box-shadow:0 12px 24px rgba(123,154,255,.22)}
.contact-stats-grid{padding:0 14px 14px}.contact-stats-grid div{min-height:92px;display:flex;flex-direction:column;justify-content:center}
.info-list div{padding:11px 0}
.only-mobile{display:none!important}.mobile-only{display:none!important}
.notice{margin-bottom:16px}
.login-card{max-width:480px;margin:56px auto}
@media (max-width:1180px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{display:block}.topbar .tag-row{margin-top:12px}.inbox-shell.pro{height:calc(100vh - 188px)}}
@media (max-width:860px){.app-main{padding:12px 10px 84px}.topbar{display:block;margin-bottom:14px}.topbar .page-title h1{font-size:30px}.topbar .tag-row{margin-top:10px}.toolbar-row{gap:10px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-grid .stat{min-height:120px;padding:16px}.stat-grid .stat strong{font-size:30px}.action-grid,.form-grid{grid-template-columns:1fr}.inbox-shell.pro{height:auto}.chat-panel.card,.contact-panel.card,.conversation-list.card{border-radius:24px!important}.conversation-list{margin-bottom:10px!important}.messenger-panel{background:#ecf2f8}.messenger-panel.mobile-chat-open,.inbox-shell.thread-open .messenger-panel,body.has-thread .messenger-panel{transform:translateX(0)}.contact-panel.fixed-panel.open{transform:translateX(0)}.replybar{padding:8px 10px}.send-fab{width:48px;height:48px;min-width:48px}.back-list{display:inline-flex}.only-mobile{display:inline-flex!important}.desktop-only{display:none!important}.mobile-only{display:inline-flex!important}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr}.topbar .page-title h1{font-size:28px}.bubble{max-width:90%}.contact-card-main strong{font-size:26px}.table-wrap th,.table-wrap td{padding:11px 10px}}

/* ═══════════════════════════════════════════════════════
   V1.4.6 — Premium recovery pack
   Base visuel 1.4.4 + correction réponse + mobile app
   ═══════════════════════════════════════════════════════ */

:root{
  --beyou-navy:#071326;
  --beyou-navy-2:#0b1a30;
  --beyou-blue:#0a84ff;
  --beyou-blue-2:#0066d6;
  --beyou-bg:#edf3fa;
  --beyou-card:#ffffff;
  --beyou-border:#dbe5f2;
  --beyou-text:#07111f;
  --beyou-muted:#63738a;
  --beyou-soft:#f7fbff;
  --beyou-green:#22c55e;
  --beyou-red:#ef4444;
  --beyou-shadow:0 18px 55px rgba(7,19,38,.10);
  --beyou-shadow-soft:0 8px 28px rgba(7,19,38,.07);
}

html,body{background:var(--beyou-bg)!important;color:var(--beyou-text)!important;}
body{font-feature-settings:"cv02","cv03","cv04","cv11";}

/* App shell plus net */
.app-shell,.app-layout{background:linear-gradient(135deg,#eef5ff 0%,#f7fbff 48%,#eaf2fb 100%);}
.app-main,.main{padding:26px 28px 38px!important;min-width:0;}
.sidebar{background:linear-gradient(180deg,#151719 0%,#0f1113 100%)!important;border-right:1px solid rgba(255,255,255,.08);box-shadow:14px 0 50px rgba(7,19,38,.12)!important;}
.brand{border-bottom:1px solid rgba(255,255,255,.10)!important;}
.nav a{border-radius:14px!important;margin:2px 0;}
.nav a.active{background:linear-gradient(135deg,#0e5da4,#0b4a82)!important;box-shadow:0 10px 22px rgba(10,132,255,.18);}
.nav a:hover{background:rgba(255,255,255,.08)!important;transform:translateX(4px)!important;}
.sidebar .chip,.sidebar .tag{background:#eaf2ff!important;color:#0f4fad!important;border:0!important;font-weight:800!important;}

/* Header: titre + baseline propres, plus de baseline à droite */
.topbar{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;margin:0 0 18px!important;}
.page-title{display:block!important;margin:0!important;min-width:0!important;}
.page-title h1{margin:0 0 4px!important;font-size:34px!important;line-height:1.02!important;font-weight:900!important;letter-spacing:-.055em!important;color:#08245a!important;}
.page-title p{margin:0!important;font-size:15px!important;color:#5e718e!important;max-width:880px!important;}
.topbar>.tag-row{margin-top:6px!important;flex:none!important;}

/* Cartes et dashboard premium */
.card,.stat,.table-wrap{background:rgba(255,255,255,.94)!important;border:1px solid rgba(203,216,232,.95)!important;box-shadow:var(--beyou-shadow-soft)!important;backdrop-filter:blur(10px);}
.card{border-radius:26px!important;padding:24px!important;}
.card:hover,.stat:hover{box-shadow:var(--beyou-shadow)!important;transform:translateY(-1px);}
.stats,.kpi-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:6px 0 18px!important;}
.stat{min-height:102px!important;border-radius:22px!important;padding:20px 22px!important;position:relative!important;overflow:hidden!important;}
.stat::after{content:"";position:absolute;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.15),rgba(10,132,255,0) 68%);}
.stat span{color:#647796!important;font-weight:800!important;letter-spacing:.01em!important;}
.stat strong{font-size:32px!important;color:#071326!important;letter-spacing:-.055em!important;}
.action-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;}
.action-card{min-height:86px!important;border-radius:18px!important;border:1px solid #d7e4f4!important;background:linear-gradient(180deg,#ffffff,#f9fcff)!important;box-shadow:0 8px 22px rgba(7,19,38,.04)!important;display:grid!important;grid-template-columns:1fr!important;align-items:center!important;}
.action-card:hover{border-color:#0a84ff!important;box-shadow:0 14px 34px rgba(10,132,255,.16)!important;transform:translateY(-3px)!important;}
.action-card b,.action-card strong{font-size:15px!important;letter-spacing:-.02em!important;}
.action-card span{font-size:12.5px!important;line-height:1.35!important;}

/* Tables / formulaires plus propres */
input,select,textarea{border-radius:14px!important;border:1px solid #d7e4f4!important;background:#fff!important;}
input:focus,select:focus,textarea:focus{border-color:#0a84ff!important;box-shadow:0 0 0 4px rgba(10,132,255,.13)!important;}
.btn,button[type=submit],input[type=submit]{border-radius:14px!important;font-weight:850!important;}
.btn.primary,button[type=submit],input[type=submit]{background:linear-gradient(135deg,#0a84ff,#0066d6)!important;border:0!important;box-shadow:0 10px 22px rgba(10,132,255,.23)!important;}
.table-wrap{border-radius:22px!important;overflow:hidden!important;}
th{background:#f2f6fb!important;color:#50617a!important;letter-spacing:.07em!important;}
td{border-bottom:1px solid #eef3f8!important;}

/* Inbox: vraie app desktop, composer toujours visible */
.inbox-shell,.inbox-shell.pro{
  height:calc(100vh - 118px)!important;
  min-height:650px!important;
  max-height:920px!important;
  display:grid!important;
  grid-template-columns:360px minmax(0,1fr) 304px!important;
  gap:0!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid #d5e2f2!important;
  background:#fff!important;
  box-shadow:0 24px 80px rgba(7,19,38,.13)!important;
}
.fixed-panel.card,.conversation-list{height:100%!important;margin:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;}
.list-head,.conversation-head{padding:20px 20px 14px!important;background:#fff!important;border-bottom:1px solid #e7eef7!important;}
.list-head h2,.conversation-head h2{font-size:22px!important;font-weight:900!important;letter-spacing:-.04em!important;color:#071326!important;}
.searchbox,.conversation-tools{padding:14px 16px!important;background:#fff!important;border-bottom:1px solid #e7eef7!important;}
.searchbox input,.advanced-search input{height:44px!important;border-radius:999px!important;background:#f2f5f8!important;border:0!important;padding:0 18px!important;}
.filter-pills,.search-filters{gap:7px!important;margin-top:10px!important;}
.filter-pills a,.filter-pill{height:34px!important;border-radius:999px!important;border:1px solid #d8e5f4!important;background:#fff!important;color:#071326!important;font-weight:850!important;}
.filter-pills a.active,.filter-pills a:hover,.filter-pill.active,.filter-pill:hover{background:#eaf4ff!important;border-color:#0a84ff!important;color:#075fc0!important;}
.conv-list-wrap,.conversation-scroll{padding:10px!important;overflow-y:auto!important;height:100%!important;}
.conv.modern,.conversation-item{border-radius:20px!important;padding:12px 10px!important;grid-template-columns:52px minmax(0,1fr) auto!important;margin:0 0 6px!important;border:1px solid transparent!important;}
.conv.modern:hover,.conversation-item:hover{background:#f4f8fd!important;transform:translateX(2px)!important;}
.conv.modern.active,.conversation-item.active{background:linear-gradient(135deg,#e8f3ff,#f3f9ff)!important;border-color:#8ac8ff!important;box-shadow:0 10px 22px rgba(10,132,255,.10)!important;}
.avatar{width:50px!important;height:50px!important;border-radius:50%!important;background:linear-gradient(135deg,#86b7ff,#6d94ff)!important;color:#0b4ea2!important;font-weight:900!important;}
.conv-topline strong,.conversation-title{font-size:15px!important;font-weight:900!important;color:#071326!important;}
.conv-main span,.conv-main em,.conversation-meta,.conversation-preview{font-size:12.3px!important;color:#6a7a90!important;}
.conv-meta small,.conversation-time{font-size:11.5px!important;color:#90a0b5!important;}
.tiny-state{font-size:10.5px!important;padding:3px 7px!important;border-radius:999px!important;}

/* Chat au centre — header, bulles, reply bar */
.messenger-panel,.chat-panel{
  min-height:0!important;height:100%!important;display:flex!important;flex-direction:column!important;background:#edf6ff!important;position:relative!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important;
}
.messenger-bg::before,.messenger-panel::before,.chat-panel::before{background-image:radial-gradient(circle at 1px 1px,rgba(10,132,255,.13) 1px,transparent 0)!important;background-size:22px 22px!important;}
.chat-header,.chat-head{flex:none!important;padding:16px 18px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e2ebf6!important;backdrop-filter:blur(18px)!important;z-index:4!important;}
.chat-left h2,.chat-head h2{font-size:18px!important;font-weight:950!important;color:#071326!important;}
.chat-left p{font-size:12.5px!important;color:#708199!important;}
.chat-summary{flex:none!important;background:rgba(255,255,255,.72)!important;border-bottom:1px solid #e5eef7!important;padding:10px 18px!important;z-index:3!important;}
.chip,.pill,.status{border-radius:999px!important;font-weight:900!important;}
.bubble-area,.message-area{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:22px 22px 30px!important;position:relative!important;z-index:1!important;scroll-behavior:smooth!important;
}
.msg{margin:9px 0!important;display:flex!important;flex-direction:column!important;}
.msg.in{align-items:flex-start!important;}
.msg.out{align-items:flex-end!important;}
.sender-line{max-width:82%!important;margin:0 10px 4px!important;color:#61728a!important;font-weight:850!important;font-size:11.5px!important;}
.msg.out .sender-line{justify-content:flex-end!important;color:#61728a!important;}
.bubble{
  max-width:min(72%,720px)!important;padding:12px 16px!important;border-radius:22px!important;box-shadow:0 7px 22px rgba(7,19,38,.08)!important;line-height:1.48!important;font-size:15px!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;border:1px solid rgba(203,216,232,.72)!important;
}
.msg.in .bubble{background:#fff!important;color:#071326!important;border-bottom-left-radius:7px!important;}
.msg.out .bubble{background:linear-gradient(135deg,#0a84ff,#0067d8)!important;color:#fff!important;border-color:rgba(10,132,255,.45)!important;border-bottom-right-radius:7px!important;box-shadow:0 12px 28px rgba(10,132,255,.22)!important;}
.msg-time{font-size:10.5px!important;opacity:.65!important;margin-top:5px!important;}
.reaction-bubble{align-items:center!important;gap:12px!important;min-width:260px!important;}
.reaction-bubble .emoji{font-size:30px!important;filter:drop-shadow(0 3px 8px rgba(239,68,68,.22));}
.replybar,.composer{
  flex:none!important;display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;gap:9px!important;align-items:end!important;padding:12px 16px 14px!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #dfe9f5!important;backdrop-filter:blur(18px)!important;position:relative!important;z-index:8!important;
}
.replybar textarea,.composer textarea{min-height:46px!important;max-height:132px!important;border-radius:24px!important;background:#f1f5f9!important;border:0!important;padding:13px 18px!important;font-size:14.5px!important;resize:none!important;}
.replybar .media-url-field{height:46px!important;min-height:46px!important;border-radius:18px!important;background:#f8fbff!important;}
.replybar select{height:46px!important;min-height:46px!important;border-radius:16px!important;max-width:108px!important;}
.tool-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:#f2f6fb!important;border:1px solid #d9e5f4!important;font-size:18px!important;}
.tool-btn:hover{background:#eaf4ff!important;border-color:#0a84ff!important;color:#0a84ff!important;transform:scale(1.06)!important;}
.send-fab{width:48px!important;height:48px!important;min-width:48px!important;border:0!important;border-radius:50%!important;background:linear-gradient(135deg,#0a84ff,#0066d6)!important;color:#fff!important;font-size:0!important;box-shadow:0 12px 24px rgba(10,132,255,.32)!important;}
.send-fab::before{content:"➤";font-size:20px;line-height:1;transform:translateX(1px);}
.send-fab:hover{transform:scale(1.08)!important;box-shadow:0 16px 32px rgba(10,132,255,.42)!important;}
.media-preview-mini{grid-column:1/-1;border-radius:18px!important;background:#f0f7ff!important;border:1px solid #cfe4ff!important;color:#27415f!important;}
.back-list{display:none!important;}

/* Fiche contact plus premium */
.contact-panel,.contact-panel.card{height:100%!important;background:#fff!important;box-shadow:none!important;border-left:1px solid #dfe8f3!important;border-radius:0!important;overflow-y:auto!important;}
.contact-head{background:#fff!important;padding:20px 18px!important;border-bottom:1px solid #e5edf7!important;}
.contact-card-main{padding:30px 18px 22px!important;background:linear-gradient(180deg,#f3f8ff 0%,#fff 86%)!important;}
.contact-card-main .avatar{width:76px!important;height:76px!important;font-size:28px!important;box-shadow:0 12px 30px rgba(10,132,255,.20)!important;}
.contact-card-main strong{font-size:22px!important;letter-spacing:-.035em!important;}
.contact-stats-grid div{border-radius:16px!important;background:linear-gradient(180deg,#f7fbff,#eef4fb)!important;}
.info-list div{padding:11px 0!important;}
.column-actions .btn{border-radius:14px!important;}

/* Campagnes : formulaire lisible + zone test numéro */
.form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-items:start!important;}
.form-grid label{display:flex!important;flex-direction:column!important;gap:7px!important;font-weight:850!important;color:#29384c!important;}
.form-grid label:has(input[type=checkbox]){grid-column:1/-1!important;flex-direction:row!important;align-items:center!important;}
.form-grid .primary, .form-grid button[type=submit]{justify-self:start!important;min-width:280px!important;}

/* Animations premium mais légères */
@keyframes premiumFadeUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes premiumSlideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.stat,.card{animation:premiumFadeUp .36s cubic-bezier(.2,.8,.2,1) both;}
.conv.modern{animation:premiumSlideIn .25s cubic-bezier(.2,.8,.2,1) both;}
.bubble{animation:bubble-in .24s cubic-bezier(.2,.8,.2,1) both;}

/* Mobile : vraie app, retour fonctionnel, composer visible */
@media(max-width:1180px){
  .inbox-shell,.inbox-shell.pro{grid-template-columns:340px minmax(0,1fr)!important;}
  .contact-panel{display:none!important;}
  .stats,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:860px){
  .mobile-top,.mobile-topbar{display:flex!important;height:56px!important;}
  .app-main,.main{padding:12px 10px 80px!important;}
  .topbar{display:block!important;margin:6px 0 12px!important;}
  .page-title h1{font-size:28px!important;}
  .page-title p{font-size:13.5px!important;}
  .stats,.kpi-grid,.action-grid,.form-grid{grid-template-columns:1fr!important;}
  .stat{min-height:auto!important;padding:17px!important;}
  .action-card{min-height:74px!important;}
  .sidebar{width:84vw!important;max-width:310px!important;}

  .inbox-shell,.inbox-shell.pro{display:block!important;height:calc(100vh - 74px)!important;min-height:0!important;border-radius:22px!important;overflow:hidden!important;}
  .fixed-panel.card,.conversation-list{height:100%!important;border-radius:22px!important;overflow:hidden!important;}
  .conv-list-wrap,.conversation-scroll{height:calc(100% - 168px)!important;max-height:none!important;}

  .messenger-panel,.chat-panel{
    position:fixed!important;inset:56px 0 0!important;z-index:90!important;height:auto!important;min-height:0!important;border-radius:0!important;transform:translateX(110%)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.has-thread .messenger-panel, body.has-thread .chat-panel,
  .messenger-panel.mobile-chat-open,.chat-panel.mobile-chat-open{transform:translateX(0)!important;}
  .back-list{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;border-radius:14px!important;background:#eff6ff!important;color:#0a5fc6!important;text-decoration:none!important;font-size:18px!important;flex:none!important;}
  .chat-header,.chat-head{padding:10px 12px!important;min-height:60px!important;}
  .chat-left h2{font-size:17px!important;max-width:160px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .chat-left p{max-width:150px!important;}
  .chat-actions{display:none!important;}
  .chat-summary{padding:8px 10px!important;overflow-x:auto!important;flex-wrap:nowrap!important;}
  .bubble-area,.message-area{height:auto!important;flex:1 1 auto!important;padding:14px 10px 18px!important;}
  .bubble{max-width:88%!important;font-size:14.2px!important;padding:11px 14px!important;}
  .reaction-bubble{min-width:0!important;}
  .replybar,.composer{grid-template-columns:auto minmax(0,1fr) auto!important;padding:9px 9px calc(9px + env(safe-area-inset-bottom))!important;gap:7px!important;}
  .replybar select,.replybar .media-url-field{display:none!important;}
  .tool-btn{width:42px!important;height:42px!important;}
  .replybar textarea,.composer textarea{min-height:42px!important;padding:11px 14px!important;}
  .send-fab{width:44px!important;height:44px!important;min-width:44px!important;}
  .contact-panel{display:none!important;}
  .mobile-only,.only-mobile{display:inline-flex!important;}
  .desktop-only{display:none!important;}
}
@media(max-width:520px){
  .app-main,.main{padding-left:0!important;padding-right:0!important;}
  .topbar{padding:0 10px!important;}
  .card{border-radius:22px!important;margin-left:8px!important;margin-right:8px!important;}
  .inbox-shell,.inbox-shell.pro{border-radius:0!important;border-left:0!important;border-right:0!important;}
  .list-head,.conversation-head{padding:18px 16px 12px!important;}
  .conv.modern,.conversation-item{grid-template-columns:50px minmax(0,1fr) auto!important;padding:11px 9px!important;}
  .conv-meta{right:10px!important;top:12px!important;}
  .avatar{width:48px!important;height:48px!important;}
  .form-grid .primary,.form-grid button[type=submit]{width:100%!important;min-width:0!important;}
}

/* v1.4.8 — correctif anti-page blanche + bulles plus lisibles */
.render-error-card{max-width:920px;margin:32px auto;padding:22px 24px;border:1px solid #fecaca;background:#fff7f7;color:#7f1d1d;border-radius:22px;box-shadow:0 18px 50px rgba(127,29,29,.08);font-family:inherit}.render-error-card strong{display:block;font-size:20px;margin-bottom:8px}.render-error-card p{margin:0 0 12px;color:#991b1b}.render-error-card code{display:block;padding:12px;background:#fff;border:1px solid #fecaca;border-radius:12px;white-space:pre-wrap;color:#7f1d1d}
/* Client à gauche / Beyou à droite, plus clair */
.msg.client-msg,.msg-row.client-msg{align-items:flex-start!important}.msg.admin-msg,.msg-row.admin-msg{align-items:flex-end!important}.msg.client-msg .bubble,.msg-row.client-msg .bubble{background:#fff!important;color:#0f172a!important;border:1px solid #dbe4ef!important;border-bottom-left-radius:7px!important;box-shadow:0 8px 24px rgba(15,23,42,.08)!important}.msg.admin-msg .bubble,.msg-row.admin-msg .bubble{background:linear-gradient(135deg,#dcfce7,#bbf7d0)!important;color:#052e16!important;border:1px solid #86efac!important;border-bottom-right-radius:7px!important;box-shadow:0 10px 26px rgba(22,163,74,.10)!important}.msg.client-msg .sender-line,.msg-row.client-msg .msg-label{color:#64748b!important;justify-content:flex-start!important}.msg.admin-msg .sender-line,.msg-row.admin-msg .msg-label{color:#15803d!important;justify-content:flex-end!important;text-align:right}.msg.admin-msg .sender-line strong::before,.msg-row.admin-msg .msg-label strong::before{content:'BEYOU · ';font-weight:900}.msg.client-msg .sender-line strong::before,.msg-row.client-msg .msg-label strong::before{content:'CLIENT · ';font-weight:900}.msg.admin-msg .msg-time,.msg-row.admin-msg .msg-time{color:#166534!important}.msg.client-msg .msg-time,.msg-row.client-msg .msg-time{color:#64748b!important}
/* Sécurise l’affichage si une ancienne classe est utilisée */
.msg.in{align-items:flex-start}.msg.out{align-items:flex-end}.msg.in .bubble{background:#fff;color:#0f172a;border:1px solid #dbe4ef;border-bottom-left-radius:7px}.msg.out .bubble{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#052e16;border:1px solid #86efac;border-bottom-right-radius:7px}