:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --border: #e2e6ee;
  --text: #16202e;
  --text-muted: #64748b;
  --accent: #0A2540;
  --accent-hover: #143a63;
  --accent-soft: #eaeff5;
  --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;
}

/* Client-facing pages match the dashboard's typography (Calibri body / Helvetica Neue headings)
   and carry the same navy/gold premium accents — minus the dashboard's own hero banner. */
body.role-client, body.sign-embed {
  --gold: #C9A660;
  --gold-dark: #b6923f;
  font-family: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
}
body.role-client h1, body.role-client h2, body.role-client h3,
body.sign-embed h1, body.sign-embed h2, body.sign-embed h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Messaging is a shared deal-team/client feature — give it the same professional
   typography for everyone, not just clients, since both sides read the same thread. */
.convo { font-family: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif; }
.convo h1, .convo h2, .convo h3, .convo-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Page titles get the dashboard's gold underline accent */
body.role-client .page-head h1, body.role-client .rooms-main-head h1 { position: relative; padding-bottom: 12px; color: var(--accent); }
body.role-client .page-head h1::after, body.role-client .rooms-main-head h1::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px;
  background: var(--gold); border-radius: 2px;
}

/* Navigational/summary tiles pick up the same gold-topped, hover-lift card treatment as the dashboard.
   .req-card is excluded — its left border already signals priority, and a second accent would clash. */
body.role-client .folder-card, body.role-client .ws-card {
  border-top: 4px solid var(--gold);
  transition: transform .16s ease, box-shadow .16s ease;
}
body.role-client .folder-card:hover, body.role-client .ws-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px rgba(10, 37, 64, .3);
}
body.role-client .folder-card-ico, body.role-client .ws-ico {
  background: #f6efdd; color: var(--gold-dark);
}

.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"], input[type="date"], input[type="number"], input[type="search"], 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;
  /* The badge sits inside a nav <a>; without this it inherits the link's underline,
     which cuts across the pill. */
  text-decoration: none;
}

.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; }
.avatar-img { padding: 0; overflow: hidden; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.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); }
/* Preview list of staged files — lets someone confirm what they're about to upload (and drop
   any they picked by mistake) before the actual upload happens. */
.dz-filelist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.dz-file-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px;
}
.dz-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-file-size { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.dz-file-remove {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px; border-radius: 4px; flex-shrink: 0;
}
.dz-file-remove:hover { color: var(--danger); background: var(--bg); }

/* 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; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.mail-msg-who-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-msg-email { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.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; }

/* ============ Messages: compose + recent (two-column) ============ */
.msg-page { max-width: 1180px; margin: 0 auto; }
.msg-page-head h1 { margin: 4px 0 2px; }
.msg-page-head .muted { margin: 0; }
.msg-page-head { position: relative; padding-bottom: 16px; }
.msg-page-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.msg-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.msg-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; margin-top: 22px; }
@media (max-width: 900px) { .msg-grid { grid-template-columns: 1fr; } }
.msg-card-title { font-size: 15px; margin: 0 0 16px; }
.compose-card, .recent-card { background: #fff; border-radius: 12px; padding: 22px; }
.compose-card .rt-editor { min-height: 220px; }
.compose-form .rt-editor { min-height: 90px; }
.compose-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent-item { border-bottom: 1px solid var(--border); }
.recent-item:last-child { border-bottom: none; }
.recent-item a { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px; color: var(--text); }
.recent-item a:hover { background: var(--bg); text-decoration: none; }
.recent-item-who { font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.recent-name-strong { font-weight: 700; }
.recent-arrow { color: var(--text-muted); }
.recent-item-emails { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item-subject { font-size: 13px; color: var(--text-muted); }

@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; }

/* Restrict-specific-files list — a clean scrollable row list instead of a wrapping 2-col grid */
.file-lock-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.file-lock-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--bg); cursor: pointer; margin: 0; }
.file-lock-row:last-child { border-bottom: none; }
.file-lock-row:hover { background: var(--bg); }
.file-lock-row input { flex-shrink: 0; }
.file-lock-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-lock-folder { flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* ============ 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: 152px 288px minmax(0, 1fr);
  border: none;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  height: calc(100vh - 260px);
  min-height: 480px;
  box-shadow: 0 1px 1px rgba(10,37,64,.05), 0 20px 40px -26px rgba(10,37,64,.24);
}
.convo-list { border-right: 1px solid #ececef; overflow-y: auto; background: #fbfbfc; }
.convo-item {
  display: flex;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid #ececef;
  border-left: 3px solid transparent;
  color: var(--text);
}
.convo-item:hover { background: #fff; text-decoration: none; }
.convo-item.current { background: #fff; border-left-color: var(--gold); }
.convo-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.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: 16px 24px; border-bottom: 1px solid #ececef; background: #fff; }
.convo-title { font-weight: 700; font-size: 15.5px; }
.convo-msgs { flex: 1; overflow-y: auto; padding: 22px; background: #fbfbfc; display: flex; flex-direction: column; gap: 12px; }
.convo-msgs .mail-msg { margin: 0; }
.convo-reply { border-top: 1px solid #ececef; padding: 14px 18px; 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[hidden] { display: none !important; }
.convo-empty-ico-wrap {
  width: 64px; height: 64px; border-radius: 50%; background: #f6efdd; color: var(--do-goldd, #b6923f);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.convo-empty-ico { width: 26px !important; height: 26px !important; }

/* 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; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .convo { grid-template-columns: 64px 240px minmax(0, 1fr); }
  .convo-nav .convo-folder-label { display: none; }
}

/* ============ 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; }

/* 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"], input[type="date"], input[type="number"], input[type="search"], 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, .main:has(.convo) .msg-page-head { flex-shrink: 0; }
/* .convo now sits inside the .msg-page width-constraining wrapper rather than directly under
   .main — that wrapper has to join the flex column too, or .convo's own flex:1 has nothing to
   grow into and the pane stops short of the bottom of the screen. */
.main:has(.convo) .msg-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  width: 100%;
}
.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: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 17px; min-width: 0; word-break: break-word; overflow-wrap: break-word; }
.modal-head .modal-x { flex-shrink: 0; }
.rename-row { display: flex; align-items: center; gap: 6px; }
.rename-row input { flex: 1; min-width: 0; }
.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; }
}

/* The "Data rooms" list (.convo.rooms-layout) is a 2-panel rail+main layout, but it shares
   the bare .convo class with the Messages shell, which has its own (unrelated, !important)
   grid-template-columns for a 3-column nav+list+thread layout at various breakpoints. That
   left rooms-layout's rail squeezed into whatever narrow column width Messages last defined
   (down to 64px on some breakpoints), wrapping room names character-by-character. Pin our
   own columns here with matching !important + higher specificity so no future .convo edit
   for Messages can leak into this layout again. */
.convo.rooms-layout {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
@media (max-width: 900px) {
  .convo.rooms-layout { grid-template-columns: 232px minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  .convo.rooms-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: auto !important;
  }
  .convo.rooms-layout .rooms-rail { max-height: 260px; }
}

/* ============ 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: #0A2540;         /* deep navy — primary (per brand spec) */
  --accent-hover: #143a63;
  --accent-soft: #eaeff5;
  --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"], input[type="date"], input[type="number"], input[type="search"], 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-avatar-form { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.account-avatar-wrap { position: relative; }
.account-avatar-edit {
  position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.account-avatar-edit .ico { width: 11px; height: 11px; }
.account-avatar-edit:hover { background: #1c3f66; }
.account-avatar-remove {
  border: none; background: none; color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 0;
}
.account-avatar-remove:hover { color: var(--text); text-decoration: underline; }
.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; }

/* One-row conversation header: info on the left, actions (Cc, close) on the right */
.convo-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-pop-summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.cc-pop-summary::-webkit-details-marker { display: none; }
.cc-pop-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
}
.cc-pop-panel { width: 320px; max-width: 90vw; right: 0; left: auto; padding: 14px; }
.cc-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.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: flex; gap: 6px; align-items: center; }
.cc-add-form input[type="text"] { width: 100%; padding: 5px 10px; font-size: 13px; }
.cc-add-form .cc-ac-wrap { 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.
   Chrome sizes the empty/placeholder state differently from the filled state (a WebKit quirk
   around the internal ::-webkit-date-and-time-value box) unless height is pinned explicitly. */
input[type="date"] { height: 38px; box-sizing: border-box; }
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%; height: 38px; box-sizing: border-box; padding: 0 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; flex-shrink: 0;
}
.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; } }

/* Multi-select + drag-to-reorder for the document list */
.bulk-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 10px;
  background: var(--accent-soft); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent);
}
/* `display: flex` above has the same specificity as the browser's own `[hidden] { display: none }`
   rule and loads later, so without this it would win and the bar would never actually hide. */
.bulk-bar[hidden] { display: none; }
.index-table .idx-check-col { width: 56px; }
/* The flex layout lives on this inner wrapper, not the <td> itself — display:flex directly on
   a table cell can throw off how its border-bottom lines up with sibling cells in the same row. */
.idx-check-wrap { display: flex; align-items: center; gap: 8px; }
.index-table .doc-select { cursor: pointer; margin: 0; }
.drag-handle {
  display: inline-block; cursor: grab; color: var(--text-muted); font-size: 15px;
  letter-spacing: -1px; user-select: none; line-height: 1; padding: 4px 2px; margin: -4px -2px;
}
.drag-handle:active { cursor: grabbing; }
.index-table tr.dragging { opacity: .4; }
.drag-handle:hover { color: var(--text); }
/* Header checkbox has no drag handle of its own, but needs the same left offset as the
   row checkboxes below it (which sit after a visible drag-handle) to stay column-aligned. */
.drag-handle-spacer { visibility: hidden; cursor: default; }

/* ============ Status tracker column ============ */
.index-table .status-col { width: 130px; }
.status-menu { display: inline-block; }
.st-pill-btn { border: none; cursor: pointer; font: inherit; }
.st-pill-btn::after { content: '\25BE'; margin-left: 2px; font-size: 9px; opacity: .7; }
.status-menu-list { padding: 6px; min-width: 150px; left: 0; right: auto; }
/* Rows near the bottom of the table would otherwise open the panel off the edge of the page —
   app.js measures available space and adds this class to flip it above the pill instead. */
.status-menu-list.status-menu-up { top: auto; bottom: calc(100% + 6px); }

/* ============ Priority badge + Requested items ============ */
.prio-badge { margin-left: 8px; vertical-align: middle; }
.prio-badge-btn { border: none; cursor: pointer; font: inherit; }
.prio-badge-btn::after { content: '\25BE'; margin-left: 4px; font-size: 9px; opacity: .7; }
.badge-ghost { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }
.req-items { margin-top: 4px; }
.req-items-label { font-weight: 650; color: var(--text); }
.req-items-list { margin: 2px 0 0; padding-left: 18px; }
.req-items-list li { line-height: 1.5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-item-done { color: var(--do-goldd, #b6923f); }
.req-item-upload { display: inline-flex; align-items: center; }
.req-item-upload-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.req-item-upload-btn .ico { width: 13px; height: 13px; }
.req-items-menu { display: inline-block; }
.req-items-edit-btn { border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.link-btn { border: none; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.req-items-panel { width: 340px; max-width: 90vw; left: 0; right: auto; padding: 14px; }
.req-items-panel-heading { font-weight: 650; font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.req-items-panel textarea { width: 100%; resize: vertical; margin-bottom: 12px; font: inherit; box-sizing: border-box; }

/* Due date — independent control, same look as the priority/status pills. */
.due-date-menu { display: inline-block; }
.due-date-trigger {
  border: none; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px;
  font: inherit; font-size: inherit; color: var(--text); cursor: pointer;
}
.due-date-trigger:hover { background: var(--bg); }
.due-date-panel { width: 220px; padding: 12px; left: 0; right: auto; }
.due-date-panel input[type="date"] { margin-bottom: 10px; }
.due-date-panel .btn { width: 100%; }

/* File options modal — grouped into labelled cards by purpose (document management, access,
   signatures, review, danger zone) instead of one long list of forms separated by thin rules,
   which is what made it feel crowded and hard to scan. */
.modal-section { background: var(--bg); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.modal-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.modal-section-row { display: flex; align-items: center; gap: 10px; }
.modal-section-row .btn { flex-shrink: 0; }
.modal-section-row .rename-row, .modal-section-row input[type="file"] { flex: 1; min-width: 0; }
.modal-section-danger { background: #fdf1f1; }

/* ============ 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; }
/* Files listed as leaf items in the sidebar tree, alongside subfolders — same look as a
   folder row, but the trigger is a <button> (opens the preview/sheet modal) or, if locked,
   a plain non-interactive <span>. */
.ftree-file-link { background: none; border: none; margin: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.ftree-file-link.is-locked { cursor: default; }
.ftree-file-link.is-locked .ftree-name { color: var(--text-muted); }
/* Tree connector lines — a vertical guide per nesting level plus a horizontal tick per row,
   drawn in the .ftree-children indent gutter so nested folders read as a tree, not a flat list.
   The vertical guide is built per-item (not one line for the whole container) so it can stop
   at the last item's own tick instead of overshooting past the final row. */
.ftree-children > .ftree > li { position: relative; }
.ftree-children > .ftree > li::before {
  content: ''; position: absolute; top: 15px; left: -8px; width: 8px; height: 1px; background: var(--border);
}
.ftree-children > .ftree > li::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -8px; width: 1px; background: var(--border);
}
.ftree-children > .ftree > li:last-child::after { bottom: auto; height: 15px; }

/* 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 { width: 100%; }
.ftree-row:hover { background: var(--bg); }
.ftree-row.current { background: #dbe4ff; }
.ftree-row.current .ftree-link { color: #1d4ed8; font-weight: 700; }
.ftree-row.current .ftree-ico { color: #1d4ed8; }
.ftree-row.current .ftree-count { background: #fff; color: #1d4ed8; }
/* Highlight bleeds edge-to-edge (flush, no rounded pill/gaps) — cancel the aside's own
   side padding on the tree, then re-add it as inset on each row so text still lines up. */
.ftree-wrap { margin: 0 -12px; }
.ftree-row, .ftree-root {
  border-radius: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.ftree-link { padding-right: 0; }

.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; }
}
/* Tablet band (iPad-ish widths, above the phone breakpoint): the fixed 100vh-108px calc above
   leaves a gray gap under a short document list on these — fall back to natural height instead
   of a hardcoded viewport calc that only really holds up at desktop width. */
@media (min-width: 821px) and (max-width: 1180px) {
  .rooms-shell { height: auto; min-height: calc(100vh - 108px); }
}

/* ============ 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: 920px; 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: 880px; max-width: 100%; margin: 0 auto; overflow-y: auto; padding: 22px; }
.sign-layout.preview-open .sign-form-col { margin: 0; flex-shrink: 0; }

/* Sign popup: PDF preview on the left, signature form on the right */
.sign-embed-grid { display: flex; gap: 20px; align-items: flex-start; }
.sign-embed-doc-col { flex: 1 1 50%; min-width: 0; max-height: calc(88vh - 130px); overflow-y: auto; }
.sign-embed-form-col { flex: 1 1 320px; max-width: 360px; }
/* Standalone sign page (not the popup) — full page, no height cap, wider form column */
.sign-page-grid { max-width: 1100px; margin: 0 auto; }
.sign-page-grid .sign-embed-doc-col { max-height: none; overflow-y: visible; }
.sign-page-grid .sign-embed-form-col { max-width: 420px; }

@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; }
  .sign-embed-grid { flex-direction: column; }
  .sign-embed-doc-col { max-height: 40vh; }
  .sign-embed-form-col { max-width: 100%; }
}

/* ============ 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:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 72, 107, 0.14); }
.doc-toolbar-search .ico { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
/* The generic input:focus rule puts its own ring directly on this bare, borderless input —
   since the input's own box doesn't line up with the pill it sits inside, that ring pokes out
   past the pill's rounded corner instead of tracing it. The pill itself gets the focus ring
   above (:focus-within) so the whole search box highlights as one piece, not a fragment. */
.doc-toolbar-search input { border: none; background: none; padding: 8px 0; flex: 1; outline: none; box-shadow: none; font: inherit; }
.doc-toolbar-sel { flex-shrink: 0; width: auto; padding: 8px 10px; }
@media (max-width: 640px) { .doc-toolbar-sel { flex: 1; } }
/* The native <select> stays in the DOM (hidden) purely so existing filter/sort JS can keep
   reading .value / listening for 'change' unchanged — this custom trigger + menu is the only
   thing actually shown or reachable by mouse/keyboard, so it's marked inert to screen readers. */
.doc-toolbar-sel-native { display: none; }
.doc-filter-menu { flex-shrink: 0; }
@media (max-width: 640px) { .doc-filter-menu { flex: 1; } }
.doc-filter-trigger {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13.5px;
  color: var(--text); cursor: pointer; white-space: nowrap; list-style: none;
}
.doc-filter-trigger::-webkit-details-marker { display: none; }
.doc-filter-trigger::marker { content: ''; }
.doc-filter-trigger:hover { border-color: var(--accent); }
.doc-filter-menu[open] .doc-filter-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 72, 107, 0.14); }
.doc-filter-trigger .ico { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; transition: transform .12s ease; }
.doc-filter-menu[open] .doc-filter-trigger .ico { transform: rotate(180deg); }
.doc-filter-list { padding: 6px; min-width: 170px; max-height: 280px; overflow-y: auto; }
.doc-filter-opt {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: none;
  border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.doc-filter-opt:hover { background: var(--bg); }
.doc-filter-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }

/* 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-box-date { border-color: #d97706; background: rgba(217,119,6,.10); }
.sig-field-box-name { border-color: #16a34a; background: rgba(22,163,74,.10); }
.sig-field-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
.sig-field-box-date .sig-field-label { color: #d97706; }
.sig-field-box-name .sig-field-label { color: #16a34a; }
.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; }
.sig-field-resize { position: absolute; bottom: -6px; right: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: nwse-resize; }
.sig-field-box-date .sig-field-resize { background: #d97706; }
.sig-field-box-name .sig-field-resize { background: #16a34a; }
.sig-field-type { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; background: #fff; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.sig-field-box:hover .sig-field-type { opacity: 1; pointer-events: auto; }
.sign-place-types { display: flex; gap: 6px; }
.sign-place-type-btn { border: 1px solid var(--border); background: #fff; color: var(--text-muted); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.sign-place-type-btn:hover { border-color: var(--accent); color: var(--text); }
.sign-place-type-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* v82: live signing preview — read-only field box that mirrors the signer's input */
.sign-live-pages { margin: 0 0 4px; }
.sig-layer-live { cursor: default; }
/* The colored box/border is an admin-placement aid only — the signer just sees the content */
.sig-field-box-live,
.sig-field-box-live.sig-field-box-date,
.sig-field-box-live.sig-field-box-name { cursor: default; border: none; background: transparent; overflow: visible; padding: 2px; min-height: 20px; }
.sig-field-box-live .sig-field-label { color: var(--text-muted); }
.sig-field-fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: visible; }
.sig-field-fill-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sig-field-fill-name { font-family: 'Brush Script MT', cursive; font-size: 15px; line-height: 1.2; color: #14224a; white-space: nowrap; max-width: 100%; }

/* 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; }

/* ============ v82: premium data-room overview (client dashboard) ============ */
.deal-overview {
  --do-navy: #0A2540; --do-navy2: #0f335a; --do-gold: #C9A660; --do-goldd: #b6923f;
  --do-mist: #F8F9FA; --do-line: #e6e9ee; --do-slate: #5a6b7b; --do-ink: #16273a;
  margin: -28px -32px -60px;
  font-family: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--do-ink);
}
.deal-overview h1, .deal-overview h2, .deal-overview h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* confidentiality banner */
.do-confidential {
  background: var(--do-navy); color: var(--do-gold);
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 600;
  text-align: center; line-height: 36px; height: 36px; overflow: hidden;
}

/* hero */
.do-hero { position: relative; overflow: hidden; background: linear-gradient(158deg, #0A2540 0%, #0f335a 62%, #123a63 100%); }
.do-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(201,166,96,.06) 0 1px, transparent 1px 30px); }
.do-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.10), transparent 60%); }
.do-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 58px 32px 70px; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.do-eyebrow { color: var(--do-gold); text-transform: uppercase; letter-spacing: .26em; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.do-eyebrow.dark { color: var(--do-goldd); }
.do-title { color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin: 0; text-wrap: balance; }
.do-sub { color: rgba(255,255,255,.82); font-size: clamp(15px, 1.6vw, 20px); margin: 14px 0 0; }
.do-rule { display: flex; justify-content: center; margin: 22px 0 0; }
.do-rule span { width: 96px; height: 2px; background: linear-gradient(90deg, transparent, var(--do-gold), transparent); }
.do-lastseen { color: rgba(255,255,255,.6); font-size: 12.5px; margin: 18px 0 0; letter-spacing: .02em; }

/* content container */
.do-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px 8px; }

/* metrics bar — floats up over the hero band */
.do-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: -46px; position: relative; z-index: 2; }
/* KPI-card layout: icon top-left, number top-right, label along the bottom. The number
   lands where the eye finishes its sweep across the top row, and the label anchors the
   card without the stacked-centre version's wasted vertical space. */
.do-metric {
  background: #fff; border: none; border-radius: 16px; padding: 18px 20px 16px;
  box-shadow: 0 1px 1px rgba(10,37,64,.05), 0 20px 32px -22px rgba(10,37,64,.22);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 12px 12px;
}
/* A permanent gold badge (not conditional on "hot") is the brand accent on every card — the
   inset top bar this replaced created a visible seam against the card's own rounded corner. */
.do-metric-ico {
  grid-column: 1; grid-row: 1;
  width: 42px; height: 42px; border-radius: 12px; background: #f6efdd; color: var(--do-goldd);
  display: flex; align-items: center; justify-content: center;
}
.do-metric-ico .ico { width: 20px; height: 20px; }
.do-metric-n {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 32px; font-weight: 800;
  color: var(--do-navy); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.do-metric.is-hot .do-metric-n { color: var(--do-goldd); }
.do-metric-label {
  grid-column: 1 / -1; grid-row: 2;
  color: var(--do-slate); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 650; line-height: 1.3;
}
.do-metric-unit { font-size: 14px; font-weight: 700; }
.do-project { color: var(--do-gold); font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 10px 0 0; text-wrap: balance; }
.do-access { color: rgba(255,255,255,.68); font-size: clamp(13px, 1.3vw, 15px); margin: 4px 0 0; }

/* sections */
.do-section { margin-top: 46px; }
.do-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.do-h2 { font-size: 21px; font-weight: 800; color: var(--do-navy); letter-spacing: -.01em; margin: 0 0 16px; position: relative; padding-bottom: 10px; }
.do-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--do-gold); border-radius: 2px; }
.do-sec-head .do-h2 { margin-bottom: 0; }
.do-count { background: var(--do-navy); color: #fff; font-size: 12.5px; font-weight: 700; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.do-empty { background: var(--do-mist); border: 1px solid var(--do-line); border-radius: 10px; padding: 20px 22px; color: var(--do-slate); }

/* info / workspace cards */
.do-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.do-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--do-line); border-top: 4px solid var(--do-gold); border-radius: 12px; padding: 22px 20px; color: var(--do-ink); box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: transform .16s ease, box-shadow .16s ease; }
.do-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(10,37,64,.3); text-decoration: none; }
.do-card-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--do-mist); color: var(--do-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.do-card-ico .ico { width: 22px; height: 22px; }
.do-card-title { font-size: 16px; font-weight: 700; color: var(--do-navy); margin: 0 0 6px; }
.do-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--do-slate); margin: 0 0 14px; flex: 1; }
.do-card-cta { font-size: 13px; font-weight: 700; color: var(--do-goldd); }
.do-dot { background: var(--do-gold); color: #12233a; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }

/* lead counsel welcome */
.do-welcome { margin-top: 46px; background: var(--do-mist); border: 1px solid var(--do-line); border-left: 8px solid var(--do-gold); border-radius: 10px; padding: 30px 34px; }
.do-welcome-body { max-width: 780px; }
.do-welcome p { font-size: 15px; line-height: 1.65; color: var(--do-ink); margin: 12px 0 0; }
.do-sign { margin-top: 22px; }
.do-sign-line { display: block; width: 220px; height: 1px; background: var(--do-navy); opacity: .35; margin-bottom: 8px; }
.do-sign-name { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; color: var(--do-navy); font-size: 14px; }

/* data room contents — folder cards */
.do-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.do-folder { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--do-line); border-radius: 12px; padding: 20px; color: var(--do-ink); box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.do-folder:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(10,37,64,.3); border-color: #d9cfb4; text-decoration: none; }
.do-folder-ico { width: 46px; height: 46px; border-radius: 10px; background: #f6efdd; color: var(--do-goldd); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.do-folder-ico .ico { width: 24px; height: 24px; }
.do-folder-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.do-folder-name { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; color: var(--do-navy); font-size: 16px; }
.do-folder-meta { color: var(--do-slate); font-size: 12.5px; }
.do-folder-cta { color: var(--do-goldd); font-weight: 700; font-size: 13px; flex-shrink: 0; }

/* quick access + activity split */
.do-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: start; }
.do-links { display: flex; flex-direction: column; gap: 2px; }
.do-links a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 9px; color: var(--do-ink); font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.do-links a:hover { background: var(--do-mist); border-color: var(--do-line); text-decoration: none; }
.do-links .ico { width: 17px; height: 17px; color: var(--do-goldd); }
.do-activity .activity-feed { margin: 0; }

/* footer */
.do-footer { margin-top: 54px; border-top: 1px solid var(--do-line); padding: 22px 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--do-slate); font-size: 12px; }
.do-footer-mid { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }

@media (max-width: 900px) {
  .do-metrics { grid-template-columns: repeat(2, 1fr); }
  .do-cards { grid-template-columns: repeat(2, 1fr); }
  .do-folders { grid-template-columns: 1fr; }
  .do-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .deal-overview { margin: -20px -18px -60px; }
  .do-metrics { grid-template-columns: 1fr 1fr; }
  .do-cards { grid-template-columns: 1fr; }
  .do-hero-inner { padding: 44px 20px 60px; }
}

/* ============ Spreadsheet editor ============ */
.sheet-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sheet-editor { display: flex; flex-direction: column; gap: 10px; }
.sheet-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sheet-tab { border: 1px solid var(--border); background: var(--surface); border-radius: 8px 8px 0 0; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.sheet-tab:hover { color: var(--text); background: var(--bg); }
.sheet-tab.current { color: var(--accent); background: #fff; border-bottom-color: #fff; }
.sheet-grid-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; max-height: 70vh; background: #fff; }
/* border-collapse breaks position:sticky on th in most browsers — use separate + zero spacing instead,
   which looks identical but keeps the header/row-number cells pinned while scrolling. */
/* A click-drag range-select is custom JS, not a native browser text selection — without this,
   dragging across header labels or cell text also fires the browser's own selection highlight
   (a separate, similarly-pale-blue overlay) on top of the intended .sel-cell/.sel-header
   highlight, which reads as extra/wrong cells being "selected" when only text got selected. */
.sheet-table { border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; user-select: none; }
.sheet-table td input, .sheet-table td textarea { user-select: text; }
/* A multi-cell drag that reaches a second cell suppresses text selection even inside fields —
   otherwise the browser's own text-selection tint layers on top of the drag highlight there,
   reading as a second, differently colored highlight. A same-cell drag (selecting text within
   one field) never reaches this state, so normal in-field selection still works as expected. */
.sheet-grid-wrap.range-dragging .sheet-table td input, .sheet-grid-wrap.range-dragging .sheet-table td textarea { user-select: none; }
.sheet-table th, .sheet-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; overflow: hidden; }
.sheet-table th:first-child, .sheet-table td:first-child { border-left: 1px solid var(--border); }
.sheet-table thead th { border-top: 1px solid var(--border); }
.sheet-table thead th, .sheet-table tbody th {
  background: var(--bg); color: var(--text-muted); font-weight: 600; font-size: 10.5px;
  padding: 3px 6px; position: sticky; text-align: center; white-space: nowrap;
}
.sheet-table thead th { top: 0; z-index: 2; }
.sheet-table tbody th { left: 0; z-index: 1; }
.sheet-table thead th:first-child, .sheet-table tbody th { position: sticky; left: 0; z-index: 3; }
.sheet-table td input {
  width: 100%; height: 100%; border: none; background: transparent; padding: 3px 6px;
  font: inherit; color: var(--text); border-radius: 0;
}
/* Cells the source file marked "wrap text" use a textarea instead (inputs never wrap) —
   sized to fill the cell exactly like the input does, just with wrapping turned on. */
.sheet-table td textarea {
  width: 100%; height: 100%; border: none; background: transparent; padding: 3px 6px;
  font: inherit; color: var(--text); border-radius: 0; resize: none; overflow: hidden;
  white-space: normal; word-wrap: break-word; line-height: 1.3;
}
/* A cell restricted to a fixed list (Excel Data Validation -> List) gets a real <select> —
   stripped of the browser's own default appearance (box, shading, native arrow) so it reads
   as part of the table like every other cell, with just a small chevron marking it as a
   dropdown. Transparent background is what lets the cell's own fill color (set on the parent
   td) show through, the same way input/textarea already do. */
.sheet-table td select {
  width: 100%; height: 100%; border: none; background-color: transparent; padding: 3px 20px 3px 6px;
  font: inherit; color: var(--text); border-radius: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 13px;
}
/* Drag handle on a column header's right edge to resize it. */
.sheet-table th.col-header-btn { position: relative; }
.col-resize-handle { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.col-resize-handle:hover, .col-resize-handle:active { background: var(--accent); opacity: .45; }
.sheet-table td input:focus, .sheet-table td textarea:focus, .sheet-table td select:focus { outline: 2px solid var(--accent); outline-offset: -2px; background-color: #fff; }
/* Inside a multi-cell selection, the drag-start cell keeps native DOM focus — suppress its
   own focus ring there so every cell in the range reads as one uniform selection, not a
   separately-highlighted "first click" sitting on top of the range tint. */
.sheet-table td.sel-cell input:focus, .sheet-table td.sel-cell textarea:focus, .sheet-table td.sel-cell select:focus { outline: none; background-color: transparent; }
.sheet-grid-actions { display: flex; gap: 8px; }

/* Cells within the active drag/shift-click selection get a translucent tint layered on top of
   any fill color, plus an outline — box-shadow so it doesn't fight the inline background-color
   a cell's own fill sets. This app's brand accent (--accent) is itself a dark navy, the same
   color family as common cell fills (including this app's own spreadsheet header style) — using
   it for the selection outline meant a selected navy cell had no visible outline at all. A
   fixed, brand-independent blue keeps the selection legible against any fill color, light or
   dark. The tint needs enough opacity to still read as "selected" over a saturated or dark fill
   too — a faint 10% wash disappears entirely against navy, black or yellow cell backgrounds.
   The actual box-shadow value (tint + which edges get the blue border) is set inline per cell
   in renderSelClasses(), since only the outer perimeter of a multi-cell selection should get
   the border — putting it on every side of every cell doubles up at internal seams between two
   adjacent selected cells, which reads as a gap rather than one contiguous block. */
.sheet-table td.sel-cell { position: relative; z-index: 1; }
/* Row/column header cells double as click targets — click one to select the whole row/column. */
.sheet-table th.col-header-btn, .sheet-table th.row-header-btn { cursor: pointer; user-select: none; }
.sheet-table th.col-header-btn:hover, .sheet-table th.row-header-btn:hover { background: #e2e8f0; }
.sheet-table th.sel-header { background: #cfe0fb; color: var(--accent); }

/* Formatting toolbar — grouped icon buttons, closer to a Sheets-style toolbar */
.sheet-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.sheet-tb-group { display: flex; align-items: center; gap: 2px; }
.sheet-toolbar select, .sheet-toolbar input[type="number"] { width: auto; padding: 5px 8px; font-size: 12.5px; border-radius: 6px; height: 30px; }
.sheet-tb-size { width: 52px; text-align: center; padding: 5px 4px; }
.sheet-tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 30px; padding: 0; font-size: 13.5px;
}
.sheet-tb-btn .ico { width: 16px; height: 16px; }
.sheet-tb-btn.active { background: #dbeafe; color: var(--accent); }
.sheet-color-label {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 30px; height: 30px; font-size: 12px; font-weight: 700;
  color: var(--text); cursor: pointer; padding: 2px; border-radius: 6px;
}
.sheet-color-glyph { width: 15px; height: 15px; line-height: 15px; display: inline-flex; align-items: center; justify-content: center; }
.sheet-color-label:hover { background: var(--bg); }
.sheet-color-label input[type="color"] {
  /* No appearance:none here — on some browsers it silently breaks the native color
     picker from opening at all (a click just does nothing), which is worse than an
     imperfectly-styled swatch. Width/height alone is enough to size it reliably. */
  width: 22px; height: 8px; padding: 0; border: none; border-radius: 2px; cursor: pointer;
}
.sheet-color-label input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.sheet-color-label input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
.sheet-toolbar-hint { margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) { .sheet-toolbar-hint { display: none; } }

/* Custom font dropdown — a native <select> can't have its popup height limited, so a long
   font list would take over the whole page. This is a details/summary menu instead, capped
   with an internal scrollbar. */
.sheet-tb-font-btn {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 118px;
  padding: 0 8px; justify-content: space-between; font-size: 12.5px; font-weight: 500;
}
.sheet-tb-font-btn .ico { width: 11px; height: 11px; flex-shrink: 0; color: var(--text-muted); }
#sheet-font-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-font-panel { max-height: 260px; overflow-y: auto; padding: 6px; min-width: 190px; }
.sheet-font-group-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .05em; padding: 8px 8px 3px;
}
.sheet-font-opt {
  display: block; width: 100%; text-align: left; padding: 6px 8px; border: none;
  background: none; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text);
}
.sheet-font-opt:hover { background: var(--bg); }

/* Custom hover tooltips — appear right under the button with a short delay, styled and
   positioned consistently (native title tooltips are slow and browser-styled). */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  /* Left-aligned to the button (not centered) — a centered tooltip on one of the first
     buttons in the toolbar overflows past the left edge of the popup and gets clipped or
     pushed off-screen. Starting from the button's own left edge and growing rightward keeps
     it inside the toolbar/popup no matter how close to the edge the button is. */
  position: absolute; top: 100%; left: 0; transform: translateY(2px);
  background: #1a2333; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .1s ease .25s;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
[data-tip]:hover::after { opacity: 1; }

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

/* Standalone embed page (loaded inside the modal iframe) — a flex column filling the
   iframe's full height, so the grid gets all the space that's left after the fixed-height
   header/toolbar rather than being capped at a fraction of the viewport and forcing the
   whole page (header included) to scroll just to see a few more rows. */
body.sheet-embed-body { height: 100%; margin: 0; padding: 0; }
.sheet-embed-wrap { display: flex; flex-direction: column; height: 100vh; padding: 14px 20px; box-sizing: border-box; }
/* The close (x) button lives outside this iframe, absolutely positioned over its top-right
   corner by the parent page — without this, Download/Save sit right underneath it. */
.sheet-embed-head-row { margin-bottom: 10px; flex-shrink: 0; padding-right: 40px; }
.sheet-embed-wrap .sheet-toolbar { flex-shrink: 0; margin-bottom: 8px; padding: 4px 8px; }
.sheet-embed-wrap .sheet-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sheet-embed-wrap .sheet-tabs { flex-shrink: 0; }
.sheet-embed-wrap .sheet-grid-wrap { flex: 1; min-height: 0; max-height: none; }
.sheet-embed-wrap .sheet-grid-actions { flex-shrink: 0; padding-top: 6px; }

/* ============ Mailbox redesign: inbox list + full-width email thread (not chat bubbles) ============ */

/* Inbox row — accent bar for unread/selected instead of a flat tint, navy/gold identity */
.convo-item { position: relative; padding-left: 17px; align-items: center; }
.convo-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.convo-item.unread::before { background: #C9A660; }
.convo-item.current::before { background: #0A2540; }
.convo-item.current { background: #eef2ff; }
.convo-item .avatar { background: #e7ebf1; color: #0A2540; font-weight: 700; }
.convo-item-subject { color: #16273a; }
.convo-item.unread .convo-item-subject { color: #0A2540; font-weight: 750; }
.convo-item-meta .badge { text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }

/* Thread pane — full-width stacked message cards, like an inbox, not alternating chat bubbles */
.convo-msgs {
  background: #f6f7f9;
  padding: 20px 24px;
  gap: 14px;
}
.convo-msgs .mail-msg {
  background: #fff;
  border: 1px solid #e6e9ee;
  border-left: 4px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  max-width: none;
  margin: 0;
  padding: 16px 18px;
}
.convo-msgs .mail-msg.mine { background: #fff; border-left-color: #0A2540; }
.convo-msgs .mail-msg-head { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f1f3; }
.convo-msgs .mail-msg-name { font-weight: 700; color: #16273a; }
.convo-msgs .mail-msg .avatar { background: #eef1f5; color: #0A2540; font-weight: 700; }
.convo-msgs .mail-msg.mine .avatar { background: #0A2540; color: #fff; }
.convo-head { background: #fff; }
.convo-title { color: #16273a; }

/* ============ Messaging polish v2 — more refined typography, badges, spacing ============ */

/* Inbox list */
.convo-list { background: #fff; }
.convo-item { padding: 16px 18px 16px 21px; gap: 13px; }
.convo-item .avatar { width: 38px; height: 38px; font-size: 13.5px; box-shadow: 0 0 0 1px #dbe2ec inset; }
.convo-item-subject { font-size: 14.5px; }
.convo-item-preview { font-size: 13px; color: #64748b; }
.convo-item.unread .convo-item-preview { color: #384454; }
.convo-item-meta { gap: 6px; margin-top: 1px; }
.convo-item-meta .badge { border-radius: 4px; font-weight: 700; padding: 2px 7px; }

/* Thread header */
.convo-head { padding: 18px 24px; }
.convo-title { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.convo-title .badge { border-radius: 5px; font-weight: 700; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; }
.convo-title .badge-red { background: #fdeaea; color: #b91c2c; border-color: #f6cdd1; }
.convo-title .badge-blue { background: #eaf1fd; color: #0A2540; border-color: #d3e2f7; }
.cc-bar-summary { padding: 8px 24px; }
.cc-bar-body { padding: 2px 24px 12px; }

/* Message cards */
.convo-msgs { padding: 24px 28px; gap: 16px; }
.convo-msgs .mail-msg { border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.convo-msgs .mail-msg-head { margin-bottom: 12px; padding-bottom: 12px; }
.convo-msgs .avatar { width: 34px; height: 34px; font-size: 13px; }
.convo-msgs .mail-msg-name { font-size: 14px; }
.convo-msgs .mail-msg-body { font-size: 14.5px; line-height: 1.65; color: #2a3a4d; }
.convo-msgs .badge-dark { background: #eaf1fd; color: #0A2540; border: 1px solid #d3e2f7; font-weight: 700; }
.convo-msgs .mail-msg-who .badge:not(.badge-dark) { background: #f6efdd; color: #8a6a26; border: 1px solid #ecdfba; font-weight: 700; }

/* Composer */
.convo-reply { padding: 16px 20px; gap: 10px; background: #fbfbfc; }
.rt { border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.rt-toolbar { background: #fafafa; padding: 8px 10px; gap: 4px; }
.rt-btn { border-radius: 6px; }
.convo-reply-row { margin-top: 2px; }

/* An older, higher-specificity rule (.mail-msg.mine) still right-aligns "your" messages as a
   chat bubble — beats the plain .mail-msg override above on specificity alone. Kill it here. */
.convo-msgs .mail-msg.mine { margin: 0; max-width: none; }

/* ============ Messages — premium redesign ============
   Softer depth, floating list rows instead of edge-to-edge dividers, a refined status
   indicator (dot + micro-label instead of a solid pill), gradient avatars, and message
   bubbles that lean on the brand navy/gold instead of a generic indigo "chat app" look. */
.convo {
  border-radius: 18px;
  border: 1px solid rgba(10, 37, 64, .07);
  box-shadow: 0 1px 2px rgba(10, 37, 64, .04), 0 16px 40px -24px rgba(10, 37, 64, .28);
}
.convo-list { background: #fbfcfe; padding: 8px; }
/* The old design put a thick solid border-left on this element to mark it 'active' — with
   border-radius on all four corners that border visibly bends/pinches into the curve instead
   of reading as a clean accent bar. Replaced with a separate absolutely-positioned bar that
   doesn't interact with the card's corner radius at all. */
.convo-item {
  position: relative;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 13px 14px 13px 18px;
  margin-bottom: 3px;
  transition: background .12s ease, border-color .12s ease;
}
.convo-item:hover { background: #fff; border-color: rgba(10, 37, 64, .08); }
.convo-item.current {
  background: #fff; border-color: rgba(10, 37, 64, .08);
  box-shadow: 0 1px 2px rgba(10,37,64,.05), 0 8px 20px -12px rgba(10,37,64,.22);
}
.convo-item.current::before {
  content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--gold);
}
.convo-item.unread:not(.current) { background: #fefcf6; }
.convo-item .avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #1c3f66 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(10, 37, 64, .2);
}
.convo-item-subject { font-size: 13.5px; }
.convo-item-preview { color: var(--text-muted); }

/* Status: a small colored dot + uppercase micro-label reads calmer than a solid badge pill,
   and keeps the eye on the subject line instead of a row of colored chips. */
.convo-status, .status-dot { display: inline-flex; }
.convo-status {
  align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-dot-awaiting { color: #c23b3b; }
.st-dot-replied { color: #2f7d5f; }
.st-dot-closed { color: #94a3b8; }

.convo-empty-ico-wrap { background: linear-gradient(160deg, #f6efdd, #efe2c2); box-shadow: inset 0 0 0 1px rgba(182,146,63,.2); }

.convo-head { padding: 20px 26px; }
.convo-title { font-size: 17px; letter-spacing: -.01em; }
.convo-back:hover { background: var(--accent-soft); }

.convo-msgs { background: #fbfcfe; padding: 24px; gap: 9px; }
.convo-msgs .mail-msg {
  border-radius: 14px;
  border-color: rgba(10, 37, 64, .08);
  box-shadow: 0 1px 2px rgba(10, 37, 64, .03);
  padding: 14px 18px;
}
.convo-msgs .mail-msg-head { margin-bottom: 8px; padding-bottom: 8px; }
/* Same navy family as the send button — a light tint rather than the neutral gray the
   message bubble background used before, so "your" messages read as part of one palette. */
.convo-msgs .mail-msg.mine { background: #eaf1fd; border-color: rgba(10, 37, 64, .1); }
.mail-msg-status { color: var(--text-muted); font-size: 11.5px; margin-top: 6px; text-align: right; }
.mail-msg-status.is-read { color: var(--accent); font-weight: 600; }

/* A long subject can wrap to several lines; letting the head wrap onto its own row instead
   of forcing everything into one flex row is what stops the Cc/Archive/Close buttons from
   overlapping the wrapped title text on narrower screens. */
.convo-head { flex-wrap: wrap; row-gap: 8px; }
.convo-head-main { flex-basis: 260px; }
.convo-head-actions { margin-left: auto; }
.mail-msg .avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #1c3f66 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(10, 37, 64, .2);
}
.mail-msg-name { font-size: 13.5px; }
.mail-msg-body { line-height: 1.6; }
.mail-msg-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(10,37,64,.3); }

.attach {
  border-radius: 10px;
  border-color: rgba(10, 37, 64, .1);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.attach:hover { box-shadow: 0 1px 2px rgba(10,37,64,.06); }
.attach-img img { border-radius: 10px; }

.convo-reply { border-top-color: rgba(10, 37, 64, .07); }

@media (max-width: 900px) {
  .convo-list { padding: 6px; }
  .convo-head { padding: 14px 16px; }
  .convo-msgs { padding: 16px; }
}

/* ============ Messages — structural redesign ============
   Search + status filters above the list, date-grouped message dividers, and a compose
   experience that lives inside the same two-pane shell as the inbox instead of a separate
   page layout — so starting a new message doesn't mean losing sight of every other thread. */
.convo-list { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.convo-list-tools { flex-shrink: 0; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(10,37,64,.06); }
.convo-search-wrap { background: var(--bg); border-color: transparent; border-radius: 10px !important; }
.convo-search-wrap:focus-within { background: #fff; border-color: var(--accent); }
/* Folder-style vertical nav (Inbox / Sent / Drafts / Archived) — replaces the earlier
   horizontal filter-chip row per feedback asking for a real sidebar like a mail client. */
.convo-folders { display: flex; flex-direction: column; gap: 2px; }
.convo-folder {
  display: flex; align-items: center; gap: 10px; border: none; background: none;
  color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 11px 12px; border-radius: 10px;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .12s ease, color .12s ease;
}
.convo-folder .ico { width: 15px; height: 15px; flex-shrink: 0; }
.convo-folder:hover { background: rgba(10,37,64,.05); color: var(--text); }
.convo-folder.active { background: #cfe1fb; color: var(--accent); font-weight: 750; }
.convo-folder-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.convo-folder.active .convo-folder-count { background: #dc2626; }
.convo-folder-count[hidden] { display: none; }
.convo-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.convo-search-empty { text-align: center; padding: 24px 12px; }

/* Date dividers, inserted client-side (see app.js) once each message's UTC timestamp is
   resolved to the viewer's own time zone. */
.convo-date-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--text-muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.convo-date-sep::before, .convo-date-sep::after { content: ''; flex: 1; height: 1px; background: rgba(10,37,64,.08); }

/* Reply composer — a chat-style pill input instead of an email-toolbar block: attach
   and send sit as circular buttons flanking the input, and the rich-text toolbar (font/size/
   bold/lists) is dropped for a quick reply — it's still there in full on the Compose page,
   where writing a first message is more deliberate than firing off a reply. */
.chat-composer { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.convo-reply .rt { flex: 1; min-width: 0; border-radius: 22px; order: 2; }
.convo-reply .rt-toolbar { display: none; }
.convo-reply .rt-editor { padding: 11px 18px; min-height: 20px; max-height: 140px; border-radius: 22px; }
/* Same fix as Compose: the picker's own box is invisible to layout so its chip list can be
   pinned to a full-width row of its own (order 1, always first) instead of fighting the
   reply textarea for horizontal space as attachments pile up (was squeezing the textarea
   down to a sliver). */
.chat-attach-picker { display: contents; }
.chat-attach-picker .chat-attach-btn { order: 3; }
.chat-attach-picker .chat-ap-chips { order: 1; flex-basis: 100%; width: 100%; margin-bottom: 4px; }
.chat-send-btn { order: 4; }
.chat-attach-btn, .chat-send-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.chat-attach-btn { background: var(--bg); color: var(--text-muted); }
.chat-attach-btn:hover { background: var(--accent-soft); color: var(--accent); }
.chat-send-btn {
  background: linear-gradient(135deg, var(--accent), #1c3f66); color: #fff;
  box-shadow: 0 2px 6px rgba(10,37,64,.3); transition: transform .12s ease;
}
.chat-send-btn:hover { transform: scale(1.06); }
.chat-send-btn:active { transform: scale(.94); }
.chat-attach-btn .ico, .chat-send-btn .ico { width: 18px; height: 18px; }

/* Compose, sharing the inbox shell */
.compose-body { flex: 1; overflow-y: auto; padding: 18px 32px; }
.compose-form { max-width: 760px; gap: 12px; }
.compose-form .qa-fields { margin: 0; gap: 20px; }
.compose-form label { gap: 7px; }

/* Per this round's feedback: compose felt cramped, and the request was to put the compose
   form on the left with the conversation list on the right — a straight CSS order swap on
   the shared shell, keeping the list first in the DOM (so search/filter tab order is
   unaffected) but flipped visually. */
.convo.compose-reversed { grid-template-columns: minmax(0, 1fr) 360px; }
.convo.compose-reversed .convo-list { order: 2; border-right: none; border-left: 1px solid rgba(10,37,64,.06); }
.convo.compose-reversed .convo-main { order: 1; }
@media (max-width: 1000px) {
  .convo.compose-reversed { grid-template-columns: 1fr; }
}

/* Definitive fix for the recurring 'two separate cards' complaint: an old rule from way
   before the nav rail existed ('v17: split list and conversation into two panels') put a
   16px grid gap on .convo and gave .convo-list its own full border + shadow, i.e. exactly
   the floating-card look every later fix here was trying to undo but couldn't fully reach
   because that gap/border was never actually removed, just papered over. Kill it outright. */
.convo { gap: 0 !important; }
.convo-nav, .convo-list, .convo-main {
  border: none !important; box-shadow: none !important; background: #fff !important;
}
.convo-list { border-left: 1px solid rgba(10, 37, 64, .08) !important; border-right: 1px solid rgba(10, 37, 64, .08) !important; }
/* Nav rail is a persistent left column at every width — it must never collapse into a
   row stacked above the list, only ever narrow down (labels -> icons) as space tightens. */
@media (max-width: 1200px) {
  .convo { grid-template-columns: 64px 240px minmax(0, 1fr) !important; }
  .convo-nav .convo-folder-label { display: none; }
  .convo-nav .convo-folder { justify-content: center; padding-left: 0; padding-right: 0; }
  .convo-nav .convo-folder-count { position: absolute; top: 4px; right: 4px; margin-left: 0; }
}
@media (max-width: 1000px) {
  .convo { grid-template-columns: 64px minmax(0, 1fr) !important; 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; }
}


/* Field styling closer to the reference: quieter uppercase micro-labels, lighter and more
   rounded input borders, and a primary action row with the send button as a filled circle
   instead of a wide text pill — echoed from the reply composer for one consistent language. */
.compose-form label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); gap: 8px; }
.compose-form input[type="text"], .compose-form select, .compose-form .recipient-box {
  border-radius: 10px; border-color: rgba(10, 37, 64, .12); font-size: 13.5px; font-weight: 500; color: var(--text);
}
.compose-form input[type="text"]:focus, .compose-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.compose-actions { justify-content: flex-end; gap: 14px; margin-top: 4px; }
.compose-actions #compose-draft-note { margin-right: auto; }
.compose-send-btn { width: 44px; height: 44px; }
.compose-send-btn .ico { width: 18px; height: 18px; }


@media (max-width: 900px) {
  .convo-list-tools { padding: 10px; }
  .compose-body { padding: 16px; }
}

/* Nav rail — the third column split out from the list per feedback (nav and the actual message
   list are two different things, not one column with the nav stacked above the list). */
.convo-nav {
  background: #fbfcfe;
  padding: 14px 8px; overflow-y: auto;
}
.convo-folder-label { overflow: hidden; text-overflow: ellipsis; }
.convo-list { border-right: 1px solid rgba(10, 37, 64, .08); }

/* Belt-and-braces: only the OUTER .convo shell is rounded/clipped. Every inner panel and the
   search field inside it must be perfectly square so no corner peeks out and reads as a
   separate floating box — this was the recurring 'stroke around each component' complaint. */
.convo { overflow: hidden; }
.convo-nav, .convo-list, .convo-main, .convo-list-tools {
  border-radius: 0 !important;
}

/* No gold accent rule above the messages shell — it read as a stray line cutting across the
   panel's rounded top corner once the shell went edge-to-edge. */
.msg-page-head::after { display: none; }

/* Sidebar rail a bit wider, and unified with the list background (same white) so the two read
   as one connected surface with a single thin divider — not two separate cards with a gap. */
.convo { grid-template-columns: 232px 288px minmax(0, 1fr); }
.convo-nav { background: #fff; }
.convo-list { border-left: 1px solid rgba(10, 37, 64, .08); border-right: 1px solid rgba(10, 37, 64, .08); }

/* No gold/navy accent bar on list rows either — same 'no stray decorative lines' direction as
   the page-head bar. There are two older ::before rules doing this (unread gold, current
   navy/gold); killing the pseudo-element outright covers both regardless of which one wins. */
.convo-item::before, .convo-item.current::before, .convo-item.unread::before { display: none; }




/* Compose form's dropdowns, reusing the Documents toolbar's custom-select JS (buildCustomSelect
   in app.js) but stretched and bordered to read as a normal full-width form field instead of a
   compact toolbar pill. */
.compose-form .doc-filter-menu { flex-shrink: initial; width: 100%; }
.compose-form .doc-filter-trigger {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 10px; border-color: rgba(10, 37, 64, .12);
  font-size: 13.5px; font-weight: 500; justify-content: space-between;
}
.compose-form .doc-filter-trigger .ico { order: 2; }
.compose-form .doc-filter-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-form .doc-filter-list { width: 100%; }
.compose-form select:not(.rt-font):not(.rt-size) { display: none; }
.compose-form .doc-filter-trigger, .compose-form .doc-filter-list { text-transform: none; letter-spacing: normal; }

/* Dock the attachment chip(s) to the bottom of the message box itself — reads as one
   continuous input with the uploaded file inside it, not a detached row underneath. */
.compose-form .rt { border-radius: 10px 10px 0 0; }
.compose-form .attach-picker {
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px;
  padding: 8px 12px; margin-top: -1px; background: #fbfcfe; min-height: 20px;
}


/* Attachment / Cc chips — a plain flat indigo pill read as an afterthought. Small file icon,
   softer neutral tone matching the rest of the palette, subtle depth. */
.ap-chip {
  background: #fff; border-color: rgba(10, 37, 64, .12); color: var(--text);
  padding: 4px 8px 4px 8px; box-shadow: 0 1px 2px rgba(10, 37, 64, .04);
}
.ap-chip::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px;
  background: var(--accent-soft);
}
.ap-chip-x { color: var(--text-muted); }
.ap-chip-x:hover { background: rgba(10, 37, 64, .08); color: var(--text); }
.recipient-box .ap-chip::before { display: none; }

/* ============ Messages — Gmail-style shell ============
   A real persistent left rail (compose button + folders) that never scrolls away, and ONE
   content pane that shows either the list or an open thread/compose — never both at once.
   Same full-bleed fixed-height technique already used for the Documents page (.rooms-shell):
   cancel .main's own padding with negative margins, then size to the viewport. */
.gmail-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin: -28px -32px -60px;
  height: calc(100vh - 108px);
  height: calc(100dvh - 108px);
  overflow: hidden;
}
.gmail-sidebar {
  background: transparent;
  overflow-y: auto;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
}
.gmail-compose-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 14px 18px; border-radius: 16px; box-shadow: 0 3px 10px rgba(10,37,64,.28);
  transition: box-shadow .12s ease, transform .12s ease; flex-shrink: 0;
}
.gmail-compose-btn:hover { box-shadow: 0 5px 16px rgba(10,37,64,.34); text-decoration: none; transform: translateY(-1px); color: #fff; }
.gmail-compose-btn .ico { width: 16px; height: 16px; }
.gmail-content {
  background: #fff;
  border-left: 1px solid rgba(10, 37, 64, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.convo-list-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Tablet/iPad and narrower: the sidebar stays a real left column — compose on top,
   folder nav below, list to the right — it just narrows to an icon rail instead of
   flipping to a horizontal bar (which broke the compose/nav alignment on iPad). */
@media (max-width: 900px) {
  .gmail-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .gmail-sidebar { padding: 16px 10px; gap: 14px; }
  .gmail-compose-btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .gmail-compose-label { display: none; }
  .convo-folder { position: relative; justify-content: center; padding-left: 0; padding-right: 0; }
  .convo-folder-label { display: none; }
  .convo-folder-count { position: absolute; top: 2px; right: 2px; margin-left: 0; }
}
/* .main's own padding shrinks at this breakpoint (see line ~2191) — the negative margin
   here has to shrink to match exactly, or it over-cancels and pushes .gmail-shell wider
   than the viewport, causing the whole page to overflow horizontally on phones. */
@media (max-width: 700px) {
  .gmail-shell { margin: -20px -16px -48px; height: calc(100vh - 88px); height: calc(100dvh - 88px); }
  .gmail-sidebar { top: 52px; height: calc(100vh - 52px); height: calc(100dvh - 52px); }
}

/* ============ Messages — Gmail-style single-line list rows ============
   .gmail-content is itself the floating white rounded card (not a transparent
   shell around a separately-styled pane) — same treatment for the list, an
   open thread, and Compose, since all three render inside it. Rows get their
   own hairline border + light tint so rounded corners stay visible even
   sitting on the same white background as the card around them. */
.gmail-shell { background: var(--bg); }
/* The panel itself stays a rounded card inset from the header, the bottom and the right
   edge — only the ROWS inside it run flush (see .convo-item margin-bottom: 0 below). */
.gmail-content {
  background: #fff;
  border-left: none;
  border-radius: 18px;
  margin: 16px 20px 16px 8px;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 12px 28px -20px rgba(10,37,64,.18);
  border: 1px solid rgba(10,37,64,.06);
  min-height: 0;
}
.convo-list-pane { flex: 1; min-height: 0; }
.convo-list-tools { background: transparent; border-bottom: 1px solid rgba(10,37,64,.06); padding: 14px 16px 12px; }
.convo-list-scroll { display: flex; flex-direction: column; gap: 0; padding: 0; }

/* Straight, full-bleed rows like real Gmail — no per-row card/radius, just a flat
   hairline between rows; the rounding lives on the outer .gmail-content card only. */
.convo-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(10,37,64,.07) !important;
  background: #fff;
}
.convo-item:hover { background: #e7ebf1 !important; box-shadow: inset 0 1px 0 rgba(10,37,64,.07); text-decoration: none; }
.convo-item.unread { background: #fff; }
.convo-item.unread:hover { background: #eef1f5 !important; }
.convo-item[hidden] { display: none !important; }
.convo-item.current { background: #eef2ff !important; }

.convo-star {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px; background: none;
  color: #c7cdd7; cursor: pointer;
}
.convo-star:hover { background: rgba(10,37,64,.06); color: #9aa4b2; }
.convo-star .ico { width: 16px; height: 16px; }
.convo-item[data-starred="1"] .convo-star { color: #f2b400; }
.convo-item[data-starred="1"] .convo-star .ico { fill: #f2b400; stroke: #f2b400; }

.convo-archive {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px; background: none;
  color: #c7cdd7; cursor: pointer; opacity: .55; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.convo-item:hover .convo-archive, .convo-item:focus-within .convo-archive { opacity: 1; }
.convo-archive:hover { background: rgba(10,37,64,.06); color: var(--text); }
.convo-archive .ico { width: 14px; height: 14px; }
.convo-item[data-archived="1"] .convo-archive { opacity: 1; color: var(--accent); }

.convo-list-scroll .convo-item .avatar { width: 30px; height: 30px; font-size: 11.5px; flex-shrink: 0; }

.convo-item-sender {
  width: 150px; flex-shrink: 0; font-size: 13.5px; font-weight: 500; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.convo-item.unread .convo-item-sender { font-weight: 750; color: var(--text); }

.convo-item-line { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.convo-item-subject { flex-shrink: 0; max-width: 45%; font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-item.unread .convo-item-subject { font-weight: 700; color: var(--text); }
.convo-item-dash { flex-shrink: 0; color: var(--text-muted); }
.convo-item-preview { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.convo-item-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 6px; }
.convo-item-clip { width: 13px; height: 13px; color: var(--text-muted); }
.convo-item-date { width: 78px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.convo-item.unread .convo-item-date { color: var(--text); font-weight: 700; }

@media (max-width: 1000px) {
  .convo-item-sender { width: 110px; }
}

/* ============ Compose — Gmail-style, less crowded ============
   Flat underline fields instead of boxed inputs for To/Cc/Subject, Cc collapsed behind a
   toggle, and Category/Priority/Related-document tucked into a closed <details> — so the
   default view is just To, Subject, and a big message box, matching a real mail client. */
.compose-body { max-width: 860px; }
.compose-form { gap: 0; }
.compose-line {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid rgba(10, 37, 64, .09);
}
.compose-line[hidden] { display: none !important; }
.compose-line-label { flex-shrink: 0; width: 32px; font-size: 13px; color: var(--text-muted); }
.compose-line-field.compose-line-field {
  flex: 1; min-width: 0; border: none; border-radius: 0; padding: 0; box-shadow: none;
  font-size: 14px; font-weight: 500; background: transparent;
}
.compose-line-field.compose-line-field:focus { border: none; box-shadow: none; }
.compose-to-line .cc-picker.compose-line-field, .compose-cc-line .cc-picker.compose-line-field {
  border: none; padding: 0; min-height: 0;
}
.compose-to-line .doc-filter-menu { width: auto; flex: 1; min-width: 0; }
.compose-to-line .doc-filter-trigger {
  width: 100%; height: auto; padding: 0; border: none; border-radius: 0; background: none;
  font-size: 14px; font-weight: 500; justify-content: flex-start; gap: 6px;
}
.compose-to-line .doc-filter-trigger:hover { border: none; }
.compose-to-line .doc-filter-list { min-width: 260px; }
.compose-cc-toggle {
  flex-shrink: 0; border: none; background: none; color: var(--text-muted); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.compose-cc-toggle:hover { background: rgba(10, 37, 64, .06); color: var(--text); }
.compose-cc-line .compose-line-label { padding-top: 8px; align-self: flex-start; }
.compose-subject {
  width: 100% !important; border: none !important; border-radius: 0 !important; padding: 11px 2px !important;
  box-shadow: none !important; border-bottom: 1px solid rgba(10, 37, 64, .09) !important;
  font-size: 16px; font-weight: 600; color: var(--text); background: transparent !important;
}
.compose-subject:focus { border-bottom-color: var(--accent) !important; box-shadow: none !important; }

.compose-more { margin: 10px 0 4px; }
.compose-more > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 6px 2px; list-style: none;
}
.compose-more > summary::-webkit-details-marker { display: none; }
.compose-more > summary::before { content: '▸ '; font-size: 11px; }
.compose-more[open] > summary::before { content: '▾ '; }
.compose-more > summary:hover { color: var(--text); }
.compose-more .qa-fields, .compose-more > label { margin-top: 10px; }

.compose-editor-box {
  border: 1px solid rgba(10, 37, 64, .1); border-radius: 10px; overflow: hidden; background: #fff;
}
.compose-editor-box .rt { border: none; border-radius: 0; margin-top: 0; }
.compose-editor-box .rt-editor { min-height: 260px; }

.compose-actions {
  padding: 12px 16px; border-top: 1px solid rgba(10, 37, 64, .08); background: #fbfbfc;
  align-items: center; flex-wrap: wrap;
}
.compose-send-pill {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; order: 1;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: 24px; border: none; cursor: pointer;
  box-shadow: 0 3px 10px rgba(10,37,64,.24); transition: box-shadow .12s ease, transform .12s ease;
}
.compose-send-pill:hover { box-shadow: 0 5px 14px rgba(10,37,64,.3); transform: translateY(-1px); }
.compose-send-pill .ico { width: 16px; height: 16px; }
.compose-icon-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(10, 37, 64, .14);
  background: #fff; color: var(--text-muted); cursor: pointer;
}
.compose-icon-btn:hover { background: rgba(10, 37, 64, .07); color: var(--text); border-color: rgba(10, 37, 64, .2); }
/* The picker's own box is invisible to layout — its children (hidden file input, the
   attach button, and the chip list) become direct flex items of .compose-actions, so
   `order` can pin the button to the button row while chips always drop to their own
   full-width row underneath, no matter how many files get attached. */
.compose-attach-picker { display: contents; }
.compose-attach-picker .ap-btn { order: 2; }
.compose-attach-picker .ap-chips { order: 6; flex-basis: 100%; margin-top: 4px; }
.compose-actions-spacer { order: 3; }
#compose-draft-note { order: 4; }
.compose-draft-link { order: 5; }
.compose-actions-spacer { flex: 1; }
.compose-draft-link {
  border: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px 6px;
}
.compose-draft-link:hover { color: var(--text); text-decoration: underline; }

/* ============ Thread header — Gmail-style meta line ============
   Sender name <email> on the left, the thread's last-activity date on the right, and a
   star toggle alongside Cc/Archive/Close so starring doesn't require going back to the list. */
.convo-head-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; }
.convo-head-date { flex-shrink: 0; white-space: nowrap; }
.convo-head-star {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: none;
  color: #c7cdd7; cursor: pointer;
}
.convo-head-star:hover { background: rgba(10,37,64,.06); color: #9aa4b2; }
.convo-head-star .ico { width: 17px; height: 17px; }
.convo-head-star[data-starred="1"] { color: #f2b400; }
.convo-head-star[data-starred="1"] .ico { fill: #f2b400; stroke: #f2b400; }


/* ============ v81: key dates & milestones ============ */

/* Deliberately quiet: a reference strip, not a call to action. It sits between the metric
   cards and "Required actions", so it must read as lighter than both — no card chrome, no
   accent fills, just a labelled rule and a tight list that scans in one pass. */
.do-keydates { margin: 18px 0 4px; }
.do-kd-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}
.do-kd-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
}
/* Stacked, not inline: a label and its date on one row means a long label wraps and drags
   the date out of alignment with its neighbours (which is exactly what it did). Label on
   top, date underneath, gives a straight baseline across all tiles at any label length. */
.do-kd-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; background: #fff; border: 1px solid rgba(10, 37, 64, .07);
  border-radius: 10px; border-left: 3px solid rgba(10, 37, 64, .14);
}
.do-kd-label { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.do-kd-when { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.do-kd-date { color: var(--text); font-weight: 700; font-size: 14px; }
.do-kd-in { color: var(--text-muted); font-size: 11.5px; }
/* A milestone inside a week is the only thing here allowed to draw the eye. */
.do-kd-item.is-soon { border-left-color: #b4232a; }
.do-kd-item.is-soon .do-kd-in { color: #b4232a; font-weight: 600; }

/* Admin editor for the same list, in Settings */
.kd-admin-list { list-style: none; margin: 0 0 14px; padding: 0; }
.kd-admin-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.kd-admin-label { flex: 1; min-width: 0; }
.kd-admin-date { color: var(--text-muted); white-space: nowrap; }
.kd-admin-rm { display: flex; }
.kd-admin-empty { margin: 0 0 14px; }
.kd-admin-add { display: flex; gap: 10px; flex-wrap: wrap; }
.kd-admin-add input[type="text"] { flex: 1; min-width: 200px; }
.kd-admin-add input[type="date"] { width: auto; }

@media (max-width: 600px) {
  .kd-admin-add { flex-direction: column; align-items: stretch; }
  .kd-admin-add input[type="date"] { width: 100%; }
}

/* Q&A gate: a lock badge above the heading so the page reads as a deliberate, designed
   restricted state rather than an empty or unfinished one; the way forward is a real
   button, not a link buried in the sentence. */
.qa-gate-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--bg); color: var(--accent); margin-bottom: 4px;
}
.qa-gate-ico .ico { width: 22px; height: 22px; }
.qa-gate-btn { margin-top: 6px; }

/* ============ v83: flat, full-width conversation rows ============ */

/* Real inboxes don't put each message in its own tinted rectangle — they run edge to edge
   and are separated by a single hairline. Declared last so it beats the earlier bubble
   rules (border-radius/tint/shadow, and the two-class .convo-msgs .mail-msg selectors). */
.convo-msgs {
  background: #fff;
  padding: 0;
  gap: 0;
}
.convo-msgs .mail-msg,
.convo-msgs .mail-msg.mine {
  border: none;
  border-bottom: 1px solid rgba(10, 37, 64, .09);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  padding: 18px 24px;
}
/* Sender is still distinguishable, but as a full-bleed tint band rather than a floating
   rectangle — the shading runs the whole width like Front/Zendesk, not a bubble. */
.convo-msgs .mail-msg { background: #fff; }
.convo-msgs .mail-msg.mine { background: #f5f8fd; }
.convo-msgs .mail-msg:last-child { border-bottom: none; }
/* The head rule is a divider inside each bubble; with the bubble gone it just adds a second
   line right under the sender, so drop it and keep the spacing only. */
.convo-msgs .mail-msg-head {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

@media (max-width: 700px) {
  .convo-msgs .mail-msg,
  .convo-msgs .mail-msg.mine { padding: 14px 16px; }
}

/* Rows sit directly on each other — the hairline divider is the only separation. An older
   card-era rule still put margin-bottom:3px on every row, which read as a gap breaking the
   list into floating strips. */
.convo-item { margin-bottom: 0; }

/* ============ v84: conversation header — three clean rows ============ */

/* Actions used to be vertically centred against the whole block, so they sat right beside
   the subject and read as crowded. Now: tags + actions on the top row, subject on its own
   line, sender left / date right along the bottom. */
.convo-head { align-items: flex-start; }
.convo-head-main { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.convo-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 30px;
}
.convo-head-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.convo-head-actions { margin-left: auto; flex-shrink: 0; }
.convo-head .convo-title { display: block; font-size: 17px; line-height: 1.3; }
.convo-head-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.convo-head-date { flex-shrink: 0; margin-left: auto; }

@media (max-width: 700px) {
  .convo-head-top { flex-wrap: wrap; }
  .convo-head .convo-title { font-size: 15.5px; }
}

/* Sidebar folder rows are links, so the active/hover underline was running under the label
   AND straight through the unread-count pill. */
.convo-folder,
.convo-folder:hover,
.convo-folder.active,
.convo-folder .convo-folder-label,
.convo-folder .convo-folder-count { text-decoration: none; }

/* The shared empty state is a direct flex child of .convo-list-scroll, so its flex:1 centres
   it in the pane. The Drafts one is nested a level deeper, so its wrapper has to stretch the
   same way — otherwise it sat lower than every other folder's empty state. */
.convo-drafts-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.convo-drafts-list[hidden] { display: none !important; }

/* Key dates & milestones — admin editor on the dashboard */
.kd-admin-list { list-style: none; margin: 0 0 16px; padding: 0; }
.kd-admin-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.kd-admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kd-admin-label { font-weight: 600; }
.kd-admin-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-admin-date { color: var(--text-muted); white-space: nowrap; }
.kd-admin-rm { display: flex; }
.kd-admin-empty { margin: 0 0 16px; }
.kd-admin-add { display: flex; flex-direction: column; gap: 14px; }
.kd-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kd-add-row input[type="text"] { flex: 1; min-width: 220px; }
.kd-add-row input[type="date"] { width: auto; }
.kd-add-audience { display: flex; flex-direction: column; gap: 8px; }
.kd-user-picks {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin-left: 24px;
  background: var(--bg); border-radius: 10px; max-height: 220px; overflow-y: auto;
}
.kd-user-picks[hidden], .kd-no-users[hidden] { display: none !important; }
.kd-add-foot { display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
  .kd-add-row { flex-direction: column; }
  .kd-add-row input[type="date"] { width: 100%; }
  .kd-user-picks { margin-left: 0; }
}

/* Messages owns the full viewport height and scrolls internally (list + thread each have
   their own scroller). The page-level scrollbar behind it was a second, redundant slider
   that showed up alongside the real one — lock the page so only the inner one exists. */
html:has(.gmail-shell), body:has(.gmail-shell) { overflow: hidden; }

/* The dashboard's cards butt right up against each other; give the card after the key-dates
   editor real breathing room so it doesn't read as one continuous panel. */
.kd-card-gap { margin-top: 20px; }

/* A past milestone is filtered out of every user's dashboard. Say so here, or it just looks
   like the feature is broken when the date was picked in the wrong month. */
.kd-past {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px;
  background: #fdecec; color: #b4232a; font-size: 11px; font-weight: 650; white-space: nowrap;
}

/* Phone: the date picker floats over the page, centred, instead of being anchored under the
   field — anchoring made the page grow taller and forced a scroll just to reach the calendar. */
@media (max-width: 600px) {
  .dp-pop.dp-sheet {
    position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 32px)); max-width: none; z-index: 120;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45);
  }
  /* Dim the page behind it so it reads as an overlay, not a stray floating box. */
  .dp-pop.dp-sheet::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(15, 23, 42, .35);
  }
}

/* Inline edit form for an existing milestone */
.kd-edit-row { list-style: none; padding: 14px 0 18px; border-bottom: 1px solid var(--border); }
.kd-edit-row[hidden] { display: none !important; }
.kd-edit-btn { flex-shrink: 0; }
.kd-add-foot { display: flex; justify-content: flex-end; gap: 10px; }

/* ============ v85: who each user can message (Settings) ============ */
/* One bordered block per user: identity and Save on the top row, the deal-team choices in
   their own tinted area underneath. The earlier flat stack ran name/email/Save/checkboxes
   together with no grouping, which read as one crowded column. */
.mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-user {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff;
}
.mc-user-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
}
.mc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-name { font-weight: 650; font-size: 14px; }
.mc-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-contacts {
  border-top: 1px solid var(--border); background: var(--bg);
  padding: 13px 16px 15px;
}
.mc-contacts-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.mc-contact-grid { display: flex; flex-wrap: wrap; gap: 9px 22px; }
.mc-contact { margin: 0; font-size: 13.5px; }
.mc-contact.is-primary { opacity: .7; }
.mc-none { margin: 8px 0 0; }

@media (max-width: 600px) {
  .mc-user-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .mc-contact-grid { flex-direction: column; gap: 10px; }
}

/* ============ v86: Manage user dialog ============ */

/* Replaces the old cramped "Manage" dropdown: a real modal, wide enough for a two-column
   form, grouped into Profile / Password / Account so destructive actions sit apart from
   everyday edits. The dropdown also closed itself whenever a form inside it submitted —
   a modal survives that, and the page reloads with a flash message instead. */
.modal-box-user { max-width: 680px; }
.mu-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mu-head h2 { margin: 0; }
.mu-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }

.mu-section { padding: 18px 0; border-top: 1px solid var(--border); }
.mu-section-last { padding-bottom: 4px; }
.mu-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.mu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mu-grid label { margin: 0; }
.mu-wide { grid-column: 1 / -1; }
.mu-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.mu-row { display: flex; align-items: center; gap: 10px; }
.mu-row input[type="text"] { flex: 1; min-width: 0; }
.mu-row-wrap { flex-wrap: wrap; }
.mu-row-wrap form { display: flex; }
.mu-section .hint { margin-top: 8px; }

@media (max-width: 640px) {
  .mu-grid { grid-template-columns: 1fr; }
  .mu-row { flex-direction: column; align-items: stretch; }
}

/* Create-user form: the "email their details" opt-out */
.invite-check { align-items: flex-start; gap: 10px; margin-top: 2px; }
.invite-check input { margin-top: 3px; flex-shrink: 0; }
.invite-check > span { display: flex; flex-direction: column; gap: 3px; }
.invite-check .hint { margin: 0; }

/* ============ v87: email delivery status (Settings) ============ */
.mail-status { display: flex; align-items: flex-start; gap: 12px; }
.mail-status-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.mail-status.is-on .mail-status-dot { background: #16a34a; }
.mail-status.is-off .mail-status-dot { background: #d97706; }
.mail-status-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail-status-title { font-weight: 650; font-size: 14px; }
.mail-status.is-on .mail-status-title { color: #15803d; }
.mail-status.is-off .mail-status-title { color: #b45309; }
.mail-status-sub { word-break: break-word; }
.mail-note { margin: 14px 0 0; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mail-hint { margin-top: 12px; }
.mail-status.is-bad .mail-status-dot { background: #dc2626; }
.mail-status.is-bad .mail-status-title { color: #b91c1c; }

/* Welcome message editor (Settings) */
.wm-enable { margin-bottom: 4px; }
.wm-body { font-family: inherit; line-height: 1.55; resize: vertical; }
.wm-foot { display: flex; justify-content: flex-end; }
.settings-panel code {
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
  font-size: 12px; font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* ============ v88: invitation activation page ============ */
.pw-meter { margin: -6px 0 4px; }
.pw-meter-bar { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.pw-meter-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: #e5e7eb; transition: width .3s ease, background .3s ease; }
.pw-meter-fill.is-weak { background: #ef4444; }
.pw-meter-fill.is-fair { background: #f97316; }
.pw-meter-fill.is-good { background: #eab308; }
.pw-meter-fill.is-strong { background: #22c55e; }
.pw-meter-text { font-size: 13px; margin-top: 6px; color: var(--text-muted); }
.pw-meter-text.is-weak { color: #dc2626; }
.pw-meter-text.is-fair { color: #ea580c; }
.pw-meter-text.is-good { color: #ca8a04; }
.pw-meter-text.is-strong { color: #16a34a; }

.pw-checks { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--text-muted); }
.pw-checks[hidden] { display: none !important; }
.pw-checks li { padding: 2px 0 2px 20px; position: relative; }
.pw-checks li::before { content: '○'; position: absolute; left: 0; }
.pw-checks li.is-met { color: #16a34a; }
.pw-checks li.is-met::before { content: '✓'; }

.pw-mismatch { color: #dc2626; font-size: 13px; margin: -6px 0 0; }
.pw-mismatch[hidden] { display: none !important; }
.activate-note { text-align: center; margin-top: 22px; line-height: 1.5; }
.auth-title { text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; margin-bottom: 24px; }

/* Disabled buttons must look disabled — the activation page keeps its submit disabled until
   the password is valid, and with no visual cue that reads as a broken button. */
.btn:disabled,
.btn[disabled] {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: #9ca3af !important; }

/* Invitation email editor: live preview of what actually gets sent */
.mail-preview { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.mail-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mail-preview-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.mail-preview-frame {
  width: 100%; height: 620px; border: 1px solid var(--border); border-radius: 10px;
  background: #F4F6FA; display: block;
}
@media (max-width: 700px) { .mail-preview-frame { height: 460px; } }

/* Raw HTML editor for the invitation email */
.invite-html { margin-top: 4px; }
.invite-html > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.invite-html > summary:hover { color: var(--text); }
.invite-html-note { margin: 10px 0; }
.invite-html-box {
  width: 100%; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px;
  line-height: 1.5; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.invite-reset { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.invite-reset .hint { margin: 0; }