/* ============================================================================= Agos / NoimosAI — Component layer (v2 — Master 40000056:73076 完全再現対応) 全プロパティは agos-tokens.css の var(--...) のみ参照。 実測 source: get_design_context 40000056:73190 (header) / 73316 (form) v3制約: state は Neutral / DS Modal・Icon-Button / 絵文字禁止(Phosphor) ============================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--text-primary); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- App shell (3-pane) -------------------------------------------- */ .app { display: flex; width: 1440px; height: 748px; background: var(--surface); overflow: hidden; } /* 実測: sidebar bg = Neutral/50 (#fbfbfb)。height 748 に必ず収める */ .rail { width: var(--layout-rail-w); flex: 0 0 var(--layout-rail-w); height: 100%; padding: var(--layout-rail-pad); display: flex; flex-direction: column; overflow: visible; background: var(--surface-subtle); border-right: 1px solid var(--border); transition: width .14s ease, flex-basis .14s ease; } /* ---- Collapsed rail (auto when a Page is open) — icons only -------------- */ .app.rail-collapsed .rail { width: 56px; flex: 0 0 56px; padding: var(--layout-rail-pad) var(--space-3); } .app.rail-collapsed .brand { justify-content: center; } .app.rail-collapsed .brand__full, .app.rail-collapsed .brand .icon-btn { display: none; } .brand__full { display: block; } .brand__mark { display: none; } .app.rail-collapsed .brand__mark { display: block; height: 28px; width: 28px; } .app.rail-collapsed .nav { align-items: center; } .app.rail-collapsed .nav-item { font-size: 0; justify-content: center; gap: 0; padding: 0; width: 40px; } .app.rail-collapsed .nav-item .ph { font-size: 20px; } .app.rail-collapsed .nav-item__caret { display: none; } .app.rail-collapsed .rail-section, .app.rail-collapsed .rail__scroll, .app.rail-collapsed .promo-card { display: none; } .app.rail-collapsed .ws-row { justify-content: center; padding: 0; } .app.rail-collapsed .ws-row > div, .app.rail-collapsed .ws-row > .nav-item__caret { display: none; } /* ---- Pages: list pane + page detail (Master 2599:11165) ----------------- */ .page-detail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-left: 0.5px solid var(--border); } .page-detail__subbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-7); padding: var(--space-5) var(--layout-pane-pad) 0; } .page-list__row { display: flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .page-list__row:hover { background: var(--surface-hover); } .page-list__row--active { background: var(--surface-hover); } .page-list__row .ph { font-size: 16px; color: var(--text-secondary); flex: 0 0 16px; } .page-list__row .emj { width: 16px; text-align: center; flex: 0 0 16px; } .page-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one-scroll page with anchor tabs (campaign / audience) */ .page-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 var(--layout-pane-pad) var(--space-13); } .page-sec { padding-top: var(--space-9); scroll-margin-top: var(--space-8); } .page-sec__h { font: var(--type-h3-weight) var(--type-h3-size)/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-4); } .page-sec__h .ph { font-size: 18px; color: var(--text-secondary); } /* journey steps shown as a form (Agent campaign — not a diagram) */ .jflow { display: flex; flex-direction: column; gap: var(--space-4); } .jstep { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); background: var(--surface); cursor: pointer; } .jstep:hover { background: var(--surface-subtle); } .jstep__ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .jstep__ic .ph { font-size: 16px; } .jstep__b { flex: 1 1 auto; min-width: 0; } .jstep__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .jstep__m { font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-muted); } .jstep__edit { color: var(--text-faint); font-size: 16px; } .jstep--sub { margin-left: var(--space-9); } .jbranch-lbl { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); margin: var(--space-3) 0 0 var(--space-9); } /* Add-Agent wizard (multi-step modal) */ .wizard-step { display: none; } .wizard-step.is-active { display: block; } .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .mode-card { display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; } .mode-card:hover { background: var(--surface-subtle); } .mode-card--active { border-color: var(--border-active); } .mode-card__ic { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); margin-bottom: var(--space-3); } .mode-card__ic .ph { font-size: 20px; } .mode-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .mode-card__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .modal--wizard .modal { width: 640px; } .modal__foot .wiz-spacer { flex: 1 1 auto; } /* Full-screen Add-Agent wizard (not a modal) */ .fswiz { position: fixed; inset: 0; z-index: 200; background: var(--surface); display: flex; flex-direction: column; } .fswiz__top { flex: 0 0 56px; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-8); border-bottom: 1px solid var(--border); } .fswiz__top .step-dots { margin: 0 auto; } .fswiz__body { flex: 1 1 0; overflow-y: auto; display: flex; justify-content: center; padding: var(--space-12) var(--space-8); } .fswiz__inner{ width: 100%; max-width: 760px; } .fswiz__foot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-12); border-top: 1px solid var(--border); } .fswiz .modal__title { font: var(--type-h2-weight) var(--type-h2-size)/1.3 var(--font-sans); } .fswiz .choice-card, .fswiz .mode-card { padding: var(--space-8); } /* ---- Chat question card (select OR free input, paginated) — Master 3010:11125 ---- */ .qcard { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-2); background: var(--surface); } .qcard__head { display: flex; align-items: flex-start; gap: var(--space-5); } .qcard__t { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.4 var(--font-sans); color: var(--text-primary); } .qcard__pager{ display: flex; align-items: center; gap: var(--space-4); color: var(--text-faint); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); flex: 0 0 auto; } .qcard__pager .ph { font-size: 14px; } .qcard__sub { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin: var(--space-3) 0 var(--space-5); } .qopt { display: flex; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-sm); cursor: pointer; } .qopt:hover { background: var(--surface-hover); } .qopt--active{ background: var(--surface-hover); } .qopt__n { flex: 0 0 16px; color: var(--text-faint); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); } .qopt__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .qopt__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .qopt__d { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .qcard__foot { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); border-top: 1px solid var(--border); padding: var(--space-5) 0; } .qcard__input{ flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .qcard__input::placeholder { color: var(--text-faint); } /* page campaign-context bar (which campaign this CRM page belongs to) */ .pg-ctx { display: flex; align-items: center; gap: var(--space-5); padding-top: var(--space-7); } .pg-ctx__t { font: var(--type-h3-weight) var(--type-h3-size)/1.2 var(--font-sans); color: var(--text-primary); } .pg-ctx__spacer { flex: 1 1 auto; } .main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .header { height: var(--layout-header-h); flex: 0 0 var(--layout-header-h); display: flex; align-items: center; padding: 0 var(--space-8); } .subbar { height: 60px; flex: 0 0 60px; display: flex; align-items: center; padding: 0 var(--space-8); } .body { flex: 1 1 auto; display: flex; min-height: 0; } .pane-list { width: var(--layout-pane-list-w); flex: 0 0 var(--layout-pane-list-w); padding: 0 var(--layout-pane-pad) var(--layout-pane-pad); overflow-y: auto; } /* detail/right pane: ルール — 0.5px stroke left-only (Master 1325:6604) */ .pane-detail{ flex: 1 1 auto; padding: 0 var(--layout-pane-pad) var(--layout-pane-pad); overflow-y: auto; border-left: 0.5px solid var(--border); } /* ---------- Nav (rail) ---------------------------------------------------- */ .brand { display: flex; align-items: center; justify-content: space-between; height: var(--layout-navitem-h); margin-bottom: var(--space-8); flex: 0 0 auto; } /* 実測: Frame 6 = 122.5 x 32 (mark 24px tall, centered in 32) */ .brand__logo svg { display: block; height: 32px; width: auto; } .nav { display: flex; flex-direction: column; gap: var(--space-2); flex: 0 0 auto; } .nav-item { display: flex; align-items: center; gap: var(--space-4); height: var(--layout-navitem-h); min-height: var(--layout-navitem-h); flex: 0 0 auto; padding: 0 var(--space-4); border-radius: var(--radius-sm); color: var(--text-secondary); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); cursor: pointer; text-decoration: none; } .nav-item:hover { background: var(--surface-hover); } /* selected: ルール — Neutral 100, outline なし */ .nav-item--active { background: var(--surface-hover); color: var(--text-primary); } .nav-item .ph { font-size: 20px; color: inherit; } /* Settings/footer の CaretRight: 実測 14px, Neutral/400 */ .nav-item__caret { margin-left: auto; font-size: 14px; color: var(--text-faint); } .nav-item__caret.ph { font-size: 14px; } /* section label row (All tasks) */ .rail-section { display: flex; align-items: center; justify-content: space-between; height: var(--layout-navitem-h); padding: 0 var(--space-4); flex: 0 0 auto; } .rail-section__title { font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); color: var(--text-muted); } .rail-section__tools { display: flex; gap: var(--space-2); } /* All tasks リストだけがスクロール、上下は固定 */ .rail__scroll { flex: 1 1 0; overflow-y: auto; min-height: 0; } .rail__fixed { flex: 0 0 auto; } .rail__spacer { flex: 1 1 auto; } /* workspace switcher / footer card */ .ws-row { display: flex; align-items: center; gap: var(--space-4); height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; flex: 0 0 auto; } .ws-row:hover { background: var(--surface-hover); } .avatar { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--neutral-800); color: var(--white); display: flex; align-items: center; justify-content: center; font: var(--fw-semibold) 12px/1 var(--font-sans); flex: 0 0 24px; } .promo-card { display: flex; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; flex: 0 0 auto; } .promo-card:hover { background: var(--surface-hover); } /* ---------- Button (DS) — 実測: white / 1px N200 / radius8 / icon16 / B4 N700 -- */ .btn { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font: var(--fw-medium) var(--type-b3-size)/1.5 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--surface-hover); } .btn .ph { font-size: 16px; } .btn--lg { height: 36px; } .btn--sm { height: 28px; padding: 0 var(--space-5); font-size: var(--type-c1-size); } .btn--sm .ph{ font-size: 14px; } .btn--primary { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); } .btn--primary:hover { background: var(--neutral-800); } .btn--ghost { border-color: transparent; background: transparent; color: var(--text-primary); } .btn--ghost:hover { background: var(--surface-hover); } .btn--block { display: flex; width: 100%; justify-content: flex-start; height: 36px; } /* Icon Button (DS) — bordered white / 32 / radius8 / icon16 */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none; /* (canvas close etc.) must not underline */ } .icon-btn:hover { background: var(--surface-hover); } .icon-btn .ph { font-size: 20px; } .icon-btn--bordered { border-color: var(--border); background: var(--surface); } .icon-btn--bordered .ph { font-size: 16px; } .icon-btn--bordered:hover { background: var(--surface-hover); } .icon-btn--lg { width: 36px; height: 36px; } .icon-btn--round { border-radius: var(--radius-full); } .icon-btn--sm { width: 28px; height: 28px; } .icon-btn--sm .ph { font-size: 14px; } /* ---------- Banner (filled info — N50) ----------------------------------- */ .banner { display: flex; align-items: center; gap: var(--space-5); height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-lg); background: var(--surface-subtle); } .banner .ph { font-size: 16px; color: var(--text-muted); } .banner__text { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-secondary); } /* ---------- Agents list (categorized, 36px rows) ------------------------- */ .list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); height: 36px; } .list-head__title { font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .list { display: flex; flex-direction: column; } .list-row { display: flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); cursor: pointer; } .list-row:hover { background: var(--surface-hover); } /* selected: Neutral 100, outline なし */ .list-row--active { background: var(--surface-hover); } .list-row .ph { font-size: 16px; color: var(--text-secondary); flex: 0 0 16px; } .list-row__label { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row--indent { padding-left: var(--space-9); } /* category sub-item */ .list-cat { display: flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-4); } .list-cat .ph { font-size: 16px; color: var(--text-secondary); } /* 実測: category label = Inter Regular 14/1.5 N700 */ .list-cat__label { font: var(--fw-regular) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); } /* ---------- Tabs (DS Tap, underline) ------------------------------------- */ .tabs { display: flex; gap: var(--space-6); } .tab { padding: 0 0 var(--space-4); font: var(--fw-medium) var(--type-b3-size)/1 var(--font-sans); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; } .tab--active{ color: var(--text-primary); border-bottom-color: var(--neutral-900); font-weight: var(--fw-semibold); } /* ---------- Detail head (title cluster) — ルール AA ---------------------- */ .detail-head { display: flex; align-items: flex-start; gap: var(--space-5); padding-top: var(--space-8); } .detail-head__main { flex: 1 1 auto; min-width: 0; } .detail-head__title { font: var(--type-s1-weight) var(--type-s1-size)/var(--type-s1-lh) var(--font-sans); color: var(--text-primary); } .detail-head__sub { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-faint); margin-top: var(--space-2); } .detail-head__actions { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; } /* inline title edit — bare input that replaces a title's text while editing ([data-inline-edit]) */ .inline-edit-input { font: var(--type-s1-weight) var(--type-s1-size)/var(--type-s1-lh) var(--font-sans); color: var(--text-primary); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-4); outline: 0; } .inline-edit-input:focus { border-color: var(--neutral-400); } /* ---------- Form: section / field / input ------------------------------- 実測: section = N50 fill, NO border, radius16, pad16 input/select = white, 0.5px N300, radius12, h40, px16 ------------------------------------------------------------------------- */ .section { background: var(--surface-subtle); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .form-divider { height: 16px; } /* セクション間 spacer (Line 3) */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-secondary); } .field__sublabel { font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .field__desc { font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); color: var(--text-faint); } .input { display: flex; align-items: center; gap: var(--space-4); min-height: 40px; padding: 0 var(--space-6); border-radius: var(--radius-lg); border: 0.5px solid var(--border-strong); background: var(--surface); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); } .input:focus-within { border-color: var(--neutral-400); } .input .ph { font-size: 16px; color: var(--text-muted); flex: 0 0 16px; } .input input, .input textarea { border: 0; outline: 0; background: transparent; flex: 1 1 auto; font: inherit; color: inherit; resize: none; padding: 0; } .input__grow { flex: 1 1 auto; } .input--multiline { align-items: stretch; flex-direction: column; justify-content: flex-start; min-height: 80px; padding: var(--space-4) var(--space-6) var(--space-5); gap: var(--space-4); } .input__placeholder { color: var(--text-faint); } .input__toolbar { display: flex; align-items: center; gap: var(--space-2); } .select { display: flex; align-items: center; gap: var(--space-4); min-height: 40px; padding: 0 var(--space-6); border-radius: var(--radius-lg); border: 0.5px solid var(--border-strong); background: var(--surface); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); cursor: pointer; } .select .ph { margin-left: auto; font-size: 16px; color: var(--text-muted); } /* ---------- Integration card (white on N50, NO border, radius16) --------- */ .intg-list { display: flex; flex-direction: column; gap: var(--space-4); } .intg-card { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .intg-card__head { display: flex; align-items: center; gap: var(--space-4); } .intg-card__head .ph--brand { font-size: 20px; } .intg-card__name { flex: 1 1 auto; font: var(--type-b4-weight) var(--type-b4-size)/20px var(--font-sans); color: var(--text-secondary); } .intg-card__x { color: var(--text-faint); font-size: 16px; cursor: pointer; } .intg-accounts { display: flex; align-items: center; gap: var(--space-4); } /* ---------- Chip / Badge / Pill ------------------------------------------ */ .chip { display: inline-flex; align-items: center; gap: var(--space-4); padding: 6px var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); } .chip .ph { font-size: 16px; color: var(--text-muted); cursor: pointer; } .badge { display: inline-flex; align-items: center; gap: var(--space-3); height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface-subtle); color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .badge--credit .ph { color: var(--primary-500); font-size: 14px; } /* tag (optional) — 実測: N200 fill, px6 py4, radius4, C1 N500 */ .tag { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2xs); background: var(--border); color: var(--text-muted); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } /* Official — 実測: N100 fill, h24 px8 py4, radius full, C1 N500 */ .tag--official { background: var(--surface-hover); border-radius: var(--radius-full); height: 24px; padding: 0 var(--space-4); } /* ---------- Brand icons (Figma実アセット, assets/) ----------------------- */ .bico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; } .bico img { display: block; width: 100%; height: 100%; object-fit: contain; } .bico--14 { width: 14px; height: 14px; } .bico--16 { width: 16px; height: 16px; } .bico--20 { width: 20px; height: 20px; } .list-row .bico { flex: 0 0 16px; } /* avatar stack (+N) */ .avstack { display: flex; align-items: center; } .avstack__item { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); display: flex; align-items: center; justify-content: center; margin-right: -4px; } .avstack__item .ph { font-size: 14px; color: var(--text-secondary); } .avstack__more { margin-left: var(--space-4); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* ---------- Toggle (DS Switch) — 実測: 35x20 track, knob ~16, v3 Neutral -- */ .toggle { position: relative; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--neutral-300); cursor: pointer; transition: background .15s; flex: 0 0 36px; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--white); box-shadow: var(--shadow-1); transition: left .15s; } .toggle--on { background: var(--neutral-900); } .toggle--on::after { left: 18px; } .muted { color: var(--text-faint); } /* ============================================================================= INTERACTIVE — dropdown menu / modal (driven by interactions.js) ============================================================================= */ .menu-wrap { position: relative; display: inline-flex; } .menu { position: absolute; top: calc(100% + var(--space-3)); right: 0; z-index: 50; min-width: 200px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: var(--space-2); display: none; flex-direction: column; gap: 1px; } .menu--left { right: auto; left: 0; } .menu--up { top: auto; bottom: calc(100% + var(--space-3)); } .menu-wrap.is-open > .menu { display: flex; } .menu__item { display: flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); text-decoration: none; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); white-space: nowrap; } .menu__item:hover { background: var(--surface-hover); } .menu__item .ph { font-size: 16px; color: var(--text-secondary); } .menu__item .ph--caret { margin-left: auto; font-size: 14px; color: var(--text-faint); } .menu__item--danger { color: var(--danger-700); } .menu__item--danger .ph { color: var(--danger-700); } .menu__divider { height: 1px; background: var(--border); margin: var(--space-2) 0; } .menu__label { padding: var(--space-3) var(--space-4) var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* modal (DS Modal) */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: var(--black-30); display: none; align-items: center; justify-content: center; padding: var(--space-8); } .modal-overlay.is-open { display: flex; } .modal { width: 480px; max-width: 100%; max-height: 86vh; background: var(--surface); border-radius: var(--radius-xl); box-shadow: 0 16px 48px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; } .modal__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8); } .modal__title { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.5 var(--font-sans); color: var(--text-primary); } .modal__body { padding: var(--space-2) var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); overflow-y: auto; min-height: 0; } /* tall modals scroll inside; header/footer stay (fixes All-settings top clipping) */ .modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding: var(--space-6) var(--space-8); border-top: 1px solid var(--border); } .step-dots { display: flex; gap: var(--space-3); } .step-dots span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-strong); } .step-dots span.is-on { background: var(--neutral-900); } .modal--wide .modal { width: 560px; } .modal--xl .modal { width: 840px; } /* two-column editors (email edit); max-height/scroll は .modal 基底に統合済み */ /* ============================================================================= CUSTOMIZE · Integrations (connected accounts) — Master 2307:34397 ============================================================================= */ .integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); } .integ-acc { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); } .integ-acc__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .integ-acc__h { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .integ-acc__p { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } .integ-acc__dc { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--danger-700); cursor: pointer; } /* ============================================================================= AGENTS · Schedule (month calendar) — Master 2480:16924 ============================================================================= */ .cal-bar { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); } .cal-bar__nav { display: flex; align-items: center; gap: var(--space-3); } .cal-bar__month { font: var(--type-b2-weight) var(--type-b2-size)/1.5 var(--font-sans); color: var(--text-primary); min-width: 96px; } .cal-bar__spacer { flex: 1 1 auto; } .evt-trigger { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .evt-trigger__label { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .evt-trigger__item { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .evt-trigger__more { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .cal { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .cal__head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); } .cal__wd { padding: var(--space-3) var(--space-4); text-align: right; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal__cell { min-height: 92px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .cal__cell:nth-child(7n) { border-right: 0; } .cal__date { align-self: flex-end; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .cal__date--muted { color: var(--text-faint); } .cal__date--today { align-self: flex-end; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--neutral-900); color: var(--white); display: flex; align-items: center; justify-content: center; } .cal__evt { display: flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-primary); } .cal__evt time { margin-left: auto; color: var(--text-faint); } .cal__more { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } /* ============================================================================= CHAT conversation + Run results pane — Master 2491:21234 ============================================================================= */ .chat-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .runpane { width: 360px; flex: 0 0 360px; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .runpane__head { padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); border-bottom: 1px solid var(--border); } .runpane__titlerow { display: flex; align-items: center; gap: var(--space-4); } .runpane__title { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-4); font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .run-meta { display: flex; flex-direction: column; gap: var(--space-2); } .run-meta__r { display: flex; align-items: center; justify-content: space-between; } .run-meta__k { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } .run-meta__v { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-secondary); } .run-list { padding: var(--space-6) var(--space-8); } .run-list__head { display: flex; align-items: center; margin-bottom: var(--space-3); } .run-list__head .lib-toolbar__title { flex: 1 1 auto; } .run-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border); } .run-item__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .run-item__t { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-item__time { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .run-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-strong); flex: 0 0 6px; } .run-dot--pending { background: var(--neutral-900); } .run-item { cursor: pointer; } .run-item:hover { background: var(--surface-hover); border-radius: var(--radius-sm); } .run-item--active { background: var(--surface-hover); border-radius: var(--radius-sm); } .run-item__badge { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--warning-700); } /* wide-layout run rows (agent detail Run Results): no dividers, roomy padding, radius on hover/active, 8px success dot by default. Overrides the sidebar defaults above; later source order wins. */ .run-item--row { padding: var(--space-6) var(--space-8); border-bottom: 0; border-radius: var(--radius-lg); gap: var(--space-5); } .run-item--row:hover, .run-item--row.run-item--active { background: var(--surface-hover); border-radius: var(--radius-lg); } .run-item--row .run-dot { width: 8px; height: 8px; flex-basis: 8px; background: var(--success-500); } /* campaign STAGE panel (big steps + per-step summary) — right pane of a campaign session */ .stage-list { display: flex; flex-direction: column; } .stage-item { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); cursor: pointer; } .stage-item:hover { background: var(--surface-hover); } .stage-item--active { background: var(--surface-hover); } .stage-item__h { display: flex; align-items: center; gap: var(--space-4); } .stage-num { width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-full); background: var(--surface-hover); display: flex; align-items: center; justify-content: center; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .stage-num--done { background: var(--neutral-900); color: var(--white); } .stage-num--active { background: var(--warning-500); color: var(--white); } .stage-item__t { flex: 1 1 auto; font: var(--type-s2-weight) var(--type-s2-size)/1.3 var(--font-sans); color: var(--text-primary); } .stage-status { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .stage-status--active { color: var(--warning-700); } .stage-status--done { color: var(--neutral-600); } .stage-item__sum { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); padding-left: calc(22px + var(--space-4)); } .stage-stat { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .stage-stat b { color: var(--text-primary); font-weight: var(--fw-semibold); } .stage-brief { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding-left: calc(22px + var(--space-4)); } .stage-chip { display: inline-flex; align-items: center; gap: var(--space-3); height: 22px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface-subtle); color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } /* ============================================================================= PAGES · Post Editor — Master 1508:18482 ============================================================================= */ .pe { display: flex; gap: var(--space-10); } .pe__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); } .pe__label { font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .pe-preview__label { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-4); } .tw-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .tw-card__h { display: flex; align-items: center; gap: var(--space-3); font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .tw-card__b { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-secondary); } .tw-card__f { display: flex; align-items: center; gap: var(--space-6); color: var(--text-faint); } .tw-card__f .ph { font-size: 16px; } .pe-foot { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-8); } /* Article editor — rich text preview */ .rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); margin-bottom: var(--space-6); } .rte-toolbar .ph { font-size: 16px; } .rte-toolbar__sep { width: 1px; height: 16px; background: var(--border); } .article-hero { height: 200px; border-radius: var(--radius-lg); background: linear-gradient(135deg,#1b3a5b,#2f6f7a 50%,#6aa6b8); display: flex; align-items: center; justify-content: center; color: var(--white-80); font: var(--fw-semibold) 64px/1 var(--font-sans); margin-bottom: var(--space-6); } .article-title { font: var(--type-h2-weight) var(--type-h2-size)/1.4 var(--font-sans); color: var(--text-primary); margin-bottom: var(--space-5); } .article-body p { font: var(--type-b3-weight) var(--type-b3-size)/1.7 var(--font-sans); color: var(--text-secondary); margin: 0 0 var(--space-5); } .article-body h3 { font: var(--type-s1-weight) var(--type-s1-size)/1.5 var(--font-sans); color: var(--text-primary); margin: var(--space-7) 0 var(--space-4); } /* Audio editor */ .audio-modes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); } .audio-mode { height: 32px; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .audio-mode--active { background: var(--neutral-900); color: var(--white); border-color: var(--neutral-900); } .voice-filter { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); } .voice-filter span { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); cursor: pointer; } .voice-filter span.is-on { color: var(--text-primary); font-weight: var(--fw-semibold); } .voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .voice-card { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); } .voice-card__ic { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex: 0 0 28px; } .voice-card__b { flex: 1 1 auto; min-width: 0; } .voice-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .voice-card__tag{ font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } .audio-player { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); } .audio-player__wave { flex: 1 1 auto; height: 2px; background: var(--border); border-radius: var(--radius-full); position: relative; } .audio-player__wave::after { content:""; position:absolute; left:0; top:0; height:100%; width:35%; background: var(--neutral-900); border-radius: inherit; } .audio-player__time { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* ============================================================================= CONTENT BLOCKS gallery (chat/page result blocks) — Master Chat canvas 26:14003 ============================================================================= */ .blocks-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-8) var(--space-11); } .block-sec { margin-bottom: var(--space-10); } .block-sec__t{ font: var(--type-s1-weight) var(--type-s1-size)/1.5 var(--font-sans); color: var(--text-primary); margin-bottom: var(--space-5); } .block-card2 { border: 0.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-6); } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); } .metric { border: 0.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .metric__k { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .metric__v { font: var(--type-h2-weight) var(--type-h2-size)/1.2 var(--font-sans); color: var(--text-primary); } .metric__d { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .metric__d--up { color: var(--success-700); } .metric__d--dn { color: var(--danger-600); } .dtable { width: 100%; border-collapse: collapse; } .dtable th, .dtable td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .dtable th { font: var(--type-c2-weight) var(--type-c2-size)/1.4 var(--font-sans); color: var(--text-muted); } .dtable td.num, .dtable th.num { text-align: right; } .line-chart { height: 160px; display: flex; align-items: flex-end; } .line-chart svg { width: 100%; height: 100%; } .alert { display: flex; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--info-50); } .alert .ph { font-size: 18px; color: var(--info-700); margin-top: 1px; } .alert__t { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); } .alert__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-secondary); margin-top: var(--space-2); } .alert--warn { background: var(--warning-50); } .alert--warn .ph { color: var(--warning-700); } .alert--ok { background: var(--success-50); } .alert--ok .ph { color: var(--success-700); } .block-badges { display: flex; flex-wrap: wrap; gap: var(--space-4); } .bdg { display: inline-flex; align-items: center; gap: var(--space-3); height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .bdg--ok { background: var(--success-50); color: var(--success-700); } .bdg--warn { background: var(--warning-50); color: var(--warning-700); } .bdg--err { background: var(--danger-50); color: var(--danger-700); } .bdg--info { background: var(--info-50); color: var(--info-700); } .bdg--neutral{ background: var(--surface-hover); color: var(--text-secondary); } /* advisor recommendation cards */ .rec-card { display: flex; align-items: flex-start; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .rec-card__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .rec-card__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .rec-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .rec-card__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .rec-card__act { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; } /* video storyboard scene cards */ .scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); } .scene-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .scene-thumb { height: 120px; display: flex; align-items: flex-end; padding: var(--space-4); color: var(--white); font: var(--fw-semibold) 12px/1 var(--font-sans); } .scene-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .scene-body__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .scene-body__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .scene-body__m { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* image-option choice cards (interactive question) */ .imgopt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-5); } .imgopt { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; } .imgopt:hover { background: var(--surface-subtle); } .imgopt--active { border-color: var(--border-active); } .imgopt__thumb { height: 120px; } .imgopt__b { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .imgopt__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .imgopt__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } /* numbered single-select options */ .numopt { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); cursor: pointer; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .numopt:hover { background: var(--surface-subtle); } .numopt--active { border-color: var(--border-active); } .numopt__n { width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-full); background: var(--surface-hover); display: flex; align-items: center; justify-content: center; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } /* skill canvas (right pane document) */ .canvas-doc { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-8); display: flex; justify-content: center; } .canvas-doc__inner { width: 100%; max-width: 720px; } /* ============================================================================= CHAT + CANVAS (Create with chat / website builder) v3制約: 左 chat pane 440px + 右 canvas。bubble本文は336px幅で折り返し。 ============================================================================= */ /* ---- Chat pane ---------------------------------------------------------- */ .pane-chat { width: 440px; flex: 0 0 440px; display: flex; flex-direction: column; min-height: 0; border-left: 0.5px solid var(--border); } .canvas-solo .pane-chat { display: none; } /* solo canvas route (#/flow): builder without the conversation */ .chat-scroll { flex: 1 1 0; overflow-y: auto; min-height: 0; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-7); } /* user message — N100 bubble, right aligned, max 336 */ .msg-user { align-self: flex-end; max-width: 336px; background: var(--surface-hover); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-primary); } /* assistant message — plain text + optional build card */ .msg-ai { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-5); max-width: 392px; } .msg-ai__text{ font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-secondary); } /* build card — N50, lists files/steps */ .build-card { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .build-card__head { display: flex; align-items: center; gap: var(--space-4); font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .build-step { display: flex; align-items: center; gap: var(--space-4); font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); color: var(--text-secondary); } .build-step .ph { font-size: 14px; color: var(--neutral-600); } .build-step__file { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } /* ---- Composer (chat input) — 左pane下部固定 ----------------------------- */ .composer { flex: 0 0 auto; padding: var(--space-5) var(--space-8) var(--space-8); } .composer-box{ border: 0.5px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .composer-box textarea { border: 0; outline: 0; background: transparent; resize: none; width: 100%; font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-primary); } .composer-box textarea::placeholder { color: var(--text-faint); } .composer-bar{ display: flex; align-items: center; gap: var(--space-4); } .composer-bar__spacer { flex: 1 1 auto; } .send-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-full); background: var(--cta-bg); color: var(--cta-text); cursor: pointer; } .send-btn .ph{ font-size: 16px; } /* ---- Canvas pane -------------------------------------------------------- */ .pane-canvas { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--neutral-100); } .canvas-bar { flex: 0 0 48px; height: 48px; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); } .canvas-bar__spacer { flex: 1 1 auto; } .canvas-body { flex: 1 1 0; overflow: auto; padding: var(--space-6); display: flex; justify-content: center; } .preview-frame { width: 100%; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-1); } .preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* mobile viewport */ .canvas-body--mobile .preview-frame { width: 390px; max-width: 390px; } /* ---- Segmented control (icon, binary) — ルール: Preview/Code はアイコンsegmented */ .segmented { display: inline-flex; background: var(--surface-hover); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .segmented__item { display: inline-flex; align-items: center; gap: var(--space-3); height: 28px; padding: 0 var(--space-4); border-radius: var(--radius-xs); cursor: pointer; color: var(--text-muted); font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); } .segmented__item .ph { font-size: 16px; } .segmented__item--active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-1); } /* ---- URL pill ----------------------------------------------------------- */ .url-pill { display: flex; align-items: center; gap: var(--space-4); height: 28px; padding: 0 var(--space-5); background: var(--surface-hover); border-radius: var(--radius-full); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .url-pill .ph { font-size: 14px; } /* ---- Canvas bar extras -------------------------------------------------- */ .bar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 var(--space-2); flex: 0 0 auto; } .bar-group { display: flex; align-items: center; gap: var(--space-3); } /* ---- Plan / todo card (Manus風 step進捗) -------------------------------- */ .plan-card { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .plan-card__head { display: flex; align-items: center; gap: var(--space-4); font: var(--type-s2-weight) var(--type-s2-size)/var(--type-s2-lh) var(--font-sans); color: var(--text-primary); } .plan-card__head .ph { font-size: 16px; color: var(--text-secondary); } .plan-card__count { margin-left: auto; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .plan-step { display: flex; align-items: center; gap: var(--space-4); font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-secondary); } .plan-step .ph { font-size: 16px; flex: 0 0 16px; } .plan-step--done .ph { color: var(--neutral-700); } .plan-step--active { color: var(--text-primary); } .plan-step--active .ph { color: var(--neutral-900); } .plan-step--todo { color: var(--text-faint); } .plan-step--todo .ph { color: var(--neutral-300); } /* ---- Visual-edit hint over preview (Lovable/Manus select-to-edit) ------- */ .canvas-body { position: relative; } .edit-hint { position: absolute; top: var(--space-6); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-5); background: var(--neutral-900); color: var(--white); border-radius: var(--radius-full); font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); box-shadow: var(--shadow-1); } .edit-hint .ph { font-size: 14px; } /* ============================================================================= ONBOARDING (chat-based) — Master 新ファイル WPOZEmTmeKplJWhAI6ztrD ============================================================================= */ /* main scroll area holding the centered onboarding conversation */ .ob { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: var(--space-11) var(--space-8) 0; } .ob__inner { width: 100%; max-width: 840px; display: flex; flex-direction: column; gap: var(--space-7); } /* assistant turn: brand mark + message body */ .ob-msg { display: flex; gap: var(--space-6); } .ob-mark { flex: 0 0 24px; width: 24px; height: 24px; display: flex; } .ob-mark img { width: 100%; height: 100%; display: block; } .ob-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); } .ob-body p { margin: 0; font: var(--type-b1-weight) var(--type-b1-size)/var(--type-b1-lh) var(--font-sans); color: var(--text-primary); } .ob-step { font: var(--type-s2-weight) var(--type-s2-size)/var(--type-s2-lh) var(--font-sans); color: var(--text-muted); letter-spacing: .3px; } .ob-body strong { font-weight: var(--fw-semibold); } /* choice cards (Personal Brand / Company Brand) */ .choice-row { display: flex; gap: var(--space-6); } .choice-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; background: var(--surface); } .choice-card:hover { background: var(--surface-subtle); } .choice-card--active { border-color: var(--border-active); } .choice-card .ph { font-size: 20px; color: var(--text-secondary); margin-bottom: var(--space-3); } .choice-card__title { font: var(--type-b4-weight) var(--type-b4-size)/var(--type-b4-lh) var(--font-sans); color: var(--text-primary); } .choice-card__desc { font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); color: var(--text-muted); } /* onboarding composer — centered at bottom */ .ob-composer { flex: 0 0 auto; padding: var(--space-7) var(--space-8) var(--space-8); display: flex; justify-content: center; } .ob-composer .composer-box { width: 100%; max-width: 760px; } /* onboarding step shared: nav (Back / Skip / Next) */ .ob-nav { display: flex; align-items: center; margin-top: var(--space-2); } .ob-nav__back{ display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-secondary); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); cursor: pointer; } .ob-nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); } /* Step2 — option cards (2-col, selectable) */ .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .opt-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); cursor: pointer; } .opt-card:hover { background: var(--surface-subtle); } .opt-card--active { border-color: var(--border-active); } /* not-yet-available option (e.g. Add step → Send push: channel not connected) — dimmed, no hover/select affordance */ .opt-card--muted { opacity: 0.5; cursor: default; } .opt-card--muted:hover { background: transparent; } /* Step3 — form card (white, 0.5px border) */ .ob-card { border: 0.5px solid var(--border-strong); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); background: var(--surface); } /* Step4 — connect apps grid */ .connect-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .connect-row { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-5); height: 40px; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .connect-row .ph--brand { font-size: 18px; } .connect-row__name { flex: 1 1 auto; } .connect-row__add { color: var(--text-muted); font-size: 16px; cursor: pointer; } .connect-row--on { background: var(--surface-subtle); } .connect-row__done { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } /* Step5 — research progress */ .research { display: flex; flex-direction: column; gap: var(--space-6); } .research-step { display: flex; gap: var(--space-5); } .research-step .ph { font-size: 16px; color: var(--text-secondary); margin-top: 2px; flex: 0 0 16px; } .research-step__b { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .research-step__t { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); } .research-step__s { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .research-links { display: flex; flex-wrap: wrap; gap: var(--space-4); } .research-link { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .progress-chip { align-self: flex-end; display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-5); border-radius: var(--radius-full); background: var(--surface-subtle); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } /* Step6 — suggestion chips */ .suggest-row { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* breadcrumb header */ .crumb { display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); } .crumb .ph { font-size: 16px; } .crumb__sep { color: var(--text-faint); font-size: 14px; } .crumb__current { color: var(--text-primary); } /* ============================================================================= CHAT HOME (Good Morning) — Master 2300:26379 / 3169:19773 ============================================================================= */ .home { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); } .home__block { width: 760px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-11); } /* heading: brand mark 38 + "Good Morning" 40px medium, tracking .8 */ .home__head { display: flex; align-items: center; gap: var(--space-6); } .home__head img { width: 38px; height: 38px; display: block; } .home__title { font: var(--fw-medium) 40px/1 var(--font-sans); color: var(--text-secondary); letter-spacing: .8px; } .home__cgroup{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } /* AI Chat Input — white / 1px N300 / radius24 / soft shadow */ .home-input { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-3xl); box-shadow: 0 0 16px rgba(0,0,0,.06); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); overflow: hidden; } .home-input__placeholder { min-height: 48px; font: var(--type-b1-weight) var(--type-b1-size)/24px var(--font-sans); color: var(--border-strong); } .home-input__bar { display: flex; align-items: center; justify-content: space-between; } .home-input__left { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* integrations count button (N50 soft) */ .btn--soft { background: var(--surface-subtle); } .btn__divider{ width: 1px; height: 16px; background: var(--border); } /* mic ⇄ send toggle: send hidden until the composer has text */ .home-send { display: none; } .home-input.has-text .home-mic { display: none; } .home-input.has-text .home-send { display: inline-flex; } /* quick action chips row */ .home-actions{ display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .home-actions .btn { font-weight: var(--fw-regular); } /* ============================================================================= CUSTOMIZE / SKILLS — Master 2307:30851 ============================================================================= */ /* skill / file tree rows (reuse list-row sizing) */ .tree-row { display: flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); cursor: pointer; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .tree-row:hover { background: var(--surface-hover); } .tree-row--active { background: var(--surface-hover); } .tree-row--file { padding-left: var(--space-6); } /* indented file (SKILL.md) */ .tree-row--folder { padding-left: var(--space-6); } /* indented folder */ .tree-row .ph { font-size: 16px; color: var(--text-secondary); } /* detail-head variant: skill title B2 (medium 16) + Try-in-chat + kebab */ .detail-head--feed { padding-top: 0; } .skill-title { flex: 1 1 auto; font: var(--type-b2-weight) var(--type-b2-size)/1.5 var(--font-sans); color: var(--text-secondary); } .skill-meta { display: flex; align-items: center; gap: var(--space-2); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); } /* description block — N50 fill, padding16, radius16, B3 N500 */ .desc-block { background: var(--surface-subtle); border-radius: var(--radius-xl); padding: var(--space-6); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-muted); } /* instructions block — Notion-style read-only "what the agent does" summary shown inside a surface-subtle form section (text-type agent Flow节). Subtle fill + hairline border so it reads as a non-editable memory panel (not an input) and stays legible on the subtle section. */ .ins-block { background: var(--surface-subtle); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-secondary); } /* markdown content card — white, 0.5px N200, radius16, padding16, gap12 */ .md-card { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); border: 0.5px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); color: var(--text-secondary); } .md-card h1 { margin: 0; font: var(--type-h2-weight) var(--type-h2-size)/1.5 var(--font-sans); } .md-card h3 { margin: 0; font: var(--type-s1-weight) var(--type-s1-size)/1.5 var(--font-sans); } .md-card p { margin: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); } .md-card ul { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); } /* feed-style content wrap (border-left, padding) */ .detail-feed { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); border-left: 1px solid var(--border); padding: var(--space-8) var(--layout-pane-pad); overflow: hidden; } .detail-feed__head { display: flex; flex-direction: column; gap: var(--space-4); } .detail-feed__titlerow { display: flex; align-items: center; gap: var(--space-4); } /* ============================================================================= PAGES (document editor) — Master 1508:21229 ============================================================================= */ .page-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-8) var(--layout-pane-pad); } .page-head { display: flex; align-items: center; gap: var(--space-4); } .page-emoji { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 18px; } .page-title { flex: 1 1 auto; font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-lh) var(--font-sans); color: var(--text-primary); } .page-actions{ display: flex; align-items: center; gap: var(--space-3); } .blocks { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); } .block-card { width: 286px; } .add-block { width: 175px; height: 175px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--text-muted); cursor: pointer; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); } .add-block:hover { background: var(--surface-subtle); } .add-block .ph { font-size: 16px; } /* chart block (white card + bar chart) */ .chart-block { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 0 20px rgba(0,0,0,.12); padding: var(--space-5); width: 284px; } .bar-chart { display: flex; gap: var(--space-4); height: 122px; } .bar-chart__y{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 28px; font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-muted); } .bar-chart__plot { flex: 1 1 auto; position: relative; display: flex; align-items: flex-end; justify-content: space-around; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(var(--border) 1px, transparent 1px) 0 50% / 100% 50% repeat-y; } .bar-chart__bar { width: 12px; border-radius: 2px; background: #a1e3cb; } .bar-chart__x{ display: flex; padding-left: 36px; margin-top: var(--space-4); font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-muted); } .bar-chart__x span { flex: 1 1 0; text-align: center; } /* ============================================================================= LIBRARY (files grid) — Master 2307:27846 ============================================================================= */ .lib-toolbar { display: flex; align-items: center; } .lib-toolbar__title { flex: 1 1 auto; font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .lib-tools { display: flex; align-items: center; gap: var(--space-2); } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); } .lib-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); cursor: pointer; } .lib-card:hover { box-shadow: var(--shadow-1); } .lib-card__thumb { height: 140px; background: var(--surface-subtle); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-6); } .lib-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .lib-card__title { font: var(--type-b4-weight) var(--type-b4-size)/var(--type-b4-lh) var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-card__meta { display: flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-muted); } .lib-card__meta .ph { font-size: 14px; } .lib-card__sep { color: var(--text-faint); } /* thumbnails */ .thumb--image{ width: 100%; height: 100%; margin: calc(-1 * var(--space-6)); background: linear-gradient(135deg, #c9d6c3, #8aa6c0 45%, #cdab86); } .thumb--code { width: 100%; font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--text-faint); overflow: hidden; } .thumb--code .g { color: var(--success-500); } .thumb-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; } .thumb-bars span { width: 12px; border-radius: 2px; background: #a1e3cb; } /* ============================================================================= SETTINGS (workspace / team) — Master 14:10701 / 14:10702 ============================================================================= */ .settings-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); } /* members table */ .set-toolbar { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); } .set-toolbar .input { flex: 1 1 auto; max-width: 320px; } .set-toolbar__spacer { flex: 1 1 auto; } .table { width: 100%; } .table__head, .table__row { display: grid; grid-template-columns: 1fr 1fr 120px; align-items: center; gap: var(--space-5); } .table__head { height: 36px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); } .table__row { height: 56px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .table__name { display: flex; align-items: center; gap: var(--space-5); } .table__email{ color: var(--text-secondary); } .table__role { color: var(--text-secondary); } .table__head .table__role, .table__head .table__email { text-align: left; } .checkbox { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-2xs); flex: 0 0 18px; cursor: pointer; } /* settings form (account) */ .set-form { max-width: 880px; } .set-section { font: var(--type-s1-weight) var(--type-s1-size)/1.5 var(--font-sans); color: var(--text-primary); margin: var(--space-8) 0 var(--space-5); } .set-section:first-child { margin-top: 0; } .set-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: var(--space-6); } .set-row + .set-row { margin-top: var(--space-5); } .set-row__label { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .set-row__value { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); } .set-row .select { min-width: 200px; } .set-row .select__unit { color: var(--text-faint); margin-left: var(--space-3); } /* settings: avatar row, danger zone, plain field row */ .set-avatar { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-7); } .set-avatar .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 14px; } .set-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 40px; } .set-field .input { width: 280px; } .danger-box { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-7); background: var(--danger-50); border-radius: var(--radius-lg); padding: var(--space-6); } .danger-box__b { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); } .danger-box__t { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--danger-700); } .danger-box__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--danger-600); } .btn--danger { background: var(--surface); border-color: var(--danger-300); color: var(--danger-700); } .btn--danger:hover { background: var(--danger-50); } /* library list (table) view */ .lib-table__head, .lib-table__row { display: grid; grid-template-columns: 1fr 200px 160px; align-items: center; gap: var(--space-5); } .lib-table__head { height: 36px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); margin-top: var(--space-6); } .lib-table__row { height: 52px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); } .lib-table__name { display: flex; align-items: center; gap: var(--space-5); overflow: hidden; } .lib-table__name .ph { font-size: 16px; color: var(--text-secondary); flex: 0 0 16px; } .lib-table__name .pic{ width: 28px; height: 28px; border-radius: var(--radius-2xs); flex: 0 0 28px; } .lib-table__type { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); } .lib-table__type .ph { font-size: 14px; } .lib-table__time { color: var(--text-faint); } /* ============================================================================= CRM MODULE — unified CRM (HubSpot流) + CDP/CEP (Customer.io流) records: Contacts / Companies / Deals(board) / Lists & Segments engagement: Campaigns(journey+analytics) / Email content / Email editor setup: Domains & sending (DKIM/SPF/DMARC) 全プロパティ var(--...) 参照。固定幅/1px/チャート色のみ raw（既存方針に準拠）。 ============================================================================= */ /* ---- shared page wrap (full-width module screen) ------------------------ */ .crm-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 var(--layout-pane-pad) var(--layout-pane-pad); } .crm-tabs { display: flex; gap: var(--space-7); border-bottom: 1px solid var(--border); } .crm-tabs .tab { padding-top: var(--space-6); } /* ---- toolbar (search / saved view / filters / actions) ----------------- */ .crm-toolbar { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0 var(--space-5); } .crm-toolbar .input { flex: 0 0 280px; height: 36px; min-height: 36px; } .crm-toolbar__spacer { flex: 1 1 auto; } .crm-viewtab { display: inline-flex; align-items: center; gap: var(--space-3); height: 32px; padding: 0 var(--space-5); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); font: var(--fw-medium) var(--type-b3-size)/1 var(--font-sans); } .crm-viewtab--active { background: var(--surface-hover); color: var(--text-primary); } .crm-viewtab .ph { font-size: 14px; } /* ---- index table (customizable columns) -------------------------------- */ .crm-table { width: 100%; border-collapse: collapse; } .crm-table th { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); color: var(--text-muted); white-space: nowrap; } .crm-table td { padding: var(--space-5); border-bottom: 1px solid var(--border); font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); white-space: nowrap; } .crm-table tbody tr { cursor: pointer; } .crm-table tbody tr:hover { background: var(--surface-hover); } .crm-table .col-check { width: 36px; } .crm-table .col-add { width: 40px; text-align: center; color: var(--text-faint); } .crm-cell-name { display: flex; align-items: center; gap: var(--space-5); } .crm-cell-name .avatar { flex: 0 0 24px; } .crm-cell-sub { font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-faint); } .crm-cell-stack { display: flex; flex-direction: column; gap: 2px; } /* email-reaction mini indicator (opened/clicked) */ .react { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .react i { font-size: 14px; } .react--ok i{ color: var(--success-700); } .react--mut i { color: var(--text-faint); } /* lifecycle / stage pills */ .pill { display: inline-flex; align-items: center; gap: var(--space-3); height: 22px; padding: 0 var(--space-4); border-radius: var(--radius-full); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); background: var(--surface-hover); color: var(--text-secondary); } .pill__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--neutral-400); } .pill--lead .pill__dot { background: var(--info-500); } .pill--mql .pill__dot { background: var(--primary-500); } .pill--sql .pill__dot { background: var(--warning-500); } .pill--cust .pill__dot { background: var(--success-500); } .pill--churn .pill__dot { background: var(--danger-500); } /* ---- Deals kanban board ------------------------------------------------- */ .kanban { display: flex; gap: var(--space-5); margin-top: var(--space-6); overflow-x: auto; padding-bottom: var(--space-5); } .kanban__col { flex: 0 0 280px; width: 280px; display: flex; flex-direction: column; gap: var(--space-4); } .kanban__head { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-2); } .kanban__title { font: var(--type-s2-weight) var(--type-s2-size)/1 var(--font-sans); color: var(--text-secondary); } .kanban__count { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .kanban__sum { margin-left: auto; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .kanban__body { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-4); min-height: 120px; } .deal-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; } .deal-card:hover { border-color: var(--border-strong); } .deal-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .deal-card__co { display: flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-muted); } .deal-card__co .ph { font-size: 14px; } .deal-card__f { display: flex; align-items: center; justify-content: space-between; } .deal-card__amt { font: var(--type-s2-weight) var(--type-s2-size)/1 var(--font-sans); color: var(--text-primary); } /* pipeline summary bar (above board) */ .pipe-bar { display: flex; gap: var(--space-5); margin-top: var(--space-6); } .pipe-stat { flex: 1 1 0; border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .pipe-stat__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .pipe-stat__v { font: var(--type-h3-weight) var(--type-h3-size)/1.1 var(--font-sans); color: var(--text-primary); } /* ---- Contact record (3-col) -------------------------------------------- */ .rec { display: flex; gap: 0; flex: 1 1 0; min-height: 0; } .rec__side { flex: 0 0 320px; width: 320px; overflow-y: auto; padding: var(--space-7) var(--space-7) var(--space-8); } .rec__main { flex: 1 1 auto; min-width: 0; overflow-y: auto; border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border); padding: var(--space-7) var(--space-8) var(--space-8); } .rec__assoc { flex: 0 0 300px; width: 300px; overflow-y: auto; padding: var(--space-7); } .rec-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); } .rec-id .avatar { width: 48px; height: 48px; flex: 0 0 48px; font-size: 18px; border-radius: var(--radius-full); } .rec-id__name { font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .rec-id__sub { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .rec-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-7); } .rec-actions .icon-btn--bordered { flex: 1 1 0; } .prop-sec__h { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0 var(--space-4); } .prop-sec__h .ph { font-size: 14px; color: var(--text-muted); } .prop-sec__t { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); flex: 1 1 auto; } .prop-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4); border-radius: var(--radius-sm); } .prop-row:hover { background: var(--surface-hover); } .prop-row__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .prop-row__v { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } /* activity timeline (middle) */ .rec-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); } .tl { display: flex; flex-direction: column; } .tl-day { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-faint); margin: var(--space-6) 0 var(--space-4); } .tl-item { display: flex; gap: var(--space-5); padding-bottom: var(--space-6); position: relative; } .tl-item::before { content:""; position:absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background: var(--border); } .tl-item:last-child::before { display: none; } .tl-ic { flex: 0 0 24px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface-subtle); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); z-index: 1; } .tl-ic .ph { font-size: 13px; } .tl-ic--mail { background: var(--info-50); color: var(--info-700); border-color: var(--info-100); } .tl-ic--deal { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); } .tl-ic--note { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); } .tl-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .tl-t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .tl-t time { font-weight: var(--fw-regular); color: var(--text-faint); margin-left: var(--space-4); font-size: var(--type-c1-size); } .tl-d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .tl-quote { border-left: 2px solid var(--border); padding: var(--space-3) var(--space-5); background: var(--surface-subtle); border-radius: var(--radius-xs); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-secondary); } /* association cards (right) */ .assoc-sec__h { display: flex; align-items: center; margin: var(--space-6) 0 var(--space-4); } .assoc-sec__t { flex: 1 1 auto; font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); } .assoc-card { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); cursor: pointer; } .assoc-card:hover { background: var(--surface-hover); } .assoc-card__ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .assoc-card__b { flex: 1 1 auto; min-width: 0; } .assoc-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .assoc-card__m { font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-faint); } /* ---- Segment / List builder (condition tree) --------------------------- */ .seg-head { display: flex; align-items: flex-start; gap: var(--space-5); padding-top: var(--space-8); margin-bottom: var(--space-7); } .seg-count { display: inline-flex; align-items: baseline; gap: var(--space-4); } .seg-count__v { font: var(--type-h2-weight) var(--type-h2-size)/1 var(--font-sans); color: var(--text-primary); } .seg-count__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .cond-group { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .cond-grouplabel { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); margin-bottom: var(--space-2); } .cond-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .cond-row .select { min-height: 36px; } .cond-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-5); border-radius: var(--radius-sm); border: 0.5px solid var(--border-strong); background: var(--surface); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-secondary); } .cond-op { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); padding: 0 var(--space-2); } .cond-x { color: var(--text-faint); font-size: 16px; cursor: pointer; margin-left: auto; } .cond-joiner { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--neutral-900); color: var(--white); font: var(--fw-semibold) var(--type-c1-size)/1 var(--font-sans); align-self: flex-start; margin: var(--space-2) 0; } /* ---- Campaign journey canvas: REMOVED 2026-07-10 (第50版) ---------------- The old .flow/.flow-node block that lived here was a dead duplicate of the FLOW BUILDER section below (known debt since 第41版). Its only remaining effect was cascade leakage into the new chart (green goal icon, extra shadow). All .flow-* styling now lives in the FLOW BUILDER section. */ /* ---- Email editor (modules + tokens + preview) ------------------------- */ .ee { display: flex; flex: 1 1 0; min-height: 0; } .ee__side { flex: 0 0 300px; width: 300px; overflow-y: auto; padding: var(--space-7); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; gap: var(--space-6); } .ee__main { flex: 1 1 auto; min-width: 0; overflow-y: auto; background: var(--neutral-100); padding: var(--space-8); display: flex; justify-content: center; } .mod-list { display: flex; flex-direction: column; gap: var(--space-3); } .mod-row { display: flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: grab; color: var(--text-secondary); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); } .mod-row:hover { background: var(--surface-subtle); } .mod-row .ph { font-size: 16px; } .token-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .token { display: inline-flex; align-items: center; gap: var(--space-3); height: 26px; padding: 0 var(--space-4); border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--text-secondary); font: var(--font-mono); font-size: 11px; cursor: pointer; } .email-paper { width: 600px; max-width: 100%; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); overflow: hidden; align-self: flex-start; } .email-paper__hd { height: 64px; background: var(--neutral-900); display: flex; align-items: center; justify-content: center; color: var(--white); font: var(--fw-semibold) 18px/1 var(--font-sans); } .email-paper__bd { padding: var(--space-10) var(--space-11); display: flex; flex-direction: column; gap: var(--space-6); } .email-paper__bd h2 { margin: 0; font: var(--type-h3-weight) var(--type-h3-size)/1.4 var(--font-sans); color: var(--text-primary); } .email-paper__bd p { margin: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.7 var(--font-sans); color: var(--text-secondary); } .email-paper__cta { align-self: flex-start; } .ee-meta { display: flex; flex-direction: column; gap: var(--space-5); } /* ---- Domain & sending setup (DNS auth) --------------------------------- */ .dom-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); } .dom-card__hd { display: flex; align-items: center; gap: var(--space-5); } .dom-card__name { flex: 1 1 auto; font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .auth-badge { display: inline-flex; align-items: center; gap: var(--space-3); height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .auth-badge .ph { font-size: 13px; } .auth-badge--ok { background: var(--success-50); color: var(--success-700); } .auth-badge--part { background: var(--warning-50); color: var(--warning-700); } .auth-badge--no { background: var(--surface-hover); color: var(--text-muted); } .dns-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); } .dns-table th, .dns-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-secondary); vertical-align: top; } .dns-table th { color: var(--text-muted); font-weight: var(--fw-medium); } .dns-table code { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); word-break: break-all; } .dns-copy { color: var(--text-faint); cursor: pointer; font-size: 14px; } .auth-steps { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-7); } .auth-step { display: flex; align-items: center; gap: var(--space-4); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .auth-step--done { color: var(--text-secondary); } .auth-step--done .ph { color: var(--success-700); } .auth-step .ph { font-size: 16px; } /* small param key/value editor */ .kv-row { display: flex; align-items: center; gap: var(--space-4); } .kv-row .input { flex: 1 1 0; height: 36px; min-height: 36px; } .kv-row .input--key { flex: 0 0 200px; } /* segmented audience chip on campaign card */ /* ============================================================================= CAMPAIGN ANALYTICS PAGE (Customer.io実UI再現) — 専用Page型 tabs: Overview / Workflow / Metrics / A/B Tests / Drafts / Sent / Journeys ============================================================================= */ /* campaign switcher in page header */ .cmp-switch { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-5); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); font: var(--type-s1-weight) var(--type-s1-size)/1 var(--font-sans); } .cmp-switch:hover { background: var(--surface-hover); } .cmp-switch .ph { font-size: 16px; color: var(--text-muted); } .cmp-edited { margin-left: auto; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* analytics filter bar */ .ana-bar { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0 var(--space-6); } .ana-bar__spacer { flex: 1 1 auto; } .date-pill { display: inline-flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-primary); cursor: pointer; } .date-pill .ph { font-size: 16px; color: var(--text-muted); } .cnt-toggle { display: inline-flex; background: var(--surface-hover); border-radius: var(--radius-sm); padding: 2px; } .cnt-toggle span { height: 28px; display: inline-flex; align-items: center; padding: 0 var(--space-5); border-radius: var(--radius-xs); font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); cursor: pointer; } .cnt-toggle span.is-on { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-1); } /* overview metric cards (big, with channel icons + sparkline or empty) */ .ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .ov-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); min-height: 240px; display: flex; flex-direction: column; } .ov-card__h { display: flex; align-items: flex-start; } .ov-card__k { display: flex; align-items: center; gap: var(--space-3); font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .ov-card__k .q { color: var(--text-faint); font-size: 15px; } .ov-card__ch { margin-left: auto; display: flex; gap: var(--space-3); color: var(--text-faint); } .ov-card__ch .ph { font-size: 16px; } .ov-num { font: var(--fw-regular) 30px/1.1 var(--font-sans); color: var(--text-primary); margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-4); } .ov-delta { display: inline-flex; align-items: center; gap: 2px; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .ov-delta .ph { font-size: 12px; } .ov-spark { flex: 1 1 auto; display: flex; align-items: flex-end; margin-top: var(--space-5); } .ov-spark svg { width: 100%; height: 90%; } .ov-axis { display: flex; justify-content: space-between; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); border-top: 1px solid var(--border); padding-top: var(--space-3); } .ov-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); padding: var(--space-6); } /* details + leaderboard row */ .cmp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); } .cmp-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .cmp-panel__h { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); } .cmp-panel__t { font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .cmp-panel__m { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .trig-row { display: flex; align-items: flex-start; gap: var(--space-4); } .trig-row .ph { font-size: 18px; color: var(--text-secondary); margin-top: 1px; } .trig-t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); } .trig-d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); } .trig-cond { background: var(--surface-subtle); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-top: var(--space-4); font: var(--font-mono); font-size: 11px; color: var(--text-secondary); } /* metrics tab: chart + checklist */ .met-2col { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-7); margin-top: var(--space-6); } .met-chart { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); min-height: 320px; } .met-chart__h { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); } .met-chart__t { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .met-check { display: flex; flex-direction: column; gap: var(--space-6); } .met-row { display: flex; gap: var(--space-4); } .met-row__b { display: flex; flex-direction: column; gap: var(--space-2); } .met-row__t { font: var(--type-b2-weight) var(--type-b2-size)/1.2 var(--font-sans); color: var(--text-primary); } .met-row__s { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .met-row__s a { color: var(--text-muted); } .cbx { width: 18px; height: 18px; flex: 0 0 18px; border-radius: var(--radius-2xs); border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; margin-top: 2px; cursor: pointer; } .cbx--on { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--white); } .cbx--on .ph { font-size: 12px; } /* A/B test variant cards */ .ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); } .ab-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .ab-card--win { border-color: var(--neutral-900); } .ab-card__h { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); } .ab-card__v { font: var(--type-s2-weight) var(--type-s2-size)/1 var(--font-sans); color: var(--text-primary); } .ab-card__b { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); } .ab-subj { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-secondary); background: var(--surface-subtle); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); } .ab-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); } .ab-stat__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .ab-stat__v { font: var(--type-h3-weight) var(--type-h3-size)/1.1 var(--font-sans); color: var(--text-primary); margin-top: var(--space-2); } /* journeys funnel (per-person progression) */ .jfunnel { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); max-width: 720px; } .jf-row { display: flex; align-items: center; gap: var(--space-5); } .jf-row__k { flex: 0 0 150px; font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-secondary); } .jf-bar { flex: 1 1 auto; height: 28px; border-radius: var(--radius-xs); background: var(--surface-hover); position: relative; overflow: hidden; } .jf-bar__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--neutral-900); border-radius: inherit; } .jf-row__v { flex: 0 0 110px; text-align: right; font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); } /* ============================================================================= KNOWLEDGE BASE / SETTINGS (sub-nav layout) — Guides 再構成 ============================================================================= */ .kb { display: flex; flex: 1 1 0; min-height: 0; } .kb__nav { flex: 0 0 240px; width: 240px; overflow-y: auto; padding: var(--space-7) var(--space-5); border-right: 0.5px solid var(--border); } /* wider list pane for the Channels settings screen (Master 2486:18956 proportions) */ .kb--wide .kb__nav { flex: 0 0 340px; width: 340px; padding: var(--space-7) var(--space-6); } .kb__main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: var(--space-8) var(--space-11); } .kb__main-inner { max-width: 760px; } .kb-group { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); padding: 0 var(--space-4); margin: var(--space-6) 0 var(--space-3); } .kb-group:first-child { margin-top: 0; } .kb-item { display: flex; align-items: center; gap: var(--space-4); height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); text-decoration: none; } .kb-item:hover { background: var(--surface-hover); } .kb-item--active { background: var(--surface-hover); color: var(--text-primary); font-weight: var(--fw-medium); } .kb-item .ph { font-size: 16px; } .kb-item--sub { padding-left: var(--space-9); } .kb-h { font: var(--type-h2-weight) var(--type-h2-size)/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: var(--space-3); } .kb-lede { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-muted); margin-bottom: var(--space-7); } .kb-fieldcard { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); } .kb-fieldcard__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); margin-bottom: var(--space-3); } .kb-fieldcard__v { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-primary); } .kb-sec-title { font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); margin: var(--space-8) 0 var(--space-4); } .kb-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* ============================================================================= CHANNELS (Email/Push/SMS/Slack/In-App) — messaging connect cards ============================================================================= */ .chan-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; max-width: 920px; } .chan-row { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6); border-top: 1px solid var(--border); } .chan-row:first-child { border-top: 0; } .chan-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-md); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .chan-ic .ph { font-size: 20px; } .chan-b { flex: 1 1 auto; min-width: 0; } .chan-t { font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .chan-d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); } /* ============================================================================= CAMPAIGN PANEL v2 (right pane) — agent info + horizontal stepper + per-step detail (counts / live CPC·CTR charts) + activity feed ============================================================================= */ .runpane--campaign { width: 420px; flex: 0 0 420px; } /* ---- agent basic info ---- */ .cp-agent { padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border); } .cp-agent__top { display: flex; align-items: center; gap: var(--space-4); } .cp-agent__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-md); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .cp-agent__ic .ph { font-size: 18px; } .cp-agent__name{ flex: 1 1 auto; min-width: 0; } .cp-agent__t { font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .cp-agent__sub { display: flex; align-items: center; gap: var(--space-3); margin-top: 3px; } .cp-agent__meta{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } /* ---- horizontal stepper (progress bar) ---- */ .cp-steps { padding: var(--space-7) var(--space-6) var(--space-6); border-bottom: 1px solid var(--border); } .cp-track { display: flex; } .cp-node { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); cursor: pointer; } .cp-node::before { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .cp-node:first-child::before { display: none; } .cp-node--done::before, .cp-node--active::before { background: var(--neutral-900); } .cp-node__dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font: var(--fw-semibold) 11px/1 var(--font-sans); } .cp-node__dot .ph { font-size: 12px; } .cp-node--done .cp-node__dot { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--white); } .cp-node--active .cp-node__dot { background: var(--surface); border-color: var(--neutral-900); color: var(--neutral-900); } /* monotone: current = outlined dark, done = filled dark */ .cp-node__lbl { font: var(--fw-regular) 10px/1.25 var(--font-sans); color: var(--text-faint); text-align: center; max-width: 58px; } .cp-node--active .cp-node__lbl { color: var(--text-primary); font-weight: var(--fw-medium); } .cp-node--sel .cp-node__dot { box-shadow: 0 0 0 3px var(--surface-hover); } .cp-node--sel .cp-node__lbl { color: var(--text-primary); font-weight: var(--fw-medium); } /* ---- per-step detail ---- */ .cp-detail { padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border); } .cp-pane { display: none; flex-direction: column; gap: var(--space-5); } .cp-pane--on { display: flex; } .cp-detail__h { display: flex; align-items: center; gap: var(--space-4); } .cp-detail__t { flex: 1 1 auto; font: var(--type-s2-weight) var(--type-s2-size)/1.3 var(--font-sans); color: var(--text-primary); } .cp-detail__d { font: var(--type-c1-weight) var(--type-c1-size)/1.55 var(--font-sans); color: var(--text-muted); } /* stat tiles (candidate / contacted / confirmed) */ .cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .cp-stat { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); text-align: center; } .cp-stat__n { font: var(--fw-semibold) 22px/1 var(--font-sans); color: var(--text-primary); } .cp-stat__k { font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-muted); margin-top: var(--space-3); } .cp-stat--lead .cp-stat__n { color: var(--text-primary); } /* monotone — emphasis via weight/fill, not color */ /* live metrics (CPC / CTR / CVR) charts */ .cp-metrics { display: flex; flex-direction: column; gap: var(--space-5); } .cp-metric { display: flex; flex-direction: column; gap: var(--space-3); } .cp-metric__r { display: flex; align-items: baseline; justify-content: space-between; } .cp-metric__k { font: var(--type-b3-weight) var(--type-b3-size)/1.2 var(--font-sans); color: var(--text-secondary); } .cp-metric__v { font: var(--fw-semibold) var(--type-b2-size)/1 var(--font-sans); color: var(--text-primary); } .cp-metric__v small { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-faint); margin-left: 4px; } .cp-bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-hover); overflow: hidden; } .cp-bar__f { height: 100%; border-radius: var(--radius-full); background: var(--neutral-800); } .cp-bar__f--good { background: var(--neutral-800); } /* monotone — no semantic color on progress bars */ .cp-bar__f--warn { background: var(--neutral-400); } /* ---- activity feed area (below the step block) ---- */ .cp-activity { padding: var(--space-6) var(--space-7) var(--space-8); } .cp-activity__h{ display: flex; align-items: center; margin-bottom: var(--space-2); } .cp-activity__h .lib-toolbar__title { flex: 1 1 auto; } /* ============================================================================= ANALYTICS REPORT CANVAS (Master 1018:24967) — report card on canvas ============================================================================= */ .show-process { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; align-self: flex-start; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .show-process .ph { font-size: 13px; } .rep-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 880px; margin: 0 auto; overflow: hidden; box-shadow: var(--shadow-1); } .rep-src { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border); } .rep-src__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-full); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .rep-src__ic .ph { font-size: 17px; } .rep-src__b { flex: 1 1 auto; min-width: 0; } .rep-src__t { font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .rep-src__d { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); margin-top: 2px; } .rep-score { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-7); } .rep-gauge { flex: 0 0 132px; width: 132px; height: 132px; position: relative; } .rep-gauge__n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .rep-gauge__v { font: var(--fw-semibold) 30px/1 var(--font-sans); color: var(--text-primary); } .rep-gauge__k { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); margin-top: var(--space-3); } .rep-mini { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .rep-tile { display: flex; align-items: center; justify-content: space-between; background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); } .rep-tile__k { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-secondary); } .rep-tile__v { font: var(--fw-semibold) var(--type-b1-size)/1 var(--font-sans); color: var(--text-primary); } .rep-tile__v--good { color: var(--success-700); } .rep-tile__v--warn { color: var(--warning-700); } .rep-cats { padding: 0 var(--space-7) var(--space-7); } .rep-cats__t { font: var(--type-s2-weight) var(--type-s2-size)/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: var(--space-5); } .rep-cat { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-4); } .rep-cat__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .rep-cat__t { font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .rep-cat__v { font: var(--fw-semibold) var(--type-b1-size)/1 var(--font-sans); color: var(--success-700); } .rep-cat__v--warn { color: var(--warning-700); } .rep-cat__d { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-muted); margin-top: var(--space-4); } .rep-cat__list { margin: var(--space-4) 0 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .rep-cat__list li { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); } /* ============================================================================= All-tasks sessions — single line, truncate overflow (no wrap) ============================================================================= */ .rail__scroll .nav-item { display: block; line-height: var(--layout-navitem-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================================= CAMPAIGN PANEL v2 — per-step detail extras (key-values + criteria checklist) ============================================================================= */ .cp-kv { display: flex; flex-direction: column; gap: var(--space-4); } .cp-kv__r { display: flex; gap: var(--space-5); align-items: baseline; } .cp-kv__k { flex: 0 0 104px; font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .cp-kv__v { flex: 1 1 auto; min-width: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.45 var(--font-sans); color: var(--text-primary); } .cp-kv__v .select { display: inline-flex; } .cp-checks { display: flex; flex-direction: column; gap: var(--space-3); } .cp-check { display: flex; align-items: flex-start; gap: var(--space-4); font: var(--type-b3-weight) var(--type-b3-size)/1.45 var(--font-sans); color: var(--text-secondary); } .cp-check .ph { font-size: 15px; color: var(--text-secondary); flex: 0 0 15px; margin-top: 2px; } .cp-check--star .ph { color: var(--text-primary); } .cp-note { display: flex; align-items: flex-start; gap: var(--space-4); background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .cp-note .ph { font-size: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--text-secondary); } /* ============================================================================= AGENT SCHEDULE — Week timeline view (Master 2480:18287, scheduled-only/clean) ============================================================================= */ .cal-week { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .cal-week__head { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--border); } .cal-week__wd { padding: var(--space-4) var(--space-3); text-align: center; border-left: 1px solid var(--border); } .cal-week__wd:first-child { border-left: 0; } .cal-week__wd small { display: block; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .cal-week__wd b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-top: var(--space-3); font: var(--type-s2-weight) var(--type-s2-size)/1 var(--font-sans); color: var(--text-secondary); } .cal-week__wd--today b { background: var(--neutral-900); color: var(--white); border-radius: var(--radius-full); } .cal-week__body { display: flex; max-height: 560px; overflow-y: auto; } .cal-week__gutter { flex: 0 0 56px; } .cal-week__hr { height: 44px; padding-right: var(--space-4); text-align: right; transform: translateY(-7px); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .cal-week__cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); } .cal-week__col { border-left: 1px solid var(--border); position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--border) 43px, var(--border) 44px); } .cwk-evt { position: absolute; left: 4px; right: 4px; border: 1px solid var(--border); border-left: 3px solid var(--neutral-700); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-3) var(--space-4); overflow: hidden; } .cwk-evt--trigger { border-left-color: var(--neutral-400); } .cwk-evt__t { font: var(--fw-medium) 11px/1.2 var(--font-sans); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cwk-evt__m { font: var(--fw-regular) 10px/1.2 var(--font-sans); color: var(--text-faint); margin-top: 1px; } /* ============================================================================= CAMPAIGN ANALYTICS on CANVAS (Customer.io-style overview) — chat-crm-analytics ============================================================================= */ .an-page { max-width: 1040px; margin: 0 auto; } .an-tabs { display: flex; align-items: center; gap: var(--space-7); border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); overflow-x: auto; } .an-tab { padding: var(--space-5) 0; flex: 0 0 auto; cursor: pointer; white-space: nowrap; font: var(--type-b2-weight) var(--type-b2-size)/1 var(--font-sans); color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .an-tab:hover { color: var(--text-secondary); } .an-tab--active { color: var(--text-primary); border-bottom-color: var(--neutral-900); } .an-edited { margin-left: auto; flex: 0 0 auto; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } .an-filter { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); } .an-sel { display: inline-flex; align-items: center; gap: var(--space-4); height: 38px; padding: 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-primary); cursor: pointer; } .an-sel .ph { color: var(--text-muted); } .ov-empty { flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); padding: 0 var(--space-6); } /* Details + Message leaderboard row */ .an-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-5); margin-top: var(--space-7); } .an-block { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-7); } .an-block__h { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); } .an-block__t { font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .an-block__meta { margin-left: auto; font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } .an-kv { display: flex; flex-direction: column; gap: var(--space-4); } .an-kv__r { display: flex; justify-content: space-between; gap: var(--space-5); } .an-kv__k { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-muted); } .an-kv__v { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .mlb { display: flex; flex-direction: column; } .mlb__row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border); } .mlb__row:first-child { border-top: 0; } .mlb__ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .mlb__ic .ph { font-size: 15px; } .mlb__b { flex: 1 1 auto; min-width: 0; } .mlb__name { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); } .mlb__sub { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); margin-top: 1px; } .mlb__stat { font: var(--fw-semibold) var(--type-b2-size)/1 var(--font-sans); color: var(--text-primary); } /* canvas footer — Agent suggestion actions (Reduce drop-off / A/B ideas / … / Ask Agent) */ .canvas-foot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border); background: var(--surface); } .canvas-foot__spacer { flex: 1 1 auto; } /* light panel for non-Overview analytics tabs */ .an-light { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-9); text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .an-light .ph { font-size: 26px; color: var(--text-faint); } /* Agent detail · Analytics tab — compact overview + "more views" links */ .an-more { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); } /* ============================================================================= CRM SETUP FLOW — step counter, file dropzone, domain auth, provider modal ============================================================================= */ /* setup step counter (STEP X/6) shown above a step's content */ .ob-stepcount { display: flex; align-items: center; gap: var(--space-4); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; } .ob-steptrack { display: flex; gap: 4px; } .ob-steptrack span { width: 18px; height: 3px; border-radius: 2px; background: var(--border-strong); } .ob-steptrack span.is-on { background: var(--neutral-900); } /* qcard file dropzone (upload variant of the question card) */ .qcard__drop { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); cursor: pointer; margin: var(--space-2) 0; } .qcard__drop:hover { background: var(--surface-subtle); } .qcard__drop .ph { font-size: 22px; color: var(--text-faint); } .qcard__drop-t { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .qcard__file { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin: var(--space-2) 0; } .qcard__file .ph { font-size: 16px; color: var(--text-secondary); } .qcard__file-n { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); } .qcard__file-s { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* domain authentication check rows (MX / SPF / DKIM / DMARC) */ .authrow { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border); } .authrow:first-child { border-top: 0; } .authrow__ic { width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-full); background: var(--success-50); display: flex; align-items: center; justify-content: center; color: var(--success-700); } .authrow__ic .ph { font-size: 13px; } .authrow__ic--wait { background: var(--warning-50); color: var(--warning-700); } .authrow__t { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3); font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .authrow__t .q { color: var(--text-faint); font-size: 14px; } /* provider connect modal content (Entri / Cloudflare) — centered */ .prov { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-4); } .prov__logo { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--neutral-900); display: flex; align-items: center; justify-content: center; color: var(--primary-300); } .prov__logo .ph { font-size: 26px; } .prov__t { font: var(--type-h3-weight) var(--type-h3-size)/1.3 var(--font-sans); color: var(--text-primary); } .prov__d { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-muted); max-width: 400px; } .prov__feats { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 400px; text-align: left; margin-top: var(--space-2); } .prov__feat { display: flex; gap: var(--space-5); } .prov__feat > .ph { font-size: 20px; flex: 0 0 20px; margin-top: 2px; color: var(--text-secondary); } .prov__feat-t { font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .prov__feat-d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .prov__links { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; margin-top: var(--space-2); } .prov__link { font: var(--fw-medium) var(--type-b3-size)/1 var(--font-sans); color: var(--primary-700); cursor: pointer; } /* domain select row (radio, pick an existing authenticated domain) */ .domsel { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); cursor: pointer; } .domsel:hover { background: var(--surface-subtle); } .domsel--active { border-color: var(--border-active); background: var(--surface-subtle); } .domsel__radio { width: 18px; height: 18px; flex: 0 0 18px; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); } .domsel--active .domsel__radio { border: 5px solid var(--neutral-900); } .domsel__b { flex: 1 1 auto; min-width: 0; } .domsel__n { font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .domsel__m { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); margin-top: 2px; } /* agent-list status tag (Domain authenticating) */ .tag--auth { background: var(--warning-50); color: var(--warning-700); display: inline-flex; align-items: center; gap: var(--space-3); } .tag--auth .ph { font-size: 11px; } /* ============================================================================= DOMAIN CONNECT QCARD — conversational domain/subdomain setup (replaces #modal-add-domain) in-chat qcard that advances through steps via [data-qflow] + [data-qgoto] ============================================================================= */ .qcard--flow { padding-bottom: var(--space-5); } .qstep__body { margin-top: var(--space-4); } .qflow-note { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin: var(--space-4) 0 0; } .qflow-note strong { color: var(--text-secondary); font-weight: var(--fw-medium); } .qflow-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); flex-wrap: wrap; } .qflow-actions .spacer { flex: 1 1 auto; } /* domain entry: input + auto-detected classification chip */ .qdomain { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); } .qdomain .input { flex: 1 1 auto; } .qclass { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .qclass .ph { font-size: 13px; color: var(--success-700); } /* registrar auto-detected row */ .qprov-row { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); } .qprov-row__ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--radius-sm); background: #f38020; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; } .qprov-row__t { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); } /* verification checklist wrapper (reuses .authrow inside) */ .qverify { margin-top: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-6); } .qmanual-step { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; } /* small section label inside a qcard (e.g. "Your connected domains") */ .qflow-label { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; margin: var(--space-4) 0 0; } /* "add another domain" affordances — grouped under the option list, NOT in the action footer (secondary "add" actions belong with the choices; the footer holds only the primary progression) */ .qdom-add { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); } /* ============================================================================= CANVAS FLOAT (Master 1018:24968) — canvas as a floating rounded panel ============================================================================= */ .pane-canvas--float { background: var(--surface); padding: var(--space-4) var(--space-8) var(--space-8) 0; } .canvas-float { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } .canvas-float .canvas-bar { flex: 0 0 56px; height: 56px; border-bottom: 1px solid var(--border); background: var(--surface); } .canvas-float .canvas-body { background: var(--surface); } /* ============================================================================= RUN RESULTS PANEL (Master 2491:21155 / 2480:16357) — faithful reproduction agent header (name + credits/mo + toggle + kebab) → section → status cards Lives inside .runpane--campaign (420px). Padding 24px sides, panel head 56px. ============================================================================= */ .rp-head { flex: 0 0 56px; height: 56px; display: flex; align-items: center; padding: 0 var(--space-6); border-bottom: 1px solid var(--border); } .rp-head__t { flex: 1 1 auto; font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); } .rp-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-7); } /* agent block */ .rp-agent { display: flex; align-items: flex-start; gap: var(--space-4); } .rp-agent__main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .rp-agent__name{ display: flex; align-items: center; gap: var(--space-4); font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } .rp-agent__name .ph { font-size: 16px; color: var(--text-secondary); } .rp-agent__meta{ font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-muted); } .rp-agent__meta b { color: var(--text-primary); font-weight: var(--fw-medium); } .rp-agent .toggle { margin-top: 2px; } /* trigger/schedule chips row under the agent */ .rp-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } /* section header ("Run results" + tools) */ .rp-sec { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-7); } .rp-sec__t { flex: 1 1 auto; font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-muted); } .rp-sec__tools { display: flex; align-items: center; gap: var(--space-2); } /* status cards */ .rp-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); } .rp-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface); } .rp-card--flag { border-color: var(--warning-500); background: var(--warning-50); } .rp-card__status { display: flex; align-items: center; gap: var(--space-3); } .rp-card__status .spacer { flex: 1 1 auto; } .rp-status { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .rp-status .ph { font-size: 14px; } .rp-status--run { color: var(--text-secondary); } .rp-status--done { color: var(--text-muted); } .rp-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.35 var(--font-sans); color: var(--text-primary); margin-top: var(--space-4); } .rp-card__d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-card__act { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); } .rp-showcanvas { font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; background: none; border: 0; padding: 0; } .rp-showcanvas:hover { color: var(--text-primary); } .rp-showcanvas .ph { font-size: 13px; } /* "See full analytics" — details affordance from the panel summary to the analytics canvas */ .rp-more { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-secondary); cursor: pointer; } .rp-more:hover { background: var(--surface-subtle); color: var(--text-primary); } .rp-more > .ph:first-child { font-size: 16px; } .rp-more > .ph:last-child { margin-left: auto; font-size: 14px; color: var(--text-faint); } /* CRM-specific parts kept inside the reproduced panel (influencer stage stepper) — strip the old self-padding / full-width dividers so they sit cleanly inside rp-body's 24px padding (Figma tonmana) */ .rp-body .cp-steps { padding: 0; border: 0; margin-top: var(--space-7); } .rp-body .cp-detail { padding: var(--space-6) 0 0; border: 0; } .rp-body .cp-activity{ padding: 0; } .rp-body .run-list { padding: 0; margin-top: var(--space-4); } /* ============================================================================ CHATBOX DOCK — setup as an expanded composer (Figma 3007:26472 / 3003:26378) The interactive Q&A card is DOCKED at the bottom (composer slot), not inline in the feed. The feed above holds the conversation history (AI + user bubbles). Reuses .qcard / .qopt / [data-qgoto] step engine. ============================================================================ */ .qdock { flex: 0 0 auto; padding: var(--space-6) var(--space-8) var(--space-8); display: flex; justify-content: center; } /* Figma 3007/3003 dock box: radius 24, 1px Neutral/300 border, 16px padding, soft shadow */ .qdock > .qcard{ width: 100%; max-width: 760px; box-shadow: var(--shadow-1); border-color: var(--border-strong); border-radius: var(--radius-3xl); padding: var(--space-6); } /* dock title/subtitle follow Figma B1/B3 (regular 16 N700 / regular 14 N400), not the inline qcard's semibold title */ .qdock .qcard__t { font: var(--type-b1-weight) var(--type-b1-size)/1.5 var(--font-sans); color: var(--text-secondary); } .qdock .qcard__sub { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); } /* dock footer: [ghost input flex-1][secondary borderless][primary dark] (Figma 3007 footer row) */ .qdock .qcard__foot { gap: var(--space-4); } .qdock .qcard__input { height: 32px; } .qdock .qcard__input::placeholder { color: var(--neutral-300); } .qdock .qcard__foot .btn { height: 32px; padding: 0 var(--space-5); font: var(--fw-medium) var(--type-b3-size)/1.5 var(--font-sans); border-color: transparent; background: transparent; color: var(--text-secondary); } .qdock .qcard__foot .btn:hover { background: var(--surface-hover); } .qdock .qcard__foot .btn--primary { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--cta-text); } .qdock .qcard__foot .btn--primary:hover { background: var(--neutral-800); } /* selectable domain/subdomain row inside a dock step (Figma 3007 list rows: ordinal + text only) */ .qrow { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); cursor: pointer; } .qrow:hover { background: var(--surface-subtle); } .qrow--active { background: var(--surface-subtle); border-radius: var(--radius-lg); } .qrow__n { flex: 0 0 16px; color: var(--text-faint); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); } .qrow__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qrow__t { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-secondary); } .qrow__m { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } /* "add a new domain / connect" affordance row under the list (ghost) */ .qadd { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font: var(--type-b4-weight) var(--type-b4-size)/1 var(--font-sans); } .qadd:hover { background: var(--surface-hover); } .qadd .ph { font-size: 16px; color: var(--text-faint); } /* IN-APP BUY DOMAIN dialog (no full external browser — a NoimosAI modal) */ .buy-search { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); } .buy-search .ph{ font-size: 16px; color: var(--text-faint); } .buy-search input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-primary); } .buy-list { display: flex; flex-direction: column; margin-top: var(--space-5); } .buy-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border); } .buy-row:last-child { border-bottom: 0; } .buy-row__n { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); } .buy-row__n .buy-tld { color: var(--text-muted); } .buy-row__badge{ font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .buy-row__price{ font: var(--type-b4-weight) var(--type-b4-size)/1 var(--font-sans); color: var(--text-secondary); margin: 0 var(--space-4); } .buy-note { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-5); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .buy-note .ph { font-size: 15px; color: var(--text-faint); margin-top: 1px; } /* DNS RECORDS card — shown PERSISTENTLY in the chat feed (not the dock) so it stays visible & copyable while the user visits their DNS provider */ .dns-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .dns-card__h { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); } .dns-card__h .ph { font-size: 16px; color: var(--text-secondary); } .dns-card__t { flex: 1 1 auto; font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .dns-card__note{ display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface-subtle); font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); } .dns-card__note .ph { font-size: 15px; color: var(--text-faint); margin-top: 1px; flex: 0 0 auto; } /* ============================================================================ OPEN TABLE (canvas) — Figma Wip 3018:37556. Generic multi-select table for the CRM segment / events canvases: card wrapper + meta bar + column header + data rows. Open-table styling = outer 1px border + a single 0.5px header underline, no inter-row rules. The checkbox column carries [data-check] (self-toggles .is-checked); a row may ALSO carry data-pick — the checkbox cell is matched first (interactions.js) so it toggles the check without switching the pick. ============================================================================ */ .otable { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .otable__meta { display: flex; align-items: baseline; min-height: 28px; } .otable__meta b { font: var(--type-c2-weight) var(--type-c2-size)/16px var(--font-sans); color: var(--text-secondary); } .otable__meta > span:not(.otable__tools) { margin-left: var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .otable__tools { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); } .otable__tools .ph { font-size: 16px; } .otable__h, .otable__row { display: grid; grid-template-columns: 44px 1fr 225px; align-items: center; } .otable__h { min-height: 40px; border-bottom: 0.5px solid var(--border); } .otable__h .otable__cb { cursor: default; } .otable__hl { padding: var(--space-4) var(--space-5); font: var(--type-c2-weight) var(--type-c2-size)/16px var(--font-sans); color: var(--text-muted); } .otable__row { padding: var(--space-4) 0; } .otable__row:hover { background: var(--surface-subtle); } .otable__row.is-picked { background: var(--surface-subtle); box-shadow: inset 2px 0 0 var(--border-active); } .otable__seg { min-width: 0; padding: 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); } .otable__name { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-secondary); } .otable__name--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .otable__desc { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .otable__num { padding: 0 var(--space-5); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); } .otable__num--empty { color: var(--text-muted); } .otable__stat { padding: 0 var(--space-5); } /* 4-column variant (no checkbox): People (Person/Started/Current step/Status) & workflow Runs (Run/Started/Result/Duration). Overrides the base 3-col grid. */ .otable--4col .otable__h, .otable--4col .otable__row { grid-template-columns: 1.6fr 132px 1.5fr 116px; } /* checkbox cell (click target = [data-check]) + the box itself */ .otable__cb { align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cbox { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; } [data-check].is-checked .cbox, .cbox--on, .cbox--indet { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--white); } /* ============================================================================ EMAIL CONTENT EDITOR (canvas) — multi-email drip, each with subject/body/design. Customer.io analog, re-toned to NoimosAI. Sequence chips → selected email editor (meta fields + rendered doc preview + block palette). Content / Preview tabs. SHARED: chat-crm-flow.html reuses .eml-meta/.eml-field-row/.eml-canvas/.eml-stage/.eml-doc*/.eml-pal* inside #modal-email-edit (full-editor-in-a-modal) — keep those class contracts stable for both screens. ============================================================================ */ .eml-seq { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); } .eml-chip { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); cursor: pointer; background: var(--surface); } .eml-chip:hover{ background: var(--surface-subtle); } .eml-chip--on { border-color: var(--border-active); background: var(--surface-subtle); } .eml-chip__n { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--neutral-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); } .eml-chip__t { font: var(--type-b4-weight) var(--type-b4-size)/1.2 var(--font-sans); color: var(--text-primary); } .eml-chip__s { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); } .eml-add { display: inline-flex; align-items: center; gap: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); cursor: pointer; color: var(--text-secondary); font: var(--type-b4-weight) var(--type-b4-size)/1 var(--font-sans); } .eml-add:hover { background: var(--surface-subtle); } .eml-meta { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); } .eml-field-row { display: flex; align-items: center; gap: var(--space-5); } .eml-field-row > label { flex: 0 0 72px; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); } .eml-canvas { display: flex; gap: var(--space-7); align-items: flex-start; } .eml-stage { flex: 1 1 auto; min-width: 0; background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; justify-content: center; } /* rendered email document */ .eml-doc { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); } .eml-doc__hero { padding: var(--space-8) var(--space-8) 0; text-align: center; } .eml-doc__logo { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--neutral-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .eml-doc__body { padding: var(--space-7) var(--space-8) var(--space-8); } .eml-blk { border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 calc(-1 * var(--space-4)); cursor: pointer; } .eml-blk:hover { border-color: var(--border); background: var(--surface-subtle); } .eml-blk--sel { border-color: var(--border-active); background: var(--surface-subtle); } .eml-doc__title{ font: var(--type-h3-weight) var(--type-h3-size)/1.3 var(--font-sans); color: var(--text-primary); } .eml-doc__p { font: var(--type-b2-weight) var(--type-b2-size)/1.6 var(--font-sans); color: var(--text-secondary); } .eml-doc__btn { display: inline-block; background: var(--neutral-900); color: #fff; border-radius: var(--radius-sm); padding: var(--space-4) var(--space-7); font: var(--type-b4-weight) var(--type-b4-size)/1 var(--font-sans); } .eml-doc__foot { border-top: 1px solid var(--border); padding: var(--space-6) var(--space-8); text-align: center; font: var(--type-c2-weight) var(--type-c2-size)/1.6 var(--font-sans); color: var(--text-faint); } /* block palette */ .eml-pal { flex: 0 0 208px; } .eml-pal__h { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-4); } .eml-pal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .eml-pal__i { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-4); cursor: grab; color: var(--text-secondary); } .eml-pal__i:hover { background: var(--surface-subtle); } .eml-pal__i .ph { font-size: 18px; } .eml-pal__i span { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); } /* email editor v2 — vertical SEQUENCE rail (configure each email + its send timing) + editor */ .eml-layout { display: flex; gap: var(--space-7); align-items: flex-start; } .eml-rail { flex: 0 0 236px; display: flex; flex-direction: column; } .eml-rail__cap { display: flex; align-items: center; gap: var(--space-3); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-4); } .eml-node { display: flex; gap: var(--space-4); align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); cursor: pointer; background: var(--surface); } .eml-node:hover{ background: var(--surface-subtle); } .eml-node--on, .eml-node.is-picked { border-color: var(--border-active); background: var(--surface-subtle); } .eml-node__n { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--neutral-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); } .eml-node__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .eml-node__t { font: var(--type-b4-weight) var(--type-b4-size)/1.2 var(--font-sans); color: var(--text-primary); } .eml-node__s { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); } .eml-node__s--ok { color: var(--success-700); } .eml-node__s--draft { color: var(--text-muted); } .eml-railtop { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-subtle); display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .eml-ehead { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); } .eml-ehead__t { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); } /* branching in the sequence rail: condition node → two indented paths (reply / no reply) */ .eml-cond { display: flex; align-items: center; gap: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0; cursor: pointer; background: var(--surface); } .eml-cond:hover{ background: var(--surface-subtle); } .eml-cond__ic { flex: 0 0 auto; color: var(--text-secondary); font-size: 15px; } .eml-cond__t { flex: 1 1 auto; min-width: 0; font: var(--type-b4-weight) var(--type-b4-size)/1.2 var(--font-sans); color: var(--text-primary); } .eml-cond__e { flex: 0 0 auto; color: var(--text-faint); font-size: 14px; } .eml-branch { margin-left: var(--space-4); padding-left: var(--space-5); border-left: 1.5px solid var(--border); display: flex; flex-direction: column; } .eml-branch__lbl { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); margin: var(--space-4) 0 var(--space-3); } .eml-branch__lbl .ph { font-size: 12px; color: var(--text-faint); } /* branch condition modal — radio on the selected condition + a two-path preview */ .opt-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); position: relative; } .opt-card--active .opt-radio { border-color: var(--neutral-900); } .opt-card--active .opt-radio::after { content: ''; position: absolute; inset: 3px; border-radius: var(--radius-full); background: var(--neutral-900); } .branch-path { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-secondary); } .branch-path .ph { color: var(--text-faint); font-size: 14px; flex: 0 0 auto; } .branch-path strong { color: var(--text-primary); font-weight: var(--fw-semibold); } .branch-path__tag { flex: 0 0 auto; font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); border-radius: var(--radius-full); padding: 3px var(--space-4); background: var(--surface-subtle); } .branch-path--yes .branch-path__tag { color: var(--success-700); } .branch-path--no .branch-path__tag { color: var(--text-muted); } /* ============================================================================ EVENT-ID tracking canvas — install code / GitHub PR (event rows now use .otable) ============================================================================ */ .codeblock { background: var(--neutral-900); border-radius: var(--radius-md); overflow: hidden; } .codeblock__bar{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgba(255,255,255,0.08); } .codeblock__name { flex: 1 1 auto; font: 12px/1 ui-monospace, monospace; color: rgba(255,255,255,0.6); } .codeblock__copy { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: rgba(255,255,255,0.85); cursor: pointer; } .codeblock pre { margin: 0; padding: var(--space-6); font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e6e6e6; overflow-x: auto; white-space: pre; } .codeblock .tok-key { color: #7cc4ff; } .codeblock .tok-str { color: #9ae6a0; } .codeblock .tok-com { color: rgba(255,255,255,0.4); } .pr-card { display: flex; align-items: flex-start; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); } .pr-card__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 18px; } .pr-card__b { flex: 1 1 auto; min-width: 0; } /* ============================================================================ FLOW BUILDER canvas — vertical flowchart (trigger → steps → branch → goal) + step detail panel. Flowchart ⇄ Free text via the canvas-bar segmented. ============================================================================ */ .flow-wrap { position: relative; height: 100%; } /* positioning context for the drawer overlay; fills the canvas body so the overlay reaches the canvas bottom */ .flow { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: var(--space-4) var(--space-7) var(--space-8); box-sizing: border-box; transition: padding-right .25s ease; } /* while a detail panel is open (any overlay visible), reserve its footprint on the right so the chart re-centers in the remaining space and no step is covered (user 2026-07-09) */ .flow-wrap:has(> .flow-overlay:not([style*="none"])) .flow { padding-right: calc(360px + 2 * var(--space-8)); } /* nodes: outline-only (no shadow — 2026-07-10 tonality pass), title N700 / meta N400, light lines */ .flow-node { width: 100%; max-width: 268px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface); cursor: pointer; display: flex; align-items: center; gap: var(--space-4); } .flow-node:hover { border-color: var(--border-strong); } .flow-node.is-picked { border-color: var(--border-active); box-shadow: 0 0 0 2px var(--border-active); } .flow-node--trigger { border-style: dashed; } .flow-node--trigger .flow-node__ic { background: var(--neutral-900); color: var(--white); } /* entry marker — monotone dark */ .flow-node--goal { background: var(--surface-subtle); } .flow-node__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-subtle); color: var(--text-secondary); } .flow-node__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .flow-node__t { font: var(--type-b4-weight) var(--type-b4-size)/1.25 var(--font-sans); color: var(--text-secondary); } .flow-node__m { font: var(--type-c2-weight) var(--type-c2-size)/1.3 var(--font-sans); color: var(--text-faint); } /* per-node count annotation on the read-only Flow chart (entered/sent/opened…). Semibold so the numbers read as live data while staying faint enough not to compete with the label. */ .flow-node__count { margin-top: var(--space-1); font: var(--fw-semibold) var(--type-c2-size)/1.3 var(--font-sans); color: var(--text-faint); } .flow-conn { width: 2px; height: 20px; background: var(--border); flex: 0 0 auto; } .flow-branch { display: flex; gap: var(--space-5); align-items: flex-start; width: 100%; max-width: 392px; } .flow-branch__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; } .flow-branch__lbl { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px var(--space-4); background: var(--surface); margin-bottom: var(--space-3); } .flow-branch .flow-node { max-width: 100%; } .flow-add { display: inline-flex; align-items: center; gap: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); cursor: pointer; color: var(--text-secondary); background: var(--surface); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .flow-add:hover{ background: var(--surface-subtle); } /* step detail — floating panel (Master 3122:17912): the chart stays full-width and fully interactive; tapping a node opens its panel at the canvas top-right (chat pane is never covered). Each [data-pickpane] IS the overlay (.flow-overlay). The overlay is pointer-transparent so tapping ANOTHER node switches the panel directly (user 2026-07-09); close = the panel's × only. Default = nothing picked → chart only. */ .flow-overlay { position: absolute; inset: calc(-1 * var(--space-8)); z-index: 20; display: block; pointer-events: none; } /* negative inset covers the canvas-body padding ring; canvas-float overflow:hidden clips it */ .flow-overlay .flow-detail { pointer-events: auto; } .flow-detail { position: absolute; top: var(--space-8); right: var(--space-8); width: 360px; max-height: calc(100% - 2 * var(--space-8)); background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 0 40px var(--black-10); /* Master 3122:17912: 0 0 40px rgba(0,0,0,.12) — nearest token */ display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .flow-detail__h{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); } .flow-detail__ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); } .flow-detail__t { flex: 1 1 auto; min-width: 0; font: var(--type-s2-weight) var(--type-s2-size)/1.2 var(--font-sans); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-detail__h .auth-badge { flex: 0 0 auto; white-space: nowrap; } .flow-detail__b { flex: 1 1 auto; min-height: 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; } /* white setting card inside the subtle pane */ .flow-fld { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .flow-fld__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* inline "create new segment / event" affordance */ .flow-create { display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-start; cursor: pointer; color: var(--primary-500); text-decoration: none; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); } .flow-create .ph { font-size: 14px; } .flow-mini { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--surface-subtle); text-align: center; } .flow-mini__title { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); } .flow-mini__body { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-3); } /* AGENT REVIEW card in chat (Figma 3003:28048) — bordered wrapper, filled sub-sections, unified 5-item schema */ .rev-card { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface); } .rev-card .section { margin: 0; } .wts-chip { display: inline-flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font: var(--type-b4-weight) var(--type-b4-size)/1 var(--font-sans); color: var(--text-primary); } .wts-chip .ph { font-size: 15px; color: var(--text-secondary); } /* ALL SETTINGS overview (#modal-flow-settings, modal--wide) — read-only per-node config summary that mirrors each canvas drawer verbatim. One .fset-group per node (header = same icon/name/status badge as the drawer) + label/value rows. */ .fset-group { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .fset-head { display: flex; align-items: center; gap: var(--space-4); } .fset-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); } .fset-name { flex: 1 1 auto; min-width: 0; font: var(--type-s2-weight) var(--type-s2-size)/1.2 var(--font-sans); color: var(--text-primary); } .fset-head .auth-badge { flex: 0 0 auto; } .fset-rows { display: flex; flex-direction: column; gap: var(--space-3); } .fset-row { display: flex; gap: var(--space-5); align-items: baseline; } .fset-k { flex: 0 0 132px; font: var(--type-c2-weight) var(--type-c2-size)/1.4 var(--font-sans); color: var(--text-muted); } .fset-v { flex: 1 1 auto; min-width: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } /* compact read-only flowchart embedded in an agent form (agents-campaign) — reuses the .flow chart markup but shrinks nodes and removes all interaction (no pick / hover / ghost add buttons). */ .flow--compact { padding: var(--space-4) 0 var(--space-5); } /* inherits .flow align-items:center so connectors line up under node centers */ .flow--compact .flow-node { padding: var(--space-4); gap: var(--space-3); cursor: default; box-shadow: none; } .flow--compact > .flow-node { max-width: 220px; } .flow--compact .flow-node:hover { border-color: var(--border); } .flow--compact .flow-node--trigger:hover { border-color: var(--border); } .flow--compact .flow-conn { height: 14px; } /* honest preview (2026-07-10): the compact chart is one click-through to the flow builder. Wrapper carries data-nav; hovering washes the chart and reveals an "Edit in flow builder" pill (span.btn — not a