:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --border: #e2e6ee;
  --text: #16202e;
  --text-muted: #64748b;
  --accent: #1a86e0;
  --accent-hover: #1569b8;
  --accent-soft: #e8f4fd;
  --danger: #e11d2b;
  --warning: #e11d2b;
  --green: #16a34a;
  /* Spec document/question status colours */
  --st-grey: #6b7280;    /* Not assigned / Not started */
  --st-blue: #2563eb;    /* Assigned */
  --st-yellow: #d97706;  /* In progress */
  --st-green: #16a34a;   /* Completed / Answered / Approved */
  --st-orange: #ea580c;  /* Awaiting review */
  --st-red: #dc2626;     /* Overdue / Rejected */
  --st-purple: #7c3aed;  /* Needs clarification */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -3px;
}

h1 { font-size: 22px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
p { margin: 0 0 8px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
}

.main {
  flex: 1;
  padding: 32px 40px 60px;
  max-width: 1100px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  padding: 4px 8px;
  margin-bottom: 24px;
}
.brand:hover { text-decoration: none; }
.brand-center { justify-content: center; margin-bottom: 20px; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--text);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-weight: 500;
}
.nav a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--accent-soft); color: var(--accent); }

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Version sits above the divider; the account row sits below it at the bottom */
.sidebar-footer .version-label { order: -1; margin: 0; padding: 0 8px 12px; }
.sidebar-footer .me { border-top: 1px solid var(--border); padding-top: 12px; }
.me-name { font-weight: 600; font-size: 13.5px; }
.me-email { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Auth pages ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.auth-title { text-align: center; margin-bottom: 2px; }
.auth-sub { text-align: center; color: var(--text-muted); margin-bottom: 20px; }

/* ---------- Cards & layout ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.card-head h2 { margin: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 20px;
  align-items: start;
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.stat-label { color: var(--text-muted); font-size: 13px; }

.room-list { display: flex; flex-direction: column; gap: 12px; }
.room-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color 0.1s;
}
.room-card:hover { border-color: #c7c9ce; text-decoration: none; }
.room-card-name { font-weight: 600; font-size: 15px; }
.room-card-desc { margin-top: 2px; }
.room-card-meta {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.empty { text-align: center; padding: 48px 24px; }
.empty h1, .empty h2 { margin-bottom: 6px; }
.empty .btn { margin-top: 12px; }

.crumb { color: var(--text-muted); font-size: 13px; display: inline-block; margin-bottom: 6px; }

/* ---------- Forms ---------- */

label { display: flex; flex-direction: column; gap: 5px; font-weight: 550; font-size: 13.5px; }
.hint { color: var(--text-muted); font-weight: 400; font-size: 12.5px; }

input[type="text"], input[type="email"], input[type="password"], select, textarea {
  font: inherit;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
input[type="file"] { font-size: 13px; }

.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 450; }
.check input { width: auto; }

.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 550;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.btn:hover { text-decoration: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-danger { background: transparent; color: var(--danger); border-color: #f3caca; }
.btn-danger:hover { background: #fef2f2; }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.file-name { font-weight: 550; word-break: break-word; }
.nowrap { white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* ---------- Bits ---------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 550;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: capitalize;
}
.badge-dark { background: var(--text); color: #fff; border-color: var(--text); }
.badge-green { background: #f0fdf4; color: var(--green); border-color: #bbe7c8; }
.badge-red { background: #fef2f2; color: var(--danger); border-color: #f3caca; }

.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }

/* Floating toast — overlays the page instead of pushing content down; auto-dismisses. */
.flash {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18);
  max-width: min(560px, 92vw);
  animation: flashIn .22s ease;
}
@keyframes flashIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.flash.flash-out { animation: flashOut .35s ease forwards; }
@keyframes flashOut { to { opacity: 0; transform: translate(-50%, -12px); } }
.flash-success { background: #f0fdf4; color: #166534; border: 1px solid #bbe7c8; }
.flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #f3caca; }

.folder-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.folder-name .ico { color: var(--text-muted); }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 12px;
  min-width: 240px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 16px 8px;
  }
  .brand { margin-bottom: 0; margin-right: auto; padding: 0; }
  .nav {
    order: 3;
    width: 100%;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav a { white-space: nowrap; padding: 6px 10px; font-size: 13.5px; }
  .sidebar-footer { order: 2; margin: 0; padding: 0; border-top: none; flex-direction: row; align-items: center; }
  .me { display: none; }
  .main { padding: 20px 16px 40px; }
  .two-col { grid-template-columns: 1fr; }
  .row-actions { flex-wrap: wrap; }
  .card { overflow-x: auto; }
  .page-head { flex-wrap: wrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ v3: sidebar icons, notifications, chat, signatures ============ */

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav a .ico { width: 17px; height: 17px; }
.nav a span:first-of-type { flex: 1; }

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e0e7ff;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }

.sidebar-footer { gap: 8px; }
.me { display: flex; align-items: center; gap: 9px; min-width: 0; }
.me-text { min-width: 0; display: flex; flex-direction: column; }
.me-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-email { color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: flex-start; }

/* Notification cards */
.notify-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.notify {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #eef2ff;
  border: 1px solid #dbe4ff;
  border-radius: var(--radius);
  padding: 13px 16px;
  color: var(--text);
  line-height: 1.35;
}
a.notify:hover { text-decoration: none; border-color: var(--accent); }
.notify-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--accent);
}
.notify-ico .ico { width: 18px; height: 18px; }
.notify-go { margin-left: auto; color: var(--accent); font-weight: 700; }

/* Stat cards with icons */
.stat { display: flex; align-items: center; gap: 12px; }
.stat-ico {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--text-muted);
}
.stat-ico .ico { width: 18px; height: 18px; }

.gap { height: 20px; }

/* Message threads */
.thread-list { padding: 6px; }
.thread {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 8px; color: var(--text);
}
.thread:hover { background: var(--bg); text-decoration: none; }
.thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.thread-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.thread-name { font-weight: 600; }
.thread.unread .thread-name { font-weight: 750; }
.thread.unread .thread-preview { color: var(--text); font-weight: 500; }
.thread-preview { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chat */
.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 22px; max-height: 55vh; min-height: 260px; }
.chat-empty { text-align: center; padding: 40px 0; }
.bubble-row { display: flex; margin-bottom: 12px; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 78%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 13px;
}
.bubble-row.mine .bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.bubble-body { font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
.bubble-meta { font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.bubble-row.mine .bubble-meta { color: rgba(255, 255, 255, 0.75); }
.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); background: #fff; }
.chat-form input { flex: 1; }
.chat-form .btn { display: inline-flex; gap: 7px; }

/* Signatures */
.sig-row { display: flex; align-items: center; gap: 13px; padding: 10px 0; }
.sig-row + .sig-row { border-top: 1px solid var(--bg-soft, #f4f4f5); }
.sig-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #fff7ed;
  border: 1px solid #fed7aa; color: #ea580c;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sig-ico .ico { width: 18px; height: 18px; }
.sig-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sig-status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sign-wrap { max-width: 560px; }
.menu-title { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }
.menu-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Dropzone */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 26px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-weight: 450;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: #eef2ff; }
.dropzone.has-files { border-color: var(--green); background: #f0fdf4; }
.dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dz-ico { width: 24px !important; height: 24px !important; color: var(--text-muted); }
.dz-text { font-size: 13.5px; color: var(--text-muted); }
.dz-text strong { color: var(--text); }

/* Room cards with icon */
.room-card { display: flex; align-items: center; gap: 14px; }
.room-ico {
  width: 42px; height: 42px; border-radius: 10px; background: #eef2ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--accent);
}
.room-ico .ico { width: 20px; height: 20px; }
.room-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.room-card .room-card-meta { margin-top: 4px; }

.row-actions .btn .ico { width: 14px; height: 14px; }

/* Mobile refinements for the new components */
@media (max-width: 900px) {
  .nav a span:first-of-type { flex: none; }
  .me-text { display: none; }
  .logout-label { display: none; }
  .logout-btn { width: auto; }
  .sidebar-footer { align-items: center; }
  .chat-scroll { max-height: none; height: 50vh; padding: 14px; }
  .bubble { max-width: 88%; }
  .send-label { display: none; }
  .notify-row { grid-template-columns: 1fr; }
  .stat { gap: 10px; }
}

/* ============ v4: premium light sign-in ============ */

body.auth {
  background:
    radial-gradient(800px 420px at 50% -120px, rgba(37, 99, 235, 0.07), transparent),
    #f7f8fa;
}
body.auth .auth-wrap {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 26px;
  justify-content: flex-start;
  padding-top: 9vh;
  padding-bottom: 26px;
}
/* Logo sits high; the card centers in the remaining space; footer pins to the bottom */
body.auth .auth-box { margin-top: auto; margin-bottom: auto; }
/* Decorative arcs */
body.auth .auth-wrap::before,
body.auth .auth-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 99, 235, 0.10);
  pointer-events: none;
}
body.auth .auth-wrap::before { width: 950px; height: 950px; top: -460px; left: -280px; }
body.auth .auth-wrap::after { width: 1300px; height: 1300px; bottom: -760px; right: -420px; border-color: rgba(37, 99, 235, 0.07); }

.auth-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 750;
  font-size: 21px;
  color: var(--text);
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}
.auth-logo .brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }

body.auth .auth-box {
  position: relative;
  z-index: 1;
  max-width: 400px;
  padding: 34px 32px 28px;
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.18);
}
body.auth .btn-primary { padding: 11px 14px; font-size: 14.5px; }

.auth-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.auth-note .ico { width: 13px; height: 13px; }

.auth-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-foot a { color: var(--text-muted); }
.auth-foot a:hover { color: var(--text); text-decoration: none; }

/* ============ v5: email-style messaging ============ */

.mail-list { padding: 6px; }
.mailrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  color: var(--text);
}
.mailrow:hover { background: var(--bg); text-decoration: none; }
.mailrow + .mailrow { border-top: 1px solid var(--bg); }
.mailrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mailrow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mailrow-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow.unread .mailrow-subject { font-weight: 750; }
.mailrow.unread .mailrow-preview { color: var(--text); }
.mailrow-preview { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow-who { font-weight: 600; }
.mailrow-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.attach-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; }
.attach-flag .ico { width: 13px; height: 13px; }

.mail-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mail-msg { border-left: 3px solid var(--border); }
.mail-msg.mine { border-left-color: var(--accent); }
.mail-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mail-msg-who { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-msg-name { font-weight: 650; }
.mail-msg-body { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; }

.attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.attach {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  max-width: 100%;
}
.attach:hover { border-color: var(--accent); text-decoration: none; }
.attach .ico { width: 13px; height: 13px; color: var(--text-muted); }
.attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.attach-input {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.attach-input .ico { width: 14px; height: 14px; }
.attach-input input[type="file"] { width: auto; flex: 1; }

.reply-card h2 { margin-bottom: 10px; }
.compose-card { max-width: 640px; }

@media (max-width: 900px) {
  .mailrow { padding: 12px 10px; gap: 10px; }
  .mailrow-date { display: none; }
}

/* ============ v6: premium cards + granular access ============ */

.stat {
  padding: 18px 20px;
  border-radius: 12px;
  border-color: #ececef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -18px rgba(15, 23, 42, 0.14);
}
.stat-ico { width: 42px; height: 42px; border-radius: 11px; }
.stat-ico .ico { width: 19px; height: 19px; }
.stat-value { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b8b93;
  margin-top: 2px;
}

.tint-blue { background: #eef2ff; color: #2563eb; }
.tint-violet { background: #f5f3ff; color: #7c3aed; }
.tint-green { background: #ecfdf5; color: #059669; }
.tint-amber { background: #fff7ed; color: #d97706; }
.tint-gray { background: #f4f4f5; color: #52525b; }

.card {
  border-color: #ececef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -20px rgba(15, 23, 42, 0.12);
}
tbody tr { transition: background 0.08s; }
tbody tr:hover { background: #fafafa; }

.notify {
  background: #fff;
  border: 1px solid #ececef;
  border-left: 3px solid var(--accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -20px rgba(15, 23, 42, 0.12);
}
.notify-ico { background: #eef2ff; }

.badge-amber { background: #fff7ed; color: #d97706; border-color: #fed7aa; }
.room-access-note { display: flex; gap: 8px; margin-top: 6px; }

/* Granular access panel */
.client-acc { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.client-acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
}
.client-acc summary::-webkit-details-marker { display: none; }
.client-acc summary:hover { background: var(--bg); border-radius: 10px; }
.client-acc[open] summary { border-bottom: 1px solid var(--border); }
.client-acc-form { padding: 14px; }
.client-acc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  padding: 4px 0 4px 24px;
}
.folder-scope .check { font-size: 13px; }

/* ============ v7: client documents ============ */

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 2px 4px;
}
.searchbar .ico { color: var(--text-muted); width: 15px; height: 15px; flex-shrink: 0; }
.searchbar input { border: none; box-shadow: none; padding: 8px 4px; font-size: 14px; flex: 1; min-width: 0; }
.searchbar .muted { flex-shrink: 0; margin-left: auto; }
.searchbar input:focus { box-shadow: none; border: none; }
.searchbar { border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; }

/* ============ v8: wide screens, conversations pane, signing ============ */

.main { max-width: 1560px; }

/* Conversations split pane */
.convo {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  border: 1px solid #ececef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  height: calc(100vh - 200px);
  min-height: 480px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -20px rgba(15, 23, 42, 0.12);
}
.convo-list { border-right: 1px solid var(--border); overflow-y: auto; }
.convo-item {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--bg);
  color: var(--text);
}
.convo-item:hover { background: var(--bg); text-decoration: none; }
.convo-item.current { background: #eef2ff; }
.convo-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.convo-item-subject { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-item.unread .convo-item-subject { font-weight: 750; }
.convo-item-preview { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-item.unread .convo-item-preview { color: var(--text); }
.convo-item-meta { display: flex; align-items: center; gap: 4px; }
.convo-item-meta .ico { width: 11px; height: 11px; }

.convo-main { display: flex; flex-direction: column; min-width: 0; }
.convo-head { padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fff; }
.convo-title { font-weight: 700; font-size: 15.5px; }
.convo-msgs { flex: 1; overflow-y: auto; padding: 20px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.convo-msgs .mail-msg { margin: 0; }
.convo-reply { border-top: 1px solid var(--border); padding: 12px 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.convo-reply textarea { resize: none; }
.convo-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.convo-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}
.convo-empty-ico { width: 34px !important; height: 34px !important; color: #d4d4d8; }

/* Signing page */
.sign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
}
.sign-doc { padding: 10px; }
.sign-doc iframe {
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 480px;
  border: none;
  border-radius: 8px;
  background: #fff;
  display: block;
}
.sig-pad-wrap { position: relative; }
#sig-pad {
  width: 100%;
  height: 170px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.sig-clear { position: absolute; top: 6px; right: 6px; }
.sig-image { max-width: 100%; height: 90px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; background: #fff; }

@media (max-width: 1000px) {
  .convo { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .convo.has-active .convo-list { display: none; }
  .convo:not(.has-active) .convo-main { display: none; }
  .convo-msgs { max-height: 55vh; }
  .sign-grid { grid-template-columns: 1fr; }
  .sign-doc iframe { height: 55vh; min-height: 320px; }
}

/* ============ v9: rich composer, statuses, attachment previews ============ */

.badge-blue { background: #eef2ff; color: #2563eb; border-color: #dbe4ff; }

/* Rich text editor */
.rt { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.rt-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bg);
  background: #fafafa;
  flex-wrap: wrap;
}
.rt-toolbar select {
  width: auto;
  padding: 4px 6px;
  font-size: 12.5px;
  border-radius: 6px;
  background: #fff;
}
.rt-btn {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 9px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.rt-btn:hover { background: #eef2ff; }
.rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.rt-editor {
  min-height: 74px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 13px;
  font-size: 14.5px;
  outline: none;
}
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.rt-editor:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.rt-editor ul, .rt-editor ol, .mail-msg-body ul, .mail-msg-body ol { margin: 4px 0 4px 22px; }
.compose-card .rt-editor { min-height: 160px; }

/* Message body formatting */
.mail-msg-body { white-space: normal; }
.mail-msg-body blockquote { border-left: 3px solid var(--border); margin: 6px 0; padding: 2px 12px; color: var(--text-muted); }
.f-serif { font-family: Georgia, "Times New Roman", serif; }
.f-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
.f-sm { font-size: 12px; }
.f-lg { font-size: 17.5px; }

/* Attach picker chips */
.attach-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ap-btn { display: inline-flex; gap: 6px; }
.ap-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  background: #eef2ff;
  border: 1px solid #dbe4ff;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 550;
  color: #1e40af;
  max-width: 220px;
}
.ap-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-chip-x {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #1e40af;
  padding: 0 3px;
  border-radius: 50%;
}
.ap-chip-x:hover { background: rgba(37, 99, 235, 0.15); }

/* Inline image previews in conversations */
.attach-img { display: inline-flex; flex-direction: column; gap: 4px; max-width: 280px; }
.attach-img img {
  max-width: 280px;
  max-height: 200px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
  background: #fff;
}
.attach-img:hover img { border-color: var(--accent); }
.attach-img:hover { text-decoration: none; }
.attach-img-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conversation head + closed state */
.convo-head { display: flex; align-items: center; gap: 12px; }
.convo-head-main { flex: 1; min-width: 0; }
.convo-closed { padding: 16px; text-align: center; border-top: 1px solid var(--border); background: #fafafa; font-size: 13.5px; }
.convo-item-meta { flex-wrap: wrap; }
.convo-item-meta .badge { font-size: 10.5px; padding: 1px 8px; }
@media (max-width: 600px) {
  .mail-msg-head { flex-wrap: wrap; row-gap: 4px; }
  .mail-msg-who { flex-basis: 60%; }
}

/* ============ v10: mobile polish ============ */

/* Message cards: no heavy vertical lines; own messages get a soft tint */
.mail-msg { border-left: 1px solid #ececef; }
.mail-msg.mine { border-left: 1px solid #dbe4ff; background: #f8faff; }

/* Mobile nav: swipeable but no visible scrollbar */
.nav { scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }

/* Tables on small screens: fewer columns, no mid-word breaks, inline actions */
.file-name { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 700px) {
  .hide-sm { display: none !important; }
  th, td { padding: 9px 7px; }
  th { font-size: 11px; }
  .row-actions { flex-wrap: nowrap; gap: 5px; justify-content: flex-end; }
  .row-actions .badge { display: none; }
  .btn-sm { padding: 5px 8px; }
  .stat-value { font-size: 21px; }
  .page-head .btn { padding: 8px 12px; font-size: 13px; }
  h1 { font-size: 19px; }
  .card { padding: 14px; }
  .searchbar input { font-size: 16px; } /* prevents iOS zoom-on-focus */
  .rt-editor { font-size: 16px; }
  input[type="text"], input[type="email"], input[type="password"], textarea { font-size: 16px; }
}

/* ============ v11: table action cells ============ */
/* A td must stay a table cell — flex on td breaks row borders/alignment. */
td.row-actions {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
td.row-actions > a,
td.row-actions > span,
td.row-actions > form,
td.row-actions > details,
td.row-actions > .badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
td.row-actions .badge { align-items: center; }

/* ============ v12: mobile conversation layout ============ */

.convo-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}
.convo-back:hover { background: var(--bg); text-decoration: none; }

@media (max-width: 1000px) {
  .convo-back { display: inline-flex; }
  /* Fixed-height pane: messages scroll in the middle, composer pinned at the bottom */
  .convo { height: calc(100dvh - 250px); min-height: 340px; }
  .convo-msgs { max-height: none; flex: 1; min-height: 0; }
  .convo-reply { padding: 10px 12px; }
  .convo-reply .rt-editor { min-height: 44px; max-height: 110px; }
  .page-head-compact { margin-bottom: 14px; }
  .page-head-compact p { display: none; }
  .page-head-compact h1 { margin-bottom: 0; }
}
@supports not (height: 100dvh) {
  @media (max-width: 1000px) { .convo { height: calc(100vh - 250px); } }
}
/* Let the conversation grid row shrink so the composer stays pinned */
.convo { grid-template-rows: minmax(0, 1fr); }
.convo-main { min-height: 0; }
.convo-list { min-height: 0; }

/* ============ v13: sticky mobile header + message separation ============ */

/* Clear visual separation: deal team messages white, own messages blue-tinted, chat-style offset */
.mail-msg { background: #fff; border: 1px solid #e7e7ea; margin-right: 28px; }
.mail-msg.mine { background: #eef2ff; border-color: #d8e2fc; margin-right: 0; margin-left: 28px; }
.convo-msgs .mail-msg { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }

@media (max-width: 900px) {
  /* Header always visible while scrolling */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 0 var(--border), 0 4px 14px rgba(15, 23, 42, 0.07);
  }
  .mail-msg { margin-right: 14px; }
  .mail-msg.mine { margin-left: 14px; }
}

/* ============ v14: conversation pane hugs content ============ */
/* Short conversations: composer sits right under the messages.
   Long conversations: pane caps at screen height and messages scroll. */
.convo { height: auto; max-height: calc(100vh - 200px); }
.convo:not(.has-active) { min-height: 420px; }

@media (max-width: 1000px) {
  .convo { height: auto; max-height: calc(100dvh - 250px); min-height: 0; }
  .convo:not(.has-active) { min-height: 300px; }
}

/* ============ v15: subtle message bubbles ============ */
.convo-msgs .mail-msg {
  border: none;
  box-shadow: none;
  border-radius: 16px;
  padding: 13px 17px;
  max-width: min(760px, 94%);
  margin: 0 auto 0 0;              /* deal team: left */
  background: #fff;
}
.convo-msgs .mail-msg.mine {
  background: #e9efff;             /* you: light blue, right */
  margin: 0 0 0 auto;
}
.convo-msgs .mail-msg-head { margin-bottom: 7px; }
.convo-msgs .bubble-meta { color: var(--text-muted); }

/* ============ v16: even composer spacing ============ */
.convo-msgs { padding: 16px 16px 14px; gap: 10px; }
.convo-reply { padding: 12px 16px; gap: 8px; }
.convo-reply .rt-editor { min-height: 52px; }

/* ============ v17: split list and conversation into two panels ============ */
.convo {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  gap: 16px;
}
.convo-list {
  background: #fff;
  border: 1px solid #ececef;
  border-right: 1px solid #ececef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -20px rgba(15, 23, 42, 0.12);
}
.convo-main {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -20px rgba(15, 23, 42, 0.12);
}

/* ============ v18: compact composer on mobile ============ */
@media (max-width: 1000px) {
  .convo-msgs { padding: 12px 10px 10px; gap: 8px; }
  .convo-reply { padding: 8px 10px 10px; gap: 6px; }
  .rt-toolbar { padding: 3px 6px; gap: 2px; }
  .rt-toolbar select { padding: 3px 5px; font-size: 12px; }
  .rt-btn { padding: 4px 7px; font-size: 12px; }
  .rt-editor { min-height: 40px; padding: 8px 10px; }
  .convo-reply-row { gap: 8px; }
  .convo-reply-row .btn { padding: 7px 12px; font-size: 13px; }
  .ap-btn { font-size: 12.5px; padding: 6px 10px; }
}
@media (max-width: 600px) {
  .rt-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .rt-toolbar::-webkit-scrollbar { display: none; }
  .convo-reply .rt-editor { min-height: 38px; max-height: 90px; }
}

/* ============ v19: brand logo ============ */
.brand-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; display: block; flex-shrink: 0; }
.auth-logo .brand-logo { width: 38px; height: 38px; border-radius: 10px; }

/* ============ v20: conversation reaches the bottom of the screen ============ */
/* The page becomes a fixed column; the pane takes the remaining height exactly. */
.main:has(.convo) {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 14px;
}
.main:has(.convo) .page-head { flex-shrink: 0; }
.main:has(.convo) .convo {
  flex: 1 1 auto;      /* always fill down to the bottom of the screen */
  min-height: 0;
  max-height: none;
  height: auto;
}

@media (max-width: 900px) {
  body:has(.convo) { height: 100dvh; overflow: hidden; }
  body:has(.convo) .shell { height: 100dvh; }
  .main:has(.convo) { height: auto; flex: 1; min-height: 0; padding-bottom: 10px; }
}
@supports not (height: 100dvh) {
  .main:has(.convo) { height: 100vh; }
  @media (max-width: 900px) {
    body:has(.convo), body:has(.convo) .shell { height: 100vh; }
  }
}

/* ============ v21: settings toggles ============ */
.settings-card { max-width: 680px; }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bg);
  cursor: pointer;
  font-weight: 450;
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toggle-title { font-weight: 650; font-size: 14.5px; }
.switch { position: relative; width: 44px; height: 25px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #d4d4d8;
  transition: background 0.15s;
  pointer-events: none;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(19px); }

/* ============ v22: subtle blue-tinted background, like the sign-in page ============ */
:root { --bg: #f4f6fa; }
body:not(.auth) {
  background:
    radial-gradient(1000px 500px at 50% -160px, rgba(37, 99, 235, 0.05), transparent),
    #f4f6fa;
}

/* ============ v23: settings full width, switches right-aligned, bigger sidebar logo ============ */
.settings-card { max-width: none; }
.toggle-row { flex-direction: row; }   /* labels default to column; keep text left, switch right */
.toggle-text { flex: 1; }
.sidebar .brand-logo { width: 34px; height: 34px; border-radius: 9px; }
.sidebar .brand { font-size: 17px; gap: 11px; }

/* ============ v24: rooms rail, room toolbar, modals ============ */

/* Rooms rail reuses the conversation list panel */
.rooms-layout .convo-list { display: flex; flex-direction: column; }
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rail-title { font-weight: 700; font-size: 14px; }
.rooms-rail { overflow-y: auto; }
.rail-item { align-items: center; }
.rail-ico {
  width: 34px; height: 34px; border-radius: 9px; background: #eef2ff; color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rail-ico .ico { width: 17px; height: 17px; }

/* Room detail toolbar in the pane header */
.room-toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.room-content { padding: 18px; }
.folder-block { background: #fff; border: 1px solid #ececef; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.folder-block:last-child { margin-bottom: 0; }
.folder-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.folder-block-head .folder-name { margin: 0; }
.folder-empty { margin: 4px 0 0; }

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.45);
  padding: 20px;
  overflow-y: auto;
}
.modal.open { display: flex; align-items: flex-start; justify-content: center; }
.modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 22px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.4);
  animation: modal-in 0.14s ease;
}
.modal-box-wide { max-width: 560px; }
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-x { border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; border-radius: 6px; }
.modal-x:hover { color: var(--text); background: var(--bg); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

@media (max-width: 700px) {
  .room-toolbar .btn span:not(.ico) { display: inline; }
  .modal { padding: 12px; }
}

/* Room toolbar wraps below the title on small screens */
@media (max-width: 760px) {
  .rooms-layout .convo-head { flex-wrap: wrap; row-gap: 10px; }
  .rooms-layout .convo-head-main { flex-basis: calc(100% - 46px); }
  .room-toolbar { flex-basis: 100%; }
  .room-toolbar .btn { flex: 1; justify-content: center; }
  .room-content { padding: 12px 10px; }
  .folder-block { padding: 12px; }
}

/* ============ v25: account, branding, Q&A, versioning ============ */

/* Account profile */
.profile { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 4px 0 12px; }
.profile dt { color: var(--text-muted); font-size: 13px; }
.profile dd { margin: 0; font-weight: 550; }
a.me { color: inherit; border-radius: 8px; padding: 4px; margin: -4px; }
a.me:hover { background: var(--bg); text-decoration: none; }

/* Branding settings */
.branding-row { display: flex; gap: 18px; align-items: flex-start; }
.branding-preview {
  width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #fff;
}
.branding-preview img { width: 100%; height: 100%; object-fit: cover; }
.branding-fields { flex: 1; min-width: 0; }

/* Q&A metadata */
.qa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.convo-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.convo-title .badge { flex-shrink: 0; }
.qa-doc a { display: inline-flex; align-items: center; gap: 4px; }
.qa-doc .ico { width: 12px; height: 12px; }
.prio-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-right: 6px; vertical-align: middle; }

/* Version badge + replace form */
.ver-badge { margin-left: 6px; text-decoration: none; }
.replace-form input[type="file"] { font-size: 12px; }

@media (max-width: 600px) { .qa-fields { grid-template-columns: 1fr; } .branding-row { flex-direction: column; } }

/* ============ v26: professional settings layout ============ */
.settings-page { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.settings-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.settings-section:first-child { border-top: none; padding-top: 6px; }
.settings-aside h2 { font-size: 16px; margin-bottom: 6px; }
.settings-aside { position: sticky; top: 20px; align-self: start; }
.settings-panel { padding: 22px; }
.settings-panel-flush { padding: 6px 22px; }
.settings-foot { margin-top: 6px; }
.settings-foot-pad { padding: 14px 0 16px; border-top: 1px solid var(--bg); margin-top: 4px; }

/* Branding block */
.branding-row { display: flex; gap: 20px; align-items: flex-start; }
.branding-preview {
  width: 76px; height: 76px; border-radius: 16px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
.branding-preview img { width: 100%; height: 100%; object-fit: cover; }
.branding-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.logo-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-picker .btn { display: inline-flex; gap: 7px; }
.lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Feature rows */
.feature-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bg);
  cursor: pointer;
  font-weight: 450;
}
.feature-row:last-of-type { border-bottom: none; }
.feature-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-ico .ico { width: 18px; height: 18px; }
.feature-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feature-title { font-weight: 650; font-size: 14.5px; }

@media (max-width: 820px) {
  .settings-section { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .settings-aside { position: static; }
}
.feature-row { flex-direction: row; }   /* override global label column layout */

/* ============ v27: notifications strip + tasks ============ */
.notif-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.notif {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #ececef; border-radius: 12px;
  padding: 14px 16px; color: var(--text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px -20px rgba(15,23,42,0.12);
}
.notif:hover { text-decoration: none; border-color: #c7c9ce; }
.notif-n { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; margin-left: auto; }
.notif-label { font-size: 12.5px; color: var(--text-muted); font-weight: 550; }
.notif-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-ico .ico { width: 16px; height: 16px; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.notif-red .notif-dot { background: var(--danger); }
.notif-red .notif-n { color: var(--danger); }
.notif-violet .notif-ico { background: #f5f3ff; color: #7c3aed; }
.notif-blue .notif-ico { background: #eef2ff; color: var(--accent); }
.notif-amber .notif-ico { background: #fff7ed; color: #d97706; }
.notif-off { opacity: 0.6; }
.notif-off .notif-dot { background: #d4d4d8; }
.notif-off .notif-ico { background: var(--bg); color: var(--text-muted); }
.notif-strip .notif-label { flex: 1; }
.notif-dot + .notif-n { margin-left: auto; }

/* ============ v28: CC list ============ */
.cc-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cc-item { font-size: 13.5px; }

/* ============================================================
   v29 — Institutional reskin (professional business suite)
   Desaturated slate/navy palette · one accent · monochrome
   icons · tighter geometry · flatter surfaces · subtler chips.
   Appended last so it overrides the earlier consumer styling.
   ============================================================ */
:root {
  --bg: #eceff3;
  --surface: #ffffff;
  --border: #dce1e8;
  --text: #172033;
  --text-muted: #64707f;
  --accent: #1a86e0;         /* lighter enterprise blue (client screenshots) */
  --accent-hover: #1569b8;
  --accent-soft: #e8f4fd;
  --danger: #e11d2b;         /* stronger warning red */
  --warning: #e11d2b;
  --green: #157347;
  --radius: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
body { font-size: 14px; }
body:not(.auth) { background: #eceff3; }

/* Flatter, tighter cards & surfaces */
.card { border-color: var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); padding: 18px; }
.stat { border-color: var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); padding: 16px 18px; }
.notif { border-color: var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.room-card { border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.convo, .convo-list, .convo-main { border-color: var(--border); box-shadow: 0 1px 2px rgba(16,24,40,0.05); border-radius: 8px; }

/* Buttons — tighter radius, restrained accent */
.btn { border-radius: 6px; font-weight: 600; }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], select, textarea { border-radius: 6px; border-color: #cfd6df; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 72, 107, 0.14); }

/* Sidebar / nav — slate active state, not bright blue */
.nav a.active { background: #eef1f5; color: var(--accent); }
.brand-mark { background: var(--text); }

/* MONOCHROME icon tiles — kills the "rainbow" that read as consumer.
   Decorative icons become one neutral slate tone across the app. */
.tint-blue, .tint-violet, .tint-green, .tint-amber, .tint-gray,
.stat-ico, .room-ico, .rail-ico, .notify-ico, .feature-ico, .sig-ico {
  background: #eef1f5 !important;
  color: #52627a !important;
  border: none !important;
}
.notif-violet .notif-ico, .notif-blue .notif-ico, .notif-amber .notif-ico { background: #eef1f5; color: #52627a; }
.avatar { background: #e7ebf1; color: var(--accent); }

/* Status chips — squarer, quieter; colour reserved for meaning only */
.badge { border-radius: 5px; font-weight: 600; background: #eef1f5; border-color: var(--border); color: #52627a; text-transform: none; }
.badge-dark { background: var(--text); color: #fff; border-color: var(--text); }
.badge-green { background: #eaf5ee; color: #157347; border-color: #cfe7d8; }
.badge-red { background: #fde3e4; color: #c81e2b; border-color: #f7c7ca; }
.badge-amber { background: #fbf1e4; color: #b7791f; border-color: #f0ddc2; }
.badge-blue { background: #e8f4fd; color: #1a6fc4; border-color: #cfe6fa; }

/* Notification "action required" keeps its status colour but calmer */
.notif-red .notif-n { color: var(--danger); }
.notif-red .notif-dot { background: var(--danger); }

/* Denser tables */
th { font-size: 11.5px; letter-spacing: 0.03em; }
td { padding: 9px 10px; }

/* Notification-strip numbers a touch smaller/serious */
.notif-n { font-size: 20px; }
.stat-value { font-size: 23px; }

/* CC picker */
.cc-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-input { flex: 1; min-width: 200px; }
.cc-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }

/* ============ v30: account layout + anchor scroll ============ */
.account-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  max-width: 940px;
  align-items: start;
}
.account-grid .profile { margin-bottom: 14px; }
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }
[id] { scroll-margin-top: 20px; }

/* ============ v31: account page redesign ============ */
.account-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; max-width: 940px; }
.account-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: #e7ebf1; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 21px; flex-shrink: 0;
}
.account-name { font-size: 18px; font-weight: 700; }
.account-tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.account-pw { max-width: 380px; }
.account-pw label, .account-pw input { width: 100%; }

/* ============ v32: white conversation canvas + Cc bar ============ */
/* White canvas so the grey (deal team) and light-blue (you) bubbles read clearly */
.convo-msgs { background: #ffffff; }
.convo-msgs .mail-msg { background: #f1f4f8; border: 1px solid #e6ebf1; box-shadow: none; }
.convo-msgs .mail-msg.mine { background: #e9efff; border-color: #d8e2fc; }

/* Cc bar at the top of an open conversation */
.cc-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--border); background: #fff;
}
.cc-bar-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef1f5; border: 1px solid var(--border); border-radius: 99px;
  padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 550; color: #334155;
}
.cc-chip-rm { display: inline; }
.cc-chip-rm button { border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 3px; border-radius: 50%; }
.cc-chip-rm button:hover { background: rgba(0,0,0,0.08); color: var(--text); }
.cc-add-form { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.cc-add-form input[type="text"] { width: auto; min-width: 190px; padding: 5px 10px; font-size: 13px; }
@media (max-width: 700px) { .cc-add-form { margin-left: 0; flex-basis: 100%; } .cc-add-form input { flex: 1; } }

/* v33: Cc bar empty hint */
.cc-empty { font-style: italic; }

/* ============ v34: email-style Cc recipient box ============ */
.recipient-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1px solid #cfd6df; border-radius: 6px; padding: 6px 8px; background: #fff;
}
.recipient-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36,72,107,0.14); }
.recipient-box .cc-chips { display: contents; }
.recipient-box .cc-input {
  flex: 1; min-width: 160px; border: none; box-shadow: none !important; padding: 4px 2px; outline: none;
}
.recipient-box .cc-input:focus { border: none; box-shadow: none !important; }
.recipient-box .cc-add { margin-left: auto; }
.recipient-box .ap-chip { background: #eef1f5; border-color: var(--border); color: #334155; }

/* ============ v35: version label + collapsible sidebar ============ */
.sidebar-top { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.sidebar-top .brand { margin-bottom: 0; flex: 1; min-width: 0; }
.sb-toggle {
  border: 1px solid var(--border); background: #fff; color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sb-toggle:hover { background: var(--bg); color: var(--text); }
.sb-toggle .ico { width: 15px; height: 15px; }
.version-label { font-size: 11px; color: #9aa4b2; margin-top: 6px; padding-left: 4px; letter-spacing: 0.02em; }

/* Collapsed state (desktop only — mobile keeps the top-bar layout) */
@media (min-width: 901px) {
  body.sb-collapsed .sidebar { width: 66px; padding-left: 10px; padding-right: 10px; }
  body.sb-collapsed .brand-name,
  body.sb-collapsed .nav a span,
  body.sb-collapsed .me-text,
  body.sb-collapsed .logout-label,
  body.sb-collapsed .version-label { display: none; }
  body.sb-collapsed .nav a { justify-content: center; padding: 9px 0; }
  body.sb-collapsed .nav a .nav-badge {
    position: absolute; top: 3px; right: 8px; min-width: 8px; height: 8px; padding: 0;
    font-size: 0; border-radius: 50%;
  }
  body.sb-collapsed .nav a { position: relative; }
  body.sb-collapsed .brand { justify-content: center; }
  body.sb-collapsed .sidebar-top { flex-direction: column; gap: 8px; }
  body.sb-collapsed .sb-toggle .ico { transform: rotate(180deg); }
  body.sb-collapsed .me { justify-content: center; }
  body.sb-collapsed .logout-btn { justify-content: center; }
}

/* ============ v36: responsive header fixes ============ */
.account-hero { position: relative; }
.account-signout { margin-left: auto; align-self: flex-start; }

/* Tablet & mobile: no sidebar collapse control, no version label (top-bar layout) */
@media (max-width: 900px) {
  .sb-toggle { display: none !important; }
  .version-label { display: none !important; }
  .sidebar-top { margin: 0 auto 0 0; gap: 0; }
}
/* Phone: sign out lives in the account page; account avatar sits on the right */
@media (max-width: 600px) {
  .logout-form { display: none !important; }
  .sidebar-footer { margin-left: auto; }
}

/* ============ v37: document preview modal ============ */
.preview-modal.open { align-items: stretch; justify-content: center; padding: 24px; }
.preview-box {
  background: #fff; border-radius: 12px; width: 100%; max-width: 1000px; margin: auto;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px -12px rgba(15,23,42,0.45);
  height: 88vh;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.preview-title { font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.preview-box iframe { flex: 1; width: 100%; border: none; background: #f4f6fa; }
@media (max-width: 700px) { .preview-modal.open { padding: 8px; } .preview-box { height: 92vh; } }

/* ============ v47: consistent width, custom file inputs, data-room shell ============ */

/* Content fills to a fixed gap from the right on every page and in both sidebar
   states (expanded/collapsed) — no growing right-hand gap on wide screens. */
.main { max-width: none; }
.settings-page { max-width: none; }
.account-hero { max-width: none; }
.account-grid { max-width: none; }

/* Nice, tidy native file pickers (replaces the raw "Choose file" control) */
input[type="file"] {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover {
  background: #eef2ff;
  border-color: var(--accent);
  color: var(--accent);
}
.replace-form input[type="file"] { display: block; width: 100%; font-size: 12.5px; }

/* Data rooms — settings-style: plain list on the left, white panel on the right */
.rooms-shell { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; }
.rooms-aside { position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.rooms-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rooms-aside-head h1 { font-size: 20px; margin: 0; }
.rooms-aside-sub { color: var(--text-muted); font-size: 12.5px; margin: -6px 0 0; }
.rooms-nav { display: flex; flex-direction: column; gap: 2px; }
.rooms-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  color: var(--text-muted); font-weight: 550; font-size: 13.5px; min-width: 0;
}
.rooms-nav-item:hover { background: var(--surface); color: var(--text); text-decoration: none; }
/* Clear, easy-to-see selected state: white pill, border, accent bar + text */
.rooms-nav-item.current {
  background: #fff; color: var(--accent); font-weight: 650;
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  padding-left: 8px; border-left: 3px solid var(--accent);
}
.rooms-nav-item.current .ico { color: var(--accent); }
.rooms-nav-item .ico { width: 16px; height: 16px; flex-shrink: 0; }
.rooms-nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-nav-empty { color: var(--text-muted); font-size: 13px; padding: 6px 11px; }

/* Right side: transparent header (title + buttons) on top, white docs card under */
.rooms-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rooms-main-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 0 2px;
}
.rooms-main-head .rph-title { min-width: 0; }
.rooms-main-head h1 { font-size: 20px; margin: 0; }
.rooms-main .room-toolbar { flex-shrink: 0; }

.rooms-panel { padding: 0; overflow: hidden; }
.rooms-panel-body { padding: 18px 20px; }
.rooms-panel-body .folder-block {
  background: transparent; border: none; border-radius: 0;
  padding: 0 0 14px; margin: 0 0 16px; border-bottom: 1px solid var(--bg);
}
.rooms-panel-body .folder-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.rooms-empty-panel { padding: 40px 24px; text-align: center; }

@media (max-width: 820px) {
  .rooms-shell { grid-template-columns: 1fr; gap: 16px; }
  .rooms-aside { position: static; }
  .rooms-main-head { flex-wrap: wrap; row-gap: 12px; }
}

/* ============ v48: custom checkboxes, radios, date field ============ */

/* Custom checkboxes & radios everywhere (settings toggle switches excluded below) */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--border); background: #fff;
  border-radius: 5px; cursor: pointer; flex-shrink: 0;
  position: relative; vertical-align: -3px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Settings toggle switches keep their own look */
.switch input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 100%; opacity: 0; border: none; background: none;
  border-radius: 0; position: absolute; vertical-align: baseline;
}
.switch input[type="checkbox"]::after { display: none; }

/* Date field — styled to match our inputs, custom calendar button */
input[type="date"]::-webkit-datetime-edit { color: var(--text); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { color: var(--text-muted); }
input[type="date"]:focus::-webkit-datetime-edit { color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .5; padding: 3px; border-radius: 6px;
  transition: opacity .15s, background .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--bg); }

/* ============ v49: fully custom date picker ============ */
.dp { position: relative; }
.dp-native { display: none; }
.dp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; font-size: 14px; color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.dp-trigger:hover { border-color: var(--accent); }
.dp-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.dp-value.empty { color: var(--text-muted); }
.dp-icons { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dp-clear { color: var(--text-muted); font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 5px; }
.dp-clear:hover { color: #dc2626; background: var(--bg); }
.dp-cal { width: 16px; height: 16px; color: var(--text-muted); }

.dp-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 288px; max-width: 92vw; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 36px -10px rgba(15,23,42,0.28); padding: 12px;
  display: none;
}
.dp-pop.open { display: block; }
.dp-pop.dp-up { top: auto; bottom: calc(100% + 6px); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-month { font-weight: 650; font-size: 14px; }
.dp-nav {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff;
  cursor: pointer; font-size: 17px; line-height: 1; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.dp-nav:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.dp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 4px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dp-day {
  height: 34px; border: none; background: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--text); display: flex; align-items: center; justify-content: center;
}
.dp-day:hover:not(.dp-empty) { background: #eef2ff; color: var(--accent); }
.dp-empty { cursor: default; }
.dp-day.today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--border); }
.dp-day.selected, .dp-day.selected:hover { background: var(--accent); color: #fff; font-weight: 650; }
.dp-foot { margin-top: 8px; display: flex; justify-content: flex-end; }
.dp-today { border: none; background: none; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 5px 8px; border-radius: 6px; }
.dp-today:hover { background: var(--bg); }

/* ============ v51: make priorities stand out on the dashboard ============ */

/* Active notification tiles pop with colour; inactive ones stay muted grey */
.notif-red   { border-color: #fecaca; background: #fef2f2; }
.notif-red   .notif-ico { background: #fee2e2; color: var(--danger); }
.notif-red   .notif-n, .notif-red .notif-dot { color: var(--danger); background: var(--danger); }
.notif-red   .notif-n { background: none; }
.notif-amber { border-color: #fed7aa; background: #fff7ed; }
.notif-amber .notif-ico { background: #ffedd5; color: #d97706; }
.notif-amber .notif-n { color: #d97706; }
.notif-violet { border-color: #ddd6fe; background: #f5f3ff; }
.notif-violet .notif-ico { background: #ede9fe; color: #7c3aed; }
.notif-violet .notif-n { color: #7c3aed; }
.notif-off { opacity: .7; }
.notif-off .notif-ico { background: var(--bg); color: var(--text-muted); }
.notif-off .notif-dot { background: #d4d4d8; }
.notif-off .notif-n { color: var(--text-muted); }

/* Priority cards: coloured left edge so the action items are obvious at a glance */
.priority-card { border-left: 4px solid var(--border); }
.priority-card.priority-red { border-left-color: var(--danger); }
.priority-card.priority-violet { border-left-color: #7c3aed; }
.priority-flag {
  display: inline-block; vertical-align: middle; margin-right: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.priority-flag-red { background: #fee2e2; color: var(--danger); }
.priority-flag-violet { background: #ede9fe; color: #7c3aed; }

.badge-violet { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }

/* ============ v52: aligned row-action buttons + task priorities ============ */

/* Every control in an actions cell shares one height and centre line, so icon
   buttons, text buttons, badges and "View only" all line up cleanly. */
.row-actions .btn-sm,
td.row-actions > .badge,
td.row-actions > span,
td.row-actions > details > summary.btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  vertical-align: middle;
}
td.row-actions > span.muted { color: var(--text-muted); }

/* Task priority pills */
.badge-urgent { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.badge-normal { background: #fff7ed; color: #d97706; border-color: #fed7aa; }
.badge-low    { background: #eef1f5; color: #52627a; border-color: #e2e6ec; }

/* My tasks list — guided, priority-ordered */
.task-hint { margin: -4px 0 12px; }
.task-list { display: flex; flex-direction: column; }
.task-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 4px;
  border-bottom: 1px solid var(--bg);
}
.task-row:last-child { border-bottom: none; }
.task-rank {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; background: var(--bg); color: var(--text-muted);
}
.task-row.prio-high .task-rank { background: #fee2e2; color: var(--danger); }
.task-row.prio-normal .task-rank { background: #fff7ed; color: #d97706; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: 14px; }
.task-meta { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.task-note { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.task-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 600px) {
  .task-row { flex-wrap: wrap; }
  .task-side { width: 100%; justify-content: flex-end; }
}

/* ============ v54: responsive documents list ============ */
.doc-list { display: flex; flex-direction: column; }
.doc-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 4px;
  border-bottom: 1px solid var(--bg); min-width: 0;
}
.doc-row:last-child { border-bottom: none; }
.doc-info { flex: 1; min-width: 0; }         /* min-width:0 lets the text truncate instead of overflowing */
.doc-name {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-meta {
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* less-important info collapses to … */
}
.doc-sep { opacity: .5; margin: 0 2px; }
.doc-act { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.doc-act .btn-sm, .doc-act .badge { min-height: 30px; display: inline-flex; align-items: center; box-sizing: border-box; }

/* ============ v55: sidebar global search ============ */
.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
  transition: border-color .15s, background .15s;
}
.sidebar-search:focus-within { border-color: var(--accent); background: #fff; }
.sidebar-search .ico { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.sidebar-search input {
  border: none; background: none; box-shadow: none;
  padding: 8px 0; font-size: 13.5px; width: 100%; min-width: 0;
}
.sidebar-search input:focus { border: none; box-shadow: none; }
.sidebar-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Collapsed sidebar: hide the field (the search icon nav stays reachable when expanded) */
body.sb-collapsed .sidebar-search { display: none; }

/* ============ v56: mobile header alignment ============ */
@media (max-width: 900px) {
  .sidebar { align-items: center; }
  /* Row 1: brand left, profile right (aligned). Row 2: search full width. Row 3: nav. */
  .sidebar-top { order: 1; margin: 0 auto 0 0 !important; }
  .sidebar-footer { order: 2; margin: 0 !important; align-self: center; }
  .sidebar-search { order: 3; width: 100%; margin: 10px 0 0 !important; }
  .nav { order: 4; }
  /* Profile is just the avatar circle — no divider line, no name/email */
  .sidebar-footer .version-label { display: none !important; }
  .sidebar-footer .me { border-top: none; padding-top: 0; }
  .sidebar-footer .me .avatar { margin: 0; }
}

/* ============ v57: sign page — on-demand document, single column ============ */
.sign-col { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.sign-doc-cta { display: flex; align-items: center; gap: 14px; }
.sign-doc-ico {
  width: 44px; height: 44px; border-radius: 10px; background: #eef2ff; color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sign-doc-ico .ico { width: 22px; height: 22px; }
.sign-doc-info { flex: 1; min-width: 0; }
.sign-doc-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-doc-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
  .sign-doc-cta { flex-wrap: wrap; }
  .sign-doc-actions { width: 100%; }
  .sign-doc-actions .btn { flex: 1; justify-content: center; }
}

/* ============ v58: Cc autocomplete dropdown ============ */
.cc-ac-wrap { position: relative; flex: 1; min-width: 0; }
.cc-ac-input { width: 100%; }
.cc-ac-menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(15,23,42,0.25); padding: 4px;
  max-height: 240px; overflow-y: auto;
}
.cc-ac-opt {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; border-radius: 7px; cursor: pointer;
}
.cc-ac-opt:hover { background: #eef2ff; }
.cc-ac-opt[hidden] { display: none; }
.cc-ac-name { font-weight: 550; font-size: 13.5px; }

/* ============ v59: top header + horizontal nav (replaces sidebar) ============ */
.shell { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px; height: 60px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { margin: 0; padding: 0; font-size: 16px; margin-right: auto; }
.topbar .brand-logo { width: 30px; height: 30px; border-radius: 8px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-search {
  display: flex; align-items: center; gap: 8px; width: 300px; max-width: 34vw;
  border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; background: var(--bg);
  transition: border-color .15s, background .15s;
}
.topbar-search:focus-within { border-color: var(--accent); background: #fff; }
.topbar-search .ico { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.topbar-search input { border: none; background: none; box-shadow: none; padding: 8px 0; font-size: 13.5px; width: 100%; min-width: 0; }
.topbar-search input:focus { border: none; box-shadow: none; }
.topbar-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; color: var(--text-muted); flex-shrink: 0;
}
.topbar-icon:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.topbar-icon .ico { width: 19px; height: 19px; }
.topbar-icon .nav-badge { position: absolute; top: 4px; right: 4px; }
.topbar-user { display: inline-flex; align-items: center; gap: 9px; color: var(--text); padding: 5px 10px 5px 5px; border-radius: 999px; }
.topbar-user:hover { background: var(--bg); text-decoration: none; }
.topbar-user-name { font-weight: 600; font-size: 13.5px; }

.topnav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 60px; z-index: 49; }
.topnav-inner { display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.topnav-inner::-webkit-scrollbar { display: none; }
.topnav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 14px;
  color: var(--text-muted); font-weight: 550; font-size: 14px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.topnav a:hover { color: var(--text); text-decoration: none; }
.topnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.topnav a .ico { width: 16px; height: 16px; }
.topnav .nav-badge { margin-left: 2px; }

.main { flex: 1; padding: 28px 32px 60px; max-width: none; width: 100%; min-width: 0; }

@media (max-width: 700px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-search { display: none; }
  .topbar-user-name { display: none; }
  .main { padding: 20px 16px 48px; }
  .topnav-inner { padding: 0 8px; }
  .topnav a { padding: 12px 11px; font-size: 13.5px; }
}

/* v59: sticky panels sit below the fixed top header (60px) + nav (~48px) */
.rooms-aside { top: 120px; }
.settings-aside { top: 120px; }

/* ============ v60: folder-tree document explorer ============ */
.ftree-roomselect { width: 100%; margin-bottom: 12px; }
.ftree-wrap { display: block; }
.ftree { list-style: none; margin: 0; padding: 0; }
.ftree .ftree { padding-left: 13px; }
.ftree-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px;
  color: var(--text-muted); font-size: 13.5px; font-weight: 500; min-width: 0; cursor: pointer;
}
.ftree-row:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.ftree-row.current { background: #eef2ff; color: var(--accent); font-weight: 650; }
.ftree-root { font-weight: 650; color: var(--text); margin-bottom: 2px; }
.ftree-caret { width: 11px; flex-shrink: 0; font-size: 9px; color: var(--text-muted); line-height: 1; }
.ftree-caret::before { content: '\25B8'; }
.ftree-caret.open::before { content: '\25BE'; }
.ftree-caret.leaf::before { content: ''; }
.ftree-ico { width: 15px; height: 15px; flex-shrink: 0; color: #94a3b8; }
.ftree-row.current .ftree-ico { color: var(--accent); }
.ftree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ftree-count { font-size: 11px; color: var(--text-muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 4px; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: #cbd5e1; }

/* Sub-folder cards in the main panel */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 20px; }
.folder-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); min-width: 0;
}
.folder-card:hover { border-color: var(--accent); background: #f8faff; text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.folder-card-ico { width: 38px; height: 38px; border-radius: 9px; background: #eef2ff; color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.folder-card-ico .ico { width: 19px; height: 19px; }
.folder-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folder-card-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.files-table .file-ico { width: 15px; height: 15px; color: #94a3b8; vertical-align: -3px; margin-right: 7px; }

/* ============ v61: client dashboard (required actions + workspace) ============ */
.req-section { margin-bottom: 22px; }
.req-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.req-flag {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--danger); background: #fee2e2; padding: 4px 10px; border-radius: 999px;
}
.req-count { font-weight: 700; color: var(--text-muted); }
.req-cards { display: flex; flex-direction: column; gap: 10px; }
.req-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; border-left: 4px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.req-card.prio-high { border-left-color: var(--danger); }
.req-card.prio-normal { border-left-color: #d97706; }
.req-card.prio-low { border-left-color: #94a3b8; }
.req-card-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.req-card.prio-high .req-card-ico { background: #fee2e2; color: var(--danger); }
.req-card-ico .ico { width: 20px; height: 20px; }
.req-card-main { flex: 1; min-width: 0; }
.req-card-title { font-weight: 650; font-size: 15px; }
.req-card-meta { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.req-card-note { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.req-card-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.ws-title { font-size: 15px; margin: 4px 0 12px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ws-card {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.ws-card:hover { text-decoration: none; border-color: #c7c9ce; }
.ws-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ws-ico .ico { width: 19px; height: 19px; }
.ws-body { display: flex; flex-direction: column; }
.ws-n { font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.ws-label { font-size: 12.5px; color: var(--text-muted); font-weight: 550; margin-top: 2px; }
.ws-card.ws-red { border-color: #fecaca; background: #fef2f2; } .ws-card.ws-red .ws-ico { background: #fee2e2; color: var(--danger); } .ws-card.ws-red .ws-n { color: var(--danger); }
.ws-card.ws-blue .ws-ico { background: #eef2ff; color: var(--accent); } .ws-card.ws-blue .ws-n { color: var(--accent); }
.ws-card.ws-amber .ws-ico { background: #fff7ed; color: #d97706; } .ws-card.ws-amber .ws-n { color: #d97706; }

.activity-feed { list-style: none; margin: 0; padding: 0; }
.activity-feed li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--bg); }
.activity-feed li:last-child { border-bottom: none; }
.af-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.af-text { flex: 1; min-width: 0; font-size: 13.5px; }
.af-action { font-weight: 600; text-transform: capitalize; }

/* ============ v62: VDR document index table + folder indices ============ */
.ftree-idx { color: var(--text-muted); font-weight: 600; }
.ftree-row.current .ftree-idx { color: var(--accent); }

.index-table { width: 100%; border-collapse: collapse; }
.index-table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.index-table td { padding: 11px 10px; border-bottom: 1px solid var(--bg); vertical-align: middle; }
.index-table tr:last-child td { border-bottom: none; }
.index-table .idx-col { width: 84px; }
.index-table .size-col { width: 92px; }
.index-table .date-col { width: 108px; }
.idx-num { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13px; white-space: nowrap; font-weight: 600; }
.idx-folder-row:hover td { background: #f8faff; }
.idx-folder-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); min-width: 0; }
.idx-folder-link:hover { color: var(--accent); text-decoration: none; }

.ftype-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; flex-shrink: 0; }
.ftype-folder { color: #475569; margin-right: 0; }
.ftype-pdf { color: #dc2626; }
.ftype-sheet { color: #16a34a; }
.ftype-doc { color: #2563eb; }
.ftype-image { color: #7c3aed; }
.ftype-file { color: #64748b; }

@media (max-width: 700px) { .index-table .idx-col { width: 54px; } .idx-num { font-size: 12px; } }

/* ============ v63: interactive tree chevron + locked documents ============ */
.ftree .ftree { padding-left: 0; }               /* indent now comes from .ftree-children */
.ftree-row { display: flex; align-items: center; border-radius: 8px; padding: 0; }
.ftree-row:hover { background: var(--surface); }
.ftree-row.current { background: #eef2ff; }
.ftree-caret {
  width: 20px; height: 30px; flex-shrink: 0; border: none; background: none; padding: 0;
  cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}
.ftree-caret::before { content: '\25B8'; font-size: 9px; transition: transform .12s ease; }
li.open > .ftree-row .ftree-caret::before { transform: rotate(90deg); }
.ftree-caret.leaf { cursor: default; }
.ftree-caret.leaf::before { content: ''; }
button.ftree-caret:hover { color: var(--text); }
.ftree-link {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  padding: 7px 9px 7px 0; color: var(--text-muted); font-size: 13.5px; font-weight: 500;
}
.ftree-link:hover { text-decoration: none; color: var(--text); }
.ftree-row.current .ftree-link { color: var(--accent); font-weight: 650; }
.ftree-row.current .ftree-ico { color: var(--accent); }
.ftree-children { display: none; padding-left: 15px; }
li.open > .ftree-children { display: block; }

/* Locked documents */
.lock-badge { background: #f1f5f9; color: #475569; border-color: #e2e8f0; display: inline-flex; align-items: center; gap: 4px; }
.lock-badge .ico { width: 11px; height: 11px; }
.lock-tag { display: inline-flex; align-items: center; gap: 5px; color: #94a3b8; }
.lock-tag .ico { width: 14px; height: 14px; }
.file-locked-name { color: var(--text-muted); }
.ftype-icon.ftype-file[href*="lock"], .file-name .ftype-file { }

/* ============ v64: full-height document explorer (sidebar + flush list) ============ */
/* Break out of .main padding so the folder panel is a true full-height sidebar
   and the document list runs edge-to-edge, header to bottom (no card box). */
.rooms-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin: -28px -32px -60px;
  height: calc(100vh - 108px);
}
.rooms-aside {
  position: static; top: auto; height: auto; align-self: stretch;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; padding: 18px 12px; gap: 12px; min-height: 0;
}
.rooms-aside-head h1 { font-size: 15px; }
/* readable tree text + clearly visible selected folder */
.ftree-link { color: var(--text); }
.ftree-idx { color: var(--text-muted); }
.ftree-row:hover { background: var(--bg); }
.ftree-row.current { background: #dbe4ff; box-shadow: inset 3px 0 0 var(--accent); }
.ftree-row.current .ftree-link { color: #1d4ed8; font-weight: 700; }
.ftree-row.current .ftree-ico { color: #1d4ed8; }
.ftree-root { border-radius: 8px; }

.rooms-main { overflow-y: auto; min-width: 0; padding: 24px 30px 40px; background: #fff; display: block; }
.rooms-panel { padding: 0; background: none; border: none; box-shadow: none; overflow: visible; }
.rooms-panel-body { padding: 0; }
.index-table td, .index-table th { padding-left: 4px; }

@media (max-width: 820px) {
  .rooms-shell { grid-template-columns: 1fr; height: auto; margin: -20px -16px -48px; }
  .rooms-aside { border-right: none; border-bottom: 1px solid var(--border); max-height: 240px; }
  .rooms-main { padding: 18px 16px 40px; }
}

/* ============ v65: notification dropdown ============ */
.notif-menu > summary { cursor: pointer; }
.notif-panel { width: 360px; max-width: 92vw; padding: 0; overflow: hidden; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-panel-title { font-weight: 700; font-size: 14px; }
.notif-linkbtn { border: none; background: none; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; }
.notif-linkbtn:hover { text-decoration: underline; }
.notif-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--bg); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: #f5f8ff; }
.notif-item-link { flex: 1; min-width: 0; display: flex; gap: 10px; padding: 11px 12px; color: var(--text); }
.notif-item-link:hover { text-decoration: none; background: var(--bg); }
.notif-dotype { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #cbd5e1; }
.notif-item.unread .notif-dotype { background: var(--accent); }
.notif-t-signature { background: #7c3aed !important; }
.notif-t-message { background: var(--accent) !important; }
.notif-t-document { background: #16a34a !important; }
.notif-t-task { background: #d97706 !important; }
.notif-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-weight: 650; font-size: 13.5px; }
.notif-item-body { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-time { font-size: 11.5px; color: #94a3b8; }
.notif-del { display: flex; }
.notif-del button { border: none; background: none; color: #b4bcc8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 12px; }
.notif-del button:hover { color: #dc2626; }

/* ============ v66: file requests ============ */
.notif-t-request { background: #0891b2 !important; }

/* status badges */
.req-badge-new { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.req-badge-in_progress { background: #fff7ed; color: #d97706; border-color: #fed7aa; }
.req-badge-answered { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* client list */
.req-group-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 10px; }
.req-dot { width: 9px; height: 9px; border-radius: 50%; }
.req-dot-new { background: var(--danger); } .req-dot-in_progress { background: #d97706; } .req-dot-answered { background: #16a34a; }
.req-cards2 { display: flex; flex-direction: column; gap: 10px; }
.req-card2 { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.req-card2:hover { border-color: var(--accent); text-decoration: none; }
.req-card2-ico { width: 40px; height: 40px; border-radius: 10px; background: #ecfeff; color: #0891b2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.req-card2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.req-card2-title { font-weight: 650; }

/* detail (client + admin) */
.req-detail { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.req-instructions { white-space: pre-line; color: var(--text); margin: 0; }
.req-q { margin: 14px 0; }
.req-q-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.req-yesno { display: flex; gap: 22px; }
.req-decl { margin: 16px 0 10px; align-items: flex-start; }
.req-actions { display: flex; gap: 10px; }
.req-files { list-style: none; margin: 12px 0 0; padding: 0; }
.req-files li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bg); }
.req-files li:last-child { border-bottom: none; }
.req-file-name { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.req-file-name .ico { width: 15px; height: 15px; color: #64748b; flex-shrink: 0; }
.req-file-del button { border: none; background: none; color: #b4bcc8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.req-file-del button:hover { color: #dc2626; }

/* admin responses */
.req-answer { padding: 10px 0; border-bottom: 1px solid var(--bg); }
.req-answer:last-child { border-bottom: none; }
.req-answer-q { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.req-answer-a { color: var(--text); white-space: pre-line; }

/* admin question builder */
.q-row { display: flex; gap: 8px; align-items: center; }
.q-row input[type="text"] { flex: 1; }
.q-row select { width: auto; flex-shrink: 0; }

/* ============ v67: sign popup (modal + embed page) ============ */
.sign-modal.open { align-items: center; justify-content: center; padding: 20px; }
.sign-modal-box {
  position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  height: min(88vh, 720px); overflow: hidden; box-shadow: 0 24px 60px -12px rgba(15,23,42,.45);
}
.sign-modal-box iframe { width: 100%; height: 100%; border: none; display: block; }
.sign-modal-x { position: absolute; top: 10px; right: 12px; z-index: 2; background: #fff; border-radius: 8px; }

/* Embed page (rendered inside the iframe) */
body.sign-embed { background: #fff; }
.sign-embed-wrap { padding: 22px 22px 26px; max-width: 620px; margin: 0 auto; }
.sign-embed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sign-embed-title { font-weight: 700; font-size: 16px; }
.sign-embed-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; }
.sign-embed-doc .sign-doc-ico { width: 38px; height: 38px; border-radius: 9px; background: #eef2ff; color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sign-embed-doc .sign-doc-info { flex: 1; min-width: 0; }
.sign-embed-doc .sign-doc-name { font-weight: 600; font-size: 13.5px; }
.sign-embed-label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.sign-embed .sig-pad-wrap { position: relative; }
.sign-embed-done { text-align: center; padding: 26px 10px; }
.sign-embed-done-ico { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: #dcfce7; color: #16a34a; align-items: center; justify-content: center; margin-bottom: 10px; }
.sign-embed-done-ico .ico { width: 26px; height: 26px; }
.sign-embed-done h2 { margin: 0 0 4px; }
.sign-embed-done .sig-image { margin: 12px auto; display: block; }

/* ============ v68: sign popup split preview (PDF left, signature right) ============ */
.sign-modal-box { max-width: 480px; height: min(90vh, 760px); transition: max-width .22s ease; }
.sign-modal-box.wide { max-width: 1060px; }

.sign-layout { display: flex; height: 100%; min-height: 0; }
.sign-preview { display: none; flex: 1; min-width: 0; flex-direction: column; border-right: 1px solid var(--border); background: #f4f6fa; }
.sign-layout.preview-open .sign-preview { display: flex; }
.sign-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); background: #fff; flex-shrink: 0; }
.sign-preview iframe { flex: 1; width: 100%; border: none; display: block; }

.sign-form-col { width: 440px; max-width: 100%; margin: 0 auto; overflow-y: auto; padding: 22px; }
.sign-layout.preview-open .sign-form-col { margin: 0; flex-shrink: 0; }

@media (max-width: 820px) {
  .sign-modal-box.wide { max-width: 480px; }   /* stack instead of split on small screens */
  .sign-layout { flex-direction: column; }
  .sign-layout.preview-open .sign-preview { height: 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .sign-form-col, .sign-layout.preview-open .sign-form-col { width: 100%; margin: 0; }
}

/* ============ v69: sign popup — two side-by-side iframes (PDF + form) ============ */
.sign-modal-box { display: flex; }
.sign-doc-pane { display: none; flex: 1; min-width: 0; flex-direction: column; border-right: 1px solid var(--border); background: #f4f6fa; }
.sign-modal-box.wide .sign-doc-pane { display: flex; }
.sign-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); background: #fff; flex-shrink: 0; }
.sign-doc-pane iframe { flex: 1; width: 100%; border: none; display: block; background: #f4f6fa; }
.sign-form-pane { position: relative; width: 100%; }
.sign-modal-box.wide .sign-form-pane { width: 440px; flex-shrink: 0; }
.sign-form-pane iframe { width: 100%; height: 100%; border: none; display: block; }

@media (max-width: 820px) {
  .sign-modal-box.wide { max-width: 480px; }
  .sign-modal-box { flex-direction: column; }
  .sign-modal-box.wide .sign-doc-pane { height: 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .sign-modal-box.wide .sign-form-pane { width: 100%; flex: 1; }
}

/* ============ v70: file requests — status model, required, choices, summary ============ */
/* extended status badges + dots */
.req-badge-submitted { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.req-badge-reviewed { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.req-badge-closed { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.req-dot-completed { background: #16a34a; }

/* required marker */
.req-req { color: var(--danger); font-weight: 700; }

/* multiple-choice options */
.req-choices { display: flex; flex-direction: column; gap: 8px; }

/* admin question builder rows */
.q-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.q-row-main { display: flex; gap: 8px; align-items: center; }
.q-row-main input[type="text"] { flex: 1; }
.q-row .q-type, .q-row .q-required { flex-shrink: 0; }
.q-row .q-required { width: 150px; align-self: flex-start; }
.q-row .q-options { width: 100%; }

/* pre-submit summary checklist */
.req-summary { margin: 18px 0 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.req-summary-title { font-weight: 650; font-size: 13px; margin-bottom: 8px; }
.req-summary-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.req-summary-item.is-ok { color: #15803d; }
.req-check { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; position: relative; }
.req-summary-item.is-ok .req-check { background: #16a34a; border-color: #16a34a; }
.req-summary-item.is-ok .req-check::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* admin review actions block */
.req-review-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.req-review-actions .req-actions { flex-wrap: wrap; }

/* ============ v71: enterprise review — status system, question types, review screen ============ */
/* status pills (documents + questions) — the spec's 7 colours */
.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.7; border: 1px solid transparent; white-space: nowrap; }
.st-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-grey   { background: #f1f5f9; color: #475569; }
.st-blue   { background: #e8f4fd; color: #1a6fc4; }
.st-yellow { background: #fef3c7; color: #b45309; }
.st-green  { background: #dcfce7; color: #15803d; }
.st-orange { background: #ffe4d3; color: #d1410c; }
.st-red    { background: #fde3e4; color: #c81e2b; }
.st-purple { background: #ede9fe; color: #6d28d9; }

/* expanded question-type inputs */
.q-input-group { display: flex; align-items: stretch; }
.q-input-group .q-prefix, .q-input-group .q-suffix { display: inline-flex; align-items: center; padding: 0 11px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 13.5px; }
.q-input-group .q-prefix { border-right: none; border-radius: 8px 0 0 8px; }
.q-input-group .q-suffix { border-left: none; border-radius: 0 8px 8px 0; }
.q-input-group input { border-radius: 0; }
.q-input-group input:first-child { border-radius: 8px 0 0 8px; }
.q-input-group input:last-child { border-radius: 0 8px 8px 0; }
.q-input-group .q-cur { border-radius: 8px 0 0 8px; border-right: none; max-width: 88px; }
.q-choices-grid { display: flex; flex-direction: column; gap: 8px; }
.q-choices-grid.inline { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
/* rating stars */
.q-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.q-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-rating label { cursor: pointer; font-size: 26px; line-height: 1; color: #cbd5e1; transition: color .1s; }
.q-rating label:hover, .q-rating label:hover ~ label,
.q-rating input:checked ~ label { color: #f59e0b; }
.q-rating input:disabled ~ label { cursor: default; }
/* approval toggle */
.q-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.q-toggle label { padding: 8px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted); background: var(--surface); }
.q-toggle label + label { border-left: 1px solid var(--border); }
.q-toggle input { position: absolute; opacity: 0; }
.q-toggle input:checked + span { }
.q-toggle label:has(input:checked) { background: var(--accent); color: #fff; }

/* per-question status chip on the answer/review form */
.req-q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.req-q-head .st-pill { align-self: center; }

/* ============ document review screen (viewer + questions side by side) ============ */
.review-shell { margin: -28px -32px -60px; height: calc(100vh - 108px); display: flex; flex-direction: column; background: var(--bg); }
.review-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.review-topbar .rt-title { font-weight: 650; font-size: 15px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-topbar .rt-meta { color: var(--text-muted); font-size: 12.5px; }
.review-topbar .rt-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.review-body { flex: 1; display: flex; min-height: 0; }
.review-doc { flex: 1.55; min-width: 0; background: #525659; display: flex; flex-direction: column; }
.review-doc iframe { flex: 1; width: 100%; border: 0; background: #525659; }
.review-doc .rd-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 14px; }
.review-side { flex: 1; max-width: 460px; min-width: 340px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.review-side-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.review-side-head h2 { margin: 0 0 3px; font-size: 15px; }
.review-progress { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-top: 9px; }
.review-progress > span { display: block; height: 100%; background: var(--st-green); border-radius: 999px; transition: width .2s; }
.review-side-scroll { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.review-side-foot { border-top: 1px solid var(--border); padding: 12px 18px; display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); }
.review-q { padding: 15px 0; border-bottom: 1px solid var(--bg); scroll-margin-top: 10px; }
.review-q:last-child { border-bottom: none; }
.review-q.jump-flash { animation: qflash 1.1s ease; }
@keyframes qflash { 0%,100% { background: transparent; } 25% { background: var(--accent-soft); } }
.review-q .rq-page { font-size: 11.5px; color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; margin-left: 8px; }
.review-q .rq-page:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .review-body { flex-direction: column; }
  .review-side { max-width: none; border-left: none; border-top: 1px solid var(--border); }
  .review-doc { min-height: 46vh; }
}

/* v71 addendum: question builder foot row */
.q-row-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-row-foot .q-required { width: auto; }
.q-page { max-width: 190px; }

/* v75: clickable document title in the data room (opens preview, or sign if required) */
.file-open { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; min-width: 0; max-width: 100%; }
.file-open > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-open:not(.is-locked):hover > span { color: var(--accent); text-decoration: underline; }
.file-open.is-locked { cursor: default; }
.file-open .ftype-icon { flex-shrink: 0; }

/* v76: global search results */
.search-group { font-size: 14px; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
.search-list { padding: 4px 6px; }
.search-list.card { padding: 6px 8px; }
.search-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--bg); color: var(--text); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font: inherit; }
.search-row:last-child { border-bottom: none; }
.search-row:hover { background: var(--accent-soft); text-decoration: none; border-radius: 8px; }
.search-ico { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.search-main { flex: 1; min-width: 0; }
.search-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.search-act { flex-shrink: 0; }

/* v76: per-user screen watermark overlay on document viewers */
.preview-box { position: relative; }
.review-doc { position: relative; }
.wm-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 52px; pointer-events: none; z-index: 4; background-repeat: repeat; }
.review-doc .wm-overlay { top: 0; }

/* v76: document filter/sort toolbar */
.doc-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 4px 14px; flex-wrap: wrap; }
.doc-toolbar-search { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; }
.doc-toolbar-search .ico { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.doc-toolbar-search input { border: none; background: none; padding: 8px 0; flex: 1; outline: none; font: inherit; }
.doc-toolbar-sel { flex-shrink: 0; width: auto; padding: 8px 10px; }
@media (max-width: 640px) { .doc-toolbar-sel { flex: 1; } }

/* v76: conditional-question builder inputs */
.q-cond-lbl { font-size: 12px; color: var(--text-muted); margin-left: 6px; white-space: nowrap; }
.q-cond-eq { color: var(--text-muted); }
.q-showif-q { max-width: 68px; }
.q-showif-val { max-width: 150px; }

/* v78: document notes / annotations panel in the preview modal */
.preview-box.with-notes { max-width: 1330px; }
.preview-body-row { flex: 1; display: flex; min-height: 0; }
.preview-frame-wrap { flex: 1; position: relative; min-width: 0; }
.preview-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #f4f6fa; }
.preview-frame-wrap .wm-overlay { top: 0; }
.notes-count { font-variant-numeric: tabular-nums; }
.preview-notes { width: 330px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); }
.preview-notes[hidden] { display: none; }
.preview-notes-head { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 13.5px; }
.preview-notes-list { flex: 1; overflow-y: auto; padding: 8px 14px; }
.note-item { padding: 10px 0; border-bottom: 1px solid var(--bg); }
.note-item:last-child { border-bottom: none; }
.note-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 3px; }
.note-meta .note-del { margin-left: auto; border: none; background: none; color: #b4bcc8; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.note-meta .note-del:hover { color: var(--danger); }
.note-body { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.preview-notes-form { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.preview-notes-form textarea { width: 100%; resize: vertical; }
.note-form-row { display: flex; gap: 8px; align-items: center; }
.note-form-row .note-page { width: 74px; flex-shrink: 0; }
.note-form-row .note-notify { flex: 1; min-width: 0; }
@media (max-width: 760px) { .preview-notes { position: absolute; inset: 52px 0 0 0; width: auto; z-index: 5; } }

/* v79: review-decision status badges (approve / reject / clarify) */
.req-badge-submitted { background: #e8f4fd; color: #1a6fc4; border-color: #cfe6fa; }
.req-badge-approved { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.req-badge-rejected { background: #fde3e4; color: #c81e2b; border-color: #f7c7ca; }
.req-badge-clarify  { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }

/* v80: per-document review assignment */
.inline-form { display: inline; }
.doc-assign-meta { margin-top: 2px; }
.file-name .st-pill { vertical-align: middle; }

/* v81: signature field placement */
.sign-place-bar { display: flex; align-items: center; gap: 14px; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; position: sticky; top: 108px; z-index: 20; flex-wrap: wrap; }
.sign-place-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sign-place-page { position: relative; box-shadow: 0 2px 10px rgba(16,24,40,.12); line-height: 0; }
.sign-place-page canvas { display: block; max-width: 100%; }
.sig-layer { position: absolute; inset: 0; cursor: crosshair; }
.sig-field-box { position: absolute; border: 2px dashed var(--accent); background: rgba(26,134,224,.12); border-radius: 4px; cursor: move; display: flex; align-items: center; justify-content: center; min-width: 60px; min-height: 26px; }
.sig-field-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
.sig-field-del { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* v81: signature status links in the document list */
.sig-status-row { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.sig-link { font-size: 12px; }