/* ===== Real, tested functionality CSS (onboarding, rail/mobile nav, detail panel, status line, settings screen) -- kept verbatim from the pre-UI-1 stylesheet. Two selectors (.settings-grid, .connector-grid) are scoped to #settings-view above because the prototype CSS below defines its own, differently-shaped rules with the same names for the Connectors/dashboard views. ===== */ /* GUI-11: PDCC ships dark-by-default with a real, independently maintained light theme. The toggle sets data-theme on and persists the choice to localStorage (app.js); with no stored preference, the OS prefers-color-scheme is honored once. */ :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --bg: #11101b; --bg-glow: #292047; --rail: #151422; --surface: #1d1b2b; --surface2: #252239; --surface3: #222231; --surface-elevated: rgba(29, 27, 43, 0.92); --surface-elevated-soft: rgba(29, 27, 43, 0.65); --text: #f3f1fa; --text-secondary: #c8c4d5; --text-on-accent-soft: #d7d0ef; --label-text: #d6d2e3; --custom-label-text: #c9c2e4; --muted: #9995ad; --muted-strong: #bbb6cd; --muted-soft: #9993aa; --muted-fine: #9993aa; --muted-label: #aaa2cf; --capture-disabled: #77738d; --accent: #b49bff; --accent-strong: #cfc3ff; --accent-border: #7563b2; --btn-border: #6e5bb2; --btn-bg: #4b3d81; --btn-text: #f3f1fa; --accent-soft-bg: #342c54; --accent-soft-border: #625a83; --rail-active-bg: #27233b; --item-row-hover: #302b48; --chip-bg: #4a4b5d; --chip-text: #f2f0ff; --provider-icon-bg: #f4f2ff; --provider-icon-fg: #201a35; --telegram-bg: #21313b; --telegram-border: #4b7784; --telegram-icon-bg: #8ed2df; --danger: #f09ab1; --danger-border: #70445a; --ok: #7ad7b3; --ok-border: #39715f; --line: #39354d; --line2: #403b58; --input-border: #55516d; --policy-note-bg: #1e1932; --ai-denied-bg: #302b4b; --ai-denied-border: #4d426e; --ai-denied-text: #d0c0ff; --shadow: #08070f80; } :root[data-theme='light'] { color-scheme: light; --bg: #f4f3fa; --bg-glow: #ded6ff; --rail: #ffffff; --surface: #ffffff; --surface2: #efedf8; --surface3: #f7f6fc; --surface-elevated: rgba(255, 255, 255, 0.92); --surface-elevated-soft: rgba(255, 255, 255, 0.72); --text: #1c1a29; --text-secondary: #4a4560; --text-on-accent-soft: #3c3260; --label-text: #453f60; --custom-label-text: #453f60; --muted: #6b6683; --muted-strong: #57516f; /* GUI-13 accessibility audit (axe-core, color-contrast, serious) found the straight dark->light mapping of these two below WCAG AA (4.5:1) against every light-theme surface -- darkened past the mapping to restore margin; see core/DECISION_LOG.md "GUI-13 remediated". */ --muted-soft: #564f77; --muted-fine: #564f77; --muted-label: #544d77; --capture-disabled: #9992b3; --accent: #6b46d6; --accent-strong: #5433b0; --accent-border: #a68be0; --btn-border: #6e5bb2; --btn-bg: #6b46d6; --btn-text: #ffffff; --accent-soft-bg: #ece6fb; --accent-soft-border: #cabdf0; --rail-active-bg: #ece6fb; --item-row-hover: #e5e0f5; --chip-bg: #ded9ee; --chip-text: #2c2745; --provider-icon-bg: #f4f2ff; --provider-icon-fg: #201a35; --telegram-bg: #dff1f4; --telegram-border: #7fb8c4; --telegram-icon-bg: #8ed2df; --danger: #b23b57; --danger-border: #e3a9b8; /* GUI-13 accessibility audit found this below WCAG AA on #status/#connector-status text; darkened for contrast margin (5.26:1+ across every light-theme surface). */ --ok: #16704a; --ok-border: #9fdcc2; --line: #ddd8ec; --line2: #cfc8e6; --input-border: #c7c0de; --policy-note-bg: #ece6fb; --ai-denied-bg: #ece6fb; --ai-denied-border: #cabdf0; --ai-denied-text: #4a3a80; --shadow: #b7aed94d; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg); color: var(--text); } button, input, select, textarea { font: inherit; } button, a { outline-offset: 3px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, #view-title:focus-visible { outline: 2px solid var(--accent); } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; } .theme-toggle:hover { color: var(--text); border-color: var(--accent-border); } .muted { color: var(--muted); } .eyebrow, .rail-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .onboarding { min-height: 100vh; padding: 34px 7vw 60px; background: radial-gradient(circle at 80% 10%, var(--bg-glow) 0, transparent 38%), var(--bg); } .onboarding-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .onboarding-mark { font-size: 14px; letter-spacing: 0.08em; font-weight: 700; } .onboarding-mark span { font-size: 9px; color: var(--muted); margin-left: 10px; letter-spacing: 0.14em; } .onboarding-grid { max-width: 1080px; margin: 13vh auto 0; display: grid; grid-template-columns: 1.15fr 390px; gap: 10vw; align-items: center; } .onboarding-copy h1 { max-width: 620px; margin: 14px 0; font-size: clamp(42px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.06em; font-weight: 500; } .lede { max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); } .policy-note { display: grid; gap: 7px; max-width: 520px; margin-top: 36px; padding: 15px 17px; border-left: 2px solid var(--accent); background: var(--policy-note-bg); color: var(--text-on-accent-soft); font-size: 12px; line-height: 1.5; } .policy-note span { color: var(--muted); } .auth-card { padding: 27px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-elevated); box-shadow: 0 24px 80px var(--shadow); } .auth-card h2 { margin: 10px 0 8px; font-size: 24px; } .auth-card > p { font-size: 12px; line-height: 1.5; } .auth-button { display: grid; grid-template-columns: 28px 1fr 18px; align-items: center; gap: 9px; width: 100%; padding: 12px 14px; border: 1px solid var(--accent-soft-border); border-radius: 7px; color: var(--text); text-decoration: none; cursor: pointer; background: var(--accent-soft-bg); } .auth-button.telegram { background: var(--telegram-bg); border-color: var(--telegram-border); } .provider-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--provider-icon-bg); color: var(--provider-icon-fg); font-weight: 700; } .telegram .provider-icon { background: var(--telegram-icon-bg); } .auth-divider { display: flex; align-items: center; gap: 8px; margin: 20px 0; color: var(--muted); font-size: 10px; } .auth-divider:before, .auth-divider:after { content: ''; height: 1px; flex: 1; background: var(--line); } .auth-footnote { font-size: 10px !important; color: var(--muted-fine); } .qr-state { display: grid; justify-items: center; gap: 9px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: 11px; line-height: 1.45; } .qr-state span { color: var(--muted); } .qr-state.loading { color: var(--accent); } .qr-state.error { border-color: var(--danger-border); color: var(--danger); } .qr-state.success { border-color: var(--ok-border); color: var(--ok); } .qr-image { width: min(240px, 100%); height: auto; aspect-ratio: 1; padding: 8px; background: white; border-radius: 6px; image-rendering: pixelated; } .qr-link { color: var(--accent); font-size: 12px; } .onboarding-status { max-width: 1080px; margin: 30px auto 0; min-height: 20px; font-size: 12px; } .error { color: var(--danger); } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 205px minmax(0, 1fr); } .rail { min-height: 100vh; padding: 20px 13px; border-right: 1px solid var(--line); background: var(--rail); display: flex; flex-direction: column; gap: 18px; } .rail-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .rail-top-actions { display: flex; align-items: center; gap: 8px; } /* The phone menu toggle exists only below 650px; on wider screens the menu wrapper is layout-neutral so the rail keeps its flex column (and the connector card its margin-top: auto). */ .rail-toggle { display: none; } .rail-menu { display: contents; } .brand { display: grid; gap: 3px; padding: 0 5px; } .brand strong { font-size: 16px; letter-spacing: 0.05em; } .brand span { font-size: 10px; color: var(--muted); } .primary-nav { display: grid; gap: 3px; } .primary-nav a { display: flex; justify-content: space-between; min-height: 44px; gap: 8px; padding: 8px 7px; color: var(--muted-strong); text-decoration: none; border-radius: 5px; font-size: 12px; } .primary-nav a:hover, .primary-nav a.active { color: var(--text); background: var(--rail-active-bg); } .primary-nav a.active { border-left: 2px solid var(--accent); padding-left: 5px; } .primary-nav a span { color: var(--muted-soft); font-size: 10px; } .supporting-nav { margin-top: -10px; } .connector-summary { margin-top: auto; padding: 11px; border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 10px; line-height: 1.5; } .connector-summary small { display: block; margin-top: 4px; color: var(--ok); } .rail-button { padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; } .workspace { min-width: 0; padding: 30px 30px 60px; max-width: 1450px; } .workspace-header { display: flex; justify-content: space-between; gap: 22px; align-items: start; margin-bottom: 4px; } .workspace-header h1 { margin: 4px 0; font-size: 27px; letter-spacing: -0.04em; } .workspace-header p { margin: 0; color: var(--muted); font-size: 12px; } .header-actions { display: flex; gap: 6px; } .tag { display: inline-block; padding: 4px 7px; border: 1px solid var(--accent-border); border-radius: 5px; color: var(--accent-strong); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; } .tag.muted { border-color: var(--line); color: var(--muted); } .status-line { min-height: 18px; margin: 14px 0; color: var(--muted); font-size: 12px; } .status-line.success { color: var(--ok); } .status-line.error { color: var(--danger); } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .metric-grid article { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 7px; } .metric-grid article.metric-danger { border-left-color: var(--danger); } .metric-grid strong { display: block; font-size: 25px; } .metric-grid span { color: var(--muted); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; margin-top: 9px; } .project-board, .data-section, .settings-view { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 15px; margin: 9px 0; } .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 13px; } .section-heading h2, .settings-view h2 { margin: 0; font-size: 16px; } .project-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .project-card { padding: 13px; background: var(--surface2); border: 1px solid var(--line2); border-radius: 6px; min-height: 130px; } .project-card h3 { margin: 10px 0; font-size: 15px; font-weight: 500; } .project-card p, .project-card small { color: var(--muted); font-size: 10px; line-height: 1.5; } .project-card b { color: var(--text); font-weight: 500; } .item-list { display: grid; gap: 4px; } .item-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 6px; background: var(--surface2); color: var(--text); text-align: left; cursor: pointer; } .item-row:hover { background: var(--item-row-hover); } .item-marker, .item-action { font-size: 9px; letter-spacing: 0.09em; color: var(--accent); text-transform: uppercase; } .item-row strong { display: block; font-size: 13px; font-weight: 500; } .item-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; } .empty-card, .loading-card, .error-card { display: grid; gap: 7px; padding: 25px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 12px; } .empty-card strong, .error-card strong { color: var(--text); } .error-card { border-color: var(--danger-border); } .error-card strong { color: var(--danger); } /* GUI-09: resizable persistent inspector. Desktop widths lay #view-content and #detail-panel out side by side, with a draggable/keyboard-resizable handle between them; the chosen width is set as --inspector-width by app.js (persisted to localStorage) and clamped to [280px, 640px] both in JS and here, so a corrupted stored value can't force a broken layout. Below the desktop breakpoint (see the max-width: 1000px block) it collapses back to a single, full-width column -- a non-resizable drawer, not a fixed-width sidebar -- with the resize handle hidden. */ .workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) 6px clamp(280px, var(--inspector-width, 360px), 640px); align-items: start; gap: 9px; } .inspector-resize-handle { align-self: stretch; width: 6px; border-radius: 3px; background: var(--line); cursor: col-resize; touch-action: none; } .inspector-resize-handle:hover, .inspector-resize-handle:focus-visible { background: var(--accent-border); } .detail-panel { position: sticky; top: 9px; width: 100%; min-width: 0; max-height: calc(100vh - 18px); overflow-y: auto; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin: 9px 0; } .detail-panel-toolbar { display: flex; justify-content: flex-end; } .detail-panel-close { min-width: 44px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; } .detail-panel-close:hover { color: var(--text); border-color: var(--accent-border); } .empty-detail .detail-panel-toolbar { display: none; } .empty-detail { color: var(--muted); font-size: 12px; line-height: 1.5; } .detail-panel h2 { margin: 10px 0 6px; font-size: 18px; line-height: 1.25; } .detail-top { display: flex; gap: 6px; } .detail-panel dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin: 18px 0; font-size: 11px; } .detail-panel dt { color: var(--muted); } .detail-panel dd { margin: 0; } .why, .ai-denied { margin-top: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; } .why p { margin: 6px 0 0; } .why strong { color: var(--text); } .ai-denied { background: var(--ai-denied-bg); border-color: var(--ai-denied-border); } .ai-denied span { color: var(--ai-denied-text); font-size: 9px; letter-spacing: 0.1em; } .ai-denied p { margin: 5px 0 0; } .detail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; } .detail-actions button, button { min-width: 44px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--btn-text); cursor: pointer; } .evidence-list { display: grid; gap: 5px; } .evidence-row { display: flex; align-items: start; gap: 9px; padding: 9px; background: var(--surface2); border-radius: 5px; font-size: 11px; } .evidence-row small { display: block; color: var(--muted); margin-top: 4px; } .capture-note { display: block; color: var(--muted); margin: 6px 0 2px; } .table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: 11px; } th, td { padding: 11px 9px; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; } tbody tr[data-decision-id] { cursor: default; } tbody tr[data-decision-id]:hover { background: var(--surface2); } .table-row-action { width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .table-row-action:hover { color: var(--accent); text-decoration: underline; } tbody tr:has(.table-row-action):hover { background: var(--surface2); } .search-form { display: grid; gap: 7px; max-width: 750px; } .search-form > div { display: flex; gap: 7px; } .search-form input { flex: 1; } #settings-view .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } .settings-view h3 { font-size: 13px; font-weight: 500; } .inline-form { display: flex; align-items: end; gap: 9px; } .inline-form label { flex: 1; } form { display: grid; gap: 10px; } label { display: grid; gap: 5px; color: var(--label-text); font-size: 12px; } input, select, textarea { width: 100%; padding: 9px; border: 1px solid var(--input-border); border-radius: 5px; background: var(--rail); color: var(--text); } textarea { min-height: 115px; resize: vertical; } fieldset { display: grid; gap: 6px; border: 1px solid var(--input-border); border-radius: 5px; padding: 10px; } legend { color: var(--muted); font-size: 10px; } .chat-option { display: flex; align-items: center; gap: 7px; } .chat-option input, .check-label input { width: 16px; } .chat-option small { margin-left: auto; color: var(--muted); } .check-label { display: flex; align-items: center; gap: 7px; } .profile-list { display: grid; gap: 6px; padding: 0; list-style: none; } .profile-list li { display: flex; align-items: center; gap: 8px; padding: 9px; background: var(--surface2); border-radius: 5px; font-size: 12px; } .profile-list li small { color: var(--muted); margin-left: auto; } .profile-list li button { margin-left: auto; min-width: 44px; min-height: 44px; padding: 4px 7px; font-size: 10px; } .profile-list a { color: var(--accent); } @media (max-width: 1000px) { .onboarding-grid { grid-template-columns: 1fr; gap: 35px; margin-top: 9vh; } .auth-card { max-width: 500px; } .app-shell { grid-template-columns: 1fr; } .rail { min-height: auto; position: static; } .primary-nav { grid-template-columns: repeat(4, 1fr); } .supporting-nav { margin-top: 0; } .connector-summary { margin-top: 0; } .dashboard-grid, #settings-view .settings-grid { grid-template-columns: 1fr; } .workspace-body { grid-template-columns: 1fr; } .inspector-resize-handle { display: none; } .detail-panel { position: static; max-height: none; } } @media (max-width: 650px) { .onboarding { padding: 22px 18px 40px; } .onboarding-grid { margin-top: 12vh; } .onboarding-copy h1 { font-size: 45px; } .workspace { padding: 20px 12px 45px; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .workspace-header { display: block; } .header-actions { margin-top: 12px; } .primary-nav { grid-template-columns: repeat(2, 1fr); } /* Phone: the rail is a compact sticky bar; its sections open from the Menu button instead of filling the first screen and pushing the selected view below the fold. */ .rail { position: sticky; top: 0; z-index: 20; padding: 10px 12px; gap: 0; border-right: 0; border-bottom: 1px solid var(--line); } .brand { grid-auto-flow: column; align-items: baseline; gap: 8px; } .rail-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; } .rail-toggle[aria-expanded='true'] { background: var(--rail-active-bg); border-color: var(--accent); } .rail-menu { display: none; } .rail.open .rail-menu { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; max-height: calc(100vh - 64px); overflow-y: auto; } .primary-nav a { min-height: 44px; align-items: center; font-size: 14px; } .inline-form { display: grid; align-items: stretch; } .item-row { grid-template-columns: 55px minmax(0, 1fr); } .item-action { grid-column: 2; } } /* Nocturne Settings surface: the account controls remain live below this design-aligned source summary. Capability checkboxes are deliberately read-only until a SourcePolicy mutation exists. */ .settings-view { background: transparent; border: 0; padding: 0; margin: 16px 0 40px; } .settings-title h2 { margin: 0; font-size: clamp(27px, 3vw, 34px); font-weight: 500; letter-spacing: -0.04em; } .settings-title p { margin: 4px 0 25px; color: var(--muted); font-size: 15px; } .settings-section-label { margin: 25px 2px 12px; color: var(--muted-label); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .source-cards { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; } .source-card { padding: 19px 20px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface3); } .source-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .source-card-head > div { display: flex; align-items: center; gap: 11px; } .source-chip { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 8px; background: var(--chip-bg); color: var(--chip-text); font-size: 11px; font-weight: 700; } .source-card strong { font-size: 17px; font-weight: 500; } .source-health { color: var(--ok); font-size: 13px; } .source-health.unhealthy { color: var(--danger); } .source-meta, .source-account-detail { color: var(--muted); font-size: 12px; } .source-account-detail { margin: 10px 0 13px 45px; } .telegram-ai-policy { display: flex; align-items: end; gap: 12px; margin: 0 0 13px 45px; max-width: 420px; } .telegram-ai-policy label { grid-template-columns: 1fr 170px; align-items: center; gap: 10px; flex: 1; } .telegram-ai-policy small { color: var(--muted); font-size: 10px; } .capture-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; margin-left: 45px; } .capture-field { display: flex; grid-column: auto; align-items: center; gap: 9px; color: var(--text); font-size: 13px; } .capture-field input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); } .capture-field.disabled { color: var(--capture-disabled); } .capture-field.disabled input { accent-color: var(--capture-disabled); } .empty-source-card { display: flex; gap: 12px; align-items: center; } .empty-source-card strong { font-size: 14px; } #settings-view .connector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .connector-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface3); } .connector-card strong { font-size: 15px; font-weight: 500; } .connector-card button { padding: 6px 15px; border-color: var(--accent); border-radius: 15px; background: transparent; color: var(--accent); } .connector-card button:disabled { cursor: not-allowed; border-color: var(--line); color: var(--muted); opacity: 0.8; } .connector-unavailable { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .custom-source-form { max-width: none; margin: 22px 0 28px; } .custom-source-form > label { color: var(--custom-label-text); font-size: 14px; } .custom-source-form > div { display: flex; gap: 12px; } .custom-source-form input { flex: 1; padding: 12px 15px; border-radius: 10px; background: var(--surface3); } .custom-source-form button { padding: 9px 17px; border-color: var(--accent); border-radius: 10px; background: transparent; color: var(--accent); } .custom-source-form p { max-width: 900px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .settings-advanced { padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-elevated-soft); } .settings-advanced h3 { margin: 0; font-size: 16px; } /* GUI-10: the ActionPlan review surface. Its fields are read-only summaries of the exact plan that will be sent -- editing always goes back through the form (#outbound-plan-edit), never in place here, so what is displayed is provably what Confirm & send will submit. */ .outbound-plan { display: grid; gap: 10px; margin-top: 14px; padding: 15px 17px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--surface3); } .outbound-plan dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 8px; margin: 6px 0 0; font-size: 12px; } .outbound-plan dt { color: var(--muted); } .outbound-plan dd { margin: 0; word-break: break-word; } .outbound-plan-draft { margin: 4px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; } @media (max-width: 1000px) { #settings-view .connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .capture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 650px) { .source-card-head { align-items: flex-start; flex-direction: column; } .source-meta, .source-account-detail, .capture-grid { margin-left: 0; } #settings-view .connector-grid, .capture-grid { grid-template-columns: 1fr; } /* A grid item's automatic min-width is its min-content width, so the AI-policy row pushed each source card 31px past a 360px screen. */ .source-cards > li { min-width: 0; } .source-card { padding: 16px 14px 15px; } .telegram-ai-policy { flex-wrap: wrap; margin-left: 0; max-width: none; } .telegram-ai-policy label { grid-template-columns: 1fr; } .custom-source-form > div { display: grid; } } /* ===== Prototype visual system (Gate UI-1): sidebar/topbar/nav-btn, cards, badges, kanban, connectors grid, taxonomy tree, graph, command palette, reply composer, theme toggle. Source: PDCC_Interactive_Desktop_Prototype_Dark_v3_2026-09-18.html. ===== */ :root { --bg: #071018; --bg2: #0a141e; --panel: rgba(18, 31, 43, 0.78); --panel-2: rgba(22, 39, 54, 0.84); --panel-3: rgba(12, 26, 38, 0.92); --line: rgba(137, 190, 221, 0.16); --line-strong: rgba(137, 190, 221, 0.28); --text: #edf7fb; --muted: #8fa8b7; --soft: #bfd0da; --blue: #53b7ff; --violet: #a78bfa; --green: #67e8b3; --amber: #ffd166; --red: #ff6b6b; --cyan: #69e6ff; --rose: #fb8fb5; --shadow: 0 18px 48px rgba(0, 0, 0, 0.34); --radius: 18px; --radius-sm: 12px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: radial-gradient(circle at 14% 10%, rgba(83, 183, 255, 0.11), transparent 24%), radial-gradient(circle at 84% 18%, rgba(167, 139, 250, 0.1), transparent 28%), radial-gradient(circle at 70% 80%, rgba(103, 232, 179, 0.06), transparent 26%), linear-gradient(180deg, #071018, #08111a 45%, #061017); color: var(--text); overflow: hidden; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .glass { background: linear-gradient(180deg, rgba(23, 41, 56, 0.86), rgba(12, 26, 38, 0.78)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.035); color: var(--soft); font-size: 11px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .badge.demo { color: #10231a; background: var(--green); border-color: transparent; } .badge.blue { color: #bfe8ff; border-color: rgba(83, 183, 255, 0.35); background: rgba(83, 183, 255, 0.08); } .badge.violet { color: #e4d8ff; border-color: rgba(167, 139, 250, 0.34); background: rgba(167, 139, 250, 0.08); } .badge.green { color: #c8ffea; border-color: rgba(103, 232, 179, 0.34); background: rgba(103, 232, 179, 0.08); } .badge.amber { color: #ffe7a8; border-color: rgba(255, 209, 102, 0.34); background: rgba(255, 209, 102, 0.08); } .badge.red { color: #ffc5c5; border-color: rgba(255, 107, 107, 0.34); background: rgba(255, 107, 107, 0.08); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.green { background: var(--green); box-shadow: 0 0 12px rgba(103, 232, 179, 0.55); } .dot.red { background: var(--red); box-shadow: 0 0 12px rgba(255, 107, 107, 0.5); } .dot.amber { background: var(--amber); box-shadow: 0 0 12px rgba(255, 209, 102, 0.5); } .dot.blue { background: var(--blue); box-shadow: 0 0 12px rgba(83, 183, 255, 0.5); } #ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.18; animation: float 12s ease-in-out infinite alternate; } .orb.one { width: 420px; height: 420px; background: #2381d8; left: -120px; top: -120px; } .orb.two { width: 360px; height: 360px; background: #7c4dd8; right: -80px; top: 120px; animation-delay: -3s; } .orb.three { width: 300px; height: 300px; background: #1c9b78; right: 26%; bottom: -150px; animation-delay: -5s; } @keyframes float { from { transform: translateY(-18px) scale(0.98); } to { transform: translateY(28px) scale(1.04); } } #login { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.08fr 0.92fr; padding: 34px; gap: 24px; } .login-hero, .login-card { border-radius: 28px; overflow: hidden; position: relative; } .login-hero { padding: 46px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .brand-lockup { display: flex; align-items: center; gap: 14px; } .logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, rgba(83, 183, 255, 0.22), rgba(167, 139, 250, 0.24)); border: 1px solid rgba(150, 205, 235, 0.26); } .brand-lockup strong { font-size: 18px; } .brand-lockup span { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; } .login-copy { max-width: 780px; } .login-copy h1 { font-size: clamp(48px, 6vw, 86px); line-height: 0.98; letter-spacing: -0.05em; margin: 14px 0 20px; } .login-copy p { font-size: 18px; color: #bfd0db; max-width: 720px; } .hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; } .hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; } .hero-stat { border: 1px solid var(--line); background: rgba(5, 16, 24, 0.38); border-radius: 16px; padding: 14px; } .hero-stat b { font-size: 25px; display: block; } .hero-stat span { font-size: 12px; color: var(--muted); } .login-card { display: flex; align-items: center; justify-content: center; padding: 34px; } .signin { width: min(520px, 100%); padding: 30px; border-radius: 24px; background: rgba(5, 15, 23, 0.58); border: 1px solid var(--line-strong); } .signin h2 { font-size: 30px; margin: 6px 0 4px; } .signin p { color: var(--muted); } .field { display: grid; gap: 7px; margin-top: 16px; } .field label { font-size: 12px; color: var(--soft); } .field input { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 14px; background: rgba(255, 255, 255, 0.03); color: white; outline: none; } .field input:focus { border-color: rgba(83, 183, 255, 0.68); box-shadow: 0 0 0 3px rgba(83, 183, 255, 0.08); } .primary { border: 0; border-radius: 13px; padding: 13px 16px; font-weight: 800; background: linear-gradient(135deg, #53b7ff, #8b7cff); color: #06101a; box-shadow: 0 12px 28px rgba(83, 183, 255, 0.22); } .secondary { border: 1px solid var(--line-strong); border-radius: 12px; padding: 11px 14px; background: rgba(255, 255, 255, 0.035); color: var(--text); } .ghost { border: 0; background: transparent; color: var(--soft); padding: 9px 10px; border-radius: 10px; } .ghost:hover, .secondary:hover { background: rgba(255, 255, 255, 0.06); } .signin .primary { width: 100%; margin-top: 18px; } .signin-sep { height: 1px; background: var(--line); margin: 20px 0; } .fake-note { font-size: 12px; color: var(--muted); padding: 11px 12px; border-radius: 12px; background: rgba(103, 232, 179, 0.05); border: 1px solid rgba(103, 232, 179, 0.12); } #app { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 252px 1fr; } .sidebar { height: 100%; padding: 18px 14px; border-right: 1px solid var(--line); background: rgba(5, 14, 22, 0.66); backdrop-filter: blur(18px); display: flex; flex-direction: column; min-width: 0; } .sidebar .brand-lockup { padding: 8px 8px 14px; } .nav-section-label { margin: 14px 10px 7px; color: #617e90; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .nav-list { display: grid; gap: 3px; } .nav-btn { width: 100%; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; background: transparent; color: #a9bfcc; padding: 10px 11px; border-radius: 11px; text-align: left; } .nav-btn:hover { background: rgba(255, 255, 255, 0.035); color: white; } .nav-btn.active { background: linear-gradient(90deg, rgba(83, 183, 255, 0.12), rgba(167, 139, 250, 0.07)); border-color: rgba(83, 183, 255, 0.17); color: white; } .nav-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.035); font-size: 12px; } .nav-btn.active .nav-icon { background: rgba(83, 183, 255, 0.16); color: #aee3ff; } .nav-meta { margin-left: auto; font-size: 10px; color: #6f8a99; } .sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } .profile-mini { display: flex; align-items: center; gap: 10px; padding: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, #284c68, #503e78); } .profile-mini strong { display: block; font-size: 13px; } .profile-mini span { font-size: 11px; color: var(--muted); } .workspace { min-width: 0; height: 100%; display: grid; grid-template-rows: 68px 1fr; } .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(7, 16, 24, 0.46); backdrop-filter: blur(18px); } .scope-pill { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.025); white-space: nowrap; } .command { min-width: 0; flex: 1; max-width: 760px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; background: rgba(255, 255, 255, 0.025); } .command input { flex: 1; border: 0; outline: none; background: transparent; color: white; min-width: 0; } .kbd { font-size: 10px; color: #718b9b; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; } .top-actions { display: flex; gap: 7px; margin-left: auto; } .icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--soft); } .icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: white; } .content-shell { min-height: 0; display: grid; grid-template-columns: 1fr 0px; transition: grid-template-columns 0.28s ease; } .content-shell.inspector-open { grid-template-columns: 1fr 390px; } .main { min-width: 0; overflow: auto; padding: 20px 22px 60px; scrollbar-color: #2f4f61 transparent; } .inspector { width: 390px; overflow: auto; border-left: 1px solid var(--line); background: rgba(8, 20, 30, 0.88); backdrop-filter: blur(18px); transform: translateX(100%); transition: transform 0.28s ease; } .content-shell.inspector-open .inspector { transform: translateX(0); } .inspector-head { position: sticky; top: 0; z-index: 3; padding: 18px; border-bottom: 1px solid var(--line); background: rgba(8, 20, 30, 0.96); backdrop-filter: blur(18px); } .inspector-body { padding: 18px; } .view { display: none; animation: viewIn 0.28s ease; } .view.active { display: block; } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-title h1 { font-size: 32px; letter-spacing: -0.035em; margin: 3px 0 6px; } .page-title p { margin: 0; color: var(--muted); } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } .grid { display: grid; gap: 14px; } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(20, 37, 51, 0.78), rgba(12, 26, 38, 0.66)); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.18); overflow: hidden; } .card.pad { padding: 16px; } .card h3 { margin: 0 0 8px; font-size: 15px; } .card .sub { color: var(--muted); font-size: 12px; } .metric-value { font-size: 32px; font-weight: 850; letter-spacing: -0.04em; margin: 8px 0 2px; } .metric-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; margin-top: 10px; } .spark { height: 44px; margin-top: 10px; background: linear-gradient(180deg, rgba(83, 183, 255, 0.12), transparent), linear-gradient( 90deg, transparent 0 5%, rgba(83, 183, 255, 0.7) 5% 7%, transparent 7% 14%, rgba(83, 183, 255, 0.5) 14% 17%, transparent 17% 30%, rgba(83, 183, 255, 0.8) 30% 32%, transparent 32% 48%, rgba(83, 183, 255, 0.45) 48% 53%, transparent 53% 66%, rgba(83, 183, 255, 0.74) 66% 69%, transparent 69% 84%, rgba(83, 183, 255, 0.52) 84% 89%, transparent 89% ); border-radius: 9px; } .section { margin-top: 18px; } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; } .section-title h2 { font-size: 17px; margin: 0; } .section-title span { font-size: 11px; color: var(--muted); } .list { display: grid; } .row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, 0.8fr) minmax(100px, 0.55fr) minmax( 120px, 0.7fr ); gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); } .row:first-child { border-top: 0; } .row:hover { background: rgba(255, 255, 255, 0.025); } .clickable { cursor: pointer; } .title-line { display: flex; align-items: center; gap: 8px; min-width: 0; } .title-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta-line { font-size: 11px; color: var(--muted); margin-top: 4px; } .domain-chips { display: flex; gap: 5px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); font-size: 10px; color: #b6c9d3; } .chip.work { border-color: rgba(83, 183, 255, 0.24); color: #a7dcff; background: rgba(83, 183, 255, 0.055); } .chip.legal { border-color: rgba(255, 209, 102, 0.24); color: #ffe099; background: rgba(255, 209, 102, 0.055); } .chip.finance { border-color: rgba(103, 232, 179, 0.24); color: #bff8dc; background: rgba(103, 232, 179, 0.055); } .chip.ai { border-color: rgba(167, 139, 250, 0.24); color: #ddd0ff; background: rgba(167, 139, 250, 0.055); } .chip.personal { border-color: rgba(251, 143, 181, 0.24); color: #ffc5d8; background: rgba(251, 143, 181, 0.055); } .chip.travel { border-color: rgba(105, 230, 255, 0.24); color: #b9f5ff; background: rgba(105, 230, 255, 0.055); } .progress { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #53b7ff, #8b7cff); } .legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; color: var(--muted); } .legend span { display: flex; align-items: center; gap: 5px; } .legend i { width: 8px; height: 8px; border-radius: 50%; } .activity-feed { display: grid; } .feed-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); } .feed-item:first-child { border-top: 0; } .feed-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.035); } .feed-item p { margin: 2px 0; color: #c6d6df; font-size: 12px; } .feed-item time { font-size: 10px; color: var(--muted); } .timeline { display: grid; gap: 9px; } .timeline-item { display: grid; grid-template-columns: 72px 1fr; gap: 10px; } .time { font-size: 11px; color: var(--muted); padding-top: 4px; } .event-card { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); } .event-card strong { font-size: 12px; } .event-card p { margin: 3px 0 0; font-size: 11px; color: var(--muted); } .kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; overflow: auto; padding-bottom: 4px; } .kan-col { min-width: 240px; } .kan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .kan-head strong { font-size: 12px; } .kan-head span { font-size: 10px; color: var(--muted); } .task { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.025); margin-bottom: 8px; transition: 0.2s ease; } .task:hover { transform: translateY(-2px); border-color: var(--line-strong); } .task h4 { margin: 0 0 6px; font-size: 12px; } .task p { margin: 0; color: var(--muted); font-size: 10px; } .task-foot { display: flex; justify-content: space-between; gap: 7px; margin-top: 10px; align-items: center; } .avatar-row { display: flex; } .avatar.sm { width: 24px; height: 24px; font-size: 9px; margin-left: -5px; border: 2px solid #10202d; } .avatar.sm:first-child { margin-left: 0; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .searchbox { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.025); min-width: 240px; } .searchbox input { border: 0; outline: none; background: transparent; color: white; width: 100%; } .select { border: 1px solid var(--line); background: #0e1d29; color: var(--soft); border-radius: 10px; padding: 8px 10px; } .table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; min-width: 780px; } th, td { padding: 11px 12px; border-top: 1px solid var(--line); text-align: left; font-size: 11px; } th { color: #7e9bab; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255, 255, 255, 0.018); } tr:hover td { background: rgba(255, 255, 255, 0.02); } .taxonomy-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; min-height: 620px; } .tree { padding: 12px; overflow: auto; max-height: calc(100vh - 170px); } .tree-group { margin-bottom: 8px; } .tree-node { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; color: #b8cbd5; font-size: 12px; } .tree-node:hover, .tree-node.active { background: rgba(83, 183, 255, 0.07); color: white; } .tree-node .indent { width: var(--indent, 0px); } .tree-node .caret { color: #607d8e; font-size: 10px; } .tax-detail { padding: 18px; } .tax-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .tax-hero h2 { font-size: 26px; margin: 3px 0 8px; } .tax-hero p { color: var(--muted); max-width: 700px; } .tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .tax-mini { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .tax-mini b { display: block; font-size: 13px; } .tax-mini span { font-size: 10px; color: var(--muted); } .graph-card { height: 650px; position: relative; overflow: hidden; } #graphSvg { width: 100%; height: 100%; display: block; } .graph-controls { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 2; } .graph-node { cursor: pointer; transition: filter 0.18s ease; } .graph-node:hover { filter: brightness(1.35); } .edge { stroke: rgba(154, 190, 211, 0.28); stroke-width: 1.5; } .edge.cross { stroke: rgba(167, 139, 250, 0.45); stroke-dasharray: 5 5; } .edge.support { stroke: rgba(103, 232, 179, 0.38); } .node-label { font-size: 10px; fill: #d8e8ef; pointer-events: none; } .connector-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; } .connector { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); transition: 0.2s ease; } .connector:hover { transform: translateY(-2px); border-color: var(--line-strong); } .connector-head { display: flex; align-items: center; gap: 10px; } .connector-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); } .connector h3 { font-size: 13px; margin: 0; } .connector p { font-size: 10px; color: var(--muted); } .connector-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .ai-card { padding: 14px; border-top: 1px solid var(--line); } .ai-card:first-child { border-top: 0; } .ai-head { display: flex; justify-content: space-between; gap: 10px; } .ai-card h4 { margin: 0 0 5px; font-size: 13px; } .ai-card p { margin: 0; color: #b9cbd4; font-size: 11px; } .ai-actions { display: flex; gap: 6px; margin-top: 12px; } .accept { border: 1px solid rgba(103, 232, 179, 0.3); background: rgba(103, 232, 179, 0.08); color: #c9ffe9; border-radius: 9px; padding: 8px 10px; } .reject { border: 1px solid rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.07); color: #ffc8c8; border-radius: 9px; padding: 8px 10px; } .policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .policy-card { padding: 15px; } .toggle { width: 42px; height: 24px; border-radius: 999px; background: #253947; border: 1px solid var(--line); position: relative; } .toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8ba3b2; transition: 0.2s; } .toggle.on { background: rgba(103, 232, 179, 0.18); border-color: rgba(103, 232, 179, 0.25); } .toggle.on i { left: 21px; background: var(--green); } .settings-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; } .settings-menu { padding: 10px; } .settings-menu button { width: 100%; border: 0; background: transparent; color: #a9bdc9; text-align: left; padding: 10px; border-radius: 9px; } .settings-menu button.active, .settings-menu button:hover { background: rgba(255, 255, 255, 0.04); color: white; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .control { display: grid; gap: 6px; } .control label { font-size: 11px; color: var(--muted); } .control input, .control select, .control textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: rgba(255, 255, 255, 0.025); color: white; outline: none; } .control textarea { min-height: 100px; resize: vertical; } .toast { position: fixed; right: 22px; bottom: 22px; z-index: 99; padding: 12px 14px; border-radius: 12px; background: #102532; border: 1px solid var(--line-strong); box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; pointer-events: none; transition: 0.22s ease; } .toast.show { transform: none; opacity: 1; } .palette { position: fixed; inset: 0; z-index: 120; background: rgba(2, 8, 13, 0.62); display: grid; place-items: start center; padding-top: 12vh; backdrop-filter: blur(8px); } .palette-box { width: min(700px, 90vw); border-radius: 18px; padding: 12px; } .palette-box input { width: 100%; border: 0; outline: none; background: transparent; color: white; font-size: 17px; padding: 12px; } .palette-results { border-top: 1px solid var(--line); padding-top: 8px; } .palette-item { padding: 10px; border-radius: 10px; color: #b8cbd5; } .palette-item:hover { background: rgba(255, 255, 255, 0.04); color: white; } @media (max-width: 1400px) { #app { grid-template-columns: 220px 1fr; } .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .connector-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } } /* The prototype's <=1400px desktop rule must not undo the original mobile rail collapse. */ @media (max-width: 1000px) { #app { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); } #app > .workspace, #workspace-body, #view-content { min-width: 0; max-width: 100%; } .table-wrap { max-width: 100%; overflow-x: auto; } } /* ===== v2: Reply Center, resizable inspector, orientation, light theme ===== */ :root { --inspector-size: 390px; --inspector-bottom-size: 320px; } body.theme-light { --bg: #eef4f8; --bg2: #f7fbfd; --panel: rgba(255, 255, 255, 0.84); --panel-2: rgba(250, 253, 255, 0.93); --panel-3: rgba(245, 250, 253, 0.97); --line: rgba(41, 80, 104, 0.14); --line-strong: rgba(41, 80, 104, 0.24); --text: #102330; --muted: #667f8e; --soft: #385568; --shadow: 0 18px 48px rgba(45, 78, 98, 0.14); background: radial-gradient(circle at 14% 10%, rgba(83, 183, 255, 0.16), transparent 24%), radial-gradient(circle at 84% 18%, rgba(167, 139, 250, 0.13), transparent 28%), radial-gradient(circle at 70% 80%, rgba(103, 232, 179, 0.1), transparent 26%), linear-gradient(180deg, #f7fbfd, #eef4f8 48%, #f5fafc); background-color: #f7fbfd; } body.theme-light .sidebar { background: rgba(248, 252, 254, 0.79); } body.theme-light .topbar { background: rgba(247, 251, 253, 0.72); } body.theme-light .inspector { background: rgba(247, 251, 253, 0.96); } body.theme-light .inspector-head { background: rgba(247, 251, 253, 0.97); } body.theme-light .signin { background: rgba(255, 255, 255, 0.68); } body.theme-light .field input, body.theme-light .control input, body.theme-light .control select, body.theme-light .control textarea, body.theme-light .select { background: rgba(255, 255, 255, 0.76); color: var(--text); } body.theme-light .card, body.theme-light .connector, body.theme-light .task, body.theme-light .event-card, body.theme-light .searchbox, body.theme-light .scope-pill, body.theme-light .command { background: rgba(255, 255, 255, 0.62); } body.theme-light .logo { color: #102330; } body.theme-light .node-label { fill: #29485a; } body.theme-light .avatar.sm { border-color: #f4f8fb; } body.theme-light .edge { stroke: rgba(48, 86, 108, 0.28); } body.theme-light .kbd { color: #577181; } body.theme-light .nav-btn { color: #546e7d; } body.theme-light .nav-btn.active { color: #102330; } body.theme-light .palette { background: rgba(233, 242, 248, 0.68); } body.theme-light .palette-item { color: #456171; } .reply-center { margin: 10px 0 2px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); } .reply-center-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .reply-center-head strong { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); } .source-icon-row { display: flex; gap: 6px; flex-wrap: wrap; } .source-icon { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--soft); font-size: 9px; font-weight: 850; display: grid; place-items: center; position: relative; transition: 0.18s ease; } .source-icon:hover { transform: translateY(-1px); border-color: rgba(83, 183, 255, 0.45); } .source-icon.selected { color: white; background: linear-gradient(135deg, rgba(83, 183, 255, 0.35), rgba(167, 139, 250, 0.3)); border-color: rgba(83, 183, 255, 0.55); box-shadow: 0 0 18px rgba(83, 183, 255, 0.13); } body.theme-light .source-icon.selected { color: #102330; } .source-icon .src-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; right: -2px; top: -2px; border: 2px solid #0a1721; background: var(--green); } body.theme-light .source-icon .src-dot { border-color: #f4f9fc; } .reply-summary { font-size: 10px; color: var(--muted); margin: 8px 0; } .reply-open { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 9px; background: rgba(83, 183, 255, 0.07); color: var(--soft); font-weight: 700; } .reply-open:hover { background: rgba(83, 183, 255, 0.12); } .reply-compose { position: fixed; z-index: 130; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98); width: min(760px, 92vw); max-height: 82vh; overflow: auto; border-radius: 20px; padding: 16px; opacity: 0; pointer-events: none; transition: 0.2s ease; } .reply-compose.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .reply-backdrop { position: fixed; inset: 0; z-index: 129; background: rgba(2, 8, 13, 0.55); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: 0.2s ease; } .reply-backdrop.open { opacity: 1; pointer-events: auto; } .reply-targets { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; } .reply-target { border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); color: var(--soft); display: flex; gap: 7px; align-items: center; } .reply-target.selected { background: rgba(83, 183, 255, 0.12); border-color: rgba(83, 183, 255, 0.45); } .reply-target.all.selected { background: rgba(167, 139, 250, 0.13); border-color: rgba(167, 139, 250, 0.45); } .reply-editor { width: 100%; min-height: 150px; resize: vertical; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.025); color: var(--text); border-radius: 13px; padding: 12px; outline: none; } .reply-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10px; color: var(--muted); margin-top: 10px; } .reply-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .theme-switch { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--soft); } .theme-switch:hover { background: rgba(255, 255, 255, 0.05); } .content-shell { grid-template-columns: minmax(0, 1fr) 0px; } .content-shell.inspector-open:not(.inspector-bottom) { grid-template-columns: minmax(0, 1fr) var(--inspector-size); } .content-shell.inspector-bottom { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 0px; } .content-shell.inspector-bottom.inspector-open { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) var(--inspector-bottom-size); } .content-shell.inspector-bottom .main { grid-row: 1; grid-column: 1; } .content-shell.inspector-bottom .inspector { grid-row: 2; grid-column: 1; width: 100%; height: auto; border-left: 0; border-top: 1px solid var(--line); transform: translateY(100%); } .content-shell.inspector-bottom.inspector-open .inspector { transform: translateY(0); } .inspector { width: var(--inspector-size); position: relative; } .content-shell.inspector-bottom .inspector { width: 100%; } .inspector-resize-handle { position: absolute; z-index: 15; background: transparent; } .workspace-body > .inspector-resize-handle { position: static; width: 6px; background: var(--line); } .content-shell:not(.inspector-bottom) .inspector-resize-handle { left: -5px; top: 0; width: 10px; height: 100%; cursor: col-resize; } .content-shell.inspector-bottom .inspector-resize-handle { left: 0; top: -5px; width: 100%; height: 10px; cursor: row-resize; } .inspector-resize-handle:hover::after { content: ''; position: absolute; background: rgba(83, 183, 255, 0.55); border-radius: 99px; } .content-shell:not(.inspector-bottom) .inspector-resize-handle:hover::after { width: 2px; height: 100%; left: 4px; top: 0; } .content-shell.inspector-bottom .inspector-resize-handle:hover::after { height: 2px; width: 100%; left: 0; top: 4px; } .inspector-tools { display: flex; gap: 6px; align-items: center; } .inspector-tool { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--soft); min-width: 34px; height: 34px; border-radius: 9px; padding: 0 8px; } .inspector-tool.active { border-color: rgba(83, 183, 255, 0.45); background: rgba(83, 183, 255, 0.1); color: var(--text); } .inspector-size-readout { font-size: 9px; color: var(--muted); min-width: 42px; text-align: center; } /* ===== Gate UI-1: utility classes replacing inline style="" attributes the prototype's own markup used (blocked by this app's CSP, which has no style-src 'unsafe-inline'). ===== */ .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .ml-auto { margin-left: auto; } .pad-15 { padding: 15px; } .flex-between { display: flex; justify-content: space-between; } .provenance-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 15px 15px; } .meeting-title { font-size: 21px; margin-top: 12px; } .tree-node.indent-1 { --indent: 16px; } .tree-node.indent-2 { --indent: 32px; } .theme-switch-block { width: 100%; justify-content: flex-start; } /* Prototype pastel labels are tuned for dark surfaces; use darker text against the light theme. */ body.theme-light .badge.blue, body.theme-light .chip.work { color: #0a5a94; } body.theme-light .badge.violet, body.theme-light .chip.ai { color: #5b3fa3; } body.theme-light .badge.green, body.theme-light .chip.finance { color: #12704a; } body.theme-light .badge.amber, body.theme-light .chip.legal { color: #8a5a06; } body.theme-light .badge.red { color: #a02e2e; } body.theme-light .tag { color: #4a3b8f; } body.theme-light .chip.personal { color: #a02e5f; } body.theme-light .chip.travel { color: #0a6b7d; } .graph-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }