/* ============================================================================= 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; } /* ---------- Interaction state ladder (P8 craft) --------------------------- */ /* 基本操作部品に「押下 / キーボードフォーカス / 無効 / スピナー」を一律付与。 hover は各部品側で定義済。focus-visible はキーボード操作時のみリング表示(マウスclickでは出さない)。 */ .btn, .icon-btn, .list-row, .menu__item, .tab, .segmented__item, .toggle { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; } /* pressed（hoverより一段濃く＝触覚的フィードバック） */ .btn:active { background: var(--neutral-200); } .btn--primary:active { background: var(--black); } .btn--ghost:active { background: var(--neutral-200); } .icon-btn:active { background: var(--neutral-200); } .list-row:active, .menu__item:active { background: var(--neutral-200); } /* keyboard focus ring（focus-visible = キーボード時のみ。マウスでは出ない） */ .btn:focus-visible, .icon-btn:focus-visible, .list-row:focus-visible, .tab:focus-visible, .menu__item:focus-visible, .toggle:focus-visible, .opt-card:focus-visible, .choice-card:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* disabled */ .btn:disabled, .btn[disabled], .btn.is-disabled, .icon-btn:disabled, .icon-btn[disabled], .icon-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } /* spinner — @keyframes を新設し、これまで未定義で回っていなかった .ws-spin を実際に回す + 汎用 .spin */ @keyframes ph-spin { to { transform: rotate(360deg); } } .ws-spin, .spin, .is-spinning { display: inline-block; animation: ph-spin .8s linear infinite; } /* ---------- 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(--neutral-100); 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: var(--shadow-2); 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); } /* plus menu (composer "+") — opens downward, overflows below the chat box (Figma 1704:16854) */ .menu--plus { min-width: 230px; border-radius: var(--radius-lg); border: 0.5px solid var(--border); box-shadow: 0 0 40px rgba(0,0,0,.12); padding: var(--space-2); gap: var(--space-2); max-height: 310px; overflow: hidden; } .menu--plus::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); pointer-events: none; } /* approval picker menu (composer "Ask for approval") — opens downward, right-aligned (Figma 3169:18578) */ .menu--approval { padding: var(--space-4); border-radius: var(--radius-lg); border: 0.5px solid var(--border); box-shadow: 0 0 20px rgba(0,0,0,.12); gap: var(--space-2); min-width: 260px; } .approval-pick { height: auto; padding: var(--space-4); border-radius: var(--radius-sm); gap: var(--space-4); align-items: center; } .approval-pick.is-selected { background: var(--surface-hover); } .approval-pick__txt { display: flex; flex-direction: column; gap: 6px; } .approval-pick__t { font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-primary); } .approval-pick__d { 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: var(--shadow-3); 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; } /* 本体が column flex なので、子が既定の flex-shrink:1 で潰れて「スクロールできないのに中身が切れる」 状態になる（2026-07-31 Inbox 詳細で発生）。子は縮めず、はみ出させて body 側でスクロールさせる。 */ .modal__body > * { flex-shrink: 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 基底に統合済み */ /* record peek — right-anchored full-height slide-over opened from a Page list (CRM person peek). The list stays behind it; interactions.js exempts .modal--drawer from single-dialog auto-close so the Email / Journey sub-modals stack above it. */ .modal--drawer { align-items: stretch; justify-content: flex-end; padding: 0; } .modal--drawer .modal { width: 640px; max-width: 100%; max-height: none; border-radius: 0; border-left: 1px solid var(--border); box-shadow: -8px 0 24px var(--black-10); } /* directional edge — reads as a raised sheet, not a centered modal */ .modal--drawer .modal__head { border-bottom: 1px solid var(--border); } /* cap the panel header with a hairline (drawer/panel grammar) */ /* ============================================================================= 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幅で折り返し。 ============================================================================= */ /* ---- Generic reveal utility (rule YY: [data-reveal] in interactions.js) - */ .is-hidden { display: none !important; } /* ---- 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); } /* 2026-08-18: aligned to the canonical AI Chat Input (Wip 4562:63566, user: 全画面共通) — 1px border-strong, Radius/24, 16px padding, 16px text→toolbar gap. Width follows the container (760 on the home, pane width in chat panes); the shell geometry is what is shared. */ .composer-box{ border: 1px solid var(--border-strong); border-radius: var(--radius-3xl); background: var(--surface); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .composer-box textarea { border: 0; outline: 0; background: transparent; resize: none; width: 100%; font: var(--type-b1-weight) var(--type-b1-size)/24px 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: visible; } .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; } .home-input__right{ display: flex; align-items: center; gap: var(--space-3); } /* integrations count button (N50 soft) */ .btn--soft { background: var(--surface-subtle); } /* borderless button (composer "Ask for approval" etc.) */ .btn--bare { border-color: transparent; background: transparent; } .btn__divider{ width: 1px; height: 16px; background: var(--border); } /* home composer bar override: integrations count button sits on White/100, not soft N50 (chat-home only) */ .home-input__left .btn--soft { background: var(--white); } /* mic ⇄ send toggle: send hidden until the composer has text. 2026-08-18: generalised to .composer-box too (canonical composer, 全画面共通) — the marker classes keep their home-* names; they mark the toggle roles, not the screen. */ .home-send { display: none; } .home-input.has-text .home-mic, .composer-box.has-text .home-mic { display: none; } .home-input.has-text .home-send, .composer-box.has-text .home-send { display: inline-flex; } .composer-box .home-send { display: none; } /* quick action chips row — single line, overflow hidden (chat-home only) */ .home-actions{ width: 100%; display: flex; gap: var(--space-4); flex-wrap: nowrap; overflow: hidden; justify-content: center; } .home-actions .btn { font-weight: var(--fw-regular); flex: 0 0 auto; } /* ============================================================================= 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 ============================================================================= */ /* 下は 80px 取る。24px だと最後のカードが画面下端にくっついてスクロールし切った感が出ない （2026-07-30 指摘）。Pages 系すべてに効く共有クラス。 */ .page-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-8) var(--layout-pane-pad) var(--space-14); } .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); } .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) */ .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: var(--secondary-green); } .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); } /* Master 2307:27846 の正順: タイトル+メタ(上) → プレビュー(下) */ .lib-card__thumb { height: 140px; background: var(--surface-subtle); border-top: 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: var(--secondary-green); } /* type別プレビュー archetypes (Master 2307:27846 のミニモックに準拠。data-viz色=chart palette) */ .thumb--chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; width: 100%; justify-content: center; } .thumb--chart span { width: 10px; border-radius: 2px; background: var(--secondary-indigo); } .thumb--chart span:nth-child(even) { background: var(--secondary-green); } .thumb--report { width: 100%; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-2); } .thumb--report .gauge { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--secondary-green) 0 82%, var(--border) 82% 100%); } .thumb--report .gauge::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-subtle); } .thumb--report .gauge b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-sans); color: var(--text-primary); } .thumb--report .rows { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .thumb--report .rows span { display: block; height: 6px; border-radius: 3px; background: var(--secondary-indigo); } .thumb--report .rows span:nth-child(2) { width: 72%; } .thumb--report .rows span:nth-child(3) { width: 88%; background: var(--secondary-green); } .thumb--report .rows span:nth-child(4) { width: 60%; } .thumb--analysis { width: 100%; display: flex; flex-direction: column; gap: 6px; font: var(--type-c1-weight) 9px/1.5 var(--font-sans); color: var(--text-faint); } .thumb--analysis .q { color: var(--text-muted); } .thumb--analysis .rec { padding: 4px 6px; border-radius: var(--radius-sm); background: var(--success-50); color: var(--success-700); } .thumb--analysis .rec .ph { font-size: 10px; } /* ============================================================================= 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; display: inline-flex; align-items: center; justify-content: center; } /* 汎用の選択状態。[data-check] は .is-checked を付けるだけなので、見た目はここで一般形として定義する （2026-07-28: 以前は .modal--settings .set-memtable 配下にしか無く、Companies 一覧の一括選択で 「押しても見た目が変わらない」状態になっていた = 共有レイヤーの欠落）。 */ .checkbox.is-checked { background: var(--neutral-900); border-color: var(--neutral-900); } /* 16×16 の checkbox（qcard の複数選択。2026-07-31 指示: トグルではなく checkbox で 16px） */ .checkbox--sm { width: 16px; height: 16px; flex: 0 0 16px; border-width: 1px; } .checkbox--sm.is-checked::after { width: 4px; height: 8px; margin-top: -1px; border-width: 0 1.5px 1.5px 0; } /* checkbox を使う選択リスト（旧 .chan-list のトグル版と同じ骨格で、説明文なし） */ .pick-list { border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-4); } .pick-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-top: 0.5px solid var(--border); cursor: pointer; } .pick-row:first-child { border-top: 0; } .pick-row:hover { background: var(--surface-hover); } .pick-row__t { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } .pick-row__x { margin-left: auto; } .checkbox.is-some { background: var(--neutral-900); border-color: var(--neutral-900); } /* 部分選択（Master 4:3140 のヘッダー checkbox）は横棒 */ .checkbox.is-some::after { content: ""; width: 8px; height: 0; border-top: 1.5px solid var(--white); } .checkbox.is-checked::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .crm-table tbody tr:has(.checkbox.is-checked) { background: var(--surface-hover); } /* 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); min-width: 0; overflow-x: auto; scrollbar-width: none; } .crm-toolbar::-webkit-scrollbar { display: none; } .crm-toolbar > * { flex-shrink: 0; } .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); } /* align-items: flex-start — without it a .bdg / .pill stacked over a sub-label stretches to the full column width and reads as a bar instead of a badge. */ .crm-cell-stack { display: flex; flex-direction: column; align-items: flex-start; 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); } /* 4列までは横スクロールさせず等分で収める（Done が画面外に消えるのを防ぐ） */ .kanban--fit { overflow-x: visible; } .kanban--fit .kanban__col { flex: 1 1 0; width: auto; min-width: 0; } .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); } /* 商談は**ステージの上で**足す（Attio と同じ）。表の右上の「New deal」だと、 どのステージに入るのかを別途選ばせることになる。 */ .kanban__add { flex: 0 0 24px; width: 24px; height: 24px; } .kanban__add .ph { font-size: 14px; } .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); 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; } /* 金額と担当を1行に並べる（Attio のカードと同じ）。担当だけの行を別に持つと、 カードが4段になって列に入るカード数が減る。 */ .deal-card__f { display: flex; align-items: center; gap: var(--space-4); } .deal-card__f .deal-card__amt { margin-right: auto; } .deal-card__f .avatar { margin-left: var(--space-2); } .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); } /* ---- Message list（Inbox）— Attio の Emails 形式 ----------------------------- Inbox は「行を列ごとに見比べる」面ではなく「1行を1通として読んで返すか決める」面なので テーブルをやめてリストにする（2026-07-30 ユーザー確定）。テーブルだと件名を固定幅の列に 押し込むため本文が切れ、隣の列と詰まる。People / Campaigns / Deals は比較する面なので表のまま。 構造は既存 .assoc-card（先頭アイコン + 本文(タイトル/メタ) + 末尾バッジ）をそのまま使い、 枠を外して区切り線だけにするモディファイアを足した。新規の行コンポーネントは作らない。 */ .assoc-card--row { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0; padding: var(--space-6) var(--space-5); align-items: flex-start; } .assoc-card--row:last-of-type { border-bottom: 0; } .assoc-card--row .assoc-card__b { display: flex; flex-direction: column; gap: 2px; } .assoc-card--row .assoc-card__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); } /* 末尾メタは行をまたいで縦に揃える必要があるので固定幅スロットにする */ .mlist__cb { flex: 0 0 16px; margin-top: var(--space-1); } /* 3行構成なので checkbox とアバターは1行目の高さに合わせて少し下げる */ .assoc-card--row .avatar { margin-top: var(--space-1); } .mlist__who { color: var(--text-muted); } .mlist__prev { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-muted); } .mlist__prev .ph { font-size: 12px; color: var(--text-faint); flex: 0 0 12px; margin-top: 2px; } .mlist__topic { flex: 0 0 104px; } .mlist__status { flex: 0 0 120px; } .mlist__t { flex: 0 0 40px; text-align: right; font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); } .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-b3-weight) var(--type-b3-size)/1.4 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-faint); } .met-row__s a { color: var(--text-muted); } .cbx { width: 16px; height: 16px; flex: 0 0 16px; 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: 10px; } /* 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); } /* Working session Fix — compact action row. Global channel cards stay unchanged. */ .wsx-fix .chan-row { gap: var(--space-5); padding: var(--space-5) var(--space-6); } .wsx-fix .chan-ic { width: 32px; height: 32px; flex-basis: 32px; border-radius: var(--radius-sm); } .wsx-fix .chan-ic .ph { font-size: 16px; } .wsx-fix .chan-ic img { width: 16px; height: 16px; } .wsx-fix .chan-t { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); } .wsx-fix .chan-d { font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); margin-top: var(--space-1); } /* ============================================================================= 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; } /* Session rows carry a leading icon (Wip 4383:28121). The row is display:block for the ellipsis, so flex gap does not apply — the spacing has to sit on the icon. */ .rail__scroll .nav-item .ph { font-size: 16px; color: var(--text-faint); margin-right: var(--space-4); vertical-align: -2px; } /* ============================================================================= 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); } /* ── Execution contract (2026-08-15) ─────────────────────────────────────── The list that answers "what happens tomorrow" before anything is committed: what is read, who is in and out, where it writes, whether it leaves the product, first run, caps, how to stop. A plain label/value list rather than prose, because every one of these is a fact the user has to check quickly. Deliberately not .kv-row — that one is a row of inputs, this is read-only. */ .rp-kvl { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); } .rp-kvl__r { display: flex; align-items: flex-start; gap: var(--space-5); } .rp-kvl__k { flex: 0 0 96px; font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-faint); } .rp-kvl__v { flex: 1 1 auto; min-width: 0; font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-secondary); } .rp-kvl__v b { color: var(--text-primary); font-weight: var(--fw-semibold); } /* Demo-only category switcher. Marked as demo in the markup it appears in — the real product picks one branch from onboarding state and never shows this. align-self keeps it chrome-sized instead of stretching across the column. */ .demo-switch { align-self: flex-start; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-subtle); } .demo-switch__l{ font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); } /* Badge that separates "we were told this" from "we read this", without colour. The accent rule rules out --info (cyan) and --ok (green), and the difference between an assumption and a verified read is the single most important thing on the proposal panel — so it is carried by an outline instead of a fill. */ .bdg--outline { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); } /* Sample-data marker. Any number in a prototype that would come from a real integration carries this, so a reviewer never mistakes staged precision for evidence. Deliberately plain — it is a disclaimer, not a feature. */ .mockmark { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); } .mockmark .ph { font-size: 12px; } /* .rp-card__d clamps to 2 lines, which is right for a card list and wrong for contract prose. This modifier opts out instead of an inline override. */ .rp-card__d--full { display: block; -webkit-line-clamp: none; overflow: visible; } /* One column instead of two. A canvas beside a 440px chat pane is ~666px wide, so splitting it leaves ~310px per side — narrower than the 420px panel this layout replaced, and the taller column stretches the shorter one into a void. Content that has to be READ (a drafted email, a contract with long values) gets the full width; only genuinely short pairs should use the 2-up form. */ .an-cols--stack { grid-template-columns: 1fr; } /* ── First-agent proposal cards (2026-08-18, spec: first-agent-3patterns.md) ── Exactly three personalized starting points, shown as .lib-card instances. The grid is its own class (not .lib-grid) because the count is fixed at 3: auto-fill would rewrap and make the triad read as an open-ended catalog. */ .prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } /* Tiny tag pair on a proposal card: one reason, one expected metric. Research found no product that tags first-run recommendations this way — the pair is our invention, so it stays as small as legibility allows and never grows a third member. Outline only: filled badges are reserved for "actually read". */ .bdg--xs { height: 20px; padding: 0 var(--space-3); gap: var(--space-2); } .bdg--xs .ph { font-size: 12px; } .lib-card__tags { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* The three thumbs preview three DIFFERENT deliverables (a list of places / one weekday held every week / a ranking move) so no treatment repeats between cards. One canonical block: the same three cards appear in patterns 1, 2 and 3, and screen-local copies of this art were already caught drifting once (2026-08-18 — two builders, two implementations of the same card). Hooks are data attributes so every class name stays inside the DS set. */ .prop-grid .lib-card__tags { flex-direction: column; align-items: flex-start; gap: var(--space-2); } [data-art] { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); } [data-art-cap] { display: flex; align-items: center; gap: var(--space-3); font: var(--type-c1-weight) 10px/1 var(--font-sans); color: var(--text-faint); } [data-art-cap] .ph { font-size: 12px; } [data-art-row] { display: flex; align-items: center; gap: var(--space-4); } [data-art-dot] { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--radius-2xs); } [data-art-bar] { height: 5px; border-radius: var(--radius-full); background: var(--neutral-300); } /* Named rows with real values (2026-08-18 craft pass): the flat-bar-only thumbs graded as "unfinished component copy-pasted app-wide" — and the Figma P3 reference cards do carry real mini-content. Names left, tabular figure right; values match the refine screen so the story stays one story. */ [data-art-name] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-c1-weight) 9px/1.4 var(--font-sans); color: var(--text-muted); } [data-art-num] { flex: 0 0 auto; font: var(--fw-medium) 9px/1.4 var(--font-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; } [data-art-days] { display: flex; gap: var(--space-3); } [data-art-days] span { flex: 1 1 0; text-align: center; font: var(--type-c1-weight) 8px/1 var(--font-sans); color: var(--text-faint); } [data-art-draft] { display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); padding: var(--space-4); } [data-art-draft] [data-art-bar] { background: var(--neutral-200); } [data-art-week] { display: flex; align-items: center; gap: var(--space-3); } [data-art-week] span { flex: 1 1 0; height: 18px; border-radius: var(--radius-2xs); background: var(--neutral-200); } [data-art-week] span[data-on] { background: var(--neutral-800); } [data-art-week][data-next] span { height: 13px; background: var(--neutral-100); } [data-art-week][data-next] span[data-on] { background: var(--neutral-400); } [data-art-rank] { display: flex; align-items: baseline; gap: var(--space-5); font-variant-numeric: tabular-nums; } [data-art-rank] .ph { font-size: 14px; color: var(--secondary-indigo); } [data-art-from] { font: var(--fw-regular) 16px/1 var(--font-mono); color: var(--text-faint); } [data-art-to] { font: var(--fw-semibold) 28px/1 var(--font-mono); color: var(--text-primary); } /* Hover-enlarged preview (pattern 2). CSS-only: the card owns a hidden .prop-pop that appears above it on hover — popover depth per the elevation scale (--shadow-2 = popover), never the modal shadow. Pointer-events stay off so the pop can never trap the click that belongs to the card underneath it. .lib-card clips its children (overflow:hidden), which would also clip a preview that has to escape upward — so the pop variant opts out of the clip and the thumb carries the bottom radius the clip used to provide. */ .lib-card--pop { position: relative; overflow: visible; } .lib-card--pop .lib-card__thumb { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .prop-pop__thumb [data-art-cap] { font-size: var(--type-c1-size); } .prop-pop__thumb [data-art-bar] { height: 6px; } .prop-pop__thumb [data-art-dot] { width: 10px; height: 10px; } .prop-pop__thumb [data-art-week] span { height: 24px; } .prop-pop__thumb [data-art-week][data-next] span { height: 17px; } .prop-pop__thumb [data-art-rank] .ph { font-size: 18px; } .prop-pop__thumb [data-art-from] { font-size: 20px; } .prop-pop__thumb [data-art-to] { font-size: 34px; } .lib-card--pop .prop-pop { display: none; position: absolute; left: 50%; top: auto; bottom: calc(-1 * var(--space-4)); transform: translateX(-50%); width: 340px; z-index: 50; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-6); } /* Bottom-anchored just below the card's own bottom edge, growing UPWARD (2026-08-18 round 3: cards sit low on every surface, so downward growth hit the viewport floor and shifted layout; the user asked for 上に表示・下の余白は保つ). shadow-3 so the overlap reads as a layer. pointer-events ON: the pop carries the "Use this template" CTA — the common template-gallery preview anatomy. */ .prop-pop__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); height: 36px; border-radius: var(--radius-sm); background: var(--cta-bg); color: var(--cta-text); cursor: pointer; font: var(--fw-medium) var(--type-b4-size)/1 var(--font-sans); } .prop-pop__cta .ph { font-size: 14px; } /* 2026-08-18 round 3: the pop may escape the canvas (user: キャンバスの外まで超えて拡大していい), so the 280px canvas-shrink is gone — the canvas screen opts its panes out of clipping with a screen-scoped style instead (same technique as chat-first-agent-confirm's node widening). */ /* Slim pre-composer prompt bar (2026-08-18): one question + one action + dismiss, sitting just above the composer (the Claude Code "Want to be notified?" shape). Used by the saved screen's destination ask. Not an alert — no tint, reads as part of the composer group. */ .notify-bar { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); } .notify-bar__t { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); } /* P2 home keeps the composer at the SAME height as P1 (user: チャットボックスの位置は変えずに). Without this the taller block (cards vs chips) re-centres and lifts the composer ~110px. 50vh - 28(half header) - 130(half of P1's block) reproduces P1's centring at any height. */ .home--anchored { justify-content: flex-start; } .home--anchored .home__block { margin-top: clamp(48px, calc(50vh - 158px), 400px); } /* The freshly-saved agent session sliding into All tasks (route-scoped via .app.fa-saved). Hidden everywhere else. Two beats: slide-in, then a brief surface highlight that decays — enough to say "this just got created" without a toast. */ /* .rail__scroll .nav-item sets display:block at higher specificity, so the hide/show pair must match it (caught on-screen 2026-08-18: the row leaked into every route). */ .rail__scroll .nav-item--agentnew { display: none; } .app.fa-saved .rail__scroll .nav-item--agentnew { display: block; overflow: hidden; animation: agentnew-in .45s cubic-bezier(.2,.7,.2,1) .5s both, agentnew-glow 2.4s ease-out .5s both; } @keyframes agentnew-in { from { opacity: 0; max-height: 0; transform: translateY(-6px); } 60% { opacity: 1; max-height: 32px; } to { opacity: 1; max-height: 32px; transform: translateY(0); } } @keyframes agentnew-glow { 0% { background: var(--surface-hover); } 55% { background: var(--surface-hover); } 100% { background: transparent; } } /* Top-anchored, growing DOWN over the card itself (a zoom-in-place), never upward over the composer — QA 2026-08-18: the bottom-anchored version occluded the composer controls above the grid. */ .lib-card--pop:hover .prop-pop { display: block; } .prop-pop__thumb { height: 150px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-6); margin-top: var(--space-5); } .prop-pop__d { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); color: var(--text-secondary); margin-top: var(--space-4); } /* 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: 0 0 16px rgba(0,0,0,.06); border-color: var(--neutral-300); border-radius: 24px; padding: var(--space-6); display: flex; flex-direction: column; 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(--neutral-700); } .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); min-height: 40px; border-radius: var(--radius-sm); cursor: pointer; } .qrow:hover { background: var(--surface-subtle); } .qrow--active { background: var(--neutral-50); border-radius: 12px; } .qrow__n { flex: 0 0 18px; color: var(--neutral-400); 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.5 var(--font-sans); color: var(--neutral-700); } .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); } /* 数値。tok-key/str/com と同じくシンタックス配色は DS トークンの外側 （暗い面の上の色でトークンに対応するものが無い。既存3色と揃えた1色のみ追加） */ .codeblock .tok-num { color: #f5c37e; } /* 表の行の下に開くコード（Segments の Code 列 — Figma Wip 3555:22949）。 セグメントは「保存した絞り込み」なので、**何で数えているのか**を行の上で開けるようにする。 */ .dt-coderow > td { padding: 0 var(--space-6) var(--space-6); } .dt-coderow .codeblock{ margin-top: 0; } .dt-coderow:hover { background: transparent; } .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 */ /* white canvas + dot grid (Figma Wip 3120:4466) — the unified flowchart surface */ background-color: var(--surface); background-image: radial-gradient(var(--neutral-200) 1.5px, transparent 1.5px); background-size: 40px 40px; background-position: 20px 20px; } /* zoom control (Figma 3120:4466 bottom-right) — static mock */ .flow-zoom { position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: 5; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-full); background: var(--neutral-100); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .flow-zoom__btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); cursor: pointer; color: var(--text-muted); } .flow-zoom__btn:hover { background: var(--surface); } .flow-zoom__btn .ph { font-size: 12px; } .flow-zoom__v { min-width: 32px; text-align: center; } .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 node live-count chip — replaces the plain count line (2026-07-12) */ .flow-count { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; margin-top: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--surface-subtle); font: var(--type-c2-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .flow-count .ph { font-size: 11px; color: var(--text-muted); } .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; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); margin-left: calc(-1 * var(--space-3)); font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); } .flow-create:hover { background: var(--surface-hover); } .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