/* THE XPLORE AI COACH: a column on the right of the project (coach-panel.js).
 *
 * The rail is placed over the shell grid and the grid gives up its width
 * with padding, so the canvas and the simulator keep their own rules and
 * simply have less room while the coach is open. Folded, it becomes a small
 * card at the bottom right and gives the room back. */

#workspace-view { --coach-width: clamp(300px, 26vw, 380px); }
#workspace-view.xp-shell[data-coach="open"] { padding-right: calc(var(--coach-width) + 12px); }

/* Two ids, so it outranks the shell's catch-all that puts every child in
 * columns two to the end: a positioned child given a grid column is placed
 * inside that column, not against the view. */
#workspace-view.xp-shell > aside#coach-rail {
  grid-column: auto;
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: var(--coach-width);
  min-height: 0;
  overflow: hidden;
  color: var(--xp-text);
  background: var(--xp-surface);
  border: 1px solid var(--xp-border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgb(39 28 20 / 0.08);
}
#workspace-view.xp-shell > aside#coach-rail[hidden] { display: none; }
#workspace-view.xp-shell > aside#coach-rail[data-minimised="true"] { top: auto; }
.coach-rail[data-minimised="true"] .coach-body,
.coach-rail[data-minimised="true"] .coach-bottom { display: none; }

.coach-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 16px 14px 12px 18px;
}
.coach-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.coach-title svg { flex: none; width: 26px; height: 26px; color: var(--xp-orange); }
.coach-window { display: flex; gap: 2px; }
.coach-window button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--xp-radius-sm);
  background: none;
  color: var(--xp-text);
  cursor: pointer;
}
.coach-window button:hover { background: var(--xp-warm); }
.coach-window svg { width: 20px; height: 20px; }
.coach-context-slot { grid-column: 1 / -1; }
.coach-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--xp-muted);
}
.coach-context i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--xp-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xp-success) 22%, transparent);
}
.coach-context[data-state="hints"] i { background: #f5a623; box-shadow: 0 0 0 3px color-mix(in srgb, #f5a623 24%, transparent); }
.coach-context[data-state="off"] i { background: var(--xp-muted); box-shadow: none; }

.coach-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 4px 18px 18px;
  overflow-y: auto;
}
.coach-project {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-md);
  background: color-mix(in srgb, var(--xp-warm) 50%, var(--xp-surface));
}
.coach-project svg { flex: none; width: 26px; height: 26px; }
.coach-project div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-project strong,
.coach-project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-project strong { font-size: 0.95rem; }
.coach-project span { font-size: 0.82rem; color: var(--xp-muted); }
.coach-help { margin: 6px 0 0; font-size: 1.12rem; font-weight: 800; }

.coach-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coach-action {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-md);
  background: var(--xp-surface);
  color: var(--xp-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.coach-action svg { flex: none; width: 22px; height: 22px; }
.coach-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--xp-orange) 45%, var(--xp-border));
  background: color-mix(in srgb, var(--xp-orange) 5%, var(--xp-surface));
}
.coach-action:disabled { opacity: 0.45; cursor: not-allowed; }

.coach-rail .coach-policy,
.coach-rail .coach-status,
.coach-rail .coach-empty { margin: 0; font-size: 0.85rem; color: var(--xp-muted); }
.coach-rail .coach-policy { color: var(--xp-orange-strong); font-weight: 600; }

.coach-thread { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.coach-you { align-self: flex-end; max-width: 85%; }
.coach-you p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--xp-warm); font-size: 0.9rem; }
.coach-said { display: flex; flex-direction: column; gap: 12px; }
.coach-bubble {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--xp-orange) 16%, var(--xp-border));
  border-radius: var(--xp-radius-md);
  background: color-mix(in srgb, var(--xp-orange) 7%, var(--xp-surface));
}
.coach-bubble-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 0.78rem; color: var(--xp-muted); }
.coach-bubble-head strong { font-size: 1rem; white-space: nowrap; color: color-mix(in srgb, var(--xp-orange) 80%, var(--xp-text)); }
.coach-bubble-head time { margin-left: auto; white-space: nowrap; }
.coach-bubble-meta { margin: 8px 0 0; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--xp-muted); }
.coach-rail .coach-answer-text { margin: 0; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }
.coach-rail .coach-caution { margin: 8px 0 0; font-size: 0.8rem; color: var(--xp-orange-strong); }
.coach-bubble details { margin-top: 8px; font-size: 0.85rem; }

.coach-check {
  padding: 12px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--xp-orange) 45%, var(--xp-border));
  border-radius: var(--xp-radius-md);
  background: var(--xp-surface);
}
.coach-check-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-weight: 700;
  color: color-mix(in srgb, var(--xp-orange) 80%, var(--xp-text));
}
.coach-check-title svg { width: 18px; height: 18px; color: var(--xp-orange); stroke-width: 2.4; }
.coach-check-question { margin: 0 0 12px 26px; font-size: 0.9rem; }
.coach-check-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coach-option {
  min-height: 42px;
  border: 1px solid var(--xp-border);
  border-radius: 10px;
  background: var(--xp-surface);
  color: var(--xp-text);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.coach-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--xp-orange) 45%, var(--xp-border)); }
.coach-option[data-state="right"] { border-color: var(--xp-success); background: color-mix(in srgb, var(--xp-success) 12%, var(--xp-surface)); }
.coach-option[data-state="wrong"] { border-color: #e5484d; background: color-mix(in srgb, #e5484d 10%, var(--xp-surface)); }
.coach-option:disabled { cursor: default; }
.coach-check-said { margin: 10px 0 0; font-size: 0.85rem; }

.coach-tools { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; }
.coach-tool {
  min-height: 46px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-md);
  background: var(--xp-surface);
  color: var(--xp-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.coach-tool:hover { background: var(--xp-warm); }
.coach-try { border-color: transparent; background: var(--xp-orange); color: #fff; }
.coach-try:hover { background: color-mix(in srgb, var(--xp-orange) 88%, #000); }

.coach-bottom { padding: 14px 18px 10px; border-top: 1px solid var(--xp-border); }
.coach-ask-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--xp-border);
  border-radius: 14px;
  background: var(--xp-surface);
}
.coach-ask-form:focus-within { border-color: var(--xp-orange); }
.coach-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--xp-text);
  font: inherit;
  font-size: 0.92rem;
}
.coach-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--xp-orange);
  color: #fff;
  cursor: pointer;
}
.coach-send svg { width: 18px; height: 18px; stroke-width: 2.4; }
.coach-send:disabled { opacity: 0.45; cursor: not-allowed; }
.coach-foot { margin: 8px 0 0; font-size: 0.78rem; color: var(--xp-muted); text-align: center; }

.coach-action:focus-visible,
.coach-option:focus-visible,
.coach-tool:focus-visible,
.coach-send:focus-visible,
.coach-window button:focus-visible { outline: 2px solid var(--xp-orange); outline-offset: 2px; }

/* A narrow window: the coach lies over the work rather than squeezing it. */
@media (max-width: 900px) {
  #workspace-view.xp-shell[data-coach="open"] { padding-right: 0; }
  #workspace-view.xp-shell > aside#coach-rail { left: 8px; width: auto; }
}