:root {
  --bg:
    #05070d;

  --panel:
    rgba(13, 17, 29, .76);

  --panel-strong:
    rgba(17, 22, 36, .94);

  --line:
    rgba(255,255,255,.09);

  --text:
    #f7f8ff;

  --muted:
    #8991a6;

  --red:
    #ff234f;

  --blue:
    #2587ff;

  --yellow:
    #ffd523;

  --shadow-blue:
    0 0 30px rgba(37,135,255,.22);

  --shadow-red:
    0 0 30px rgba(255,35,79,.20);

  --shadow-yellow:
    0 0 30px rgba(255,213,35,.16);
}


* {
  box-sizing:
    border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  font-family:
    Inter,
    Vazirmatn,
    Tahoma,
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at top right,
      #10162c 0,
      #070a12 34%,
      #03050a 100%
    );

  color:
    var(--text);

  min-height:
    100vh;

  overflow-x:
    hidden;
}


button,
input,
select,
textarea {
  font:
    inherit;
}


.ambient {
  position:
    fixed;

  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  filter:
    blur(120px);

  opacity:
    .16;

  pointer-events:
    none;

  z-index:
    0;
}


.ambient-blue {
  background:
    var(--blue);

  top:
    -180px;

  right:
    10%;
}


.ambient-red {
  background:
    var(--red);

  bottom:
    -220px;

  left:
    -80px;
}


.ambient-yellow {
  background:
    var(--yellow);

  top:
    45%;

  left:
    45%;

  width:
    260px;

  height:
    260px;

  opacity:
    .07;
}


.glass {
  background:
    linear-gradient(
      145deg,
      rgba(19,25,42,.88),
      rgba(8,12,23,.72)
    );

  border:
    1px solid
    var(--line);

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.app-shell {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    270px 1fr;

  min-height:
    100vh;

  direction:
    ltr;
}


.sidebar {
  margin:
    18px 0 18px 18px;

  border-radius:
    24px;

  padding:
    22px 16px;

  display:
    flex;

  flex-direction:
    column;

  direction:
    rtl;
}


.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    5px 8px 26px;
}


.brand-icon {
  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--blue) 55%,
      var(--yellow)
    );

  box-shadow:
    0 0 26px
    rgba(37,135,255,.35);

  color:
    white;

  font-size:
    24px;
}


.brand-name {
  font-size:
    21px;

  font-weight:
    800;
}


.brand-subtitle {
  margin-top:
    3px;

  font-size:
    10px;

  letter-spacing:
    1.6px;

  color:
    var(--muted);
}


nav {
  display:
    grid;

  gap:
    8px;
}


.nav-item {
  border:
    1px solid transparent;

  background:
    transparent;

  color:
    #aab2c7;

  padding:
    13px 15px;

  border-radius:
    14px;

  text-align:
    right;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  transition:
    .2s ease;
}


.nav-item:hover {
  border-color:
    rgba(37,135,255,.28);

  color:
    white;

  background:
    rgba(37,135,255,.08);
}


.nav-item.active {
  color:
    white;

  border-color:
    rgba(37,135,255,.45);

  background:
    linear-gradient(
      90deg,
      rgba(37,135,255,.20),
      rgba(255,35,79,.06)
    );

  box-shadow:
    inset 3px 0
    var(--blue),
    var(--shadow-blue);
}


.sidebar-bottom {
  margin-top:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    14px 8px 4px;
}


.phase-pill {
  color:
    var(--yellow);

  font-size:
    12px;

  border:
    1px solid
    rgba(255,213,35,.35);

  border-radius:
    999px;

  padding:
    6px 10px;

  box-shadow:
    var(--shadow-yellow);
}


.logout-btn {
  background:
    transparent;

  color:
    #f18096;

  border:
    0;

  cursor:
    pointer;
}


.main-content {
  direction:
    rtl;

  padding:
    28px 34px 50px;
}


.topbar {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    28px;
}


.eyebrow {
  font-size:
    10px;

  letter-spacing:
    2.4px;

  color:
    var(--blue);

  direction:
    ltr;
}


h1,
h2,
p {
  margin-top:
    0;
}


.topbar h1 {
  margin:
    6px 0 0;

  font-size:
    31px;
}


.tenant-card {
  padding:
    12px 16px;

  border-radius:
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.tenant-card small {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);
}


.status-dot {
  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--yellow);

  box-shadow:
    0 0 16px
    var(--yellow);
}


.metrics-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    16px;
}


.metric-card {
  border-radius:
    20px;

  padding:
    22px;
}


.metric-card span {
  color:
    #bbc2d3;

  font-size:
    13px;
}


.metric-card strong {
  display:
    block;

  font-size:
    38px;

  margin:
    10px 0 6px;
}


.metric-card small {
  color:
    var(--muted);
}


.glow-blue {
  box-shadow:
    var(--shadow-blue);
}


.glow-red {
  box-shadow:
    var(--shadow-red);
}


.glow-yellow {
  box-shadow:
    var(--shadow-yellow);
}


.dashboard-grid {
  display:
    grid;

  grid-template-columns:
    1.7fr 1fr;

  gap:
    18px;

  margin-top:
    20px;
}


.panel {
  padding:
    22px;

  border-radius:
    22px;
}


.panel-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    18px;
}


.panel-head h2 {
  margin-bottom:
    4px;
}


.panel-head p,
.muted {
  color:
    var(--muted);
}


.primary-btn {
  border:
    1px solid
    rgba(37,135,255,.55);

  background:
    linear-gradient(
      135deg,
      #155fec,
      #1d8aff
    );

  color:
    white;

  padding:
    12px 18px;

  border-radius:
    13px;

  cursor:
    pointer;

  font-weight:
    700;

  box-shadow:
    0 0 22px
    rgba(37,135,255,.28);

  transition:
    .2s ease;
}


.primary-btn:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 0 34px
    rgba(37,135,255,.45);
}


.primary-btn.small {
  padding:
    9px 13px;

  font-size:
    12px;
}


.secondary-btn {
  padding:
    12px 18px;

  border-radius:
    13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  color:
    white;

  background:
    rgba(255,255,255,.04);

  cursor:
    pointer;
}


.automation-list {
  display:
    grid;

  gap:
    10px;
}


.automation-row {
  padding:
    14px 15px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.025);

  border-radius:
    14px;

  display:
    grid;

  grid-template-columns:
    1.4fr .8fr .8fr;

  gap:
    12px;

  align-items:
    center;
}


.automation-row:hover {
  border-color:
    rgba(37,135,255,.28);
}


.keyword-chip {
  display:
    inline-flex;

  padding:
    4px 9px;

  border-radius:
    999px;

  background:
    rgba(255,213,35,.09);

  border:
    1px solid
    rgba(255,213,35,.32);

  color:
    var(--yellow);

  direction:
    ltr;
}


.status-badge {
  display:
    inline-flex;

  justify-content:
    center;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    11px;

  text-transform:
    uppercase;
}


.status-active {
  background:
    rgba(37,135,255,.10);

  color:
    #68aeff;

  border:
    1px solid
    rgba(37,135,255,.35);
}


.status-draft {
  background:
    rgba(255,213,35,.10);

  color:
    var(--yellow);

  border:
    1px solid
    rgba(255,213,35,.32);
}


.status-paused {
  background:
    rgba(255,35,79,.10);

  color:
    #ff738d;

  border:
    1px solid
    rgba(255,35,79,.32);
}


.instagram-summary,
.instagram-details {
  display:
    grid;

  gap:
    12px;
}


.account-card {
  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    16px;

  padding:
    16px;

  background:
    rgba(255,255,255,.025);
}


.page-actions {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    18px;
}


.view {
  display:
    none;
}


.view.active {
  display:
    block;
}


.automation-table {
  overflow-x:
    auto;
}


.table-row {
  min-width:
    760px;

  display:
    grid;

  grid-template-columns:
    1.4fr .8fr .7fr .8fr 1.6fr;

  gap:
    14px;

  padding:
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  align-items:
    center;
}


.table-head {
  color:
    var(--muted);

  font-size:
    12px;
}


.modal {
  display:
    none;

  position:
    fixed;

  inset:
    0;

  z-index:
    30;
}


.modal.open {
  display:
    grid;

  place-items:
    center;
}


.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(1,3,8,.78);

  backdrop-filter:
    blur(8px);
}


.modal-card {
  position:
    relative;

  z-index:
    2;

  width:
    min(850px, 92vw);

  max-height:
    92vh;

  overflow-y:
    auto;

  padding:
    24px;

  border-radius:
    24px;

  box-shadow:
    0 0 70px
    rgba(37,135,255,.18),
    0 0 45px
    rgba(255,35,79,.08);
}


.modal-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  margin-bottom:
    22px;
}


.icon-btn {
  width:
    38px;

  height:
    38px;

  border-radius:
    12px;

  background:
    rgba(255,35,79,.08);

  color:
    #ff728c;

  border:
    1px solid
    rgba(255,35,79,.25);

  font-size:
    25px;

  cursor:
    pointer;
}


.form-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    16px;
}


.field {
  display:
    grid;

  gap:
    7px;
}


.field.full {
  grid-column:
    1 / -1;
}


.field label {
  font-size:
    12px;

  color:
    #bac1d1;
}


input,
select,
textarea {
  width:
    100%;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(2,6,14,.72);

  color:
    white;

  border-radius:
    12px;

  padding:
    12px 13px;

  outline:
    none;

  transition:
    .2s ease;
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(37,135,255,.10),
    0 0 20px
    rgba(37,135,255,.16);
}


textarea {
  min-height:
    150px;

  resize:
    vertical;

  text-align:
    start;

  unicode-bidi:
    plaintext;
}


.form-actions {
  display:
    flex;

  justify-content:
    flex-start;

  gap:
    10px;

  margin-top:
    22px;
}


.form-error {
  color:
    #ff6986;

  margin-top:
    12px;

  min-height:
    20px;

  font-size:
    13px;
}


.hidden {
  display:
    none;
}


.login-body {
  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;
}


.login-shell {
  position:
    relative;

  z-index:
    3;

  width:
    min(420px, 90vw);
}


.login-card {
  padding:
    34px;

  border-radius:
    26px;

  box-shadow:
    0 0 60px
    rgba(37,135,255,.16),
    0 0 50px
    rgba(255,35,79,.12);
}


.brand-logo {
  font-size:
    36px;

  font-weight:
    900;

  letter-spacing:
    -5px;

  margin-bottom:
    12px;

  direction:
    ltr;
}


.brand-red {
  color:
    var(--red);

  text-shadow:
    0 0 18px
    var(--red);
}


.brand-blue {
  color:
    var(--blue);

  text-shadow:
    0 0 18px
    var(--blue);
}


.brand-yellow {
  color:
    var(--yellow);

  text-shadow:
    0 0 18px
    var(--yellow);
}


.login-card form {
  display:
    grid;

  gap:
    12px;

  margin-top:
    24px;
}


@media (max-width: 1050px) {

  .metrics-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns:
      1fr;
  }
}


@media (max-width: 780px) {

  .app-shell {
    grid-template-columns:
      1fr;
  }

  .sidebar {
    position:
      relative;

    margin:
      10px;

    min-height:
      auto;
  }

  .sidebar nav {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .sidebar-bottom {
    margin-top:
      18px;
  }

  .main-content {
    padding:
      18px;
  }

  .topbar {
    align-items:
      flex-start;

    gap:
      14px;

    flex-direction:
      column;
  }

  .metrics-grid {
    grid-template-columns:
      1fr;
  }

  .form-grid {
    grid-template-columns:
      1fr;
  }

  .field.full {
    grid-column:
      auto;
  }
}


/* =====================================================
   CHATYCHAT RTL LAYOUT — FINAL OVERRIDE
   ===================================================== */

.app-shell {
  grid-template-columns: 1fr 270px !important;
  direction: rtl !important;
}

.sidebar {
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin:
    18px 18px 18px 0 !important;

  direction:
    rtl !important;
}

.main-content {
  grid-column: 1 !important;
  grid-row: 1 !important;

  direction:
    rtl !important;
}

.brand {
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
}

.brand-logo-image {
  display: block;

  width: 54px;
  height: 54px;

  object-fit: contain;

  flex: 0 0 54px;

  border-radius: 15px;

  filter:
    drop-shadow(
      0 0 10px rgba(37,135,255,.50)
    )
    drop-shadow(
      0 0 8px rgba(255,35,79,.32)
    )
    drop-shadow(
      0 0 5px rgba(255,213,35,.22)
    );
}

.login-logo-wrap {
  display: flex;
  justify-content: center;

  margin-bottom: 18px;
}

.login-logo-image {
  display: block;

  width: 105px;
  height: 105px;

  object-fit: contain;

  margin: 0 auto;

  filter:
    drop-shadow(
      0 0 16px rgba(37,135,255,.48)
    )
    drop-shadow(
      0 0 11px rgba(255,35,79,.30)
    )
    drop-shadow(
      0 0 8px rgba(255,213,35,.20)
    );
}

.nav-item {
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

@media (max-width: 780px) {

  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;

    margin: 10px !important;
  }

  .main-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}


/* =====================================================
   CHATYCHAT SIDEBAR POSITION — DEFINITIVE FIX
   Desktop: sidebar RIGHT
   ===================================================== */

.app-shell {
  display: flex !important;
  flex-direction: row-reverse !important;

  width: 100% !important;
  min-height: 100vh !important;

  direction: ltr !important;

  grid-template-columns: none !important;
}


.sidebar {
  position: relative !important;

  order: 0 !important;

  flex:
    0 0 270px !important;

  width:
    270px !important;

  min-width:
    270px !important;

  max-width:
    270px !important;

  margin:
    18px 18px 18px 0 !important;

  direction:
    rtl !important;

  grid-column:
    auto !important;

  grid-row:
    auto !important;
}


.main-content {
  order: 1 !important;

  flex:
    1 1 auto !important;

  width:
    auto !important;

  min-width:
    0 !important;

  direction:
    rtl !important;

  grid-column:
    auto !important;

  grid-row:
    auto !important;
}


/* Persian menu alignment */

.sidebar .brand,
.sidebar nav,
.sidebar-bottom {
  direction:
    rtl !important;
}


.nav-item {
  width:
    100% !important;

  direction:
    rtl !important;

  text-align:
    right !important;

  justify-content:
    flex-start !important;
}


/* Mobile */

@media (max-width: 780px) {

  .app-shell {
    display:
      flex !important;

    flex-direction:
      column !important;
  }

  .sidebar {
    order:
      0 !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    flex:
      0 0 auto !important;

    margin:
      10px !important;
  }

  .main-content {
    order:
      1 !important;

    width:
      100% !important;
  }
}


/* =============================================
   AUTOMATION MANAGEMENT
   ============================================= */

.management-table {
  grid-template-columns:
    1.25fr
    .55fr
    .55fr
    .75fr
    1.4fr
    1.25fr !important;
}


.automation-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  direction:
    ltr;
}


.automation-action {
  padding:
    7px 10px;

  border-radius:
    9px;

  font-size:
    11px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.automation-action:hover {
  transform:
    translateY(-1px);
}


.edit-action {
  color:
    #76b8ff;

  background:
    rgba(37,135,255,.10);

  border:
    1px solid
    rgba(37,135,255,.38);

  box-shadow:
    0 0 12px
    rgba(37,135,255,.10);
}


.toggle-action {
  color:
    #ffe36b;

  background:
    rgba(255,213,35,.08);

  border:
    1px solid
    rgba(255,213,35,.32);
}


.delete-action {
  color:
    #ff718b;

  background:
    rgba(255,35,79,.08);

  border:
    1px solid
    rgba(255,35,79,.34);
}


.message-preview {
  unicode-bidi:
    plaintext;

  color:
    #c7cedd;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.status-paused {
  background:
    rgba(255,35,79,.10);

  color:
    #ff738d;

  border:
    1px solid
    rgba(255,35,79,.32);
}


@media (max-width: 1200px) {

  .management-table {
    min-width:
      1050px;
  }
}


/* =============================================
   MEDIA PICKER
   ============================================= */

.media-picker-toolbar {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    12px;
}


.media-picker {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(230px, 1fr)
    );

  gap:
    12px;

  max-height:
    420px;

  overflow-y:
    auto;

  padding:
    4px;
}


.media-card {
  appearance:
    none;

  width:
    100%;

  text-align:
    right;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.025);

  color:
    var(--text);

  border-radius:
    15px;

  padding:
    14px;

  cursor:
    pointer;

  display:
    grid;

  gap:
    9px;

  transition:
    .18s ease;

  direction:
    rtl;
}


.media-card:hover {
  border-color:
    rgba(37,135,255,.42);

  box-shadow:
    0 0 20px
    rgba(37,135,255,.12);
}


.media-card.selected {
  border-color:
    var(--yellow);

  background:
    rgba(255,213,35,.07);

  box-shadow:
    0 0 22px
    rgba(255,213,35,.16);
}


.media-card strong {
  line-height:
    1.65;

  font-size:
    13px;
}


.media-card small {
  color:
    var(--muted);

  direction:
    ltr;

  text-align:
    left;
}


.media-card a {
  color:
    #68aeff;

  font-size:
    12px;

  text-decoration:
    none;
}


.media-type {
  width:
    fit-content;

  padding:
    4px 8px;

  border-radius:
    999px;

  color:
    #ff7890;

  border:
    1px solid
    rgba(255,35,79,.32);

  background:
    rgba(255,35,79,.07);

  font-size:
    10px;

  direction:
    ltr;
}


/* =============================================
   ACTIVITY
   ============================================= */

.activity-list {
  display:
    grid;

  gap:
    8px;
}


.activity-row {
  display:
    grid;

  grid-template-columns:
    90px
    minmax(220px, 1fr)
    100px
    180px;

  gap:
    14px;

  align-items:
    center;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.02);
}


.activity-source {
  width:
    fit-content;

  padding:
    5px 8px;

  border-radius:
    999px;

  font-size:
    10px;

  text-transform:
    uppercase;

  direction:
    ltr;
}


.activity-webhook {
  color:
    #69b0ff;

  border:
    1px solid
    rgba(37,135,255,.35);

  background:
    rgba(37,135,255,.08);
}


.activity-execution {
  color:
    var(--yellow);

  border:
    1px solid
    rgba(255,213,35,.30);

  background:
    rgba(255,213,35,.07);
}


.activity-row time {
  color:
    var(--muted);

  font-size:
    11px;

  direction:
    ltr;

  text-align:
    left;
}


@media (
  max-width: 1000px
) {

  .activity-row {
    grid-template-columns:
      80px 1fr;
  }

  .activity-row time {
    grid-column:
      2;
  }
}


/* ===============================================
   CHATYCHAT_BATCH_A_CSS
   =============================================== */

.media-picker-toolbar,
.activity-toolbar {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin:
    10px 0 14px;
}


.media-picker {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(220px,1fr)
    );

  gap:
    12px;

  max-height:
    420px;

  overflow:
    auto;

  padding:
    3px;
}


.media-card {
  appearance:
    none;

  display:
    grid;

  gap:
    9px;

  width:
    100%;

  padding:
    14px;

  border-radius:
    15px;

  text-align:
    right;

  direction:
    rtl;

  cursor:
    pointer;

  color:
    var(--text);

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.09);
}


.media-card:hover {
  border-color:
    rgba(37,135,255,.45);

  box-shadow:
    0 0 20px
    rgba(37,135,255,.11);
}


.media-card.selected {
  border-color:
    var(--yellow);

  background:
    rgba(255,213,35,.07);

  box-shadow:
    0 0 22px
    rgba(255,213,35,.15);
}


.media-type {
  width:
    fit-content;

  font-size:
    10px;

  border:
    1px solid
    rgba(255,35,79,.35);

  color:
    #ff748d;

  border-radius:
    999px;

  padding:
    4px 8px;
}


.media-card small {
  direction:
    ltr;

  text-align:
    left;

  color:
    var(--muted);
}


.media-card a {
  color:
    #69adff;

  font-size:
    12px;

  text-decoration:
    none;
}


.activity-list {
  display:
    grid;

  gap:
    8px;
}


.activity-row {
  display:
    grid;

  grid-template-columns:
    minmax(220px,1.4fr)
    120px
    100px
    150px
    180px;

  gap:
    12px;

  align-items:
    center;

  padding:
    13px;

  border-radius:
    13px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.02);
}


.activity-row time {
  direction:
    ltr;

  text-align:
    left;

  color:
    var(--muted);

  font-size:
    11px;
}


.status-ready {
  color:
    var(--yellow);

  border:
    1px solid
    rgba(255,213,35,.34);

  background:
    rgba(255,213,35,.08);
}


@media (max-width: 1100px) {

  .activity-row {
    grid-template-columns:
      1fr 100px;
  }

}


/* =====================================================
   CHATYCHAT_BILINGUAL_CSS
   English above Persian
   ===================================================== */

.bi-label {
  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    2px;

  line-height:
    1.25;

  vertical-align:
    middle;
}


.bi-en {
  display:
    block;

  direction:
    ltr;

  text-align:
    left;

  font-size:
    .84em;

  font-weight:
    700;

  color:
    #ffffff;

  letter-spacing:
    .01em;
}


.bi-fa {
  display:
    block;

  direction:
    rtl;

  text-align:
    right;

  font-size:
    .82em;

  font-weight:
    500;

  color:
    rgba(
      255,
      255,
      255,
      .62
    );
}


.sidebar .bi-label,
.nav-item .bi-label {
  width:
    100%;

  align-items:
    flex-start;
}


.nav-item .bi-en {
  color:
    #ffffff;
}


.nav-item .bi-fa {
  color:
    rgba(
      255,
      255,
      255,
      .56
    );
}


button .bi-label {
  align-items:
    center;

  text-align:
    center;
}


label .bi-label {
  align-items:
    flex-start;
}


.modal .bi-en,
.panel .bi-en {
  color:
    #f4f7ff;
}


.modal .bi-fa,
.panel .bi-fa {
  color:
    #8f99ad;
}


@media (
  max-width: 780px
) {

  .bi-en {
    font-size:
      .82em;
  }

  .bi-fa {
    font-size:
      .80em;
  }

}


/* =====================================================
   CHATYCHAT_USERS_CSS
   ===================================================== */

.users-list {
  display:
    grid;

  gap:
    10px;
}


.user-row {
  display:
    grid;

  grid-template-columns:
    minmax(220px,1.5fr)
    minmax(140px,.8fr)
    110px
    minmax(220px,1fr);

  gap:
    14px;

  align-items:
    center;

  padding:
    14px 16px;

  border-radius:
    14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);
}


.user-row strong {
  display:
    block;

  margin-bottom:
    4px;
}


@media (
  max-width: 1000px
) {

  .user-row {
    grid-template-columns:
      1fr;
  }

}


/* =====================================================
   CHATYCHAT_PHASE2_CUSTOMERS_CSS
   ===================================================== */


.customers-list {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(300px, 1fr)
    );

  gap:
    14px;
}


.customer-card {

  display:
    grid;

  gap:
    16px;

  padding:
    18px;

  border-radius:
    18px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);
}


.customer-card-top {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    12px;
}


.customer-card-top strong {

  font-size:
    17px;
}


.customer-stats {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    8px;
}


.customer-stats > div {

  padding:
    11px 8px;

  border-radius:
    12px;

  text-align:
    center;

  background:
    rgba(37,135,255,.06);

  border:
    1px solid
    rgba(37,135,255,.12);
}


.customer-stats b {

  display:
    block;

  font-size:
    19px;

  color:
    var(--yellow);
}


.customer-stats span {

  display:
    block;

  margin-top:
    4px;

  font-size:
    10px;

  color:
    var(--muted);
}


.customer-owner {

  display:
    grid;

  gap:
    3px;
}


.customer-owner small {

  direction:
    ltr;

  text-align:
    left;

  color:
    var(--muted);
}


.status-suspended {

  color:
    var(--yellow);

  border:
    1px solid
    rgba(255,213,35,.32);

  background:
    rgba(255,213,35,.07);
}


.status-disabled {

  color:
    #ff718b;

  border:
    1px solid
    rgba(255,35,79,.32);

  background:
    rgba(255,35,79,.07);
}


/* =====================================================
   CHATYCHAT_PHASE2_INSTAGRAM_CSS
   ===================================================== */


.instagram-management-panel {
  max-width:
    980px;
}


.instagram-connection-card {

  margin-top:
    20px;

  padding:
    22px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.025);
}


.instagram-connected,
.instagram-disconnected {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  flex-wrap:
    wrap;
}


.instagram-account-main {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


.instagram-icon {

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  font-size:
    30px;

  border:
    1px solid
    rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.04);
}


.instagram-icon.connected {

  box-shadow:
    0 0 28px
    rgba(37,135,255,.16);
}


.instagram-status-line {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    5px;

  font-size:
    12px;

  color:
    var(--muted);
}


.instagram-account-actions {

  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;
}


.danger-btn {

  border:
    1px solid
    rgba(255,70,90,.35);

  background:
    rgba(255,40,65,.08);

  color:
    #ff7085;

  border-radius:
    10px;

  padding:
    10px 16px;

  cursor:
    pointer;
}


.danger-btn:hover {

  background:
    rgba(255,40,65,.15);
}


/* =====================================================
   CHATYCHAT_PHASE2_SUPERADMIN_WORKSPACE_CSS
   ===================================================== */


.tenant-workspace-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    rgba(3, 6, 18, .78);

  backdrop-filter:
    blur(10px);
}


.tenant-workspace-modal.open {

  display:
    flex;
}


.tenant-workspace-card {

  width:
    min(1180px, 96vw);

  max-height:
    92vh;

  overflow:
    auto;

  padding:
    24px;

  border-radius:
    24px;
}


.tenant-workspace-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;
}


.tenant-workspace-summary {

  display:
    grid;

  grid-template-columns:
    repeat(
      6,
      minmax(120px,1fr)
    );

  gap:
    10px;

  margin-bottom:
    18px;
}


.tenant-summary-card {

  padding:
    14px;

  border-radius:
    14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);
}


.tenant-summary-card span {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--muted);

  font-size:
    11px;
}


.tenant-summary-card strong {

  font-size:
    16px;
}


.tenant-workspace-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    14px;
}


.tenant-workspace-section {

  min-width:
    0;

  padding:
    18px;

  border-radius:
    18px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.02);
}


.tenant-workspace-wide {

  grid-column:
    1 / -1;
}


.tenant-workspace-section h3 {

  margin:
    0 0 14px;
}


.tenant-detail-list {

  display:
    grid;

  gap:
    9px;
}


.tenant-detail-list > div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    9px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.tenant-detail-list span {

  color:
    var(--muted);

  font-size:
    12px;
}


.tenant-scroll-list {

  display:
    grid;

  gap:
    8px;

  max-height:
    310px;

  overflow:
    auto;
}


.tenant-mini-row,
.tenant-activity-row {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    12px;

  padding:
    10px;

  border-radius:
    11px;

  background:
    rgba(255,255,255,.025);
}


.tenant-mini-row > div,
.tenant-activity-row > div {

  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.tenant-mini-row small,
.tenant-activity-row small {

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.tenant-mini-status {

  flex:
    0 0 auto;

  padding:
    4px 8px;

  border-radius:
    8px;

  font-size:
    10px;

  border:
    1px solid
    rgba(255,255,255,.09);
}


.tenant-instagram-box {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.tenant-instagram-box > div:last-child {

  display:
    grid;

  gap:
    4px;
}


.tenant-status-active {

  color:
    #8dffb1;
}


.tenant-status-suspended {

  color:
    var(--yellow);
}


.tenant-status-disabled {

  color:
    #ff718b;
}


.tenant-email {

  direction:
    ltr;

  text-align:
    left;
}


@media (max-width: 900px) {

  .tenant-workspace-summary {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .tenant-workspace-grid {

    grid-template-columns:
      1fr;
  }


  .tenant-workspace-wide {

    grid-column:
      auto;
  }
}


/* =====================================================
   CHATYCHAT_PHASE2_CUSTOMER_LIFECYCLE_CSS
   ===================================================== */


.tenant-lifecycle-controls {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    18px;

  flex-wrap:
    wrap;

  margin-bottom:
    18px;

  padding:
    15px 17px;

  border-radius:
    14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);
}


.tenant-lifecycle-controls > div {

  display:
    grid;

  gap:
    4px;
}


.tenant-protected-notice {

  color:
    var(--muted);
}


/* CHATYCHAT_DIRECT_CUSTOMER_LIFECYCLE_CSS */

.tenant-protected-inline {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    7px 10px;

  border-radius:
    9px;

  color:
    var(--muted);

  font-size:
    11px;

  border:
    1px solid
    rgba(255,255,255,.07);
}


/* =====================================================
   CHATYCHAT_PHASE3_BILLING_UI_CSS
   ===================================================== */


.billing-management-panel,
.billing-tenant-panel {
  margin-bottom: 22px;
}


.billing-plans-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(220px,1fr)
    );
  gap: 16px;
}


.billing-plan-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  border-radius: 18px;
  border:
    1px solid
    rgba(255,255,255,.08);
  background:
    rgba(255,255,255,.025);
}


.billing-plan-card:hover {
  border-color:
    rgba(255,255,255,.16);
}


.billing-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}


.billing-plan-top h3 {
  margin:
    4px 0 0;
}


.billing-price {
  text-align: left;
  white-space: nowrap;
  font-size: 20px;
}


.billing-price small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}


.billing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


.billing-tag {
  display: inline-flex;
  align-items: center;
  padding:
    5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background:
    rgba(59,130,246,.14);
  border:
    1px solid
    rgba(59,130,246,.25);
}


.billing-tag-muted {
  background:
    rgba(255,255,255,.04);
  border-color:
    rgba(255,255,255,.08);
  color:
    var(--muted);
}


.billing-limit-list {
  display: grid;
  gap: 8px;
  margin-top: auto;
}


.billing-limit-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding:
    8px 0;
  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.billing-limit-list span {
  color:
    var(--muted);
  font-size: 11px;
}


.billing-limit-list b {
  text-align: left;
  font-size: 12px;
}


.billing-customer-picker {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}


.billing-customer-picker label {
  flex:
    1 1 320px;
}


.tenant-billing-details {
  min-height: 100px;
}


.tenant-billing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}


.tenant-billing-header h3 {
  margin:
    4px 0;
}


.billing-usage-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(150px,1fr)
    );
  gap: 12px;
  margin-bottom: 18px;
}


.billing-usage-card {
  display: grid;
  gap: 6px;
  padding: 15px;
  border-radius: 14px;
  border:
    1px solid
    rgba(255,255,255,.07);
  background:
    rgba(255,255,255,.025);
}


.billing-usage-card span,
.billing-usage-card small {
  color:
    var(--muted);
}


.billing-usage-card strong {
  font-size: 22px;
}


.billing-progress-block {
  margin-bottom: 20px;
}


.billing-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}


.billing-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(255,255,255,.07);
}


.billing-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #8b5cf6
    );
}


.billing-subscription-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(180px,1fr)
    );
  gap: 10px;
  margin-bottom: 20px;
}


.billing-subscription-grid > div {
  display: grid;
  gap: 6px;
  padding: 13px;
  border-radius: 12px;
  background:
    rgba(255,255,255,.025);
  border:
    1px solid
    rgba(255,255,255,.06);
}


.billing-id-value {
  overflow-wrap: anywhere;
  font-size: 11px;
}


.tenant-subscription-form {
  padding-top: 18px;
  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.billing-subscription-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}


.billing-plan-modal-card {
  width:
    min(850px,94vw);
}


.billing-plan-form {
  display: grid;
  gap: 16px;
}


.billing-toggle-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(160px,1fr)
    );
  gap: 10px;
}


.billing-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: 10px;
  border:
    1px solid
    rgba(255,255,255,.06);
  background:
    rgba(255,255,255,.02);
}


.billing-toggle-grid input {
  width: auto;
}


@media (
  max-width: 1150px
) {

  .billing-plans-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(220px,1fr)
      );
  }


  .billing-usage-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(150px,1fr)
      );
  }


  .billing-subscription-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(180px,1fr)
      );
  }
}


@media (
  max-width: 680px
) {

  .billing-plans-grid,
  .billing-usage-grid,
  .billing-subscription-grid,
  .billing-toggle-grid {
    grid-template-columns:
      1fr;
  }


  .billing-plan-top,
  .tenant-billing-header {
    flex-direction:
      column;
  }
}


/* =====================================================
   CHATYCHAT_PHASE3_STRIPE_TENANT_UI_CSS
   ===================================================== */


.stripe-live-checkout-btn {
  position: relative;
}


.stripe-live-checkout-btn::before {
  content: "LIVE";
  display: inline-flex;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  background:
    rgba(34,197,94,.16);
  border:
    1px solid
    rgba(34,197,94,.32);
}


.stripe-live-warning {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border:
    1px solid
    rgba(245,158,11,.22);
  background:
    rgba(245,158,11,.06);
}


.stripe-live-warning strong {
  color: #fbbf24;
  font-size: 11px;
  letter-spacing: .08em;
}


.stripe-live-warning span,
.stripe-live-warning small {
  color: var(--muted);
}


.stripe-live-warning small {
  direction: rtl;
  text-align: right;
}


.billing-subscription-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* ==================================================
   CHATYCHAT_NOTIFICATION_SYSTEM_V1
   ================================================== */

.chatychat-notification-host {
  position:
    fixed;

  top:
    22px;

  right:
    22px;

  z-index:
    100000;

  width:
    min(
      420px,
      calc(100vw - 32px)
    );

  display:
    grid;

  gap:
    12px;

  pointer-events:
    none;
}


.chatychat-toast {
  display:
    grid;

  grid-template-columns:
    38px 1fr 30px;

  align-items:
    start;

  gap:
    11px;

  padding:
    14px;

  border-radius:
    16px;

  background:
    rgba(
      12,
      17,
      29,
      .97
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  box-shadow:
    0 18px 55px
    rgba(
      0,
      0,
      0,
      .48
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  opacity:
    0;

  transform:
    translateY(-12px)
    scale(.98);

  transition:
    opacity .2s ease,
    transform .2s ease;

  pointer-events:
    auto;

  direction:
    ltr;
}


.chatychat-toast-show {
  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}


.chatychat-toast-leave {
  opacity:
    0;

  transform:
    translateY(-8px)
    scale(.98);
}


.chatychat-toast-icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  font-weight:
    900;

  font-size:
    17px;
}


.chatychat-toast-content {
  min-width:
    0;

  line-height:
    1.55;

  color:
    #f8f9ff;
}


.chatychat-toast-content strong {
  display:
    block;

  margin-bottom:
    3px;

  font-size:
    13px;
}


.chatychat-toast-content div {
  white-space:
    pre-line;

  overflow-wrap:
    anywhere;

  font-size:
    13px;

  color:
    #c8cedd;

  unicode-bidi:
    plaintext;
}


.chatychat-toast-close {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    #8991a6;

  cursor:
    pointer;

  font-size:
    19px;
}


.chatychat-toast-close:hover {
  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      .08
    );
}


.chatychat-toast-success {
  border-color:
    rgba(
      70,
      220,
      140,
      .35
    );
}


.chatychat-toast-success
.chatychat-toast-icon {
  color:
    #79efad;

  background:
    rgba(
      70,
      220,
      140,
      .12
    );
}


.chatychat-toast-error {
  border-color:
    rgba(
      255,
      76,
      110,
      .42
    );
}


.chatychat-toast-error
.chatychat-toast-icon {
  color:
    #ff7892;

  background:
    rgba(
      255,
      76,
      110,
      .13
    );
}


.chatychat-toast-warning {
  border-color:
    rgba(
      255,
      204,
      77,
      .40
    );
}


.chatychat-toast-warning
.chatychat-toast-icon {
  color:
    #ffd765;

  background:
    rgba(
      255,
      204,
      77,
      .12
    );
}


.chatychat-toast-info {
  border-color:
    rgba(
      72,
      150,
      255,
      .38
    );
}


.chatychat-toast-info
.chatychat-toast-icon {
  color:
    #76adff;

  background:
    rgba(
      72,
      150,
      255,
      .12
    );
}


@media (
  max-width:
    640px
) {

  .chatychat-notification-host {
    top:
      12px;

    right:
      12px;

    left:
      12px;

    width:
      auto;
  }
}



/* ==================================================
   CHATYCHAT_ANALYTICS_UI_V1
   ================================================== */

.analytics-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;
}


.analytics-head h2 {
  margin:
    4px 0 5px;
}


.analytics-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    15px;

  margin-bottom:
    20px;
}


.analytics-kpi {
  border-radius:
    18px;

  padding:
    20px;

  min-height:
    132px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    7px;
}


.analytics-kpi span {
  color:
    #aeb6ca;

  font-size:
    13px;
}


.analytics-kpi strong {
  font-size:
    31px;

  line-height:
    1;
}


.analytics-kpi small {
  color:
    var(--muted);
}


.analytics-main-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.6fr
    )
    minmax(
      320px,
      .9fr
    );

  gap:
    18px;
}


.analytics-trend {
  height:
    310px;

  display:
    grid;

  grid-template-columns:
    repeat(
      14,
      minmax(
        22px,
        1fr
      )
    );

  align-items:
    end;

  gap:
    8px;

  padding:
    20px 0 0;

  overflow-x:
    auto;
}


.analytics-day {
  min-width:
    28px;

  height:
    260px;

  display:
    grid;

  grid-template-rows:
    1fr auto auto;

  gap:
    6px;

  text-align:
    center;

  align-items:
    end;
}


.analytics-bar-shell {
  width:
    100%;

  height:
    190px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    center;

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );
}


.analytics-bar {
  width:
    min(
      28px,
      75%
    );

  min-height:
    2px;

  border-radius:
    9px 9px 3px 3px;

  background:
    linear-gradient(
      180deg,
      var(--blue),
      rgba(
        37,
        135,
        255,
        .32
      )
    );

  box-shadow:
    0 0 18px
    rgba(
      37,
      135,
      255,
      .22
    );

  transition:
    height .3s ease;
}


.analytics-day strong {
  font-size:
    12px;
}


.analytics-day small {
  color:
    var(--muted);

  font-size:
    10px;
}


.analytics-top-list {
  display:
    grid;

  gap:
    10px;
}


.analytics-top-row {
  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .055
    );
}


.analytics-top-row > div:first-child {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.analytics-top-row strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.analytics-top-row small {
  color:
    var(--muted);
}


.analytics-top-stats {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  white-space:
    nowrap;

  font-size:
    11px;
}


.analytics-top-stats span {
  color:
    var(--muted);
}


.analytics-top-stats strong {
  color:
    var(--yellow);
}


@media (
  max-width:
    1050px
) {

  .analytics-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .analytics-main-grid {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width:
    640px
) {

  .analytics-head {
    flex-direction:
      column;
  }


  .analytics-metrics {
    grid-template-columns:
      1fr;
  }


  .analytics-top-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .analytics-top-stats {
    flex-wrap:
      wrap;
  }
}


/* =========================================================
   CHATYCHAT ADMIN — FINAL UI 2026
   ========================================================= */

:root {
  --cc-bg: #070a12;
  --cc-bg-soft: #0d111d;
  --cc-panel: rgba(17, 23, 38, .78);
  --cc-panel-strong: rgba(22, 29, 47, .94);
  --cc-border: rgba(255,255,255,.08);
  --cc-border-strong: rgba(255,255,255,.13);
  --cc-text: #f8fafc;
  --cc-muted: #8f9bb3;
  --cc-primary: #7c5cff;
  --cc-primary-soft: rgba(124,92,255,.16);
  --cc-cyan: #22d3ee;
  --cc-green: #35d07f;
  --cc-red: #ff5f6d;
  --cc-yellow: #f7c948;
  --cc-radius: 22px;
  --cc-radius-sm: 14px;
  --cc-shadow: 0 25px 70px rgba(0,0,0,.28);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--cc-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, rgba(124,92,255,.16), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(34,211,238,.09), transparent 24%),
    radial-gradient(circle at 60% 100%, rgba(255,95,109,.06), transparent 28%),
    var(--cc-bg);
  color: var(--cc-text);
}

.ambient {
  opacity: .35 !important;
  filter: blur(110px) !important;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-inline-end: 1px solid var(--cc-border);
  background: rgba(8, 12, 21, .92);
  backdrop-filter: blur(24px);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.brand {
  padding: 4px 10px 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cc-border);
}

.brand-logo-image {
  width: 46px;
  height: 46px;
}

.brand-name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--cc-muted);
  margin-top: 3px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
}

.nav-item {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #aab3c5;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.05);
  transform: translateX(-2px);
}

.nav-item.active {
  color: #fff;
  background:
    linear-gradient(135deg,
      rgba(124,92,255,.24),
      rgba(124,92,255,.10));
  border-color: rgba(124,92,255,.35);
  box-shadow:
    inset 3px 0 0 #8b73ff,
    0 8px 24px rgba(124,92,255,.08);
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--cc-border);
}

.phase-pill {
  background: rgba(53,208,127,.1);
  color: #63e6a1;
  border: 1px solid rgba(53,208,127,.18);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  width: fit-content;
  margin-bottom: 12px;
}

.logout-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,95,109,.18);
  background: rgba(255,95,109,.07);
  color: #ff8993;
  font-weight: 700;
}

.main-content {
  width: 100%;
  min-width: 0;
  padding: 30px 36px 60px;
}

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--cc-primary);
  font-weight: 900;
  margin-bottom: 5px;
}

#pageTitle {
  margin: 0;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -.04em;
}

.tenant-card {
  min-width: 220px;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,.035);
  box-shadow: none;
}

.status-dot {
  width: 9px;
  height: 9px;
  background: var(--cc-green);
  box-shadow: 0 0 0 5px rgba(53,208,127,.12);
}

.view {
  animation: ccViewIn .22s ease;
}

@keyframes ccViewIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.glass,
.panel,
.metric-card {
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  box-shadow: var(--cc-shadow);
  backdrop-filter: blur(20px);
}

.panel {
  border-radius: var(--cc-radius);
  padding: 24px;
}

.panel-head {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cc-border);
}

.panel-head h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.panel-head p,
.muted {
  color: var(--cc-muted);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.metric-card {
  min-height: 142px;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  inset-inline-end: -40px;
  top: -40px;
  border-radius: 999px;
  background: currentColor;
  opacity: .045;
}

.metric-card span {
  font-size: 13px;
  color: var(--cc-muted);
}

.metric-card strong {
  display: block;
  margin: 12px 0 4px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}

.metric-card small {
  color: #68738b;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px,.75fr);
  gap: 18px;
}

.primary-btn,
.secondary-btn,
button[type="submit"] {
  border-radius: 12px;
  min-height: 42px;
  padding: 0 17px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  transition: .18s ease;
}

.primary-btn,
button[type="submit"] {
  color: #fff;
  background: linear-gradient(135deg,#7c5cff,#6548e8);
  box-shadow: 0 10px 26px rgba(124,92,255,.22);
}

.primary-btn:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(124,92,255,.30);
}

.secondary-btn {
  color: #dbe1ed;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--cc-border);
}

input,
textarea,
select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--cc-border);
  background: rgba(4,7,13,.56);
  color: #f8fafc;
  min-height: 44px;
  padding: 10px 13px;
  outline: none;
  transition: .16s ease;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(124,92,255,.68);
  box-shadow: 0 0 0 3px rgba(124,92,255,.10);
}

label {
  color: #c9d0df;
  font-size: 13px;
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
}

thead th {
  color: #77839b;
  font-size: 11px;
  font-weight: 800;
  text-align: start;
  padding: 8px 11px;
}

tbody td {
  background: rgba(255,255,255,.026);
  border-top: 1px solid rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.045);
  padding: 13px 11px;
}

tbody td:first-child {
  border-start-start-radius: 11px;
  border-end-start-radius: 11px;
}

tbody td:last-child {
  border-start-end-radius: 11px;
  border-end-end-radius: 11px;
}

.modal {
  backdrop-filter: blur(8px);
}

.modal-backdrop {
  background: rgba(0,0,0,.68);
}

.modal-card {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border-strong);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.48);
}

.automation-list > *,
#activityList > *,
#customersList > *,
#usersList > * {
  border-color: var(--cc-border) !important;
}

.page-actions {
  margin-bottom: 18px;
}

.page-actions h2 {
  margin-bottom: 5px;
}

#instagramConnectionCard,
.instagram-summary {
  border-radius: 16px;
}

#analyticsTrend,
#analyticsTopAutomations {
  min-height: 180px;
}

.notification,
#chatychatNotificationHost > * {
  border-radius: 14px !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .metrics-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 14px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--cc-border);
  }

  .sidebar nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sidebar-bottom {
    display: none;
  }

  .main-content {
    padding: 20px 14px 50px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tenant-card {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 17px;
    border-radius: 18px;
  }

  .metric-card {
    min-height: 120px;
  }
}


/* CHATYCHAT FINAL SIDEBAR LINKS */

.sidebar nav a.nav-item {
  text-decoration: none;
}

.chatychat-extra-nav {
  display: none !important;
}


/* CHATYCHAT CLEAN ACTIVITY UI */

#activityList .activity-row {
  display: grid !important;
  grid-template-columns: 120px minmax(320px, 1fr) 110px 190px !important;
  align-items: center !important;
  gap: 20px !important;
  direction: ltr !important;
  min-height: 92px;
  padding: 18px 20px !important;
}

#activityList .activity-row > div:nth-child(2) {
  min-width: 0;
  text-align: left;
  direction: ltr;
}

#activityList .activity-row > div:nth-child(2) strong {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  white-space: normal;
}

#activityList .activity-row > div:nth-child(2) .muted {
  margin-top: 5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#activityList .activity-row time {
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
}

#activityList .activity-source {
  white-space: nowrap;
}

@media (max-width: 900px) {
  #activityList .activity-row {
    grid-template-columns: 1fr !important;
  }

  #activityList .activity-row time {
    text-align: left;
  }
}