4805182d0c
Planning Mode confirm prompts can now preserve a user-authored Other answer instead of forcing Yes or No. - Add an Other option with a textarea to confirm-style Planning Mode questions. - Submit confirm Other answers with the shared `_other` payload and render them in agent/history formatting. - Cover confirm Other behavior in modal flow and formatter tests. - Add a patch changeset for the published CLI package. Files changed: .changeset/fn-7369-confirm-other.md | 7 ++ .../dashboard/app/components/PlanningModeModal.css | 10 ++ .../dashboard/app/components/PlanningModeModal.tsx | 74 +++++++++--- .../PlanningModeModal.planning-flow.test.tsx | 125 +++++++++++++++++++++ .../planning-interview-formatters.test.ts | 27 +++++ packages/dashboard/src/planning.ts | 10 +- 6 files changed, 234 insertions(+), 19 deletions(-) Fusion-Task-Id: FN-7369 Fusion-Task-Lineage: 67b4d943-8ff3-4502-bca1-7e74eb95ac06 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
1874 lines
45 KiB
CSS
1874 lines
45 KiB
CSS
/* === Planning Mode Styles === */
|
|
.planning-modal-overlay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.planning-modal *,
|
|
.planning-modal {
|
|
scrollbar-color: var(--border) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.planning-modal *::-webkit-scrollbar,
|
|
.planning-modal::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.planning-modal *::-webkit-scrollbar-track,
|
|
.planning-modal::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.planning-modal *::-webkit-scrollbar-thumb,
|
|
.planning-modal::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.planning-modal *::-webkit-scrollbar-thumb:hover,
|
|
.planning-modal::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.planning-modal *::-webkit-scrollbar-corner,
|
|
.planning-modal::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.planning-modal {
|
|
width: min(95vw, 1200px);
|
|
max-width: 95vw;
|
|
min-width: 360px;
|
|
height: 85vh;
|
|
min-height: 480px;
|
|
max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px);
|
|
overflow: hidden;
|
|
resize: both;
|
|
}
|
|
|
|
/*
|
|
FNXC:PlanningMode 2026-06-21-00:00:
|
|
FN-6886 promotes Planning Mode into the main app content area. The embedded shell fills the available content pane and intentionally disables modal-only sizing/resizing so the left sidebar owns navigation and no backdrop shell remains.
|
|
*/
|
|
/*
|
|
FNXC:Planning 2026-06-23-02:00:
|
|
The embedded Planning wrapper matches Missions' shell: NO outer padding. Missions' inline shell (mission-manager--inline) has no wrapper inset — its header supplies the top/side padding (var(--space-lg) var(--space-xl)) and the split body fills edge-to-edge below. Mirroring that here removes the previous extra var(--space-lg) inset so Planning's header and two-pane body align with Missions.
|
|
*/
|
|
.planning-view {
|
|
height: 100%;
|
|
min-height: 0;
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:PlanningMode 2026-06-22-15:30:
|
|
FN-6886 full-view fix: embedded planning must fill the entire main-content pane with no awkward gaps. The flex/height chain is planning-view (flex:1, height:100%) -> planning-modal--embedded (flex:1, height:100%) -> planning-modal-body (flex:1, min-height:0). flex:1 + min-width:0 + min-height:0 on the embedded panel lets it consume all remaining width/height inside the flex .planning-view wrapper instead of collapsing to the base .modal 480px width.
|
|
*/
|
|
.planning-modal--embedded {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
max-height: none;
|
|
resize: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*
|
|
FNXC:PlanningMode 2026-06-22-00:00:
|
|
Embedded planning must blend into the main content like Command Center: no panel shadow, no border/outline, no rounded card chrome, and a transparent background so the view sits flush on the project-content surface. Higher specificity (.planning-view .planning-modal--embedded) is required to beat the base .modal shadow/border/background.
|
|
*/
|
|
.planning-view .planning-modal--embedded {
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
/*
|
|
FNXC:Planning 2026-06-23-04:45:
|
|
The base .modal sets max-height:80vh; that wins over the equal-specificity .planning-modal--embedded { max-height:none } by source order, so the embedded panel was capped at 80vh (≈576px) and stopped ~49px short of the .planning-view bottom (measured: embedded bottom 635 vs view bottom 684). Re-assert max-height:none here at higher specificity (.planning-view .planning-modal--embedded) so the embedded shell — and therefore the sidebar list+footer and the detail pane below it — fills the full main-content height with no bottom gap, in both the initial (no-session) and active-session states.
|
|
*/
|
|
max-height: none;
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-03:00:
|
|
The embedded planning header must be a visual SIBLING of MissionManager's inline header (mission-manager__header--inline). Matched values, copied exactly from MissionManager.css:
|
|
- background: var(--surface), padding: var(--space-lg) var(--space-xl) (= 16px 24px)
|
|
- no bottom divider — app headers are seamless against their content while preserving shared surface background and spacing.
|
|
- title: 1.125rem / 600 / var(--text) via the h3 rule below (font-weight/color come from the base .modal-header h3).
|
|
- icon: var(--todo) tint + flex-shrink:0, identical to .mission-manager__header-icon (the shared icon-triage tint was a different brown, so it is overridden here).
|
|
- gap icon<->title: var(--space-sm) (= 8px), identical to .mission-manager__header-title. Scoped to the embedded planning header so the shared .detail-title-row (TaskDetailModal) keeps its own 10px gap.
|
|
*/
|
|
/* FNXC:ViewHeader 2026-06-23-04:15: Pin canonical --view-header-min-height (≈61px border-box) + box-sizing + vertical centering so embedded Planning's header matches the shared ViewHeader/Missions height exactly. */
|
|
.planning-modal--embedded .modal-header--embedded {
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
min-height: var(--view-header-min-height);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
background: var(--surface);
|
|
border-bottom: none;
|
|
}
|
|
|
|
.planning-modal--embedded .modal-header--embedded .detail-title-row {
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-modal--embedded .modal-header--embedded .detail-title-row > svg {
|
|
color: var(--todo);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-modal--embedded .modal-header--embedded h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.planning-modal .modal-header {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-modal .text-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.planning-modal-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.planning-modal-body--split {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.planning-detail {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-01:15:
|
|
Embedded Planning is a real two-pane view mirroring Missions (mission-manager__split): the left sidebar is a full-height flex column (list scrolls, footer pinned to bottom) and the right detail pane fills the remaining width AND height. The sidebar surface/border/width treatment matches mission-manager__sidebar — var(--surface) background, a single border-right divider — so the two views read consistently. The flex chain planning-view -> planning-modal--embedded -> planning-modal-body keeps the whole layout filling the main-content pane to the bottom.
|
|
*/
|
|
.planning-sidebar {
|
|
width: calc(var(--space-lg) * 18.75);
|
|
flex-shrink: 0;
|
|
border-right: var(--btn-border-width) solid var(--border);
|
|
background: var(--surface);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-02:00:
|
|
Sidebar resize handle — identical treatment to MissionManager's mission-manager__sidebar-resize-handle: a thin (var(--space-sm)) col-resize strip whose ::before center bar tints with var(--todo) on hover/active, plus a focus ring for keyboard resize. touch-action:none keeps the pointer drag from scrolling on trackpads.
|
|
*/
|
|
.planning-sidebar-resize-handle {
|
|
position: relative;
|
|
width: var(--space-sm);
|
|
flex-shrink: 0;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
touch-action: none;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.planning-sidebar-resize-handle::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: var(--space-xs);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.planning-sidebar-resize-handle:hover::before,
|
|
.planning-sidebar-resize-handle:active::before {
|
|
background: color-mix(in srgb, var(--todo) 30%, transparent);
|
|
}
|
|
|
|
.planning-sidebar-resize-handle:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-02:00:
|
|
Footer matches MissionManager's mission-manager__sidebar-footer EXACTLY: padding var(--space-md), a single border-top divider (var(--btn-border-width) solid var(--border)), gap var(--space-sm), centered. Missions has no separate footer band styling beyond the centered CTA, so we mirror that — no extra bottom padding/margin and no empty space. The column direction is the only deviation, required because Planning carries the show/hide-archived link beneath the CTA (Missions has a single child); align-items stays stretch so the full-width CTA fills the footer like Missions'.
|
|
*/
|
|
.planning-sidebar-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
border-top: var(--btn-border-width) solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-sidebar-toggle-archived-link {
|
|
align-self: center;
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast), box-shadow var(--transition-fast);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.planning-sidebar-toggle-archived-link:hover {
|
|
color: var(--text);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.planning-sidebar-toggle-archived-link:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-02:00:
|
|
The New session button must look EXACTLY like Missions' primary sidebar create button (mission-manager__sidebar-cta with btn btn-primary): same full-width fill, same min-height (calc(--space-lg * 2 + --space-xs)), centered icon+label gap, inherited font-size. The earlier .active "inset ring" outline is REMOVED — Missions' CTA has no ring in any state, so the no-session-selected (.active) state now relies solely on the empty/initial detail pane to signal the new-session view, keeping the two buttons visually identical.
|
|
*/
|
|
.planning-sidebar-new {
|
|
width: 100%;
|
|
min-height: calc(var(--space-lg) * 2 + var(--space-xs));
|
|
justify-content: center;
|
|
gap: var(--space-sm);
|
|
font-size: inherit;
|
|
}
|
|
|
|
.planning-sidebar-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.planning-sidebar-empty {
|
|
padding: var(--space-lg) var(--space-md);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.planning-sidebar-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-radius: var(--radius-md);
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.planning-sidebar-item:hover {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.planning-sidebar-item.selected {
|
|
background: color-mix(in srgb, var(--todo) 18%, transparent);
|
|
}
|
|
|
|
.planning-sidebar-item.pending-delete {
|
|
background: color-mix(in srgb, var(--color-error) 15%, transparent);
|
|
}
|
|
|
|
.planning-sidebar-item-button {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.planning-sidebar-item-button:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.planning-sidebar-item-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.planning-sidebar-item-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
line-height: 1.35;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.planning-sidebar-item-meta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.planning-sidebar-status-icon {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.planning-sidebar-status-generating { color: var(--todo); }
|
|
.planning-sidebar-status-awaiting { color: var(--triage); }
|
|
.planning-sidebar-status-complete { color: var(--color-success); }
|
|
.planning-sidebar-status-error { color: var(--color-error); }
|
|
|
|
.planning-sidebar-item-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.planning-sidebar-item-delete,
|
|
.planning-sidebar-item-archive {
|
|
flex-shrink: 0;
|
|
width: calc(var(--space-lg) + var(--space-xl));
|
|
min-width: calc(var(--space-lg) + var(--space-xl));
|
|
height: calc(var(--space-lg) + var(--space-xl));
|
|
min-height: calc(var(--space-lg) + var(--space-xl));
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.planning-sidebar-item:hover .planning-sidebar-item-delete,
|
|
.planning-sidebar-item:focus-within .planning-sidebar-item-delete,
|
|
.planning-sidebar-item:hover .planning-sidebar-item-archive,
|
|
.planning-sidebar-item:focus-within .planning-sidebar-item-archive {
|
|
display: flex;
|
|
}
|
|
|
|
.planning-sidebar-item-delete:hover {
|
|
color: var(--color-error);
|
|
background: color-mix(in srgb, var(--color-error) 15%, transparent);
|
|
}
|
|
|
|
.planning-sidebar-item-archive:hover {
|
|
color: var(--todo);
|
|
background: color-mix(in srgb, var(--todo) 15%, transparent);
|
|
}
|
|
|
|
.planning-sidebar-item-delete:focus-visible,
|
|
.planning-sidebar-item-archive:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.planning-sidebar-item.archived .planning-sidebar-item-button {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.planning-sidebar-confirm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.planning-mobile-back {
|
|
/* Visible only on mobile (see media query below). On desktop the sidebar
|
|
is always visible alongside the detail pane, so a back button is never
|
|
needed. */
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
padding: var(--space-xs);
|
|
border-radius: var(--radius-sm);
|
|
transition: background var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.planning-mobile-back:hover {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.planning-mobile-back:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
/* Mobile: stack — only one pane visible at a time.
|
|
FNXC:PlanningMode 2026-06-22-15:30 covers both the landscape phone case
|
|
(max-height: 480px exceeds 768px wide) and portrait. */
|
|
@media (max-width: 768px), (max-height: 480px) {
|
|
/* Full-screen sheet — drop overlay padding so the modal fills the
|
|
viewport instead of being pushed below it, and disable resize since
|
|
touchscreen users can't drag the corner grip anyway.
|
|
FNXC:PlanningMode 2026-06-22-15:30: scope the viewport-takeover rules to
|
|
the NON-embedded (dialog) presentation only. The embedded panel
|
|
(.planning-modal--embedded) must NOT grab 100vw/100dvh — it lives inside
|
|
the main-content pane, so forcing full-viewport sizing made it overflow
|
|
the content area on mobile. The :not(.planning-modal--embedded) guard
|
|
keeps the modal full-screen sheet intact while letting the embedded view
|
|
fill only its own pane (handled by the .planning-view rules below). */
|
|
.modal-overlay:has(.planning-modal) {
|
|
padding-top: 0;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
.modal.planning-modal:not(.planning-modal--embedded) {
|
|
width: 100vw;
|
|
min-width: 0;
|
|
max-width: 100vw;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
max-height: 100dvh;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
resize: none;
|
|
}
|
|
.modal.planning-modal:not(.planning-modal--embedded)[style*="--keyboard-overlap"] {
|
|
height: var(--vv-height, 100dvh);
|
|
max-height: var(--vv-height, 100dvh);
|
|
transform: translateY(var(--vv-offset-top, 0px));
|
|
will-change: transform;
|
|
}
|
|
/* FNXC:PlanningMode 2026-06-22-15:30: on mobile the embedded view should use
|
|
the full width of the (already-narrow) content pane — drop the outer
|
|
padding so the session list and detail panes are edge-to-edge, and keep
|
|
the height/flex chain filling the pane. */
|
|
.planning-view {
|
|
padding: var(--space-sm);
|
|
}
|
|
/*
|
|
FNXC:PlanningMode 2026-06-25-13:10:
|
|
The global mobile modal rule in styles.css (`@media (max-width:768px) .modal:not(.confirm-dialog), .modal-lg, ...`) forces every full-screen modal to height/max-height:100dvh. The embedded Planning shell carries `.modal-lg`, so it matched that rule and was stretched to the full 100dvh viewport even though its parent `.planning-view` is bounded between the header and the bottom nav (≈688px). Because `.modal:not(.confirm-dialog)` resolves to specificity (0,2,0) — equal to `.planning-view .planning-modal--embedded` — the global rule won on source order, so the embedded shell overflowed past the viewport, `.planning-view { overflow:hidden }` clipped the footer action buttons, and the summary/question panes could not scroll on mobile. Qualify with `.planning-view.open` (0,3,0) and re-pin max-height so the embedded view stays inside its bounded pane and the inner flex scroll chain works.
|
|
*/
|
|
.planning-view.open .planning-modal--embedded {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.planning-modal-body--split {
|
|
flex-direction: column;
|
|
}
|
|
.planning-sidebar {
|
|
width: 100%;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
/*
|
|
FNXC:PlanningMode 2026-06-30-00:00:
|
|
Mobile list view must keep the New session CTA reachable like Missions' bottom sidebar action. Bound the sidebar to the Planning pane and let only the session list scroll above the fixed footer; detail view still hides the sidebar through the existing show-detail rule.
|
|
*/
|
|
.planning-modal-body--show-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.planning-modal-body--show-list .planning-sidebar {
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
}
|
|
.planning-modal-body--show-list .planning-sidebar-list {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
.planning-modal-body--show-list .planning-sidebar-footer {
|
|
flex-shrink: 0;
|
|
}
|
|
.planning-modal-body--show-detail .planning-sidebar {
|
|
display: none;
|
|
}
|
|
.planning-modal-body--show-list .planning-detail {
|
|
display: none;
|
|
}
|
|
/* Show back button on mobile whenever it's rendered (the React component
|
|
only renders it when `mobileShowDetail` is true). */
|
|
.planning-mobile-back {
|
|
display: inline-flex;
|
|
}
|
|
/* Always keep action buttons visible on mobile (no hover) */
|
|
.planning-sidebar-item-delete,
|
|
.planning-sidebar-item-archive {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.planning-error {
|
|
flex-shrink: 0;
|
|
margin: 24px 24px 0;
|
|
}
|
|
|
|
.planning-view-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xl);
|
|
padding: var(--space-xl);
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-04:00:
|
|
The footer is a light action row, NOT a heavy bordered band. Drop the border-top divider and trim the padding so the Start-Planning button flows with the content above instead of reading as a large bottom footer.
|
|
*/
|
|
.planning-view-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: var(--space-sm) var(--space-xl) var(--space-md);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:Planning 2026-06-23-03:00:
|
|
An empty footer must NOT reserve vertical space or paint its divider band. When .planning-view-footer renders with no children (e.g. the initial / no-active-session state once its action is absent), collapse it to zero so the embedded Planning view shows no dead footer band. Footers WITH content (the Start-Planning button in initial, and the .planning-actions composer in an active session) are untouched — :empty only matches when there are no element/text children.
|
|
*/
|
|
.planning-view-footer:empty {
|
|
display: none;
|
|
padding: 0;
|
|
border-top: none;
|
|
}
|
|
|
|
.planning-advanced-disclosure {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.planning-advanced-disclosure .onboarding-disclosure-content {
|
|
padding-inline-start: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.planning-advanced-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-advanced-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.planning-advanced-blurb {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.planning-model-select-group {
|
|
max-width: 100%;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-model-select-group .form-label {
|
|
font-size: calc(var(--space-sm) + var(--space-xs) + var(--space-xs) * 0.25);
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
}
|
|
|
|
.planning-depth-selector {
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-depth-controls-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.planning-depth-chip-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-depth-chip.btn {
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
min-height: calc(var(--space-lg) + var(--space-xl));
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.planning-depth-chip.btn:hover {
|
|
border-color: var(--todo);
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.planning-depth-chip-active.btn,
|
|
.planning-depth-chip-active.btn:hover {
|
|
background: var(--todo);
|
|
border-color: var(--todo);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.planning-depth-question-count {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
align-items: flex-start;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.planning-depth-question-input.input {
|
|
width: calc(var(--space-2xl) * 2 + var(--space-xs));
|
|
min-height: calc(var(--space-lg) + var(--space-xl));
|
|
padding: var(--space-xs) var(--space-sm);
|
|
}
|
|
|
|
.session-lock-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: color-mix(in srgb, var(--bg) 55%, transparent);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 20%;
|
|
z-index: 10;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.session-lock-banner {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.session-lock-take-control {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Initial View */
|
|
.planning-initial {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
text-align: center;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.planning-intro {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.planning-intro h4 {
|
|
font-size: 20px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.planning-intro p {
|
|
max-width: 480px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.planning-icon {
|
|
color: var(--triage);
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
.planning-description {
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
max-width: 480px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.planning-textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
padding: var(--space-md);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
max-height: calc(var(--space-2xl) * 20);
|
|
overflow-y: auto;
|
|
outline: none;
|
|
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
|
|
}
|
|
|
|
.planning-textarea:focus {
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.planning-description-preview {
|
|
width: 100%;
|
|
min-height: calc(var(--space-md) * 7.5);
|
|
max-height: calc(var(--space-2xl) * 20);
|
|
padding: var(--space-md);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.planning-description-preview.expanded {
|
|
min-height: calc(var(--space-md) * 12.5);
|
|
}
|
|
|
|
.planning-comment-section {
|
|
margin-top: var(--space-lg);
|
|
}
|
|
|
|
.planning-other-answer {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.planning-other-answer .planning-textarea {
|
|
min-height: calc(var(--space-md) * 5);
|
|
}
|
|
|
|
.planning-comment-label {
|
|
display: block;
|
|
margin-bottom: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.planning-comment-section .planning-textarea {
|
|
min-height: calc(var(--space-md) * 5);
|
|
}
|
|
|
|
.planning-char-count {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.planning-initial .form-group,
|
|
.planning-summary-form .form-group {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.planning-initial .form-group,
|
|
.planning-examples {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.planning-initial .form-group {
|
|
text-align: left;
|
|
}
|
|
|
|
.planning-examples {
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-examples-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-sm);
|
|
display: block;
|
|
}
|
|
|
|
.planning-example-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
justify-content: center;
|
|
}
|
|
|
|
.planning-example-chip {
|
|
padding: var(--space-sm) calc(var(--space-md) + var(--space-xs) * 0.5);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
line-height: 1.4;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
color var(--transition-fast),
|
|
transform var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.planning-example-chip:hover {
|
|
background: var(--card-hover);
|
|
border-color: var(--todo);
|
|
color: var(--text);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.planning-start-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-initial .planning-view-footer {
|
|
width: 100%;
|
|
max-width: 568px;
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Question View */
|
|
.planning-question {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.planning-progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-progress-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-progress-step {
|
|
height: 4px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--border);
|
|
transition: background-color var(--transition-fast);
|
|
}
|
|
|
|
.planning-progress-step.active {
|
|
background: var(--todo);
|
|
}
|
|
|
|
.planning-progress-text {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.planning-question-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.planning-question-scroll {
|
|
gap: 16px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.planning-question-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 16px 20px 20px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.planning-question-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.planning-question-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.planning-question-desc {
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Options */
|
|
.planning-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.planning-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
padding: 14px 16px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
box-shadow var(--transition-fast),
|
|
transform var(--transition-fast);
|
|
}
|
|
|
|
.planning-option--radio,
|
|
.planning-option--checkbox {
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-option:hover {
|
|
background: var(--card-hover);
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.planning-option input[type="radio"],
|
|
.planning-option input[type="checkbox"] {
|
|
margin-top: 2px;
|
|
accent-color: var(--todo);
|
|
}
|
|
|
|
.planning-option-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.planning-option-label {
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
.planning-option-desc {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.planning-radio-group,
|
|
.planning-checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-confirm-answer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-confirm-group {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.planning-confirm-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-sm);
|
|
flex: 1;
|
|
padding: var(--space-md) var(--space-xl);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.planning-confirm-btn.selected {
|
|
background: var(--todo);
|
|
color: var(--bg);
|
|
border-color: var(--todo);
|
|
}
|
|
|
|
/* Actions */
|
|
.planning-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: var(--space-lg) var(--space-xl) var(--space-xl);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-actions .btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.planning-actions-primary {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.planning-back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
/* Summary View */
|
|
.planning-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.planning-summary-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.planning-summary-icon {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.planning-summary-scroll {
|
|
gap: 20px;
|
|
}
|
|
|
|
.planning-summary-qa-disclosure {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.planning-summary-qa-disclosure .onboarding-disclosure-content {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
.planning-summary-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xl);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.planning-summary-form .form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-lg);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.planning-summary-meta-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.planning-summary-meta-row .form-group {
|
|
margin: 0;
|
|
}
|
|
|
|
.planning-summary-form .form-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-summary-description-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-summary-description-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.planning-expand-btn {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--todo);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.planning-expand-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.planning-size-label {
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Taller description textarea in subtask breakdown */
|
|
.planning-summary-form .form-group textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* Compact size dropdown */
|
|
.planning-size-select {
|
|
width: 100%;
|
|
padding: calc(var(--space-sm) + var(--space-xs) * 0.5) calc(var(--space-xl) + var(--space-md)) calc(var(--space-sm) + var(--space-xs) * 0.5) var(--space-md);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(var(--space-sm) + var(--space-xs) * 0.5) center;
|
|
}
|
|
|
|
.planning-size-select:focus {
|
|
outline: none;
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.planning-size-select:hover:not(:focus) {
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.planning-deps-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
gap: var(--space-sm);
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.planning-dep-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
box-shadow var(--transition-fast),
|
|
transform var(--transition-fast);
|
|
}
|
|
|
|
.planning-dep-chip:hover {
|
|
background: var(--card-hover);
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.planning-dep-chip.selected {
|
|
background: var(--card-hover);
|
|
border-color: var(--todo);
|
|
box-shadow: inset 0 0 0 1px var(--todo);
|
|
}
|
|
|
|
.planning-dep-chip input[type="checkbox"] {
|
|
accent-color: var(--todo);
|
|
}
|
|
|
|
.planning-dep-id {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.planning-dep-title {
|
|
color: var(--text);
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.planning-deliverables {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.planning-deliverables li {
|
|
position: relative;
|
|
padding-left: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.planning-deliverables li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--todo);
|
|
}
|
|
|
|
.planning-summary-actions {
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
}
|
|
|
|
.planning-summary-actions-right {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
FNXC:PlanningMode 2026-06-25-09:20:
|
|
Tablet embedded Planning keeps the desktop two-pane shell, so the summary footer must absorb the narrower detail pane instead of relying on the mobile full-width stack. Allow the three labeled actions to wrap inside the pane while preserving the desktop left/right grouping when space is available.
|
|
*/
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.planning-summary-actions {
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.planning-summary-actions-right {
|
|
flex: 1 1 auto;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.planning-summary-actions .btn {
|
|
flex-shrink: 1;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* Loading State */
|
|
.planning-loading {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-lg);
|
|
padding: var(--space-xl);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* AI Thinking Output Display */
|
|
.planning-thinking-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.planning-thinking-toggle {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast);
|
|
}
|
|
|
|
.planning-thinking-toggle:hover {
|
|
background: var(--card-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.planning-thinking-output {
|
|
width: 100%;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-lg);
|
|
text-align: left;
|
|
}
|
|
|
|
.planning-thinking-output pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
}
|
|
|
|
.planning-loading-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-md);
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.planning-stop-btn {
|
|
border-color: var(--color-error);
|
|
color: var(--color-error);
|
|
background: color-mix(in srgb, var(--color-error) 12%, transparent);
|
|
}
|
|
|
|
.planning-stop-btn:hover {
|
|
border-color: var(--color-error-dark);
|
|
color: var(--color-error-dark);
|
|
background: color-mix(in srgb, var(--color-error) 18%, transparent);
|
|
}
|
|
|
|
.planning-stop-btn {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.planning-elapsed {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Subtask Drag-and-Drop Styles */
|
|
.subtask-item {
|
|
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
|
}
|
|
|
|
.subtask-item-dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.subtask-item-drop-target {
|
|
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
|
border-color: var(--todo);
|
|
}
|
|
|
|
.subtask-item-drop-before {
|
|
position: relative;
|
|
}
|
|
|
|
.subtask-item-drop-before::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--todo);
|
|
z-index: 1;
|
|
}
|
|
|
|
.subtask-item-drop-after {
|
|
position: relative;
|
|
}
|
|
|
|
.subtask-item-drop-after::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--todo);
|
|
z-index: 1;
|
|
}
|
|
|
|
.subtask-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.subtask-drag-handle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
cursor: grab;
|
|
color: var(--text-dim);
|
|
transition: color var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.subtask-drag-handle:hover {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.subtask-item-dragging .subtask-drag-handle {
|
|
cursor: grabbing;
|
|
color: var(--todo);
|
|
}
|
|
|
|
.subtask-item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.subtask-item-actions .btn-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.subtask-item-actions .btn-icon:hover:not(:disabled) {
|
|
background: var(--card-hover);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
}
|
|
|
|
.subtask-item-actions .btn-icon:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
/* FNXC:PlanningMode 2026-06-22-15:30: this legacy full-viewport sheet sizing
|
|
is for the dialog presentation only. The :not(.planning-modal--embedded)
|
|
guard prevents the embedded view from being yanked to 100vw/100dvh, which
|
|
would overflow the main-content pane it lives in on mobile. */
|
|
.planning-modal:not(.planning-modal--embedded) {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.planning-error {
|
|
margin: var(--space-lg) var(--space-lg) 0;
|
|
}
|
|
|
|
.planning-view-scroll {
|
|
padding: var(--space-lg);
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.planning-question-scroll {
|
|
padding-top: var(--space-sm);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.planning-view-footer,
|
|
.planning-actions {
|
|
padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.planning-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.planning-actions .btn,
|
|
.planning-start-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.planning-actions-primary {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.planning-summary-actions-right {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-summary-meta-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.planning-summary-description-header {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.planning-summary-description-actions {
|
|
margin-left: 0;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.planning-example-chips {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.planning-example-chip {
|
|
width: 100%;
|
|
text-align: left;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.planning-depth-selector {
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-depth-controls-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.planning-depth-chip-group {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.planning-depth-question-count {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.planning-deps-list {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.planning-dep-chip {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.planning-dep-title {
|
|
max-width: none;
|
|
}
|
|
|
|
/* Planning thinking output mobile adjustments */
|
|
.planning-thinking-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.planning-thinking-output {
|
|
max-height: 200px;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.planning-thinking-output pre {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.planning-loading-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.planning-loading-actions .btn {
|
|
width: 100%;
|
|
min-height: 36px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Prevent mobile zoom on focus for planning text inputs (16px minimum) */
|
|
.planning-textarea {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.planning-comment-section .planning-textarea,
|
|
.planning-other-answer .planning-textarea {
|
|
min-height: calc(var(--space-md) * 5);
|
|
}
|
|
|
|
/* Planning options compact on mobile */
|
|
.planning-option {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Subtask breakdown: touch-friendly drag handles with padding */
|
|
.subtask-drag-handle {
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Subtask action buttons: mobile-friendly sizing */
|
|
.subtask-item-actions .btn-icon {
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
}
|
|
|
|
/* Subtask items: prevent overflow */
|
|
.subtask-item-header {
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
/* Dependency chips: touch-friendly */
|
|
.planning-dep-chip {
|
|
min-height: 36px;
|
|
}
|
|
|
|
/* Size select: prevent iOS zoom */
|
|
.planning-size-select {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Progress bar compact on narrow screens */
|
|
.planning-progress-bar {
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.planning-progress-text {
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Confirm buttons: mobile-friendly sizing */
|
|
.planning-confirm-group {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.planning-confirm-btn {
|
|
min-height: 36px;
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
/* Model selection: rows don't overflow */
|
|
.planning-modal-body .inline-create-model-row {
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.planning-modal-body .model-badge {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Model selection: prevent iOS zoom on select elements */
|
|
.planning-modal-body select {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* === Planning & Breakdown Modal — Inline Style Replacements === */
|
|
|
|
/* Icon color utilities */
|
|
.icon-triage {
|
|
color: var(--triage);
|
|
}
|
|
.icon-triage-lg {
|
|
color: var(--triage);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
.icon-todo {
|
|
color: var(--todo);
|
|
}
|
|
.icon-success {
|
|
color: var(--color-success);
|
|
}
|
|
.icon-text-secondary {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-milestone {
|
|
color: var(--icon-milestone);
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-slice {
|
|
color: var(--icon-slice);
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-feature {
|
|
color: var(--icon-feature);
|
|
margin-top: var(--space-xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Icon margin utilities */
|
|
.icon-mr-4 {
|
|
margin-right: var(--space-xs);
|
|
}
|
|
.icon-mr-6 {
|
|
margin-right: calc(var(--space-sm) - var(--space-xs) * 0.5);
|
|
}
|
|
.icon-mr-8 {
|
|
margin-right: var(--space-sm);
|
|
}
|
|
.icon-ml-4 {
|
|
margin-left: var(--space-xs);
|
|
}
|
|
.icon-ml-6 {
|
|
margin-left: calc(var(--space-sm) - var(--space-xs) * 0.5);
|
|
}
|
|
|
|
/* Error panel */
|
|
.ai-error-panel {
|
|
border: 1px solid var(--color-error);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
padding: calc(var(--space-md) + var(--space-xs) * 0.5);
|
|
display: grid;
|
|
gap: calc(var(--space-md) - var(--space-xs) * 0.5);
|
|
}
|
|
.ai-error-icon {
|
|
font-size: calc(var(--space-lg) + var(--space-xs));
|
|
}
|
|
.ai-error-actions {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
/* Text link button */
|
|
.text-link-btn {
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Form hint error variant */
|
|
.form-hint-error {
|
|
margin-top: calc(var(--space-sm) - var(--space-xs) * 0.5);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/* Text muted small */
|
|
.text-muted-sm {
|
|
margin-left: var(--space-sm);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
}
|
|
|
|
/* Model selector spacing */
|
|
.model-select-row--left {
|
|
margin-right: auto;
|
|
min-width: min(100%, 320px);
|
|
max-width: 420px;
|
|
text-align: left;
|
|
}
|
|
.model-selector-current--spaced {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
/* Subtask header override */
|
|
.subtask-item-header--between {
|
|
justify-content: space-between;
|
|
}
|