@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Vazir;src:url('/fonts/vazir/Vazir-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root {
  font-family: Vazir, Tahoma, Arial, sans-serif;
  color: #f2f7f5;
  background: #060d0b;
  font-size: 14px;
  --bg-dark: #060d0b;
  --card-bg: rgba(13, 24, 20, 0.75);
  --card-border: rgba(201, 243, 91, 0.16);
  --lime: #c9f35b;
  --lime-soft: rgba(201, 243, 91, 0.12);
  --muted: #8fa39b;
  --line: rgba(201, 243, 91, 0.12);
}

:host {
  display: block;
  min-width: 0;
  max-width: 100%;
  contain: inline-size;
  font-family: Vazir, Tahoma, Arial, sans-serif;
  background: transparent !important;
  color: #4b465c;
  font-size: 14px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #060d0b;
  color: #f2f7f5;
  min-height: 100vh;
}

/* Skeleton animation */
.skeleton-box {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(201, 243, 91, 0.1) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s infinite ease-in-out;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 5%;
  background: rgba(10, 20, 16, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: url('/logo-mark.svg') center/contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(201, 243, 91, 0.45));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-text strong {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}
.brand-text small {
  font-size: 0.55rem;
  font-family: Arial;
  letter-spacing: 0.15em;
  color: var(--lime);
  direction: ltr;
}

.header-title strong {
  display: block;
  font-size: 1rem;
  color: #fff;
}
.header-title small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.header-actions {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
#connection {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
}
.status-dot.online {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.status-dot.offline {
  background: #ef4444;
}

.back-link {
  color: var(--lime);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--card-border);
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.2s;
}
.back-link:hover {
  background: rgba(201, 243, 91, 0.12);
  border-color: var(--lime);
}

main {
  max-width: 1300px;
  margin: 32px auto;
  padding: 0 24px;
}

h1 {
  font-size: 1.7rem;
  margin: 0 0 6px;
  color: #fff;
  font-weight: 900;
}
h2 {
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 16px;
}
p { line-height: 1.9; }

button, .button {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  background: var(--lime);
  color: var(--bg-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(201, 243, 91, 0.25);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
button:hover, .button:hover {
  background: #d6ff6f;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 243, 91, 0.4);
}
button.secondary, .button.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #f2f7f5;
  border: 1px solid var(--card-border);
  box-shadow: none;
}
button.secondary:hover, .button.secondary:hover {
  background: rgba(201, 243, 91, 0.12);
  border-color: var(--lime);
  color: #fff;
}
button.danger {
  background: #e11d48;
  color: #fff;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}
button:disabled { opacity: 0.5; cursor: wait; }

input, select, textarea {
  font: inherit;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
  background: rgba(8, 16, 13, 0.85);
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 12px rgba(201, 243, 91, 0.25);
}
input[type=checkbox] { width: auto; accent-color: var(--lime); }
textarea { min-height: 110px; resize: vertical; }
label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
form > button { margin-top: 16px; }

section, .card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

.stack {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.customer-header {
  margin-bottom: 24px;
}
.user-greeting p { margin: 4px 0 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 20px 0 28px;
}
.stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}
.stat-val {
  font-size: 1.6rem;
  display: block;
  margin-top: 8px;
  color: #fff;
  font-weight: 900;
}
.stat-val.highlight {
  color: var(--lime);
  text-shadow: 0 0 16px rgba(201, 243, 91, 0.3);
}

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

/* Sidebar Tickets */
.new-ticket-btn {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.ticket-list {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}
.ticket {
  display: block;
  text-align: right;
  background: rgba(13, 24, 20, 0.65);
  color: inherit;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  width: 100%;
  padding: 14px 16px;
  line-height: 1.7;
  box-shadow: none;
  font-weight: normal;
  transition: all 0.2s;
}
.ticket:hover {
  background: rgba(201, 243, 91, 0.06);
  border-color: rgba(201, 243, 91, 0.35);
  transform: translateX(-2px);
}
.ticket.active {
  border-color: var(--lime);
  background: rgba(201, 243, 91, 0.1);
  box-shadow: 0 0 16px rgba(201, 243, 91, 0.15);
}
.ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ticket-header strong {
  font-size: 0.94rem;
  color: #fff;
}
.ticket-date {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--muted);
}

.badge {
  display: inline-block;
  background: rgba(201, 243, 91, 0.12);
  color: var(--lime);
  border: 1px solid rgba(201, 243, 91, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge.open { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
.badge.customer_waiting { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.badge.completed { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }

/* Wallet details */
.wallet-details {
  background: rgba(13, 24, 20, 0.65);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 4px 14px;
}
.wallet-details summary {
  padding: 12px 0;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-primary);
}
.ledger-list {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}
.ledger-item {
  background: rgba(6, 13, 11, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.ledger-item:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(13, 24, 20, 0.85);
}
.ledger-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.ledger-title {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.84rem;
}
.ledger-amount {
  font-weight: 800;
  white-space: nowrap;
  font-size: 0.85rem;
}
.ledger-amount.credit, .ledger-item.credit b { color: #34d399; }
.ledger-amount.usage, .ledger-amount.debit, .ledger-item.usage b, .ledger-item.debit b { color: #f87171; }
.ledger-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--muted);
  gap: 6px;
}

/* Thread & Messages */
#thread {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 26px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
#thread h2 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}
/* Custom Thin Sleek Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(6, 13, 11, 0.4);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 243, 91, 0.25);
  border-radius: 999px;
  border: 1px solid rgba(201, 243, 91, 0.1);
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lime);
  box-shadow: 0 0 10px rgba(201, 243, 91, 0.5);
}

.scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
  margin: 20px 0;
  display: grid;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 243, 91, 0.3) rgba(6, 13, 11, 0.4);
}

/* File Upload Component */
.file-uploader {
  margin: 16px 0;
}
.file-input-hidden {
  display: none !important;
}
.dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 20, 16, 0.65);
  border: 1px dashed rgba(201, 243, 91, 0.35);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.dropzone:hover, .dropzone.dragover {
  background: rgba(201, 243, 91, 0.08);
  border-color: var(--lime);
  box-shadow: 0 0 16px rgba(201, 243, 91, 0.15);
}
.upload-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.dropzone-text {
  flex: 1;
  text-align: right;
}
.dropzone-text strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
}
.dropzone-text small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 3px;
  line-height: 1.5;
}
.select-files-btn {
  padding: 7px 15px !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}

.selected-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 24, 20, 0.95);
  border: 1px solid rgba(201, 243, 91, 0.3);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.file-chip .file-name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}
.file-chip .file-size {
  color: var(--muted);
  font-size: 0.7rem;
  direction: ltr;
}
.remove-file-btn {
  background: transparent !important;
  color: #f87171 !important;
  border: 0 !important;
  padding: 0 4px !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s, color 0.15s !important;
}
.remove-file-btn:hover {
  transform: scale(1.3) !important;
  color: #ef4444 !important;
}

.message {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(10, 20, 16, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.message.customer {
  background: rgba(201, 243, 91, 0.07);
  border: 1px solid rgba(201, 243, 91, 0.22);
  border-right: 4px solid var(--lime);
}
.message small {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.message-body {
  white-space: normal;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 0.95rem;
}
.message-line {
  white-space: pre-wrap;
  text-align: start;
  unicode-bidi: plaintext;
  min-height: 1.4em;
}

.warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fef3c7;
  padding: 16px 20px;
  border-radius: 14px;
  line-height: 1.9;
  margin: 18px 0;
}
.warning button {
  margin-top: 10px;
}

/* Tables for Admin */
.table-wrap { overflow: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
th, td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
td button {
  padding: 6px 12px;
  font-size: 0.78rem;
  margin: 2px;
}

/* Login Card */
.login {
  max-width: 440px;
  margin: 60px auto;
  background: rgba(13, 24, 20, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 243, 91, 0.25);
  border-radius: 24px;
  padding: 38px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(201, 243, 91, 0.12);
  text-align: center;
}
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.login-brand b {
  font-size: 1.3rem;
  color: #fff;
  font-weight: 900;
}
.login h1 {
  font-size: 1.45rem;
  margin: 0 0 8px;
}
.login p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 24px;
}
.login form {
  text-align: right;
}
.login form button {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  font-size: 0.95rem;
}

#numat-support-root.is-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
}
#numat-support-root.is-login > header { display: none; }
#numat-support-root.is-login > main { width: 100%; margin: 0; padding: 0; }
#numat-support-root.is-login .login { margin: 0 auto; }

/* Notice toast */
#notice {
  position: fixed;
  bottom: 25px;
  left: 25px;
  max-width: 480px;
  z-index: 50;
  background: rgba(10, 20, 16, 0.95);
  border: 1px solid var(--lime);
  color: #fff;
  border-radius: 12px;
  padding: 0;
  line-height: 1.8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(201, 243, 91, 0.2);
}
#notice:not(:empty) { padding: 14px 20px; }

/* Modal dialog */
dialog {
  border: 1px solid rgba(201, 243, 91, 0.3);
  border-radius: 20px;
  padding: 28px;
  width: min(850px, 95vw);
  max-height: 90vh;
  overflow: auto;
  background: rgba(10, 20, 16, 0.95);
  color: #fff;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(201, 243, 91, 0.15);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}
.close {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid var(--line);
  float: left;
  border-radius: 8px;
  padding: 6px 14px;
}
.secret {
  font-size: 22px;
  direction: ltr;
  user-select: all;
  background: rgba(201, 243, 91, 0.1);
  border: 1px dashed var(--lime);
  color: var(--lime);
  padding: 20px;
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.internal {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: auto;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 10px;
  max-height: 320px;
  overflow: auto;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
}

a { color: var(--lime); }

@media (max-width: 850px) {
  .layout { grid-template-columns: 1fr; }
  header { gap: 12px; padding: 14px 18px; }
  .header-title small { display: none; }
  main { padding: 0 16px; }
  .scroll { max-height: none; }
}

[data-numeric] { font-variant-numeric: tabular-nums; text-align: left; }

/* ==================== MATERIO ADMIN STYLES ([data-mode="admin"]) ==================== */
[data-mode="admin"] {
  --adm-primary: #7367f0;
  --adm-primary-soft: rgba(115, 103, 240, 0.12);
  --adm-dark: #28243d;
  --adm-head: #2f2b3d;
  --adm-text: #4b465c;
  --adm-line: #ececf1;
  --adm-body: #f4f5fa;
  --adm-success: #28c76f;
  --adm-danger: #ea5455;
  --adm-warning: #ff9f43;
  --adm-card-shadow: 0 4px 18px rgba(40, 36, 61, 0.05);

  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--adm-text) !important;
  background: transparent !important;
  position: relative;
  font-family: Vazir, Tahoma, Arial, sans-serif;
}

[data-mode="admin"] * {
  box-sizing: border-box;
}

/* Connection Pill in Admin */
[data-mode="admin"] > #connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff !important;
  border: 1px solid var(--adm-line) !important;
  box-shadow: 0 2px 8px rgba(40, 36, 61, 0.05);
  color: var(--adm-text) !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  align-self: flex-start;
}

[data-mode="admin"] .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9f43 !important;
  box-shadow: none !important;
}
[data-mode="admin"] .status-dot.online {
  background: #28c76f !important;
  box-shadow: 0 0 8px rgba(40, 199, 111, 0.4) !important;
}
[data-mode="admin"] .status-dot.offline {
  background: #ea5455 !important;
  box-shadow: 0 0 8px rgba(234, 84, 85, 0.4) !important;
}

/* Topbar Header */
[data-mode="admin"] .admin-topbar-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
[data-mode="admin"] h1 {
  font-size: 1.35rem !important;
  color: var(--adm-head) !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  letter-spacing: 0;
}
[data-mode="admin"] .admin-subtitle {
  color: #a8a4b8 !important;
  font-size: 0.8rem !important;
  display: block;
}
[data-mode="admin"] h2 {
  font-size: 1.08rem !important;
  color: var(--adm-head) !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}
[data-mode="admin"] .muted,
[data-mode="admin"] small {
  color: #a8a4b8 !important;
}

/* Stats Cards */
[data-mode="admin"] .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
}
[data-mode="admin"] .stat {
  background: #ffffff !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: var(--adm-card-shadow) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-mode="admin"] .stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--adm-primary-soft);
  color: var(--adm-primary);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
[data-mode="admin"] .stat .stat-icon-wrap.user-icon {
  background: rgba(115, 103, 240, 0.12);
  color: #7367f0;
}
[data-mode="admin"] .stat .stat-icon-wrap.project-icon {
  background: rgba(0, 186, 219, 0.12);
  color: #00badb;
}
[data-mode="admin"] .stat .stat-icon-wrap.incident-icon {
  background: rgba(255, 159, 67, 0.14);
  color: #ff9f43;
}
[data-mode="admin"] .stat .stat-icon-wrap.runner-icon {
  background: rgba(40, 199, 111, 0.12);
  color: #28c76f;
}
[data-mode="admin"] .stat .stat-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-mode="admin"] .stat .stat-label {
  color: #a8a4b8 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}
[data-mode="admin"] .stat b {
  font-size: 1.35rem !important;
  color: var(--adm-head) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
[data-mode="admin"] .stat b.stat-alert {
  color: var(--adm-danger) !important;
}
[data-mode="admin"] .stat b.stat-online {
  color: var(--adm-success) !important;
}
[data-mode="admin"] .stat b.stat-offline {
  color: var(--adm-danger) !important;
}

/* Section Container & Cards */
[data-mode="admin"] section#admin-content {
  background: #ffffff !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: var(--adm-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-mode="admin"] .card {
  background: #ffffff !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  padding: 20px 22px !important;
  box-shadow: var(--adm-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--adm-text) !important;
}

/* Action Buttons & Navigation */
[data-mode="admin"] .admin-tab-header {
  margin-bottom: 18px;
}
[data-mode="admin"] .admin-action-btn,
[data-mode="admin"] button:not(.secondary):not(.danger):not(.close),
[data-mode="admin"] .button:not(.secondary):not(.danger) {
  background: var(--adm-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 10px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(115, 103, 240, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
[data-mode="admin"] .admin-action-btn:hover,
[data-mode="admin"] button:not(.secondary):not(.danger):not(.close):hover,
[data-mode="admin"] .button:not(.secondary):not(.danger):hover {
  background: #5e50e6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(115, 103, 240, 0.5) !important;
}
[data-mode="admin"] button.secondary,
[data-mode="admin"] .button.secondary {
  background: #ffffff !important;
  border: 1px solid #d8d5e4 !important;
  color: var(--adm-text) !important;
  border-radius: 9px !important;
  padding: 9px 16px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
[data-mode="admin"] button.secondary:hover,
[data-mode="admin"] .button.secondary:hover {
  border-color: var(--adm-primary) !important;
  color: var(--adm-primary) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}
[data-mode="admin"] button.danger {
  background: var(--adm-danger) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 9px 16px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(234, 84, 85, 0.3) !important;
}
[data-mode="admin"] button.danger:hover {
  background: #d24b4c !important;
  transform: translateY(-1px) !important;
}

/* Tables */
[data-mode="admin"] .table-wrap {
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  overflow: auto !important;
  background: #ffffff !important;
}
[data-mode="admin"] table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.86rem !important;
  background: #ffffff !important;
}
[data-mode="admin"] th {
  text-align: right !important;
  color: #a8a4b8 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--adm-line) !important;
  background: #fbfbfe !important;
}
[data-mode="admin"] td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--adm-line) !important;
  color: var(--adm-text) !important;
  vertical-align: middle !important;
  background: #ffffff !important;
}
[data-mode="admin"] tr:hover td {
  background: #fafafd !important;
}
[data-mode="admin"] td button {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  margin: 2px 3px !important;
}
[data-mode="admin"] td button:not(.secondary):not(.danger) {
  background: var(--adm-primary-soft) !important;
  color: var(--adm-primary) !important;
  box-shadow: none !important;
}
[data-mode="admin"] td button:not(.secondary):not(.danger):hover {
  background: var(--adm-primary) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
[data-mode="admin"] td button.secondary {
  background: #f4f5fa !important;
  color: var(--adm-text) !important;
  border: 1px solid #d8d5e4 !important;
}
[data-mode="admin"] td button.secondary:hover {
  border-color: var(--adm-primary) !important;
  color: var(--adm-primary) !important;
}
[data-mode="admin"] .empty-table {
  text-align: center;
  color: #a8a4b8;
  padding: 30px !important;
}

/* Badges */
[data-mode="admin"] .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border: 0 !important;
  background: var(--adm-primary-soft) !important;
  color: var(--adm-primary) !important;
}
[data-mode="admin"] .badge.open,
[data-mode="admin"] .badge.pending {
  background: rgba(255, 159, 67, 0.16) !important;
  color: #c77c2b !important;
}
[data-mode="admin"] .badge.customer_waiting,
[data-mode="admin"] .badge.queued {
  background: rgba(0, 186, 219, 0.14) !important;
  color: #00badb !important;
}
[data-mode="admin"] .badge.running,
[data-mode="admin"] .badge.admin_waiting {
  background: rgba(115, 103, 240, 0.14) !important;
  color: #7367f0 !important;
}
[data-mode="admin"] .badge.completed,
[data-mode="admin"] .badge.approved,
[data-mode="admin"] .badge.resolved {
  background: rgba(40, 199, 111, 0.14) !important;
  color: #1f9d57 !important;
}
[data-mode="admin"] .badge.failed,
[data-mode="admin"] .badge.blocked,
[data-mode="admin"] .badge.cancelled {
  background: rgba(234, 84, 85, 0.14) !important;
  color: #ea5455 !important;
}

/* Inputs, Textareas, Selects & Labels */
[data-mode="admin"] input,
[data-mode="admin"] select,
[data-mode="admin"] textarea {
  background: #ffffff !important;
  border: 1px solid #d8d5e4 !important;
  border-radius: 9px !important;
  padding: 10px 13px !important;
  font-size: 0.88rem !important;
  color: var(--adm-head) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
[data-mode="admin"] input:focus,
[data-mode="admin"] select:focus,
[data-mode="admin"] textarea:focus {
  outline: none !important;
  border-color: var(--adm-primary) !important;
  box-shadow: 0 0 0 3px var(--adm-primary-soft) !important;
}
[data-mode="admin"] label {
  color: var(--adm-head) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  margin: 14px 0 6px !important;
}
[data-mode="admin"] .checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: var(--adm-head) !important;
  cursor: pointer;
}
[data-mode="admin"] input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--adm-primary) !important;
  cursor: pointer;
}

/* Incident Cards */
[data-mode="admin"] .incident-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
[data-mode="admin"] .incident-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-mode="admin"] .incident-date {
  color: #a8a4b8 !important;
  font-size: 0.76rem !important;
}
[data-mode="admin"] .internal {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  direction: ltr !important;
  text-align: left !important;
  background: #f7f7fa !important;
  border: 1px solid #e8e6ef !important;
  color: #312d4b !important;
  padding: 16px !important;
  border-radius: 10px !important;
  font-family: Consolas, 'Fira Code', monospace !important;
  font-size: 0.82rem !important;
  max-height: 340px !important;
  overflow: auto !important;
}
[data-mode="admin"] .incident-reply {
  background: #fbfbfe !important;
  border: 1px solid var(--adm-line) !important;
  border-right: 4px solid var(--adm-primary) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  color: var(--adm-head) !important;
}
[data-mode="admin"] .incident-reply strong {
  display: block;
  color: var(--adm-primary);
  margin-bottom: 6px;
  font-size: 0.84rem;
}

/* Settings Rate Box */
[data-mode="admin"] .rate-box {
  background: #fbfbfe;
  border: 1px dashed #d8d5e4;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
[data-mode="admin"] .rate-box strong {
  color: var(--adm-primary);
  font-size: 1.15rem;
}

/* Modals & Dialogs */
[data-mode="admin"] dialog {
  background: #ffffff !important;
  color: var(--adm-head) !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(40, 36, 61, 0.2) !important;
  padding: 28px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-mode="admin"] dialog::backdrop {
  background: rgba(40, 36, 61, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
[data-mode="admin"] .close {
  background: #f4f5fa !important;
  color: var(--adm-text) !important;
  border: 1px solid #d8d5e4 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
[data-mode="admin"] .close:hover {
  background: #ececf1 !important;
  color: var(--adm-head) !important;
}
[data-mode="admin"] .secret {
  background: var(--adm-primary-soft) !important;
  border: 1px dashed var(--adm-primary) !important;
  color: var(--adm-primary) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  font-size: 1.2rem !important;
}

/* Thread messages inside admin modal */
[data-mode="admin"] .message {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: #fbfbfe !important;
  border: 1px solid var(--adm-line) !important;
  border-right: 4px solid #a8a4b8 !important;
  color: var(--adm-head) !important;
  margin-bottom: 12px !important;
}
[data-mode="admin"] .message.customer {
  background: rgba(115, 103, 240, 0.06) !important;
  border: 1px solid rgba(115, 103, 240, 0.18) !important;
  border-right: 4px solid var(--adm-primary) !important;
}
[data-mode="admin"] .message-body {
  color: var(--adm-head) !important;
}

/* Notifications / Notice Toast */
[data-mode="admin"] #notice {
  background: var(--adm-dark) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(40, 36, 61, 0.3) !important;
}

/* Custom Scrollbars in Admin */
[data-mode="admin"] ::-webkit-scrollbar-track {
  background: #f4f5fa !important;
}
[data-mode="admin"] ::-webkit-scrollbar-thumb {
  background: #c2bee0 !important;
  border-radius: 999px !important;
}
[data-mode="admin"] ::-webkit-scrollbar-thumb:hover {
  background: var(--adm-primary) !important;
}

/* Chat Attachments (Images & Files) */
.chat-attachment-img-wrap {
  margin-top: 10px;
  display: inline-flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 380px;
}
.chat-img-link {
  display: block;
  max-height: 280px;
  overflow: hidden;
  background: #000;
  text-align: center;
}
.chat-img-thumb {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s;
  cursor: pointer;
}
.chat-img-thumb:hover {
  transform: scale(1.02);
}
.chat-img-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.78rem;
  background: rgba(13, 24, 20, 0.9);
  gap: 10px;
}
.chat-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  color: var(--muted);
  font-size: 0.8rem;
}
.chat-attachment-download {
  color: var(--lime);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.78rem;
}
.chat-attachment-download:hover {
  text-decoration: underline;
}
.chat-attachment-file-wrap {
  margin-top: 8px;
}
.chat-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(13, 24, 20, 0.75);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.2s;
}
.chat-file-chip:hover {
  border-color: var(--lime);
  background: rgba(201, 243, 91, 0.1);
}
.chat-file-chip .file-name {
  direction: ltr;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-file-chip .file-dl {
  color: var(--lime);
  font-weight: 700;
  font-size: 0.75rem;
}
.chat-attachment-deleted {
  margin-top: 6px;
  font-size: 0.8rem;
}

/* Admin Toolbar & Filtering */
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-toolbar-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.admin-search-wrap {
  position: relative;
  min-width: 220px;
  flex: 1;
  max-width: 340px;
}
.admin-search-wrap .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.admin-search-input {
  padding-right: 36px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  height: 40px;
}
.admin-filter-select {
  height: 40px;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  padding: 6px 12px !important;
  min-width: 140px;
  cursor: pointer;
}

/* Admin Pagination */
.admin-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 6px;
  border-top: 1px solid var(--line);
}
.pagination-info {
  font-size: 0.82rem;
  color: var(--muted);
}
.admin-pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pagination-btn {
  padding: 6px 12px !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: #fff;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.15s;
}
.pagination-btn:hover:not(:disabled) {
  background: rgba(201, 243, 91, 0.15);
  border-color: var(--lime);
  color: #fff;
}
.pagination-btn.active {
  background: var(--lime) !important;
  color: var(--bg-dark) !important;
  font-weight: 900 !important;
  border-color: var(--lime) !important;
}
.pagination-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.pagination-dots {
  color: var(--muted);
  padding: 0 4px;
}

/* Helper text colors */
[data-mode="admin"] .text-success { color: var(--adm-success) !important; }
[data-mode="admin"] .text-danger { color: var(--adm-danger) !important; }

/* Admin-specific Theme Overrides for Toolbar, Pagination, Attachments */
[data-mode="admin"] .admin-search-wrap .search-icon {
  color: var(--adm-text) !important;
}
[data-mode="admin"] .admin-search-input,
[data-mode="admin"] .admin-filter-select {
  background: #ffffff !important;
  border: 1px solid #d8d5e4 !important;
  color: var(--adm-head) !important;
}
[data-mode="admin"] .admin-search-input:focus,
[data-mode="admin"] .admin-filter-select:focus {
  border-color: var(--adm-primary) !important;
  box-shadow: 0 0 0 3px var(--adm-primary-soft) !important;
}
[data-mode="admin"] .admin-pagination-bar {
  border-top: 1px solid var(--adm-line) !important;
}
[data-mode="admin"] .pagination-info {
  color: var(--adm-text) !important;
}
[data-mode="admin"] .pagination-btn {
  background: #f4f5fa !important;
  border: 1px solid #d8d5e4 !important;
  color: var(--adm-head) !important;
}
[data-mode="admin"] .pagination-btn:hover:not(:disabled) {
  background: #ececf1 !important;
  border-color: var(--adm-primary) !important;
  color: var(--adm-primary) !important;
}
[data-mode="admin"] .pagination-btn.active {
  background: var(--adm-primary) !important;
  color: #ffffff !important;
  border-color: var(--adm-primary) !important;
}
[data-mode="admin"] .pagination-dots {
  color: var(--adm-text) !important;
}
[data-mode="admin"] .chat-attachment-img-wrap {
  background: #f4f5fa !important;
  border-color: var(--adm-line) !important;
}
[data-mode="admin"] .chat-img-meta {
  background: #ffffff !important;
}
[data-mode="admin"] .chat-attachment-name {
  color: var(--adm-text) !important;
}
[data-mode="admin"] .chat-attachment-download {
  color: var(--adm-primary) !important;
}
[data-mode="admin"] .chat-file-chip {
  background: #ffffff !important;
  border-color: var(--adm-line) !important;
  color: var(--adm-head) !important;
}
[data-mode="admin"] .chat-file-chip:hover {
  border-color: var(--adm-primary) !important;
  color: var(--adm-primary) !important;
}
[data-mode="admin"] .chat-file-chip .file-dl {
  color: var(--adm-primary) !important;
}


/* ============================================================
   Customer Full-Height Fixed Layout (No Page Scroll)
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#numat-support-root[data-mode="customer"]:not(.is-login) {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#numat-support-root[data-mode="customer"]:not(.is-login) header {
  flex: 0 0 auto;
  position: static;
  padding: 12px 24px;
}

#numat-support-root[data-mode="customer"]:not(.is-login) #notice {
  flex: 0 0 auto;
}

#numat-support-root[data-mode="customer"]:not(.is-login) #subbar-slot {
  flex: 0 0 auto;
}

#numat-support-root[data-mode="customer"]:not(.is-login) main#app {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 12px 20px 14px 20px;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Customer Sub-header Bar */
.customer-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: rgba(13, 24, 20, 0.85);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.subbar-user-section {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-avatar-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime-soft);
  border: 1px solid rgba(201, 243, 91, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 0 10px rgba(201, 243, 91, 0.15);
}
.user-info-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.user-info-text .user-name {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 800;
}
.user-info-text .user-handle {
  font-size: 0.74rem;
  color: var(--muted);
  direction: ltr;
  font-family: Arial, sans-serif;
}
.subbar-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}
.subbar-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.84rem;
}
.subbar-stat-label {
  color: var(--muted);
  font-size: 0.8rem;
}
.subbar-stat-val {
  color: #fff;
  font-weight: 800;
}
.subbar-stat-val.highlight {
  color: var(--lime);
  text-shadow: 0 0 12px rgba(201, 243, 91, 0.3);
}
.subbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.subbar-actions .new-ticket-btn {
  padding: 7px 16px;
  font-size: 0.86rem;
  gap: 6px;
}
.subbar-actions .logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
}
.subbar-actions .logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}
.subbar-actions .logout-btn .logout-icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  transform: scaleX(-1);
  display: block;
}

/* Customer Workspace Layout */
.customer-workspace {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 0;
}

/* Sidebar */
aside.customer-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 14px;
  margin: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.sidebar-header {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-title h2 {
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
  font-weight: 800;
}
.ticket-count-badge {
  background: rgba(201, 243, 91, 0.12);
  color: var(--lime);
  border: 1px solid rgba(201, 243, 91, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
}
.ticket-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.ticket-search-box .search-icon {
  position: absolute;
  right: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  pointer-events: none;
}
.ticket-search-input {
  padding: 8px 30px 8px 12px;
  font-size: 0.82rem;
  border-radius: 8px;
  background: rgba(6, 13, 11, 0.7);
  border: 1px solid var(--line);
  color: #fff;
}
.customer-ticket-list-container {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 4px;
  margin-bottom: 12px;
}
.customer-ticket-list-container .ticket {
  text-align: right;
  padding: 11px 14px;
  background: rgba(13, 24, 20, 0.65);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  transition: all 0.2s;
  box-shadow: none;
}
.customer-ticket-list-container .ticket:hover {
  background: rgba(201, 243, 91, 0.08);
  border-color: rgba(201, 243, 91, 0.35);
  transform: translateX(-2px);
}
.customer-ticket-list-container .ticket.active {
  border-color: var(--lime);
  background: rgba(201, 243, 91, 0.12);
  box-shadow: 0 0 14px rgba(201, 243, 91, 0.15);
}
.ticket-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.74rem;
}
.ticket-project {
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 600;
}
.wallet-details {
  flex: 0 0 auto;
  background: rgba(6, 13, 11, 0.65);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 10px;
}
.wallet-details summary {
  padding: 10px 4px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s;
}
.wallet-details summary:hover {
  color: #fff;
}
.wallet-details[open] .ledger-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 2px 12px;
}

/* Chat Panel */
section#thread.customer-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 0;
  margin: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.empty-thread-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 24px;
  text-align: center;
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.75;
}
.empty-thread-state h3 {
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 8px;
}
.empty-thread-state p {
  max-width: 440px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.thread-header {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 20, 16, 0.6);
}
.thread-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.thread-title-wrap h2 {
  font-size: 1.15rem;
  margin: 0;
  color: #fff;
  font-weight: 800;
}
.thread-header-stats .charge-sum {
  color: var(--lime);
  font-weight: 800;
}
.scroll.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 12px;
}
.load-more-btn {
  background: rgba(201, 243, 91, 0.08);
  color: var(--lime);
  border: 1px solid rgba(201, 243, 91, 0.25);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.load-more-btn:hover {
  background: rgba(201, 243, 91, 0.2);
  border-color: var(--lime);
  transform: translateY(-1px);
}
#approval-banner-slot {
  flex: 0 0 auto;
  z-index: 10;
}

.approval-banner {
  flex: 0 0 auto;
  margin: 8px 16px;
  background: linear-gradient(135deg, rgba(38, 26, 8, 0.95), rgba(24, 16, 5, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 158, 11, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow: hidden;
}

.approval-banner-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.approval-banner-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
}

.approval-badge-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
}

.approval-banner-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.approval-banner-titles strong {
  font-size: 0.92rem;
  color: #fbbf24;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.approval-banner-subtitle {
  font-size: 0.78rem;
  color: #fde68a;
  line-height: 1.4;
  opacity: 0.9;
}

.approval-confirm-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 22px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 10px;
  background: #f59e0b;
  color: #060d0b;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.approval-confirm-btn:hover {
  background: #fbbf24;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

.approval-confirm-btn:active {
  transform: scale(0.97);
}

.approval-summary-collapse {
  border-top: 1px solid rgba(245, 158, 11, 0.22);
  padding-top: 6px;
  margin-top: 2px;
}

.approval-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #fde68a;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  list-style: none;
  padding: 2px 0;
}

.approval-summary-toggle::-webkit-details-marker {
  display: none;
}

.approval-summary-toggle .toggle-arrow {
  transition: transform 0.2s;
  font-size: 0.9rem;
}

.approval-summary-collapse[open] .toggle-arrow {
  transform: rotate(180deg);
}

.approval-summary-content {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  max-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #fff;
}

/* Mobile responsive approval styles */
@media (max-width: 768px) {
  .approval-banner {
    margin: 6px 10px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    max-height: 45vh;
  }
  .approval-banner-main {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .approval-banner-header {
    flex: 1 1 auto;
    min-width: 0;
  }
  .approval-banner-titles strong {
    font-size: 0.86rem;
  }
  .approval-banner-subtitle {
    font-size: 0.74rem;
  }
  .approval-confirm-btn {
    width: 100%;
    min-height: 40px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .approval-summary-content {
    max-height: 90px;
    font-size: 0.78rem;
    padding: 6px 10px;
  }
}
.message-approval-action {
  margin-top: 12px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.message-approval-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fbbf24;
  font-size: 0.88rem;
}
.approval-hint {
  font-size: 0.8rem;
  color: #fef3c7;
  margin: 0;
  line-height: 1.6;
}
.message-approve-btn {
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(135deg, #c9f35b 0%, #a8db34 100%);
  color: #060d0b;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 243, 91, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
}
.message-approve-btn:active {
  transform: scale(0.98);
}
.message-approval-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.message-approval-status.approved {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.message-approval-status.superseded {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.chat-reply-form {
  flex: 0 0 auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  background: rgba(8, 16, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-reply-form textarea {
  min-height: 48px;
  max-height: 120px;
  resize: vertical;
  padding: 9px 12px;
  font-size: 0.9rem;
  border-radius: 10px;
  background: rgba(6, 13, 11, 0.8);
}
.reply-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.file-uploader.compact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.file-uploader.compact .select-files-btn {
  padding: 7px 14px;
  font-size: 0.82rem;
  border-radius: 8px;
  margin: 0;
}
.send-msg-btn {
  padding: 8px 24px;
  font-size: 0.88rem;
  border-radius: 8px;
  margin: 0 !important;
  flex-shrink: 0;
}
.ticket-closed-notice {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: rgba(6, 13, 11, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ============================================================
   MOBILE RESPONSIVE & MOBILE PANEL DESIGN
   ============================================================ */

/* Mobile Header */
@media (max-width: 768px) {
  #numat-support-root[data-mode="customer"] header {
    padding: 8px 12px;
    gap: 12px;
  }
  #numat-support-root[data-mode="customer"] header .header-title {
    display: none;
  }
  #numat-support-root[data-mode="customer"] header .brand-text strong {
    font-size: 1rem;
  }
  #numat-support-root[data-mode="customer"] header .brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  #numat-support-root[data-mode="customer"] header .header-actions {
    gap: 8px;
  }
  #numat-support-root[data-mode="customer"] header .back-link {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
  #numat-support-root[data-mode="customer"] header #connection {
    font-size: 0.72rem;
  }
}

/* Mobile Root & Main App container */
@media (max-width: 768px) {
  #numat-support-root[data-mode="customer"] {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  #numat-support-root[data-mode="customer"] main#app {
    padding: 8px 10px 10px 10px;
  }
}

/* Mobile Subbar */
.mobile-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(13, 24, 20, 0.95);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mobile-subbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mobile-subbar-user .user-avatar-badge {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  font-size: 1rem;
}
.mobile-subbar-user .user-info-text {
  min-width: 0;
}
.mobile-subbar-user .user-name {
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.mobile-subbar-user .user-handle {
  font-size: 0.7rem;
}
.mobile-subbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mobile-balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(201, 243, 91, 0.08);
  border: 1px solid rgba(201, 243, 91, 0.25);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}
.mobile-balance-pill .wallet-icon {
  font-size: 0.85rem;
}
.mobile-balance-pill strong {
  color: var(--lime);
  font-weight: 800;
}
.logout-btn.icon-only {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.logout-btn.icon-only .logout-icon {
  width: 16px;
  height: 16px;
}

/* Mobile Workspace */
.mobile-workspace {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 8px;
}

/* Mobile Action Banner / New Ticket Button */
.mobile-action-banner {
  flex: 0 0 auto;
}
.mobile-new-ticket-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 12px;
  background: linear-gradient(135deg, #c9f35b 0%, #a8db34 100%);
  color: #060d0b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(201, 243, 91, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
}
.mobile-new-ticket-btn:active {
  transform: scale(0.98);
}
.mobile-new-ticket-btn .btn-icon {
  font-size: 1rem;
}

/* Mobile Segmented Navigation Tabs */
.mobile-nav-tabs {
  flex: 0 0 auto;
  display: flex;
  background: rgba(10, 20, 16, 0.75);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.mobile-nav-tab {
  flex: 1;
  min-height: 38px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.mobile-nav-tab.active {
  background: rgba(201, 243, 91, 0.16);
  color: var(--lime);
  border: 1px solid rgba(201, 243, 91, 0.32);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.mobile-tab-count {
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  color: inherit;
}

/* Mobile Tab Content */
.mobile-tab-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile Tickets List */
.mobile-search-bar {
  flex: 0 0 auto;
  position: relative;
  margin-bottom: 8px;
}
.mobile-search-bar .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--muted);
  pointer-events: none;
}
.mobile-search-bar .ticket-search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  background: rgba(8, 16, 13, 0.8);
  border: 1px solid var(--card-border);
  color: #fff;
}
.mobile-tickets-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
}
.mobile-ticket-card {
  width: 100%;
  text-align: right;
  background: rgba(13, 24, 20, 0.82);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  font-weight: normal;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-ticket-card:active {
  transform: scale(0.985);
  background: rgba(201, 243, 91, 0.1);
  border-color: var(--lime);
}
.mobile-ticket-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mobile-ticket-title {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
  flex: 1;
}
.mobile-ticket-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}
.mobile-ticket-project {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
  font-weight: 600;
}
.mobile-ticket-project .project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  display: inline-block;
}
.mobile-chevron {
  font-size: 1.15rem;
  color: var(--muted);
  font-weight: bold;
  line-height: 1;
}

/* Mobile Wallet Tab View */
.mobile-wallet-view {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}
.mobile-wallet-card {
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(20, 40, 32, 0.92) 0%, rgba(10, 24, 18, 0.96) 100%);
  border: 1px solid rgba(201, 243, 91, 0.35);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mobile-wallet-card .wallet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}
.wallet-status-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.mobile-wallet-card .wallet-card-balance {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--lime);
  text-shadow: 0 0 16px rgba(201, 243, 91, 0.35);
  margin: 4px 0;
}
.mobile-ledger-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-ledger-section h3 {
  font-size: 0.92rem;
  color: #fff;
  margin: 0;
  font-weight: 800;
}
.mobile-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-ledger-list .ledger-item {
  background: rgba(13, 24, 20, 0.75);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.mobile-ledger-list .ledger-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mobile-ledger-list .ledger-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}
.mobile-ledger-list .ledger-amount {
  font-size: 0.92rem;
  font-weight: 800;
}
.mobile-ledger-list .ledger-amount.credit {
  color: #34d399;
}
.mobile-ledger-list .ledger-amount.usage,
.mobile-ledger-list .ledger-amount.debit {
  color: #f87171;
}
.mobile-ledger-list .ledger-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
}
.ledger-tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.ledger-tag.credit {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.ledger-tag.usage,
.ledger-tag.debit {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}

/* Mobile Chat Screen View */
.mobile-chat-wrapper {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-chat-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mobile-thread-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(10, 20, 16, 0.9);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mobile-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.mobile-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  color: var(--lime);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-back-btn:active {
  background: rgba(201, 243, 91, 0.15);
  transform: scale(0.97);
}
.mobile-back-btn .back-arrow {
  font-size: 1rem;
  line-height: 1;
}
.mobile-thread-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72vw;
}

/* Mobile Chat Form */
.mobile-reply-form {
  flex: 0 0 auto;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(8, 16, 13, 0.95);
  border-top: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-reply-form textarea {
  font-size: 16px !important;
  min-height: 44px;
  max-height: 110px;
  border-radius: 10px;
  padding: 9px 12px;
  resize: none;
}
.mobile-reply-form .reply-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mobile-reply-form .file-uploader.compact .select-files-btn {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}
.mobile-reply-form .send-msg-btn {
  min-height: 38px;
  padding: 6px 18px;
  font-size: 0.86rem;
  border-radius: 8px;
}

/* Mobile modal adjustments */
@media (max-width: 768px) {
  dialog {
    width: min(94vw, 480px) !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  dialog input, dialog select, dialog textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   Chat Processing Card (Disabled composer replacement)
   ========================================================================== */
#composer-slot {
  flex: 0 0 auto;
}

.chat-processing-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(20, 36, 28, 0.95), rgba(10, 20, 16, 0.98));
  border: 1px solid rgba(201, 243, 91, 0.28);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(201, 243, 91, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  animation: processingFadeIn 0.3s ease-out;
}

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

.chat-processing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime, #c9f35b), transparent);
  animation: processingShimmer 2.4s infinite linear;
}

@keyframes processingShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.processing-robot-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(201, 243, 91, 0.12);
  border: 1px solid rgba(201, 243, 91, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.processing-robot-avatar .robot-icon {
  font-size: 1.5rem;
  line-height: 1;
  position: relative;
  z-index: 2;
  animation: robotGentleBounce 2s infinite ease-in-out;
}

@keyframes robotGentleBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.05); }
}

.processing-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(201, 243, 91, 0.4);
  animation: processingRingPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

@keyframes processingRingPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.85); opacity: 0; }
}

.processing-details {
  flex: 1;
  min-width: 0;
}

.processing-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.processing-title-row strong {
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.processing-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(201, 243, 91, 0.25);
  border-top-color: var(--lime, #c9f35b);
  border-radius: 50%;
  animation: processingSpin 0.75s infinite linear;
}

@keyframes processingSpin {
  to { transform: rotate(360deg); }
}

.processing-desc {
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
  margin: 0;
}

/* Mobile version of processing card */
@media (max-width: 768px) {
  .chat-processing-card {
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 12px;
    border-radius: 12px;
  }
  .processing-robot-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .processing-robot-avatar .robot-icon {
    font-size: 1.25rem;
  }
  .processing-title-row strong {
    font-size: 0.86rem;
  }
  .processing-desc {
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   Agent Notification Toasts (Slide-down banner)
   ========================================================================== */
.notif-toast-container {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 440px;
  width: calc(100vw - 48px);
}

@media (max-width: 768px) {
  .notif-toast-container {
    top: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: 100%;
  }
}

.agent-notif-toast {
  pointer-events: auto;
  position: relative;
  background: rgba(12, 24, 18, 0.95);
  border: 1px solid rgba(201, 243, 91, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(201, 243, 91, 0.15);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  animation: toastSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
}

@keyframes toastSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.agent-notif-toast.toast-fade-out {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  pointer-events: none;
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.toast-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(201, 243, 91, 0.15);
  border: 1px solid rgba(201, 243, 91, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

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

.toast-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--lime, #c9f35b);
  margin-bottom: 2px;
}

.toast-ticket {
  display: block;
  font-size: 0.78rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.toast-snippet {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  align-self: center;
}

.toast-view-btn {
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  background: var(--lime, #c9f35b) !important;
  color: #060d0b !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(201, 243, 91, 0.3) !important;
  transition: transform 0.15s, opacity 0.15s;
}

.toast-view-btn:active {
  transform: scale(0.96);
}

.toast-close-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: color 0.15s;
  box-shadow: none !important;
}

.toast-close-btn:hover {
  color: #fff !important;
}

.toast-progress {
  height: 3px;
  background: linear-gradient(90deg, var(--lime, #c9f35b), #8ee000);
  width: 100%;
  animation: toastProgressBar 7s linear forwards;
}

@keyframes toastProgressBar {
  from { width: 100%; }
  to { width: 0%; }
}

/* Subbar Notif Toggle Button */
.notif-toggle-btn {
  padding: 6px 10px !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--card-border) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: all 0.2s;
}

.notif-toggle-btn:hover {
  background: rgba(201, 243, 91, 0.15) !important;
  border-color: var(--lime) !important;
}



/* Per-conversation public model choice, independent of private billing settings. */
.conversation-model-picker{padding:12px 18px;display:grid;gap:6px;border-bottom:1px solid var(--card-border);background:rgba(201,243,91,.025);min-width:0}
.conversation-model-picker label{font-size:.85rem;font-weight:700}
.conversation-model-picker select{width:100%;max-width:470px;min-width:0;margin:0}
.model-cost-note{display:block;font-size:.75rem;line-height:1.8;opacity:.75;margin:5px 0 10px}
.conversation-model-picker .model-cost-note{margin:0}
@media(max-width:700px){.conversation-model-picker{padding:9px 12px}.conversation-model-picker select{max-width:100%;font-size:.82rem}}

#conversation-model-slot{flex:0 0 auto;min-width:0}
/* Card choices share the panel's existing dark green, lime and Vazir theme. */
select[hidden]{display:none!important}
.choice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:8px 0 12px}
.choice-cards .choice-card{position:relative;display:block;min-width:0;margin:0!important;color:inherit;cursor:pointer;font-weight:400}
.choice-card>input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;inset-inline-start:50%;top:50%;border:0}
.choice-card-body{position:relative;display:flex;flex-direction:column;gap:7px;height:100%;min-height:102px;padding:15px 16px;border:1px solid var(--card-border);border-radius:14px;background:rgba(13,24,20,.66);transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.choice-card-top{display:flex;align-items:center;gap:8px;min-height:22px}
.choice-card-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(201,243,91,.07);color:var(--lime);font-size:1.1rem;line-height:1}
.choice-card-tag{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px;color:var(--lime);background:rgba(201,243,91,.09);white-space:nowrap}
.choice-card-check{display:block;width:17px;height:17px;flex-shrink:0;margin-inline-start:auto;border:1px solid rgba(143,163,155,.5);border-radius:50%}
.choice-card-title{display:block;font-size:.92rem;font-weight:700;line-height:1.7;overflow-wrap:anywhere;text-align:start}
.choice-card-description{display:block;font-size:.73rem;font-weight:400;line-height:1.8;color:var(--muted)}
.choice-card:hover>input:not(:disabled)+.choice-card-body{background:rgba(201,243,91,.045);border-color:rgba(201,243,91,.5);transform:translateY(-1px)}
.choice-card>input:checked+.choice-card-body{border-color:var(--lime);background:linear-gradient(135deg,rgba(201,243,91,.12),rgba(13,24,20,.9));box-shadow:0 0 0 1px rgba(201,243,91,.07),0 5px 22px rgba(0,0,0,.12)}
.choice-card>input:checked+.choice-card-body .choice-card-check{border:5px solid var(--lime);background:var(--bg-dark)}
.choice-card>input:focus-visible+.choice-card-body{outline:2px solid var(--lime);outline-offset:3px}
.choice-card:has(>input:disabled){cursor:not-allowed}
.choice-card>input:disabled+.choice-card-body{opacity:.42;transform:none}
.choice-card>input:disabled:checked+.choice-card-body{opacity:.65}
.choice-cards[data-choice-kind=compact]{display:flex;flex-wrap:wrap;gap:7px}
.choice-cards[data-choice-kind=compact] .choice-card-body{min-height:0;padding:9px 13px;border-radius:10px;flex-direction:row;align-items:center;gap:9px}
.choice-cards[data-choice-kind=compact] .choice-card-icon{display:none}
.choice-cards[data-choice-kind=compact] .choice-card-check{width:14px;height:14px}
.choice-cards[data-choice-kind=compact] .choice-card-title{font-size:.78rem}
.choice-cards[data-choice-kind=compact] .choice-card>input:checked+.choice-card-body .choice-card-check{border-width:4px}
.conversation-model-picker .choice-cards{margin:4px 0;gap:8px}
.conversation-model-picker .choice-card-body{min-height:92px;padding:10px 12px;gap:5px}
.admin-toolbar-filters>.choice-cards{flex:1 1 280px;margin:0;max-height:230px;overflow:auto;padding:3px}
.choice-cards[data-choice-kind=project]{max-height:280px;overflow:auto;padding:3px}
.choice-cards[data-choice-kind=project] .choice-card-body{min-height:82px}
@media(min-width:1150px){.conversation-model-picker .choice-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.conversation-model-picker .choice-card-title{font-size:.8rem}.conversation-model-picker .choice-card-body{padding:9px}}
@media(max-width:520px){.choice-cards{gap:8px}.choice-card-body{padding:12px;min-height:105px}.choice-card-title{font-size:.82rem}.choice-card-description{font-size:.7rem}.choice-card-tag{padding:3px 5px;font-size:.65rem}.choice-cards[data-choice-kind=service]{grid-template-columns:1fr}.choice-cards[data-choice-kind=service] .choice-card-body{min-height:0}.choice-card-icon{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.choice-card-body{transition:none}}
/* Admin service labels identify legal conversations independently of a linked project. */
.service-badge{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid var(--card-border);border-radius:8px;padding:5px 9px;font-size:.73rem;font-weight:700;line-height:1.5}
.service-software{color:#9fceac;background:rgba(80,150,103,.12);border-color:rgba(90,165,113,.25)}
.service-legal{color:#d8c092;background:rgba(179,141,74,.12);border-color:rgba(179,141,74,.25)}

/* Dadagah uses the same admin components, with bounded responsive content. */
[data-corpus-admin]{display:block;min-width:0;max-width:100%;width:100%;color:var(--adm-text)}
[data-corpus-admin] *,[data-corpus-admin] *::before,[data-corpus-admin] *::after{box-sizing:border-box}
[data-corpus-admin] [data-law-body]{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:20px;min-width:0}
[data-mode="admin"] [data-corpus-admin] .card{min-width:0;max-width:100%;margin:0}
[data-mode="admin"] [data-corpus-admin] .law-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:14px}
[data-mode="admin"] [data-corpus-admin] .stat{min-width:0;padding:18px!important}
[data-corpus-admin] .stat-details{min-width:0;gap:8px!important}
[data-corpus-admin] .stat-label{line-height:1.8}
[data-corpus-admin] .law-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0}
[data-mode="admin"] [data-corpus-admin] .law-toolbar h2{margin:0!important}
[data-corpus-admin] p{margin:12px 0;overflow-wrap:anywhere}
[data-corpus-admin] .law-search-form,[data-corpus-admin] .law-parse-form{display:grid;gap:20px;min-width:0}
[data-corpus-admin] .law-search-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) repeat(2,minmax(0,1fr));gap:16px;align-items:start}
[data-mode="admin"] [data-corpus-admin] label{display:grid;gap:8px;min-width:0;margin:0!important;line-height:1.8}
[data-corpus-admin] :is(input:not([type=radio]),textarea){display:block;width:100%;min-width:0;max-width:100%;margin:0}
[data-corpus-admin] input:not([type=radio]){min-height:44px}
[data-corpus-admin] input[dir=ltr]{text-align:left}
[data-corpus-admin] .law-choice-group{border:0;padding:0;margin:0;min-inline-size:0;max-width:100%}
[data-corpus-admin] .law-choice-group legend{padding:0;margin:0 0 10px;font-weight:700;color:var(--adm-head);font-size:.86rem}
[data-corpus-admin] .law-choice-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px;margin:0}
[data-mode="admin"] [data-corpus-admin] .choice-card{display:block;margin:0!important}
[data-mode="admin"] [data-corpus-admin] .choice-card>input[type=radio]{width:1px;height:1px;padding:0!important;border:0!important;box-shadow:none!important}
[data-corpus-admin] .choice-card-body{min-height:60px;padding:12px;flex-direction:row;align-items:center;gap:10px;height:100%;border-radius:11px}
[data-corpus-admin] .choice-card-title{font-size:.8rem;line-height:1.9;font-weight:600;overflow-wrap:anywhere}
[data-corpus-admin] .choice-card-check{flex:0 0 16px;width:16px;height:16px;margin:0}
[data-corpus-admin] .choice-card>input:checked+.choice-card-body .choice-card-check{border-width:5px;background:#fff}
[data-corpus-admin] .choice-card>input:focus-visible+.choice-card-body{outline-color:var(--adm-primary)}
[data-corpus-admin] .law-form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:16px;border-top:1px solid var(--adm-line);min-width:0}
[data-mode="admin"] [data-corpus-admin] button{min-height:40px;max-width:100%;line-height:1.7;white-space:normal;flex-shrink:0}
[data-mode="admin"] [data-corpus-admin] button:disabled{cursor:not-allowed!important;transform:none!important}
[data-corpus-admin] .law-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 12px}
[data-corpus-admin] h3{margin:0;color:var(--adm-head);font-size:.95rem}
[data-corpus-admin] .table-wrap{min-width:0;max-width:100%;overscroll-behavior-inline:contain}
[data-corpus-admin] .law-table{table-layout:fixed;min-width:720px;white-space:normal}
[data-corpus-admin] .law-title-col{width:40%}[data-corpus-admin] .law-source-col{width:19%}[data-corpus-admin] .law-date-col{width:14%}[data-corpus-admin] .law-status-col{width:13%}[data-corpus-admin] .law-action-col{width:14%}
[data-corpus-admin] .law-table td{overflow-wrap:anywhere;line-height:1.9}
[data-corpus-admin] .law-table-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-weight:600;color:var(--adm-head)}
[data-corpus-admin] .law-table .badge{white-space:normal;text-align:center;justify-content:center}
[data-corpus-admin] .law-pagination{margin-top:18px;padding-top:18px;border-top:1px solid var(--adm-line)}
[data-corpus-admin] .law-detail-heading{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
[data-mode="admin"] [data-corpus-admin] .law-detail-heading h2{margin:0!important;line-height:1.9;overflow-wrap:anywhere;max-width:100%}
[data-corpus-admin] a{overflow-wrap:anywhere;color:var(--adm-primary)}
[data-corpus-admin] details{min-width:0;max-width:100%;margin:0;padding:16px;border:1px solid var(--adm-line);border-radius:12px;background:#fcfdf9}
[data-corpus-admin] .law-detail-card details{margin-top:18px}
[data-corpus-admin] summary{cursor:pointer;font-weight:600;font-size:.86rem;line-height:1.9;overflow-wrap:anywhere;color:var(--adm-head)}
[data-corpus-admin] details[open]>summary{margin-bottom:16px}
[data-corpus-admin] .law-raw{min-height:220px;height:300px;max-height:70vh;font-family:ui-monospace,Consolas,monospace;font-size:12px!important;line-height:1.7;white-space:pre;overflow:auto;resize:vertical;tab-size:2;text-align:left}
[data-corpus-admin] .law-readable{min-width:0;max-width:100%;max-height:520px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:2.1;text-align:start;padding:0;margin:0}
[data-corpus-admin] .law-jobs{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--adm-line)}
[data-corpus-admin] .law-jobs p{margin:0;padding:12px 14px;border-radius:10px;background:#f5f7f1;line-height:1.9}
[data-corpus-admin] .law-notice:not(:empty){padding:12px 16px;margin-top:16px;background:var(--adm-primary-soft);border:1px solid var(--adm-line);border-radius:10px;line-height:1.9;overflow-wrap:anywhere}
[data-corpus-admin] .law-notice.text-danger{background:#fff2f1;border-color:#f3d4d0}
[data-corpus-admin] .law-loading{padding:32px;text-align:center}
@media(max-width:1050px){[data-corpus-admin] .law-search-fields{grid-template-columns:repeat(2,minmax(0,1fr))}[data-mode="admin"] [data-corpus-admin] .law-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){[data-corpus-admin] [data-law-body]{gap:16px}[data-corpus-admin] .law-search-fields{grid-template-columns:minmax(0,1fr);gap:14px}[data-corpus-admin] .law-toolbar{align-items:stretch;gap:12px}[data-corpus-admin] .law-toolbar>button{width:100%}[data-corpus-admin] .law-pagination{display:grid;grid-template-columns:1fr 1fr;align-items:center}[data-corpus-admin] .law-pagination>span{grid-column:1/-1;grid-row:1;text-align:center}[data-corpus-admin] .law-form-actions>button{flex:1 1 180px}[data-corpus-admin] details{padding:12px}[data-mode="admin"] [data-corpus-admin] .stat{padding:14px!important}[data-mode="admin"] [data-corpus-admin] .stat b{font-size:1.15rem!important}}
/* Human-readable law editing shares the bounded admin workspace. */
[data-corpus-admin] .law-edit-form{display:grid;gap:20px;min-width:0}
[data-corpus-admin] .law-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
[data-corpus-admin] .law-field-wide{grid-column:1/-1;min-width:0}
[data-mode="admin"] [data-corpus-admin] .law-help{display:block;margin:8px 0 0;color:var(--adm-text)!important;font-size:.78rem;line-height:1.9;font-weight:400}
[data-corpus-admin] .law-readonly-field{display:grid;gap:8px;padding:14px;border:1px solid var(--adm-line);border-radius:11px;background:#f5f7f1;overflow-wrap:anywhere}
[data-corpus-admin] .law-readonly-field span,[data-corpus-admin] .law-readonly-field small{font-size:.78rem;line-height:1.8}
[data-corpus-admin] .law-editor-nav,[data-corpus-admin] .law-type-choices,[data-corpus-admin] .law-row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
[data-corpus-admin] .law-editor-nav{margin-top:18px;padding-top:16px;border-top:1px solid var(--adm-line)}
[data-corpus-admin] .law-editor-nav a{padding:8px 12px;border:1px solid var(--adm-line);border-radius:9px;text-decoration:none;font-size:.8rem;background:#f5f8ef}
[data-corpus-admin] .law-editor-nav a:hover{background:var(--adm-primary-soft);border-color:var(--adm-primary)}
[data-corpus-admin] .law-type-choices{margin-top:10px}
[data-mode="admin"] [data-corpus-admin] .law-type-choices button[aria-pressed=true]{border-color:var(--adm-primary)!important;background:var(--adm-primary-soft)!important;color:var(--adm-primary)!important}
[data-corpus-admin] .law-extra-fields,[data-corpus-admin] .law-unit-cards{display:grid;gap:18px;margin-top:18px;min-width:0}
[data-corpus-admin] .law-unit-card{display:grid;gap:14px;min-width:0;padding:18px;border:1px solid var(--adm-line);border-radius:12px;background:#fbfcf8}
[data-corpus-admin] .law-unit-text,[data-corpus-admin] .law-long-field{min-height:180px;line-height:2;resize:vertical}
[data-corpus-admin] .law-attachment-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:14px;align-items:end;padding:18px 0;border-bottom:1px solid var(--adm-line)}
[data-corpus-admin] .law-editor-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;position:sticky;bottom:12px;z-index:5}
[data-corpus-admin] [data-edit-progress]{grid-column:1/-1;font-size:.85rem;line-height:1.9}
[data-corpus-admin] [data-edit-progress]:empty{display:none}
[data-corpus-admin] [data-discard-warning]{margin-top:16px;padding:14px;border:1px solid #eacda1;border-radius:10px;background:#fff8ec}
[data-corpus-admin] .law-delete-confirm{max-width:850px}
[data-corpus-admin] .law-delete-confirm form{display:grid;gap:18px;margin-top:18px}
[data-corpus-admin] .law-delete-confirm input{max-width:360px}
[data-corpus-admin] .law-source-editor>h2{margin-top:20px!important}
[data-corpus-admin] [id^=law-edit-]{scroll-margin-top:100px}
@media(max-width:760px){[data-corpus-admin] .law-edit-grid{grid-template-columns:minmax(0,1fr)}[data-corpus-admin] .law-attachment-row{grid-template-columns:minmax(0,1fr)}[data-corpus-admin] .law-editor-save{position:static;grid-template-columns:minmax(0,1fr)}[data-corpus-admin] .law-editor-save button{width:100%}[data-corpus-admin] .law-unit-card{padding:14px}[data-corpus-admin] .law-unit-card .law-toolbar{align-items:flex-start}}
/* Addressable law pages and compact accessible list navigation. */
[data-corpus-admin] a.button{min-height:40px;max-width:100%;line-height:1.7;white-space:normal}
[data-mode="admin"] [data-corpus-admin] a.button.danger{background:#e64f50!important;color:#fff!important;border:1px solid #e64f50!important;box-shadow:none!important}
[data-corpus-admin] .law-table .law-row-actions{gap:6px}
[data-mode="admin"] [data-corpus-admin] .law-table a.button{min-height:34px;padding:6px 10px!important;font-size:.78rem!important}
[data-corpus-admin] .law-pager{display:grid;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--adm-line)}
[data-corpus-admin] .law-page-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
[data-corpus-admin] .law-page-links a{min-width:40px}
[data-mode="admin"] [data-corpus-admin] .law-pager .pagination-btn.active{color:#fff!important;background:var(--adm-primary)!important;border-color:var(--adm-primary)!important}
[data-corpus-admin] a[aria-disabled=true]{opacity:.4;cursor:not-allowed;pointer-events:none}
[data-corpus-admin] .law-page-jump{display:flex;flex-wrap:wrap;align-items:end;gap:12px;justify-content:center}
[data-corpus-admin] .law-page-jump input[type=number]{width:110px;min-width:0;direction:ltr}
[data-corpus-admin] .law-page-jump input[type=hidden]{display:none}
[data-corpus-admin] .law-page-jump button{margin:0}
@media(max-width:600px){[data-corpus-admin] .law-pager .law-toolbar{justify-content:center;text-align:center}[data-corpus-admin] .law-page-jump{justify-content:flex-start}[data-corpus-admin] .law-pager .law-row-actions{justify-content:center}}
/* Compact conversation controls: messages keep the available vertical space. */
[data-mode="customer"] .thread-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;padding:12px 16px;align-items:center;min-width:0;position:relative;z-index:12}
[data-mode="customer"] .thread-title-wrap{min-width:0;gap:8px}
[data-mode="customer"] .thread-title-wrap h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.8}
[data-mode="customer"] .thread-title-wrap .badge{flex-shrink:0;font-size:.68rem}
[data-mode="customer"] .thread-header-stats{white-space:nowrap;font-size:.75rem}
#conversation-model-slot{min-width:0;max-width:100%;position:relative}
.thread-model{position:relative;margin:0;min-width:0}
.thread-model-pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;max-width:230px;padding:5px 10px;border:1px solid var(--card-border);border-radius:9px;background:rgba(201,243,91,.045);color:var(--text,#e8eee8);font-size:.74rem;line-height:1.6;list-style:none;white-space:nowrap;box-sizing:border-box}
.thread-model>summary{cursor:pointer}
.thread-model>summary::-webkit-details-marker{display:none}
.thread-model>summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.thread-model-name{overflow:hidden;text-overflow:ellipsis;max-width:145px}
.thread-model-factor{font-size:.64rem;opacity:.8;color:var(--lime);flex-shrink:0}
.thread-model-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 40px));max-height:min(320px,55dvh);overflow-y:auto;margin:0;padding:10px;border:1px solid var(--card-border);border-radius:12px;background:#0d1914;box-shadow:0 14px 40px #0008;z-index:60;box-sizing:border-box}
.thread-model-menu legend{font-size:.72rem;padding:0 5px;color:var(--muted)}
.thread-model-menu .thread-model-option{display:flex;align-items:center;gap:9px;padding:10px 8px;margin:0;cursor:pointer;border-radius:7px;font-size:.79rem;min-height:40px;box-sizing:border-box}
.thread-model-option:hover{background:rgba(201,243,91,.06)}
.thread-model-option>span{flex:1;min-width:0;color:#edf3ec}
.thread-model-option>small{font-size:.65rem;color:var(--muted);white-space:nowrap}
.thread-model-menu .thread-model-option input[type="radio"]{appearance:auto;width:15px;height:15px;min-height:0;margin:0;padding:0;flex:0 0 15px;accent-color:var(--lime)}
.thread-model-option input:disabled~span,.thread-model-option input:disabled~small{opacity:.45}
.thread-model-menu p{font-size:.68rem;line-height:1.9;color:var(--muted);margin:8px 6px 2px;border-top:1px solid var(--line);padding-top:8px}
[data-mode="customer"] .chat-messages{padding:18px;gap:16px;overscroll-behavior:contain}
[data-mode="customer"] .chat-messages>.message{flex:0 0 auto;min-width:0;max-width:100%;padding:16px 18px}
[data-mode="customer"] .chat-messages .message-body{font-size:.95rem;line-height:2.05}
[data-mode="customer"] #composer-slot{flex:0 0 auto;min-width:0}
[data-mode="customer"] .chat-reply-form{padding:10px 16px;gap:8px}
[data-mode="customer"] .chat-reply-form textarea{height:60px;min-height:60px;max-height:150px;margin:0;box-sizing:border-box;line-height:1.8}
.legal-notice-dialog{width:min(460px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;padding:24px;border:1px solid var(--card-border);border-radius:18px;background:#0d1914;color:#edf3ec;box-shadow:0 25px 80px #0008;direction:rtl}
.legal-notice-dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
.legal-notice-dialog h2{font-size:1.1rem;line-height:1.8;margin:0 0 14px}
.legal-notice-dialog p{font-size:.88rem;line-height:2;margin:10px 0}
.legal-notice-dialog button{width:100%;margin-top:10px;min-height:42px}
.legal-notice-dialog .legal-notice-error{color:#fca5a5}
.legal-notice-error:empty{display:none}
.message-rich{min-width:0;max-width:100%;color:inherit;line-height:2;overflow-wrap:anywhere;text-align:start}
.message-rich> :first-child{margin-top:0!important}.message-rich> :last-child{margin-bottom:0!important}
.message-body .message-rich p{margin:0 0 .85em;line-height:inherit;color:inherit}
.message-body .message-rich :is(h3,h4,h5,h6){font-family:inherit;font-size:1.04em!important;font-weight:700;line-height:1.9;margin:1.35em 0 .55em!important;color:inherit!important;letter-spacing:normal}
.message-rich :is(ul,ol){padding-inline-start:1.7em;padding-inline-end:0;margin:.5em 0 1em;list-style-position:outside}
.message-rich ol{list-style-type:persian}.message-rich ul{list-style-type:disc}
.message-rich li{padding-inline-start:.3em;margin:.4em 0;line-height:inherit}.message-rich li>p{margin-bottom:.3em}
.message-rich strong{font-weight:750;color:inherit}.message-rich em{font-style:italic}
.message-rich blockquote{margin:1em 0;padding:.75em 1em;border:1px solid var(--card-border);border-inline-start:3px solid var(--lime);border-radius:10px;background:rgba(201,243,91,.04);color:inherit}
.message-rich blockquote>:last-child{margin-bottom:0}.message-rich hr{border:0;border-top:1px solid var(--card-border);margin:1.3em 0}
.message-rich a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;unicode-bidi:isolate;overflow-wrap:anywhere}
.message-rich code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:rgba(127,127,127,.12);border-radius:5px;padding:.1em .35em;unicode-bidi:isolate;white-space:pre-wrap}
.message-rich pre.message-code{font:inherit;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;padding:14px;border:1px solid var(--card-border);border-radius:10px;background:rgba(127,127,127,.07);text-align:start}
.message-rich pre.message-code code{font:inherit;line-height:inherit;padding:0;background:none}
.message-rich .message-table-wrap{max-width:100%;overflow-x:auto;margin:1em 0;border:1px solid var(--card-border);border-radius:9px;overscroll-behavior-x:contain}
.message-rich table{width:100%;border-collapse:collapse;font:inherit;table-layout:auto;margin:0}
.message-rich :is(th,td){padding:9px 12px;text-align:start;vertical-align:top;border:1px solid var(--card-border);line-height:1.85;min-width:95px;white-space:normal;color:inherit;background:transparent}
.message-rich th{font-weight:700;background:rgba(127,127,127,.08)}
[data-mode="admin"] .message-rich{--card-border:var(--adm-line);--lime:var(--adm-primary)}
@media(max-width:520px){.message-rich blockquote{padding:.6em .75em}.message-rich :is(th,td){padding:7px 9px}}
/* Admin lists must shrink inside the panel grid, including when mounted in a shadow root. */
[data-mode="admin"], [data-mode="admin"] #app, [data-mode="admin"] #admin-content{min-width:0;max-width:100%;width:100%}
[data-mode="admin"] .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));min-width:0}
[data-mode="admin"] .stat,[data-mode="admin"] .stat-details{min-width:0}
[data-mode="admin"] .table-wrap{min-width:0;max-width:100%;overscroll-behavior-inline:contain}
[data-mode="admin"] [data-admin-section="tickets"]{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.admin-ticket-list-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;min-width:0}
[data-mode="admin"] .admin-ticket-list-heading h2{font-size:1rem!important;margin:0!important;color:var(--adm-head)!important}
.admin-ticket-list-heading>span{font-size:.78rem;color:var(--adm-text);white-space:nowrap}
.admin-ticket-filters{display:grid;gap:14px;min-width:0;padding:18px;background:#f7f9f3;border:1px solid var(--adm-line);border-radius:12px}
.admin-ticket-filter-field{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:start;gap:10px;min-width:0}
.admin-ticket-filter-field>label{margin:0;padding-top:9px;font-size:.8rem;font-weight:700;line-height:1.8;color:var(--adm-head)}
.admin-ticket-filter-field .admin-search-wrap{min-width:0;max-width:none;width:100%;margin:0}
.admin-ticket-filter-field .admin-search-input{width:100%;margin:0;height:42px}
.admin-ticket-filters .choice-cards{display:flex;flex-wrap:wrap;gap:7px;max-width:100%;margin:0;padding:2px;min-width:0}
.admin-ticket-filters .choice-cards[data-choice-kind="project"]{max-height:145px;overflow-y:auto;align-content:start}
.admin-ticket-filters .choice-card{flex:0 1 auto;max-width:100%}
[data-mode="admin"] .admin-ticket-filters .choice-card-body{flex-direction:row;align-items:center;gap:8px;min-height:36px;height:auto;padding:7px 10px;border-radius:8px}
.admin-ticket-filters .choice-card-top{min-height:0;order:1;flex-shrink:0}
.admin-ticket-filters .choice-card-icon,.admin-ticket-filters .choice-card-description{display:none}
.admin-ticket-filters .choice-card-check{width:13px;height:13px;margin:0}
[data-mode="admin"] .admin-ticket-filters .choice-card-title{font-size:.76rem;font-weight:500;line-height:1.8}
.admin-ticket-filters .choice-card>input:checked+.choice-card-body .choice-card-check{border-width:4px}
.admin-ticket-table{min-width:0;max-width:100%;border-radius:12px}
[data-mode="admin"] .admin-ticket-table table{table-layout:fixed;white-space:normal;min-width:1080px}
[data-mode="admin"] .admin-ticket-table :is(th,td){white-space:normal;overflow-wrap:anywhere;line-height:1.9;padding:12px!important}
.admin-ticket-table :is(th,td):nth-child(2){width:145px}
.admin-ticket-table :is(th,td):nth-child(3){width:135px}
.admin-ticket-table :is(th,td):nth-child(4){width:135px}
.admin-ticket-table :is(th,td):nth-child(5){width:145px}
.admin-ticket-table :is(th,td):nth-child(6){width:145px}
.admin-ticket-table :is(th,td):nth-child(7){width:130px}
.admin-ticket-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:start;line-height:2;color:var(--adm-head)}
.admin-ticket-date{display:block;font-size:.73rem;line-height:1.9}
.admin-ticket-table .service-badge,.admin-ticket-table .badge{white-space:normal;text-align:center;line-height:1.8;justify-content:center}
[data-mode="admin"] .admin-ticket-table td button{white-space:nowrap;margin:0!important;min-height:36px;padding:7px 10px!important}
[data-mode="admin"] [data-admin-section="tickets"] .admin-pagination-bar{margin-top:0;min-width:0}
@media(max-width:700px){[data-mode="admin"] [data-admin-section="tickets"]{padding:16px!important;gap:16px}.admin-ticket-filters{padding:12px;gap:13px}.admin-ticket-filter-field{grid-template-columns:minmax(0,1fr);gap:5px}.admin-ticket-filter-field>label{padding-top:0}.admin-ticket-filters .choice-cards[data-choice-kind="project"]{max-height:160px}[data-mode="admin"] .admin-ticket-filters .choice-card-body{min-height:38px}.admin-ticket-list-heading{align-items:flex-start}}
@media(max-width:900px){[data-mode="customer"] .thread-header{grid-template-columns:minmax(0,1fr) auto}[data-mode="customer"] .thread-header-stats{grid-column:1/-1;font-size:.7rem}}
[data-mode="customer"] .thread-header.mobile-thread-header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px 8px;padding:10px 12px}
[data-mode="customer"] .mobile-thread-header>.mobile-back-btn{grid-column:1;grid-row:1;padding:0;width:34px;height:36px;min-height:36px;display:grid;place-items:center;font-size:1.3rem}
[data-mode="customer"] .mobile-thread-header>.thread-title-wrap{grid-column:2/-1;grid-row:1;gap:6px}
[data-mode="customer"] .mobile-thread-header .thread-title-wrap h2{font-size:.86rem}
[data-mode="customer"] .mobile-thread-header>#conversation-model-slot{grid-column:3;grid-row:2}
[data-mode="customer"] .mobile-thread-header>.thread-header-stats{grid-column:1/3;grid-row:2;white-space:normal;font-size:.68rem}
[data-mode="customer"] .mobile-thread-header .thread-model-pill{max-width:190px;font-size:.68rem;min-height:36px}
@media(max-width:520px){[data-mode="customer"] .chat-messages{padding:12px;gap:12px}[data-mode="customer"] .chat-messages>.message{padding:12px 13px}[data-mode="customer"] .chat-messages .message-body{font-size:.88rem;line-height:2}[data-mode="customer"] .chat-reply-form{padding:8px 10px}.thread-model-name{max-width:110px}}

/* Error refunds are wallet credits in both customer layouts. */
.ledger-amount.refund,.ledger-item.refund b,.mobile-ledger-list .ledger-amount.refund{color:#34d399}.ledger-tag.refund{color:#34d399;background:rgba(52,211,153,.1)}

/* One compact administrator configuration surface, using the existing green theme. */
[data-mode="admin"] .support-settings{max-width:1280px;margin-inline:auto;width:100%;min-width:0}
[data-mode="admin"] .settings-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
[data-mode="admin"] .settings-card{border:1px solid var(--border,#dce5d5);background:#fff;border-radius:18px;padding:22px;min-width:0;box-shadow:0 3px 14px #173a2e06}
[data-mode="admin"] .settings-card h2{font-size:1rem;margin:0 0 14px;color:#173a2e}
[data-mode="admin"] .settings-card p{font-size:.78rem;line-height:1.9;margin:12px 0}
[data-mode="admin"] .settings-card label{display:block;font-size:.8rem;margin:0 0 8px}
[data-mode="admin"] .settings-card form{margin:0;display:block}
[data-mode="admin"] .settings-card button{width:auto;min-height:38px;margin:0;padding:8px 15px;white-space:normal;line-height:1.6}
[data-mode="admin"] .settings-card input:not([type="checkbox"]){width:100%;min-width:0;margin:0;min-height:42px}
[data-mode="admin"] .settings-key-row{display:flex;align-items:center;gap:10px;max-width:560px}
[data-mode="admin"] .settings-key-row input{flex:1}
[data-mode="admin"] .settings-key-row button{flex:0 0 auto}
[data-mode="admin"] .settings-status,[data-mode="admin"] .settings-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
[data-mode="admin"] .settings-status span{font-size:.73rem;border-radius:8px;padding:5px 9px;background:#f3f6ed;color:#48603f;line-height:1.8}
[data-mode="admin"] .settings-model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
[data-mode="admin"] .settings-model-list .settings-model-card{display:flex;align-items:center;gap:9px;border:1px solid #d8e2cc;border-radius:12px;padding:13px;margin:0;min-height:78px;background:#fafcf7;cursor:pointer}
[data-mode="admin"] .settings-model-card:has(input:checked){background:#edf4df;border-color:#819f44}
[data-mode="admin"] .settings-model-card:has(input:disabled){opacity:.6;cursor:not-allowed}
[data-mode="admin"] .settings-model-card input{width:16px!important;height:16px;flex:0 0 16px;margin:0;accent-color:#476a24}
[data-mode="admin"] .settings-model-card span{min-width:0;display:grid;gap:6px}
[data-mode="admin"] .settings-model-card b{font-size:.78rem;overflow-wrap:anywhere}
[data-mode="admin"] .settings-model-card small{font-size:.68rem;line-height:1.7;color:#78876d}
[data-mode="admin"] .settings-finance,[data-mode="admin"] .settings-connection{grid-column:1/-1}
[data-mode="admin"] .settings-finance-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.2fr);gap:26px;align-items:start}
[data-mode="admin"] .settings-rate-box{padding:16px;border-radius:12px;background:#f7f9f1;border:1px solid #e4e9d9}
[data-mode="admin"] .settings-rate-box strong{display:block;font-size:1.25rem;color:#315b39;margin-top:7px}
[data-mode="admin"] .settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:16px}
[data-mode="admin"] .settings-connection{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;padding:16px 22px}
[data-mode="admin"] .settings-connection h2,[data-mode="admin"] .settings-connection p{margin:0}
[data-mode="admin"] .settings-connection #agent-auth-status{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:900px){[data-mode="admin"] .settings-panel-grid{grid-template-columns:minmax(0,1fr)}[data-mode="admin"] .settings-finance-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
@media(max-width:520px){[data-mode="admin"] .settings-card{padding:16px}[data-mode="admin"] .settings-model-list,[data-mode="admin"] .settings-fields{grid-template-columns:minmax(0,1fr)}[data-mode="admin"] .settings-key-row{flex-wrap:wrap}[data-mode="admin"] .settings-key-row input{flex-basis:100%}}