/* Listing Builder — AI Listing Assistant (.la-*)
 *
 * Sits INSIDE the Listing Builder, so it inherits that module's language
 * (.lb-*): 1.5px borders, 11–14px radii, the teal→blue accent, soft shadow.
 * The affordance is deliberately small — a quiet icon beside a field, not a
 * banner competing with the seller's own work.
 *
 * One meaning per colour: amber = a decision or a warning, red = a hard
 * marketplace failure, grey = informational or not checked, green = passes.
 * No emoji.
 */

.la-ico {
  appearance: none; border: 1.5px solid #cfdcea; background: #fff; color: #0588b6;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 6px; transition: .15s; box-shadow: none;
}
.la-ico:hover { border-color: #0588b6; background: #f2fafd; }
.la-ico:focus-visible { outline: 2px solid #0588b6; outline-offset: 2px; }

/* ---------------- popover ---------------- */
.la-pop {
  position: fixed; z-index: 100060; width: 380px; max-width: calc(100vw - 16px);
  background: #fff; border: 1.5px solid #d9e6f2; border-radius: 14px;
  box-shadow: 0 22px 50px rgba(9, 26, 43, .22); padding: 12px 13px 11px;
}
.la-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.la-pop-title { font-size: 13px; font-weight: 800; color: #0f2740; flex: 1; }
.la-badge { font-size: 10px; font-weight: 900; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 3px 8px; }
.la-x { border: none; background: transparent; font-size: 19px; line-height: 1; color: #8aa0b4; cursor: pointer; padding: 0 4px; box-shadow: none; margin: 0; }
.la-x:hover { color: #0f2740; }

.la-text {
  width: 100%; border: 1.5px solid #cfdcea; border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: 13px; line-height: 1.5; color: #0f2740; background: #fbfdff;
  resize: vertical; min-height: 62px;
}
.la-text:focus { outline: none; border-color: #0588b6; box-shadow: 0 0 0 3px rgba(5, 136, 182, .14); }
.la-loading { padding: 22px 0; text-align: center; font-size: 12.5px; color: #6b8199; }

.la-count { font-size: 11px; margin: 6px 0 2px; display: flex; flex-direction: column; gap: 2px; }
.la-v.pass { color: #2f8f52; }
.la-v.warn { color: #92400e; }
.la-v.fail { color: #b3401f; font-weight: 700; }
.la-v.not_checked { color: #90a3b6; }

.la-nav { display: flex; align-items: center; gap: 5px; margin: 7px 0 4px; flex-wrap: wrap; }
.la-dot {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cfdcea; background: #fff;
  color: #41607a; font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; box-shadow: none; margin: 0;
}
.la-dot.on { background: linear-gradient(135deg, #03658e, #0588b6); border-color: transparent; color: #fff; }
.la-navnote { font-size: 10.5px; color: #90a3b6; }

.la-imgnote { font-size: 11px; color: #6b8199; background: #f4f9fd; border: 1px solid #e2eef8; border-radius: 8px; padding: 6px 8px; margin: 7px 0; line-height: 1.45; }

.la-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 7px; }
.la-chip {
  border: 1.5px solid #cfdcea; background: #fff; color: #3f5f79; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; box-shadow: none; margin: 0;
}
.la-chip:hover { border-color: #0588b6; color: #0588b6; }

.la-steerrow { margin-bottom: 8px; }
.la-steer {
  width: 100%; height: 34px; border: 1.5px solid #cfdcea; border-radius: 9px;
  padding: 0 10px; font: inherit; font-size: 12.5px; background: #fbfdff; color: #0f2740;
}
.la-steer:focus { outline: none; border-color: #0588b6; }

.la-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.la-btn {
  border: 1.5px solid #cfdcea; background: #fff; color: #21506f; font-size: 12.5px; font-weight: 700;
  padding: 7px 13px; border-radius: 10px; cursor: pointer; box-shadow: none; margin: 0;
}
.la-btn:hover:not(:disabled) { border-color: #0588b6; color: #0588b6; }
.la-btn.primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, #03658e, #0588b6); }
.la-btn.ghost { color: #6b8199; }
.la-btn:disabled { opacity: .5; cursor: default; }

.la-law { font-size: 10.5px; color: #90a3b6; margin-top: 8px; line-height: 1.45; }
.la-note { font-size: 11.5px; color: #b3401f; margin-top: 6px; line-height: 1.45; }
.la-err { font-size: 12.5px; color: #b3401f; background: #fff5f5; border: 1px solid #f3c9c9; border-radius: 9px; padding: 8px 10px; }

/* ---------------- analysis panel ---------------- */
.la-an { font-size: 12.5px; color: #33506f; line-height: 1.55; }
.la-an-sec { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #90a3b6; margin: 11px 0 5px; }
.la-an-sec:first-child { margin-top: 0; }
.la-an-tag { font-size: 9.5px; font-weight: 800; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 7px; margin-left: 6px; letter-spacing: 0; text-transform: none; }
.la-an-row { margin-bottom: 3px; }
.la-an-list { margin: 0; padding-left: 17px; }
.la-an-list li { margin-bottom: 2px; }
.la-an-list.warn li { color: #8a3d21; }
.la-an-note { font-size: 11px; color: #90a3b6; margin-top: 6px; line-height: 1.45; }

/* ---------------- lookup review (accept / reject) ---------------- */
.la-review { border: 1.5px solid #d9e6f2; border-radius: 12px; overflow: hidden; margin: 10px 0; }
.la-review-head { background: #f5f8fc; padding: 8px 11px; font-size: 12px; font-weight: 800; color: #0f2740; border-bottom: 1.5px solid #e6edf5; }
.la-rrow { display: flex; align-items: flex-start; gap: 9px; padding: 7px 11px; border-bottom: 1px solid #eef4fa; font-size: 12.5px; }
.la-rrow:last-child { border-bottom: 0; }
.la-rrow input[type="checkbox"] { margin-top: 3px; width: 15px; height: 15px; }
.la-rkey { width: 108px; flex: none; color: #8298ab; }
.la-rval { flex: 1; min-width: 0; color: #0f2740; font-weight: 700; overflow-wrap: anywhere; }
.la-rsrc { font-size: 10.5px; color: #90a3b6; font-weight: 400; display: block; margin-top: 1px; }
.la-rclash { font-size: 11px; color: #92400e; background: #fffbf3; border: 1px solid #f0e2c9; border-radius: 7px; padding: 5px 8px; margin-top: 4px; }

@media (max-width: 1180px) {
  .la-pop { width: calc(100vw - 16px); left: 8px !important; }
  .la-rkey { width: 84px; }
}

html[data-theme="dark"] .la-pop,
html[data-theme="dark"] .la-review { background: #141d2f; border-color: #243049; }
html[data-theme="dark"] .la-pop-title, html[data-theme="dark"] .la-rval { color: #e6edf6; }
html[data-theme="dark"] .la-text, html[data-theme="dark"] .la-steer { background: #1a2438; border-color: #2a3650; color: #e6edf6; }
html[data-theme="dark"] .la-ico, html[data-theme="dark"] .la-btn, html[data-theme="dark"] .la-chip,
html[data-theme="dark"] .la-dot { background: #1d2941; border-color: #2a3650; color: #b8c6d8; }
html[data-theme="dark"] .la-review-head { background: #1a2438; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .la-imgnote { background: #172232; border-color: #243049; color: #b8c6d8; }

/* ============ Prompt 16 — category / attributes / adapt / duplicates ============ */
.la-tools-card .la-tools-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.la-cap, .la-attrs, .la-adapt, .la-dup, .la-checklist { margin-top: 10px; }
.la-cap-ch, .la-adapt-ch { border: 1.5px solid #e6edf5; border-radius: 11px; padding: 9px 11px; margin-bottom: 8px; background: #fbfdff; }
.la-cap-ch b, .la-adapt-ch b { font-size: 12.5px; color: #20415c; }

.la-catrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; flex-wrap: wrap; }
.la-catrow.top { font-weight: 700; }
.la-cat-label { color: #22405b; }
.la-cat-conf { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 7px; text-transform: uppercase; }
.la-cat-conf.high { background: #dcfce7; color: #166534; }
.la-cat-conf.medium { background: #e0f2fe; color: #075985; }
.la-cat-conf.low { background: #f1f5f9; color: #64748b; }
.la-cat-why { font-size: 11px; color: #90a3b6; flex: 1 1 100%; }

.la-checklist { border-top: 1px dashed #e0e8f0; padding-top: 8px; }
.la-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 0; color: #33506f; }
.la-chk-i { width: 16px; text-align: center; font-weight: 800; }
.la-chk.ok .la-chk-i { color: #16a34a; }
.la-chk.miss .la-chk-i { color: #dc2626; }
.la-chk.opt .la-chk-i { color: #90a3b6; }
.la-chk-req { font-size: 10px; font-weight: 700; color: #92400e; }

.la-attr { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; border: 1px solid #eef4fa; border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; }
.la-attr-t { font-size: 12.5px; font-weight: 700; color: #22405b; }
.la-attr-v { font-size: 12.5px; color: #0f2740; }
.la-attr-basis { grid-column: 1; font-size: 10.5px; color: #90a3b6; }
.la-attr-basis.img { color: #92400e; }
.la-attr.empty { background: #fbfcfd; }
.la-attr-empty { grid-column: 1 / -1; font-size: 11.5px; color: #a0b0be; font-style: italic; }

.la-adapt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.la-adapt-text { width: 100%; border: 1.5px solid #cfdcea; border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 12.5px; background: #fff; resize: vertical; margin-bottom: 6px; }

.la-dup { border: 1.5px solid #f0e2c9; border-radius: 11px; padding: 10px; background: #fffbf3; }
.la-dup.exact { border-color: #f3c9c9; background: #fff6f6; }
.la-dup-ok { font-size: 12.5px; color: #166534; background: #f4fdf7; border: 1px solid #cdebd7; border-radius: 9px; padding: 8px 10px; }
.la-dup-msg { font-size: 12.5px; font-weight: 700; color: #8a3d21; margin-bottom: 7px; }
.la-dup.exact .la-dup-msg { color: #991b1b; }
.la-dup-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 3px 0; flex-wrap: wrap; }
.la-dup-sim { font-weight: 800; color: #8a3d21; min-width: 34px; }
.la-dup-title { color: #22405b; font-weight: 600; }
.la-dup-meta { font-size: 11px; color: #90a3b6; }
.la-dup-why { font-size: 11px; color: #90a3b6; flex: 1 1 100%; }

@media (max-width: 1180px) {
  .la-attr { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .la-cap-ch, html[data-theme="dark"] .la-adapt-ch { background: #172232; border-color: #243049; }
html[data-theme="dark"] .la-adapt-text { background: #1a2438; border-color: #2a3650; color: #e6edf6; }
html[data-theme="dark"] .la-attr { border-color: #243049; }
html[data-theme="dark"] .la-cat-label, html[data-theme="dark"] .la-attr-t, html[data-theme="dark"] .la-attr-v, html[data-theme="dark"] .la-dup-title { color: #e6edf6; }