/* =========================================================== Command Centre — left sidebar layout Activated when has class `has-sidebar`. =========================================================== */ :root { --cc-width: 280px; --cc-collapsed: 0px; } body.has-sidebar .nav { display: none !important; } body.has-sidebar { padding-left: var(--cc-width); } body.has-sidebar .main-content { min-height: 100vh; } body.has-sidebar .main-content > .container { max-width: none; padding-left: clamp(1.2rem, 3vw, 2.4rem); padding-right: clamp(1.2rem, 3vw, 2.4rem); } /* Hide chat-only sections when not on chat page */ body.has-sidebar:not(.on-chat-page) .cc-chat-only { display: none; } /* ---------- Sidebar shell ---------- */ .command-centre { position: fixed; top: 0; left: 0; bottom: 0; width: var(--cc-width); z-index: 90; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96) 60%, rgba(15, 23, 42, 0.98)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-right: 1px solid rgba(245, 158, 11, 0.12); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45); color: var(--color-text, #e5e7eb); transition: transform 0.28s cubic-bezier(.2,.7,.2,1); } .command-centre::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 320px 220px at 20% 0%, rgba(245, 158, 11, 0.10), transparent 70%), radial-gradient(ellipse 280px 200px at 80% 100%, rgba(139, 92, 246, 0.10), transparent 70%); } /* ---------- Brand ---------- */ .cc-brand { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .cc-brand-link { display: inline-flex; align-items: center; flex: 1; } .cc-brand-logo { height: 28px; width: auto; display: block; } .cc-mobile-close { display: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-dim, #94a3b8); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; } /* ---------- Scroll area ---------- */ .cc-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem 0.75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .cc-scroll::-webkit-scrollbar { width: 6px; } .cc-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; } /* ---------- Section ---------- */ .cc-section { padding: 0.6rem 0.4rem 0.8rem; } .cc-section + .cc-section { border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0.4rem; } .cc-section-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted, #94a3b8); padding: 0.2rem 0.6rem 0.7rem; } .cc-soon-pill { font-size: 0.6rem; padding: 0.18rem 0.45rem; border-radius: 999px; background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.25); letter-spacing: 0.06em; } /* ---------- Nav item ---------- */ .cc-item { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; border-radius: 12px; color: var(--color-text, #e5e7eb); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease; cursor: pointer; } .cc-item + .cc-item { margin-top: 0.2rem; } .cc-item:hover { background: rgba(245, 158, 11, 0.07); transform: translateX(2px); } body.cc-onboarding-locked .command-centre .cc-brand, body.cc-onboarding-locked .command-centre .cc-scroll, body.cc-onboarding-locked .command-centre .cc-user { filter: grayscale(0.45); opacity: 0.42; pointer-events: none; user-select: none; } .cc-onboarding-lock { display: none; position: absolute; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(2px); pointer-events: all; } body.cc-onboarding-locked .cc-onboarding-lock { display: flex; } .cc-onboarding-lock-card { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; max-width: 210px; padding: 1.15rem 1rem; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(15, 23, 42, 0.82); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); text-align: center; } .cc-onboarding-lock-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; color: #cbd5e1; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.22); } .cc-onboarding-lock-title { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: #e2e8f0; } .cc-onboarding-lock-copy { margin: 0; font-size: 0.72rem; line-height: 1.45; color: #94a3b8; } .cc-item--active { background: linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25); } .cc-item--active::before { content: ""; position: absolute; left: -0.75rem; top: 18%; bottom: 18%; width: 3px; background: linear-gradient(180deg, #f59e0b, #f97316); border-radius: 0 3px 3px 0; } .cc-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: #fbbf24; } .cc-item--active .cc-item-icon { background: rgba(245, 158, 11, 0.18); color: #fde68a; } .cc-item-label { font-weight: 650; font-size: 0.92rem; line-height: 1.2; } .cc-item-meta { grid-column: 2 / 4; color: var(--color-text-muted, #94a3b8); font-size: 0.74rem; margin-top: 0.15rem; } /* Coming-soon items */ .cc-item--soon { color: var(--color-text-muted, #94a3b8); cursor: not-allowed; opacity: 0.65; } .cc-item--soon:hover { background: rgba(255, 255, 255, 0.03); transform: none; } .cc-item--soon .cc-item-icon { background: rgba(255, 255, 255, 0.03); color: #94a3b8; } .cc-item-badge { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #cbd5e1; border: 1px dashed rgba(255, 255, 255, 0.12); } /* Soon sub-group (More Contracts) */ .cc-soon-group { margin-top: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.08); } .cc-soon-group-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted, #94a3b8); margin-bottom: 0.5rem; } .cc-soon-sublist { display: flex; flex-direction: column; gap: 0.3rem; } .cc-soon-subitem { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: #cbd5e1; } .cc-soon-subitem--muted { color: #64748b; font-style: italic; } .cc-soon-dot { width: 6px; height: 6px; border-radius: 999px; background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); } .cc-soon-dot--muted { background: #475569; box-shadow: none; } /* ---------- Timeline ---------- */ .cc-section--timeline { padding-bottom: 1rem; } .cc-timeline { position: relative; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 1.1rem; } .cc-tl-stage { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 0.7rem; align-items: flex-start; } .cc-tl-stage + .cc-tl-stage::before { content: ""; position: absolute; top: -1rem; left: 17px; width: 2px; height: 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); border-radius: 2px; } .cc-tl-stage--completed + .cc-tl-stage::before, .cc-tl-stage--active + .cc-tl-stage::before { background: linear-gradient(180deg, #f59e0b, rgba(245, 158, 11, 0.15)); } .cc-tl-node { position: relative; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-muted, #94a3b8); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cc-tl-check { display: none; } .cc-tl-stage--active .cc-tl-node { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.10)); border-color: rgba(245, 158, 11, 0.55); color: #fde68a; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10), 0 8px 20px rgba(245, 158, 11, 0.15); animation: cc-pulse 2.6s ease-in-out infinite; } .cc-tl-stage--completed .cc-tl-node { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: rgba(245, 158, 11, 0.6); color: #0f172a; } .cc-tl-stage--completed .cc-tl-icon { display: none; } .cc-tl-stage--completed .cc-tl-check { display: block; } @keyframes cc-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10), 0 8px 20px rgba(245, 158, 11, 0.15); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 8px 24px rgba(245, 158, 11, 0.25); } } .cc-tl-label { padding-top: 0.18rem; } .cc-tl-title { font-size: 0.86rem; font-weight: 700; color: var(--color-text, #e5e7eb); } .cc-tl-stage--upcoming .cc-tl-title { color: var(--color-text-muted, #94a3b8); } .cc-tl-sub { font-size: 0.72rem; color: var(--color-text-muted, #94a3b8); margin-top: 0.1rem; } /* ---------- User card ---------- */ .cc-user { position: relative; flex-shrink: 0; padding: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); } .cc-user-button { display: grid; grid-template-columns: 36px 1fr 14px; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--color-text, #e5e7eb); cursor: pointer; transition: background 0.15s ease; } .cc-user-button:hover { background: rgba(255, 255, 255, 0.06); } .cc-user-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #0f172a; background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: 0 6px 14px rgba(245, 158, 11, 0.25); } .cc-user-meta { min-width: 0; text-align: left; } .cc-user-name { font-size: 0.85rem; font-weight: 700; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-user-role { font-size: 0.68rem; color: var(--color-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.08em; } .cc-user-caret { color: var(--color-text-muted, #94a3b8); transition: transform 0.2s ease; } .cc-user--open .cc-user-caret { transform: rotate(180deg); } .cc-user-menu { position: absolute; bottom: calc(100% + 6px); left: 0.7rem; right: 0.7rem; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 0.4rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 95; max-height: 60vh; overflow-y: auto; } .cc-user--open .cc-user-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .cc-user-menu-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 10px; color: var(--color-text, #e5e7eb); text-decoration: none; font-size: 0.88rem; transition: background 0.12s ease; } .cc-user-menu-item:hover { background: rgba(245, 158, 11, 0.10); color: #fff; } .cc-user-menu-item svg { flex-shrink: 0; color: #fbbf24; } .cc-user-menu-item--danger { color: #fca5a5; } .cc-user-menu-item--danger:hover { background: rgba(239, 68, 68, 0.15); color: #fecaca; } .cc-user-menu-item--danger svg { color: #fca5a5; } .cc-user-menu-divider { height: 1px; margin: 0.35rem 0.3rem; background: rgba(255, 255, 255, 0.06); } /* ---------- Mobile toggle ---------- */ .cc-mobile-toggle { display: none; position: fixed; top: 12px; left: 12px; width: 42px; height: 42px; border-radius: 12px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: #f59e0b; z-index: 95; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); } .cc-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 80; opacity: 0; transition: opacity 0.22s ease; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { body.has-sidebar { padding-left: 0; } body.has-sidebar .main-content > .container { padding-top: 60px; } .command-centre { transform: translateX(-100%); } body.cc-open .command-centre { transform: translateX(0); } .cc-mobile-toggle { display: inline-flex; } .cc-mobile-close { display: inline-flex; } .cc-overlay { display: block; } body.cc-open .cc-overlay { opacity: 1; } body:not(.cc-open) .cc-overlay { pointer-events: none; } } /* On chat page on desktop, give the chat area extra breathing room */ body.has-sidebar.on-chat-page .main-content > .container { padding-left: 0; padding-right: 0; } /* =========================================================== Expandable items + right-side flyouts =========================================================== */ .cc-expandable { position: relative; } .cc-expandable .cc-item--expandable { width: 100%; background: transparent; border: none; text-align: left; font: inherit; cursor: pointer; color: inherit; grid-template-columns: 32px 1fr auto; align-items: start; } .cc-expandable .cc-item--expandable .cc-item-icon { grid-row: 1 / span 2; align-self: center; } .cc-expandable .cc-item--expandable .cc-item-label { grid-column: 2; grid-row: 1; } .cc-expandable .cc-item--expandable .cc-item-meta { grid-column: 2; grid-row: 2; margin-top: 0.1rem; } .cc-expandable .cc-item--expandable .cc-expand-caret { grid-column: 3; grid-row: 1; align-self: center; } .cc-expand-caret { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--color-text-muted, #94a3b8); transition: transform 0.22s ease, background 0.18s ease, color 0.18s ease; } .cc-expandable--open .cc-expand-caret { transform: rotate(90deg); background: rgba(245, 158, 11, 0.18); color: #fde68a; } .cc-expandable--open .cc-item--expandable { background: linear-gradient(120deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.05)); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22); } .cc-expandable--open .cc-item--expandable .cc-item-icon { background: rgba(245, 158, 11, 0.18); color: #fde68a; } .cc-item-count { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.45rem; min-width: 20px; height: 20px; padding: 0 0.4rem; border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f97316); color: #0f172a; font-size: 0.7rem; font-weight: 800; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25); animation: cc-count-pop 0.35s ease-out; } @keyframes cc-count-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .cc-item-count[hidden] { display: none; } /* Flyout panel */ .cc-flyout { position: fixed; top: 14px; bottom: 14px; left: calc(var(--cc-width) + 8px); width: min(320px, calc(100vw - var(--cc-width) - 32px)); max-height: calc(100vh - 28px); z-index: 88; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.99)); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(245, 158, 11, 0.18); border-radius: 18px; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55); transform: translateX(-12px); opacity: 0; pointer-events: none; overflow: hidden; transition: transform 0.26s cubic-bezier(.2,.7,.2,1), opacity 0.22s ease; } .cc-expandable--open .cc-flyout { transform: translateX(0); opacity: 1; pointer-events: auto; } .cc-flyout::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 360px 220px at 0% 0%, rgba(245, 158, 11, 0.10), transparent 70%), radial-gradient(ellipse 320px 220px at 100% 100%, rgba(139, 92, 246, 0.08), transparent 70%); } .cc-flyout-body { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .cc-flyout-body::-webkit-scrollbar { width: 6px; } .cc-flyout-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; } .cc-flyout-head { flex-shrink: 0; display: flex; gap: 0.6rem; align-items: flex-start; justify-content: space-between; padding: 0.85rem 0.95rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .cc-flyout-title { font-size: 0.95rem; font-weight: 800; color: #f8fafc; letter-spacing: -0.01em; } .cc-flyout-sub { font-size: 0.74rem; color: var(--color-text-muted, #94a3b8); margin-top: 0.15rem; line-height: 1.35; } .cc-flyout-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .cc-flyout-link { font-size: 0.78rem; font-weight: 700; color: #fbbf24; text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 8px; transition: background 0.15s ease; white-space: nowrap; } .cc-flyout-link:hover { background: rgba(245, 158, 11, 0.12); } .cc-flyout-button { border: 0; background: transparent; cursor: pointer; font-family: inherit; } .cc-flyout-close { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-dim, #94a3b8); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .cc-flyout-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .cc-flyout-section { padding: 0.75rem 0.85rem 0.9rem; } .cc-flyout-section + .cc-flyout-section { border-top: 1px solid rgba(255, 255, 255, 0.05); } .cc-flyout-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; gap: 0.4rem; } .cc-flyout-section-title { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fde68a; font-weight: 800; } .cc-flyout-section-title--muted { color: var(--color-text-muted, #94a3b8); } .cc-flyout-section-meta { font-size: 0.66rem; color: var(--color-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.08em; } .cc-pulse-dot { width: 8px; height: 8px; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: cc-dot-pulse 1.8s ease-in-out infinite; } @keyframes cc-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } } .cc-flyout-grid { display: flex; flex-direction: column; gap: 0.4rem; } .cc-contract-card { text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; padding: 0.6rem 0.7rem; color: inherit; text-decoration: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .cc-contract-card:visited, .cc-contract-card:focus { color: inherit; text-decoration: none; } .cc-contract-card:hover { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.4); transform: translateY(-1px); } .cc-contract-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .cc-contract-card-title { font-size: 0.82rem; font-weight: 700; color: #f8fafc; line-height: 1.25; } .cc-contract-card-cta { display: inline-flex; align-items: center; gap: 0.22rem; padding: 0.22rem 0.5rem; border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f97316); color: #0f172a; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28); flex-shrink: 0; } .cc-contract-card-copy { font-size: 0.72rem; line-height: 1.35; color: var(--color-text-muted, #cbd5e1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cc-flyout-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.10); color: var(--color-text-muted, #94a3b8); } .cc-flyout-empty[hidden], .cc-flyout-empty.cc-hidden { display: none !important; } .cc-hidden { display: none !important; } .cc-flyout-empty-icon { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: #fbbf24; display: inline-flex; align-items: center; justify-content: center; } .cc-flyout-empty-title { font-weight: 700; color: #e2e8f0; font-size: 0.82rem; } .cc-flyout-empty-copy { font-size: 0.72rem; line-height: 1.4; } .cc-status-score-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .cc-status-label { display: block; color: var(--color-text-muted, #94a3b8); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; margin-bottom: 0.25rem; } .cc-status-score-card strong { color: #f8fafc; font-size: 1.15rem; } .cc-status-pill { border-radius: 999px; padding: 0.32rem 0.55rem; font-size: 0.68rem; font-weight: 900; white-space: nowrap; } .cc-status-pill.low { color: #86efac; background: rgba(34, 197, 94, 0.13); border: 1px solid rgba(34, 197, 94, 0.22); } .cc-status-pill.medium { color: #fde68a; background: rgba(245, 158, 11, 0.13); border: 1px solid rgba(245, 158, 11, 0.24); } .cc-status-pill.high { color: #fecaca; background: rgba(248, 113, 113, 0.13); border: 1px solid rgba(248, 113, 113, 0.24); } .cc-status-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.55rem; } .cc-status-stats div { padding: 0.55rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); } .cc-status-stats strong, .cc-status-stats span { display: block; } .cc-status-stats strong { color: #f8fafc; font-size: 0.96rem; } .cc-status-stats span { color: var(--color-text-muted, #94a3b8); font-size: 0.68rem; margin-top: 0.12rem; } .cc-status-audit-list { display: grid; gap: 0.45rem; } .cc-status-audit-card { display: flex; justify-content: space-between; gap: 0.65rem; padding: 0.6rem 0.65rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); } .cc-status-audit-card.triggered { border-color: rgba(248, 113, 113, 0.24); background: rgba(248, 113, 113, 0.06); } .cc-status-audit-card.clear { border-color: rgba(34, 197, 94, 0.16); } .cc-status-audit-card.unknown { border-style: dashed; opacity: 0.86; } .cc-status-audit-card strong, .cc-status-audit-card span { display: block; } .cc-status-audit-card strong { color: #f8fafc; font-size: 0.78rem; line-height: 1.25; } .cc-status-audit-card span { color: var(--color-text-muted, #94a3b8); font-size: 0.68rem; line-height: 1.3; margin-top: 0.18rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cc-status-audit-card em { align-self: flex-start; flex-shrink: 0; border-radius: 999px; padding: 0.22rem 0.45rem; background: rgba(255, 255, 255, 0.07); color: #e2e8f0; font-size: 0.64rem; font-style: normal; font-weight: 900; } .cc-flyout-soon-list { display: flex; flex-direction: column; gap: 0.35rem; } .cc-flyout-soon-card { background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 0.5rem 0.7rem; color: var(--color-text, #e5e7eb); } .cc-flyout-soon-card--muted { color: var(--color-text-muted, #94a3b8); font-style: italic; } .cc-flyout-soon-title { font-size: 0.8rem; font-weight: 700; } .cc-flyout-soon-copy { font-size: 0.7rem; color: var(--color-text-muted, #94a3b8); margin-top: 0.1rem; line-height: 1.35; } @media (max-width: 960px) { .cc-flyout { left: 0; right: 0; width: 100%; } body:not(.cc-open) .cc-flyout { transform: translateX(-100%); opacity: 0; pointer-events: none; } }