:root { color-scheme: light; --ink: #17202a; --muted: #6b7280; --line: #e5e7eb; --accent: #2457d6; --bg: #f6f7fb; }
* { box-sizing: border-box; } [hidden] { display:none !important; } body { margin: 0; padding-bottom:72px; background: var(--bg); color: var(--ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.auth-loading main,.auth-loading .user-menu,.auth-loading .status-bar { visibility:hidden; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding: 24px max(24px, calc((100vw - 1180px)/2)); }
.user-menu { align-items:center; display:flex; gap:12px; }.user-menu span { color:var(--muted); font-size:13px; font-weight:700; }
.chat-notifications { position:relative; }
.chat-notifications-button { align-items:center; background:#f8fafc; border:1px solid #dbe1e8; color:#64748b; display:flex; font-size:18px; height:40px; justify-content:center; position:relative; width:40px; }
.chat-notifications-button svg { fill:none; height:20px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:20px; }
.chat-notifications-button.has-unread { background:#2457d6; border-color:#2457d6; color:#fff; }
.chat-notifications-button > span { align-items:center; background:#dc2626; border:2px solid #fff; border-radius:999px; color:#fff; display:flex; font-size:10px; height:20px; justify-content:center; min-width:20px; padding:0 4px; position:absolute; right:-7px; top:-8px; }
.chat-notifications-button > span[hidden] { display:none; }
.chat-notifications-menu { background:#fff; border:1px solid #dbe1e8; border-radius:12px; box-shadow:0 18px 45px #17202a26; padding:12px; position:absolute; right:0; top:48px; width:min(350px,calc(100vw - 32px)); z-index:35; }
.chat-notifications-menu[hidden] { display:none; }
.chat-notifications-menu > strong { display:block; font-size:13px; padding:2px 5px 9px; }
#chat-notifications-list { display:grid; gap:4px; max-height:360px; overflow:auto; }
#chat-notifications-list > button { align-items:center; background:#f8fafc; display:flex; gap:12px; justify-content:space-between; padding:10px; text-align:left; }
#chat-notifications-list > button:hover { background:#eef2ff; }
#chat-notifications-list > button span { display:grid; min-width:0; }
#chat-notifications-list > button strong { color:#1e293b; font-size:13px; }
#chat-notifications-list > button small { color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#chat-notifications-list > button b { align-items:center; background:#2457d6; border-radius:999px; color:#fff; display:flex; flex:0 0 auto; font-size:11px; height:23px; justify-content:center; min-width:23px; padding:0 6px; }
#chat-notifications-list > p { color:#64748b; margin:4px 5px; }
.status-bar { background:#eef2ff; border-top:1px solid #c7d2fe; bottom:0; color:#263b75; display:grid; gap:3px; left:0; min-height:42px; padding:7px max(24px, calc((100vw - 1180px)/2)); position:fixed; right:0; z-index:20; }
.status-bar[hidden] { display:none; }
.status-bar-line { align-items:center; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:24px; text-align:center; }
.status-bar-line[hidden] { display:none; }
.status-bar-label { color:#52658f; font-weight:700; }
.status-bar strong { color:#172554; }
.status-bar time { color:#52658f; }
h1 { font-size: 25px; letter-spacing: -.03em; margin: 2px 0 0; } .eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.environment-badge { background:#b91c1c; border-radius:999px; color:#fff; display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em; margin-left:10px; padding:3px 7px; vertical-align:1px; }
.environment-badge[hidden] { display:none; }
body.test-environment { --accent:#b91c1c; }
main { max-width: 1180px; margin: 28px auto; padding: 0 24px; } .cards { display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cards article { background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 18px; } .cards span { color:var(--muted); display:block; font-size:12px; } .cards strong { display:block; font-size:25px; margin-top:8px; }
button { border:0; border-radius:8px; cursor:pointer; font:inherit; } .secondary { background:#eef2ff; color:#2345a1; padding:9px 14px; } .primary { background:var(--accent); color:#fff; padding:10px 14px; font-weight:700; white-space:nowrap; } .primary:hover { background:#1d46aa; } .tabs { border-bottom:1px solid var(--line); display:flex; gap:22px; margin-top:32px; } .tab { background:transparent; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:12px 2px; } .tab.active { border-color:var(--accent); color:var(--accent); font-weight:700; }
button { border:0; border-radius:8px; cursor:pointer; font:inherit; } .secondary { background:#eef2ff; color:#2345a1; padding:9px 14px; } .warning-button { background:#fef3c7; color:#92400e; padding:9px 14px; } .warning-button:hover { background:#fde68a; } .primary { background:var(--accent); color:#fff; padding:10px 14px; font-weight:700; white-space:nowrap; } .primary:hover { background:#1d46aa; } .tabs { border-bottom:1px solid var(--line); display:flex; gap:22px; margin-top:32px; } .tab { background:transparent; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:12px 2px; } .tab.active { border-color:var(--accent); color:var(--accent); font-weight:700; }
.panel { display:none; } .panel.active { display:block; } .toolbar { align-items:center; display:flex; gap:14px; justify-content:space-between; padding:18px 0; } .toolbar-actions { display:flex; gap:10px; } input { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; width:min(420px,100%); }
.table-wrap { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; } table { border-collapse:collapse; min-width:0; table-layout:auto; width:100%; } th,td { border-bottom:1px solid var(--line); overflow-wrap:anywhere; padding:12px 14px; text-align:left; white-space:normal; } th { background:#fafafa; color:var(--muted); cursor:pointer; font-size:12px; font-weight:700; overflow-wrap:normal; user-select:none; white-space:nowrap; } tr:last-child td { border-bottom:0; } .date-cell { white-space:nowrap; } .number { padding-right:24px; text-align:right; white-space:nowrap; } .error { background:#fff0f0; border:1px solid #fecaca; border-radius:8px; color:#991b1b; padding:12px; }
.actions-column { cursor:default; text-align:right; } td.row-actions { text-align:right; vertical-align:middle; white-space:nowrap; } td.row-actions > * { vertical-align:middle; } td.row-actions > * + * { margin-left:6px; } div.row-actions { align-items:center; display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; } .action-button { align-items:center; background:#eef2ff; color:#2345a1; display:inline-flex; min-height:34px; padding:7px 10px; } .action-button.danger { background:#fff0f0; color:#991b1b; } .action-button:disabled { background:#f3f4f6; color:#9ca3af; }
.sale-status { display:inline-block; font-size:12px; font-weight:800; white-space:nowrap; } .sale-status-concretized { color:#15803d; } .sale-status-settled { color:#1d4ed8; } .sale-status-collection-pending { color:#b45309; } .sale-status-collection { color:#c2410c; } .sale-status-renegotiated { color:#7e22ce; } .sale-status-cancelled { color:#dc2626; } .sale-status-default { color:#374151; }
.receipt-status { display:inline-block; font-weight:800; white-space:nowrap; } .receipt-status-partial { color:#7e22ce; } .receipt-status-overdue { color:#dc2626; } .receipt-status-today { color:#c2410c; } .receipt-status-upcoming { color:#15803d; } .receipt-status-default { color:#374151; }
.installment-status { border-radius:999px; display:inline-block; font-size:12px; font-weight:800; padding:5px 9px; white-space:nowrap; }
.installment-status-paid { background:#dcfce7; color:#166534; }
.installment-status-overdue { background:#fee2e2; color:#991b1b; }
.installment-status-open { background:#fef3c7; color:#92400e; }
.installment-status-renegotiated { background:#f3e8ff; color:#7e22ce; }
#sale-detail-body .installment-row-paid td { background:#f0fdf4; }
#sale-detail-body .installment-row-overdue td { background:#fff7f7; }
#sale-detail-body .installment-row-open td { background:#fffbeb; }
#sale-detail-body .installment-row-renegotiated td { background:#faf5ff; }
#sale-detail-dialog table { min-width:max-content; }
#sale-detail-dialog th,#sale-detail-dialog td { overflow-wrap:normal; white-space:nowrap; }
#sale-detail-dialog .sale-detail-events { min-width:280px; white-space:normal; }
#renegotiation-dialog { max-height:calc(100vh - 32px); overflow:auto; width:min(1180px,calc(100% - 32px)); }
#renegotiation-dialog form { display:block; }
.renegotiation-controls { display:grid; gap:14px; grid-template-columns:2fr 1fr; margin:18px 0; }
.renegotiation-terms { display:grid; gap:14px; grid-template-columns:1fr 1fr; margin:16px 0; }
.renegotiation-loans { display:flex; flex-wrap:wrap; gap:10px; }
#renegotiation-dialog fieldset { background:#f8fafc; border:1px solid #dbe1e8; border-radius:12px; margin:0; padding:14px; }
#renegotiation-dialog legend { background:#f8fafc; border-radius:6px; color:#526070; font-size:12px; font-weight:800; padding:0 8px; }
.renegotiation-loans label { align-items:center; background:#fff; border:1px solid #dbe1e8; border-radius:9px; color:#374151; display:flex; flex-direction:row; gap:8px; padding:9px 12px; transition:border-color .15s,background .15s,box-shadow .15s; }
.renegotiation-loans label:has(input:checked) { background:#eef2ff; border-color:#a5b4fc; box-shadow:0 0 0 1px #c7d2fe inset; color:#243b82; }
.renegotiation-loans input { accent-color:var(--accent); height:16px; margin:0; width:16px; }
#renegotiation-result { margin-top:18px; }
.renegotiation-summary { display:flex; flex-wrap:wrap; gap:22px; justify-content:flex-end; padding:16px 4px; }
.renegotiation-summary span { color:var(--muted); }
.renegotiation-summary strong { color:var(--ink); margin-left:5px; }
.cancelled-sale-note { color:#4b5563; font-size:13px; font-weight:600; }
.form-columns { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
#sale-form-dialog { max-height:calc(100vh - 32px); overflow:auto; width:min(760px,calc(100% - 32px)); }
.installment-actions { display:flex; flex-wrap:nowrap; gap:6px; justify-content:flex-end; margin-top:6px; white-space:nowrap; } .installment-actions .action-button { font-size:12px; padding:5px 8px; } .row-actions .cancel-loan-receipt { font-size:12px; padding:5px 8px; }
.sale-link { color:var(--accent); font-weight:700; text-decoration:none; } .sale-link:hover { text-decoration:underline; }
dialog { border:0; border-radius:14px; box-shadow:0 24px 70px #17202a38; padding:0; width:min(480px,calc(100% - 32px)); } dialog::backdrop { background:#17202a80; } dialog form { display:grid; gap:18px; padding:22px; } .dialog-header { align-items:center; display:flex; justify-content:space-between; } .dialog-header h2 { font-size:20px; margin:0; } .icon-button { background:transparent; color:var(--muted); font-size:26px; line-height:1; padding:4px 8px; } dialog label { color:var(--ink); display:grid; font-size:13px; font-weight:700; gap:7px; } dialog label[hidden] { display:none; } dialog input, dialog select { background:#fff; border:1px solid var(--line); border-radius:8px; font:inherit; padding:10px 12px; width:100%; } .dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; } .form-error { background:#fff0f0; border-radius:8px; color:#991b1b; margin:0; padding:10px 12px; } button:disabled { cursor:not-allowed; opacity:.65; }
.dialog-header-actions { align-items:center; display:flex; gap:8px; }
#allocation-dialog { max-height:calc(100vh - 32px); width:min(1500px,calc(100% - 32px)); }
#sale-detail-dialog { box-sizing:border-box; height:auto; max-height:75vh; overflow:auto; padding:22px; width:75vw; }
#sale-detail-dialog[aria-busy="true"] { cursor:progress; }
#sale-detail-dialog[aria-busy="true"] .table-wrap,#sale-detail-dialog[aria-busy="true"] #sale-detail-summary { opacity:.55; }
.operation-status { align-items:center; background:#eef2ff; border:1px solid #c7d2fe; border-radius:9px; color:#263b75; display:flex; font-weight:700; gap:9px; margin:16px 0 0; padding:10px 12px; }
.operation-status::before { animation:operation-spin .8s linear infinite; border:2px solid #a5b4fc; border-top-color:var(--accent); border-radius:50%; content:""; height:14px; width:14px; }
.operation-status[hidden] { display:none; }
@keyframes operation-spin { to { transform:rotate(360deg); } }
.app-dialog { width:min(520px,calc(100% - 32px)); }
.app-dialog form { gap:16px; }
.dialog-eyebrow { color:var(--accent); display:block; font-size:10px; font-weight:800; letter-spacing:.14em; margin-bottom:3px; }
.app-dialog-message { color:#374151; font-size:15px; margin:0; white-space:pre-line; }
.app-dialog-fields { display:grid; gap:14px; }
.app-dialog-fields:empty { display:none; }
.app-dialog .dialog-actions { border-top:1px solid var(--line); margin-top:2px; padding-top:16px; }
.app-dialog .dialog-confirm-danger { background:#b91c1c; }
.app-dialog .dialog-confirm-danger:hover { background:#991b1b; }
#cash-flow-dialog { box-sizing:border-box; max-height:calc(100vh - 32px); padding:22px; width:min(1200px,calc(100% - 32px)); }
#plan-values-dialog { box-sizing:border-box; max-height:75vh; overflow:auto; padding:22px; width:min(1200px,calc(100% - 32px)); }
#plan-values-dialog .dialog-header { margin-bottom:18px; }
#plan-values-dialog .table-wrap { max-height:58vh; overflow:auto; }
#plan-values-dialog tfoot th { background:#fafafa; }
.link-button { background:transparent; color:var(--primary); padding:0; text-decoration:underline; }
#cash-flow-dialog .table-wrap { max-height:60vh; overflow:auto; }
.cash-flow-filter { align-items:end; display:flex; gap:12px; padding:18px 0; }
.cash-flow-filter label { min-width:180px; }
.cash-flow-summary { display:flex; flex-wrap:wrap; gap:18px; padding:0 0 14px; }
.cash-flow-summary span { color:var(--muted); }
.cash-flow-summary strong { color:var(--ink); margin-left:5px; }
.loan-link { color:var(--accent); font-weight:600; text-decoration:none; }
.loan-link:hover { text-decoration:underline; }
.client-details-link { background:transparent; color:inherit; font-weight:600; padding:0; text-align:left; text-decoration:underline; text-decoration-color:#94a3b8; text-underline-offset:2px; }
.client-details-link:hover { color:var(--accent); text-decoration-color:currentColor; }
.client-details-dialog { padding:22px; width:min(620px,calc(100% - 32px)); }
.client-details-content { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.client-details-content > div { background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.client-details-content span { color:var(--muted); display:block; font-size:11px; }
.client-details-content strong { display:block; margin-top:3px; overflow-wrap:anywhere; }
.client-details-content .form-error,.client-details-content .conversation-loading { grid-column:1/-1; }
@media (max-width:560px) { .client-details-content { grid-template-columns:1fr; } }
.receipt-summary { background:#f8fafc; border:1px solid var(--line); border-radius:10px; display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; }
.receipt-summary span { color:var(--muted); display:block; font-size:12px; }
.receipt-summary strong { display:block; margin-top:2px; }
.receipt-preview { margin:0; }
.early-payment-discount { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; display:grid; gap:12px; padding:14px; }
.early-payment-discount[hidden],.discount-fields[hidden] { display:none; }
.early-payment-discount .checkbox-label { align-items:center; color:#166534; display:flex; font-weight:700; gap:9px; }
.late-interest-review { background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; display:grid; gap:10px; padding:14px; }
.late-interest-review > strong { color:#9a3412; }
.late-interest-values { display:flex; flex-wrap:wrap; gap:8px 24px; }
.late-interest-values span { color:#7c2d12; display:grid; font-size:12px; gap:2px; }
.late-interest-values b { color:#431407; font-size:14px; }
.late-interest-review small { color:#9a3412; }
.late-interest-review .checkbox-label { align-items:center; color:#991b1b; display:flex; font-weight:700; gap:9px; }
.early-payment-discount .checkbox-label input { flex:0 0 auto; height:17px; margin:0; padding:0; width:17px; }
.discount-fields { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.discount-fields label { position:relative; }
.discount-fields .input-suffix { bottom:10px; color:var(--muted); font-weight:700; position:absolute; right:12px; }
.early-payment-discount small { color:#3f6212; }
.form-warning { background:#fff7ed; border-radius:8px; color:#9a3412; margin:0; padding:10px 12px; }
.quality-badge { border-radius:999px; display:inline-block; font-size:12px; font-weight:700; padding:4px 8px; white-space:nowrap; }
.quality-em_avaliacao { background:#eef2ff; color:#3730a3; }
.quality-regular { background:#dcfce7; color:#166534; }
.quality-restricao { background:#fef3c7; color:#92400e; }
.quality-bloqueado { background:#fee2e2; color:#991b1b; }
.classification-pending { color:#b45309; font-size:12px; font-weight:700; white-space:nowrap; }
#pending-classifications-dialog { padding:22px; width:min(900px,calc(100% - 32px)); }
#pending-classifications-dialog .dialog-header { margin-bottom:18px; }
#pending-classifications-empty { color:var(--muted); margin:16px 0 0; }
#undo-receipt-dialog { padding:22px; width:min(620px,calc(100% - 32px)); } #undo-receipt-events { display:grid; gap:8px; } .undo-receipt-event { align-items:center; border:1px solid var(--line); border-radius:8px; display:flex; font-size:13px; gap:12px; justify-content:space-between; padding:10px; } .undo-receipt-event span { min-width:0; }
#sale-detail-dialog .table-wrap,#allocation-dialog .table-wrap { overflow:auto; }
#sale-detail-dialog table,#allocation-dialog table { min-width:1050px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px) { body { padding-bottom:112px; } .topbar { align-items:flex-start; gap:16px; } h1 { font-size:20px; } .cards { grid-template-columns: repeat(2,1fr); } .status-bar { gap:2px; } .status-bar-line { gap:4px; } }
.login-page { align-items:center; background:linear-gradient(145deg,#eef2ff,#f8fafc 55%,#e0e7ff); display:flex; justify-content:center; min-height:100vh; padding:24px; }
.login-card { background:#fff; border:1px solid #dbe1e8; border-radius:16px; box-shadow:0 24px 70px #17202a22; margin:0; padding:32px; width:min(420px,100%); }
.login-card h1 { margin:5px 0 8px; }.login-card>p { color:var(--muted); margin:0 0 24px; }.login-card form { display:grid; gap:16px; }.login-card label { display:grid; font-size:13px; font-weight:700; gap:7px; }.login-card label[hidden] { display:none; }.login-card input { width:100%; }.login-card button { margin-top:4px; }
#users-dialog { padding:22px; width:min(980px,calc(100% - 32px)); }
#users-dialog .table-wrap { margin-top:18px; }.user-form { align-items:end; display:grid; gap:12px; grid-template-columns:1.4fr 1fr 1fr 1.5fr auto; }.user-profiles { border:1px solid var(--line); border-radius:9px; display:flex; flex-wrap:wrap; gap:7px 12px; margin:0; padding:8px 10px; }.user-profiles legend { font-size:12px; font-weight:700; padding:0 4px; }.user-profiles label { align-items:center; display:flex; flex-direction:row; font-weight:500; gap:5px; }.user-profiles input { height:15px; margin:0; width:15px; }.user-status { border-radius:999px; display:inline-block; font-size:12px; font-weight:700; padding:4px 9px; }.user-status.active { background:#dcfce7; color:#166534; }.user-status.inactive { background:#f3f4f6; color:#6b7280; }
.password-pending { color:#92400e; display:block; font-size:11px; margin-top:4px; }
@media (max-width:900px) { .user-form { grid-template-columns:1fr 1fr; } }
#collections-dialog { padding:22px; width:min(1180px,calc(100% - 32px)); }.collections-intro { color:var(--muted); margin:0 0 14px; }.collection-state { border-radius:999px; display:inline-block; font-size:12px; font-weight:700; padding:4px 9px; white-space:nowrap; }.collection-state.pending { background:#fef3c7; color:#92400e; }.collection-state.approved { background:#ede9fe; color:#6d28d9; }
#renegotiation-requests-dialog { padding:22px; width:min(1180px,calc(100% - 32px)); }
#renegotiation-requests-dialog th,#renegotiation-requests-dialog td { white-space:nowrap; }
#renegotiation-requests-empty { color:var(--muted); margin:16px 0 0; }
.collection-batch-actions { align-items:center; display:flex; gap:14px; justify-content:flex-end; margin-bottom:14px; }.collection-batch-actions .checkbox-label { align-items:center; display:flex; gap:7px; white-space:nowrap; }.collection-batch-actions input,.collection-select { height:17px; margin:0; width:17px; }.collection-select-column { width:34px; } #collections-dialog th,#collections-dialog td { white-space:nowrap; } #collections-dialog td:nth-child(3) { white-space:normal; } #collections-dialog .collection-approval { white-space:nowrap; }
.collection-note { color:var(--muted); display:block; font-size:11px; margin-top:4px; white-space:nowrap; }
.installment-summary { display:flex; flex-wrap:wrap; gap:0 6px; }.installment-summary span { white-space:nowrap; }.installment-summary span + span::before { content:"·\00a0"; }.installment-summary.wrapped span + span { flex-basis:100%; }.installment-summary.wrapped span + span::before { content:""; }
.collector-view .cards,.collector-view .tabs .tab:not([data-tab="sales"]),.collector-view #open-renegotiation,.collector-view #create-sale,.collector-view #remove-from-collection,.collector-view #rate-sale-detail,.collector-view #edit-cancelled-sale,.collector-view #cancel-sale-detail,.collector-view #delete-sale-detail,.collector-view #last-movement-status { display:none; }.collector-view main { padding-top:28px; }
.operator-limited #create-account,.operator-limited #create-plan,.operator-limited .edit-account,.operator-limited .delete-account,.operator-limited .edit-plan,.operator-limited .delete-plan { display:none; }
.collection-receipt-pending { background:#fff7ed; }
.collection-receipt-pending td { border-color:#fed7aa; }
.collection-receipt-pending td:nth-child(5) small { color:#9a3412; display:block; font-size:11px; margin-top:5px; white-space:nowrap; }
.receipt-status-confirmation { background:#ffedd5; color:#9a3412; white-space:nowrap; }
.collection-receipt-pending .row-actions { gap:6px; white-space:nowrap; }
.notification-receipt b { background:#b45309 !important; }

.contract-chat-button { align-items:center; background:#fff; border:1px solid #cbd5e1; color:#64748b; display:inline-flex; height:34px; justify-content:center; min-width:38px; padding:6px 9px; position:relative; }
.contract-chat-button svg { fill:none; height:19px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:19px; }
.contract-chat-button.no-messages:hover { background:#f8fafc; border-color:#94a3b8; color:#334155; }
.contract-chat-button.has-messages { background:#2457d6; border-color:#2457d6; color:#fff; }
.contract-chat-button.has-messages:hover { background:#1d46aa; }
.contract-chat-button span { align-items:center; background:#fff; border:2px solid #2457d6; border-radius:999px; color:#2457d6; display:flex; font-size:9px; font-weight:800; height:18px; justify-content:center; min-width:18px; padding:0 3px; position:absolute; right:-7px; top:-7px; }
#conversation-sale-detail { display:inline-flex; }
.conversation-backdrop { background:#17202a45; inset:0; position:fixed; z-index:39; }
.conversation-backdrop[hidden] { display:none; }
.conversation-panel { background:#f8fafc; border-left:1px solid #dbe1e8; bottom:0; box-shadow:-18px 0 48px #17202a2b; display:grid; grid-template-rows:auto 1fr auto; max-width:100%; position:fixed; right:0; top:0; transform:translateX(105%); transition:transform .2s ease; width:430px; z-index:40; }
.conversation-panel.open { transform:translateX(0); }
.conversation-panel[data-channel-tone="0"] { background:#f8fafc; }
.conversation-panel[data-channel-tone="1"] { background:#f5f3ff; }
.conversation-panel[data-channel-tone="2"] { background:#f0fdf4; }
.conversation-panel[data-channel-tone="3"] { background:#fff7ed; }
.conversation-panel[data-channel-tone="4"] { background:#f0f9ff; }
.conversation-header { align-items:flex-start; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:20px; }
.conversation-header h2 { font-size:20px; margin:2px 0; }
.conversation-header p { color:var(--muted); margin:0; }
.conversation-messages { display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:20px 16px; }
.conversation-loading { color:var(--muted); margin:auto; }
.conversation-empty { align-items:center; color:var(--muted); display:flex; flex-direction:column; margin:auto; max-width:250px; text-align:center; }
.conversation-empty svg { fill:none; height:42px; margin-bottom:12px; stroke:#94a3b8; stroke-width:1.4; width:42px; }
.conversation-empty strong { color:#475569; font-size:15px; }
.conversation-empty p { margin:5px 0 0; }
.chat-message { display:flex; width:100%; }
.chat-message.own { justify-content:flex-end; }
.chat-message.other { justify-content:flex-start; }
.chat-bubble { background:#fff; border:1px solid #e2e8f0; border-radius:5px 16px 16px 16px; box-shadow:0 1px 2px #17202a0d; max-width:84%; padding:9px 12px 7px; }
.chat-message.own .chat-bubble { background:#2457d6; border-color:#2457d6; border-radius:16px 5px 16px 16px; color:#fff; }
.chat-author { color:#334155; font-size:11px; font-weight:800; margin-bottom:3px; }
.chat-author span { color:#64748b; font-weight:600; }
.chat-message.own .chat-author,.chat-message.own .chat-author span { color:#dbeafe; }
.chat-private-to { color:#64748b; font-size:10px; margin-bottom:4px; }
.chat-message.own .chat-private-to { color:#bfdbfe; }
.chat-attachments { display:grid; gap:6px; margin:3px 0 7px; }
.chat-image-attachment { background:#fff; border-radius:9px; display:block; overflow:hidden; }
.chat-image-attachment img { display:block; height:auto; max-height:280px; object-fit:contain; width:100%; }
.chat-file-attachment { align-items:center; background:#ffffffd9; border-radius:8px; color:#1d4ed8; display:flex; gap:7px; max-width:100%; padding:9px; text-decoration:none; }
.chat-file-attachment span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-viewer { background:#111827; border-radius:0; height:100vh; max-height:100vh; max-width:none; padding:0; width:100vw; }
.attachment-viewer::backdrop { background:#111827; }
.attachment-viewer header { align-items:center; background:#fff; display:flex; height:58px; justify-content:space-between; padding:8px 18px; }
.attachment-viewer header > div { align-items:center; display:flex; gap:10px; }
.attachment-viewer header .secondary { text-decoration:none; }
.attachment-viewer-content { align-items:center; display:flex; height:calc(100vh - 58px); justify-content:center; overflow:auto; }
.attachment-viewer-content img { height:auto; max-height:100%; max-width:100%; object-fit:contain; }
.attachment-viewer-content iframe { background:#fff; border:0; height:100%; width:100%; }
.attachment-viewer-loading { color:#fff; }
.chat-message.other.channel-1 .chat-bubble { background:#f5f3ff; border-color:#ddd6fe; }
.chat-message.other.channel-2 .chat-bubble { background:#f0fdf4; border-color:#bbf7d0; }
.chat-message.other.channel-3 .chat-bubble { background:#fff7ed; border-color:#fed7aa; }
.chat-message.other.channel-4 .chat-bubble { background:#f0f9ff; border-color:#bae6fd; }
.chat-bubble p { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-meta { align-items:center; display:flex; gap:5px; justify-content:flex-end; margin-top:4px; }
.chat-bubble time { color:#94a3b8; display:block; font-size:10px; text-align:right; }
.chat-message.own .chat-bubble time { color:#bfdbfe; }
.chat-read-status { font-size:13px; font-weight:800; letter-spacing:-3px; padding-right:3px; }
.chat-read-status.sent { color:#bfdbfe; }
.chat-read-status.read { color:#67e8f9; }
.conversation-form { background:#fff; border-top:1px solid var(--line); padding:14px 16px 18px; }
.conversation-form label { color:#475569; display:block; font-size:12px; font-weight:700; margin-bottom:6px; }
.conversation-form label span { color:#64748b; font-weight:500; }
.conversation-recipient { align-items:center; background:#172554; border-radius:10px; color:#fff; display:grid; grid-template-columns:auto 1fr; margin-bottom:11px; padding:9px 11px; }
.conversation-recipient[hidden] { display:none; }
.conversation-recipient span { color:#bfdbfe; font-size:10px; grid-column:1/-1; text-transform:uppercase; }
.conversation-recipient strong { font-size:13px; }
.conversation-recipient small { color:#dbeafe; justify-self:end; }
.conversation-form textarea { border:1px solid #cbd5e1; border-radius:10px; font:inherit; min-height:74px; padding:10px 12px; resize:vertical; width:100%; }
.conversation-form textarea:focus { border-color:#2457d6; box-shadow:0 0 0 3px #dbeafe; outline:0; }
.conversation-compose-row { align-items:center; display:flex; gap:10px; justify-content:space-between; margin-top:9px; }
.conversation-compose-row > div { align-items:center; display:flex; flex-wrap:wrap; gap:8px; }
.attachment-button { background:#eef2ff; color:#2345a1; padding:8px 10px; }
.conversation-attachments { display:flex; gap:7px; margin-top:8px; overflow-x:auto; padding:2px; }
.conversation-attachments[hidden] { display:none; }
.pending-attachment { align-items:center; background:#fff; border:1px solid #cbd5e1; border-radius:9px; display:grid; flex:0 0 112px; grid-template-columns:1fr auto; overflow:hidden; position:relative; }
.pending-attachment img,.pending-attachment > span { grid-column:1/-1; height:68px; object-fit:cover; width:100%; }
.pending-attachment > span { align-items:center; display:flex; font-size:30px; justify-content:center; }
.pending-attachment strong { font-size:10px; overflow:hidden; padding:6px; text-overflow:ellipsis; white-space:nowrap; }
.pending-attachment button { background:#17202acc; border-radius:999px; color:#fff; font-size:16px; height:23px; line-height:1; padding:0; position:absolute; right:4px; top:4px; width:23px; }
.conversation-error { color:#b91c1c; font-size:12px; }
.mention-suggestions { background:#fff; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 10px 28px #17202a1f; display:grid; margin-top:6px; max-height:230px; overflow:auto; padding:5px; }
.mention-suggestions[hidden] { display:none; }
.mention-suggestions button { background:transparent; display:grid; padding:8px 9px; text-align:left; }
.mention-suggestions button:hover,.mention-suggestions button:focus { background:#eef2ff; outline:0; }
.mention-suggestions strong { color:#334155; font-size:13px; }
.mention-suggestions span { color:#64748b; font-size:11px; }
@media (max-width:600px) { .conversation-panel { width:100%; } }