/* V20.199jj — Julio: "ponela gris como Front, la pusiste dark". The blue/indigo band belongs ONLY to Outlook (.outlook-topbar; this strip is hidden there via body.hw-outlook-titlebar). In Classic/Premium this is the ONLY title bar — make it a Front-style light GRAY with DARK controls so they stay visible (the #27272a of V20.199ji read as almost-black; the original var(--bg-primary) went pure WHITE in light → invisible controls = the "franja" bug). Theme-aware: light gray + dark controls in light theme; dark-gray + light controls in dark theme (overrides at the bottom). Never blue. */ .custom-titlebar[data-v-d3f4bd61] { height: 32px; background: #e8e9ec; display: flex; justify-content: space-between; align-items: center; -webkit-app-region: drag; user-select: none; flex-shrink: 0; } .titlebar-drag-region[data-v-d3f4bd61] { flex: 1; height: 100%; } .window-controls[data-v-d3f4bd61] { display: flex; -webkit-app-region: no-drag; height: 100%; } .control-btn[data-v-d3f4bd61] { width: 46px; height: 100%; border: none; background: transparent; color: #52525b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .control-btn[data-v-d3f4bd61]:hover { background: rgba(0, 0, 0, 0.07); color: #18181b; } .close-btn[data-v-d3f4bd61]:hover { background: #e81123; color: #ffffff; } /* Dark theme: a dark-GRAY bar with light controls (still never blue). The data-theme attribute lives on , an ancestor — scoped CSS still matches. */ [data-theme='dark'] .custom-titlebar[data-v-d3f4bd61] { background: #2a2a2e; } [data-theme='dark'] .control-btn[data-v-d3f4bd61] { color: rgba(255, 255, 255, 0.82); } [data-theme='dark'] .control-btn[data-v-d3f4bd61]:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; } /* V20.199jh — in the Outlook layout the app's indigo top bar (.outlook-topbar) becomes the OS title bar and hosts the min/max/close controls itself, so this separate strip would be a redundant DOUBLE title bar. InboxLayout toggles body.hw-outlook-titlebar while Outlook is active in Electron → hide this one. Classic/Premium (no body class) keep this title bar with its controls, so the window is always minimisable/maximisable/closeable in every layout. */ body.hw-outlook-titlebar .custom-titlebar[data-v-d3f4bd61] { display: none; } .ag-backdrop[data-v-e3a1e8b7] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; animation: ag-fade-e3a1e8b7 120ms ease-out; } @keyframes ag-fade-e3a1e8b7 { from { opacity: 0; } to { opacity: 1; } } .ag-dialog[data-v-e3a1e8b7] { background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 10px; width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); animation: ag-pop-e3a1e8b7 140ms ease-out; overflow: hidden; } @keyframes ag-pop-e3a1e8b7 { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .ag-header[data-v-e3a1e8b7] { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border-secondary, #eeeef2); } .ag-header-icon[data-v-e3a1e8b7] { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(217, 119, 6, 0.10); color: #d97706; } .ag-header-title[data-v-e3a1e8b7] { flex: 1; min-width: 0; } .ag-header-title h3[data-v-e3a1e8b7] { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary, #3f3f46); } .ag-header-sub[data-v-e3a1e8b7] { margin: 3px 0 0; font-size: 12px; color: var(--text-tertiary, #71717a); } .ag-close[data-v-e3a1e8b7] { background: transparent; border: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary, #71717a); border-radius: 4px; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .ag-close[data-v-e3a1e8b7]:hover { background: var(--bg-hover, #f0f1f3); color: var(--text-primary, #3f3f46); } .ag-body[data-v-e3a1e8b7] { flex: 1; overflow-y: auto; padding: 12px 14px; } .ag-list[data-v-e3a1e8b7] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ag-item[data-v-e3a1e8b7] { padding: 10px 12px; border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.04); border-radius: 6px; } .ag-item-subject[data-v-e3a1e8b7] { font-size: 13px; font-weight: 600; color: var(--text-primary, #3f3f46); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-reasons[data-v-e3a1e8b7] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .ag-reasons li[data-v-e3a1e8b7] { font-size: 12px; line-height: 1.4; color: var(--text-secondary, #52525b); position: relative; padding-left: 12px; } .ag-reasons li[data-v-e3a1e8b7]::before { content: '·'; position: absolute; left: 4px; color: #d97706; font-weight: 700; } /* V20.76 — AI reason line gets a distinct indigo accent + slightly bolder color so the user sees the AI verdict stand out among the heuristic reasons. */ .ag-reasons li.is-ai-line[data-v-e3a1e8b7] { color: #4338ca; font-weight: 500; } .ag-reasons li.is-ai-line[data-v-e3a1e8b7]::before { content: '✦'; color: #6366f1; font-size: 11px; } /* AI badge inline with the subject. */ .ag-ai-badge[data-v-e3a1e8b7] { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; vertical-align: middle; } .ag-ai-badge.is-safe[data-v-e3a1e8b7] { color: #047857; background: rgba(16, 185, 129, 0.12); } .ag-ai-badge.is-risky[data-v-e3a1e8b7] { color: #4338ca; background: rgba(99, 102, 241, 0.12); } .ag-ai-badge svg[data-v-e3a1e8b7] { flex: 0 0 auto; } .ag-footer[data-v-e3a1e8b7] { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-secondary, #eeeef2); background: var(--bg-primary, #fafafc); } .ag-footer-spacer[data-v-e3a1e8b7] { flex: 1; } .ag-btn[data-v-e3a1e8b7] { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-primary, #3f3f46); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .ag-btn-cancel[data-v-e3a1e8b7]:hover { background: var(--bg-hover, #f0f1f3); } .ag-btn-snooze[data-v-e3a1e8b7] { border-color: rgba(79, 70, 229, 0.30); color: var(--accent-primary, #4f46e5); } .ag-btn-snooze[data-v-e3a1e8b7]:hover { background: rgba(79, 70, 229, 0.06); } .ag-btn-archive[data-v-e3a1e8b7] { background: #d97706; border-color: #d97706; color: #fff; } .ag-btn-archive[data-v-e3a1e8b7]:hover { background: #b45309; border-color: #b45309; } [data-theme="dark"] .ag-dialog[data-v-e3a1e8b7] { background: var(--surface-raised, #222); border-color: var(--border-primary, #2e2e2e); } [data-theme="dark"] .ag-footer[data-v-e3a1e8b7] { background: var(--bg-primary, #1a1a1a); } [data-theme="dark"] .ag-item[data-v-e3a1e8b7] { background: rgba(217, 119, 6, 0.08); } .reminders-window[data-v-5b29f310] { position: fixed; bottom: 16px; right: 16px; z-index: 10001; /* above task toasts (10000) */ width: 380px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; background: var(--surface-raised, #ffffff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 14px; box-shadow: 0 18px 48px -12px rgba(22, 20, 43, 0.32), 0 4px 12px rgba(22, 20, 43, 0.08); overflow: hidden; } .rw-header[data-v-5b29f310] { display: flex; align-items: center; gap: 8px; padding: 11px 14px; } /* Outlook layout — the bold indigo bar (original look). */ .rw-outlook .rw-header[data-v-5b29f310] { background: var(--accent-primary, #4f46e5); color: #fff; } /* Classic / Premium — calm, theme-aware header (subtle accent tint + theme text). */ .rw-themed .rw-header[data-v-5b29f310] { background: var(--bg-selected, rgba(79, 70, 229, 0.06)); color: var(--text-primary, #3f3f46); border-bottom: 1px solid var(--border-primary, #e8e8ec); } .rw-themed .rw-title[data-v-5b29f310] svg { color: var(--accent-primary, #4f46e5); } .rw-themed .rw-count[data-v-5b29f310] { background: var(--accent-primary, #4f46e5); color: #fff; } .rw-title[data-v-5b29f310] { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .rw-count[data-v-5b29f310] { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.22); font-size: 11.5px; font-weight: 700; } .rw-list[data-v-5b29f310] { max-height: 320px; overflow-y: auto; padding: 4px 0; } .rw-item[data-v-5b29f310] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; } .rw-item + .rw-item[data-v-5b29f310] { border-top: 1px solid var(--border-secondary, #eeeef2); } .rw-ic[data-v-5b29f310] { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; margin-top: 1px; color: var(--accent-primary, #4f46e5); background: color-mix(in srgb, var(--accent-primary, #4f46e5) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary, #4f46e5) 20%, transparent); } .rw-ic.event[data-v-5b29f310] { color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 22%, transparent); } .rw-body[data-v-5b29f310] { flex: 1; min-width: 0; } .rw-item-title[data-v-5b29f310] { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #3f3f46); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-item-meta[data-v-5b29f310] { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary, #71717a); min-width: 0; } .rw-item-sub[data-v-5b29f310] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-when[data-v-5b29f310] { flex: none; font-weight: 600; color: var(--text-secondary, #52525b); } .rw-when.overdue[data-v-5b29f310] { color: #dc2626; } .rw-item-actions[data-v-5b29f310] { flex: none; display: flex; align-items: center; gap: 4px; position: relative; } .rw-open[data-v-5b29f310] { padding: 4px 10px; background: var(--accent-primary, #4f46e5); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.13s; } .rw-open[data-v-5b29f310]:hover { background: var(--accent-primary-hover, #4338ca); } /* V20.199ih — Teams meeting actions */ .rw-join[data-v-5b29f310] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: var(--accent-primary, #4f46e5); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.13s; } .rw-join[data-v-5b29f310]:hover { background: var(--accent-primary-hover, #4338ca); } .rw-icon-btn[data-v-5b29f310] { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: var(--bg-primary, #fafafc); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 7px; color: var(--text-tertiary, #71717a); cursor: pointer; transition: border-color 0.13s, color 0.13s; } .rw-icon-btn[data-v-5b29f310]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); } .rw-snooze-wrap[data-v-5b29f310] { position: relative; } .rw-snooze-btn[data-v-5b29f310] { display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 6px; background: var(--bg-primary, #fafafc); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 7px; color: var(--text-tertiary, #71717a); cursor: pointer; transition: border-color 0.13s, color 0.13s; } .rw-snooze-btn[data-v-5b29f310]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); } .rw-snooze-menu[data-v-5b29f310] { position: fixed; /* teleported to ; bottom/right set inline from the button rect */ z-index: 10010; /* above the reminders window (10001) */ min-width: 150px; padding: 5px; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(22, 20, 43, 0.28); } .rw-snooze-head[data-v-5b29f310] { padding: 5px 9px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-quaternary, #a1a1aa); } .rw-snooze-opt[data-v-5b29f310] { display: block; width: 100%; text-align: left; padding: 7px 9px; background: transparent; border: none; border-radius: 7px; font-size: 12.5px; color: var(--text-secondary, #52525b); cursor: pointer; } .rw-snooze-opt[data-v-5b29f310]:hover { background: var(--bg-selected, rgba(79, 70, 229, 0.08)); color: var(--accent-primary, #4f46e5); } .rw-dismiss[data-v-5b29f310] { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: transparent; border: none; border-radius: 7px; color: var(--text-quaternary, #a1a1aa); cursor: pointer; transition: background 0.13s, color 0.13s; } .rw-dismiss[data-v-5b29f310]:hover { background: var(--bg-hover, #f0f1f3); color: var(--text-secondary, #52525b); } .rw-footer[data-v-5b29f310] { display: flex; justify-content: flex-end; padding: 9px 14px; border-top: 1px solid var(--border-secondary, #eeeef2); background: var(--bg-primary, #fafafc); } .rw-dismiss-all[data-v-5b29f310] { padding: 6px 13px; background: transparent; border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #52525b); cursor: pointer; transition: border-color 0.13s, color 0.13s, background 0.13s; } .rw-dismiss-all[data-v-5b29f310]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); background: var(--bg-selected, rgba(79, 70, 229, 0.06)); } .rw-pop-enter-active[data-v-5b29f310], .rw-pop-leave-active[data-v-5b29f310] { transition: opacity 0.2s ease, transform 0.2s ease; } .rw-pop-enter-from[data-v-5b29f310], .rw-pop-leave-to[data-v-5b29f310] { opacity: 0; transform: translateY(12px) scale(0.98); } @media (prefers-reduced-motion: reduce) { .rw-pop-enter-active[data-v-5b29f310], .rw-pop-leave-active[data-v-5b29f310] { transition: none; } } .app-container[data-v-7c78541d] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .app-content[data-v-7c78541d] { flex: 1; overflow: hidden; } /* Inbox Alerts */ .inbox-alerts-container[data-v-7c78541d] { position: fixed; top: 40px; /* Below titlebar */ right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 420px; } .inbox-alert[data-v-7c78541d] { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #2d1f1f 0%, #1a1a1a 100%); border: 1px solid rgba(239, 68, 68, 0.4); border-left: 4px solid #ef4444; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.1); animation: slideIn-7c78541d 0.3s ease-out; } @keyframes slideIn-7c78541d { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .alert-icon[data-v-7c78541d] { flex-shrink: 0; color: #f87171; margin-top: 2px; } .alert-content[data-v-7c78541d] { flex: 1; min-width: 0; } .alert-title[data-v-7c78541d] { font-size: 13px; font-weight: 600; color: #f87171; margin-bottom: 4px; } .alert-message[data-v-7c78541d] { font-size: 12px; color: #d1d5db; line-height: 1.4; } .alert-message strong[data-v-7c78541d] { color: #fff; } .alert-reason[data-v-7c78541d] { display: block; margin-top: 4px; color: #9ca3af; font-size: 11px; } .alert-actions[data-v-7c78541d] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .btn-reconnect[data-v-7c78541d] { padding: 6px 14px; background: #ef4444; color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .btn-reconnect[data-v-7c78541d]:hover { background: #dc2626; } .btn-dismiss[data-v-7c78541d] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #9ca3af; cursor: pointer; transition: all 0.2s; } .btn-dismiss[data-v-7c78541d]:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* Rate Limit Notifications (less severe, amber/yellow) */ .rate-limit-container[data-v-7c78541d] { position: fixed; bottom: 16px; right: 16px; z-index: 9998; display: flex; flex-direction: column; gap: 8px; max-width: 380px; } .rate-limit-notification[data-v-7c78541d] { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #2d2a1f 0%, #1a1a1a 100%); border: 1px solid rgba(251, 191, 36, 0.3); border-left: 3px solid #fbbf24; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); animation: slideInBottom-7c78541d 0.3s ease-out; } @keyframes slideInBottom-7c78541d { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rate-limit-icon[data-v-7c78541d] { flex-shrink: 0; color: #fbbf24; margin-top: 1px; } .rate-limit-content[data-v-7c78541d] { flex: 1; min-width: 0; } .rate-limit-title[data-v-7c78541d] { font-size: 12px; font-weight: 600; color: #fbbf24; margin-bottom: 3px; } .rate-limit-message[data-v-7c78541d] { font-size: 11px; color: #9ca3af; line-height: 1.4; } .rate-limit-message strong[data-v-7c78541d] { color: #d1d5db; } .btn-dismiss-rate[data-v-7c78541d] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: none; border-radius: 4px; color: #6b7280; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .btn-dismiss-rate[data-v-7c78541d]:hover { background: rgba(255, 255, 255, 0.1); color: #9ca3af; } /* V20.199ey — Task reminder toasts (light, compact card) */ .task-reminder-container[data-v-7c78541d] { position: fixed; bottom: 16px; right: 16px; z-index: 10000; /* above rate-limit (9998) + inbox alerts (9999) */ display: flex; flex-direction: column; gap: 8px; max-width: 340px; } .task-reminder-toast[data-v-7c78541d] { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--surface-raised, #ffffff); border: 1px solid var(--border-primary, #e8e8ec); border-left: 3px solid var(--accent-primary, #4f46e5); border-radius: 10px; box-shadow: 0 6px 24px -8px rgba(22, 20, 43, 0.22), 0 2px 6px rgba(22, 20, 43, 0.06); animation: trSlideIn-7c78541d 0.24s ease-out; } @keyframes trSlideIn-7c78541d { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tr-icon[data-v-7c78541d] { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-selected, rgba(79, 70, 229, 0.08)); color: var(--accent-primary, #4f46e5); } .tr-content[data-v-7c78541d] { flex: 1; min-width: 0; } .tr-title[data-v-7c78541d] { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-tertiary, #71717a); margin-bottom: 1px; } .tr-task[data-v-7c78541d] { font-size: 13px; font-weight: 500; color: var(--text-primary, #3f3f46); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-open[data-v-7c78541d] { flex: none; padding: 5px 11px; background: var(--accent-primary, #4f46e5); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.14s; } .tr-open[data-v-7c78541d]:hover { background: var(--accent-primary-hover, #4338ca); } .tr-dismiss[data-v-7c78541d] { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: transparent; border: none; border-radius: 6px; color: var(--text-quaternary, #a1a1aa); cursor: pointer; transition: all 0.14s; } .tr-dismiss[data-v-7c78541d]:hover { background: var(--bg-hover, #f0f1f3); color: var(--text-secondary, #52525b); } @media (prefers-reduced-motion: reduce) { .task-reminder-toast[data-v-7c78541d] { animation: none; } .tr-open[data-v-7c78541d], .tr-dismiss[data-v-7c78541d] { transition: none; } } /* Pre-auth screen — ALWAYS dark, independent of the app's theme. */ .login-page[data-v-bc0b2277] { position: fixed; inset: 0; z-index: 9999; display: grid; /* capped + centered columns so an ultra-wide monitor gets symmetric margins instead of a huge dead gap between globe and card */ grid-template-columns: minmax(0, 720px) minmax(0, 460px); justify-content: center; align-content: stretch; column-gap: clamp(24px, 5vw, 96px); background: #06051a; overflow: hidden; font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; color: #f5f5fb; } /* ambient radial glows — slow aurora drift */ .glow[data-v-bc0b2277] { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .glow-a[data-v-bc0b2277] { top: -10%; left: 14%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(99,80,255,0.30), transparent 65%); animation: auroraA-bc0b2277 22s ease-in-out infinite; } .glow-b[data-v-bc0b2277] { bottom: -22%; right: 8%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(167,139,250,0.20), transparent 65%); animation: auroraB-bc0b2277 26s ease-in-out infinite; } @keyframes auroraA-bc0b2277 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.12); } } @keyframes auroraB-bc0b2277 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-30px) scale(1.1); } } /* cursor spotlight — soft light following the pointer over the dark canvas */ .spotlight[data-v-bc0b2277] { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(139,135,255,0.10), rgba(139,135,255,0.04) 30%, transparent 55%); transition: background 0.12s ease-out; } /* filmic grain — fractal-noise SVG, no external asset */ .grain[data-v-bc0b2277] { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; animation: grainShift-bc0b2277 0.6s steps(2) infinite; } @keyframes grainShift-bc0b2277 { 0% { transform: translate(0,0); } 50% { transform: translate(-4px,3px); } 100% { transform: translate(3px,-2px); } } /* ── entrance choreography ─────────────────────────────────────── */ .reveal[data-v-bc0b2277] { opacity: 0; transform: translateY(14px); animation: revUp-bc0b2277 0.85s cubic-bezier(.22,.61,.36,1) forwards; } .r-0[data-v-bc0b2277] { animation-delay: 0.08s; } .r-1[data-v-bc0b2277] { animation-delay: 0.22s; } .r-2[data-v-bc0b2277] { animation-delay: 0.34s; } .r-3[data-v-bc0b2277] { animation-delay: 0.46s; } @keyframes revUp-bc0b2277 { to { opacity: 1; transform: translateY(0); } } /* ░░ LEFT — globe backdrop + headline cluster ░░ */ .left[data-v-bc0b2277] { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* drifting reference labels canvas — full panel, behind everything */ .refs-canvas[data-v-bc0b2277] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero[data-v-bc0b2277] { position: relative; z-index: 2; width: 100%; max-width: 620px; height: 100%; padding: 40px 8px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; /* anchor the whole cluster vertically centered */ /* bias the cluster up so the GLOBE's center (not the cluster's) lines up with the login card across the gap — the copy block sits above it */ transform: translateY(-44px); } .hero-content[data-v-bc0b2277] { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; } /* ░ landing v3 hero-globe block — globe in its own square box, the three glass cards absolutely positioned OVER it (landing positions verbatim) ░ */ .hero-globe[data-v-bc0b2277] { position: relative; /* sized to whatever height remains under the copy block so logo + badge + headline + globe ALWAYS fit the viewport as one centered composition */ width: min(88%, calc(100vh - 440px)); min-width: 300px; max-width: 540px; aspect-ratio: 1; margin: 20px auto 0; /* entrance: scale-in + fade once, after the headline cascade */ animation: globeIn-bc0b2277 1.3s cubic-bezier(.22,.61,.36,1) 0.4s both; } @keyframes globeIn-bc0b2277 { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .globe-canvas[data-v-bc0b2277] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .globe-fallback[data-v-bc0b2277] { object-fit: contain; opacity: 0.9; } /* badge — landing v3 verbatim (inline-flex pill + pulsing dot) */ .badge[data-v-bc0b2277] { display: inline-flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 0 0 28px; font-size: 11px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; line-height: 1.6; color: #a5a1ff; border: 1px solid rgba(139, 135, 255, .25); background: rgba(99, 102, 241, .08); padding: 7px 15px; border-radius: 99px; } .badge-dot[data-v-bc0b2277] { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #8b87ff; box-shadow: 0 0 8px #8b87ff; animation: pulse-dot-bc0b2277 2.4s ease-in-out infinite; } @keyframes pulse-dot-bc0b2277 { 50% { opacity: .4; } } .headline[data-v-bc0b2277] { font-size: clamp(34px, 3.2vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0; color: #ffffff; text-shadow: 0 2px 30px rgba(6,5,26,0.9), 0 1px 3px rgba(6,5,26,0.85); } /* each line is its own block so the cascade reveal can stagger them */ .hl-line[data-v-bc0b2277] { display: block; white-space: nowrap; } .grad[data-v-bc0b2277] { /* electric blue → violet → fuchsia with an animated shimmer sweep. text-shadow OFF here — transparent fill would let the parent shadow bleed through as muddy grey. */ background: linear-gradient(100deg, #7dd3fc 0%, #a78bfa 30%, #e879f9 50%, #a78bfa 70%, #7dd3fc 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.5)); animation: gradShimmer-bc0b2277 7s linear infinite; } @keyframes gradShimmer-bc0b2277 { to { background-position: 220% center; } } /* floating glass shipment cards — landing v3 styles verbatim */ .gcard[data-v-bc0b2277] { position: absolute; z-index: 4; min-width: 215px; padding: 13px 16px; border-radius: 14px; background: rgba(14, 13, 38, .62); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 44px rgba(0, 0, 5, .45), inset 0 1px 0 rgba(255, 255, 255, .06); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .gcard.on[data-v-bc0b2277] { opacity: 1; transform: none; } .gc-1[data-v-bc0b2277] { top: 9%; right: 4%; } .gc-2[data-v-bc0b2277] { bottom: 16%; left: 0; } .gc-3[data-v-bc0b2277] { top: 38%; right: -2%; } .gcard-top[data-v-bc0b2277] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; } .gc-ref[data-v-bc0b2277] { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; font-weight: 600; color: #f5f5fb; letter-spacing: .02em; } .gc-pill[data-v-bc0b2277] { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; } .gc-pill.ok[data-v-bc0b2277] { color: #86efac; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .3); } .gc-pill.warn[data-v-bc0b2277] { color: #fcd34d; background: rgba(245, 158, 11, .13); border: 1px solid rgba(245, 158, 11, .32); } .gc-pill.rel[data-v-bc0b2277] { color: #a5b4fc; background: rgba(99, 102, 241, .15); border: 1px solid rgba(139, 135, 255, .35); } .gcard-sub[data-v-bc0b2277] { font-size: 12.5px; color: #c3c6dd; } .gcard-eta[data-v-bc0b2277] { font-size: 12px; color: #8d91ad; margin-top: 2px; } .gcard-eta b[data-v-bc0b2277] { color: #f5f5fb; font-weight: 600; } /* ░░ RIGHT — login card ░░ */ .right[data-v-bc0b2277] { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 32px 0; } .card[data-v-bc0b2277] { position: relative; width: 100%; max-width: 400px; background: rgba(14,13,38,0.62); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 40px 38px 34px; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 70px rgba(0,0,0,0.45); animation: fadeUp-bc0b2277 0.7s 0.5s both; transition: transform .25s ease, box-shadow .25s ease; } .card[data-v-bc0b2277]:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 90px rgba(0,0,0,0.5), 0 0 60px rgba(139,135,255,0.12); } /* living gradient-halo border (Houdini @property → animated; static fallback) */ @property --halo { syntax: ''; initial-value: 0deg; inherits: false; } .card[data-v-bc0b2277]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--halo), transparent 0deg, rgba(139,135,255,0.55) 40deg, rgba(125,211,252,0.45) 75deg, transparent 135deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: haloSpin-bc0b2277 9s linear infinite; pointer-events: none; } @keyframes haloSpin-bc0b2277 { to { --halo: 360deg; } } /* brand lockup — logo mark + "Hubswire" wordmark, centered */ .card-brand[data-v-bc0b2277] { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 22px; } .card-logo[data-v-bc0b2277] { display: block; height: 38px; width: auto; object-fit: contain; } .card-wordmark[data-v-bc0b2277] { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #f5f5fb; line-height: 1; } .card-title[data-v-bc0b2277] { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: #f5f5fb; } .card-sub[data-v-bc0b2277] { font-size: 14px; line-height: 1.5; color: #c3c6dd; margin: 0 0 28px; } .field[data-v-bc0b2277] { position: relative; margin-bottom: 15px; text-align: left; } .field label[data-v-bc0b2277] { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #c3c6dd; margin-bottom: 7px; } .field input[data-v-bc0b2277] { width: 100%; height: 46px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; padding: 0 14px; font-family: inherit; font-size: 14px; color: #f5f5fb; outline: none; transition: border-color .18s, box-shadow .18s; box-sizing: border-box; } .field input[data-v-bc0b2277]::placeholder { color: rgba(195,198,221,0.4); } .field input[data-v-bc0b2277]:focus { border-color: #8b87ff; box-shadow: 0 0 0 4px rgba(139,135,255,0.15); } .error-msg[data-v-bc0b2277] { padding: 10px 14px; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.28); border-radius: 9px; font-size: 13px; color: #fca5a5; margin-bottom: 16px; } .btn-primary[data-v-bc0b2277] { width: 100%; height: 47px; margin-top: 8px; background: linear-gradient(180deg, #6d68ff, #5b54f0); border: none; border-radius: 11px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(91,84,240,0.4); transition: transform .12s, box-shadow .18s; } .btn-primary[data-v-bc0b2277]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(91,84,240,0.5); } .btn-primary[data-v-bc0b2277]:disabled { opacity: 0.6; cursor: not-allowed; } .btn-o365[data-v-bc0b2277] { position: relative; overflow: hidden; width: 100%; height: 50px; background: linear-gradient(180deg, #6d68ff, #5b54f0); border: none; border-radius: 12px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 11px; box-shadow: 0 10px 26px rgba(91,84,240,0.42), 0 1px 0 rgba(255,255,255,0.12) inset; transition: transform .12s, box-shadow .18s, filter .18s; } /* diagonal shine that sweeps across on hover */ .btn-o365[data-v-bc0b2277]::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left 0.6s ease; } .btn-o365[data-v-bc0b2277]:hover::after { left: 160%; } .btn-o365[data-v-bc0b2277] > * { position: relative; z-index: 1; } .btn-o365[data-v-bc0b2277]:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 16px 36px rgba(91,84,240,0.58); } .btn-o365[data-v-bc0b2277]:active { transform: translateY(0); } .ms-grid[data-v-bc0b2277] { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 17px; height: 17px; flex: none; } .ms-grid i[data-v-bc0b2277] { border-radius: 1px; } .form-footer[data-v-bc0b2277] { text-align: center; margin-top: 22px; font-size: 13px; color: #c3c6dd; } .form-footer a[data-v-bc0b2277] { color: #a5a1ff; font-weight: 500; text-decoration: none; cursor: pointer; } .form-footer a[data-v-bc0b2277]:hover { color: #c4bfff; text-decoration: underline; } @keyframes fadeUp-bc0b2277 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ░░ RESPONSIVE — single column < 1024px ░░ */ @media (max-width: 1023px) { .login-page[data-v-bc0b2277] { grid-template-columns: 1fr; column-gap: 0; } /* hero (copy + globe block) becomes a dimmed backdrop behind everything */ .left[data-v-bc0b2277] { position: absolute; inset: 0; z-index: 0; align-items: flex-start; } .hero[data-v-bc0b2277] { max-width: 600px; padding-top: 40px; } .hero-globe[data-v-bc0b2277] { opacity: 0.55; margin-top: 0; width: min(92%, 48vh); } .gcard[data-v-bc0b2277] { display: none; } .hero-content[data-v-bc0b2277] { align-items: center; text-align: center; padding: 0 24px; width: 100%; } /* narrow screens: let the
s break the 3 lines but allow wrapping + smaller size so no line ever overflows the viewport */ .headline[data-v-bc0b2277] { white-space: normal; font-size: clamp(28px, 7vw, 40px); } /* overlay so the card never sits on the globe without AA contrast */ .right[data-v-bc0b2277] { z-index: 5; align-items: flex-end; padding: 24px 18px 36px; } .right[data-v-bc0b2277]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,5,26,0) 0%, rgba(6,5,26,0.75) 42%, #06051a 100%); } .card[data-v-bc0b2277] { background: rgba(14,13,38,0.82); } } @media (max-width: 560px) { .hero-content[data-v-bc0b2277] { padding-top: 20px; } .badge[data-v-bc0b2277] { font-size: 9.5px; } .card[data-v-bc0b2277] { padding: 32px 26px 28px; } } /* reduced motion — static everything (the globe goes static via createGlobe's reducedMotion flag; gcards show all-on without cycling) */ @media (prefers-reduced-motion: reduce) { .card[data-v-bc0b2277], .gcard[data-v-bc0b2277], .badge-dot[data-v-bc0b2277], .glow-a[data-v-bc0b2277], .glow-b[data-v-bc0b2277], .grain[data-v-bc0b2277], .grad[data-v-bc0b2277], .hero-globe[data-v-bc0b2277], .reveal[data-v-bc0b2277], .card[data-v-bc0b2277]::before { animation: none !important; } .reveal[data-v-bc0b2277] { opacity: 1; transform: none; } .spotlight[data-v-bc0b2277] { display: none; } .btn-o365[data-v-bc0b2277]::after { display: none; } .card[data-v-bc0b2277]:hover { transform: none; } } .email-content-wrapper[data-v-8f7e6754] { width: 100%; } .email-iframe[data-v-8f7e6754] { width: 100%; border: none; display: block; background: transparent; min-height: 50px; border-radius: 8px; } .quoted-iframe[data-v-8f7e6754] { margin-top: 8px; background: var(--bg-hover); border-radius: 0 0 8px 8px; } /* Action buttons row */ .email-actions-row[data-v-8f7e6754] { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 8px; } .quick-action-buttons[data-v-8f7e6754] { display: flex; gap: 8px; } .quick-action-btn[data-v-8f7e6754] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; border: 1px solid var(--border-primary); border-radius: 20px; color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .quick-action-btn[data-v-8f7e6754]:hover { background: var(--bg-selected); border-color: var(--accent-primary); color: var(--accent-primary); } .quick-action-btn[data-v-8f7e6754]:active { transform: scale(0.98); } .quick-action-icon[data-v-8f7e6754] { width: 16px; height: 16px; stroke-width: 2; } .quoted-toggle-btn[data-v-8f7e6754] { display: flex; align-items: center; justify-content: center; width: 36px; height: 28px; margin: 0; padding: 0; background: var(--bg-hover); border: 1px solid var(--border-primary); border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .quoted-toggle-btn[data-v-8f7e6754]:hover { background: var(--bg-active); border-color: var(--border-hover); } .quoted-toggle-btn .dots[data-v-8f7e6754] { color: var(--text-tertiary); font-size: 12px; letter-spacing: 1px; line-height: 1; } .dropdown-overlay[data-v-8e103c5b] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: transparent; } .dropdown-menu[data-v-8e103c5b] { position: fixed; background: var(--surface-overlay, #fff); border: 1px solid var(--border-secondary); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); width: 220px; max-height: 280px; display: flex; flex-direction: column; z-index: 1000; } .search-box[data-v-8e103c5b] { position: relative; padding: 8px 10px; border-bottom: 1px solid var(--border-secondary); } .search-icon[data-v-8e103c5b] { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-quaternary); pointer-events: none; } .search-input[data-v-8e103c5b] { width: 100%; background: var(--bg-hover, #f4f4f5); border: 1px solid transparent; border-radius: 6px; outline: none; font-size: 12px; color: var(--text-primary); padding: 6px 8px 6px 28px; transition: border-color 0.15s; } .search-input[data-v-8e103c5b]:focus { border-color: var(--accent-primary, #6366f1); background: var(--surface-overlay, #fff); } .search-input[data-v-8e103c5b]::placeholder { color: var(--text-quaternary); } .tag-list[data-v-8e103c5b] { flex: 1; overflow-y: auto; padding: 4px; } .tag-section[data-v-8e103c5b] { margin-bottom: 2px; } .section-header[data-v-8e103c5b] { padding: 6px 10px 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-quaternary); letter-spacing: 0.5px; } .tag-option[data-v-8e103c5b] { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: background-color 0.15s; } .tag-option[data-v-8e103c5b]:hover { background: var(--bg-hover); } .tag-option--selected[data-v-8e103c5b] { background: rgba(99, 102, 241, 0.08); } .tag-option--selected[data-v-8e103c5b]:hover { background: rgba(99, 102, 241, 0.14); } .tag-option--child[data-v-8e103c5b] { padding-left: 32px; } .tag-checkbox[data-v-8e103c5b] { display: none; } .checkbox-indicator[data-v-8e103c5b] { flex-shrink: 0; width: 15px; height: 15px; border: 1.5px solid var(--border-secondary); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .checkbox-indicator.checked[data-v-8e103c5b] { background: var(--accent-primary, #6366f1); border-color: var(--accent-primary, #6366f1); } .checkbox-indicator svg[data-v-8e103c5b] { width: 10px; height: 10px; color: white; } .tag-icon[data-v-8e103c5b] { flex-shrink: 0; width: 14px; height: 14px; } .tag-emoji[data-v-8e103c5b] { font-size: 14px; flex-shrink: 0; } .tag-name[data-v-8e103c5b] { flex: 1; font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-workspace[data-v-8e103c5b] { font-size: 10px; color: var(--text-quaternary); padding: 1px 5px; background: var(--bg-hover); border-radius: 3px; } .empty-state[data-v-8e103c5b] { padding: 16px 10px; text-align: center; color: var(--text-quaternary); font-size: 12px; } .tag-badge[data-v-d85af0f8] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--tag-color); white-space: nowrap; transition: all 0.15s ease; } .tag-badge--small[data-v-d85af0f8] { padding: 1px 6px; font-size: 11px; gap: 3px; } /* V20.199iv — compact variant for the email LIST (dense rows). Same color identity as the reading pane (tinted bg + same-color text/border from tag.color), just tighter geometry + a slightly rounder 6px corner. */ .tag-badge--compact[data-v-d85af0f8] { padding: 2px 8px; font-size: 11px; gap: 5px; border-radius: 6px; font-weight: 600; } .tag-badge--compact .tag-name[data-v-d85af0f8] { max-width: 100px; } .tag-badge--clickable[data-v-d85af0f8] { cursor: pointer; } .tag-badge--clickable[data-v-d85af0f8]:hover { background: var(--tag-border); } .tag-emoji[data-v-d85af0f8] { font-size: 1em; } .tag-name[data-v-d85af0f8] { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .tag-remove[data-v-d85af0f8] { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; margin-left: 2px; background: transparent; border: none; border-radius: 2px; color: var(--tag-color); cursor: pointer; opacity: 0.7; transition: opacity 0.15s, background 0.15s; } .tag-remove[data-v-d85af0f8]:hover { opacity: 1; background: var(--tag-border); } .tag-remove svg[data-v-d85af0f8] { width: 10px; height: 10px; } .tag-count[data-v-d85af0f8] { padding: 0 4px; margin-left: 2px; background: var(--tag-border); border-radius: 3px; font-size: 10px; font-weight: 600; } .lp-rt[data-v-7b434771] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 12px; border-radius: 8px; background: var(--bg-selected, rgba(79,70,229,0.05)); border: 1px solid rgba(79,70,229,0.18); } .lp-rt-icon[data-v-7b434771] { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(79,70,229,0.12); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-primary, #4f46e5); } .lp-rt-text[data-v-7b434771] { flex: 1; min-width: 0; } .lp-rt-title[data-v-7b434771] { font-size: 11px; font-weight: 600; color: var(--accent-primary, #4f46e5); letter-spacing: 0.2px; text-transform: uppercase; } .lp-rt-sub[data-v-7b434771] { font-size: 12px; color: var(--text-secondary, #52525b); } .lp-rt-btn[data-v-7b434771] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11px; font-weight: 500; border-radius: 5px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-secondary, #52525b); cursor: pointer; transition: background 100ms ease; } .lp-rt-btn[data-v-7b434771]:hover { background: var(--bg-hover, #f5f5f7); } .lp-rt-btn-primary[data-v-7b434771] { background: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); color: #fff; } .lp-rt-btn-primary[data-v-7b434771]:hover { opacity: 0.9; } .lp-rt-close[data-v-7b434771] { width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent; color: var(--text-tertiary, #71717a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .lp-rt-close[data-v-7b434771]:hover { background: var(--bg-hover, #f5f5f7); color: var(--text-primary, #3f3f46); } .lp-rt-fade-enter-active[data-v-7b434771], .lp-rt-fade-leave-active[data-v-7b434771] { transition: transform 220ms ease, opacity 220ms ease; } .lp-rt-fade-enter-from[data-v-7b434771], .lp-rt-fade-leave-to[data-v-7b434771] { transform: translateY(-6px); opacity: 0; } .risk-dot[data-v-1de0ae5d] { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; flex-shrink: 0; } .risk-dot-red[data-v-1de0ae5d] { background: #dc2626; } .risk-dot-amber[data-v-1de0ae5d] { background: #f59e0b; } .risk-dot-green[data-v-1de0ae5d] { background: #16a34a; } .sort-cols[data-v-97b23855] { display: flex; align-items: stretch; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-base, #ffffff); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02); flex-shrink: 0; user-select: none; } .sort-col[data-v-97b23855] { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 9px 10px; border: none; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary, #71717a); transition: color 0.12s ease, background 0.12s ease; white-space: nowrap; overflow: hidden; } .sort-col--from[data-v-97b23855] { flex: 1 1 auto; } .sort-col--received[data-v-97b23855] { flex: 0 0 auto; justify-content: flex-end; } .sort-col-label[data-v-97b23855] { overflow: hidden; text-overflow: ellipsis; } .sort-col[data-v-97b23855]:hover { color: var(--text-primary, #3f3f46); background: var(--bg-hover, #f0f1f3); } .sort-col[data-v-97b23855]:focus-visible { outline: 2px solid var(--accent-primary, #4f46e5); outline-offset: -2px; border-radius: 4px; } /* Active column: brand color + an underline indicator (Outlook-style). */ .sort-col.active[data-v-97b23855] { color: var(--accent-primary, #4f46e5); } .sort-col.active[data-v-97b23855]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent-primary, #4f46e5); } .sort-col.active.sort-col--received[data-v-97b23855]::after { left: auto; right: 8px; width: 56px; } /* Idle "sortable" glyph (double chevron) shown on inactive columns. */ .sort-col-idle[data-v-97b23855] { flex-shrink: 0; color: var(--text-quaternary, #a1a1aa); opacity: 0.55; transition: opacity 0.12s ease, color 0.12s ease; } .sort-col:hover .sort-col-idle[data-v-97b23855] { opacity: 0.9; color: var(--text-secondary, #52525b); } .sort-col-arrow[data-v-97b23855] { flex-shrink: 0; color: var(--accent-primary, #4f46e5); transition: transform 0.18s ease; } /* Chevron points up by default (asc / A→Z / oldest); rotate for desc. */ .sort-col-arrow.asc[data-v-97b23855] { transform: rotate(0deg); } .sort-col-arrow.desc[data-v-97b23855] { transform: rotate(180deg); } .ref-badge[data-v-2ddb63d1] { font-size: 10px; font-family: monospace; padding: 1px 5px; border-radius: 4px; border: 1px solid; white-space: nowrap; } .ref-CONTAINER[data-v-2ddb63d1] { color: #1d4ed8; background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.2); } .ref-MBL[data-v-2ddb63d1] { color: #4338ca; background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); } .ref-HBL[data-v-2ddb63d1] { color: #6d28d9; background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.2); } .ref-AWB[data-v-2ddb63d1] { color: #0369a1; background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.2); } .ref-CBP_ENTRY[data-v-2ddb63d1] { color: #b45309; background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); } .ref-PO[data-v-2ddb63d1] { color: #059669; background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.2); } .ref-REF[data-v-2ddb63d1] { color: #7c3aed; background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.2); } .ref-BOOKING[data-v-2ddb63d1] { color: #0891b2; background: rgba(8,145,178,0.06); border-color: rgba(8,145,178,0.2); } .ref-bar[data-v-9bcc359a] { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(99,102,241,0.03); border: 1px solid rgba(99,102,241,0.1); border-radius: 8px; margin: 4px 0; flex-shrink: 0; } .ref-bar-items[data-v-9bcc359a] { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; } .ref-more[data-v-9bcc359a] { font-size: 10px; color: #a1a1aa; flex-shrink: 0; padding: 0 2px; } .ref-bar-icon[data-v-9bcc359a] { color: #6366f1; flex-shrink: 0; display: flex; } .ref-bar-icon-purple[data-v-9bcc359a] { color: #7c3aed; } /* V20.199du — the value + per-ref status + warning share ONE pill (Julio: "warnings and last status in the same card as the CNTR"). The WRAP is the pill (single border + radius); its segments — the clickable value/badge, the status, and the warn button — sit inside, separated by hairline dividers. A warn tier tints the whole pill so an at-risk ref reads at a glance. No segment backgrounds + no overflow clip → the upward track/ERP dropdown still shows. */ .ref-chip-wrap[data-v-9bcc359a] { position: relative; display: inline-flex; align-items: stretch; border: 1px solid #e8e8ec; border-radius: 6px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .ref-chip-wrap[data-v-9bcc359a]:hover { border-color: #6366f1; } .ref-chip-wrap.active[data-v-9bcc359a] { border-color: #6366f1; background: rgba(99,102,241,0.06); box-shadow: 0 0 0 1px rgba(99,102,241,0.15); } .ref-chip-wrap.warn-red[data-v-9bcc359a] { border-color: rgba(220,38,38,0.40); background: rgba(220,38,38,0.035); } .ref-chip-wrap.warn-amber[data-v-9bcc359a] { border-color: rgba(217,119,6,0.40); background: rgba(217,119,6,0.035); } .ref-chip-wrap.warn-red[data-v-9bcc359a]:hover { border-color: rgba(220,38,38,0.65); } .ref-chip-wrap.warn-amber[data-v-9bcc359a]:hover { border-color: rgba(217,119,6,0.65); } .ref-chip[data-v-9bcc359a] { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: none; background: transparent; font-size: 11px; cursor: pointer; } .ref-chip-value[data-v-9bcc359a] { font-family: monospace; color: #3f3f46; } /* per-ref status — a segment INSIDE the pill (hairline divider on its left) */ .ref-status[data-v-9bcc359a] { display: inline-flex; align-items: center; padding: 0 8px; border-left: 1px solid #eeeef2; font-size: 10px; color: #52525b; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } /* per-ref warning — a segment INSIDE the pill (hairline divider on its left) */ .ref-warn[data-v-9bcc359a] { display: inline-flex; align-items: center; gap: 2px; padding: 0 7px; border: none; border-left: 1px solid #eeeef2; background: transparent; cursor: pointer; line-height: 1; flex-shrink: 0; transition: filter 0.12s; } .ref-warn[data-v-9bcc359a]:hover { filter: brightness(0.85); } .ref-warn-count[data-v-9bcc359a] { font-size: 9px; font-weight: 600; } .ref-warn-red[data-v-9bcc359a] { color: #dc2626; border-left-color: rgba(220,38,38,0.25); } .ref-warn-amber[data-v-9bcc359a] { color: #d97706; border-left-color: rgba(217,119,6,0.25); } /* Dropdown — opens upward */ .ref-dropdown[data-v-9bcc359a] { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 100; background: white; border: 1px solid #e8e8ec; border-radius: 8px; box-shadow: 0 -4px 16px rgba(0,0,0,0.12); padding: 3px; min-width: 130px; } .ref-dd-item[data-v-9bcc359a] { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border: none; background: transparent; border-radius: 5px; font-size: 11px; color: #3f3f46; cursor: pointer; transition: background 0.12s; text-align: left; } .ref-dd-item[data-v-9bcc359a]:hover { background: #f5f5f7; } /* V20.199jq UX-006 — foco visible al navegar el dropdown por teclado. */ .ref-dd-item[data-v-9bcc359a]:focus-visible { outline: 2px solid var(--accent-primary, #4f46e5); outline-offset: -2px; } .ref-dd-icon[data-v-9bcc359a] { flex-shrink: 0; } .ref-dd-blue[data-v-9bcc359a] { color: #2563eb; } .ref-dd-purple[data-v-9bcc359a] { color: #7c3aed; } /* Backdrop */ .ref-backdrop[data-v-9bcc359a] { position: fixed; inset: 0; z-index: 49; } /* Dropdown animation */ .dropdown-fade-enter-active[data-v-9bcc359a], .dropdown-fade-leave-active[data-v-9bcc359a] { transition: opacity 0.15s ease, transform 0.15s ease; } .dropdown-fade-enter-from[data-v-9bcc359a], .dropdown-fade-leave-to[data-v-9bcc359a] { opacity: 0; transform: translateY(4px); } /* V20.199jv — anchors inside the compose editor (as-you-type linkified emails/URLs) read as real hyperlinks: blue + underline. Quoted-thread links with their own inline color keep it (inline wins over CSS). */ .editor-content[data-v-c768701a] a { color: #2563eb; text-decoration: underline; } /* ========================================= READING PANEL - COLUMN 3 OVERRIDES ========================================= */ .email-view-col[data-v-c768701a] { background: var(--bg-secondary, #f5f5f7); position: relative; /* anchor for the centered unread pill */ } /* ========================================= RIGHT PANEL (Calendar / Contacts sidebar) ========================================= */ .right-panel[data-v-c768701a] { display: flex; flex-direction: row; height: 100%; flex-shrink: 0; } .right-panel-icons[data-v-c768701a] { width: 40px; display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 4px; /* Stronger visual separation from the reading panel — was previously `bg-secondary` + secondary border which on the light theme made the rail blend into the body. Premium feel needs a clear vertical rule: primary-tone border + a subtle inset shadow gives the rail depth without hard contrast. */ background: var(--bg-secondary, #fafafc); border-left: 1px solid var(--border-primary, #e8e8ec); box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.02); flex-shrink: 0; } /* V20.199 — .rp-icons-hidden removed: the right-rail icons now stay visible for every panel (AI / ERP included), matching Calendar / Contacts / Logistics. */ /* ── V20.199cu — Copilot-style hover menu on the AI rail icon ───────────── */ .rp-ai-hover[data-v-c768701a] { position: relative; display: flex; } .rp-ai-menu[data-v-c768701a] { position: absolute; bottom: -2px; /* V20.199cv — bottom-aligned: opens UPWARD from the bottom icon */ right: calc(100% + 8px); z-index: 200; min-width: 212px; display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--surface-raised, #ffffff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06); } .rp-ai-menu-label[data-v-c768701a] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-primary, #4f46e5); } .rp-ai-menu-label[data-v-c768701a] svg { color: currentColor; } .rp-ai-menu-item[data-v-c768701a] { display: inline-flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-primary, #3f3f46); font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s; } .rp-ai-menu-item[data-v-c768701a]:hover { background: var(--bg-selected, rgba(79, 70, 229, 0.06)); color: var(--accent-primary, #4f46e5); } .rp-ai-menu-item[data-v-c768701a] svg { flex-shrink: 0; color: var(--accent-primary, #4f46e5); opacity: 0.85; } .rp-ai-menu-enter-active[data-v-c768701a], .rp-ai-menu-leave-active[data-v-c768701a] { transition: opacity 0.14s ease, transform 0.14s ease; } .rp-ai-menu-enter-from[data-v-c768701a], .rp-ai-menu-leave-to[data-v-c768701a] { opacity: 0; transform: translateX(8px); } .right-panel-icon-btn[data-v-c768701a] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 7px; cursor: pointer; transition: all 0.12s ease; /* V20.199ab — establish a positioning context so the absolutely- positioned .rp-icon-badge anchors to ITS OWN button. Without this the logistics-risk badge (the only one on a button that wasn't already position:relative) escaped to the nearest positioned ancestor and rendered at the top of the rail, over the AI (Sparkles) icon. */ position: relative; } /* Calendar icon — always emerald (matches sidebar) */ .rp-icon-calendar[data-v-c768701a] { color: #059669; } .rp-icon-calendar[data-v-c768701a]:hover { background: rgba(5, 150, 105, 0.1); } .rp-icon-calendar.active[data-v-c768701a] { background: rgba(5, 150, 105, 0.15); } /* Contacts icon — always blue (matches sidebar) */ .rp-icon-contacts[data-v-c768701a] { color: #2563eb; } .rp-icon-contacts[data-v-c768701a]:hover { background: rgba(37, 99, 235, 0.1); } .rp-icon-contacts.active[data-v-c768701a] { background: rgba(37, 99, 235, 0.15); } /* ERP icon — purple */ .rp-icon-erp[data-v-c768701a] { color: #7c3aed; } .rp-icon-erp[data-v-c768701a]:hover { background: rgba(124, 58, 237, 0.1); } .rp-icon-erp.active[data-v-c768701a] { background: rgba(124, 58, 237, 0.15); } /* Leader Pulse icon — indigo, slightly more saturated than AI's gradient */ .rp-icon-leader[data-v-c768701a] { color: #4f46e5; position: relative; } .rp-icon-leader[data-v-c768701a]:hover { background: rgba(79, 70, 229, 0.1); } .rp-icon-leader.active[data-v-c768701a] { background: rgba(79, 70, 229, 0.15); } /* Unread/unresolved badge on the icon. Sits top-right; the indigo matches the icon color so the visual identity stays consistent. Capped to "99" by the template — three-digit overflow is unrealistic. */ .rp-icon-badge[data-v-c768701a] { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; pointer-events: none; border: 1.5px solid var(--bg-primary, #fff); box-sizing: content-box; } /* V20.199x — proactive logistics-risk badge variants. Base .rp-icon-badge stays red (#dc2626, shared with the leader-pulse icon — DON'T touch it). These layer on top: amber when no RED items are open, and a pulsing ring while there are unseen items since the user last opened the Hub. */ .rp-icon-badge.rp-icon-badge-amber[data-v-c768701a] { background: #f59e0b; } .rp-icon-badge.rp-icon-badge-pulse[data-v-c768701a] { animation: rp-badge-pulse-red-c768701a 1.8s ease-in-out infinite; } .rp-icon-badge.rp-icon-badge-amber.rp-icon-badge-pulse[data-v-c768701a] { animation: rp-badge-pulse-amber-c768701a 1.8s ease-in-out infinite; } @keyframes rp-badge-pulse-red-c768701a { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } @keyframes rp-badge-pulse-amber-c768701a { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .right-panel-content[data-v-c768701a] { width: 400px; display: flex; flex-direction: column; background: var(--bg-primary); /* Premium floating-panel separator — v1.5.14 used `border-primary` (#e8e8ec) which is too close in tone to the reading panel's #f5f5f7 background to read as a real divider. Now uses an explicit darker border tone PLUS a soft outward drop shadow on the left edge so the right panel reads as a floating surface hovering over the body, not a flat continuation. Works against any reading-panel background tone. Dark-theme override below. */ border-left: 1px solid #d4d4d8; box-shadow: -4px 0 14px -6px rgba(15, 23, 42, 0.10), -1px 0 0 rgba(15, 23, 42, 0.04); overflow: hidden; position: relative; z-index: 9100; } [data-theme="dark"] .right-panel-content[data-v-c768701a] { border-left: 1px solid #3a3a3a; box-shadow: -4px 0 14px -6px rgba(0, 0, 0, 0.45), -1px 0 0 rgba(0, 0, 0, 0.25); } .right-panel-header[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 40px; border-bottom: 1px solid var(--border-secondary); flex-shrink: 0; } .right-panel-title[data-v-c768701a] { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; } .right-panel-title-icon[data-v-c768701a] { color: var(--accent-primary, #4f46e5); flex-shrink: 0; } .right-panel-close[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-quaternary); border-radius: 7px; cursor: pointer; transition: all 0.1s ease; } .right-panel-close[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-secondary); } .right-panel-body[data-v-c768701a] { flex: 1; padding: 12px; overflow-y: auto; overflow-x: hidden; position: relative; } /* Panels that manage their own scroll + want zero outer padding (Hubswire AI chat, ERP). Removes the default 12px padding and disables outer scroll so their internal scroll containers take over. */ .right-panel-body.rp-body-fullbleed[data-v-c768701a] { padding: 0; overflow: hidden; } /* AI title icon — gradient-tinted Sparkles to match the panel branding. */ .rp-title-icon-ai[data-v-c768701a] { color: #8b5cf6 !important; } /* Right-panel icon button for AI — hover/active states match the others but use the indigo accent. */ .right-panel-icon-btn.rp-icon-ai.active[data-v-c768701a] { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); } /* Calendar header actions */ .right-panel-header-actions[data-v-c768701a] { display: flex; align-items: center; gap: 2px; } .right-panel-header-btn[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); border-radius: 7px; cursor: pointer; transition: all 0.1s ease; } .right-panel-header-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .right-panel-header-btn.active[data-v-c768701a] { background: var(--bg-selected); color: var(--accent-primary); } /* V20.199lg — rail Calendar default-view picker (gear popover) */ .rp-viewpick-wrap[data-v-c768701a] { position: relative; display: inline-flex; } .rp-viewpick-scrim[data-v-c768701a] { position: fixed; inset: 0; z-index: 40; } .rp-viewpick-pop[data-v-c768701a] { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; width: 268px; background: var(--surface-raised); border: 1px solid var(--border-primary); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .rp-viewpick-hd[data-v-c768701a] { padding: 6px 8px 8px; } .rp-viewpick-ttl[data-v-c768701a] { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); } .rp-viewpick-sub[data-v-c768701a] { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 1px; } .rp-viewpick-opt[data-v-c768701a] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; transition: background 0.1s ease, border-color 0.1s ease; } .rp-viewpick-opt[data-v-c768701a]:hover { background: var(--bg-hover); } .rp-viewpick-opt.on[data-v-c768701a] { background: var(--bg-selected); border-color: var(--accent-primary); } .rp-viewpick-ic[data-v-c768701a] { color: var(--text-tertiary); flex-shrink: 0; } .rp-viewpick-opt.on .rp-viewpick-ic[data-v-c768701a] { color: var(--accent-primary); } .rp-viewpick-opt-tx[data-v-c768701a] { flex: 1; min-width: 0; } .rp-viewpick-opt-nm[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); } .rp-viewpick-opt-desc[data-v-c768701a] { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 1px; } .rp-viewpick-badge[data-v-c768701a] { font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-primary); background: var(--bg-selected); padding: 1px 5px; border-radius: 4px; } .rp-viewpick-radio[data-v-c768701a] { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rp-viewpick-opt.on .rp-viewpick-radio[data-v-c768701a] { border-color: var(--accent-primary); } .rp-viewpick-dot[data-v-c768701a] { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); } /* Calendar day navigation */ .rp-cal-nav[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; } .rp-cal-date[data-v-c768701a] { font-size: 13px; font-weight: 600; color: var(--text-primary); } .rp-cal-nav-btns[data-v-c768701a] { display: flex; align-items: center; gap: 4px; } .rp-cal-nav-btn[data-v-c768701a] { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-tertiary); border-radius: 5px; cursor: pointer; transition: all 0.1s ease; } .rp-cal-nav-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .rp-cal-today-btn[data-v-c768701a] { padding: 2px 8px; font-size: 11px; font-weight: 500; font-family: inherit; border: 1px solid var(--border-primary); background: var(--bg-primary); color: var(--text-secondary); border-radius: 5px; cursor: pointer; transition: all 0.1s ease; } .rp-cal-today-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .rp-cal-loading[data-v-c768701a] { font-size: 13px; color: var(--text-quaternary); text-align: center; padding: 24px 0; } /* Calendar timeline */ .rp-cal-timeline[data-v-c768701a] { position: relative; overflow-y: auto; max-height: calc(100vh - 160px); } .rp-cal-hour-row[data-v-c768701a] { display: flex; align-items: flex-start; height: 60px; position: relative; cursor: pointer; } .rp-cal-hour-row:hover .rp-cal-hour-line[data-v-c768701a] { background: rgba(99, 102, 241, 0.08); } .rp-cal-hour-label[data-v-c768701a] { width: 44px; font-size: 10px; color: var(--text-quaternary); text-align: right; padding-right: 8px; flex-shrink: 0; transform: translateY(-6px); } .rp-cal-hour-line[data-v-c768701a] { flex: 1; border-top: 1px solid var(--border-secondary); height: 1px; } /* Events on timeline */ /* All-day event banner */ .rp-cal-allday-event[data-v-c768701a] { padding: 6px 10px; margin-bottom: 4px; border-left: 3px solid var(--event-color, #6366f1); border-radius: 0 6px 6px 0; background: var(--surface-raised, #fff); box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--event-color, #6366f1) 15%, transparent); cursor: pointer; transition: box-shadow 0.1s ease; } .rp-cal-allday-event[data-v-c768701a]:hover { box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--event-color, #6366f1) 25%, transparent), 0 2px 8px rgba(0,0,0,0.1); } .rp-cal-allday-event .rp-cal-event-title[data-v-c768701a] { font-size: 12px; font-weight: 600; color: var(--text-primary); } .rp-cal-timeline-event[data-v-c768701a] { position: absolute; left: 52px; right: 4px; border-left: 3px solid var(--event-color, #6366f1); border-radius: 0 5px 5px 0; padding: 3px 8px; overflow: hidden; cursor: pointer; z-index: 1; background: var(--surface-raised, #fff); box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--event-color, #6366f1) 15%, transparent); display: flex; flex-direction: column; } .rp-cal-timeline-event[data-v-c768701a]:hover { box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--event-color, #6366f1) 25%, transparent), 0 2px 8px rgba(0,0,0,0.1); } .rp-cal-event-title[data-v-c768701a] { font-size: 11px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .rp-cal-event-time[data-v-c768701a] { font-size: 10px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; line-height: 1.3; } /* Current time line */ .rp-cal-now-line[data-v-c768701a] { position: absolute; left: 44px; right: 0; height: 2px; z-index: 2; display: flex; align-items: center; } .rp-cal-now-dot[data-v-c768701a] { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0; margin-left: -4px; } .rp-cal-now-rule[data-v-c768701a] { flex: 1; height: 2px; background: #ef4444; } /* Event detail overlay */ .rp-evdetail-overlay[data-v-c768701a] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); display: flex; flex-direction: column; z-index: 4; overflow-y: auto; } .rp-evdetail-header[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-secondary); flex-shrink: 0; } .rp-evdetail-header-title[data-v-c768701a] { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); } .rp-evdetail-edit-btn[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); border-radius: 7px; cursor: pointer; transition: all 0.1s ease; } .rp-evdetail-edit-btn[data-v-c768701a]:hover { background: rgba(99, 102, 241, 0.1); color: #6366f1; } .rp-evdetail-delete-btn[data-v-c768701a]:hover { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; } .rp-evdetail-body[data-v-c768701a] { padding: 14px; display: flex; flex-direction: column; gap: 14px; } .rp-evdetail-title[data-v-c768701a] { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.3; display: flex; align-items: center; gap: 6px; } .rp-evdetail-clip[data-v-c768701a] { color: var(--text-quaternary); flex-shrink: 0; } .rp-evdetail-attachments[data-v-c768701a] { display: flex; flex-direction: column; gap: 4px; } .rp-evdetail-att-file[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-hover); border-radius: 8px; cursor: pointer; transition: all 0.1s ease; } .rp-evdetail-att-file[data-v-c768701a]:hover { background: rgba(8, 145, 178, 0.08); } .rp-evdetail-att-icon[data-v-c768701a] { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.1); border-radius: 6px; color: #ef4444; flex-shrink: 0; } .rp-evdetail-att-meta[data-v-c768701a] { display: flex; flex-direction: column; min-width: 0; } .rp-evdetail-att-name[data-v-c768701a] { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-evdetail-att-size[data-v-c768701a] { font-size: 10px; color: var(--text-quaternary); } .rp-evdetail-att-delete[data-v-c768701a] { margin-left: auto; border: none; background: transparent; color: var(--text-quaternary); font-size: 16px; cursor: pointer; padding: 0 2px; border-radius: 4px; line-height: 1; flex-shrink: 0; } .rp-evdetail-att-delete[data-v-c768701a]:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .rp-evdetail-field[data-v-c768701a] { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); } .rp-evdetail-field svg[data-v-c768701a] { flex-shrink: 0; margin-top: 1px; } .rp-evdetail-date[data-v-c768701a] { font-weight: 500; color: var(--text-primary); } .rp-evdetail-time[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); } .rp-evdetail-link[data-v-c768701a] { color: #6366f1; text-decoration: none; font-weight: 500; } .rp-evdetail-link[data-v-c768701a]:hover { text-decoration: underline; } .rp-evdetail-section[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; } .rp-evdetail-label[data-v-c768701a] { font-weight: 500; color: var(--text-primary); } .rp-evdetail-attendees[data-v-c768701a] { display: flex; flex-direction: column; gap: 6px; padding-left: 25px; } .rp-evdetail-attendee[data-v-c768701a] { display: flex; align-items: center; gap: 8px; } .rp-evdetail-att-avatar[data-v-c768701a] { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; position: relative; } .rp-evdetail-att-status[data-v-c768701a] { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; font-weight: 700; } .rp-evdetail-att-info[data-v-c768701a] { display: flex; align-items: center; gap: 4px; min-width: 0; } .rp-evdetail-att-name[data-v-c768701a] { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-evdetail-att-org[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary); } .rp-evdetail-desc[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; white-space: pre-wrap; } .rp-evdetail-respond[data-v-c768701a] { border-top: 1px solid var(--border-secondary); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .rp-evdetail-respond-label[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); } .rp-evdetail-respond-btns[data-v-c768701a] { display: flex; gap: 6px; } .rp-respond-btn[data-v-c768701a] { flex: 1; padding: 7px 0; border: 1px solid var(--border-primary); border-radius: 7px; background: var(--bg-primary); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.12s ease; color: var(--text-secondary); } .rp-respond-yes[data-v-c768701a]:hover, .rp-respond-yes.active[data-v-c768701a] { background: rgba(34, 197, 94, 0.1); border-color: #22c55e; color: #16a34a; } .rp-respond-maybe[data-v-c768701a]:hover, .rp-respond-maybe.active[data-v-c768701a] { background: rgba(245, 158, 11, 0.1); border-color: #f59e0b; color: #d97706; } .rp-respond-no[data-v-c768701a]:hover, .rp-respond-no.active[data-v-c768701a] { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #dc2626; } /* New event overlay */ .rp-new-event-overlay[data-v-c768701a] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); display: flex; flex-direction: column; z-index: 3; } .rp-new-event-header[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-secondary); flex-shrink: 0; } .rp-nev-header-left[data-v-c768701a] { display: flex; align-items: center; gap: 8px; } .rp-nev-header-icon[data-v-c768701a] { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; flex-shrink: 0; } .rp-new-event-title[data-v-c768701a] { font-size: 14px; font-weight: 600; color: var(--text-primary); } .rp-new-event-body[data-v-c768701a] { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } /* Title input */ .rp-nev-title-input[data-v-c768701a] { width: 100%; padding: 6px 0; border: none; border-bottom: 2px solid var(--border-secondary); font-size: 15px; font-weight: 500; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; margin-bottom: 10px; transition: border-color 0.15s ease; } .rp-nev-title-input[data-v-c768701a]::placeholder { color: var(--text-quaternary); } .rp-nev-title-input[data-v-c768701a]:focus { border-bottom-color: #818cf8; } /* Date row layout */ .rp-nev-field-date[data-v-c768701a] { align-items: flex-start; } .rp-nev-field-date .rp-nev-icon[data-v-c768701a] { margin-top: 6px; } .rp-nev-field-body[data-v-c768701a] { flex: 1; min-width: 0; } .rp-nev-date-row[data-v-c768701a] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rp-nev-date-row + .rp-nev-date-row[data-v-c768701a] { margin-top: 6px; } .rp-nev-date-input[data-v-c768701a] { padding: 5px 8px; border: 1px solid var(--border-primary); border-radius: 6px; font-size: 12px; font-family: inherit; color: var(--text-primary); background: var(--bg-primary); outline: none; max-width: 130px; } .rp-nev-date-input[data-v-c768701a]:focus { border-color: #818cf8; } /* Guest chips */ /* Guest rows */ .rp-guest-row[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 5px; background: rgba(99, 102, 241, 0.06); margin-bottom: 3px; } .rp-guest-email[data-v-c768701a] { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-guest-remove[data-v-c768701a] { cursor: pointer; font-size: 15px; color: var(--text-quaternary); line-height: 1; flex-shrink: 0; padding: 0 2px; } .rp-guest-remove[data-v-c768701a]:hover { color: #ef4444; } /* Guest autocomplete dropdown */ .rp-guest-dropdown[data-v-c768701a] { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 100; padding: 4px; max-height: 180px; overflow-y: auto; } .rp-guest-dropdown-item[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; transition: background 0.08s ease; } .rp-guest-dropdown-item[data-v-c768701a]:hover, .rp-guest-dropdown-item.selected[data-v-c768701a] { background: var(--bg-hover); } .rp-guest-dropdown-avatar[data-v-c768701a] { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; } .rp-guest-dropdown-info[data-v-c768701a] { display: flex; flex-direction: column; min-width: 0; } .rp-guest-dropdown-name[data-v-c768701a] { font-size: 12px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Attachment rows */ .rp-attach-row[data-v-c768701a] { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg-hover); border-radius: 5px; margin-bottom: 3px; font-size: 12px; } .rp-attach-name[data-v-c768701a] { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .rp-attach-size[data-v-c768701a] { color: var(--text-quaternary); font-size: 11px; flex-shrink: 0; } .rp-attach-btn[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px dashed var(--border-primary); border-radius: 6px; background: transparent; color: var(--text-tertiary); font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.1s ease; } .rp-attach-btn[data-v-c768701a]:hover { border-color: #818cf8; color: #6366f1; background: rgba(99, 102, 241, 0.04); } .rp-guest-dropdown-email[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Field rows */ .rp-nev-field[data-v-c768701a] { display: flex; align-items: center; gap: 10px; min-height: 36px; } .rp-nev-field-top[data-v-c768701a] { align-items: flex-start; padding-top: 4px; } .rp-nev-icon[data-v-c768701a] { color: var(--text-quaternary); flex-shrink: 0; width: 15px; } .rp-nev-icon-spacer[data-v-c768701a] { width: 15px; flex-shrink: 0; } .rp-nev-input[data-v-c768701a] { flex: 1; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; transition: all 0.1s ease; } .rp-nev-input[data-v-c768701a]::placeholder { color: var(--text-quaternary); } .rp-nev-input[data-v-c768701a]:hover { background: var(--bg-hover); } .rp-nev-input[data-v-c768701a]:focus { background: var(--bg-primary); border-color: var(--border-primary); box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.1); } .rp-nev-time[data-v-c768701a] { max-width: 100px; text-align: center; } .rp-nev-to[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary); } .rp-nev-textarea[data-v-c768701a] { flex: 1; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; resize: vertical; min-height: 60px; transition: all 0.1s ease; } .rp-nev-textarea[data-v-c768701a]::placeholder { color: var(--text-quaternary); } .rp-nev-textarea[data-v-c768701a]:hover { background: var(--bg-hover); } .rp-nev-textarea[data-v-c768701a]:focus { background: var(--bg-primary); border-color: var(--border-primary); box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.1); } .rp-nev-select[data-v-c768701a] { flex: 1; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; cursor: pointer; } .rp-nev-select[data-v-c768701a]:hover { background: var(--bg-hover); } .rp-nev-select[data-v-c768701a]:focus { border-color: var(--border-primary); } .rp-nev-checkbox[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .rp-nev-checkbox input[type="checkbox"][data-v-c768701a] { accent-color: #6366f1; width: 14px; height: 14px; } /* Footer */ .rp-new-event-footer[data-v-c768701a] { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-secondary); flex-shrink: 0; } .rp-new-event-cancel[data-v-c768701a] { padding: 7px 16px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: inherit; border-radius: 7px; cursor: pointer; } .rp-new-event-cancel[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .rp-new-event-save[data-v-c768701a] { padding: 7px 20px; border: none; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; font-size: 13px; font-weight: 600; font-family: inherit; border-radius: 7px; cursor: pointer; transition: all 0.12s ease; } .rp-new-event-save[data-v-c768701a]:hover:not(:disabled) { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3); } .rp-new-event-save[data-v-c768701a]:disabled { opacity: 0.4; cursor: not-allowed; } /* Contacts list */ .rp-contacts-loading[data-v-c768701a], .rp-contacts-empty[data-v-c768701a] { font-size: 13px; color: var(--text-quaternary); text-align: center; padding: 24px 0; } .rp-contacts-list[data-v-c768701a] { display: flex; flex-direction: column; margin-top: 10px; } .rp-contact-row[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 7px; transition: background 0.1s ease; } .rp-contact-row[data-v-c768701a]:hover { background: var(--bg-hover); } .rp-contact-row-actions[data-v-c768701a] { display: flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transition: opacity 0.1s ease; flex-shrink: 0; } .rp-contact-row:hover .rp-contact-row-actions[data-v-c768701a] { opacity: 1; } .rp-contact-icon-btn[data-v-c768701a] { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-quaternary); border-radius: 6px; cursor: pointer; transition: all 0.1s ease; } .rp-contact-icon-btn[data-v-c768701a]:hover { background: rgba(99, 102, 241, 0.1); color: var(--accent-primary); } .rp-contact-avatar[data-v-c768701a] { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .rp-contact-info[data-v-c768701a] { display: flex; flex-direction: column; min-width: 0; } .rp-contact-name[data-v-c768701a] { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-contact-email[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Contact detail overlay */ .rp-contact-detail-overlay[data-v-c768701a] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); padding: 16px; overflow-y: auto; z-index: 2; } .rp-contact-detail-email[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); word-break: break-all; } .rp-back-btn[data-v-c768701a] { display: flex; align-items: center; gap: 4px; border: none; background: none; color: var(--text-tertiary); font-size: 12px; font-family: inherit; cursor: pointer; padding: 0; margin-bottom: 16px; transition: color 0.1s ease; } .rp-back-btn[data-v-c768701a]:hover { color: var(--text-primary); } .rp-contact-detail-header[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; } .rp-contact-avatar-lg[data-v-c768701a] { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; } .rp-contact-detail-name[data-v-c768701a] { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; text-align: center; word-break: break-word; } .rp-contact-detail-fields[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .rp-contact-field[data-v-c768701a] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .rp-contact-field svg[data-v-c768701a] { color: var(--text-quaternary); flex-shrink: 0; } .rp-contact-notes[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); padding: 8px 10px; background: var(--bg-hover); border-radius: 6px; } .rp-visibility-badge[data-v-c768701a] { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .rp-visibility-badge.private[data-v-c768701a] { background: rgba(245, 158, 11, 0.1); color: #d97706; } .rp-visibility-badge.shared[data-v-c768701a] { background: rgba(99, 102, 241, 0.1); color: #6366f1; } .rp-contact-actions[data-v-c768701a] { display: flex; flex-direction: column; gap: 6px; } .rp-contact-action-btn[data-v-c768701a] { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.12s ease; } .rp-contact-action-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .rp-action-email[data-v-c768701a] { background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; border-color: transparent; } .rp-action-email[data-v-c768701a]:hover { box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); color: white; transform: translateY(-1px); } .right-panel-search[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-primary); border-radius: 8px; color: var(--text-quaternary); } .right-panel-search-input[data-v-c768701a] { border: none; background: transparent; outline: none; font-size: 13px; color: var(--text-primary); width: 100%; font-family: inherit; } .right-panel-search-input[data-v-c768701a]::placeholder { color: var(--text-quaternary); } /* Slide transition */ .right-panel-slide-enter-active[data-v-c768701a] { transition: width 0.2s ease, opacity 0.15s ease; } .right-panel-slide-leave-active[data-v-c768701a] { transition: width 0.15s ease, opacity 0.1s ease; } .right-panel-slide-enter-from[data-v-c768701a], .right-panel-slide-leave-to[data-v-c768701a] { width: 0 !important; opacity: 0; } /* Reading panel action toolbar (in participants bar area) */ .reading-toolbar[data-v-c768701a] { display: flex; align-items: center; gap: 1px; padding: 4px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border-secondary); flex-shrink: 0; } .reading-toolbar-inbox[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); margin-right: 8px; } .reading-toolbar-btn[data-v-c768701a] { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; cursor: pointer; transition: all 0.1s ease; opacity: 0.9; } .reading-toolbar-btn[data-v-c768701a]:hover { background: var(--bg-hover); opacity: 1; transform: scale(1.1); } .reading-toolbar-btn[data-v-c768701a]:disabled { opacity: 0.3; cursor: not-allowed; } /* Mark it! button */ .mark-it-btn[data-v-c768701a] { width: auto !important; gap: 4px; padding: 0 8px; background: rgba(79, 70, 229, 0.08); border: 1px solid rgba(79, 70, 229, 0.2); color: var(--accent-primary); font-size: 11px; font-weight: 600; } .mark-it-btn[data-v-c768701a]:hover { background: rgba(79, 70, 229, 0.15) !important; border-color: rgba(79, 70, 229, 0.35); transform: scale(1.02) !important; } .mark-it-label[data-v-c768701a] { letter-spacing: 0.02em; } .reading-toolbar-separator[data-v-c768701a] { width: 1px; height: 16px; background: var(--border-secondary); margin: 0 3px; } .detail-header[data-v-c768701a] { background: var(--bg-secondary, #f5f5f7); border-bottom: none; } .detail-body[data-v-c768701a] { background: var(--bg-secondary, #f5f5f7); } /* ========================================= EMAIL LIST - COLUMN 2 OVERRIDES ========================================= */ /* The conversation-list column uses --surface-raised (pure white) instead of --bg-primary (#fafafc soft-gray from the March 31 "soften light theme" commit). Without this override the list pane reads as slightly gray, which the user explicitly does not want — they expect the list to read as white-on-white matching the older (pre-March) Electron build that's still installed on their machine. The rest of the app (sidebar, reading-panel bg) keeps the soft #fafafc per the design system. */ .email-list-col[data-v-c768701a] { background: var(--surface-raised, #ffffff); } .list-header[data-v-c768701a] { background: var(--surface-raised, #ffffff); border-bottom: 1px solid var(--border-secondary); } /* V20.199hc — Outlook only: match the list-header height to the reader's header zone (detail-header ≈ 61px) so the list-header bottom hairline lines up with the reader toolbar's top hairline → one continuous separator across both columns (Julio: "alinear esos dos separadores"). Content vertically centered; grows in search mode (min-height, not fixed). */ .list-header.list-header-outlook[data-v-c768701a] { min-height: 61px; box-sizing: border-box; justify-content: center; } .email-scroll-area[data-v-c768701a] { background: var(--surface-raised, #ffffff); /* V20.199hi — REAL cause of the white gutter Julio kept seeing: the scroll-area had its own horizontal padding (base `padding: 8px`), which pushed every row right and left a white strip to the left of the accent rail. Kill the side padding (keep the vertical) so the rows sit flush against the sidebar in ALL layouts. */ padding-left: 0; padding-right: 0; } /* Normal list rows — COMPACT, CALM, theme-aware. Flat rows separated by a hairline; a 2px left rail (transparent by default) carries the unread / selected accent so the row never jumps width. No floating-card border/radius/margin (that read as heavy and off-palette). Indigo is the ONLY accent here. */ .email-card[data-v-c768701a] { /* V20.199hh — tighter LEFT inset (12 → 6) so the rows sit flush against the sidebar in ALL layouts (Julio: "se ve un espacio blanco, pegalo al sidebar"). With the 2px accent rail that's ~8px inset, matching Outlook's rows. */ padding: 8px 12px 8px 6px; background-color: transparent; border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid var(--border-secondary); border-left: 2px solid transparent; transition: background-color 0.15s ease, border-left-color 0.15s ease; } .email-card[data-v-c768701a]:hover { background-color: var(--bg-hover); } /* V20.199fi — NO left rail on UNSELECTED rows (founder: "quita el borde a los que no están seleccionados, como Leader Pulse"). Unread stays signalled by the base sheet's bold/color; ONLY the SELECTED row shows the indigo rail. */ .email-card.unread[data-v-c768701a] { border-left-color: transparent; } /* V20.199hm — BASE selected = the calm FLAT indigo rail (Leader-Pulse style). This is the fallback Outlook builds on, so the bordered-box selection must NOT live here (hk put it on the base and it LEAKED border-radius/margin/border into Outlook — Julio: "cambiaste todo en outlook"). The boxed selection is scoped per-layout: Classic = `.density-compact.selected`, Premium = `.density-premium.selected`. Outlook (`.layout-outlook.selected`) + Leader Pulse keep their own rules. */ .email-card.selected[data-v-c768701a] { background-color: var(--bg-selected); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-width: 3px; border-left-style: solid; border-left-color: var(--accent-primary); border-radius: 0; margin: 0; box-shadow: none; } .email-card.selected[data-v-c768701a]:hover { background-color: var(--bg-selected); } /* V20.199ig — Classic ONLY: the bordered box EXACTLY as the OLD Electron build. The REAL pre-refactor design (main.css 6c9283e8^) was `.email-card { border: 1px solid transparent }` + `.selected { background: var(--bg-selected); border-color: var(--accent-primary) }` — a CRISP 1px accent-colored border. hq mistakenly used rgba(...,0.2) which is nearly invisible (Julio: "aún no agregas el borde como está en electron"). Restore the solid accent border, theme-aware via tokens. Scoped to .density-compact → Premium (pulse rail) + Outlook (rail) + Leader Pulse never get a box. */ .email-card.density-compact.selected[data-v-c768701a] { /* V20.199ir — TOKENIZADO (cumple la convención del design system: cero hex hardcodeados). El fondo lavanda y el asunto ahora usan tokens theme-aware, IGUAL que Premium/Outlook → ya NO hace falta el override [data-theme="dark"] (un solo set de reglas funciona en light Y dark). El fondo usa el MISMO mecanismo que .density-premium.selected (color-mix 9% sobre --accent-primary) para que los 3 modos sean consistentes; el rail + el asunto van al índigo de marca var(--accent-primary). Spec original (io/ip): rail izquierdo grueso de 3px SOLO a la izquierda, esquinas 10px, asunto del item activo resaltado. */ background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent); border: 1px solid transparent; /* top/right/bottom invisibles → sin reflow */ border-left: 3px solid var(--accent-primary); /* rail grueso, SOLO izquierda, color de marca */ border-radius: 10px; margin: 2px 4px; box-shadow: none; } .email-card.density-compact.selected[data-v-c768701a]:hover { background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent); border-left-color: var(--accent-primary); } .email-card.density-compact.selected .card-subject-text[data-v-c768701a] { color: var(--accent-primary); } /* V20.199fm — Compact density (founder "Display" setting). Applies ONLY to normal inbox rows (the .density-compact class is never set on pulse rows, so Leader Pulse keeps its avatar/severity layout). Drops the left avatar + tag pills + inline preview avatar and tightens the row so the user can pick a denser list. Premium (default) keeps the full look. The preview is already single-line (nowrap) in both densities. */ .email-card.density-compact[data-v-c768701a] { padding-top: 5px; padding-bottom: 5px; /* V20.199if — a bit more left inset between the content and the card's left border/rail (Julio: "dale un poquito de espacio entre el icon y el borde"). The card's outer edge stays flush to the sidebar; this is internal padding. */ padding-left: 12px; /* V20.199in — reserve the 1px border (transparent until selected) so selecting only changes border-COLOR, never the box width → no layout shift. Mirrors the old main.css `.email-card { border: 1px solid transparent }`. */ border: 1px solid transparent; } .email-card.density-compact .card-avatar-neutral[data-v-c768701a], .email-card.density-compact .preview-avatar[data-v-c768701a], .email-card.density-compact .pulse-avatar[data-v-c768701a] { display: none; } /* V20.199if — Premium: same extra left inset for the avatar↔border gap. */ .email-card.density-premium[data-v-c768701a] { padding-left: 12px; } /* ════════════════════════════════════════════════════════════════════ V20.199fq — Outlook Inspired layout (gated) Recreates the Claude-handoff "Outlook Inspired" look — flat dense message rows + round colored avatars + Focused/Other tabs + real day grouping + a flat dense folder tree — entirely theme-aware (indigo var(--accent-primary) is the only accent; warm hexes from the spec are mapped to app tokens). EVERY rule below is scoped to one of: · .email-card.layout-outlook (normal inbox rows, never pulse) · .sidebar.sidebar-layout-outlook (folder pane in outlook mode) · .outlook-* / .outlook-daygrp (markup that ONLY renders in outlook) so Classic / Premium / Leader Pulse / reader / right rail are byte- identical to before. The reader pane + app rail are intentionally unchanged per the spec. ════════════════════════════════════════════════════════════════════ */ /* ── A) Message list rows ──────────────────────────────────────────── */ /* Flat dense row: hairline bottom separator, no card chrome, indigo accent only on the selected row's left rail. */ .email-card.layout-outlook[data-v-c768701a] { /* V20.199gx — tighter left inset so the rows sit flush against the sidebar (Julio: "elimina ese espacio blanco entre el sidebar y el email card"). The 3px accent rail stays. V20.199if — padding-left 5 → 12 for a bit of breathing room between the avatar and the card's left border/rail. */ padding: 8px 14px 9px 12px; border-bottom: 1px solid var(--border-secondary); border-left: 3px solid transparent; } .email-card.layout-outlook[data-v-c768701a]:hover { background-color: var(--bg-hover); } /* 32px round colored avatar (the design's .av). The per-sender color + white text come from the gated inline :style on .card-avatar-neutral; here we just reshape the shared element. */ .email-card.layout-outlook .card-avatar-neutral[data-v-c768701a] { /* V20.199iu — Outlook avatar más compacto (Julio: "el avatar... muy grande, está exagerado en layout de Outlook"). 32 → 28px. */ width: 28px; height: 28px; border-radius: 50%; margin-top: 2px; margin-right: 9px; font-size: 11px; font-weight: 700; } /* V20.199is — in Outlook mode the Leader-Pulse avatar matches the normal Outlook avatar (32px ROUND, per-sender color from the gated inline :style on the element) so pulse rows read like the regular Outlook inbox (Julio: "en modo outlook no se ve igual"). Specificity 0,3,0 beats the base .is-pulse-row .pulse-avatar (0,2,0); the per-sender bg/white text come from the inline style (wins over the severity-tint CSS). Severity still reads via the Risk/SLA chips + the selected rail — the avatar no longer needs to carry it in THIS mode. */ .email-card.layout-outlook .pulse-avatar[data-v-c768701a] { /* V20.199it/iu — un toque más chico que el avatar normal de Outlook, y bajado de nuevo (Julio: "muy grande, exagerado"). 28 → 26px. */ width: 26px; height: 26px; border-radius: 50%; margin-top: 2px; margin-right: 9px; font-size: 10.5px; font-weight: 700; } /* Line 1 — sender: bold when unread, weight 400 when read. */ .email-card.layout-outlook .participants[data-v-c768701a] { font-weight: 700; color: var(--text-primary); } .email-card.layout-outlook:not(.unread) .participants[data-v-c768701a] { font-weight: 400; } /* V20.199iu — Outlook text un poco más chico para que la fila lea compacta y no "exagerada" (Julio). Sender + subject 13px (base) → 12.5px. */ .email-card.layout-outlook .participants[data-v-c768701a], .email-card.layout-outlook .card-subject-text[data-v-c768701a] { font-size: 12.5px; } /* Line 1 — time: small, muted; accent + bold when unread. */ .email-card.layout-outlook .time[data-v-c768701a] { font-size: 11.5px; color: var(--text-tertiary); } .email-card.layout-outlook.unread .time[data-v-c768701a] { color: var(--accent-primary); font-weight: 600; } /* V20.199hc — Julio: "quita los dots azules". Unread is still signalled by the indigo + bold time; the dot before it is removed. */ .email-card.layout-outlook.unread .time[data-v-c768701a]::before { content: none; } /* Line 2 — subject: bold when unread. */ .email-card.layout-outlook.unread .card-subject-text[data-v-c768701a] { font-weight: 600; color: var(--text-primary); } /* Footer pills (design's .r-foot .pill) — flat/minimal: no pill bg/border, just a small colored category dot is implied by the marker emoji/name. Strip the chip chrome so the row reads calm. */ .email-card.layout-outlook .card-tag-pill[data-v-c768701a] { padding: 0; background: none; border: none; border-radius: 0; color: var(--text-tertiary); font-weight: 500; } .email-card.layout-outlook .card-attach-pill svg[data-v-c768701a] { color: var(--text-tertiary); } /* External chip stays subtle but flat in outlook (no boxed border). */ .email-card.layout-outlook .card-ext-chip[data-v-c768701a] { padding: 0 4px 0 0; background: none; border: none; color: var(--text-tertiary); } /* Selected row — soft indigo wash + 3px indigo left rail (matches the design's ::after width:3px var(--accent), and the app's existing selection idiom). */ .email-card.layout-outlook.selected[data-v-c768701a] { background-color: var(--bg-selected); border-left-color: var(--accent-primary); } .email-card.layout-outlook.selected[data-v-c768701a]:hover { background-color: var(--bg-selected); } /* ── B) Day-group header (the design's .daygrp) ────────────────────── */ .outlook-daygrp[data-v-c768701a] { /* V20.199gx — align the day header with the tighter row inset */ padding: 9px 14px 3px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--accent-primary); } /* ── C) Focused / Other tabs (the design's .tabs / .tab) ───────────── */ .outlook-tabs[data-v-c768701a] { display: flex; gap: 22px; padding: 4px 14px 0; border-bottom: 1px solid var(--border-secondary); background: var(--surface-raised, #ffffff); flex: none; } .outlook-tab[data-v-c768701a] { position: relative; border: none; background: none; padding: 7px 1px 9px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; transition: color 0.12s ease; } .outlook-tab[data-v-c768701a]:hover { color: var(--text-secondary); } .outlook-tab.is-active[data-v-c768701a] { color: var(--accent-primary); } .outlook-tab.is-active[data-v-c768701a]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--accent-primary); } .outlook-tab-count[data-v-c768701a] { font-size: 11px; font-weight: 700; color: var(--text-quaternary); margin-left: 5px; } /* ── E) Folder pane (the design's flat dense folder tree) ──────────── */ /* Section headers (design's .grp-hd) — small uppercase-ish label. */ .sidebar.sidebar-layout-outlook .sidebar-section-header[data-v-c768701a] { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--text-secondary); } /* Items (design's .fitem) — dense, left-indented, calm icon + muted count. */ .sidebar.sidebar-layout-outlook .user-folder-item[data-v-c768701a], .sidebar.sidebar-layout-outlook .personal-inbox-item[data-v-c768701a] { height: auto; padding: 6px 9px 6px 24px; border-radius: 6px; font-size: 13px; font-weight: 400; gap: 10px; } .sidebar.sidebar-layout-outlook .user-folder-item[data-v-c768701a]:hover, .sidebar.sidebar-layout-outlook .personal-inbox-item[data-v-c768701a]:hover { background-color: var(--bg-hover); } /* V20.199fr — flat MONOCHROME folder icons in Outlook (override the per-folder inline colors with !important) so the tree reads like a desktop mail client, clearly different from Premium's colored icons. Markers + inbox avatars keep their color. */ .sidebar.sidebar-layout-outlook .folder-item-icon[data-v-c768701a] { color: var(--text-tertiary) !important; } .sidebar.sidebar-layout-outlook .user-folder-item .folder-count[data-v-c768701a], .sidebar.sidebar-layout-outlook .personal-inbox-item .inbox-count[data-v-c768701a] { color: var(--text-tertiary); } /* Active item (design's .fitem[data-on]) — selected wash, weight 600, 3px indigo left rail, accent icon. */ .sidebar.sidebar-layout-outlook .user-folder-item.active[data-v-c768701a], .sidebar.sidebar-layout-outlook .personal-inbox-item.active[data-v-c768701a] { background-color: var(--bg-selected); font-weight: 600; } .sidebar.sidebar-layout-outlook .user-folder-item.active .folder-item-name[data-v-c768701a], .sidebar.sidebar-layout-outlook .personal-inbox-item.active .inbox-item-name[data-v-c768701a] { font-weight: 600; } .sidebar.sidebar-layout-outlook .user-folder-item.active .folder-item-icon[data-v-c768701a] { color: var(--accent-primary) !important; } .sidebar.sidebar-layout-outlook .user-folder-item.active .folder-count[data-v-c768701a] { color: var(--accent-primary); } .sidebar.sidebar-layout-outlook .user-folder-item.active[data-v-c768701a]::before, .sidebar.sidebar-layout-outlook .personal-inbox-item.active[data-v-c768701a]::before { top: 4px; bottom: 4px; } /* New mail button (design's .new-mail) — indigo CTA. */ .sidebar.sidebar-layout-outlook .sidebar-newmail-btn[data-v-c768701a] { /* V20.199ft — Outlook margin per the design (.new-mail). width:auto so the 12px side margins don't overflow: the base rule sets width:100%, which + the side margins made the button 24px wider than the sidebar = the "se ve mal" overflow. With width:auto the block-level flex button fills the sidebar minus the margins. */ margin: 10px 12px 8px; width: auto; } /* Personal inbox avatar (design's .fava) — small round. */ .sidebar.sidebar-layout-outlook .inbox-item-avatar[data-v-c768701a] { width: 21px; height: 21px; flex: none; border-radius: 50%; /* V20.199gh — the initials were invisible: the Outlook rule set size/font but NOT color/centering, so "JA" inherited a dark color uncentered. Mirror the premium avatar so the white initials show. */ display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; user-select: none; } /* Markers (design's .fmk) — small colored square instead of a round dot. */ .sidebar.sidebar-layout-outlook .sidebar-tag-dot[data-v-c768701a] { width: 13px; height: 13px; border-radius: 3px; } /* Inline search bar */ .inline-search-bar[data-v-c768701a] { display: flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 8px; background: var(--bg-hover); border-radius: 6px; border: 1px solid transparent; transition: all 0.15s ease; flex: 1; min-width: 0; } .inline-search-bar.expanded[data-v-c768701a] { border-color: var(--accent-primary); background: var(--bg-primary); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08); } .inline-search-icon[data-v-c768701a] { color: var(--text-quaternary); flex-shrink: 0; } .inline-search-input[data-v-c768701a] { flex: 1; border: none; background: transparent; outline: none; font-size: 12px; color: var(--text-primary); font-family: inherit; min-width: 0; } .inline-search-input[data-v-c768701a]::placeholder { color: var(--text-quaternary); } .inline-search-popout[data-v-c768701a], .inline-search-close[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: none; border: none; color: var(--text-quaternary); cursor: pointer; border-radius: 50%; transition: all 0.1s ease; } .inline-search-popout[data-v-c768701a]:hover, .inline-search-close[data-v-c768701a]:hover { background: var(--bg-active); color: var(--text-primary); } /* Advanced search panel */ .advanced-search-panel[data-v-c768701a] { padding: 12px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border-secondary); } .search-filters[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; } .search-filter-row[data-v-c768701a] { display: flex; align-items: center; gap: 10px; } .search-filter-row label[data-v-c768701a]:first-child { font-size: 12px; color: var(--text-tertiary); min-width: 70px; flex-shrink: 0; } .search-filter-input[data-v-c768701a] { flex: 1; padding: 5px 8px; border: none; border-bottom: 1px solid var(--border-primary); background: transparent; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; transition: border-color 0.1s ease; } .search-filter-input[data-v-c768701a]:focus { border-bottom-color: var(--accent-primary); } .search-filter-select[data-v-c768701a] { flex: 1; padding: 5px 8px; border: none; border-bottom: 1px solid var(--border-primary); background: transparent; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; cursor: pointer; } .search-date-range[data-v-c768701a] { display: flex; align-items: center; gap: 8px; flex: 1; } .search-date-input[data-v-c768701a] { flex: 1; } .search-date-separator[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary); } .search-checkbox[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; } .search-checkbox input[type="checkbox"][data-v-c768701a] { accent-color: var(--accent-primary); } .search-from-to-group[data-v-c768701a] { position: relative; display: flex; flex-direction: column; gap: 8px; } .search-swap-btn[data-v-c768701a] { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 50%; color: var(--text-tertiary); cursor: pointer; transition: all 0.15s ease; z-index: 1; } .search-swap-btn[data-v-c768701a]:hover { background: var(--accent-primary); border-color: var(--accent-primary); color: white; transform: translateY(-50%) rotate(180deg); } .search-hint-container[data-v-c768701a] { position: relative; } .search-hints-dropdown[data-v-c768701a] { position: absolute; top: calc(100% + 4px); left: 80px; right: 0; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 100; max-height: 220px; overflow-y: auto; padding: 4px; } .search-hint-item[data-v-c768701a] { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.1s ease; } .search-hint-item[data-v-c768701a]:hover { background: var(--bg-hover); } .search-hint-name[data-v-c768701a] { font-size: 13px; font-weight: 500; color: var(--text-primary); } .search-hint-email[data-v-c768701a] { font-size: 12px; color: var(--text-secondary); } .search-actions[data-v-c768701a] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .search-action-btn[data-v-c768701a] { padding: 6px 14px; font-size: 12px; font-weight: 500; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.1s ease; } .search-btn-clear[data-v-c768701a] { background: transparent; border: 1px solid var(--border-primary); color: var(--text-secondary); } .search-btn-clear[data-v-c768701a]:hover { background: var(--bg-hover); } .search-btn-search[data-v-c768701a] { display: flex; align-items: center; gap: 5px; background: var(--accent-primary); border: none; color: white; } .search-btn-search[data-v-c768701a]:hover { filter: brightness(1.1); } /* Sort dropdown */ .sort-dropdown-container[data-v-c768701a] { position: relative; } .sort-dropdown[data-v-c768701a] { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 100; padding: 4px; } .sort-option[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); border-radius: 7px; cursor: pointer; transition: background 0.1s ease; } .sort-option[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .sort-option.active[data-v-c768701a] { color: var(--text-primary); } .sort-option svg[data-v-c768701a] { color: var(--accent-primary); } /* V20.199gn — Display picker: clean premium rows with a mini framed PREVIEW thumbnail of each layout (no clunky icon tiles). Selected row tints indigo and turns the preview + title + check indigo. */ .display-density-dropdown[data-v-c768701a] { min-width: 248px; padding: 6px; border-radius: 13px; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.05); } .display-density-heading[data-v-c768701a] { padding: 7px 10px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-quaternary); } .display-density-option[data-v-c768701a] { display: flex; align-items: center; /* V20.199gu — override .sort-option's `justify-content: space-between`, which was pushing the label to the far right on rows WITHOUT a check (Premium / Outlook) so the titles didn't line up (Julio: "los labels no estan alineados ... esos espacios"). Pack icon + text left; the check floats right via its own margin-left:auto. */ justify-content: flex-start; gap: 12px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background 0.12s ease; } .display-density-option[data-v-c768701a]:hover { background: var(--bg-hover); } .display-density-option.active[data-v-c768701a] { background: var(--bg-selected); } /* V20.199gt — mini-preview thumbnail: the container is a framed "screen" (light fill + hairline border), strokes are clearly visible (was washed-out --text-quaternary). Active → indigo content on a light-indigo screen. */ .display-density-icon[data-v-c768701a] { flex: none; width: 44px; height: 33px; display: grid; place-items: center; border-radius: 7px; background: var(--bg-secondary); border: 1px solid var(--border-secondary); color: var(--text-secondary); transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .display-density-icon svg[data-v-c768701a] { width: 40px; height: 30px; } .display-density-option:hover .display-density-icon[data-v-c768701a] { color: var(--text-primary); border-color: var(--border-primary); } .display-density-option.active .display-density-icon[data-v-c768701a] { color: var(--accent-primary); background: var(--bg-selected); border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); } .display-density-text[data-v-c768701a] { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .display-density-title[data-v-c768701a] { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--text-primary); } .display-density-option.active .display-density-title[data-v-c768701a] { color: var(--accent-primary); } .display-density-sub[data-v-c768701a] { font-size: 11px; line-height: 1.35; color: var(--text-tertiary); } .display-density-check[data-v-c768701a] { margin-left: auto; flex: none; color: var(--accent-primary); } /* Resize handle */ .resize-handle[data-v-c768701a] { width: 4px; cursor: col-resize; background: transparent; flex-shrink: 0; transition: background 0.2s ease; position: relative; z-index: 10; } .resize-handle[data-v-c768701a]::after { content: ''; position: absolute; top: 0; left: -3px; width: 10px; height: 100%; } .resize-handle[data-v-c768701a]:hover { background: var(--accent-primary); } /* ========================================= 0. LAYOUT DEL DETALLE DE CONVERSACIÓN ========================================= */ .email-detail[data-v-c768701a] { position: relative; } .detail-body[data-v-c768701a] { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; /* V20.199hg — keep a gap between the toolbar and an email card when it scrolls into view (on open / expand) so the card doesn't stick to the panel. This was only on Outlook (gm); now global → applies to Classic + Premium too (Julio: "el email card se pega con el panel"). The Outlook override (12px) is identical. */ scroll-padding-top: 12px; } /* WhatsApp reading pane — the WA component pair owns its own internal scroll (message list scrolls, composer stays pinned), so the outer .detail-body must NOT scroll on its own. Without this, the composer slides up with the conversation history when the user scrolls. */ .detail-body.is-whatsapp[data-v-c768701a] { overflow: hidden; padding: 0; } .wa-pane[data-v-c768701a] { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; height: 100%; } .wa-pane-scroll[data-v-c768701a] { /* WhatsAppMessageList already sets its own overflow-y:auto + min-height:0; this just makes sure it absorbs all remaining vertical space and the composer below it doesn't get pushed off-screen on shorter viewports. */ flex: 1 1 0; min-height: 0; } .wa-pane-footer[data-v-c768701a] { /* WhatsAppCommentBox stays pinned to the bottom of the reading pane regardless of message-list length. flex-shrink:0 is the load-bearing rule — without it, on a viewport too short to show the whole composer, flex would squish the composer instead of letting the message-list scroll. */ flex-shrink: 0; } /* Floating scroll navigation buttons */ .scroll-nav-btn[data-v-c768701a] { position: absolute; z-index: 20; right: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(79, 70, 229, 0.15); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(79, 70, 229, 0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #6366f1; transition: all 0.2s; animation: scrollBtnPulse-c768701a 2s ease-in-out 3; } .scroll-nav-btn[data-v-c768701a]:hover { background: var(--surface-raised, #ffffff); box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25); border-color: rgba(79, 70, 229, 0.4); transform: scale(1.1); animation: none; } .scroll-nav-top[data-v-c768701a] { top: 60px; } .scroll-nav-bottom[data-v-c768701a] { bottom: 70px; } @keyframes scrollBtnPulse-c768701a { 0%, 100% { box-shadow: 0 2px 10px rgba(79, 70, 229, 0.12); } 50% { box-shadow: 0 2px 18px rgba(79, 70, 229, 0.3); } } .scroll-btn-fade-enter-active[data-v-c768701a] { transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .scroll-btn-fade-leave-active[data-v-c768701a] { transition: opacity 0.15s ease, transform 0.15s ease; } .scroll-btn-fade-enter-from[data-v-c768701a] { opacity: 0; transform: scale(0.5); } .scroll-btn-fade-leave-to[data-v-c768701a] { opacity: 0; transform: scale(0.8); } /* ========================================= 1. ESTILOS DE CONTENIDO DEL EMAIL (HTML/TEXTO) ========================================= */ .email-html-content[data-v-c768701a] { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; overflow-x: hidden; } .email-html-content[data-v-c768701a] * { max-width: 100%; } .email-html-content[data-v-c768701a] img { max-width: 100%; height: auto; display: inline-block; margin: 10px 0; } .email-html-content[data-v-c768701a] table { border-collapse: collapse; width: 100% !important; max-width: 100% !important; margin: 10px 0; table-layout: fixed; } .email-html-content[data-v-c768701a] table td, .email-html-content[data-v-c768701a] table th { padding: 8px; word-wrap: break-word; overflow-wrap: break-word; } .email-html-content[data-v-c768701a] a { text-decoration: none; } .email-html-content[data-v-c768701a] a:hover { text-decoration: underline; } .email-html-content[data-v-c768701a] p { margin: 0 0 10px 0; } .email-html-content[data-v-c768701a] h1, .email-html-content[data-v-c768701a] h2, .email-html-content[data-v-c768701a] h3, .email-html-content[data-v-c768701a] h4, .email-html-content[data-v-c768701a] h5, .email-html-content[data-v-c768701a] h6 { margin: 15px 0 10px 0; font-weight: 600; } .email-html-content[data-v-c768701a] ul, .email-html-content[data-v-c768701a] ol { margin: 10px 0; padding-left: 20px; } .email-html-content[data-v-c768701a] blockquote { margin: 10px 0; padding: 10px 20px; } .email-html-content[data-v-c768701a] pre { padding: 10px; border-radius: 4px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 13px; max-width: 100%; } .email-html-content[data-v-c768701a] code { padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 13px; } .email-html-content[data-v-c768701a] div { max-width: 100%; overflow-wrap: break-word; } .email-text-content[data-v-c768701a] { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-primary); word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; overflow-x: hidden; } .email-text-content p[data-v-c768701a] { color: var(--text-primary); margin: 0 0 10px 0; } .email-text-content .email-text-pre[data-v-c768701a] { color: var(--text-primary); font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; margin: 0; } /* Anchors enter via v-html so scoped-style hashes don't reach them — use :deep() */ .email-text-content .email-text-pre[data-v-c768701a] a { color: var(--accent-primary, #4f46e5); text-decoration: underline; word-break: break-all; } .email-text-content .email-text-pre[data-v-c768701a] a:hover { opacity: 0.85; } /* ========================================= 2. DETALLES Y CABECERAS (VIEWER) ========================================= */ .detail-full-fields[data-v-c768701a] { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; } /* ========================================= INLINE COMPOSE (in reading panel) ========================================= */ .scheduled-banner[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(79, 70, 229, 0.06); border: 1px solid rgba(79, 70, 229, 0.12); border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: var(--accent-primary); } .scheduled-banner-time[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary); } .scheduled-cancel-btn[data-v-c768701a] { margin-left: auto; padding: 3px 10px; font-size: 11px; font-weight: 500; color: #ef4444; background: rgba(239, 68, 68, 0.08); border: none; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.1s ease; } .scheduled-cancel-btn[data-v-c768701a]:hover { background: rgba(239, 68, 68, 0.15); } .inline-compose-wrapper[data-v-c768701a] { /* `detail-body` is a flex:1 column; if the thread content is shorter than the available height, the leftover space used to show as a `bg-secondary` gap under the compose. Push the compose to the bottom so any slack lives above it (against the email card) instead. */ margin-top: auto; margin-bottom: 0; padding-top: 12px; } /* Typing indicator — "X is replying" pill in the reading pane. `position: sticky; bottom: 12px` pins it to the bottom of the scrollable detail-body viewport so it stays visible regardless of how far down the thread is. `align-self: center` centers it on the horizontal axis instead of full-width. Three CSS-keyframe dots for the animation — no JS timer to leak. */ /* V20.222 — "viewing" presence bar: same shape as the typing bar but in-flow at the top of the reading pane, neutral tone (read-only signal). */ .viewing-indicator-bar[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 5px 12px; margin: 0 0 6px; background: var(--bg-secondary, #f5f5f7); border: 1px solid var(--border-secondary, #eeeef2); border-radius: 999px; font-size: 11.5px; color: var(--text-tertiary, #71717a); width: fit-content; max-width: 90%; } .viewing-eye[data-v-c768701a] { width: 13px; height: 13px; color: var(--text-quaternary, #a1a1aa); flex-shrink: 0; } .typing-indicator-bar[data-v-c768701a] { position: sticky; bottom: 12px; align-self: center; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 14px; margin: 8px 0 4px; background: var(--surface-raised); border: 1px solid var(--border-primary); border-radius: 999px; font-size: 12px; color: var(--text-secondary); width: fit-content; max-width: 90%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); backdrop-filter: saturate(180%); } /* When the inline compose is open in fullscreen mode, the compose wrapper grows to fill the entire detail-body. A sticky-bottom pill would collide with the compose toolbar; revert to in-flow positioning so the indicator sits naturally above the compose. */ .detail-body.compose-fullscreen .typing-indicator-bar[data-v-c768701a] { position: static; margin-bottom: 0; } .typing-indicator-avatars[data-v-c768701a] { display: inline-flex; align-items: center; } .typing-indicator-avatar[data-v-c768701a] { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: white; border: 1.5px solid var(--surface-raised); margin-left: -4px; } .typing-indicator-avatar[data-v-c768701a]:first-child { margin-left: 0; } .typing-indicator-text[data-v-c768701a] { font-weight: 500; } /* V20.221b — Take over button in the collision banner */ .take-over-btn[data-v-c768701a] { margin-left: auto; flex-shrink: 0; padding: 3px 11px; border: 1px solid var(--accent-primary, #4f46e5); background: var(--accent-primary, #4f46e5); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: filter 0.12s, opacity 0.12s; } .take-over-btn[data-v-c768701a]:hover:not(:disabled) { filter: brightness(1.08); } .take-over-btn[data-v-c768701a]:disabled { opacity: 0.6; cursor: not-allowed; } .typing-indicator-dots[data-v-c768701a] { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; } .typing-indicator-dot[data-v-c768701a] { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); animation: typing-dot-bounce-c768701a 1.2s infinite ease-in-out; } .typing-indicator-dot[data-v-c768701a]:nth-child(2) { animation-delay: 0.15s; } .typing-indicator-dot[data-v-c768701a]:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-dot-bounce-c768701a { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ── Front-style expanded inline compose ────────────────────────────── When the inline compose is open, it expands to fill the full visible height of the reading panel — giving the user a generous writing surface (like Front). Messages stay above in the DOM; scrolling up still reveals the original thread. The quoted content is also reachable through the "..." pill inside the editor. */ /* V20.242 — DEFINITIVE toolbar/Send-persistence fix. The compose takes over the reading pane while open: detail-body stops scrolling and the compose wrapper is positioned to fill the pane EXACTLY (absolute inset:0). This is what guarantees the footer stays pinned — the previous `flex:1 0 auto; min-height:100%` let the wrapper OVERGROW with a long email (flex-shrink:0 + min-height:100%), so the editor never hit its internal-scroll cap and the toolbar/Send rode the content below the fold. `sticky` couldn't save it either: the footer is the last child of compose-window, whose box ends exactly at the footer, so there was no slack for sticky to lift into. With the pane-sized wrapper, the flex chain (compose-window→compose-body→editor-container:overflow-y:auto) caps to the viewport, the EDITOR scrolls internally, and the footer (last flex child, flex:0) is always at the bottom of the pane. */ .detail-body.compose-fullscreen[data-v-c768701a] { position: relative; /* V20.245 — the thread stays VISIBLE and scrollable; the compose docks at the bottom (sticky) instead of covering the whole reading pane. Was `overflow:hidden` + wrapper `inset:0` (absolute full-fill), which mounted the reply ON TOP of the conversation and let the thread's own attachment/header icons bleed through the gaps. */ overflow-y: auto; } .detail-body.compose-fullscreen .inline-compose-wrapper[data-v-c768701a] { position: sticky; bottom: 0; z-index: 20; display: flex; flex-direction: column; /* Dock height — caps the compose so the conversation shows above it. The internal flex chain (compose-window→compose-body→editor-container:auto) keeps the editor scrolling internally and the Send footer pinned at the bottom of the dock. */ max-height: 68vh; margin: 10px 0 0 !important; padding: 0; background: var(--bg-primary, #fafafc); box-shadow: 0 -10px 18px -10px rgba(15, 23, 42, 0.14); } /* The contact-hint lives inside the wrapper now (see template). In fullscreen mode the compose-window shrinks to accommodate the banner thanks to flex:1, so the whole compose still fits the viewport. */ .detail-body.compose-fullscreen .inline-compose-wrapper > .contact-hint-bar--inline[data-v-c768701a] { flex: 0 0 auto; margin-bottom: 8px; } .detail-body.compose-fullscreen .inline-compose-wrapper > .compose-window.inline-compose[data-v-c768701a] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .detail-body.compose-fullscreen .inline-compose .compose-body[data-v-c768701a] { flex: 1 1 auto; min-height: 0; /* Disable the base compose-body's internal scroll — let editor-container own the scroll so the toolbar stays pinned at the bottom. */ overflow: visible !important; } .detail-body.compose-fullscreen .inline-compose .editor-container[data-v-c768701a] { /* Let the editor breathe into the full panel height. overflow:auto keeps the toolbar pinned while long quoted threads remain scrollable inside the editor. */ flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; } .inline-compose[data-v-c768701a] { width: 100% !important; height: auto !important; max-height: none !important; background: var(--surface-raised, #ffffff) !important; border: 1px solid var(--border-primary, rgba(79, 70, 229, 0.15)) !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; } /* The base .editor-container caps at 350px with internal scroll. Inline we don't want an internal scroll at all — the quote-toggle pill lives below editor-content inside editor-body-wrapper, and an internal scroll would push the pill out of view the moment the quoted thread expands. Let the editor grow naturally; the outer detail-body scrolls if needed. */ .inline-compose .editor-container[data-v-c768701a] { max-height: none !important; min-height: 120px !important; overflow: visible !important; } .inline-compose .compose-header[data-v-c768701a], .inline-compose .compose-footer[data-v-c768701a], .inline-compose .compose-body[data-v-c768701a], .inline-compose .compose-field[data-v-c768701a], .inline-compose .editor-container[data-v-c768701a], .inline-compose .editor-body-wrapper[data-v-c768701a], .inline-compose .editor-content[data-v-c768701a], .inline-compose .compose-field input[data-v-c768701a], .inline-compose .compose-field select[data-v-c768701a], .inline-compose .field-prefix[data-v-c768701a], .inline-compose .field-input[data-v-c768701a], .inline-compose .subject-input[data-v-c768701a], .inline-compose .from-selector-container[data-v-c768701a], .inline-compose .from-selector[data-v-c768701a], .inline-compose .chips-container[data-v-c768701a], .inline-compose .attachments-section-compose[data-v-c768701a], .inline-compose .compose-toolbar-top[data-v-c768701a], .inline-compose .compose-toolbar-bottom[data-v-c768701a], .inline-compose .toolbar-select[data-v-c768701a], .inline-compose .add-signature-row[data-v-c768701a], .inline-compose .signature-container[data-v-c768701a], .inline-compose .smart-reply-row[data-v-c768701a], .inline-compose .formatting-bar[data-v-c768701a], .inline-compose .ai-toolbar[data-v-c768701a] { background: transparent !important; } /* V20.240b — pin the inline-compose toolbar + Send to the bottom of the reading-pane scroll area so a long email never pushes it below the fold (the user had to scroll down to reach Send / the formatting tools). In fullscreen mode the editor owns the scroll and the footer is already pinned; sticky covers the non-fullscreen path where detail-body scrolls. Needs a SOLID background (overrides the transparent rule above) so the editor content doesn't show through behind the sticky bar. */ .inline-compose .compose-footer[data-v-c768701a] { position: sticky; bottom: 0; z-index: 6; background: var(--surface-raised) !important; border-top: 1px solid var(--border-secondary); } /* Unified email card wrapper */ .email-card-wrapper[data-v-c768701a] { background: var(--surface-raised, #ffffff); border: 1px solid var(--border-primary, rgba(0, 0, 0, 0.06)); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04)); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; color: var(--text-primary, #3f3f46); } .email-card-wrapper[data-v-c768701a]:hover { box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.08)); border-color: var(--border-hover, rgba(0, 0, 0, 0.1)); transform: translateY(-1px); } /* V20.243 — Outlook-style sort columns bar pinned at the top of the list scroll area (the class lands on SortColumnsBar's root via Vue scope id). */ .sort-cols-sticky[data-v-c768701a] { position: sticky; top: 0; z-index: 7; } .email-card-wrapper[data-v-c768701a]:not(.expanded) { cursor: pointer; } /* ── Inbox Zero Celebration ── */ /* V20.190g — Search-mode empty state (replaces wrongly-firing inbox-zero when search returns no results). Compact + scannable so user immediately sees what they searched for + can act. */ .search-no-results[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 24px; text-align: center; gap: 12px; color: var(--text-tertiary, #71717a); } .search-no-results .empty-icon-svg[data-v-c768701a] { width: 36px; height: 36px; opacity: 0.4; fill: none; stroke: currentColor; stroke-width: 1.5; } .search-no-results p[data-v-c768701a] { margin: 0; font-size: 14px; } .search-no-results p strong[data-v-c768701a] { color: var(--text-primary, #3f3f46); font-weight: 600; } .search-no-results-hint[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary, #a1a1aa); } .inbox-zero[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 24px; text-align: center; position: relative; } .inbox-zero.iz-animated[data-v-c768701a] { animation: izFadeIn-c768701a 0.5s ease both; } @keyframes izFadeIn-c768701a { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .iz-confetti[data-v-c768701a] { position: absolute; top: 40%; left: 50%; pointer-events: none; } .iz-particle[data-v-c768701a] { position: absolute; width: var(--size); height: var(--size); background: var(--c); border-radius: 50%; animation: izBurst-c768701a 1.2s var(--delay) ease-out both; } @keyframes izBurst-c768701a { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; } } .iz-emoji[data-v-c768701a] { font-size: 52px; line-height: 1; margin-bottom: 16px; } .iz-emoji.iz-bounce[data-v-c768701a] { animation: izBounce-c768701a 0.6s ease both; } @keyframes izBounce-c768701a { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 50% { transform: scale(1.2) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .iz-title[data-v-c768701a] { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .iz-sub[data-v-c768701a] { font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; } .iz-tips[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; } .iz-tip[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-quaternary); } .iz-tip svg[data-v-c768701a] { color: var(--accent-primary); opacity: 0.5; flex-shrink: 0; } /* Reading panel inbox zero */ .iz-reading-panel[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; justify-content: center; } .iz-rp-emoji[data-v-c768701a] { font-size: 72px; line-height: 1; margin-bottom: 24px; } .iz-rp-emoji.iz-bounce[data-v-c768701a] { animation: izBounce-c768701a 0.6s ease both; } .iz-rp-title[data-v-c768701a] { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.02em; } .iz-rp-sub[data-v-c768701a] { font-size: 14px; color: var(--text-tertiary); } .email-card-header[data-v-c768701a] { display: flex; align-items: flex-start; gap: 12px; /* Sprint U7b — drag-to-ERP. Without `user-select: none` the browser interprets mousedown on the sender/subject text as the start of a text selection, which races with `draggable="true"` and the drag never starts. The body remains selectable for normal copy use. */ user-select: none; -webkit-user-select: none; } .email-card-header .email-card-avatar[data-v-c768701a] { margin-top: 2px; } /* V20.206 — the header is user-select:none (for drag-to-ERP), but the sender + recipient EMAIL ADDRESSES must be selectable so the user can copy them straight from the compact line. Override on the text-bearing spans only; drag still starts from the avatar / empty header area. The click handlers (toggleMessageExpansion / openContactDetail / toggleEmailDetails) bail when a text selection is active, so selecting doesn't toggle. */ .email-card-sender[data-v-c768701a], .email-card-sender-email[data-v-c768701a], .email-card-recipients[data-v-c768701a], .email-card-recipients .email-card-label[data-v-c768701a], .email-card-recipients-expanded[data-v-c768701a], .email-card-recipients-expanded .recipients-detail-line[data-v-c768701a], .email-card-recipients-expanded .recipients-detail-label[data-v-c768701a], .email-card-recipients-expanded .recipients-detail-value[data-v-c768701a] { user-select: text !important; -webkit-user-select: text !important; } /* V20.213 — the expanded From/To/Cc/Date block inherited user-select:none from .email-card-header AND showed a pointer cursor, so the user couldn't select an address ("me sale una manito y no me deja seleccionar"). Force text selection + a text caret on the whole detail block. draggable=false + @dragstart.prevent on the container (template) stops the native eml/ERP drag from hijacking the gesture. */ .email-card-recipients-expanded[data-v-c768701a], .email-card-recipients-expanded .recipients-detail-line[data-v-c768701a], .email-card-recipients-expanded .recipients-detail-value[data-v-c768701a], .email-card-recipients .email-card-label[data-v-c768701a], .email-card-sender-email[data-v-c768701a] { cursor: text; } .email-card-avatar[data-v-c768701a] { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; } .email-card-info[data-v-c768701a] { flex: 1; min-width: 0; } .email-card-sender[data-v-c768701a] { font-size: 14px; font-weight: 600; color: var(--text-primary, #3f3f46); letter-spacing: -0.01em; } .email-card-sender-email[data-v-c768701a] { font-size: 12.5px; font-weight: 400; color: var(--text-tertiary, #71717a); margin-left: 4px; } .email-card-sender-as[data-v-c768701a] { font-size: 13px; font-weight: 400; color: var(--text-tertiary, #71717a); } .email-card-avatar-img[data-v-c768701a] { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .cdp-clickable[data-v-c768701a] { cursor: pointer; transition: color 0.12s; } .cdp-clickable[data-v-c768701a]:hover { color: #6366f1; } .email-card-preview[data-v-c768701a] { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .email-card-recipients[data-v-c768701a] { font-size: 12px; color: var(--text-secondary, #52525b); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; gap: 4px; border-radius: 4px; padding: 1px 4px 1px 0; transition: color 0.1s; } .email-card-recipients[data-v-c768701a]:hover { color: var(--text-secondary); } .recipients-expand-icon[data-v-c768701a] { flex-shrink: 0; color: var(--text-quaternary); margin-left: 2px; } .email-card-recipients .email-card-label[data-v-c768701a] { color: var(--text-tertiary, #71717a); font-weight: 500; } /* Expanded recipients detail view */ .email-card-recipients-expanded[data-v-c768701a] { margin-top: 6px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; background: var(--bg-secondary, #f8f8fa); border-radius: 10px; border: 1px solid var(--border-secondary, #f0f0f4); cursor: pointer; transition: border-color 0.12s; } .email-card-recipients-expanded[data-v-c768701a]:hover { border-color: var(--border-primary, #e4e4e7); } .recipients-detail-line[data-v-c768701a] { display: flex; gap: 8px; line-height: 1.5; } .recipients-detail-label[data-v-c768701a] { color: var(--text-quaternary, #a1a1aa); min-width: 34px; flex-shrink: 0; font-weight: 500; font-size: 12px; } .recipients-detail-value[data-v-c768701a] { color: var(--text-secondary, #52525b); word-break: break-word; user-select: text; -webkit-user-select: text; } /* V20.215 — instant copy button per address row */ .detail-copy-btn[data-v-c768701a] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 5px; background: transparent; color: var(--text-quaternary, #a1a1aa); cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; } .recipients-detail-line:hover .detail-copy-btn[data-v-c768701a] { opacity: 1; } .detail-copy-btn[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); color: var(--text-secondary, #52525b); } .detail-copy-btn.copied[data-v-c768701a] { opacity: 1; color: #16a34a; } .recipients-collapse-btn[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 3px 8px; background: none; border: none; font-size: 11px; color: var(--text-quaternary, #a1a1aa); border-radius: 4px; cursor: pointer; transition: all 0.12s; cursor: pointer; border-radius: 4px; transition: color 0.1s; align-self: flex-start; } .recipients-collapse-btn[data-v-c768701a]:hover { color: var(--text-secondary); background: var(--bg-active); } .email-card-meta[data-v-c768701a] { position: relative; display: flex; align-items: center; gap: 4px; flex-shrink: 0; align-self: flex-start; } .email-read-badge[data-v-c768701a] { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 6px; background: rgba(99, 102, 241, 0.12); color: #6366f1; text-transform: uppercase; position: relative; } .email-read-badge-clickable[data-v-c768701a] { cursor: pointer; } .email-read-badge-clickable[data-v-c768701a]:hover { background: rgba(99, 102, 241, 0.2); } .read-popover[data-v-c768701a] { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); padding: 8px 0; min-width: 220px; max-width: 280px; z-index: 100; } .read-popover-loading[data-v-c768701a], .read-popover-empty[data-v-c768701a] { padding: 10px 14px; font-size: 12px; color: var(--text-tertiary, #71717a); } .read-popover-row[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 6px 14px; } .read-popover-row[data-v-c768701a]:hover { background: var(--bg-secondary, #f5f5f7); } .read-popover-avatar[data-v-c768701a] { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(99, 102, 241, 0.12); color: #6366f1; font-size: 11px; font-weight: 600; } .read-popover-avatar-img[data-v-c768701a] { width: 100%; height: 100%; object-fit: cover; } .read-popover-info[data-v-c768701a] { display: flex; flex-direction: column; min-width: 0; } .read-popover-name[data-v-c768701a] { font-size: 13px; color: var(--text-primary, #3f3f46); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .read-popover-time[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary, #a1a1aa); } .email-card-time[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary, #71717a); white-space: nowrap; } .email-card-time-clickable[data-v-c768701a] { cursor: pointer; } .email-card-time-clickable[data-v-c768701a]:hover { color: var(--text-secondary, #52525b); } .email-card-attachment-icon[data-v-c768701a] { color: var(--text-quaternary); flex-shrink: 0; } .detail-line[data-v-c768701a] { font-size: 13px; display: flex; gap: 8px; } .detail-label[data-v-c768701a] { color: var(--text-tertiary); width: 60px; flex-shrink: 0; } .detail-value-full[data-v-c768701a] { color: var(--text-secondary); } /* ========================================= 3. COMPOSE WINDOW & MODALS ========================================= */ .modal-overlay[data-v-c768701a] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } .modal-overlay[data-v-c768701a]:has(.confirmation-dialog) { background-color: rgba(0, 0, 0, 0.18); backdrop-filter: blur(3px); z-index: 10000; } .modal-overlay:has(.confirmation-dialog) .modal[data-v-c768701a] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: none; } /* Subscribers Modal */ .subscribers-modal-overlay[data-v-c768701a] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } .subscribers-modal[data-v-c768701a] { width: 400px; max-height: 500px; background-color: var(--bg-primary); border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; } .subscribers-modal .modal-header[data-v-c768701a] { padding: 16px; border-bottom: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center; } .subscribers-modal .modal-header h3[data-v-c768701a] { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); } .subscribers-modal .close-btn[data-v-c768701a] { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 4px; display: flex; align-items: center; justify-content: center; } .subscribers-modal .close-btn[data-v-c768701a]:hover { color: var(--text-primary); } .subscribers-modal .modal-body[data-v-c768701a] { padding: 16px; overflow-y: auto; flex: 1; } .subscribers-modal .loading-state[data-v-c768701a], .subscribers-modal .empty-state[data-v-c768701a] { text-align: center; color: var(--text-tertiary); padding: 24px; } .subscribers-list[data-v-c768701a] { display: flex; flex-direction: column; gap: 12px; } .subscriber-item[data-v-c768701a] { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; background: var(--bg-secondary); } .subscriber-avatar[data-v-c768701a] { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; } .subscriber-info[data-v-c768701a] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .subscriber-name[data-v-c768701a] { font-weight: 500; color: var(--text-primary); font-size: 14px; } .subscriber-email[data-v-c768701a] { color: var(--text-tertiary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .subscription-type[data-v-c768701a] { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-hover); color: var(--text-secondary); text-transform: capitalize; flex-shrink: 0; } .shared-inbox-note[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 12px; margin-top: 12px; background: var(--bg-secondary); border-radius: 6px; color: var(--text-secondary); font-size: 13px; } .shared-inbox-note svg[data-v-c768701a] { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; } .compose-window[data-v-c768701a] { width: 800px; height: 650px; background-color: var(--surface-raised); border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05); transition: box-shadow 0.2s; position: relative; } /* V20.240/240c — the MODAL compose is a fixed-height flex column so its body scrolls and the footer stays pinned. Scoped with :not(.inline-compose) — the inline compose reuses .compose-window but must NOT get overflow:hidden, or it becomes its own clip container and the footer's sticky positioning anchors to it (no internal scroll) instead of the reading-pane detail-body. */ .compose-window[data-v-c768701a]:not(.inline-compose) { display: flex; flex-direction: column; overflow: hidden; } .compose-drop-highlight[data-v-c768701a] { box-shadow: 0 0 0 3px #6366f1, 0 24px 48px -12px rgba(0, 0, 0, 0.18); } .compose-header[data-v-c768701a] { background-color: var(--surface-raised); padding: 10px 16px; border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--border-secondary); display: flex; justify-content: space-between; align-items: center; } .compose-title[data-v-c768701a] { color: var(--text-primary); font-weight: 600; font-size: 14px; } .compose-controls[data-v-c768701a] { display: flex; gap: 4px; } .win-btn[data-v-c768701a] { background: none; border: none; color: var(--text-quaternary); cursor: pointer; padding: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.1s ease; } .win-btn[data-v-c768701a]:hover { color: var(--text-primary); background: var(--bg-hover); } .win-btn.close-btn[data-v-c768701a]:hover { background: #ef4444; color: white; } .compose-body[data-v-c768701a] { flex: 1; background-color: var(--surface-raised); display: flex; flex-direction: column; padding: 0 20px; overflow-y: auto; min-height: 0; position: relative; } .compose-field[data-v-c768701a] { border-bottom: 1px solid var(--border-secondary); padding: 6px 0; display: flex; align-items: center; position: relative; min-height: 36px; flex-wrap: wrap; flex-shrink: 0; transition: border-color 0.15s ease; } .compose-field[data-v-c768701a]:focus-within { border-bottom: 2px solid var(--accent-primary); padding-bottom: 5px; } .field-prefix[data-v-c768701a] { color: var(--text-tertiary); margin-right: 8px; font-size: 13px; padding: 3px 10px; border: 1px solid var(--border-primary); border-radius: 4px; flex-shrink: 0; cursor: default; } .field-prefix-toggle[data-v-c768701a] { cursor: pointer; transition: color 0.15s ease; } .field-prefix-toggle[data-v-c768701a]:hover { color: var(--text-secondary); } .chips-container[data-v-c768701a] { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; } .email-chip[data-v-c768701a] { background-color: var(--bg-tertiary); color: var(--text-primary); border-radius: 20px; padding: 3px 8px 3px 10px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-secondary); user-select: none; transition: border-color 0.1s ease; cursor: default; } .email-chip[data-v-c768701a]:hover { border-color: var(--border-hover); } /* Chip copy feedback — double-click to copy email */ .email-chip.chip-copied[data-v-c768701a] { background-color: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.4) !important; color: #16a34a !important; animation: chipCopiedPulse-c768701a 0.3s ease; } @keyframes chipCopiedPulse-c768701a { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .chips-more[data-v-c768701a] { font-size: 12px; font-weight: 500; color: var(--accent-primary); cursor: pointer; padding: 3px 10px; border-radius: 20px; background: var(--bg-selected); white-space: nowrap; user-select: none; } .chips-more[data-v-c768701a]:hover { background: var(--accent-primary); color: white; } .chips-collapse[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary); cursor: pointer; padding: 3px 8px; border-radius: 20px; white-space: nowrap; user-select: none; } .chips-collapse[data-v-c768701a]:hover { color: var(--accent-primary); background: var(--bg-hover); } .sender-chip[data-v-c768701a] { background-color: var(--accent-primary); border-color: var(--accent-primary-hover); color: var(--color-white); } .from-selector[data-v-c768701a] { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 0; } .from-email-simple[data-v-c768701a] { font-size: 13px; color: var(--text-primary); } .from-name-inline[data-v-c768701a] { font-size: 13px; font-weight: 600; color: var(--text-primary); } .from-email-inline[data-v-c768701a] { font-size: 13px; color: var(--text-tertiary); } .from-chevron[data-v-c768701a] { width: 14px; height: 14px; color: var(--text-quaternary); margin-left: 2px; transition: transform 0.15s ease; } .from-chevron.rotated[data-v-c768701a] { transform: rotate(180deg); } .chip-remove[data-v-c768701a] { cursor: pointer; color: var(--text-quaternary); font-weight: bold; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; transition: all 0.1s ease; } .chip-remove[data-v-c768701a]:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); } .field-input[data-v-c768701a] { background: transparent; border: none; outline: none; color: var(--text-primary); flex: 1; min-width: 100px; font-size: 13px; font-family: inherit; } .field-actions[data-v-c768701a] { margin-left: auto; display: flex; gap: 12px; } .link-btn[data-v-c768701a] { color: var(--accent-primary); cursor: pointer; font-size: 13px; font-weight: 400; transition: opacity 0.1s ease; opacity: 0.7; } .link-btn[data-v-c768701a]:hover { opacity: 1; } /* Autocomplete Dropdown */ .compose-field-autocomplete[data-v-c768701a] { position: relative; } .autocomplete-dropdown[data-v-c768701a] { position: absolute; top: 100%; left: 58px; right: 0; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 280px; overflow-y: auto; padding: 4px; } .autocomplete-item[data-v-c768701a] { display: flex; align-items: center; padding: 8px 10px; cursor: pointer; gap: 10px; border-radius: 8px; transition: background 0.1s ease; } .autocomplete-item[data-v-c768701a]:hover, .autocomplete-item.selected[data-v-c768701a] { background: var(--bg-hover); } .autocomplete-item-avatar[data-v-c768701a] { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; flex-shrink: 0; } .autocomplete-item-icon[data-v-c768701a] { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--text-secondary); flex-shrink: 0; } .autocomplete-item-icon svg[data-v-c768701a] { width: 18px; height: 18px; } .autocomplete-item-content[data-v-c768701a] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .autocomplete-item-name[data-v-c768701a] { font-size: 14px; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autocomplete-item-email[data-v-c768701a] { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autocomplete-item-count[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary); } .autocomplete-item-source[data-v-c768701a] { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; } .subject-input[data-v-c768701a] { width: 100%; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; font-weight: 400; font-family: inherit; } .subject-input[data-v-c768701a]::placeholder { color: var(--accent-primary); font-weight: 400; opacity: 0.7; } .editor-container[data-v-c768701a] { flex: 1; padding-top: 15px; cursor: text; display: flex; flex-direction: column; min-height: 150px; max-height: 350px; overflow-y: auto; } .editor-body-wrapper[data-v-c768701a] { flex: 1; display: flex; flex-direction: column; position: relative; } /* Image Resize Overlay */ .image-resize-overlay[data-v-c768701a] { pointer-events: none; border: 2px solid #667eea; background: rgba(79, 70, 229, 0.1); z-index: 10; } .img-resize-handle[data-v-c768701a] { position: absolute; width: 12px; height: 12px; background: #667eea; border: 2px solid #fff; border-radius: 2px; pointer-events: auto; z-index: 11; } .resize-handle-nw[data-v-c768701a] { top: -6px; left: -6px; cursor: nwse-resize; } .resize-handle-ne[data-v-c768701a] { top: -6px; right: -6px; cursor: nesw-resize; } .resize-handle-sw[data-v-c768701a] { bottom: -6px; left: -6px; cursor: nesw-resize; } .resize-handle-se[data-v-c768701a] { bottom: -6px; right: -6px; cursor: nwse-resize; } .resize-dimensions[data-v-c768701a] { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; pointer-events: none; } .editor-content[data-v-c768701a] { color: var(--text-primary); outline: none; font-size: 14px; line-height: 1.6; letter-spacing: -0.01em; min-height: 100px; font-family: inherit; } .signature-container[data-v-c768701a] { margin-top: auto; padding-top: 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; } .signature-container[data-v-c768701a] img { display: inline-block; vertical-align: top; max-width: 100%; height: auto; } /* ESTILOS VIEJOS DE ATTACHMENTS - COMENTADOS (ahora se usan los componentes AttachmentCard) .attachments-list { border-top: 1px solid #333; padding-top: 10px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; } .att-item { background: #2d2d2d; padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ccc; border: 1px solid #444; } .att-remove { background: none; border: none; color: #ff6b6b; cursor: pointer; font-weight: bold; padding: 0 2px; } */ /* Formatting Bar (Expandable) */ .formatting-bar[data-v-c768701a] { display: flex; align-items: center; gap: 2px; padding: 6px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--border-secondary); } .format-btn[data-v-c768701a] { background: none; border: none; /* V20.144 — matches Front's compose toolbar: stroke icons in primary text color (#3f3f46, Zinc-700). Earlier tertiary/secondary tries still rendered too faded on Windows. Hover still gets a bg tint to confirm interactivity, but the color stays primary (already dark — no place darker to elevate to without going pure black). */ color: var(--text-primary); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.1s ease; } .format-btn svg[data-v-c768701a] { width: 16px; height: 16px; } .format-btn[data-v-c768701a]:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* V20.143 — Text-styled B/I/U/S buttons. 16x16 box matching the SVG icons so the row keeps its rhythm. */ /* V20.150 — fb-text variant for B/I/U/S buttons (native HTML letters). */ .format-btn.fb-text[data-v-c768701a] { width: 28px; height: 28px; padding: 0; font-family: inherit; font-size: 14px; line-height: 1; } .format-btn.fb-text b[data-v-c768701a], .format-btn.fb-text i[data-v-c768701a], .format-btn.fb-text u[data-v-c768701a], .format-btn.fb-text s[data-v-c768701a] { display: inline-block; min-width: 12px; text-align: center; font-weight: 700; } .format-btn.fb-text i[data-v-c768701a] { font-style: italic; } .format-btn.fb-text u[data-v-c768701a] { text-decoration: underline; } .format-btn.fb-text s[data-v-c768701a] { text-decoration: line-through; } .format-separator[data-v-c768701a] { width: 1px; height: 18px; background-color: var(--border-secondary); margin: 0 4px; } /* Format Selects */ .format-select[data-v-c768701a] { background: var(--bg-input); border: 1px solid var(--border-secondary); border-radius: 6px; color: var(--text-primary); font-size: 13px; padding: 6px 10px; cursor: pointer; outline: none; transition: all 0.15s ease; } .format-select[data-v-c768701a]:hover { border-color: var(--border-primary); background: var(--bg-hover); } .format-select[data-v-c768701a]:focus { border-color: var(--accent-primary); } .font-select[data-v-c768701a] { width: 120px; } .size-select[data-v-c768701a] { width: 65px; } /* Color Picker */ .color-picker-container[data-v-c768701a] { position: relative; } .color-btn[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px !important; } .color-icon[data-v-c768701a] { font-weight: bold; font-size: 14px; } .color-indicator[data-v-c768701a] { width: 18px; height: 4px; border-radius: 2px; } .highlight-indicator[data-v-c768701a] { width: 16px; } .color-picker-dropdown[data-v-c768701a] { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--surface-overlay); border: 1px solid var(--border-secondary); border-radius: 8px; padding: 10px; z-index: 1000; box-shadow: var(--shadow-dropdown); animation: colorPickerFadeIn-c768701a 0.15s ease-out; } @keyframes colorPickerFadeIn-c768701a { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .color-presets[data-v-c768701a] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; } .color-preset[data-v-c768701a] { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.1s; } .color-preset[data-v-c768701a]:hover { transform: scale(1.15); border-color: #fff; } .color-custom[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-secondary); } .color-custom input[type="color"][data-v-c768701a] { width: 32px; height: 24px; border: none; border-radius: 4px; cursor: pointer; background: transparent; } .color-custom input[type="color"][data-v-c768701a]::-webkit-color-swatch-wrapper { padding: 0; } .color-custom input[type="color"][data-v-c768701a]::-webkit-color-swatch { border: 1px solid var(--border-secondary); border-radius: 4px; } .color-custom span[data-v-c768701a] { color: var(--text-tertiary); font-size: 12px; } /* AI Toolbar */ .ai-toolbar[data-v-c768701a] { display: flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--surface-raised); border-top: 1px solid var(--border-secondary); position: relative; flex-wrap: wrap; } .ai-action-btn[data-v-c768701a] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-secondary); border-radius: 18px; background: var(--surface-raised); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .ai-action-btn[data-v-c768701a]:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-primary); } .ai-action-btn[data-v-c768701a]:disabled { opacity: 0.5; cursor: not-allowed; } .ai-btn-container[data-v-c768701a] { position: relative; } .ai-dropdown[data-v-c768701a] { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--surface-overlay); border: 1px solid var(--border-secondary); border-radius: 8px; box-shadow: var(--shadow-dropdown); z-index: 1000; min-width: 140px; overflow: hidden; animation: dropdownFadeIn-c768701a 0.15s ease-out; } .ai-dropdown-item[data-v-c768701a] { padding: 8px 14px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background-color 0.1s; } .ai-dropdown-item[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .ai-loading-overlay[data-v-c768701a] { position: absolute; inset: 0; background: var(--surface-raised); display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 10; border-radius: inherit; font-size: 12.5px; color: var(--accent-primary); font-weight: 500; } .ai-spinner[data-v-c768701a] { width: 16px; height: 16px; border: 2px solid var(--border-secondary); border-top-color: var(--accent-primary); border-radius: 50%; animation: ai-spin-c768701a 0.6s linear infinite; } @keyframes ai-spin-c768701a { to { transform: rotate(360deg); } } /* Templates Modal */ /* ===== Templates Picker (Front-style) ===== */ .itp-overlay[data-v-c768701a] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--surface-overlay); z-index: 50; animation: itpFadeIn-c768701a 0.12s ease-out; display: flex; flex-direction: column; } @keyframes itpFadeIn-c768701a { from { opacity: 0; } to { opacity: 1; } } .itp-body[data-v-c768701a] { display: flex; flex: 1; overflow: hidden; } /* Left panel - list */ .itp-left[data-v-c768701a] { width: 260px; border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; flex-shrink: 0; } .itp-title[data-v-c768701a] { font-size: 14px; font-weight: 600; color: var(--text-primary); padding: 14px 16px 10px; text-align: center; } .itp-search[data-v-c768701a] { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; color: var(--text-quaternary); } .itp-search-input[data-v-c768701a] { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: inherit; } .itp-search-input[data-v-c768701a]::placeholder { color: var(--text-quaternary); } .itp-section-label[data-v-c768701a] { font-size: 11px; font-weight: 600; color: var(--text-quaternary); padding: 8px 16px 4px; text-transform: uppercase; letter-spacing: 0.03em; } .itp-list[data-v-c768701a] { flex: 1; overflow-y: auto; } .itp-loading[data-v-c768701a] { display: flex; justify-content: center; padding: 30px; } .itp-spinner[data-v-c768701a] { width: 18px; height: 18px; border: 2px solid var(--border-primary); border-top-color: #667eea; border-radius: 50%; animation: itpSpin-c768701a 0.7s linear infinite; } @keyframes itpSpin-c768701a { to { transform: rotate(360deg); } } .itp-empty[data-v-c768701a] { text-align: center; padding: 24px 16px; font-size: 13px; color: var(--text-quaternary); } .itp-item[data-v-c768701a] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background 0.1s; } .itp-item[data-v-c768701a]:hover { background: var(--bg-hover); } .itp-item.active[data-v-c768701a] { background: var(--bg-active); } .itp-item-dot[data-v-c768701a] { width: 6px; height: 6px; border-radius: 50%; background: var(--text-quaternary); margin-top: 6px; flex-shrink: 0; } .itp-item.active .itp-item-dot[data-v-c768701a] { background: var(--accent-primary); } .itp-item-info[data-v-c768701a] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .itp-item-name[data-v-c768701a] { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itp-item-subject[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Right panel - preview */ .itp-right[data-v-c768701a] { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .itp-preview-empty[data-v-c768701a] { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-quaternary); font-size: 13px; } .itp-preview-header[data-v-c768701a] { padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .itp-preview-body[data-v-c768701a] { flex: 1; padding: 16px; overflow-y: auto; font-size: 13px; line-height: 1.6; color: var(--text-secondary); } .itp-preview-body img[data-v-c768701a] { max-width: 100%; height: auto; } .itp-preview-footer[data-v-c768701a] { padding: 10px 16px; border-top: 1px solid var(--border-primary); flex-shrink: 0; } .itp-use-btn[data-v-c768701a] { width: 100%; padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 6px; color: white; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; } .itp-use-btn[data-v-c768701a]:hover { opacity: 0.9; } .templates-modal-overlay[data-v-c768701a] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; } .templates-modal[data-v-c768701a] { width: 800px; max-width: 90vw; height: 520px; max-height: 80vh; background: var(--surface-overlay); border-radius: 12px; box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden; animation: dropdownFadeIn-c768701a 0.2s ease-out; } .templates-modal-header[data-v-c768701a] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-primary); } .templates-modal-header h3[data-v-c768701a] { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); } .modal-close-btn[data-v-c768701a] { background: none; border: none; color: var(--text-tertiary); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0; } .modal-close-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .templates-modal-body[data-v-c768701a] { display: flex; flex: 1; overflow: hidden; } .templates-list-panel[data-v-c768701a] { width: 320px; border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; } .templates-search[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-primary); } .templates-search svg[data-v-c768701a] { color: var(--text-tertiary); flex-shrink: 0; } .templates-search-input[data-v-c768701a] { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; } .templates-search-input[data-v-c768701a]::placeholder { color: var(--text-tertiary); } .templates-list-container[data-v-c768701a] { flex: 1; overflow-y: auto; } .templates-loading[data-v-c768701a], .templates-empty[data-v-c768701a] { padding: 24px 16px; text-align: center; color: var(--text-tertiary); font-size: 14px; } .templates-list[data-v-c768701a] { padding: 8px; } .template-item[data-v-c768701a] { padding: 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; transition: all 0.15s ease; border: 1px solid transparent; } .template-item[data-v-c768701a]:hover { background: var(--bg-hover); } .template-item.selected[data-v-c768701a] { background: rgba(102, 126, 234, 0.2); border: 1px solid rgba(102, 126, 234, 0.4); } .template-item-header[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .template-item-name[data-v-c768701a] { font-weight: 500; color: var(--text-primary); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .template-item-badge[data-v-c768701a] { background: rgba(102, 126, 234, 0.2); color: #a5b4fc; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; } .template-item-preview[data-v-c768701a] { color: var(--text-tertiary); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .templates-preview-panel[data-v-c768701a] { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .templates-preview-empty[data-v-c768701a] { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 14px; } .templates-preview-content[data-v-c768701a] { flex: 1; display: flex; flex-direction: column; padding: 16px 20px; overflow: hidden; } .preview-header[data-v-c768701a] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .preview-header h4[data-v-c768701a] { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); } .preview-subject[data-v-c768701a] { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px; } .preview-subject strong[data-v-c768701a] { color: var(--text-tertiary); } .preview-body[data-v-c768701a] { flex: 1; overflow-y: auto; font-size: 13px; color: var(--text-secondary); line-height: 1.6; padding: 12px; background: var(--surface-raised); border-radius: 8px; border: 1px solid var(--border-primary); } .preview-body p[data-v-c768701a] { margin: 0 0 8px 0; } .preview-attachments[data-v-c768701a] { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-tertiary); } .preview-attachments strong[data-v-c768701a] { color: var(--text-secondary); } .attachment-count[data-v-c768701a] { background: rgba(102, 126, 234, 0.15); color: #a5b4fc; padding: 2px 8px; border-radius: 4px; font-size: 12px; } .use-template-btn[data-v-c768701a] { margin-top: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: all 0.2s ease; } .use-template-btn[data-v-c768701a]:hover { background: linear-gradient(135deg, #5568d3 0%, #6a3f8c 100%); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); } /* Compose Footer */ .compose-footer[data-v-c768701a] { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; /* V20.199gy — when the reader narrows (AI panel open), let the footer WRAP to a second row instead of squashing the buttons. At full width nothing changes. */ flex-wrap: wrap; row-gap: 8px; background: var(--surface-raised); border-top: 1px solid var(--border-secondary); border-radius: 0 0 16px 16px; position: relative; /* V20.240 — keep the toolbar + Send pinned at the bottom of the modal when the body scrolls (don't let it shrink/scroll away on long emails). */ flex-shrink: 0; } .footer-left[data-v-c768701a], .footer-right[data-v-c768701a] { display: flex; align-items: center; } /* V20.199gy — Send group keeps its size and stays pinned right even after a wrap */ .footer-right[data-v-c768701a] { flex: none; margin-left: auto; } /* Toolbar Actions */ .toolbar-actions[data-v-c768701a] { display: flex; align-items: center; /* V20.199gy — buttons wrap to a new line rather than shrinking/distorting */ flex-wrap: wrap; gap: 2px; row-gap: 4px; } .toolbar-btn[data-v-c768701a] { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 7px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; transition: all 0.15s ease; position: relative; } .toolbar-btn svg[data-v-c768701a] { width: 18px; height: 18px; } .toolbar-btn[data-v-c768701a]:hover:not(:disabled) { background-color: var(--bg-hover); color: var(--text-primary); transform: scale(1.08); } .toolbar-btn.active[data-v-c768701a] { background-color: var(--sidebar-active); color: var(--accent-primary); } .toolbar-btn[data-v-c768701a]:disabled { opacity: 0.3; cursor: not-allowed; } .toolbar-btn-danger[data-v-c768701a]:hover:not(:disabled) { background-color: rgba(239, 68, 68, 0.08); color: #ef4444; } .smart-reply-row[data-v-c768701a] { padding: 4px 12px 2px; } .btn-smart-reply[data-v-c768701a] { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; background: var(--surface-raised, white); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; color: #6366f1; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; } .btn-smart-reply[data-v-c768701a]:hover:not(:disabled) { background: var(--bg-selected); border-color: var(--accent-primary); color: var(--accent-primary); } .btn-smart-reply[data-v-c768701a]:disabled { opacity: 0.7; cursor: not-allowed; } /* Toolbar variant — slightly smaller so it lines up with the 32px icon buttons in the compose footer. */ .btn-smart-reply-toolbar[data-v-c768701a] { padding: 4px 10px; font-size: 12px; border-radius: 7px; height: 28px; /* V20.199gy — keep the pill at its natural size + label on one line (no squash) */ flex: none; white-space: nowrap; } /* Smart Follow-up variant — amber/orange to signal "you're chasing a response", distinct from Smart Reply's indigo so the mode shift is visible at a glance. */ .btn-smart-reply.btn-smart-followup[data-v-c768701a] { color: #d97706; border-color: rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.06); } .btn-smart-reply.btn-smart-followup[data-v-c768701a]:hover:not(:disabled) { color: #b45309; border-color: #d97706; background: rgba(217, 119, 6, 0.12); } /* "Insert Tracking" button — logistics blue, distinct from indigo (Smart Reply) and amber (Smart Follow-up). The Anchor icon + count chip ("(3)") signal that the click drops verified shipment cards into the editor. Margin-left gives a small gap from the Smart Reply pill so the two don't read as a single button. */ .btn-smart-reply.btn-tracking-insert[data-v-c768701a] { color: #2563eb; border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.06); margin-left: 4px; } .btn-smart-reply.btn-tracking-insert[data-v-c768701a]:hover:not(:disabled) { color: #1d4ed8; border-color: #2563eb; background: rgba(37, 99, 235, 0.12); } /* Front-style "show previous message" pill — injected INSIDE the contenteditable as a contenteditable=false block, so it visually sits between the user's typed area and the quoted thread and stays put when the thread expands. Click is delegated via handleEditorClick. */ .editor-content[data-v-c768701a] .hw-quote-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 2px 12px; margin: 4px 0; background: var(--bg-hover, #f0f1f3); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 999px; color: var(--text-tertiary, #71717a); cursor: pointer; user-select: none; font-size: 12px; line-height: 1.4; letter-spacing: 2px; font-weight: 600; transition: background-color 0.14s, color 0.14s, border-color 0.14s; width: fit-content; } .editor-content[data-v-c768701a] .hw-quote-toggle:hover { background: var(--bg-selected, rgba(79, 70, 229, 0.08)); color: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); } .editor-content[data-v-c768701a]:not(.is-quote-collapsed) .hw-quote-toggle { background: var(--bg-selected, rgba(79, 70, 229, 0.08)); color: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); } /* Hide the quoted thread wrapper emitted by buildConversationThreadHTML while collapsed. The content is still in the contenteditable DOM so extractNewMessageBody / send continue to work normally. */ .editor-content.is-quote-collapsed[data-v-c768701a] .hw-quoted-content { display: none; } .editor-content[data-v-c768701a] .hw-quoted-content { /* Lightly distinguish the quoted region when expanded so users see they're looking at the historical thread, not their reply. */ opacity: 0.92; } .spin-icon[data-v-c768701a] { animation: spin-c768701a 1s linear infinite; } .compose-emoji-picker[data-v-c768701a] { position: absolute; bottom: 40px; left: 0; z-index: 100; } .toolbar-separator[data-v-c768701a] { width: 1px; height: 20px; background-color: var(--border-secondary); margin: 0 2px; } /* Toolbar Dropdowns */ .toolbar-dropdown-container[data-v-c768701a] { position: relative; } .toolbar-dropdown[data-v-c768701a] { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 10px; box-shadow: var(--shadow-dropdown); z-index: 1000; min-width: 220px; overflow: hidden; animation: dropdownFadeIn-c768701a 0.15s ease-out; } @keyframes dropdownFadeIn-c768701a { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .dropdown-header[data-v-c768701a] { padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-primary); } .dropdown-loading[data-v-c768701a], .dropdown-empty[data-v-c768701a] { padding: 16px; color: var(--text-tertiary); text-align: center; font-size: 13px; } .dropdown-list[data-v-c768701a] { max-height: 240px; overflow-y: auto; } .dropdown-item[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: background-color 0.15s ease, padding-left 0.15s ease; } .dropdown-item[data-v-c768701a]:hover { background-color: var(--bg-hover); padding-left: 18px; } .template-name[data-v-c768701a] { color: var(--text-primary); font-size: 13px; } .template-badge[data-v-c768701a] { background: var(--accent-primary); color: var(--color-white); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; } /* Schedule Dropdown */ .schedule-dropdown[data-v-c768701a] { min-width: 260px; } .schedule-form[data-v-c768701a] { padding: 14px; } .schedule-row[data-v-c768701a] { display: flex; align-items: center; margin-bottom: 10px; } .schedule-row label[data-v-c768701a] { color: var(--text-tertiary); font-size: 13px; width: 50px; } .schedule-input[data-v-c768701a] { flex: 1; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 6px; padding: 8px 10px; color: var(--text-primary); font-size: 13px; outline: none; } .schedule-input[data-v-c768701a]:focus { border-color: var(--accent-primary); } .schedule-confirm-btn[data-v-c768701a] { width: 100%; background: var(--accent-primary); color: var(--color-white); border: none; padding: 10px; border-radius: 6px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: opacity 0.15s; } .schedule-confirm-btn[data-v-c768701a]:hover { opacity: 0.9; } .schedule-note[data-v-c768701a] { margin-top: 10px; font-size: 11px; color: var(--text-tertiary); text-align: center; } /* Legacy styles (keeping for compatibility) */ .format-tools[data-v-c768701a] { display: flex; gap: 8px; align-items: center; } .tool-btn[data-v-c768701a] { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .tool-btn[data-v-c768701a]:hover { background-color: var(--bg-hover); color: var(--text-primary); } .v-separator[data-v-c768701a] { width: 1px; height: 20px; background-color: var(--border-secondary); margin: 0 4px; } .send-btn-group[data-v-c768701a] { display: flex; align-items: stretch; background: linear-gradient(135deg, #818cf8 0%, #4338ca 100%); border-radius: 10px; position: relative; box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3); transition: all 0.2s ease; /* V20.199gy — Send keeps its size; never compresses when the reader narrows */ flex: none; } .send-btn-group[data-v-c768701a]:hover { box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4); transform: translateY(-1px); } .send-btn-group[data-v-c768701a]:hover { box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); } .btn-send-main[data-v-c768701a] { background: transparent; border: none; color: white; padding: 7px 20px; font-weight: 600; font-size: 13px; cursor: pointer; border-right: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px 0 0 10px; font-family: inherit; transition: filter 0.1s ease; } .btn-send-main[data-v-c768701a]:hover:not(:disabled) { filter: brightness(1.1); } .btn-send-main[data-v-c768701a]:disabled { cursor: not-allowed; opacity: 0.5; } .btn-send-split[data-v-c768701a] { display: flex; align-items: center; padding: 0 8px; cursor: pointer; border: none; background: transparent; color: white; transition: filter 0.1s ease; } .btn-send-split[data-v-c768701a]:hover:not(.disabled) { filter: brightness(1.1); } .btn-send-split.disabled[data-v-c768701a] { cursor: not-allowed; opacity: 0.5; pointer-events: none; } .send-dropdown[data-v-c768701a] { position: absolute; bottom: calc(100% + 8px); right: 0; background-color: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 10px; min-width: 200px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); padding: 4px; z-index: 1001; } .send-dropdown-divider[data-v-c768701a] { height: 1px; background: var(--border-primary); margin: 3px 8px; } .send-option[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-secondary); font-size: 13px; cursor: pointer; white-space: nowrap; border-radius: 7px; transition: all 0.1s ease; } .send-option svg[data-v-c768701a] { flex-shrink: 0; color: var(--text-quaternary); transition: color 0.1s ease; } .send-option:hover svg[data-v-c768701a] { color: var(--text-secondary); } .send-shortcut[data-v-c768701a] { margin-left: auto; font-size: 11px; color: var(--text-quaternary); background: var(--bg-hover); padding: 1px 6px; border-radius: 4px; font-family: inherit; } .send-option[data-v-c768701a]:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* Dropdown fade transition */ .dropdown-fade-enter-active[data-v-c768701a] { transition: opacity 0.12s ease, transform 0.12s ease; } .dropdown-fade-leave-active[data-v-c768701a] { transition: opacity 0.08s ease, transform 0.08s ease; } .dropdown-fade-enter-from[data-v-c768701a] { opacity: 0; transform: translateY(4px); } .dropdown-fade-leave-to[data-v-c768701a] { opacity: 0; transform: translateY(4px); } .schedule-picker-dialog[data-v-c768701a] { width: 360px; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08); overflow: hidden; } .schedule-picker-header[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; } .schedule-picker-icon-wrapper[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; flex-shrink: 0; } .schedule-picker-title[data-v-c768701a] { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; } .schedule-picker-close[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: 7px; color: var(--text-quaternary); cursor: pointer; transition: all 0.1s ease; flex-shrink: 0; } .schedule-picker-close[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-secondary); } .schedule-picker-presets[data-v-c768701a] { padding: 0 6px; } .schedule-preset-item[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 1px 0; cursor: pointer; border-radius: 8px; transition: all 0.1s ease; } .schedule-preset-item[data-v-c768701a]:hover { background: var(--bg-hover); } .schedule-preset-left[data-v-c768701a] { display: flex; align-items: center; gap: 10px; } .schedule-preset-label[data-v-c768701a] { font-size: 13px; color: var(--text-primary); font-weight: 400; } .schedule-preset-date[data-v-c768701a] { font-size: 12px; color: var(--text-quaternary); } .schedule-chevron[data-v-c768701a] { color: var(--text-quaternary); transition: transform 0.2s ease; } .schedule-chevron.open[data-v-c768701a] { transform: rotate(180deg); } .schedule-picker-divider[data-v-c768701a] { height: 1px; background: var(--border-secondary); margin: 4px 14px; } .schedule-custom-form[data-v-c768701a] { padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 10px; } .schedule-custom-row[data-v-c768701a] { display: flex; align-items: center; gap: 10px; } .schedule-custom-row label[data-v-c768701a] { font-size: 13px; color: var(--text-tertiary); min-width: 40px; } .schedule-custom-input[data-v-c768701a] { flex: 1; padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--bg-primary); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .schedule-custom-input[data-v-c768701a]:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.12); } .schedule-custom-btn[data-v-c768701a] { margin-top: 4px; width: 100%; padding: 9px 16px; background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); color: white; border: none; border-radius: 9px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); } .schedule-custom-btn[data-v-c768701a]:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); transform: translateY(-1px); } .schedule-custom-btn[data-v-c768701a]:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Custom expand transition */ .custom-expand-enter-active[data-v-c768701a] { transition: all 0.2s ease; overflow: hidden; } .custom-expand-leave-active[data-v-c768701a] { transition: all 0.15s ease; overflow: hidden; } .custom-expand-enter-from[data-v-c768701a] { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } .custom-expand-leave-to[data-v-c768701a] { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; /* Legacy compat — keep old class name working for scheduled banner */ } .send-later-input[data-v-c768701a] { flex: 1; padding: 7px 10px; border: 1px solid var(--border-primary); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--bg-primary); outline: none; transition: border-color 0.1s ease; } .send-later-input[data-v-c768701a]:focus { border-color: var(--accent-primary); } .send-option-disabled[data-v-c768701a] { opacity: 0.5; cursor: not-allowed; } .send-option-disabled[data-v-c768701a]:hover { background-color: transparent; color: var(--text-secondary); } .send-coming-soon[data-v-c768701a] { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-quaternary); } /* --- CONFIRMATION DIALOG --- */ .compose-overlay[data-v-c768701a] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal, 9000); } .confirmation-overlay[data-v-c768701a] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9999; } .confirmation-dialog[data-v-c768701a] { width: 380px; background: var(--surface-raised, white); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.04); overflow: hidden; text-align: center; } .dialog-fade-enter-active[data-v-c768701a] { animation: dialogIn-c768701a 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .dialog-fade-leave-active[data-v-c768701a] { animation: dialogOut-c768701a 0.12s ease-in; } @keyframes dialogIn-c768701a { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes dialogOut-c768701a { from { opacity: 1; } to { opacity: 0; transform: scale(0.97); } } .dialog-icon-row[data-v-c768701a] { padding: 24px 24px 0; display: flex; justify-content: center; } .dialog-icon-circle[data-v-c768701a] { width: 48px; height: 48px; border-radius: 14px; background: var(--bg-selected); color: var(--accent-primary); display: flex; align-items: center; justify-content: center; } .dialog-body[data-v-c768701a] { padding: 14px 24px 4px; } .dialog-title[data-v-c768701a] { font-size: 16px; font-weight: 600; color: var(--text-primary, #3f3f46); margin: 0 0 6px; } .dialog-message[data-v-c768701a] { font-size: 13.5px; color: var(--text-quaternary, #a1a1aa); margin: 0; line-height: 1.5; } .dialog-footer[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 16px 24px 22px; justify-content: flex-end; } .dialog-btn[data-v-c768701a] { padding: 7px 16px; border-radius: 8px; height: 34px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.12s ease; font-family: inherit; border: 1px solid var(--border-primary, #e4e4e7); line-height: 1; } .dialog-btn-cancel[data-v-c768701a] { background: var(--surface-raised, white); color: var(--text-secondary, #52525b); } .dialog-btn-cancel[data-v-c768701a]:hover { background: var(--bg-hover, #f4f4f5); border-color: var(--border-hover, #d4d4d8); } .dialog-btn-discard[data-v-c768701a] { background: var(--surface-raised, white); color: #ef4444; border-color: #fecaca; } .dialog-btn-discard[data-v-c768701a]:hover { background: #fef2f2; border-color: #fca5a5; } .dialog-btn-save[data-v-c768701a] { background: #6366f1; color: white; border-color: #6366f1; } .dialog-btn-save[data-v-c768701a]:hover { background: #4f46e5; border-color: #4f46e5; } /* ========================================= 4. BANNERS & NOTIFICATIONS ========================================= */ /* V20.199 — reconnect notice as a floating bottom-left card (was a full-width orange top banner that pushed the whole layout down). Surface card + accent bar + purple action; strong shadow so it floats and contrasts against the sidebar. Theme-aware via CSS vars (works in light + dark). */ .reconnect-card[data-v-c768701a] { position: fixed; bottom: 20px; left: 20px; z-index: 10000; width: 320px; max-width: calc(100vw - 40px); background: var(--surface-raised, #ffffff); border: 1px solid var(--border-primary, #e8e8ec); border-left: 3px solid var(--accent-primary, #4f46e5); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08); padding: 14px 16px 16px; animation: reconnectCardIn-c768701a 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes reconnectCardIn-c768701a { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .reconnect-card-dismiss[data-v-c768701a] { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: var(--text-quaternary, #a1a1aa); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .reconnect-card-dismiss[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); color: var(--text-secondary, #52525b); } .reconnect-card-dismiss svg[data-v-c768701a] { width: 14px; height: 14px; } .reconnect-card-head[data-v-c768701a] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 22px; } .reconnect-card-icon[data-v-c768701a] { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-selected, rgba(79, 70, 229, 0.08)); color: var(--accent-primary, #4f46e5); } .reconnect-card-icon svg[data-v-c768701a] { width: 17px; height: 17px; } .reconnect-card-title[data-v-c768701a] { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #3f3f46); line-height: 1.3; } .reconnect-card-body[data-v-c768701a] { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary, #52525b); margin-bottom: 14px; } .reconnect-card-body strong[data-v-c768701a] { font-weight: 600; color: var(--text-primary, #3f3f46); } .reconnect-card-actions[data-v-c768701a] { display: flex; justify-content: flex-end; } .reconnect-card-btn[data-v-c768701a] { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-primary, #4f46e5); color: #fff; border: none; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: filter 0.12s ease, transform 0.12s ease; } .reconnect-card-btn[data-v-c768701a]:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Adjust app layout when banner is visible */ .app-layout[data-v-c768701a] { position: relative; } /* ── Popout mode — hide everything except reading panel ── */ .app-layout.popout-mode .sidebar[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .email-list-col[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .resize-handle[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .right-panel[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .update-banner[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .reconnect-card[data-v-c768701a] { display: none !important; } .app-layout.popout-mode .email-view-col[data-v-c768701a] { flex: 1; max-width: 100%; width: 100%; } /* ============================================================ V20.199gb — Outlook layout TOP BAR (gated). The handoff "Classic" top bar, rendered in Hubswire tokens + system fonts (per Julio: keep Hubswire gray theme, not the warm palette / Space Grotesk). Only present when listDensity==='outlook' && !popout. Classic + Premium are untouched (no top bar, no layout shift). ============================================================ */ .app-layout.app-has-topbar[data-v-c768701a] { /* push the whole 4-pane row below the fixed 48px bar. border-box + 100% height means the 48px padding eats INTO the height (no overflow, no margin-collapse surprises regardless of the global box-sizing). */ box-sizing: border-box; padding-top: 48px; height: 100%; } .outlook-topbar[data-v-c768701a] { position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 9000; display: flex; align-items: center; /* V20.199gx — no left padding / no global flex gap so the brand zone can be an exact 220px block (= sidebar width) and the search box lands flush with the start of the email-list column. Right padding keeps the avatar off the edge. */ gap: 0; padding: 0 14px 0 0; background: var(--accent-primary-hover, #4338ca); color: #fff; /* V20.199jh — the bar doubles as the OS title bar in Electron: the empty zones drag the window (double-click = maximize/restore via the OS). The interactive children below opt out with -webkit-app-region: no-drag. Harmless no-op in the web build. */ -webkit-app-region: drag; } /* Interactive zones must stay clickable/typeable, not drag the window. */ .outlook-topbar .otb-search[data-v-c768701a], .outlook-topbar .otb-icon[data-v-c768701a], .outlook-topbar .otb-winctl[data-v-c768701a] { -webkit-app-region: no-drag; } /* Window controls — Electron only — flush into the top-right corner (cancels the header's 14px right padding) so they read like native caption buttons. */ .outlook-topbar .otb-winctls[data-v-c768701a] { display: flex; align-items: stretch; align-self: stretch; margin-left: 8px; margin-right: -14px; -webkit-app-region: no-drag; } .outlook-topbar .otb-winctl[data-v-c768701a] { width: 44px; border: none; background: transparent; color: rgba(255, 255, 255, 0.82); cursor: pointer; display: grid; place-items: center; transition: background 0.13s, color 0.13s; } .outlook-topbar .otb-winctl[data-v-c768701a]:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .outlook-topbar .otb-winctl-close[data-v-c768701a]:hover { background: #e81123; color: #fff; } .outlook-topbar .otb-brand[data-v-c768701a] { display: flex; align-items: center; gap: 9px; /* V20.199gx — exactly the sidebar width (220px) so the search starts at x=220 */ width: 220px; box-sizing: border-box; padding-left: 14px; flex: none; } .outlook-topbar .otb-logo[data-v-c768701a] { /* V20.199hd — Julio: "el logo con ese blanco por debajo se ve horrible". No more white tile — the logo sits directly on the indigo bar, larger. */ width: 32px; height: 32px; display: grid; place-items: center; flex: none; } .outlook-topbar .otb-logo-img[data-v-c768701a] { width: 32px; height: 32px; object-fit: contain; } .outlook-topbar .otb-brand-text[data-v-c768701a] { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.66); letter-spacing: -0.01em; white-space: nowrap; } .outlook-topbar .otb-brand-text strong[data-v-c768701a] { font-weight: 700; color: #fff; } .outlook-topbar .otb-search[data-v-c768701a] { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; /* V20.199gx — left edge sits at x=220 (right after the 220px brand block); margin-right gives air before the right-side icons (replaces the removed global flex gap). */ margin-right: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.14); transition: background 0.13s; } .outlook-topbar .otb-search[data-v-c768701a]:focus-within { background: #fff; } .outlook-topbar .otb-search-ic[data-v-c768701a] { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.8); flex: none; } .outlook-topbar .otb-search:focus-within .otb-search-ic[data-v-c768701a] { color: var(--text-tertiary); } .outlook-topbar .otb-search-input[data-v-c768701a] { flex: 1; min-width: 0; border: none; background: transparent; color: #fff; font-size: 13px; outline: none; } .outlook-topbar .otb-search-input[data-v-c768701a]::placeholder { color: rgba(255, 255, 255, 0.7); } .outlook-topbar .otb-search:focus-within .otb-search-input[data-v-c768701a] { color: var(--text-primary); } .outlook-topbar .otb-search:focus-within .otb-search-input[data-v-c768701a]::placeholder { color: var(--text-tertiary); } .outlook-topbar .otb-kbd[data-v-c768701a] { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 5px; padding: 1px 6px; flex: none; } .outlook-topbar .otb-search:focus-within .otb-kbd[data-v-c768701a] { display: none; } /* V20.199jx — clear (✕) button inside the top-bar search */ .outlook-topbar .otb-search-clear[data-v-c768701a] { flex: none; width: 20px; height: 20px; border: none; border-radius: 5px; padding: 0; display: grid; place-items: center; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; } .outlook-topbar .otb-search-clear svg[data-v-c768701a] { width: 13px; height: 13px; } .outlook-topbar .otb-search-clear[data-v-c768701a]:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .outlook-topbar .otb-search:focus-within .otb-search-clear[data-v-c768701a] { color: var(--text-tertiary); } .outlook-topbar .otb-search:focus-within .otb-search-clear[data-v-c768701a]:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } .outlook-topbar .otb-right[data-v-c768701a] { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } .outlook-topbar .otb-switch[data-v-c768701a] { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); } .outlook-topbar .otb-switch-link[data-v-c768701a] { border: none; background: transparent; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: background 0.13s, color 0.13s; } .outlook-topbar .otb-switch-link.otb-on[data-v-c768701a] { background: #fff; color: var(--accent-primary-hover, #4338ca); } .outlook-topbar .otb-icon[data-v-c768701a] { width: 32px; height: 32px; display: grid; place-items: center; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); border-radius: 8px; cursor: pointer; transition: background 0.13s, color 0.13s; } .outlook-topbar .otb-icon svg[data-v-c768701a] { width: 17px; height: 17px; } .outlook-topbar .otb-icon[data-v-c768701a]:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .outlook-topbar .otb-avatar[data-v-c768701a] { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(155deg, var(--accent-primary, #4f46e5), var(--accent-primary-hover, #4338ca)); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; margin-left: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } /* V20.199 — reconnect is now a floating card (.reconnect-card); it no longer pushes the sidebar/list/view down. */ /* Auto-update banner */ .update-banner[data-v-c768701a] { position: fixed; top: 0; left: 0; right: 0; /* V20.199jk — Julio: "dejaste una franja blanca". The banner was white (var(--surface-raised)) AND pinned at viewport top:0, so in Electron it sat OVER the custom title bar = a white strip covering the chrome + controls. Now it matches the gray title bar (never a white band) and drops BELOW the title bar / Outlook top bar via the hw-electron offsets below. It only ever shows in Electron (auto-update is Electron-only). */ background: #e8e9ec; border-bottom: 1px solid var(--border-primary); z-index: 10001; } [data-theme='dark'] .update-banner[data-v-c768701a] { background: #2a2a2e; } /* Clear the window chrome above the banner so it never covers the controls. */ body.hw-electron .update-banner[data-v-c768701a] { top: 32px; } body.hw-electron.hw-outlook-titlebar .update-banner[data-v-c768701a] { top: 48px; } .update-banner-content[data-v-c768701a] { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; } .update-icon[data-v-c768701a] { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--accent-primary); } .update-text[data-v-c768701a] { color: var(--text-secondary); flex: 1; min-width: 0; } .update-btn[data-v-c768701a] { background: var(--accent-primary); color: var(--color-white); border: none; padding: 4px 14px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease; } .update-btn[data-v-c768701a]:hover { opacity: 0.85; } .update-dismiss[data-v-c768701a] { background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; } .update-dismiss svg[data-v-c768701a] { width: 14px; height: 14px; stroke: var(--text-tertiary); transition: stroke 0.15s ease; } .update-dismiss:hover svg[data-v-c768701a] { stroke: var(--text-primary); } .update-progress-bar[data-v-c768701a] { width: 100px; height: 4px; background: var(--bg-active); border-radius: 2px; overflow: hidden; } .update-progress-fill[data-v-c768701a] { height: 100%; background: var(--accent-primary); border-radius: 2px; transition: width 0.3s ease; } .update-banner~.sidebar[data-v-c768701a], .update-banner~.email-list-col[data-v-c768701a], .update-banner~.email-view-col[data-v-c768701a] { margin-top: 38px; } /* V20.199 — reconnect card floats independently; no stacking with the update banner. */ /* ========================================= 5. DROPDOWNS & MENUS ========================================= */ .menu-container[data-v-c768701a] { position: relative; } .message-dropdown-menu[data-v-c768701a] { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 6px; box-shadow: var(--shadow-dropdown); min-width: 180px; z-index: 1000; overflow: hidden; } .menu-item[data-v-c768701a] { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; color: var(--text-primary); font-size: 14px; transition: background 0.15s ease, padding-left 0.15s ease; } .menu-item[data-v-c768701a]:hover { background: var(--bg-hover); padding-left: 20px; } .menu-item.danger[data-v-c768701a] { color: #ff6b6b; } .menu-item.danger[data-v-c768701a]:hover { background: rgba(255, 107, 107, 0.1); } .menu-icon[data-v-c768701a] { width: 16px; height: 16px; flex-shrink: 0; } .menu-divider[data-v-c768701a] { height: 1px; background: var(--border-primary); margin: 4px 0; } .message-actions[data-v-c768701a] { position: relative; } .from-field[data-v-c768701a] { border-bottom: 1px solid var(--border-primary); padding: 8px 0; } .from-selector-container[data-v-c768701a] { position: relative; flex: 1; } .from-selector[data-v-c768701a] { background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .from-selector[data-v-c768701a]:hover { background: var(--bg-hover); border-color: var(--border-secondary); } .from-selector-content[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .from-inbox-info[data-v-c768701a] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .from-inbox-name[data-v-c768701a] { color: var(--text-primary); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .from-inbox-email[data-v-c768701a] { color: var(--text-tertiary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .from-chevron[data-v-c768701a] { width: 16px; height: 16px; fill: var(--text-tertiary); transition: transform 0.2s ease; flex-shrink: 0; } .from-chevron.rotated[data-v-c768701a] { transform: rotate(180deg); } .from-dropdown-menu[data-v-c768701a] { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 6px; box-shadow: var(--shadow-dropdown); max-height: 300px; overflow-y: auto; z-index: 1000; } .from-dropdown-item[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.2s ease; border-bottom: 1px solid var(--border-primary); } .from-dropdown-item[data-v-c768701a]:last-child { border-bottom: none; } .from-dropdown-item[data-v-c768701a]:hover { background: var(--bg-hover); } .from-dropdown-item.selected[data-v-c768701a] { background: var(--bg-selected); } .from-dropdown-item-content[data-v-c768701a] { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; position: relative; } .from-dropdown-inbox-name[data-v-c768701a] { color: var(--text-primary); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .from-dropdown-inbox-email[data-v-c768701a] { color: var(--text-tertiary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .from-dropdown-badge[data-v-c768701a] { position: absolute; top: 0; right: 0; background: var(--accent-primary); color: var(--color-white); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .from-dropdown-check[data-v-c768701a] { width: 20px; height: 20px; fill: var(--accent-primary); flex-shrink: 0; } .from-dropdown-menu[data-v-c768701a]::-webkit-scrollbar { width: 8px; } .from-dropdown-menu[data-v-c768701a]::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } .from-dropdown-menu[data-v-c768701a]::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } .from-dropdown-menu[data-v-c768701a]::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ========================================= 6. EMAIL LIST CARD & HOVER ACTIONS ========================================= */ .email-card[data-v-c768701a] { position: relative; } /* Contenedor de iconos flotantes */ .card-hover-actions[data-v-c768701a] { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; /* V20.199jq UX-002 — era visibility:hidden, que saca los botones del tab order (un usuario de teclado no podía archivar/posponer desde la lista). opacity+pointer-events ocultan igual para el mouse pero dejan los botones enfocables; :focus-within (abajo) los revela al tabear. */ opacity: 0; pointer-events: none; transition: all 0.15s ease; z-index: 10; background: var(--bg-primary); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .email-card:hover .card-hover-actions[data-v-c768701a], .email-card:focus-within .card-hover-actions[data-v-c768701a] { opacity: 1; pointer-events: auto; visibility: visible; } /* V20.199jq UX-001/002 — anillo de foco para navegación por teclado: la fila (tabindex=0) y sus acciones muestran dónde está el foco. */ .email-card[data-v-c768701a]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; } .action-icon-btn[data-v-c768701a]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; } /* Botones flotantes */ .action-icon-btn[data-v-c768701a] { width: 26px; height: 26px; border-radius: var(--radius-sm); background-color: transparent; border: none; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; } /* SVG Linea (Outline) */ .action-icon-btn svg[data-v-c768701a] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Hover affordances — CALM palette. Indigo is the only accent for the routine actions (archive / snooze / reopen / unsnooze / restore / read); red is reserved for the single genuinely destructive action (permanently deleting a draft). The scale-up reads as the interaction cue instead of a rainbow of per-action colors. */ .action-icon-btn.btn-archive[data-v-c768701a]:hover, .action-icon-btn.btn-snooze[data-v-c768701a]:hover, .action-icon-btn.btn-reopen[data-v-c768701a]:hover, .action-icon-btn.btn-unsnooze[data-v-c768701a]:hover, .action-icon-btn.btn-restore[data-v-c768701a]:hover, .action-icon-btn.btn-read[data-v-c768701a]:hover { background-color: var(--bg-selected); color: var(--accent-primary); transform: scale(1.12); } /* Permanent draft delete — the one genuine-urgency (red) action. */ .action-icon-btn.btn-delete[data-v-c768701a]:hover { background-color: rgba(239, 68, 68, 0.1); color: #EF4444; transform: scale(1.12); } /* Botón Compose (New Email) - Estilo morado */ .btn-compose[data-v-c768701a] { width: 32px; height: 32px; min-width: 32px; padding: 0; background: linear-gradient(135deg, #818cf8 0%, #4338ca 100%); color: white !important; border-radius: 10px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35); } .btn-compose[data-v-c768701a]:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 16px rgba(79, 70, 229, 0.45); } .btn-compose svg[data-v-c768701a] { stroke: white; width: 15px; height: 15px; } /* --- ESTILOS PARA BOTONES DEL HEADER --- */ /* Botón Restore in header (Trash) - Rojo */ .btn-restore-header[data-v-c768701a] { background-color: rgba(239, 68, 68, 0.1); color: #EF4444; border: 1px solid #EF4444; } .btn-restore-header[data-v-c768701a]:hover { background-color: #EF4444; color: white; } /* Botón Reopen in header (Archive) - Verde */ .btn-reopen-header[data-v-c768701a] { background-color: rgba(16, 185, 129, 0.1); color: #10B981; border: 1px solid #10B981; } .btn-reopen-header[data-v-c768701a]:hover { background-color: #10B981; color: white; } /* Archive button in header - subtle purple accent */ .header-actions > .action-btn[data-v-c768701a]:last-child:not(.btn-restore-header):not(.btn-reopen-header):not(.follow-btn) { background: rgba(79, 70, 229, 0.06); color: #4f46e5; border-color: rgba(79, 70, 229, 0.2); } .header-actions > .action-btn[data-v-c768701a]:last-child:not(.btn-restore-header):not(.btn-reopen-header):not(.follow-btn):hover { background: rgba(79, 70, 229, 0.12); border-color: rgba(79, 70, 229, 0.35); } .header-actions > .action-btn:last-child:not(.btn-restore-header):not(.btn-reopen-header):not(.follow-btn) svg[data-v-c768701a] { opacity: 0.85; } /* Follow button accent */ .follow-btn.is-following[data-v-c768701a] { background: rgba(79, 70, 229, 0.06); color: #4f46e5; border-color: rgba(79, 70, 229, 0.2); } /* Snooze button - amber accent */ .action-btn-snooze[data-v-c768701a] { width: 30px; min-width: 30px !important; padding: 0 !important; justify-content: center; background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.25) !important; color: #d97706 !important; } .action-btn-snooze[data-v-c768701a]:hover { background: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.4) !important; } /* Botón Unsnooze in header (Snooze) - Naranja */ .btn-unsnooze-header[data-v-c768701a] { background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid #f59e0b; } .btn-unsnooze-header[data-v-c768701a]:hover { background-color: #f59e0b; color: white; } /* Botón Not Spam in header (Spam) - Indigo */ .btn-notspam-header[data-v-c768701a] { background-color: rgba(99, 102, 241, 0.1); color: #6366F1; border: 1px solid #6366F1; } .btn-notspam-header[data-v-c768701a]:hover { background-color: #6366F1; color: white; } /* Botón Manage Blocked in header (Spam) - Gray/Neutral */ .btn-manage-blocked[data-v-c768701a] { background-color: rgba(107, 114, 128, 0.1); color: #6B7280; border: 1px solid #6B7280; } .btn-manage-blocked[data-v-c768701a]:hover { background-color: #6B7280; color: white; } /* Smaller Manage Blocked button for list header */ .btn-manage-blocked-small[data-v-c768701a] { padding: 4px 10px; font-size: var(--font-size-sm); background-color: rgba(107, 114, 128, 0.1); color: #6B7280; border: 1px solid #6B7280; border-radius: var(--radius-base); display: flex; align-items: center; gap: 4px; cursor: pointer; transition: var(--transition-colors); } .btn-manage-blocked-small[data-v-c768701a]:hover { background-color: #6B7280; color: white; } .btn-manage-blocked-small .icon-svg-inline[data-v-c768701a] { width: 14px; height: 14px; } /* --- ANIMACIÓN Y DESPLAZAMIENTO AL HACER HOVER --- */ /* Elementos que se mueven o encogen */ .time[data-v-c768701a], .attachment-icon-svg[data-v-c768701a] { transition: transform 0.2s ease; position: relative; z-index: 5; } /* Mover hora y clip a la izquierda (espacio para botones) */ .email-card:hover .time[data-v-c768701a], .email-card:hover .attachment-icon-svg[data-v-c768701a] { transform: translateX(-42px); } .email-card:hover .card-followup-icon[data-v-c768701a] { display: none; } /* Recortar textos (padding derecho) */ .email-card:hover .card-preview-row[data-v-c768701a], .email-card:hover .participants[data-v-c768701a], .email-card:hover .card-subject-text[data-v-c768701a] { padding-right: 36px; } /* --- TEXTOS TRUNCADOS (CARD) --- */ /* 1. Línea Superior: Participantes */ .card-top[data-v-c768701a] { display: flex; justify-content: space-between; align-items: center; min-width: 0; margin-bottom: 4px; } .card-top-left[data-v-c768701a] { display: flex; align-items: center; min-width: 0; flex: 1; margin-right: 8px; gap: 4px; } .participants[data-v-c768701a] { font-weight: 500; color: var(--text-primary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; } .card-followup-icon[data-v-c768701a] { flex-shrink: 0; color: var(--accent-primary); opacity: 0.6; } /* Fourth row in the conversation card — SLA pill + time delta. Only rendered when slaStatusFor(conv) returns 'overdue' | 'warning'. Red palette for overdue, amber for approaching. */ .card-sla-row[data-v-c768701a] { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 1; } .card-sla-pill[data-v-c768701a] { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .card-sla-time[data-v-c768701a] { color: var(--text-tertiary); } /* SLA pill — overdue is genuine urgency → red stays. "Approaching" (warning) is NOT yet urgent, so it reads neutral in the calm palette rather than as a second warm alarm color. Both themed. */ .card-sla-row-overdue .card-sla-pill[data-v-c768701a] { background: rgba(220, 38, 38, 0.1); color: #dc2626; } .card-sla-row-warning .card-sla-pill[data-v-c768701a] { background: var(--bg-active); color: var(--text-secondary); } [data-theme="dark"] .card-sla-row-overdue .card-sla-pill[data-v-c768701a] { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } [data-theme="dark"] .card-sla-row-warning .card-sla-pill[data-v-c768701a] { background: var(--bg-active); color: var(--text-secondary); } /* Hora (unificada) */ .time[data-v-c768701a] { flex-shrink: 0; font-size: 12px; color: var(--text-tertiary); /* transition y z-index heredados de la regla agrupada arriba */ } .time-clickable[data-v-c768701a] { cursor: pointer; } .time-clickable[data-v-c768701a]:hover { color: var(--text-secondary); } /* Snooze time - when showing snoozed_until date. Calm palette: this is informational ("returns at …"), not urgent, so it stays neutral instead of warm amber. Distinguished from the plain time by weight, not color. */ .snooze-time[data-v-c768701a] { flex-shrink: 0; font-size: 12px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; margin-left: 8px; } /* Truncate participants more aggressively when showing snooze time */ .participants.truncated[data-v-c768701a] { max-width: 50%; /* Limit to 50% to ensure snooze time is always visible */ } /* 2. Línea Media: Asunto */ .card-subject[data-v-c768701a] { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; /* Compact: tighten from the base 14px to match the calm, dense list hierarchy (sender 13 / subject 13 / preview 13 / time 12). */ font-size: 13px; } .card-subject-text[data-v-c768701a] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; display: block; } .unsnoozed-icon[data-v-c768701a] { width: 14px; height: 14px; color: var(--color-warning, #f59e0b); flex-shrink: 0; } /* 3. Línea Inferior: Preview */ .card-preview-row[data-v-c768701a] { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; overflow: hidden; } .card-tag-icons[data-v-c768701a] { display: inline-flex; align-items: center; /* V20.199iv — 6px gap entre chips (spec markers). */ gap: 6px; flex-shrink: 0; } .card-tag-icon[data-v-c768701a] { display: inline-flex; align-items: center; justify-content: center; } .card-tag-emoji[data-v-c768701a] { font-size: 11px; line-height: 1; } .card-tag-dot[data-v-c768701a] { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ── Calm tag pills (normal rows) ──────────────────────────────────── Restyle the inline tag/marker display into the Claude-handoff design's small neutral pills: pill-shaped, compact, neutral surface + secondary text + subtle border. Theme-aware via app tokens. The attachment pill shares the shape. Only a genuine-urgency tag could go red — there's no per-row urgency flag on normal rows, so every pill stays neutral here (no fabricated URGENT chip). */ .card-tag-pill[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 120px; padding: 1px 7px; font-size: 10.5px; font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; color: var(--text-secondary, #52525b); background: var(--bg-hover, #f0f1f3); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 20px; } .card-tag-pill .card-tag-name[data-v-c768701a] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-tag-pill .card-tag-emoji[data-v-c768701a] { flex: none; } /* V20.199iv — overflow "+X": neutral count pill, visually distinct from the COLORED markers (TagBadge chips) and from the gray "External" system chip. */ .card-tag-overflow[data-v-c768701a] { padding: 1px 6px; font-weight: 600; } /* Attachment pill — same calm neutral pill, paperclip + "File". */ .card-attach-pill svg[data-v-c768701a] { flex: none; stroke: currentColor; color: var(--text-tertiary, #71717a); } .preview-avatar[data-v-c768701a] { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: white; flex-shrink: 0; } /* ── Normal-row avatar — NEUTRAL chip ──────────────────────────────── The left avatar on every NON-pulse .email-card row. Calm/neutral so it never reads as the indigo/red pulse severity avatar: neutral bg, secondary text, subtle inset border. ~30px to match the Leader Pulse row density (compact). Theme-aware via app tokens. The parent .email-card is display:flex (base sheet), so this sits to the LEFT of .card-content automatically. */ .card-avatar-neutral[data-v-c768701a] { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; /* V20.199jo — belt&suspenders: por más basura que llegue como "iniciales", el chip NUNCA desborda sobre el nombre. */ overflow: hidden; margin-top: 1px; margin-right: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; user-select: none; color: var(--text-secondary, #52525b); background: var(--bg-hover, #f0f1f3); box-shadow: inset 0 0 0 1px var(--border-primary, #e8e8ec); } /* ════════════════════════════════════════════════════════════════════ V20.199hp — PREMIUM = the Leader-Pulse look (Julio: "Premium debería verse así", con el screenshot de las filas de Leader Pulse). Colored INDIGO avatar (like .pulse-avatar) + a vivid FLAT-RAIL selection: indigo wash + the base 3px left rail, NO box (mirrors .is-pulse-row.selected). Scoped to .density-premium and overrides ONLY background/avatar, so it can NEVER leak the box/margin into Outlook (the hk bug). ════════════════════════════════════════════════════════════════════ */ .email-card.density-premium .card-avatar-neutral[data-v-c768701a] { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent); } /* selected: just a more-vivid indigo wash; the flat 3px rail comes from the base .email-card.selected rule (no border/radius/margin here → nothing to leak). */ .email-card.density-premium.selected[data-v-c768701a] { background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent); } .email-card.density-premium.selected[data-v-c768701a]:hover { background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent); } /* …and the avatar pops to SOLID indigo when the row is selected. */ .email-card.density-premium.selected .card-avatar-neutral[data-v-c768701a] { color: #fff; background: var(--accent-primary); box-shadow: none; } /* ── Normal-row "External" chip ────────────────────────────────────── Replaces the stripped CAUTION/EXTERNAL boilerplate with a tiny neutral chip (mirror of the pulse row's .pulse-ext-chip, neutral palette). */ .card-ext-chip[data-v-c768701a] { display: inline-flex; align-items: center; flex: none; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 1.5; color: var(--text-tertiary, #71717a); background: var(--bg-hover, #f0f1f3); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 5px; } .card-preview[data-v-c768701a] { color: var(--text-tertiary); font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; transition: padding-right 0.2s ease; } /* V20.237 — live "X is replying" presence on the list row (Front parity). */ .card-preview.card-replying[data-v-c768701a] { color: var(--accent-primary); font-style: italic; } .card-replying-dots[data-v-c768701a] { display: inline-block; margin-left: 4px; letter-spacing: 1px; animation: cardReplyingBlink-c768701a 1.2s ease-in-out infinite; } @keyframes cardReplyingBlink-c768701a { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .card-replying-dots[data-v-c768701a] { animation: none; } } /* Assigned badge */ .card-scheduled-badge[data-v-c768701a] { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 8px; font-size: 11px; color: var(--accent-primary); background: rgba(79, 70, 229, 0.06); border-radius: 4px; width: fit-content; } .card-assigned-badge[data-v-c768701a] { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 6px; background-color: var(--bg-selected); border-radius: 4px; width: fit-content; color: var(--accent-secondary); font-size: 11px; } .card-assigned-badge svg[data-v-c768701a] { stroke: currentColor; flex-shrink: 0; } /* --- ESTILOS DEL NUEVO MENÚ HEADER --- */ .header-dropdown-menu[data-v-c768701a] { position: absolute; top: 100%; left: 0; /* Si quieres que se alinee a la derecha usa: right: 0; left: auto; */ margin-top: 6px; background-color: var(--surface-overlay); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: var(--shadow-dropdown); min-width: 260px; z-index: 2000; padding: 6px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .header-menu-item[data-v-c768701a] { display: flex; align-items: center; padding: 8px 16px; cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: background-color 0.15s ease, padding-left 0.15s ease; height: 36px; } /* V20.199jq UX-003 — foco visible en los clickeables no-button del reading panel. */ .header-menu-item[data-v-c768701a]:focus-visible, .comment-group-bar[data-v-c768701a]:focus-visible, .cdp-clickable[data-v-c768701a]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; border-radius: 4px; } .header-menu-item[data-v-c768701a]:hover { background-color: var(--bg-hover); color: var(--text-primary); padding-left: 20px; } .header-menu-icon[data-v-c768701a] { display: flex; align-items: center; justify-content: center; margin-right: 12px; width: 18px; color: var(--text-tertiary); } .header-menu-icon svg[data-v-c768701a] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Excepción para iconos que necesitan relleno (fill) en lugar de trazo (stroke) si es necesario */ .header-menu-icon svg path[data-v-c768701a] { /* Forzamos stroke para consistencia visual con el resto de tus iconos */ fill: none; stroke: currentColor; } .header-menu-label[data-v-c768701a] { flex: 1; white-space: nowrap; } .header-menu-shortcut[data-v-c768701a] { color: var(--text-quaternary); font-size: 12px; margin-left: 12px; } .header-menu-icon-right[data-v-c768701a] { color: var(--text-quaternary); display: flex; align-items: center; margin-left: 8px; } .header-menu-icon-right svg[data-v-c768701a] { width: 14px; height: 14px; stroke: currentColor; fill: none; } .header-menu-divider[data-v-c768701a] { height: 1px; background-color: var(--border-primary); margin: 4px 0; } /* Estado activo del botón trigger */ .icon-btn.active[data-v-c768701a] { background-color: var(--bg-active); color: var(--text-primary); } /* ========================================= COLLAPSIBLE INBOX STYLES ========================================= */ /* Inbox Group */ .inbox-group[data-v-c768701a] { margin-bottom: 4px; } /* Inbox Header (clickable) */ .inbox-header[data-v-c768701a] { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s; user-select: none; } .inbox-header[data-v-c768701a]:hover { background-color: var(--bg-hover); } .inbox-header.active[data-v-c768701a] { background-color: var(--bg-selected); } .inbox-header.disconnected[data-v-c768701a] { opacity: 0.6; } /* Expand Icon */ .inbox-expand-icon[data-v-c768701a] { margin-right: 6px; display: flex; align-items: center; } .inbox-expand-icon .chevron-svg[data-v-c768701a] { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform 0.2s; stroke: var(--text-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .inbox-expand-icon .chevron-svg.rotated[data-v-c768701a] { transform: rotate(0deg); } /* Inbox Item Icon (in menu) */ .inbox-item-icon[data-v-c768701a] { margin-right: 8px; display: flex; align-items: center; color: var(--text-primary); } .inbox-item-icon .nav-svg[data-v-c768701a] { width: 18px; height: 18px; stroke: var(--text-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Inbox Item Name (in menu) */ .inbox-item-name[data-v-c768701a] { flex: 1; font-weight: 500; font-size: 14px; color: var(--text-primary); } /* Status Badge (desconectada) */ .inbox-status-badge[data-v-c768701a] { width: 18px; height: 18px; border-radius: 50%; background-color: var(--color-error); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; } /* Sync Badge (not syncing) */ .inbox-sync-badge[data-v-c768701a] { display: flex; align-items: center; justify-content: center; color: var(--color-warning); margin-left: auto; cursor: pointer; padding: 2px; border-radius: 4px; transition: background-color 0.15s ease; } .inbox-sync-badge[data-v-c768701a]:hover { background-color: var(--color-warning-bg); } .inbox-sync-badge svg[data-v-c768701a] { animation: pulse-c768701a 2s ease-in-out infinite; } @keyframes pulse-c768701a { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Settings dropdown menu */ .settings-menu-container[data-v-c768701a] { position: relative; } .settings-dropdown[data-v-c768701a] { position: absolute; top: 100%; right: 0; margin-top: 6px; width: 180px; background: var(--surface-overlay, #fff); border: 1px solid var(--border-secondary); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 1000; padding: 4px; overflow: hidden; } .settings-dropdown-item[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: all 0.12s; } .settings-dropdown-item[data-v-c768701a]:hover { background: var(--bg-selected); color: var(--accent-primary); } .settings-dropdown-item svg[data-v-c768701a] { flex-shrink: 0; opacity: 0.7; } .settings-dropdown-item:hover svg[data-v-c768701a] { opacity: 1; } .settings-dropdown-divider[data-v-c768701a] { height: 1px; background: var(--border-secondary); margin: 4px 8px; } /* Sidebar footer */ .sidebar-footer-separator[data-v-c768701a] { margin-top: auto; height: 1px; margin-left: 12px; margin-right: 12px; background: #d4d4d8; } .sidebar-footer[data-v-c768701a] { padding: 6px 8px 8px; display: flex; justify-content: space-around; gap: 2px; } .sidebar-footer-btn[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 2px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 500; color: var(--text-tertiary); transition: all 0.15s; flex: 1; } .sidebar-footer-btn svg[data-v-c768701a] { flex-shrink: 0; transition: all 0.15s; } .sidebar-footer-btn[data-v-c768701a]:hover { background: rgba(0, 0, 0, 0.04); transform: translateY(-1px); } .sidebar-footer-btn:hover svg[data-v-c768701a] { transform: scale(1.2); } .sidebar-footer-btn[data-v-c768701a]:active { transform: translateY(0) scale(0.95); } .footer-help-popover[data-v-c768701a] { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); min-width: 180px; padding: 4px; z-index: 9999; } .footer-help-popover .dropdown-item[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 5px; cursor: pointer; font-size: 12.5px; color: var(--text-secondary, #52525b); white-space: nowrap; } .footer-help-popover .dropdown-item[data-v-c768701a]:hover { background: var(--bg-hover, #f4f4f5); } .footer-help-popover .dropdown-item-logout[data-v-c768701a] { color: #dc2626; } .footer-help-popover .dropdown-item-icon[data-v-c768701a] { display: flex; align-items: center; } .footer-help-popover .dropdown-item-icon .nav-svg[data-v-c768701a] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footer-help-popover .version-item[data-v-c768701a] { cursor: default; justify-content: center; border-top: 1px solid var(--border-primary, #e8e8ec); margin-top: 2px; padding-top: 6px; } .footer-help-popover .version-label[data-v-c768701a] { font-size: 10px; color: var(--text-quaternary, #a1a1aa); } /* Syncing indicator (animated dots) */ .inbox-syncing-indicator[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; } .syncing-dot[data-v-c768701a] { width: 4px; height: 4px; border-radius: 50%; background: #6366f1; animation: syncingBounce-c768701a 1.2s ease-in-out infinite; } .syncing-dot[data-v-c768701a]:nth-child(2) { animation-delay: 0.15s; } .syncing-dot[data-v-c768701a]:nth-child(3) { animation-delay: 0.3s; } @keyframes syncingBounce-c768701a { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } .inbox-header.not-syncing .inbox-item-name[data-v-c768701a] { color: var(--color-warning); } /* Folders List (nested) */ .inbox-folders[data-v-c768701a] { list-style: none; padding: 0; margin: 0 0 0 20px; animation: slideDown-c768701a 0.15s ease-out; } /* Nav Item (folder item base) */ .nav-item[data-v-c768701a] { display: flex; align-items: center; padding: 6px 8px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s; color: var(--text-primary); } .nav-item[data-v-c768701a]:hover { background-color: var(--bg-hover); } .nav-item .icon[data-v-c768701a] { margin-right: 8px; display: flex; align-items: center; color: var(--text-primary); } .nav-item .icon .nav-svg[data-v-c768701a] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-item .label[data-v-c768701a] { font-size: 14px; font-weight: 500; color: var(--text-primary); margin: 0; padding: 0; } .inbox-folders .folder-item[data-v-c768701a] { padding-left: 8px; } .inbox-folders .folder-item.active[data-v-c768701a] { background-color: var(--bg-selected); border-left: 3px solid var(--accent-primary); } .inbox-folders .folder-item.active .icon[data-v-c768701a], .inbox-folders .folder-item.active .label[data-v-c768701a] { color: var(--text-primary); } .inbox-folders .folder-item.active .icon .nav-svg[data-v-c768701a] { stroke: var(--text-primary); } /* Folder count badge */ .inbox-folders .folder-item .folder-count[data-v-c768701a] { background-color: var(--bg-selected); color: var(--accent-secondary); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 10px; min-width: 20px; text-align: center; margin-left: auto; } .inbox-folders .folder-item.active .folder-count[data-v-c768701a] { background-color: var(--bg-active); color: var(--text-primary); } /* No inboxes message */ .no-inboxes-message[data-v-c768701a] { padding: 20px; text-align: center; color: var(--text-tertiary); } .no-inboxes-message p[data-v-c768701a] { margin-bottom: 12px; } .no-inboxes-message button[data-v-c768701a] { padding: 8px 16px; background: var(--accent-primary); color: var(--color-white); border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } .no-inboxes-message button[data-v-c768701a]:hover { filter: brightness(0.9); } /* Animation */ @keyframes slideDown-c768701a { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } } /* Header Title Group */ .header-title-group[data-v-c768701a] { display: flex; align-items: center; gap: 12px; } .header-inbox-icon[data-v-c768701a] { color: var(--text-quaternary); } /* Header Tag Icon/Emoji */ .header-tag-emoji[data-v-c768701a] { font-size: 22px; } .header-tag-icon[data-v-c768701a] { width: 22px; height: 22px; flex-shrink: 0; } .header-view-icon[data-v-c768701a] { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-secondary); } /* Search header styles */ .search-header-content[data-v-c768701a] { display: flex; align-items: center; gap: 8px; flex: 1; } .search-header-content h2[data-v-c768701a] { margin: 0; } .search-header-query[data-v-c768701a] { font-size: 13px; font-weight: 400; color: var(--color-primary); padding: 2px 8px; background-color: var(--bg-selected); border-radius: 4px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-header-count[data-v-c768701a] { font-size: 12px; font-weight: 400; color: var(--text-tertiary); } .clear-search-btn[data-v-c768701a] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: none; border-radius: 4px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; } .clear-search-btn[data-v-c768701a]:hover { background: var(--bg-hover); color: var(--text-primary); } .clear-search-btn svg[data-v-c768701a] { width: 14px; height: 14px; } /* Filter count badge */ .filter-count[data-v-c768701a] { font-size: 10px; font-weight: 600; color: var(--text-secondary); background: rgba(0, 0, 0, 0.08); padding: 1px 6px; border-radius: 10px; margin-left: 4px; min-width: 16px; text-align: center; } .filter-pill.active .filter-count[data-v-c768701a] { background: rgba(99, 102, 241, 0.15); color: #6366f1; font-weight: 700; } .filter-pill-badge[data-v-c768701a] { font-size: 11px; font-weight: 400; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 9px; min-width: 18px; text-align: center; color: var(--text-tertiary, #71717a); background: rgba(0, 0, 0, 0.06); font-variant-numeric: tabular-nums; } .filter-pill.active .filter-pill-badge[data-v-c768701a] { color: #4f46e5; background: rgba(79, 70, 229, 0.1); } .filter-menu-count[data-v-c768701a] { font-size: 11px; color: var(--text-quaternary); margin-left: auto; margin-right: 8px; } /* ========================================= SIDEBAR — LEADER PULSE SECTION (Sprint A) Collapsible group above "Personal Inboxes" ========================================= */ .leader-pulse-section[data-v-c768701a] { /* Slight bottom margin to visually separate from Personal Inboxes */ margin-bottom: 8px; } .leader-pulse-header[data-v-c768701a] { /* Header gains a small badge slot on the right (between label and chevron) */ display: flex; align-items: center; gap: 6px; } .leader-pulse-header-label[data-v-c768701a] { flex: 1; /* Inherit caps + letter-spacing from .sidebar-section-header */ } .leader-pulse-header-badge[data-v-c768701a] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; font-size: 10px; font-weight: 600; border-radius: 999px; background: #dc2626; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; } .leader-pulse-items[data-v-c768701a] { display: flex; flex-direction: column; } .leader-pulse-item[data-v-c768701a] { /* Reuses .user-folder-item layout; this just tweaks counts. */ } /* Severity-coloured count pills */ .folder-count.leader-pulse-count-danger[data-v-c768701a] { background: #fee2e2; color: #b91c1c; } .folder-count.leader-pulse-count-warn[data-v-c768701a] { background: #fef3c7; color: #b45309; } .folder-count.leader-pulse-count-info[data-v-c768701a] { /* Fall through to the default folder-count colors */ } /* ========================================= LEADER PULSE LIST HEADER (premium rebuild May 2026). IMPORTANT — namespaced as .lp-listhdr-* on purpose: the SIDEBAR section uses .leader-pulse-header (with `display: flex`) and reusing that class in the list column was forcing the title row + section strip side-by-side instead of stacked. Different element, different class. Two-row design (At a glance): Row 1: title bar — icon + label + count + loading Row 2: section strip — 5 inline chips, click to navigate Sub-sections render only Row 1. ========================================= */ /* The header is a CSS container so the brief card + KPI tiles can scale proportional to the email-list-col width (which the user resizes via the panel-resize handle). Container queries beat media queries here because they react to the COLUMN width, not the viewport. Wide column → bigger numbers, narrow column → all sizes shrink in lockstep. */ .lp-listhdr[data-v-c768701a] { container-type: inline-size; container-name: lphdr; background: linear-gradient(180deg, rgba(79, 70, 229, 0.05) 0%, rgba(79, 70, 229, 0.02) 100%); border-bottom: 1px solid var(--border-secondary, #eeeef2); width: 100%; box-sizing: border-box; } .lp-listhdr-spin[data-v-c768701a] { animation: lp-listhdr-spin-c768701a 1s linear infinite; } @keyframes lp-listhdr-spin-c768701a { to { transform: rotate(360deg); } } /* Inbox-filter chip row — sits above the brief card. Compact pill buttons, scrolls horizontally if there are many inboxes. The active state uses the accent color so the leader sees their filter scope at a glance. */ .lp-inbox-filter[data-v-c768701a] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px 0; } .lp-inbox-filter-label[data-v-c768701a] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary, #71717a); margin-right: 2px; flex: 0 0 auto; } .lp-inbox-chip[data-v-c768701a] { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 11px; font-weight: 500; border-radius: 999px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-secondary, #52525b); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-inbox-chip[data-v-c768701a]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); } .lp-inbox-chip.is-active[data-v-c768701a] { background: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); color: #fff; } /* Regenerate Pulse button — sits at the right edge of the inbox- filter row via margin-left:auto. Distinct visual treatment (icon + text, slightly different chrome) so it doesn't look like another inbox toggle chip. */ .lp-regen-btn[data-v-c768701a] { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 11px; font-weight: 500; border-radius: 999px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-secondary, #52525b); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; white-space: nowrap; } .lp-regen-btn[data-v-c768701a]:hover:not(:disabled) { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); background: rgba(79, 70, 229, 0.04); } .lp-regen-btn[data-v-c768701a]:disabled { cursor: default; opacity: 0.7; } .lp-regen-btn-label[data-v-c768701a] { /* Hidden on tightest container width via @container rule below. */ } @container lphdr (max-width: 360px) { .lp-regen-btn[data-v-c768701a] { padding: 3px 6px; } .lp-regen-btn-label[data-v-c768701a] { display: none; } } /* AI Brief — hero card. Indigo gradient bg + 3px accent border-left so it's the first thing the leader's eye lands on. Sizes are intentionally compact — the content is 2-3 sentences max. */ .lp-brief-card[data-v-c768701a] { margin: 8px 10px 0; padding: 9px 11px; background: linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(79, 70, 229, 0.02) 100%); border: 1px solid rgba(79, 70, 229, 0.18); border-left: 3px solid var(--accent-primary, #4f46e5); border-radius: 6px; position: relative; } .lp-brief-card.is-loading[data-v-c768701a] { opacity: 0.85; } .lp-brief-card-header[data-v-c768701a] { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .lp-brief-card-tag[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent-primary, #4f46e5); flex: 0 0 auto; } .lp-brief-card-refresh[data-v-c768701a] { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: var(--text-tertiary, #71717a); border-radius: 4px; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .lp-brief-card-refresh[data-v-c768701a]:hover:not(:disabled) { background: rgba(79, 70, 229, 0.10); color: var(--accent-primary, #4f46e5); } .lp-brief-card-refresh[data-v-c768701a]:disabled { cursor: default; opacity: 0.6; } .lp-brief-card-body[data-v-c768701a] { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-primary, #3f3f46); font-weight: 400; } .lp-brief-card-skeleton[data-v-c768701a] { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary, #71717a); font-style: italic; } /* KPI grid — 4 compact tiles. Auto-fit minmax(98px) so they sit 4-up on wide columns, 2×2 on medium, single column on very narrow. Sizes intentionally small so the header doesn't dominate the email list below. */ .lp-kpi-grid[data-v-c768701a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 6px; padding: 8px 10px 10px; } .lp-kpi-tile[data-v-c768701a] { background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 6px; padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; transition: border-color 120ms ease, box-shadow 120ms ease; } .lp-kpi-tile[data-v-c768701a]:hover { border-color: rgba(79, 70, 229, 0.30); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .lp-kpi-tile.is-warn[data-v-c768701a] { border-color: rgba(220, 38, 38, 0.30); background: rgba(220, 38, 38, 0.02); } .lp-kpi-tile.is-warn .lp-kpi-tile-value[data-v-c768701a] { color: #b91c1c; } .lp-kpi-tile-label[data-v-c768701a] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-kpi-tile-value[data-v-c768701a] { font-size: 17px; font-weight: 600; line-height: 1.1; color: var(--text-primary, #3f3f46); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; } .lp-kpi-tile-sub[data-v-c768701a] { font-size: 9px; color: var(--text-tertiary, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* V20.40 — Stats pills row. Replaces the 4 large KPI tiles with a compact horizontal strip. Each pill: number + label + delta. The strip wraps when narrow so all 4 stay visible without horizontal scroll. */ .lp-stats-pills[data-v-c768701a] { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 8px; } .lp-stat-pill[data-v-c768701a] { display: inline-flex; align-items: baseline; gap: 6px; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 999px; padding: 5px 12px 5px 12px; flex: 0 1 auto; min-width: 0; transition: border-color 120ms ease, box-shadow 120ms ease; } .lp-stat-pill.is-warn[data-v-c768701a] { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.04); } .lp-stat-pill.is-warn .lp-stat-pill-num[data-v-c768701a] { color: #b91c1c; } .lp-stat-pill.is-good[data-v-c768701a] { border-color: rgba(22, 163, 74, 0.30); background: rgba(22, 163, 74, 0.04); } .lp-stat-pill.is-good .lp-stat-pill-num[data-v-c768701a] { color: #15803d; } .lp-stat-pill.is-skeleton[data-v-c768701a] { border-color: var(--border-secondary, #eeeef2); background: var(--bg-hover, #f0f1f3); animation: lpStatPillSkeleton-c768701a 1.4s ease-in-out infinite; min-width: 110px; height: 26px; } @keyframes lpStatPillSkeleton-c768701a { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .lp-stat-pill-num[data-v-c768701a] { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #3f3f46); letter-spacing: -0.2px; line-height: 1; } .lp-stat-pill-label[data-v-c768701a] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-tertiary, #71717a); line-height: 1; } .lp-stat-pill-delta[data-v-c768701a] { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 2px; border-left: 1px solid var(--border-secondary, #eeeef2); padding-left: 8px; margin-left: 2px; line-height: 1; } .lp-stat-pill-delta-good[data-v-c768701a] { color: #15803d; } .lp-stat-pill-delta-bad[data-v-c768701a] { color: #b91c1c; } .lp-stat-pill-delta-flat[data-v-c768701a] { color: var(--text-tertiary, #71717a); } /* V20.40 — Section pills row. Click navigates to the dedicated route. Pills are compact, color-coded by section severity (info/warn/danger), and muted when the section count is 0. The strip wraps so all 7 sections stay visible without horizontal scroll. */ .lp-section-pills[data-v-c768701a] { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 10px; } .lp-section-pill[data-v-c768701a] { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11px; color: var(--text-primary, #3f3f46); cursor: pointer; transition: background 100ms ease, border-color 120ms ease, transform 80ms ease; white-space: nowrap; } .lp-section-pill[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); border-color: rgba(79, 70, 229, 0.40); } .lp-section-pill[data-v-c768701a]:active { transform: translateY(1px); } .lp-section-pill svg[data-v-c768701a] { flex: 0 0 auto; color: var(--text-secondary, #52525b); } .lp-section-pill-label[data-v-c768701a] { font-weight: 500; letter-spacing: 0.1px; } .lp-section-pill-count[data-v-c768701a] { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.06); color: var(--text-secondary, #52525b); padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; line-height: 1.4; } [data-theme="dark"] .lp-section-pill-count[data-v-c768701a] { background: rgba(255, 255, 255, 0.10); } /* Section pill severity tints — match leader-pulse-count-{severity} colors from the sidebar so the dashboard pill and the sidebar badge read as the same signal. */ .lp-section-pill-warn[data-v-c768701a] { border-color: rgba(245, 158, 11, 0.40); background: rgba(245, 158, 11, 0.06); } .lp-section-pill-warn[data-v-c768701a]:hover { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.55); } .lp-section-pill-warn .lp-section-pill-count[data-v-c768701a] { background: rgba(245, 158, 11, 0.20); color: #b45309; } .lp-section-pill-warn svg[data-v-c768701a] { color: #d97706; } .lp-section-pill-danger[data-v-c768701a] { border-color: rgba(220, 38, 38, 0.40); background: rgba(220, 38, 38, 0.06); } .lp-section-pill-danger[data-v-c768701a]:hover { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.55); } .lp-section-pill-danger .lp-section-pill-count[data-v-c768701a] { background: rgba(220, 38, 38, 0.18); color: #991b1b; } .lp-section-pill-danger svg[data-v-c768701a] { color: #dc2626; } /* Empty section pills — muted grey so "all clear" reads as a confirmation, not a missing entry. */ .lp-section-pill.is-empty[data-v-c768701a] { background: transparent; border-color: var(--border-secondary, #eeeef2); color: var(--text-tertiary, #71717a); } .lp-section-pill.is-empty[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); border-color: var(--border-primary, #e8e8ec); } .lp-section-pill.is-empty svg[data-v-c768701a] { color: var(--text-quaternary, #a1a1aa); } .lp-section-pill.is-empty .lp-section-pill-count[data-v-c768701a] { background: transparent; color: var(--text-quaternary, #a1a1aa); } /* Container-query scaling — when the email-list-col is wider, the KPI numbers grow proportionally. When narrower, they shrink. This is what makes the cards feel "right-sized" at any column width the user picks via the resize handle. Three breakpoints, all based on the .lp-listhdr container width (NOT the viewport). - <= 360px : tightest layout, 14px values, 6px gap - 361-560px : the default sizes above - >= 561px : roomier — 19px values, 8px gap, larger padding */ @container lphdr (max-width: 360px) { .lp-brief-card[data-v-c768701a] { margin: 6px 8px 0; padding: 7px 9px; } .lp-brief-card-body[data-v-c768701a], .lp-brief-card-skeleton[data-v-c768701a] { font-size: 11px; line-height: 1.45; } .lp-kpi-grid[data-v-c768701a] { padding: 6px 8px 8px; gap: 5px; grid-template-columns: repeat(2, 1fr); } .lp-kpi-tile[data-v-c768701a] { padding: 6px 7px; } .lp-kpi-tile-value[data-v-c768701a] { font-size: 14px; } .lp-kpi-tile-label[data-v-c768701a] { font-size: 8px; } .lp-kpi-tile-sub[data-v-c768701a] { font-size: 8px; } .lp-inbox-filter[data-v-c768701a] { padding: 6px 8px 0; } .lp-inbox-chip[data-v-c768701a] { font-size: 10px; padding: 2px 7px; } /* V20.40 narrow-width pill scaling */ .lp-stats-pills[data-v-c768701a] { padding: 6px 8px 6px; gap: 4px; } .lp-stat-pill[data-v-c768701a] { padding: 4px 9px; gap: 5px; } .lp-stat-pill-num[data-v-c768701a] { font-size: 12px; } .lp-stat-pill-label[data-v-c768701a] { font-size: 8px; } .lp-stat-pill-delta[data-v-c768701a] { font-size: 9px; padding-left: 6px; } .lp-section-pills[data-v-c768701a] { padding: 0 8px 8px; gap: 4px; } .lp-section-pill[data-v-c768701a] { padding: 3px 8px; font-size: 10px; gap: 4px; } .lp-section-pill svg[data-v-c768701a] { width: 11px; height: 11px; } .lp-section-pill-count[data-v-c768701a] { font-size: 9px; padding: 1px 5px; min-width: 14px; } } @container lphdr (min-width: 561px) { .lp-brief-card[data-v-c768701a] { margin: 12px 14px 0; padding: 12px 14px; } .lp-brief-card-body[data-v-c768701a], .lp-brief-card-skeleton[data-v-c768701a] { font-size: 13px; line-height: 1.55; } .lp-kpi-grid[data-v-c768701a] { padding: 12px 14px 14px; gap: 8px; } .lp-kpi-tile[data-v-c768701a] { padding: 10px 12px; } .lp-kpi-tile-value[data-v-c768701a] { font-size: 19px; } .lp-inbox-filter[data-v-c768701a] { padding: 10px 14px 0; gap: 6px; } /* V20.40 wide-width pill scaling — slightly more breathing room */ .lp-stats-pills[data-v-c768701a] { padding: 12px 14px 8px; gap: 8px; } .lp-stat-pill[data-v-c768701a] { padding: 6px 14px; gap: 7px; } .lp-stat-pill-num[data-v-c768701a] { font-size: 16px; } .lp-section-pills[data-v-c768701a] { padding: 0 14px 14px; gap: 6px; } .lp-section-pill[data-v-c768701a] { padding: 5px 12px; font-size: 12px; } } /* Delta classes — green for "good direction" (faster reply, more positive sentiment), red for the bad direction. Matches the conventions in lpTtfrDeltaClass / lpSentimentDeltaClass. */ .lp-kpi-tile-sub .lp-kpi-good[data-v-c768701a] { color: #16a34a; font-weight: 500; } .lp-kpi-tile-sub .lp-kpi-bad[data-v-c768701a] { color: #dc2626; font-weight: 500; } /* Skeleton state — shimmer-y placeholder so the tiles don't pop in jarringly when KPIs land. */ .lp-kpi-tile.is-skeleton[data-v-c768701a] { background: var(--surface-raised, #fff); pointer-events: none; } .lp-kpi-tile.is-skeleton .lp-kpi-tile-label[data-v-c768701a], .lp-kpi-tile.is-skeleton .lp-kpi-tile-value[data-v-c768701a], .lp-kpi-tile.is-skeleton .lp-kpi-tile-sub[data-v-c768701a] { background: linear-gradient(90deg, #f0f0f4 0%, #e8e8ec 50%, #f0f0f4 100%); background-size: 200% 100%; animation: lp-kpi-shimmer-c768701a 1.4s linear infinite; border-radius: 4px; color: transparent; } .lp-kpi-tile.is-skeleton .lp-kpi-tile-value[data-v-c768701a] { height: 24px; } @keyframes lp-kpi-shimmer-c768701a { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ───────────────────────────────────────────────────────────────── Email-card pulse colouring. In Leader Pulse mode each email-card row gets a colored left border that mirrors the section-card severity. The leader scans the list and sees at a glance which rows are decisions vs SLA vs shipment risk, and within each section which are urgent (red) vs moderate (amber). Below the preview a small "
· flagged: " meta line tells them WHY this row showed up. ─────────────────────────────────────────────────────────────────*/ .email-card.is-pulse-row[data-v-c768701a] { border-left: 3px solid transparent; } .email-card.pulse-sev-info[data-v-c768701a] { border-left-color: var(--accent-primary, #4f46e5); } .email-card.pulse-sev-warn[data-v-c768701a] { border-left-color: #d97706; } .email-card.pulse-sev-danger[data-v-c768701a] { border-left-color: #dc2626; } /* Customer Health and Team rows in pulse mode keep the cyan accent so they're visually distinct from the actionable queues. */ .email-card.pulse-section-customer_health[data-v-c768701a] { border-left-color: #0891b2; } .email-card.pulse-section-team_snapshot[data-v-c768701a] { border-left-color: #0891b2; } /* Selected pulse row — severity wins LEFT, selection wins everywhere else. The default `.email-card.selected` uses the `border:` shorthand which applies all 4 sides at 1px indigo. That stomped the 3px severity color on selection — the leader lost the WHY-this-matters signal at exactly the moment they were looking at it. Fix: targeted .email-card.is-pulse-row.selected (specificity 0,3,0 beats both .email-card.selected and .email-card.pulse-sev-* at 0,2,0) sets explicit longhand borders for top/right/bottom only, plus a stronger background tint for the selection. The border-left-width is re-asserted at 3px so the selection's 1px shorthand can't thin it out. The border-left-color comes from the severity-specific rules below — INTENSIFIED variants of the defaults so a selected severe row reads as "this severe item is what I'm reading right now". */ .email-card.is-pulse-row.selected[data-v-c768701a] { /* V20.199iq — the active DISPLAY MODE now owns the selection box (Classic lavender rounded box, Premium flat indigo wash, Outlook rail) so Leader Pulse adapts like every other view. We keep ONLY the 3px LEFT rail (width+style) so the severity COLOR set by the .selected.pulse-sev-* rules below always has a rail to paint — that's the pulse SIGNAL that must survive on top of whatever selection the mode draws. No bg / no box / no top-right-bottom borders here anymore (the mode draws those per mode). */ border-left-width: 3px; border-left-style: solid; } /* Intensified + saturated severity colors when the row is selected. Each pair = (border color, glow color). Glow is the brighter variant used for the box-shadow inset. */ /* V20.199fe/ff — SELECTED row's left rail: Hubswire DEFAULT accent (indigo) for non-risk rows, RED for risk/urgent rows (danger severity). Founder: "si es de risk el borde red, si no es risk borde del color default de hubswire." The avatar icon follows the same rule (indigo default / red danger). `--lp-danger` is theme-aware so red works in light + dark. */ .email-card.is-pulse-row.selected[data-v-c768701a] { border-left-color: var(--accent-primary, #4f46e5); } .email-card.is-pulse-row.selected.pulse-sev-danger[data-v-c768701a] { border-left-color: var(--lp-danger); } /* Dark theme — bg + indigo borders need to be brighter against the dark surface, and the severity colors LIGHTEN (not darken) for visibility. Glow opacity bumped a little since the surface is darker and the color needs to fight more bg luminance. */ /* V20.199iq — dark selection bg/borders now come from the active mode (theme-aware tokens, e.g. .density-compact.selected dark override). Only the dark severity rail color stays (below). */ /* In dark mode the intensified severity colors LIGHTEN (since the bg is dark) instead of darken. Glow follows the same direction. */ [data-theme="dark"] .email-card.is-pulse-row.selected[data-v-c768701a] { border-left-color: #a5b4fc; } [data-theme="dark"] .email-card.is-pulse-row.selected.pulse-sev-danger[data-v-c768701a] { border-left-color: var(--lp-danger); } .card-pulse-meta[data-v-c768701a] { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; line-height: 1.3; color: var(--text-tertiary, #71717a); min-width: 0; } .card-pulse-badge[data-v-c768701a] { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; border-radius: 3px; background: rgba(79, 70, 229, 0.08); color: var(--accent-primary, #4f46e5); flex-shrink: 0; } .card-pulse-badge-decisions[data-v-c768701a] { background: rgba(217, 119, 6, 0.10); color: #b45309; } .card-pulse-badge-sla_breaches[data-v-c768701a] { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .card-pulse-badge-shipment_risk[data-v-c768701a] { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .card-pulse-badge-customer_health[data-v-c768701a], .card-pulse-badge-team_snapshot[data-v-c768701a] { background: rgba(8, 145, 178, 0.10); color: #0e7490; } .card-pulse-reason[data-v-c768701a] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* At-Risk Archives — score badge + audit info on the row */ .card-pulse-score[data-v-c768701a] { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 1px 5px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 3px; background: rgba(79, 70, 229, 0.10); color: var(--accent-primary, #4f46e5); flex-shrink: 0; } .card-pulse-score-warn[data-v-c768701a] { background: rgba(217, 119, 6, 0.12); color: #b45309; } .card-pulse-score-danger[data-v-c768701a] { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .card-pulse-audit[data-v-c768701a] { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10px; line-height: 1.3; color: var(--text-tertiary, #71717a); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-pulse-audit-icon[data-v-c768701a] { flex-shrink: 0; opacity: 0.65; } .card-pulse-audit strong[data-v-c768701a] { color: var(--text-secondary, #52525b); font-weight: 600; } /* Hover-action button — Keep archived (At-Risk Archives only) */ /* V20.47 — Resolve hover action. Indigo-tinted to match the brand accent and signal "this is a pulse-specific action" — distinct from the standard archive (slate) / snooze (slate) buttons that share the row. Hover deepens the tint slightly so users get a clear click-target indication. */ .action-icon-btn.btn-pulse-resolve[data-v-c768701a] { color: var(--accent-primary, #4f46e5); } .action-icon-btn.btn-pulse-resolve[data-v-c768701a]:hover { background: rgba(79, 70, 229, 0.12); color: var(--accent-primary, #4f46e5); } .action-icon-btn.btn-keep-archived[data-v-c768701a] { color: var(--text-tertiary, #71717a); } .action-icon-btn.btn-keep-archived[data-v-c768701a]:hover { background: rgba(16, 185, 129, 0.10); color: #16a34a; } /* Hover-action button — Mute sender (Shipment Risk only) */ .action-icon-btn.btn-mute-sender[data-v-c768701a] { color: var(--text-tertiary, #71717a); } .action-icon-btn.btn-mute-sender[data-v-c768701a]:hover { background: rgba(217, 119, 6, 0.10); color: #d97706; } /* Shipment Risk — detected ref pill on the row meta */ .card-pulse-ref[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; border-radius: 3px; background: rgba(37, 99, 235, 0.10); color: #2563eb; white-space: nowrap; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ LEADER PULSE — PREMIUM ROW RESTYLE (Claude Design handoff · V20.199fa; calmed + compacted per founder feedback · V20.199fb) ─────────────────────────────────────────────────────────────────── HARD RULES honoured here: • EVERY selector below is scoped under `.email-card.is-pulse-row` (or `.is-pulse-row`). The `.email-card` row is SHARED with the normal inbox list — that list must look byte-for-byte unchanged. • THEME-AWARE: uses the app's existing theme tokens so it adapts to light + dark. Semantic colors come from scoped `--lp-*` tokens defined on the row root with rgba tints that read on BOTH themes. • System font for UI text (inherited); mono ONLY for data (ref chip, score, counts) via --font-family-mono. • Light weights (≤600). Compact but with the design's row rhythm. ═══════════════════════════════════════════════════════════════════ */ /* Scoped semantic palette — lives ONLY on the pulse row so it can never leak to the normal list. rgba tints keep the soft backgrounds legible on the dark surface too; the line/solid variants are the readable foreground/border colors. The app's --accent-primary is the indigo. */ .email-card.is-pulse-row[data-v-c768701a] { --lp-good: #16a34a; --lp-good-soft: rgba(22, 163, 74, 0.10); --lp-good-line: rgba(22, 163, 74, 0.28); --lp-warn: #b45309; --lp-warn-soft: rgba(217, 119, 6, 0.12); --lp-warn-line: rgba(217, 119, 6, 0.30); --lp-danger: #dc2626; --lp-danger-soft: rgba(220, 38, 38, 0.10); --lp-danger-line: rgba(220, 38, 38, 0.30); --lp-accent-soft: rgba(79, 70, 229, 0.10); --lp-accent-line: rgba(79, 70, 229, 0.28); --lp-neutral-soft: var(--bg-hover, #f0f1f3); --lp-neutral-line: var(--border-primary, #e8e8ec); /* V20.199iq — padding/density REMOVED here so the ACTIVE DISPLAY MODE drives row density (Classic dense, Premium roomy, Outlook compact) exactly like every other view. align-items + gap stay — they lay out the avatar↔content, not the per-mode density. */ align-items: flex-start; gap: 10px; /* The severity left-border IS the accent rail — normalise width so unselected rows read (border-left-color set by pulse-sev-* rules already). */ border-left-width: 3px; } /* Dark theme — lighten the semantic foregrounds so chips/text read on the dark surface; soft backgrounds stay rgba so they self-adapt. */ [data-theme="dark"] .email-card.is-pulse-row[data-v-c768701a] { --lp-good: #4ade80; --lp-good-line: rgba(74, 222, 128, 0.34); --lp-warn: #fcd34d; --lp-warn-line: rgba(251, 191, 36, 0.34); --lp-danger: #fca5a5; --lp-danger-line: rgba(248, 113, 113, 0.34); --lp-accent-soft: rgba(155, 135, 245, 0.16); --lp-accent-line: rgba(155, 135, 245, 0.34); } /* Calm (founder): NO colored row-body wash, and NO per-row left rail unless the row is SELECTED (V20.199fd — "no muestres todos los bordes… solo cuando se seleccionan"). Unselected rows read clean; the section header + the badges (Decision / SLA) already convey severity. The selected row's severity-colored rail is set by the `.selected.pulse-sev-*` rules below. */ .email-card.is-pulse-row[data-v-c768701a]:not(.selected) { border-left-color: transparent; } /* Hover still reads clearly over the wash. */ .email-card.is-pulse-row[data-v-c768701a]:hover { background-color: var(--bg-hover); } /* V20.199iq — the old `.pulse-layout-*` adaptation (im) is GONE. Pulse rows now carry the REAL mode class (density-compact / density-premium / layout-outlook) so the active display mode drives density directly — no parallel hack needed. */ /* ── Avatar ─────────────────────────────────────────────────────── */ .is-pulse-row .pulse-avatar[data-v-c768701a] { /* V20.199fn — match the inbox row avatar size (.card-avatar-neutral, 26px). */ width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; /* V20.199jo — belt&suspenders contra overflow (igual que .card-avatar-neutral). */ overflow: hidden; margin-top: 1px; font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; user-select: none; /* V20.199fe — the icon carries the color (founder: "solo el icon se debe poner del color"). Hubswire default accent (indigo); danger rows go red below. Keeps the palette to indigo + red. */ color: var(--accent-primary, #4f46e5); background: var(--lp-accent-soft); box-shadow: inset 0 0 0 1px var(--lp-accent-line); } /* Danger rows: a QUIET red-tinted avatar so urgency still reads — the only non-neutral avatar. Every other section stays neutral. */ .is-pulse-row.pulse-sev-danger .pulse-avatar[data-v-c768701a], .is-pulse-row .pulse-avatar-danger[data-v-c768701a] { color: var(--lp-danger); background: var(--lp-danger-soft); box-shadow: inset 0 0 0 1px var(--lp-danger-line); } /* ── line1 — sender + participants + date ───────────────────────── */ .is-pulse-row .card-top[data-v-c768701a] { align-items: baseline; margin-bottom: 2px; } /* Sender reads bolder; the "↔ participants" tail is muted. The participants string is "Sender, Other" — we can't split it in CSS, so we treat the whole line as the sender at a slightly bolder weight, matching the design's primary-sender emphasis. */ .is-pulse-row .participants[data-v-c768701a] { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary, #3f3f46); } .is-pulse-row .time[data-v-c768701a], .is-pulse-row .snooze-time[data-v-c768701a] { font-size: 11px; font-weight: 500; color: var(--text-tertiary, #71717a); letter-spacing: 0; } /* ── subject ────────────────────────────────────────────────────── */ .is-pulse-row .card-subject[data-v-c768701a] { margin-top: 1px; } .is-pulse-row .card-subject-text[data-v-c768701a] { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-primary, #3f3f46); } /* ── reference line — mono ref chip ─────────────────────────────── */ /* The existing .card-pulse-ref carries a 📦 emoji + ref. Restyle it to the design's mono chip with an accent dot. Strip the chip bg colour to the neutral surface; the accent dot supplies the colour cue. */ .is-pulse-row .card-pulse-ref[data-v-c768701a] { gap: 5px; padding: 2px 7px 2px 6px; font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; border-radius: 6px; color: var(--text-secondary, #52525b); background: var(--lp-neutral-soft); border: 1px solid var(--lp-neutral-line); } /* Accent dot before the ref text (the design's `.ref .dt`). */ .is-pulse-row .card-pulse-ref[data-v-c768701a]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-primary, #4f46e5); flex: none; } /* The contextual reason line — muted, single line. */ .is-pulse-row .card-pulse-reason[data-v-c768701a] { font-size: 11px; font-weight: 500; color: var(--text-tertiary, #71717a); } .is-pulse-row .card-pulse-meta[data-v-c768701a] { gap: 6px; margin-top: 4px; } /* ── preview — 2-line clamp + External chip ─────────────────────── */ .is-pulse-row .card-preview-row[data-v-c768701a] { align-items: flex-start; margin-top: 4px; } .is-pulse-row .card-preview[data-v-c768701a] { font-size: 12px; line-height: 1.4; color: var(--text-secondary, #52525b); /* 2-line clamp instead of the inbox's single-line ellipsis. */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The tiny "External" chip that replaces the CAUTION boilerplate. */ .is-pulse-row .pulse-ext-chip[data-v-c768701a] { display: inline-flex; align-items: center; flex: none; margin-top: 1px; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 1.5; color: var(--text-tertiary, #71717a); background: var(--lp-neutral-soft); border: 1px solid var(--lp-neutral-line); border-radius: 5px; } /* ── badges — color hierarchy ───────────────────────────────────── */ /* Shared pill shape for the pulse badges. The section badge, SLA pill, ISF/neutral badges and score all inherit this; colour comes from the per-type rules below. */ .is-pulse-row .card-pulse-badge[data-v-c768701a], .is-pulse-row .card-sla-pill[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; border-radius: 20px; border: 1px solid transparent; text-transform: none; } /* Decisions → indigo (accent). */ .is-pulse-row .card-pulse-badge-decisions[data-v-c768701a] { background: var(--lp-accent-soft); color: var(--accent-primary, #4f46e5); border-color: var(--lp-accent-line); } /* Shipment-Risk → neutral (calm; only Decision=indigo + SLA=red stand out). */ .is-pulse-row .card-pulse-badge-shipment_risk[data-v-c768701a] { background: var(--lp-neutral-soft); color: var(--text-secondary, #52525b); border-color: var(--lp-neutral-line); } /* SLA section badge (when shown) → danger. */ .is-pulse-row .card-pulse-badge-sla_breaches[data-v-c768701a] { background: var(--lp-danger-soft); color: var(--lp-danger); border-color: var(--lp-danger-line); } /* Customer Health / Team → neutral-cyan stays informational; keep it subtle so it doesn't compete with the actionable indigo/red. */ .is-pulse-row .card-pulse-badge-customer_health[data-v-c768701a], .is-pulse-row .card-pulse-badge-team_snapshot[data-v-c768701a] { background: var(--lp-neutral-soft); color: var(--text-secondary, #52525b); border-color: var(--lp-neutral-line); } /* SLA pill → danger + pulsing dot. The pill text "SLA" gets a leading animated dot via ::before (the design's `.tag.sla .pulse`). */ .is-pulse-row .card-sla-row[data-v-c768701a] { margin-top: 4px; gap: 6px; align-items: center; } .is-pulse-row .card-sla-row-overdue .card-sla-pill[data-v-c768701a], .is-pulse-row .card-sla-row-warning .card-sla-pill[data-v-c768701a] { background: var(--lp-danger-soft); color: var(--lp-danger); border-color: var(--lp-danger-line); font-weight: 700; position: relative; padding-left: 9px; } .is-pulse-row .card-sla-row-overdue .card-sla-pill[data-v-c768701a]::before, .is-pulse-row .card-sla-row-warning .card-sla-pill[data-v-c768701a]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-danger); position: relative; flex: none; } /* Calm: static red dot only — no expanding ping ring (founder: less "exagerado"). The ::before dot above is the urgency cue. */ .is-pulse-row .card-sla-time[data-v-c768701a] { font-size: 11px; font-weight: 600; color: var(--lp-danger); } @keyframes lpSlaPing-c768701a { 0% { transform: scale(0.6); opacity: 0.7; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } /* Frame-0 safe + respect reduced-motion: drop the ping animation. */ @media (prefers-reduced-motion: reduce) { .is-pulse-row .card-sla-row-overdue .card-sla-pill[data-v-c768701a]::after { animation: none; opacity: 0; } } /* Score chip → small mono neutral chip (severity-tinted variants kept). */ .is-pulse-row .card-pulse-score[data-v-c768701a] { font-family: var(--font-family-mono); border-radius: 5px; padding: 1px 6px; } /* ── hover quick-actions — round `.qa` buttons ──────────────────── */ /* Restyle the floating action container to the design's clean round buttons. The container itself stays absolute (inherited) — we only restyle the buttons within a pulse row. */ .is-pulse-row .card-hover-actions[data-v-c768701a] { gap: 4px; padding: 3px; } .is-pulse-row .card-hover-actions .action-icon-btn[data-v-c768701a] { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-tertiary, #71717a); } /* Default hover → accent tint (reply, archive, snooze, mute, reopen…). */ .is-pulse-row .card-hover-actions .action-icon-btn[data-v-c768701a]:hover { color: var(--accent-primary, #4f46e5); border-color: var(--lp-accent-line); background: var(--lp-accent-soft); transform: none; } /* Resolve / Keep-archived → good (green) tint — the "done" affordance. */ .is-pulse-row .card-hover-actions .action-icon-btn.btn-pulse-resolve[data-v-c768701a]:hover, .is-pulse-row .card-hover-actions .action-icon-btn.btn-keep-archived[data-v-c768701a]:hover { color: var(--lp-good); border-color: var(--lp-good-line); background: var(--lp-good-soft); } /* ───────────────────────────────────────────────────────────────── RECURRING ASKS — aggregate cards layout Different visual treatment from conversation rows: each card is a self-contained pattern summary with count, trend, requesters, and action CTAs. ─────────────────────────────────────────────────────────────────*/ /* V19 — Backfill progress bar. Two surfaces: pinned above items when a job is running with data already showing, and embedded inside the empty state when there's no data yet. Same visual treatment in both spots so the user recognises it. */ .lp-ra-v12-backfill[data-v-c768701a] { margin-top: 18px; padding: 14px; border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; background: var(--bg-secondary, #f5f5f7); text-align: left; } .lp-ra-v12-backfill-pinned[data-v-c768701a] { margin: 12px 12px 0; padding: 12px; } .lp-ra-v12-backfill-running[data-v-c768701a] { display: flex; flex-direction: column; gap: 6px; } .lp-ra-v12-backfill-label[data-v-c768701a] { font-size: 13px; font-weight: 500; color: var(--text-primary, #3f3f46); display: flex; justify-content: space-between; gap: 12px; } .lp-ra-v12-backfill-counts[data-v-c768701a] { font-variant-numeric: tabular-nums; color: var(--text-secondary, #71717a); font-weight: 400; } .lp-ra-v12-backfill-fail[data-v-c768701a] { color: #dc2626; } .lp-ra-v12-backfill-bar[data-v-c768701a] { width: 100%; height: 6px; background: var(--border-primary, #e8e8ec); border-radius: 3px; overflow: hidden; } .lp-ra-v12-backfill-bar-fill[data-v-c768701a] { height: 100%; background: var(--accent-primary, #4f46e5); border-radius: 3px; transition: width 0.4s ease; } .lp-ra-v12-backfill-pct[data-v-c768701a] { font-size: 11px; color: var(--text-tertiary, #a1a1aa); font-variant-numeric: tabular-nums; } .lp-ra-v12-backfill-pct-row[data-v-c768701a] { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .lp-ra-v12-backfill-stop[data-v-c768701a] { padding: 3px 10px; font-size: 11px; font-weight: 500; background: transparent; color: var(--text-secondary, #71717a); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .lp-ra-v12-backfill-stop[data-v-c768701a]:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; } .lp-ra-v12-backfill-cta[data-v-c768701a] { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .lp-ra-v12-backfill-controls[data-v-c768701a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lp-ra-v12-backfill-select[data-v-c768701a] { padding: 5px 10px; font-size: 12px; border: 1px solid var(--border-primary, #e8e8ec); border-radius: 6px; background: var(--surface-raised, #ffffff); color: var(--text-primary, #3f3f46); cursor: pointer; min-width: 180px; } .lp-ra-v12-backfill-select[data-v-c768701a]:focus { outline: none; border-color: var(--accent-primary, #4f46e5); } .lp-ra-v12-backfill-hint[data-v-c768701a] { font-size: 12px; color: var(--text-secondary, #71717a); line-height: 1.5; margin: 0; } .lp-ra-v12-backfill-btn[data-v-c768701a] { padding: 6px 14px; font-size: 12px; font-weight: 500; background: var(--accent-primary, #4f46e5); color: #ffffff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s ease; } .lp-ra-v12-backfill-btn[data-v-c768701a]:hover { background: #4338ca; } /* V12 — Recurring Asks rebuild styles. Minimal CSS, no animations, no gradients, no transforms. Designed to avoid any composite-layer thrashing that could compound the previous render hang. */ .lp-ra-v12[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .lp-ra-v12-summary[data-v-c768701a] { font-size: 13px; color: var(--text-secondary, #52525b); padding: 8px 12px; background: var(--bg-secondary, #f5f5f7); border-radius: 6px; } .lp-ra-v12-card[data-v-c768701a] { border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; padding: 10px 12px; background: var(--surface-raised, #ffffff); } .lp-ra-v12-head[data-v-c768701a] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .lp-ra-v12-emoji[data-v-c768701a] { font-size: 20px; flex-shrink: 0; } .lp-ra-v12-label[data-v-c768701a] { flex: 1; font-weight: 600; font-size: 14px; color: var(--text-primary, #3f3f46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-ra-v12-count[data-v-c768701a] { font-size: 18px; font-weight: 700; color: var(--accent-primary, #4f46e5); font-variant-numeric: tabular-nums; } .lp-ra-v12-from[data-v-c768701a] { font-size: 12px; color: var(--text-tertiary, #71717a); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-ra-v12-actions[data-v-c768701a] { display: flex; gap: 6px; flex-wrap: wrap; } .lp-ra-v12-btn[data-v-c768701a] { font-size: 12px; padding: 5px 10px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #ffffff); border-radius: 6px; cursor: pointer; color: var(--text-secondary, #52525b); } .lp-ra-v12-btn[data-v-c768701a]:hover { background: var(--bg-secondary, #f5f5f7); } .lp-ra-v12-empty[data-v-c768701a] { text-align: center; padding: 40px 24px; } .lp-ra-v12-empty-emoji[data-v-c768701a] { font-size: 36px; margin-bottom: 8px; } .lp-ra-v12-empty h3[data-v-c768701a] { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-primary, #3f3f46); } .lp-ra-v12-empty p[data-v-c768701a] { font-size: 13px; color: var(--text-tertiary, #71717a); margin: 0; } .lp-ra-v12-debug[data-v-c768701a] { border-top: 1px solid var(--border-secondary, #eeeef2); padding: 8px 12px; font-size: 11px; } .lp-ra-v12-debug-toggle[data-v-c768701a] { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-tertiary, #71717a); cursor: pointer; padding: 4px; } .lp-ra-v12-debug-pre[data-v-c768701a] { font-size: 10px; background: var(--bg-secondary, #f5f5f7); padding: 8px; border-radius: 4px; overflow: auto; max-height: 300px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .lp-recurring-list[data-v-c768701a] { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; } .lp-recurring-summary[data-v-c768701a] { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; margin-bottom: 4px; background: linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(79, 70, 229, 0.02) 100%); border: 1px solid rgba(79, 70, 229, 0.18); border-left: 3px solid var(--accent-primary, #4f46e5); border-radius: 8px; } .lp-recurring-summary-num[data-v-c768701a] { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-primary, #4f46e5); line-height: 1; } .lp-recurring-summary-label[data-v-c768701a] { font-size: 12px; color: var(--text-secondary, #52525b); line-height: 1.3; } .lp-recurring-card[data-v-c768701a] { background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; transition: border-color 120ms ease, box-shadow 120ms ease; } .lp-recurring-card[data-v-c768701a]:hover { border-color: rgba(79, 70, 229, 0.25); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); } .lp-recurring-card-top[data-v-c768701a] { border-color: rgba(79, 70, 229, 0.30); background: linear-gradient(180deg, rgba(79, 70, 229, 0.02) 0%, var(--surface-raised, #fff) 100%); } .lp-recurring-card-head[data-v-c768701a] { display: flex; align-items: center; gap: 10px; min-width: 0; } .lp-recurring-emoji[data-v-c768701a] { font-size: 20px; flex-shrink: 0; line-height: 1; } .lp-recurring-card-title[data-v-c768701a] { flex: 1; min-width: 0; } .lp-recurring-label[data-v-c768701a] { font-size: 13px; font-weight: 600; color: var(--text-primary, #3f3f46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-recurring-cluster-tag[data-v-c768701a] { font-size: 10px; color: var(--text-tertiary, #71717a); font-style: italic; margin-top: 1px; } .lp-recurring-count-block[data-v-c768701a] { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; } .lp-recurring-count[data-v-c768701a] { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #3f3f46); line-height: 1; letter-spacing: -0.5px; } .lp-recurring-count-label[data-v-c768701a] { font-size: 9px; color: var(--text-tertiary, #71717a); text-transform: uppercase; letter-spacing: 0.4px; } .lp-recurring-trend[data-v-c768701a] { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .lp-recurring-trend-up[data-v-c768701a] { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .lp-recurring-trend-down[data-v-c768701a] { background: rgba(22, 163, 74, 0.10); color: #16a34a; } .lp-recurring-trend-flat[data-v-c768701a] { background: var(--bg-hover, #f0f1f3); color: var(--text-tertiary, #71717a); } .lp-recurring-trend-new[data-v-c768701a] { background: rgba(79, 70, 229, 0.10); color: var(--accent-primary, #4f46e5); } .lp-recurring-requesters[data-v-c768701a] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary, #52525b); min-width: 0; } .lp-recurring-requesters-label[data-v-c768701a] { color: var(--text-tertiary, #71717a); font-weight: 500; flex-shrink: 0; } .lp-recurring-requester[data-v-c768701a] { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 7px; background: var(--bg-hover, #f0f1f3); border-radius: 4px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .lp-recurring-requester-count[data-v-c768701a] { font-size: 10px; color: var(--text-tertiary, #71717a); font-weight: 600; font-variant-numeric: tabular-nums; } .lp-recurring-actions[data-v-c768701a] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .lp-recurring-action-btn[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 6px; border: 1px solid var(--border-primary, #e8e8ec); background: var(--surface-raised, #fff); color: var(--text-secondary, #52525b); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; white-space: nowrap; } .lp-recurring-action-btn[data-v-c768701a]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); background: rgba(79, 70, 229, 0.04); } .lp-recurring-action-primary[data-v-c768701a] { background: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); color: #fff; } .lp-recurring-action-primary[data-v-c768701a]:hover { background: #4338ca; border-color: #4338ca; color: #fff; } .lp-recurring-threshold-hint[data-v-c768701a] { color: var(--text-tertiary, #71717a); font-size: 11px; font-style: italic; } /* Drill breadcrumb — top of email-list-col when "View all N" was clicked on a Recurring Asks card. Sticky-styled bar with back button + intent label + count. Same visual weight as a list header so the leader knows they drilled into a filtered view. */ /* V20.22 — Recurring Asks pills row (replaces the V12 stacked cards). */ .lp-ra-pills-wrap[data-v-c768701a] { padding: 12px 12px 8px; border-bottom: 1px solid var(--border-secondary, #eeeef2); background: var(--surface-raised, #ffffff); } .lp-ra-pills-summary[data-v-c768701a] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary, #71717a); margin-bottom: 8px; padding: 0 4px; } .lp-ra-pills-summary strong[data-v-c768701a] { color: var(--text-primary, #3f3f46); font-weight: 600; } .lp-ra-pills-volume[data-v-c768701a] { color: var(--text-tertiary, #a1a1aa); } .lp-ra-pills[data-v-c768701a] { display: flex; flex-wrap: wrap; gap: 6px; } .lp-ra-pill[data-v-c768701a] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; background: var(--bg-primary, #fafafc); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 999px; color: var(--text-primary, #3f3f46); cursor: pointer; transition: all 0.12s ease; white-space: nowrap; } .lp-ra-pill[data-v-c768701a]:hover { background: var(--bg-secondary, #f0f1f3); border-color: var(--border-primary, #d4d4d8); } .lp-ra-pill.is-selected[data-v-c768701a] { background: var(--bg-selected, rgba(79, 70, 229, 0.1)); border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); font-weight: 500; } .lp-ra-pill-emoji[data-v-c768701a] { font-size: 14px; line-height: 1; } .lp-ra-pill-label[data-v-c768701a] { flex: 0 1 auto; } .lp-ra-pill-count[data-v-c768701a] { font-variant-numeric: tabular-nums; font-weight: 600; background: rgba(0, 0, 0, 0.05); padding: 1px 8px; border-radius: 10px; min-width: 22px; text-align: center; } .lp-ra-pill.is-selected .lp-ra-pill-count[data-v-c768701a] { background: var(--accent-primary, #4f46e5); color: #ffffff; } .lp-ra-pills-selected-head[data-v-c768701a] { margin-top: 10px; padding: 6px 10px; font-size: 11px; color: var(--text-secondary, #71717a); background: var(--bg-primary, #fafafc); border-radius: 6px; } .lp-ra-pill-from[data-v-c768701a] { color: var(--text-primary, #3f3f46); } .lp-drill-breadcrumb[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 12px 0; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-left: 3px solid var(--accent-primary, #4f46e5); border-radius: 6px; font-size: 12px; min-width: 0; } .lp-drill-back[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; background: transparent; border: 1px solid var(--border-primary, #e8e8ec); border-radius: 4px; color: var(--text-secondary, #52525b); font-size: 11px; font-weight: 500; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; flex-shrink: 0; } .lp-drill-back[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); color: var(--accent-primary, #4f46e5); border-color: var(--accent-primary, #4f46e5); } .lp-drill-emoji[data-v-c768701a] { font-size: 16px; flex-shrink: 0; } .lp-drill-label[data-v-c768701a] { flex: 1; font-weight: 600; color: var(--text-primary, #3f3f46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lp-drill-count[data-v-c768701a] { font-size: 11px; color: var(--text-tertiary, #71717a); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ── Recurring Asks empty state — premium / educational ── */ .lp-recurring-empty[data-v-c768701a] { margin: 12px; padding: 24px 20px; text-align: center; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 10px; } .lp-recurring-empty-emoji[data-v-c768701a] { font-size: 36px; line-height: 1; margin-bottom: 10px; } .lp-recurring-empty h3[data-v-c768701a] { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-primary, #3f3f46); } .lp-recurring-empty p[data-v-c768701a] { margin: 0 auto 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #52525b); max-width: 440px; } .lp-recurring-empty-grid[data-v-c768701a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; max-width: 480px; margin: 0 auto; } .lp-recurring-empty-cat[data-v-c768701a] { padding: 5px 8px; font-size: 11px; background: var(--bg-hover, #f0f1f3); border-radius: 6px; color: var(--text-secondary, #52525b); } /* ── Emerging patterns (collapsed by default) ── */ .lp-emerging-section[data-v-c768701a] { margin: 8px 12px 0; border-top: 1px dashed var(--border-secondary, #eeeef2); padding-top: 8px; } .lp-emerging-toggle[data-v-c768701a] { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 4px; background: transparent; border: none; cursor: pointer; font-size: 12px; color: var(--text-secondary, #52525b); text-align: left; transition: color 120ms ease; } .lp-emerging-toggle[data-v-c768701a]:hover { color: var(--text-primary, #3f3f46); } .lp-emerging-chevron[data-v-c768701a] { transition: transform 120ms ease; flex-shrink: 0; } .lp-emerging-toggle.is-open .lp-emerging-chevron[data-v-c768701a] { transform: rotate(180deg); } .lp-emerging-count[data-v-c768701a] { display: inline-flex; align-items: center; padding: 1px 7px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; background: var(--accent-primary, #4f46e5); color: #fff; } .lp-emerging-sub[data-v-c768701a] { font-size: 11px; color: var(--text-tertiary, #71717a); font-style: italic; margin-left: 2px; } .lp-emerging-list[data-v-c768701a] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .lp-emerging-row[data-v-c768701a] { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px; transition: background 120ms ease; } .lp-emerging-row[data-v-c768701a]:hover { background: var(--bg-hover, #f0f1f3); } .lp-emerging-emoji[data-v-c768701a] { font-size: 13px; flex-shrink: 0; } .lp-emerging-label[data-v-c768701a] { flex: 1; color: var(--text-secondary, #52525b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lp-emerging-tag[data-v-c768701a] { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(79, 70, 229, 0.10); color: var(--accent-primary, #4f46e5); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; flex-shrink: 0; } .lp-emerging-row-count[data-v-c768701a] { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-tertiary, #71717a); min-width: 18px; text-align: right; flex-shrink: 0; } .lp-emerging-row-btn[data-v-c768701a] { padding: 2px 8px; font-size: 11px; border-radius: 4px; background: transparent; border: 1px solid var(--border-primary, #e8e8ec); color: var(--text-secondary, #52525b); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; flex-shrink: 0; } .lp-emerging-row-btn[data-v-c768701a]:hover { border-color: var(--accent-primary, #4f46e5); color: var(--accent-primary, #4f46e5); } /* ── Debug footer (very subtle) ── */ .lp-debug-section[data-v-c768701a] { margin: 12px 12px 16px; padding-top: 10px; border-top: 1px dashed var(--border-secondary, #eeeef2); } .lp-debug-toggle[data-v-c768701a] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: transparent; border: none; cursor: pointer; font-size: 10.5px; font-weight: 500; color: var(--text-tertiary, #71717a); text-transform: uppercase; letter-spacing: 0.4px; transition: color 120ms ease; } .lp-debug-toggle[data-v-c768701a]:hover { color: var(--text-secondary, #52525b); } .lp-debug-chevron[data-v-c768701a] { transition: transform 120ms ease; } .lp-debug-toggle.is-open .lp-debug-chevron[data-v-c768701a] { transform: rotate(180deg); } .lp-debug-grid[data-v-c768701a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; margin-top: 6px; padding: 8px 10px; background: var(--bg-hover, #f0f1f3); border-radius: 6px; } .lp-debug-stat[data-v-c768701a] { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; min-width: 0; } .lp-debug-stat-num[data-v-c768701a] { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary, #3f3f46); line-height: 1; } .lp-debug-stat-label[data-v-c768701a] { font-size: 10px; color: var(--text-tertiary, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* At-Risk Archives mini-stats card — sits between header and list */ .lp-atrisk-stats[data-v-c768701a] { display: flex; align-items: stretch; gap: 0; margin: 0 12px 8px; padding: 8px 12px; background: var(--surface-raised, #fff); border: 1px solid var(--border-primary, #e8e8ec); border-radius: 8px; font-size: 11px; } .lp-atrisk-stat[data-v-c768701a] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 4px; border-right: 1px solid var(--border-secondary, #eeeef2); min-width: 0; } .lp-atrisk-stat[data-v-c768701a]:last-child { border-right: none; } .lp-atrisk-stat-num[data-v-c768701a] { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text-primary, #3f3f46); } .lp-atrisk-stat-label[data-v-c768701a] { font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-atrisk-good[data-v-c768701a] { color: #16a34a; } .lp-atrisk-muted[data-v-c768701a] { color: var(--text-tertiary, #71717a); } .lp-atrisk-stat-tpr .lp-atrisk-stat-num[data-v-c768701a] { font-weight: 700; } /* ========================================= PULSE DRILLDOWN ROWS (customer / team) + empty states Shown inside .email-scroll-area when the route is /leader-pulse/customer-health or /leader-pulse/team. Visual treatment matches the Command Center's row look so the leader sees the same data shape regardless of surface. ========================================= */ .lp-section-empty[data-v-c768701a] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 24px; text-align: center; color: var(--text-tertiary, #71717a); } .lp-section-empty h3[data-v-c768701a] { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--text-primary, #3f3f46); } .lp-section-empty p[data-v-c768701a] { margin: 0; font-size: 12px; max-width: 320px; } /* V20.32 — Customer Health negative marker on email card headers. Subtle red chip with an AlertTriangle icon. Sits left of the Paperclip / Read badge in the email-card-meta row so it doesn't crowd the time stamp. */ .email-card-neg-marker[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; color: #b91c1c; background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.20); padding: 2px 6px; border-radius: 4px; line-height: 1; cursor: help; } .email-card-neg-marker svg[data-v-c768701a] { display: block; flex: 0 0 auto; } [data-theme="dark"] .email-card-neg-marker[data-v-c768701a] { color: #fca5a5; background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.30); } /* V20.132 — open-tracking badge ("Opened N×"). Indigo to distinguish from the red negative marker; same visual weight so badges line up in the header. */ .email-open-badge[data-v-c768701a] { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; color: #4f46e5; background: rgba(79, 70, 229, 0.08); border: 1px solid rgba(79, 70, 229, 0.20); padding: 2px 6px; border-radius: 4px; line-height: 1; cursor: help; } .email-open-badge svg[data-v-c768701a] { display: block; flex: 0 0 auto; } [data-theme="dark"] .email-open-badge[data-v-c768701a] { color: #a5b4fc; background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.30); } /* V20.32 — pulse animation on the email card the user landed on after clicking a Customer Health row. Uses a soft indigo glow that fades out over 2 seconds. The class is added/removed by pulseTargetEmail() imperatively rather than via Vue reactivity because the class lives on a child Vue component's root el ([data-email-id="X"]) which we query via the DOM. Bounded animation duration matches the cleanup setTimeout in pulseTargetEmail. */ .lp-ch-scroll-target[data-v-c768701a] { animation: lp-ch-pulse-c768701a 2.2s ease-out; /* `position: relative` so the box-shadow pulse stacks above neighbor cards. Email cards are usually relative already but we don't want to depend on that. */ position: relative; z-index: 2; } @keyframes lp-ch-pulse-c768701a { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45), 0 0 0 0 rgba(79, 70, 229, 0.0); } 30% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.18), 0 0 24px 4px rgba(79, 70, 229, 0.25); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.0), 0 0 0 0 rgba(79, 70, 229, 0.0); } } [data-theme="dark"] .lp-ch-scroll-target[data-v-c768701a] { animation-name: lp-ch-pulse-dark-c768701a; } @keyframes lp-ch-pulse-dark-c768701a { 0% { box-shadow: 0 0 0 0 rgba(155, 135, 245, 0.50), 0 0 0 0 rgba(155, 135, 245, 0.0); } 30% { box-shadow: 0 0 0 6px rgba(155, 135, 245, 0.25), 0 0 24px 6px rgba(155, 135, 245, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(155, 135, 245, 0.0), 0 0 0 0 rgba(155, 135, 245, 0.0); } } /* Customer rows (V20.31 — div role=button so chevron