/* In-app assistant — floating chat bubble overlaid on the project view.
   Position:fixed (not absolute inside #tablePanel) because tablePanel has
   overflow:hidden and would clip the panel. JS keeps `right` in sync with
   the detail panel's width so the bubble stays left of the resize divider. */

#helpAssistant {
  position: fixed;
  right: 16px;            /* JS overrides on init + on detail-panel resize */
  bottom: 36px;           /* clears the status bar (~22 px) plus a margin */
  z-index: 40;
  pointer-events: none;   /* re-enabled on the children that want clicks */
}

#helpAssistant > * { pointer-events: auto; }

/* Floating action button (FAB). Visible only when the panel is collapsed. */
.helpFab {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  font-size: 20px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms;
}
.helpFab:hover { background: var(--accent-hover); }

/* Panel — visible only when expanded. */
#helpPanel {
  position: relative;   /* anchor for the feedback overlay */
  width: 380px;
  height: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.help-collapsed #helpPanel { display: none; }
.help-collapsed .helpFab { display: flex; }
#helpAssistant:not(.help-collapsed) .helpFab { display: none; }

#helpHeader {
  display: flex; align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.helpTitle {
  flex: 1;
  color: var(--text-bright);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.helpIconBtn {
  background: transparent; border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.helpIconBtn:hover { color: var(--text-bright); background: rgba(255,255,255,0.05); }

#helpMessages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.helpMsg {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* body has user-select:none globally; re-enable for chat content so
     answers can be copy/pasted. */
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
#helpInput { user-select: text; -webkit-user-select: text; }
.helpMsg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.helpMsg.assistant {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.helpMsg.system {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-style: italic;
}
.helpMsg code {
  background: rgba(255,255,255,0.07);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 12px;
}
.helpMsg pre {
  background: rgba(0,0,0,0.4);
  padding: 8px;
  border-radius: 4px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}
.helpMsg pre code { background: transparent; padding: 0; }
.helpMsg strong { color: var(--text-bright); }

.helpMsg.pending {
  align-self: flex-start;
  color: var(--text-dim);
  font-style: italic;
  border: 1px dashed var(--border);
  background: transparent;
}

#helpForm {
  display: flex; gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
#helpInput {
  flex: 1;
  resize: none;
  background: var(--bg-input);
  color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: 13px/1.4 inherit;
  outline: none;
}
#helpInput:focus { border-color: var(--accent); }
#helpSend {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
#helpSend:hover:not(:disabled) { background: var(--accent-hover); }
#helpSend:disabled { opacity: 0.5; cursor: default; }

/* "New chat" — wipes conversation. Sits just left of Send so users can
   reset without hunting in the header. Subdued styling so it doesn't
   compete visually with the primary Send button. */
.helpClearBtn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.helpClearBtn:hover { color: var(--text-bright); border-color: var(--text-dim); }
.helpClearBtn:disabled { opacity: 0.4; cursor: default; }

/* Feedback / bug-report / feature-request form. Overlays the messages
   area (absolute, full-fill) when active; click envelope icon to open. */
.helpFeedbackPanel {
  position: absolute;
  top: 33px;            /* clear the helpHeader (~33 px) */
  left: 0; right: 0; bottom: 0;
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  gap: 8px;
  font-size: 12px;
  z-index: 5;
}
.helpFeedbackHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}
.helpFeedbackTypes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
}
.helpFeedbackTypes label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#helpFeedbackText {
  flex: 1;
  resize: none;
  background: var(--bg-input);
  color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: 13px/1.4 inherit;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
#helpFeedbackText:focus { border-color: var(--accent); }
.helpFeedbackEmail {
  background: var(--bg-input);
  color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: 12px/1.4 inherit;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.helpFeedbackEmail:focus { border-color: var(--accent); }
.helpFeedbackInclude {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.helpFeedbackActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.helpFbCancel,
.helpFbSend {
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.helpFbCancel {
  background: transparent;
  color: var(--text-dim);
}
.helpFbCancel:hover { color: var(--text-bright); }
.helpFbSend {
  background: var(--accent);
  color: #fff;
}
.helpFbSend:hover:not(:disabled) { background: var(--accent-hover); }
.helpFbSend:disabled { opacity: 0.5; cursor: default; }
.helpFeedbackStatus {
  font-size: 11px;
  min-height: 14px;
}
.helpFeedbackStatus.error { color: #f88; }
.helpFeedbackStatus.success { color: #6c6; }

/* ---- Tool-loop affordances ---------------------------------------------- */
/* When the assistant is calling a read tool, swap the bubble's text for a
   small inline indicator so the user sees something is happening. */
.helpToolRunning {
  color: var(--text-dim);
  font-style: italic;
  font-size: 11px;
}
.helpToolRunning code {
  font-style: normal;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ---- Plan confirm card -------------------------------------------------- */
/* Replaces a streaming text bubble when /help/ask emits a plan SSE event.
   Per-action table + Confirm/Cancel; no work runs until Confirm. */
.helpMsg.plan {
  background: var(--bg-raised);
  padding: 10px 12px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
}
.helpPlanIntent {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.helpPlanActions {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 8px;
}
.helpPlanActions thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
}
.helpPlanActions tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-bright);
  vertical-align: top;
  word-break: break-word;
}
.helpPlanActions tbody tr:last-child td { border-bottom: none; }
.helpPlanToolCell code {
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.helpPlanButtons {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}
.helpPlanConfirm,
.helpPlanCancel {
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.helpPlanCancel {
  background: transparent;
  color: var(--text-dim);
}
.helpPlanCancel:hover:not(:disabled) { color: var(--text-bright); }
.helpPlanConfirm {
  background: var(--accent);
  color: #fff;
}
.helpPlanConfirm:hover:not(:disabled) { background: var(--accent-hover); }
.helpPlanConfirm:disabled,
.helpPlanCancel:disabled { opacity: 0.5; cursor: default; }
.helpPlanStatus {
  font-size: 11px;
  color: var(--text-dim);
  min-height: 14px;
  margin-top: 6px;
}
.helpPlanStatus.ok { color: #6c6; }
.helpPlanStatus.error { color: #f88; }

/* Code-tier confirm card — replaces the action table with a fixed-font code block.
   Looks intentionally raw; the user is reading Python before clicking Confirm. */
.helpPlanCard-code {
  /* Slightly wider feel for code; helps long lines. Inside the bubble cap. */
}
.helpPlanCode {
  margin: 0 0 6px 0;
}
.helpPlanCode pre {
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  max-height: 320px;
  overflow-y: auto;
}
.helpPlanCode code {
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-bright);
}
.helpPlanCodeNote {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Progress lines in the confirm card after Confirm — replaces the old
   "queued, see Jobs panel" static text with live per-action status. */
.helpPlanStatus.progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.helpPlanProgressLine {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-bright);
}
.helpPlanProgressLine code {
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  padding: 0 4px;
  border-radius: 3px;
}
.helpPlanProgressLine.queued .helpPlanProgressIcon { color: var(--text-dim); }
.helpPlanProgressLine.running .helpPlanProgressIcon { color: var(--accent); }
.helpPlanProgressLine.done .helpPlanProgressIcon { color: #6c6; }
.helpPlanProgressLine.failed .helpPlanProgressIcon { color: #f88; }
.helpPlanProgressLine.cancelled .helpPlanProgressIcon { color: var(--text-dim); }
.helpPlanProgressLine.failed .helpPlanProgressText { color: #f88; word-break: break-word; }
.helpPlanProgressIcon {
  font-weight: bold;
  flex: 0 0 auto;
}
.helpPlanProgressText {
  flex: 1;
  word-break: break-word;
}
.helpPlanProgressSummary {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  font-style: italic;
}

/* "Ask assistant to fix" button on each failed line of the polled
   progress display. Same shape as helpPlanCancel but smaller, and
   only appears when an action is in the failed state. */
.helpPlanFixBtn {
  margin-left: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-bright);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  flex: 0 0 auto;
}
.helpPlanFixBtn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
}
.helpPlanFixBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* sdk.report() output rendered under a 'done' line in the polled
   progress display. Plain text (often a small table or list) — kept
   monospaced so columns align. */
.helpPlanReport {
  margin: 4px 0 4px 18px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid #6c6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-bright);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}