/* =========================================================
   v4 · Ask MakerLab — finding context UI
   Pin affordance in the left index + the rich answer cards
   rendered inside the chat bubble.
   ========================================================= */

/* wide AI bubble so the answer cards aren't squeezed */
.gl-qmsg__bub--wide {
  max-width: 100%; width: 100%;
  background: transparent; padding: 0;
  color: var(--ms-fg);
}

/* ---- "Ask about this finding" pin in the left index ---- */
.gl-bx-item { position: relative; }
.gl-bx-item__ask {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%) scale(0.9);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px 3px 5px;
  border: 1px solid var(--ms-border-strong);
  border-radius: 999px;
  background: var(--ms-white);
  color: var(--ms-dusty-green);
  font-family: var(--ms-font-sans);
  font-size: 10.5px; font-weight: 600;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 2px 6px rgba(4,12,21,0.10);
  white-space: nowrap;
}
.gl-bx-item:hover .gl-bx-item__ask,
.gl-bx-item.is-sel .gl-bx-item__ask {
  opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1);
}
.gl-bx-item__ask:hover { background: var(--ms-green-5); border-color: var(--ms-dusty-green); }
.gl-bx-item__ask svg { width: 11px; height: 11px; }
/* nudge the item text so it doesn't run under the button when shown */
.gl-bx-item:hover .gl-bx-item__txt,
.gl-bx-item.is-sel .gl-bx-item__txt { padding-right: 56px; }

/* ---- Pinned-finding context strip in the panel header ---- */
.gl-ml-ctx {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  background: var(--ms-green-5);
  border-bottom: 1px solid var(--ms-border);
}
.gl-ml-ctx__icon {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ms-dusty-green), #62a942);
  color: #fff; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-ml-ctx__body { flex: 1; min-width: 0; }
.gl-ml-ctx__lab {
  font-family: var(--ms-font-mono);
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ms-dusty-green); font-weight: 700;
}
.gl-ml-ctx__title {
  font-size: 12.5px; font-weight: 600; color: var(--ms-fg);
  line-height: 1.35; margin-top: 1px;
}
.gl-ml-ctx__x {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: transparent; color: var(--ms-fg-muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.gl-ml-ctx__x:hover { background: rgba(0,0,0,0.06); color: var(--ms-fg); }

/* "viewing — pin it?" strip when nothing is pinned yet */
.gl-ml-view {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ms-border);
  background: var(--ms-platinum);
}
.gl-ml-view__lab {
  font-family: var(--ms-font-mono);
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ms-fg-subtle); font-weight: 700; flex-shrink: 0;
}
.gl-ml-view__txt {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--ms-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-ml-view__pin {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--ms-dusty-green);
  background: var(--ms-white); color: var(--ms-dusty-green);
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.gl-ml-view__pin:hover { background: var(--ms-green-5); }

/* contextual suggestion chips get a spark so they read as finding-aware */
.gl-chip-q--ctx {
  border-color: var(--ms-dusty-green);
  color: var(--ms-fg);
}
.gl-chip-q--ctx::before {
  content: "✦"; color: var(--ms-dusty-green); margin-right: 5px; font-size: 10px;
}

/* =========================================================
   Answer cards inside the chat bubble
   ========================================================= */
.gl-ml-card {
  margin-top: 9px;
  border: 1px solid var(--ms-border-strong);
  border-radius: 11px;
  background: var(--ms-white);
  overflow: hidden;
}
.gl-ml-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--ms-border);
}
.gl-ml-thumb {
  width: 40px; height: 40px; flex-shrink: 0;
  object-fit: cover; border-radius: 8px;
  background: var(--ms-platinum);
}
.gl-ml-card__title { font-size: 13px; font-weight: 700; color: var(--ms-fg); line-height: 1.25; }
.gl-ml-card__sub {
  font-size: 10.5px; color: var(--ms-fg-subtle);
  font-family: var(--ms-font-mono); letter-spacing: 0.01em; margin-top: 2px;
}

.gl-ml-rows { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.gl-ml-row { display: flex; align-items: center; gap: 9px; }
.gl-ml-row--mk { gap: 8px; }
.gl-ml-mkthumb {
  width: 26px; height: 26px; flex-shrink: 0;
  object-fit: cover; border-radius: 5px; background: var(--ms-platinum);
}
.gl-ml-row__lab {
  width: 116px; flex-shrink: 0;
  font-size: 11.5px; color: var(--ms-fg); font-weight: 500;
  display: flex; flex-direction: column; line-height: 1.2;
}
.gl-ml-row__treat {
  font-size: 9.5px; color: var(--ms-fg-subtle);
  font-family: var(--ms-font-mono); margin-top: 1px;
}
.gl-ml-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--ms-platinum); overflow: hidden;
}
.gl-ml-bar__fill { height: 100%; border-radius: 999px; }
.gl-ml-bar__fill--hi { background: var(--ms-dusty-green); }
.gl-ml-bar__fill--mid { background: #8aa05f; }
.gl-ml-bar__fill--lo { background: var(--ms-clay-deep); }
.gl-ml-bar__fill--syn { background: linear-gradient(90deg, var(--ms-dusty-green), #62a942); }
.gl-ml-row__val {
  width: 26px; flex-shrink: 0; text-align: right;
  font-family: var(--ms-font-mono); font-size: 12px; font-weight: 700; color: var(--ms-fg);
}

.gl-ml-foot, .gl-ml-rec {
  padding: 10px 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--ms-fg-muted); border-top: 1px solid var(--ms-border);
}
.gl-ml-rec { display: flex; flex-direction: column; gap: 4px; }
.gl-ml-rec__tag {
  align-self: flex-start;
  font-family: var(--ms-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ms-clay-deep);
}
.gl-ml-quote {
  margin: 0 12px 12px;
  padding: 8px 11px;
  border-left: 2px solid var(--ms-dusty-green);
  background: var(--ms-green-5);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px; font-style: italic; color: var(--ms-fg);
}
.gl-ml-quote--syn { border-left-color: #8aa05f; }
.gl-ml-quote__src {
  display: block; margin-top: 3px;
  font-style: normal; font-family: var(--ms-font-mono);
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ms-fg-subtle);
}

/* ---- Effect-size (retailer cuts) card ---- */
.gl-ml-es .gl-ml-row__lab { width: 130px; }
.gl-ml-es .gl-ml-row__val { width: 42px; font-size: 11px; }
.gl-ml-row--base { opacity: 0.85; }
.gl-ml-row--base .gl-ml-row__lab {
  font-family: var(--ms-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ms-fg-subtle);
}
.gl-ml-bar__fill--base {
  background: repeating-linear-gradient(90deg, var(--ms-ink-5) 0 4px, transparent 4px 7px);
}

/* ---- Synthetic card ---- */
.gl-ml-synth { border-color: #c9d4b8; }
.gl-ml-synth__flag {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: #f1f5ea;
  font-family: var(--ms-font-mono);
  font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #5f7a3e; font-weight: 700;
  border-bottom: 1px solid #dde6cd;
}
.gl-ml-synth__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8aa05f;
  box-shadow: 0 0 0 3px rgba(138,160,95,0.25);
}
.gl-ml-synth__ph {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  background-image: repeating-linear-gradient(45deg, #e7ecdd 0 5px, #f1f5ea 5px 10px);
  border: 1px dashed #b9c8a2;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.gl-ml-synth__ph span { font-family: var(--ms-font-mono); font-size: 7px; line-height: 1.1; color: #6f8a4d; }
.gl-ml-synth__scorebar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-bottom: 1px solid var(--ms-border);
}
.gl-ml-synth__score {
  font-family: var(--ms-font-mono); font-size: 30px; font-weight: 700;
  color: #5f7a3e; line-height: 1; display: flex; align-items: baseline; gap: 4px;
}
.gl-ml-synth__score span { font-size: 10px; font-weight: 600; color: var(--ms-fg-subtle); }
.gl-ml-synth__band { flex: 1; }
.gl-ml-synth__range {
  margin-top: 5px; font-family: var(--ms-font-mono);
  font-size: 9.5px; color: var(--ms-fg-subtle);
}
.gl-ml-attrs { padding: 4px 12px 8px; }
.gl-ml-attr {
  display: grid; grid-template-columns: 16px 70px 1fr; gap: 8px;
  align-items: start; padding: 7px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 11.5px; line-height: 1.45;
}
.gl-ml-attr:last-child { border-bottom: none; }
.gl-ml-attr__v { font-size: 11px; text-align: center; }
.gl-ml-attr__v--up { color: var(--ms-dusty-green); }
.gl-ml-attr__v--down { color: var(--ms-clay-deep); }
.gl-ml-attr__v--flat { color: var(--ms-fg-subtle); }
.gl-ml-attr__k { font-weight: 700; color: var(--ms-fg); }
.gl-ml-attr__t { color: var(--ms-fg-muted); }
.gl-ml-synth__basis {
  padding: 8px 12px; font-family: var(--ms-font-mono);
  font-size: 9.5px; color: var(--ms-fg-subtle);
  border-top: 1px solid var(--ms-border);
}
.gl-ml-synth__cta {
  display: block; width: calc(100% - 24px); margin: 0 12px 12px;
  padding: 9px; border-radius: 8px; border: none;
  background: var(--ms-onyx); color: #fff;
  font-family: var(--ms-font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.gl-ml-synth__cta:hover { background: #000; }