/*latest new pages*/



  .faq-heading { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }

  .faq-card {
    background: #fff;
    border: 1px solid #e4e6ee;
    border-radius: 14px;
    padding: 1.2rem;
    height: 100%;
  }

  .faq-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: #eceefb;
    color: #3b5bfd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
  }

  .faq-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #1f2430;
  }

  .faq-sub {
    color: #3b5bfd;
    font-size: 0.82rem;
    margin-bottom: .4rem;
  }

  .faq-actions { display: flex; gap: 8px; }

  .btn-faq {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 12px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2430;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .btn-faq:hover { background: #f7f8fb; }

  .guide-chapters {
  font-size: 12px;
  color: #474D58;
}



  

  .section-heading { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }

  /* AUTHENTICATOR ROW */
  .authenticator-row {
    background: #eef1fd;
    border-radius: 20px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem; border: 1px solid #3F82F040;
  }

  .auth-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #3b5bfd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .auth-title { margin: 0; font-weight: 700; font-size: 0.92rem; }
  .auth-sub { margin: 0; font-size: 0.8rem; color: #8b90a5; }

  .active-badge {
    background: #e7f7ef;
    color: #1e9e5f;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: auto;
  }

  /* SESSION ROWS */
  .session-row {
    border: 1px solid #e4e6ee;
    border-radius: 20px;
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .session-title { margin: 0; font-weight: 700; font-size: 0.9rem; }
  .session-sub { margin: 0; font-size: 0.8rem; color: #8b90a5; }

  .this-device-badge {
    background: #e7f7ef;
    color: #1e9e5f;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
  }

  .revoke-link {
    color: #d84545;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
  }

  /* RECOVERY */
  .recovery-desc { color: #6b7280; font-size: 0.85rem; margin-bottom: 1.2rem; }

  .recovery-code {
    border: 1px solid #e4e6ee;
    border-radius: 30px;
    padding: 0.6rem 1.2rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }

  .btn-download-code {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 30px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2430;
    width: 100%;
  }

  .btn-regenerate {
    background: #3b5bfd;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    width: 100%;
  }
  .btn-regenerate:hover { background: #2f4bdb; color: #fff; }



  

  .panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .panel-title { font-weight: 700; font-size: 1rem; margin: 0; }
  .panel-meta { font-size: 0.82rem; color: #8b90a5; }

  /* SESSION ROWS */
  .session-row.log {
    background: #FAFCFE;
    border-radius: 20px;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px; border: 1px solid #D7DBE0B2; justify-content: start;
  }

  .session-icon {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  background: #3F82F01F;
  color: #3F82F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

  .session-title { margin: 0; font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
  .session-sub { margin: 0; font-size: 0.78rem; color: #8b90a5; }

  .current-badge {
    background: #e7f7ef;
    color: #1e9e5f;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    border-radius: 6px;
  }

  .btn-revoke {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2430;
    margin-left: auto;
    flex-shrink: 0;
  }

  .btn-signout-session {
    background: #1e2fa8;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.85rem;
  }

  .btn-signout-all {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2430;
  }

  /* TRUSTED DEVICES */
  .device-card {
    background: #fff;
    border: 1px solid #edeef3;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 10px;
  }

  .device-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .device-title { margin: 0; font-weight: 700; font-size: 0.88rem; }
  .device-sub { margin: 0; font-size: 0.78rem; color: #8b90a5; }

  .btn-revoke-full {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 8px;
    padding: 5px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2430;
    width: 100%;
  }

  /* ACTIVITY LOG */
  .activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f1f2f7;
  }
  .activity-item:last-child { border-bottom: none; }

  

  .activity-title { margin: 0; font-weight: 700; font-size: 0.88rem; }
  .activity-sub { margin: 0; font-size: 0.78rem; color: #8b90a5; }

  .btn-icon-header {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2430;
  }









/* HEADER */
  .page_header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.8rem; }
  .page-title { font-weight: 800; font-size: 1.5rem; margin: 0 0 4px; }
  .page_sub { color: #8b90a5; font-size: 0.88rem; margin: 0; }

  .btn-outline-settings { border: 1px solid #e4e6ee; background: #fff; border-radius: 16px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.85rem; color: #1f2430; }

  .btn-save-settings {
    background: #1e2fa8; color: #fff; border: none; border-radius: 10px;
    padding: 0.55rem 1.2rem; font-weight: 600; font-size: 0.85rem;
  }
  .btn-save-settings:hover { background: #172589; color: #fff; }

  /* SECTION LABEL */
  .section-label { font-size: 0.72rem; letter-spacing: 1.5px; color: #9096ac; font-weight: 700; margin: 1.6rem 0 0.8rem; }

  /* SETTINGS ROW */
  .settings-row {
    border: 1px solid #e4e6ee;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    cursor: pointer;
  }
  .settings-row:hover { background: #f9fafc; }

  .row-icon {
    width: 42px; height: 42px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .row-title { margin: 0; font-weight: 700; font-size: 0.92rem; }
  .row-sub { margin: 0; font-size: 0.8rem; color: #8b90a5; }

  .row-chevron { margin-left: auto; color: #b0b4c2; }

  /* FOOTER */
  .settings-footer {
    border-top: 1px solid #eceef3;
    padding-top: 1.2rem;
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-note { color: #8b90a5; font-size: 0.85rem; }
.settings-list-wrap { width: 100%; }

  .settings-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 1.4rem 0;
    border-bottom: 1px solid #eceef3;
  }
  .settings-field-row:last-child { border-bottom: none; }

  .field-info { width: 260px; flex-shrink: 0; }

  .field_label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f2430;
    margin: 0 0 2px;
  }

  .field-desc {
    font-size: 0.8rem;
    color: #8b90a5;
    margin: 0;
  }

  .field-input-wrap { flex: 1; }

  .settings-input {
  width: 100%;
  background: #FAFCFE;
  border: 1px solid #D7DBE0;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #1f2430;
}
  .settings-input:focus {
    outline: none;
    border-color: #1e2fa8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,47,168,0.08);
  }


.lang-card {
    border: 1px solid #e4e6ee;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
  }

  .lang-card.selected {
    border: 1px solid #1E41A8; background: #1E41A80A;
  }

  .lang-flag {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .lang-name {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f2430;
  }

  .lang-format {
    margin: 0;
    font-size: 0.78rem;
    color: #8b90a5;
  }

  .lang-check {
    margin-left: auto;
    color: #1e2fa8;
    font-size: 1.2rem;
    flex-shrink: 0;
  }


/* TABLE HEADER */
  .table-head-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid #eceef3;
  }

  .col-header {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #9096ac;
    font-weight: 700;
    text-align: center;
  }
  .col-header.event-col { text-align: left; }

  /* EVENT ROW */
  .event-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid #f1f2f7;
  }

  .event-title { margin: 0; font-weight: 700; font-size: 0.9rem; }
  .event-sub { margin: 0; font-size: 0.8rem; color: #8b90a5; }

  /* TOGGLE SWITCH */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    margin: 0 auto;
  }
  .toggle-switch input { display: none; }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e4e6ee;
    border-radius: 30px;
    transition: 0.2s;
  }
  .toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
  }
  .toggle-switch input:checked + .toggle-slider { background-color: #1e2fa8; }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

  .toggle-cell { display: flex; justify-content: center; }




  .card-heading { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
  .card-desc { color: #8b90a5; font-size: 0.85rem; margin-bottom: 1.4rem; }

  .field-label {
    font-size: 0.7rem; letter-spacing: 1px; color: #9096ac;
    font-weight: 700; margin-bottom: 6px; display: block;
  }

  .form-control-contact {
  border: 1px solid #D7DBE0;
  border-radius: 16px;
  padding: 0.9rem 0.9rem;
  font-size: 0.9rem;
  background: #FAFCFE;
}
textarea.form-control{ height:140px; }
  

  .attachment-row {
    border: 1px dashed #D7DBE0;
    border-radius: 16px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #6b7280; background: #FAFCFE;
  }

  .add-file-link {
    margin-left: auto;
    color: #1f2430;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
  }

  .btn-cancel-contact {
    border: 1px solid #e4e6ee;
    background: #fff;
    border-radius: 10px;
    padding: 0.6rem 1.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2430;
  }

  .btn-send-email {
    background: #1e2fa8;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.3rem;
    font-weight: 600;
    font-size: 0.85rem;
  }
  .btn-send-email:hover { background: #172589; color: #fff; }

  /* RIGHT SIDE */
  .email-row {
  background: #FAFCFE;
  border-radius: 16px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  border: 1px solid #D7DBE0;
}

  .email-icon {
    border-radius: 8px;
    color: #1E41A8;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .email-addr { margin: 0; font-weight: 700; font-size: 0.88rem; }
  .email-desc { margin: 0; font-size: 0.78rem; color: #8b90a5; }

  .article-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #D7DBE0;
  background: #FAFCFE;
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
 

  .article-icon {
    color: #1E41A8;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
  }

  .article-title { margin: 0; font-weight: 600; font-size: 0.88rem; }
  .article-chevron { margin-left: auto; color: #080D16; }



  
  /* TOP STAT CARDS */
  .stat-card-billing { background: #fff; border: 1px solid #e4e6ee; border-radius: 14px; padding: 1rem 1.2rem; overflow:hidden; position:relative; }
  .stat-card-billing::after {
  content: "";
  position: absolute;
  top: -23px;
  right: -20px;
  width: 95.87px;
  height: 95.87px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,166,244,0.20) 0%, rgba(0,166,244,0.05) 100%);
  filter: blur(40px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.stat-card-billing.one::after { background: linear-gradient(135deg, rgba(0, 188, 125, 0.20) 0%, rgba(0, 188, 125, 0.05) 100%); }
.stat-card-billing.two::after { background: linear-gradient(135deg, rgba(142, 81, 255, 0.20) 0%, rgba(142, 81, 255, 0.05) 100%); }
.stat-card-billing.three::after { background: linear-gradient(135deg, rgba(254, 154, 0, 0.20) 0%, rgba(254, 154, 0, 0.05) 100%); }



  .stat-label-b { font-size: 0.68rem; letter-spacing: 1px; color: #9096ac; font-weight: 700; }
  .stat-value-b { font-weight: 800; font-size: 1.15rem; margin: 6px 0 2px; }
  .stat-sub-b { font-size: 0.78rem; color: #8b90a5; }

  .stat-icon-b {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; float: right;
  }

  .active-dot-text { color: #1e9e5f; font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
  .active-dot-text .dot { width: 6px; height: 6px; background: #1e9e5f; border-radius: 50%; }

  /* CURRENT SUBSCRIPTION */
  .label-small-b { font-size: 0.68rem; letter-spacing: 1px; color: #9096ac; font-weight: 700; text-transform: uppercase; }

  .active-badge-lg { background: #e7f7ef; color: #1e9e5f; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; }
  .active-badge-lg .dot { width: 6px; height: 6px; background: #1e9e5f; border-radius: 50%; }

  .field-item-b { margin-bottom: 1rem; }
  .field-label-b { color: #6b7280; font-size: 0.85rem; margin-bottom: 2px; }
  .field-value-b { font-weight: 700; font-size: 0.92rem; }

  .btn-plan-details { background: #1e2fa8; color: #fff; border: none; border-radius: 10px; padding: 0.55rem 1.2rem; font-weight: 600; font-size: 0.85rem; }
  .btn-plan-details:hover { background: #172589; color: #fff; }

  .btn-download-invoice { border: 1px solid #e4e6ee; background: #fff; border-radius: 10px; padding: 0.55rem 1.2rem; font-weight: 600; font-size: 0.85rem; color: #1f2430; }

  /* BILLING SUMMARY */
  .summary-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid #f1f2f7; font-size: 0.88rem; }
  .summary-row:last-child { border-bottom: none; }
  .summary-label { color: #6b7280; }
  .summary-value { font-weight: 700; }

  /* INVOICE TABLE */
  .table-invoice thead th {
    font-size: 0.68rem; letter-spacing: 1px; color: #9096ac; font-weight: 700;
    background: #f7f8fb; padding: 0.8rem 0.7rem;
  }
  .table-invoice td { padding: 0.9rem 0.7rem; border-bottom: 1px solid #f3f4f8; vertical-align: middle; }

  .paid-badge { background: #e7f7ef; color: #1e9e5f; font-size: 0.75rem; font-weight: 600; padding: 3px 12px; border-radius: 20px; }
  .pdf-link { color: #1e2fa8; font-weight: 600; text-decoration: none; font-size: 0.85rem; }

  .btn-outline-billing { border: 1px solid #e4e6ee; background: #fff; border-radius: 10px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.85rem; color: #1f2430; }

  /* PLAN DETAILS BADGE */
  .professional-badge { background: #1e2fa8; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; }

  .feature-check { color: #1e9e5f; font-size: 0.85rem; margin-right: 6px; }
  .feature-item { font-size: 0.88rem; margin-bottom: 0.6rem; }


























  .single-post table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

.single-post td, .single-post th {
  border: 1px solid #a1a1a1;
  text-align: left;
  padding: 8px;
}

.single-post tr:nth-child(even) {
  background-color: #f6f6f6;
}



























.notifs .section-label{ color: #080D16; }
  .notif-card {
    border-radius: 20px;
    padding: 1rem 1.2rem;
    height: 100%;
  }
  .notif-card.info-bg { background: #1E41A80A; border: 1px solid #1E41A840; }
  .notif-card.default-bg { background: #fff; border: 1px solid #e4e6ee; }

  .notif-icon {
    width: 43px; height: 43px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0; background: #1E41A81A; color: #1E41A8;
  }

  
  .title-dot { width: 8px; height: 8px; background: #1E41A8; border-radius: 50%; display: inline-block; }

  .notif-badge {
    font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  }
  .notif-badge.info { background: #3F82F01A; color: #1E41A8; }
  .notif-badge.review { background: #00BAD11A; color: #00BAD1; }
  .notif-badge.pending { background: #fdf1e3; color: #c98a2c; }
  .notif-badge.error { background: #E62C2C1A; color: #E62C2C; }
  .notif-badge.success { background: #23A1361A; color: #23A136; }
  .notif-badge.disputed { background: #F05D001A; color: #F05D00; }
  .notif-badge .b-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  .notif-desc { margin: 4px 0 0; font-size: 0.85rem; color: #4a4f5c; line-height: 1.4; }
  .notif-time { margin: 8px 0 0; font-size: 12px; color: #474D58; }

  .faq-sub_res{ font-size:12px; }

















  .app-shell{
    height:100vh;
    padding:0px;
  }

  .app-container{
    display:flex;
    height:100%;
  }

  /* ---------- SIDEBAR ---------- */
  .sidebar_inbox{
    width:34%;
    min-width:300px;
    background:var(--panel-bg);
    border:1px solid #D7DBE0;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    margin-right:16px;
    overflow:hidden;
  }

  .search-wrap{
    padding:16px 40px 16px 25px;
  }

  .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 0px auto;
  border-radius: 16px;
  background: transparent;
  border: 1px solid #D7DBE0;
}

  .search-box svg{ flex-shrink:0; color:#8a90a0; }

  .search-box input{
    border:none;
    background:transparent;
    outline:none;
    width:100%;
    font-size:14px;
    color:var(--text-dark);
  }

  .search-box input::placeholder{ color:#8a90a0; }

  .conversation-list{
    flex:1;
    overflow-y:auto; padding-bottom: 50px;
  }

  .conv-item{
    display:flex;
    gap:12px;
    padding:16px;
    border:1px solid #D7DBE0;
    cursor:pointer;
    position:relative;
    transition:background .12s ease; width: 90%;
  margin: 10px auto 0px; border-radius: 16px;
  }

  .conv-item:hover{ background:#fafbfc; }

  .conv-item.active{
    background:#1E41A80A; box-shadow: 0px 10px 28px -22px #0F172A66;
  }

  .conv-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
  }

  .conv-body{
    flex:1;
    min-width:0;
  }

  .conv-top-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
  }

  .conv-name{
    font-weight:600;
    font-size:14.5px;
    color:var(--text-dark);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .conv-meta{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }

  .conv-time{
    font-size:12px;
    color:#8a90a0;
    white-space:nowrap;
  }

  .unread-badge{
    background:var(--main-color);
    color:#fff;
    font-size:11px;
    font-weight:600;
    width:18px;
    height:18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .conv-subject{
    font-weight:600;
    font-size:14px;
    color:var(--text-dark);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .conv-preview{
    font-size:13px;
    color:#8a90a0;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ---------- MAIN PANEL ---------- */
  .main-panel{
    flex:1;
    background:var(--panel-bg);
    border:1px solid #D7DBE0;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .thread-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:20px 24px;
    border-bottom:1px solid #D7DBE0;
  }

  .thread-title{
    font-size:18px;
    font-weight:700;
    color:var(--text-dark);
    margin:0;
  }

  .thread-subtitle{
    font-size:13px;
    color:#8a90a0;
    margin-top:4px;
  }

  .header-actions{
    display:flex;
    gap:10px;
    flex-shrink:0;
  }

  .btn-outline-soft{
    border:1px solid #D7DBE0;
    background:#fff;
    color:var(--text-dark);
    font-size:13.5px;
    font-weight:600;
    padding:7px 16px;
    border-radius:8px;
    transition:background .12s ease;
  }

  .btn-outline-soft:hover{
    background:var(--page-bg);
    color:var(--text-dark);
  }

  .message-thread{
    flex:1;
    overflow-y:auto;
    padding:24px;
    background:#fafcfe;
  }

  .msg-row{
    display:flex;
    margin-bottom:22px;
    max-width:100%;
  }

  .msg-row.incoming{ justify-content:flex-start; }
  .msg-row.outgoing{ justify-content:flex-end; }

  .msg-col{
    display:flex;
    flex-direction:column;
    max-width:62%;
  }

  .msg-row.outgoing .msg-col{ align-items:flex-end; }
  .msg-row.incoming .msg-col{ align-items:flex-start; }

  .msg-with-avatar{
    display:flex;
    gap:10px;
    align-items:flex-start;
  }

  .msg-row.outgoing .msg-with-avatar{ flex-direction:row-reverse; }

  .msg-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
  }

  .msg-meta{
    font-size:12.5px;
    margin-bottom:6px;
    color:#5b6072;
  }

  .msg-row.outgoing .msg-meta{ text-align:left; color:#fff; }

  .msg-meta .sender{
    font-weight:600;
    color:var(--text-dark);
  }

  

  .bubble{
    padding:14px 16px;
    border-radius:12px;
    font-size:14.5px;
    line-height:1.5;
  }

  .msg-row.incoming .bubble{
    padding: 0;
  }

  .msg-row.outgoing .bubble{ padding: 0;
    color:#fff;
  }

  /* ---------- REPLY BAR ---------- */
  .reply-bar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 24px;
    border-top:1px solid #D7DBE0;
    background:var(--panel-bg);
  }

  .attach-btn{
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid #D7DBE0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#5b6072;
    flex-shrink:0;
    cursor:pointer;
  }

  .attach-btn:hover{ background:var(--page-bg); }

  .reply-input{
    flex:1;
    border:1px solid #D7DBE0;
    background:var(--page-bg);
    border-radius:10px;
    padding:11px 16px;
    font-size:14px;
    outline:none;
  }

  .reply-input::placeholder{ color:#8a90a0; }

  .send-btn{
    background:var(--main-color);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 20px;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    transition:background .12s ease;
  }

  .send-btn:hover{ background:#2740b5; color:#fff; }

  /* ---------- SCROLLBARS ---------- */
  .conversation-list::-webkit-scrollbar,
  .message-thread::-webkit-scrollbar{ width:6px; }
  .conversation-list::-webkit-scrollbar-thumb,
  .message-thread::-webkit-scrollbar-thumb{
    background:#d8dae1;
    border-radius:10px;
  }


  .msg-with-avatar .income_msg {
  box-shadow: 0px 6px 18px -14px #0F172A59;
  background: #fff;
  border: 1px solid #D7DBE0;
  padding: 15px;
  border-radius: 16px;
}

.msg-row.outgoing .out_msg {
  background: var(--main-color);
  box-shadow: 0px 6px 18px -14px #0F172A59;
  border: 1px solid var(--main-color);
  padding: 15px;
  border-radius: 16px;
}


  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .app-shell{ padding:10px; }
    .app-container{ flex-direction:column; height:auto; min-height:calc(100vh - 20px); }
    .sidebar_inbox{
      width:100%;
      margin-right:0;
      margin-bottom:12px;
      max-height:320px;
    }
    .main-panel{ min-height:480px; }
    .msg-col{ max-width:80%; }
  }






  /* ---------- MODAL OVERRIDES ---------- */
  .modal-content{
    border-radius:18px;
    border:1px solid #e7e9ee;
    box-shadow:0 30px 60px rgba(20,25,50,0.18);
    overflow:hidden;
  }

  .modal-header-custom{
    padding:22px 24px 0 24px;
    border:none;
    position:relative;
  }

  .close-x{
    position:absolute;
    top:20px;
    right:20px;
    background:none;
    border:none;
    color:#8a90a0;
    font-size:20px;
    line-height:1;
    padding:4px;
    cursor:pointer;
  }
  .close-x:hover{ color:#1c2130; }

  .header-top-row{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .icon-badge{
    width:44px;
    height:44px;
    border-radius:50px;
    background:#eef0fb;
    color:#4a5fd6;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .eyebrow{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.08em;
    color:#8a90a0;
    text-transform:uppercase;
    margin:0;
  }

  .modal-title-custom{
    font-size:22px;
    font-weight:700;
    color:#1c2130;
    margin:0;
  }

  .modal-subtext{
    font-size:14px;
    color:#5b6072;
    margin:14px 0 16px 0;
  }

  .modal-body-custom{
    padding:0 24px 8px 24px;
  }

  /* search box */
  .search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e7e9ee;
    border-radius:12px;
    padding:11px 16px;
    margin-bottom:8px;
  }

  .search-box svg{ flex-shrink:0; color:#8a90a0; }

  .search-box input{
    border:none;
    background:transparent;
    outline:none;
    width:100%;
    font-size:14px;
    color:#1c2130;
  }

  .search-box input::placeholder{ color:#8a90a0; }

  /* user list */
  .user-list{
    max-height:320px;
    overflow-y:auto;
    margin-top:8px;
  }

  .user-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 4px;
    border-radius:10px;
    cursor:pointer;
    transition:background .12s ease;
  }

  .user-item:hover{ background:#f6f7f9; }

  .avatar-wrap{
    position:relative;
    flex-shrink:0;
  }

  .avatar-initials{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
    color:#3a3f52;
  }

  .status-dot{
    position:absolute;
    bottom:0;
    right:0;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#23A136;
    border:2px solid #fff;
  }

  .user-info{
    flex:1;
    min-width:0;
  }

  .user-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .user-name{
    font-weight:600;
    font-size:14.5px;
    color:#1c2130;
  }

  .user-id-badge{
    background:var(--page-bg);
    color:#5b6072;
    font-size:11px;
    font-weight:600;
    padding:2px 8px;
    border-radius:6px;
    white-space:nowrap;
  }

  .user-role{
    font-size:13px;
    color:#8a90a0;
    margin-top:2px;
  }

  /* color variants for avatar backgrounds */
  .bg-blue{ background:#dbe3fb; }
  .bg-pink{ background:#fbdce6; }
  .bg-purple{ background:#e7e0fb; }
  .bg-yellow{ background:#fbedc7; }

  /* footer */
  .modal-footer-custom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
    border-top:1px solid #e7e9ee;
    background:#fafbfc;
  }

  .user-count{
    font-size:13px;
    color:#8a90a0;
  }

  .btn-cancel{
    border:1px solid #e7e9ee;
    background:#fff;
    color:#1c2130;
    font-size:14px;
    font-weight:600;
    padding:8px 22px;
    border-radius:10px;
  }

  .btn-cancel:hover{ background:var(--page-bg); color:#1c2130; }

  .user-list::-webkit-scrollbar{ width:6px; }
  .user-list::-webkit-scrollbar-thumb{ background:#d8dae1; border-radius:10px; }