@font-face {
  font-family: 'Vazir';
  src: url('../fonts/vazir/Vazir-Regular.woff2') format('woff2'), url('../fonts/vazir/Vazir-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/vazir/Vazir-Medium.woff2') format('woff2'), url('../fonts/vazir/Vazir-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/vazir/Vazir-Bold.woff2') format('woff2'), url('../fonts/vazir/Vazir-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazir/Vazir-Regular.woff2') format('woff2'), url('../fonts/vazir/Vazir-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazir/Vazir-Medium.woff2') format('woff2'), url('../fonts/vazir/Vazir-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazir/Vazir-Bold.woff2') format('woff2'), url('../fonts/vazir/Vazir-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* UMSG styles - Modern, RTL, responsive, Vazir font */

/* Fonts */
:root {
  --umsg-font: 'Vazir', 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  --umsg-primary: #2563eb;
  --umsg-bg: #ffffff;
  --umsg-elev: #0f172a14;
  --umsg-border: #e5e7eb;
  --umsg-text: #0f172a;
  --umsg-muted: #6b7280;
  --umsg-danger: #ef4444;
  --umsg-success: #22c55e;
  --umsg-radius: 14px;
  --umsg-shadow: 0 12px 30px rgba(15,23,42,.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --umsg-bg: #0b1020;
    --umsg-elev: #ffffff10;
    --umsg-border: #1f2937;
    --umsg-text: #e5e7eb;
    --umsg-muted: #9ca3af;
  }
}

.umsg-root { direction: rtl; font-family: var(--umsg-font); color: var(--umsg-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Toolbar */
.umsg-toolbar {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: .9rem; background: var(--umsg-bg); border: 1px solid var(--umsg-border);
  border-radius: var(--umsg-radius); padding: .6rem .75rem; box-shadow: var(--umsg-shadow);
}
.umsg-toolbar .umsg-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.umsg-toolbar select, .umsg-toolbar input[type="search"] {
  padding: .55rem .6rem; border: 1px solid var(--umsg-border); border-radius: 10px; background: #fff; min-width: 140px;
}

/* Buttons */
.umsg-btn { padding: .7rem 1rem; border: 1px solid var(--umsg-border); background: #f8fafc; border-radius: 12px; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease; font-weight: 600; }
.umsg-btn:hover { transform: translateY(-1px); box-shadow: var(--umsg-shadow); }
.umsg-btn:active { transform: translateY(0); }
.umsg-btn.primary { background: var(--umsg-primary); color: #fff; border-color: transparent; }
.umsg-btn.danger  { background: var(--umsg-danger); color: #fff; border-color: transparent; }
.umsg-open-compose { background: var(--umsg-success) !important; color: #fff !important; border-color: transparent !important; }

/* FAB (mobile quick compose) */
.umsg-fab { position: fixed; bottom: 18px; left: 18px; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--umsg-success); color: #fff; border: none; box-shadow: var(--umsg-shadow); font-size: 22px; line-height: 1; z-index: 9999; cursor: pointer; }
@media (min-width: 769px){ .umsg-fab { display: none; } }

/* Table (desktop) */
.umsg-table { width: 100%; border-collapse: collapse; background: var(--umsg-bg); border: 1px solid var(--umsg-border); border-radius: var(--umsg-radius); overflow: hidden; box-shadow: var(--umsg-shadow); }
.umsg-table th, .umsg-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--umsg-border); text-align: right; vertical-align: middle; }
.umsg-table thead tr { background: linear-gradient(0deg, #f8fafc, #fff); }
.umsg-table tbody tr:hover { background: #f3f4f6; }

/* Badges */
.umsg-badge { display: inline-block; padding: .3rem .6rem; border-radius: 999px; font-size: .8rem; color: #fff; box-shadow: var(--umsg-shadow); }
.umsg-badge.open { background: #22c55e; }
.umsg-badge.pending { background: #f59e0b; }
.umsg-badge.answered { background: #3b82f6; }
.umsg-badge.closed { background: #9ca3af; }

/* Mobile cards */
@media (max-width: 768px){
  .umsg-table.responsive thead { display: none; }
  .umsg-table.responsive, .umsg-table.responsive tbody, .umsg-table.responsive tr, .umsg-table.responsive td { display: block; width: 100%; }
  .umsg-table.responsive tbody { padding: 0 .15rem; }
  .umsg-table.responsive tr {
    margin: .7rem 0; border: 1px solid var(--umsg-border); border-radius: 14px; background: var(--umsg-bg);
    box-shadow: var(--umsg-shadow); overflow: hidden;
  }
  .umsg-table.responsive td {
    border: none; border-bottom: 1px solid var(--umsg-border);
    padding: .85rem .95rem;
    position: static;
    overflow-wrap: anywhere; word-break: break-word; line-height: 1.6;
  }
  .umsg-table.responsive td:last-child { border-bottom: none; }
  .umsg-table.responsive td::before {
    content: attr(data-label);
    display: block; font-weight: 700; color: var(--umsg-muted); margin-bottom: .35rem;
  }
  .umsg-table.responsive td[data-label] a.umsg-open-thread { font-size: 1.06rem; font-weight: 700; display: inline-block; }
  .umsg-table.responsive td .umsg-badge { font-size: .78rem; padding: .28rem .55rem; }
  .umsg-table.responsive td button.umsg-btn { width: 100%; }
}

/* Modals */
.umsg-modal[hidden] { display: none !important; }
.umsg-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 99999; backdrop-filter: blur(2px); }
.umsg-dialog { width: min(920px, 96vw); max-height: 92vh; overflow: auto; background: var(--umsg-bg); border-radius: 18px; border: 1px solid var(--umsg-border); padding: 1rem; box-shadow: var(--umsg-shadow); }
@media (max-width: 640px){ .umsg-dialog { width: 100vw; height: 100vh; max-height: none; border-radius: 0; } }
.umsg-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.umsg-close { background: transparent; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--umsg-muted); }
.umsg-dialog label { display: block; margin-top: .6rem; font-weight: 600; }
.umsg-dialog input[type="text"], .umsg-dialog input[type="search"], .umsg-dialog textarea, .umsg-dialog select { width: 100%; padding: .65rem .7rem; border: 1px solid var(--umsg-border); border-radius: 12px; background: #fff; }
.umsg-dialog textarea { min-height: 140px; resize: vertical; }
.umsg-dialog-footer { margin-top: .9rem; display: flex; gap: .6rem; justify-content: flex-start; flex-wrap: wrap; }

/* Recipient dropdown */
.umsg-recipient-list { position: absolute; background: #fff; border: 1px solid var(--umsg-border); border-radius: 12px; margin-top: .25rem; max-height: 240px; overflow: auto; width: min(460px, 94vw); box-shadow: var(--umsg-shadow); }
.umsg-recipient-item { padding: .6rem .7rem; cursor: pointer; }
.umsg-recipient-item:hover { background: #f3f4f6; }

/* Messages */
.umsg-thread-meta { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .75rem; }
.umsg-messages { border: 1px dashed var(--umsg-border); border-radius: 14px; padding: .6rem; max-height: 48vh; overflow: auto; background: #fafafa; }
.umsg-msg { background: #fff; border: 1px solid var(--umsg-border); border-radius: 14px; padding: .6rem .7rem; margin-bottom: .6rem; box-shadow: var(--umsg-shadow); }
.umsg-msg .umsg-meta { font-size: .82rem; color: var(--umsg-muted); margin-bottom: .35rem; }
.umsg-attachments { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.umsg-attachments a { display: inline-block; font-size: .85rem; padding: .25rem .45rem; border: 1px solid var(--umsg-border); border-radius: .5rem; }