/* Inheritable Trusted Advisor Portal — base styles.
   CSS variables are named to match the shared step-up modal helper
   (--surface-color, --text-color, --border-color, --accent-color, etc.)
   so the ported modal picks up the theme without changes. */

:root {
    --accent-color: #1a73e8;
    --accent-hover: #1666cf;
    --bg-color: #f4f6f9;
    --surface-color: #ffffff;
    --text-color: #14243b;
    --text-secondary-color: #5a6b82;
    --border-color: #dbe2ec;
    --input-bg-color: #ffffff;
    --danger-color: #dc3545;
    --sidebar-bg: #14243b;
    --sidebar-text: #cdd8e6;
    --sidebar-active: #ffffff;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(20, 36, 59, .08), 0 6px 20px rgba(20, 36, 59, .06);
}

* { box-sizing: border-box; }

/* Always reserve the vertical scrollbar's gutter on the right, so the layout
   width stays constant whether or not a scrollbar is present — panels never
   resize/reflow when content grows past one screen. Applies to every page. */
html { scrollbar-gutter: stable; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef1f6; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--text-secondary-color); }

/* ── Brand ─────────────────────────────────────────────────────────── */
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand.center { align-items: center; text-align: center; margin-bottom: 24px; }
.brand-mark { font-weight: 700; font-size: 20px; letter-spacing: -.2px; }
.brand-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; opacity: .75; }

/* ── App shell (authenticated) ─────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 24px 18px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.nav-logout { margin-top: auto; }
.sidebar .brand { color: #fff; margin-bottom: 28px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    color: var(--sidebar-text);
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-item.active { background: rgba(255, 255, 255, .12); color: var(--sidebar-active); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}
.page-title { font-size: 20px; font-weight: 600; margin: 0; }
.account { display: flex; align-items: center; gap: 16px; }
.account-text { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.account-name { font-weight: 600; font-size: 14px; }
.account-firm { font-size: 12px; color: var(--text-secondary-color); }
.signout {
    font-size: 13px; font-weight: 500;
    padding: 8px 14px; border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-color);
}
.signout:hover { background: #eef1f6; text-decoration: none; }

.content { padding: 28px; }

/* ── Panels / clients ──────────────────────────────────────────────── */
.panel {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    max-width: 900px;
}
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.panel-head h2 { font-size: 17px; margin: 0 auto 0 0; }
.empty-state { padding: 24px 0; }
.empty-state p { margin: 0 0 8px 0; }

.clients { list-style: none; margin: 0; padding: 0; }
.client-row {
    display: grid; grid-template-columns: auto minmax(160px, max-content) minmax(0, max-content) 1fr;
    align-items: center; gap: 4px 24px;
    padding: 11px 4px; border-bottom: 1px solid #e6eaf1;
}
.client-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-meta { color: var(--text-secondary-color); font-size: 13px; }

/* ── Auth pages ────────────────────────────────────────────────────── */
.auth-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: linear-gradient(160deg, #14243b 0%, #22405f 100%);
}
.auth-card-wrap { width: 100%; max-width: 420px; }
.auth-card {
    background: var(--surface-color);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    padding: 32px 30px;
}
.auth-title { font-size: 22px; font-weight: 700; margin: 0 0 6px 0; }
.auth-sub { font-size: 14px; color: var(--text-secondary-color); margin: 0 0 20px 0; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-secondary-color); }
.field-input {
    font-size: 15px; padding: 11px 13px;
    border: 1px solid var(--border-color); border-radius: 9px;
    background: var(--input-bg-color); color: var(--text-color);
}
.field-input:focus { outline: 2px solid var(--accent-color); outline-offset: 1px; border-color: var(--accent-color); }

.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary-color); user-select: none; }
.checkbox input { width: 16px; height: 16px; }

.btn-primary {
    font-size: 15px; font-weight: 600;
    padding: 12px 16px; border: none; border-radius: 9px;
    background: var(--accent-color); color: #fff; cursor: pointer;
    margin-top: 4px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.auth-error { color: var(--danger-color); font-size: 13px; min-height: 18px; }
.auth-notice {
    background: #eaf1fd; color: #1a3d6e;
    border: 1px solid #c9defb; border-radius: 8px;
    padding: 10px 12px; font-size: 13px;
}
.auth-links { margin-top: 18px; font-size: 13px; text-align: center; }

/* ── Client list links + badges ─────────────────────────────────────── */
.client-link { display: contents; color: inherit; text-decoration: none; }
.client-link:hover .client-name { text-decoration: underline; }
.badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: var(--text-secondary-color); white-space: nowrap; margin-left: 12px; }
.badge-rw { background: #e6f4ea; color: #1e7e34; }
.back-link { margin: 0 0 14px 0; font-size: 14px; }
.client-detail-head { display: flex; align-items: center; gap: 12px; }
.client-detail-head h2 { margin: 0; }
.content .panel { margin-bottom: 18px; }

/* ── Shared folder browser (Phase 2) ────────────────────────────────── */
.btn-sm { padding: 8px 14px; font-size: 13px; cursor: pointer; display: inline-block; margin: 0; }
.uploader { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px 0; }
.files { list-style: none; margin: 0; padding: 0; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-color); }
.file-row:last-child { border-bottom: none; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-ico { width: 28px; height: 28px; object-fit: contain; flex: none; display: block; }
.file-meta { color: var(--text-secondary-color); font-size: 13px; white-space: nowrap; }
.file-actions { display: flex; gap: 14px; white-space: nowrap; }
.btn-link { background: none; border: none; padding: 0; color: var(--accent-color); cursor: pointer; font-size: 14px; }
.btn-link:hover { text-decoration: underline; }

/* ── Shared folder: breadcrumb, nested folders, drag-drop ──────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 14px; }
.crumb { color: var(--accent-color); text-decoration: none; cursor: pointer; }
.crumb:hover { text-decoration: underline; }
.crumb-current { color: var(--text-color); font-weight: 600; }
.crumb-sep { color: var(--text-secondary-color); margin: 0 2px; }
.folder-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-color); }
.folder-row:last-child { border-bottom: none; }
.folder-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-color); font: inherit; text-align: left; }
.folder-open:hover .file-name { text-decoration: underline; }
.folder-ico { display: inline-flex; color: #caa53d; flex: none; }
.file-row[draggable="true"] { cursor: pointer; }
.dropzone { position: relative; border: 1.5px dashed transparent; border-radius: var(--radius); transition: border-color .12s, background-color .12s; min-height: 40px; }
.dropzone.drag-over { border-color: var(--accent-color); background: rgba(37,99,235,0.05); }
.drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; pointer-events: none; color: var(--accent-color); font-weight: 600; font-size: 14px; background: rgba(255,255,255,0.7); border-radius: var(--radius); }
.dropzone.drag-over .drop-hint { display: flex; }
.btn-danger { color: var(--danger-color); }

/* ── Phase 3: read-only "Shared with you" surface ─────────────────────── */
#shared-access { margin-top: 8px; }
.sa-section { border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.sa-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface-color); border: none; cursor: pointer; padding: 13px 16px; font: inherit;
    font-weight: 600; color: var(--text-color); text-align: left; }
.sa-head:hover { background: #f7f9fc; }
.sa-chevron { color: var(--text-secondary-color); transition: transform .15s ease; }
.sa-head.open .sa-chevron { transform: rotate(90deg); }
.sa-body { padding: 4px 16px 14px; border-top: 1px solid var(--border-color); background: #fbfcfe; }
.sa-card { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.sa-card:last-child { border-bottom: none; }
.sa-card-title { font-weight: 600; margin-bottom: 6px; }
.sa-fields { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 2px 16px; margin: 6px 0; }
.sa-fields dt { color: var(--text-secondary-color); font-size: 13px; }
.sa-fields dd { margin: 0; font-size: 14px; word-break: break-word; }
.sa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sa-secret { margin: 8px 0; }
.sa-secret-out { margin-top: 6px; padding: 8px 10px; background: #eef4ff; border-radius: 8px; }
.sa-answer { white-space: pre-wrap; font-size: 14px; }
.sa-json { white-space: pre-wrap; font-size: 12px; margin: 0; }
.sa-files { margin-top: 8px; }
.sa-files-label { font-size: 12px; color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.sa-dv-folder { margin: 8px 0; }
.sa-dv-folder-name { font-weight: 600; font-size: 14px; margin: 6px 0 2px; }

/* Sidebar brand: Inheritable long logo (white) replacing the wordmark. */
.sidebar .brand-logo { width: 172px; max-width: 100%; height: auto; display: block; margin-bottom: 6px; }

/* ── Clients: two-panel split, toolbar, selection ─────────────────────── */
.clients-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .clients-split { grid-template-columns: 1fr; } }
.clients-split .panel { max-width: none; }              /* fill the column, don't cap at 900px */
.clients-home { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 980px) { .clients-home { grid-template-columns: 1fr; } }
.clients-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.clients-toolbar .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary-color); cursor: pointer; }
.sort-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary-color); }
.sort-ctl select { font: inherit; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg-color); color: var(--text-color); }
.client-check { width: 16px; height: 16px; flex: none; accent-color: var(--accent-color); cursor: pointer; }
.client-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-placeholder { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.placeholder-inner { text-align: center; max-width: 260px; }
.placeholder-inner p { margin: 0 0 6px; }

/* ── Phase 4: invites (amber pill + invite modal) ─────────────────────── */
.badge-invited { background: #fdeccb; color: #8a5b00; margin-left: 0; justify-self: end; }
.badge-readonly { background: #fdeccb; color: #8a5b00; margin-left: 0; }

/* ── Shared with you: feature icon tiles (mobile Trusted Access style) ──── */
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px; margin-top: 4px; }
.sa-tile-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 4px; background: none; border: none; cursor: pointer; text-align: center; }
.sa-tile-btn:hover .sa-tile-label { text-decoration: underline; }
.sa-tile-btn:hover .sa-tile-icon { transform: translateY(-2px); }
.sa-tile-icon { width: 76px; height: auto; display: block; transition: transform .12s; }
.sa-tile-label { font-size: 13px; font-weight: 500; color: var(--text-color); line-height: 1.2; }
.sa-detail-back { background: none; border: none; padding: 0; margin: 0 0 14px; color: var(--accent-color); cursor: pointer; font-size: 14px; }
.sa-detail-back:hover { text-decoration: underline; }
.sa-detail-title { font-size: 17px; margin: 0 0 12px; }

.row-flags { display: inline-flex; gap: 6px; align-items: center; justify-self: end; }
.badge-activity { background: #c99a2e; color: #fff; margin-left: 0; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; line-height: 0; }
.badge-newmsg { background: var(--accent-color); color: #fff; margin-left: 0; justify-self: end;
               display: inline-flex; align-items: center; justify-content: center;
               padding: 4px 7px; line-height: 0; }
.client-row.invited .client-name { color: var(--text-secondary-color); }
.panel-invite .btn-primary { margin-top: 4px; }
.invite-ok { margin-top: 12px; padding: 10px 12px; background: #e6f4ea; color: #1e7e34; border-radius: 8px; font-size: 14px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(20, 36, 59, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal { background: var(--surface-color); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 460px; padding: 22px; }
.modal h3 { margin: 0 0 14px; font-size: 18px; }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.modal textarea.field-input { resize: vertical; font: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; margin-top: 6px; }

/* ── Phase 4: bulk CSV invite import ──────────────────────────────────── */
.invite-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-secondary { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer;
    background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: #f7f9fc; border-color: var(--text-secondary-color); }
.modal-wide { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.import-intro { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.import-zone { border: 1.5px dashed var(--border-color); border-radius: 10px; padding: 22px; text-align: center; cursor: pointer; }
.import-zone.is-drag { border-color: var(--accent-color); background: #eef4ff; }
.import-zone-text { font-size: 14px; color: var(--text-secondary-color); }
.import-zone-meta { font-size: 12px; margin-top: 6px; }
.import-status { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.import-status.is-valid { background: #e6f4ea; color: #1e7e34; }
.import-status.is-invalid { background: #fdecec; color: var(--danger-color); }
.import-preview { margin-top: 12px; }
.import-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-table th, .import-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-color); }
.import-table th { color: var(--text-secondary-color); font-weight: 600; }
.import-table tr.row-err td { background: #fdecec; }
.imp-err { color: var(--danger-color); }
.imp-ok { color: #1e7e34; }
.import-summary { margin-top: 6px; font-size: 12px; }
.import-progress { margin-top: 12px; }
.import-progress-bar { height: 8px; background: var(--border-color); border-radius: 999px; overflow: hidden; }
.import-progress-fill { height: 100%; width: 0; background: var(--accent-color); transition: width .2s ease; }
.import-progress-text { margin-top: 6px; font-size: 12px; }

/* ── Phase 4: remove clients (right column stack + danger button) ─────── */
.clients-right { display: flex; flex-direction: column; gap: 18px; }
.clients-right .panel { margin-bottom: 0; }

/* ── Actions panel (compact buttons + hover description) ───────────────── */
.action-desc { height: 74px; box-sizing: border-box; display: flex; align-items: center; margin: 0 0 14px; padding: 10px 12px; background: #f4f6fa; border-radius: 8px; color: var(--text-secondary-color); font-size: 13px; line-height: 1.45; overflow: hidden; }
.action-btns { display: flex; flex-wrap: nowrap; gap: 8px; }
.invite-import-hint { margin: -6px 0 16px; font-size: 13px; }
.invite-import-hint .btn-link { font-size: 13px; }
.action-item { display: inline-flex; }
.action-item > button { width: auto; margin-top: 0; }
.action-item > button:disabled { pointer-events: none; }
.client-col { display: flex; flex-direction: column; gap: 18px; }
.client-col .panel { margin-bottom: 0; max-width: none; }
.clients-split > .client-col .panel { max-width: none; }
.btn-danger-solid { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer;
    background: var(--danger-color); color: #fff; border: 1px solid var(--danger-color); }
.btn-danger-solid:hover { filter: brightness(.94); }
.btn-danger-solid:disabled { opacity: .5; cursor: not-allowed; }

/* ── Phase 5: two-way messaging thread ────────────────────────────────── */
.msg-thread { display: flex; flex-direction: column; gap: 16px;
             max-height: 460px; overflow-y: auto; padding: 4px 8px 4px 2px; scroll-behavior: auto; }
/* top sentinel: visible while older messages are being fetched on scroll-up */
.msg-sentinel { display: flex; align-items: center; justify-content: center; gap: 8px;
                padding: 10px 4px 4px; color: var(--text-secondary-color); font-size: 12px; }
.msg-sentinel-spinner { width: 14px; height: 14px; border-radius: 50%;
                        border: 2px solid #d1d5db; border-top-color: var(--accent-color);
                        animation: msg-sentinel-spin 0.8s linear infinite; }
@keyframes msg-sentinel-spin { to { transform: rotate(360deg); } }
.msg-row { display: flex; flex-direction: column; gap: 8px; }
.msg-in { align-self: flex-start; max-width: 82%; }
.msg-out { align-self: flex-end; max-width: 82%; }
.msg-reply { align-self: stretch; width: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.msg-reply-input { width: 100%; resize: vertical; }
.msg-compose { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg-compose textarea { width: 100%; resize: vertical; }
.msg-compose-actions { display: flex; justify-content: flex-end; }
.msg-meta { font-size: 12px; color: var(--text-secondary-color); margin-bottom: 3px; }
.msg-out .msg-meta { text-align: right; }
.msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.msg-bubble-in { background: #eef1f6; color: var(--text-color); border-top-left-radius: 4px; }
.msg-bubble-out { background: var(--accent-color); color: #fff; border-top-right-radius: 4px; }
.msg-bubble a { text-decoration: underline; }
.msg-bubble-out a { color: #fff; }


/* ── Activity (shared-folder audit trail) ──────────────────────────────── */
.act-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow-y: auto; }
.act-row { display: flex; gap: 10px; align-items: flex-start; }
.act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--text-secondary-color); }
.act-row.act-you .act-dot { background: var(--accent-color); }
.act-row.act-client .act-dot { background: #c99a2e; }
.act-body { font-size: 14px; line-height: 1.4; color: var(--text-color); min-width: 0; }
.act-time { display: block; font-size: 12px; color: var(--text-secondary-color); margin-top: 2px; }
.act-more-wrap { margin-top: 12px; }


/* ── File/folder row kebab menu ────────────────────────────────────────── */
.kebab-btn { background: none; border: none; padding: 4px; border-radius: 6px; cursor: pointer; color: var(--text-secondary-color); display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.kebab-btn:hover { background: #eef1f6; color: var(--text-color); }
.row-menu { position: absolute; z-index: 1000; min-width: 210px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 10px 28px rgba(16,36,59,.18); padding: 6px; display: none; }
.row-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: none; border: none; border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text-color); text-align: left; }
.row-menu-item:hover { background: #eef1f6; }
.row-menu-item.danger { color: #c0392b; }
.row-menu-item svg { flex: none; }


/* ── File preview modal ────────────────────────────────────────────────── */
.preview-box { background: var(--surface-color); border-radius: 12px; width: min(920px, 94vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(16,36,59,.32); }
.preview-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.preview-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.preview-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-meta { font-size: 12px; }
.preview-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-secondary-color); padding: 0 4px; }
.preview-close:hover { color: var(--text-color); }
.preview-body { padding: 16px; overflow: auto; flex: 1 1 auto; min-height: 220px; display: flex; align-items: flex-start; justify-content: center; }
.preview-body > [hidden] { display: none !important; }
.pv-img { max-width: 100%; height: auto; border-radius: 8px; }
.pv-text { white-space: pre-wrap; word-break: break-word; width: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-color); }
.pv-pdf { width: 100%; height: 78vh; border: none; }
.pv-media { max-width: 100%; }
.pv-doc { width: 100%; }
.pv-doc iframe { width: 100%; min-height: 62vh; border: none; }

.detail-actions { margin-top: 12px; }


/* ── Reminders panel ───────────────────────────────────────────────────── */
.rem-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rem-row { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; }
.rem-main { display: flex; align-items: center; gap: 10px; }
.rem-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-meta { font-size: 12px; margin-top: 3px; }
.rem-actions { display: flex; gap: 16px; margin-top: 8px; }
.rem-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.rem-proposal  { background: #fdeccb; color: #8a5b00; }
.rem-accepted  { background: #e6f4ea; color: #1e7e34; }
.rem-rejected  { background: #fde2e1; color: #b02a37; }
.rem-withdrawn { background: #eef1f6; color: var(--text-secondary-color); }

.sa-file-click { cursor: pointer; }


/* ── Collapsible panels (toggle in each panel header) ──────────────────── */
.panel-toggle { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; color: var(--text-secondary-color); }
.panel-toggle:hover { background: #eef1f6; color: var(--text-color); }
.panel-toggle svg { transition: transform .15s; }
.panel.collapsed .panel-toggle svg { transform: rotate(180deg); }
.panel.collapsed > :not(.panel-head) { display: none !important; }
.panel.collapsed .panel-head { margin-bottom: 0; }

/* Client-row update badges (circular) */
.row-flag { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.row-flag svg { width: 13px; height: 13px; }
.row-flag-upload { background: #6A1B9A; }
.row-flag-msg    { background: #14243b; }
.row-flag-share  { background: #2E7D32; }

/* Client header: email left, phone right (clickable, international) */
.client-contact-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.client-phone { white-space: nowrap; color: var(--accent-color); text-decoration: none; }
.client-phone:hover { text-decoration: underline; }