/* ==========================================================================
   Avatar Studio · "Thiết kế nhân vật"
   Quy ước: mọi class có tiền tố .avs-  ·  không dùng !important  ·  không phụ thuộc thứ tự file khác
   Màu lấy từ biến theme của app (--card --tx --mu --bd --ac) nên tự đúng ở chế độ sáng/tối.
   Bố cục co giãn theo bề rộng của CHÍNH card (container query), không theo cửa sổ trình duyệt.
   ========================================================================== */

/* ---------- 1. Khung & biến ---------- */
.card.avs {
  --avs-line: var(--bd);
  --avs-ink: var(--tx);
  --avs-muted: var(--mu);
  --avs-accent: var(--ac);
  --avs-accent-soft: color-mix(in srgb, var(--ac) 13%, transparent);
  --avs-surface: color-mix(in srgb, var(--tx) 3.5%, var(--card));
  --avs-radius: 10px;

  container: avs / inline-size;
  padding: 0;
  overflow: hidden;
  text-align: start;
  color: var(--avs-ink);
}

.avs :is(h2, p) { margin: 0; }

/* Trung hòa rule toàn cục của app (`#app button { box-shadow … }`, độ ưu tiên theo ID) cho các nút của component.
   Nút .btn giữ nguyên kiểu chung của app để đồng bộ với phần còn lại. Vì vậy trạng thái chọn bên dưới
   dùng border / outline / background, KHÔNG dùng box-shadow trên <button>. */
#app .avs button:not(.btn) { box-shadow: none; }
.avs code { padding: 0; border: 0; background: none; }


/* Lề ngang dùng chung cho đầu / thân / chân thẻ (đặt ở phần tử con để container query chỉnh được) */
.avs-head, .avs-body, .avs-foot { --avs-pad: 22px; }

/* ---------- 2. Đầu thẻ ---------- */
.avs-head {
  padding: 18px var(--avs-pad) 16px;
  border-bottom: 1px solid var(--avs-line);
  background: linear-gradient(120deg, var(--avs-accent-soft), transparent 70%);
}
.avs-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--avs-accent);
}
.avs-head h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.avs-sub { margin-top: 4px; font-size: 13px; color: var(--avs-muted); }

/* ---------- 3. Thân: cột xem trước + cột chỉnh sửa ---------- */
.avs-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  padding: 20px var(--avs-pad);
}

/* Cột xem trước */
.avs-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.avs-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 10px 14px;
  border: 1px solid var(--avs-line);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 22%, color-mix(in srgb, var(--avs-accent) 15%, var(--card)), var(--avs-surface));
}
.avs-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 196px);
  height: auto;
  aspect-ratio: 2 / 3;
}
.avs-id { display: grid; gap: 3px; min-width: 0; }
.avs-id strong { font-size: 14px; overflow-wrap: anywhere; }
.avs-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--avs-muted);
}
.avs-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.avs-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- 4. Thanh tab ---------- */
.avs-editor { min-width: 0; }
.avs-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--avs-surface);
  border: 1px solid var(--avs-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.avs-tabs::-webkit-scrollbar { display: none; }
.avs-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--avs-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.avs-tab:hover { color: var(--avs-ink); }
.avs-tab[aria-selected="true"] {
  background: var(--card);
  color: var(--avs-accent);
  border-color: var(--avs-line);
}
.avs-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--avs-accent);
  color: var(--card);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- 5. Nội dung tab ---------- */
.avs-panel { display: flex; flex-direction: column; gap: 20px; min-height: 16rem; padding-top: 18px; }
.avs-field { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.avs-field > legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--avs-muted);
}
.avs-hint { font-size: 12px; color: var(--avs-muted); }

.avs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; }
.avs-grid--seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Ô chọn (chữ) – dùng cho cả lựa chọn đơn lẫn phụ kiện bật/tắt */
.avs-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--avs-line);
  border-radius: var(--avs-radius);
  background: var(--card);
  color: var(--avs-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
}
.avs-chip > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.avs-chip:hover { background: var(--avs-surface); border-color: color-mix(in srgb, var(--avs-accent) 50%, var(--avs-line)); }
.avs-chip[aria-pressed="true"] {
  border-color: var(--avs-accent);
  background: var(--avs-accent-soft);
  outline: 1px solid var(--avs-accent);
  outline-offset: -2px;
  font-weight: 650;
}
.avs-check { display: none; flex: none; width: 14px; height: 14px; color: var(--avs-accent); }
.avs-chip[aria-pressed="true"] .avs-check { display: block; }

/* Ô màu tròn */
.avs-swatches { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }
.avs-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
}
.avs-swatch:hover { outline: 2px solid color-mix(in srgb, var(--avs-accent) 45%, transparent); outline-offset: 3px; }
.avs-swatch[aria-pressed="true"] { outline: 2px solid var(--avs-accent); outline-offset: 3px; }

/* Thanh chọn màu áo / quần */
.avs-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; }
.avs-color {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--avs-line);
  border-radius: var(--avs-radius);
  background: var(--card);
}
.avs-color-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.avs-color-name { flex: 1; font-weight: 650; }
.avs-color code { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--avs-muted); }
.avs-dot { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.avs-color input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  margin: 4px 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  box-shadow: none;
  background: linear-gradient(90deg, hsl(0 72% 48%), hsl(60 72% 48%), hsl(120 72% 48%), hsl(180 72% 48%), hsl(240 72% 48%), hsl(300 72% 48%), hsl(359 72% 48%));
  cursor: pointer;
}
.avs-color input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--avs-accent);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.avs-color input[type="range"]::-moz-range-track { background: transparent; }
.avs-color input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--avs-accent);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Mẫu có sẵn */
.avs-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 10px; }
.avs-preset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--avs-line);
  border-radius: var(--avs-radius);
  background: var(--card);
  color: var(--avs-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.avs-preset:hover { background: var(--avs-surface); border-color: var(--avs-accent); }
.avs-preset-tone { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.avs-preset-title { font-size: 13px; font-weight: 650; }
.avs-preset-note { font-size: 12px; color: var(--avs-muted); }

/* ---------- 6. Nút & chân thẻ ---------- */
.avs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.avs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--avs-pad);
  border-top: 1px solid var(--avs-line);
  background: var(--avs-surface);
}
.avs-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--avs-muted); }
.avs-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.avs-status[data-dirty="true"] { color: var(--avs-ink); font-weight: 600; }
.avs-status[data-dirty="true"]::before { background: #d97706; }

/* ---------- 7. Tiêu điểm bàn phím ---------- */
.avs :is(button, input):focus-visible { outline: 2px solid var(--avs-accent); outline-offset: 2px; }
.avs-swatch:focus-visible { outline-offset: 5px; }

/* ---------- 8. Co giãn theo bề rộng card ---------- */
@container avs (max-width: 719px) {
  .avs-head, .avs-body, .avs-foot { --avs-pad: 16px; }
  .avs-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 16px; }
  /* Xem trước nằm ngang: nhân vật bên trái, tên và nút bên phải */
  .avs-side { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "stage id" "stage tools"; column-gap: 14px; align-items: center; }
  .avs-stage { grid-area: stage; padding: 10px 6px 8px; }
  .avs-id { grid-area: id; align-self: end; }
  .avs-tools { grid-area: tools; align-self: start; grid-template-columns: 1fr; }
  .avs-panel { min-height: 0; }
}
@container avs (max-width: 519px) {
  .avs-head h2 { font-size: 18px; }
  .avs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avs-foot { flex-direction: column; align-items: stretch; }
  .avs-foot .avs-btn { width: 100%; }
}

/* ---------- 9. Trợ năng ---------- */
/* (App đã tắt transition toàn cục nên component không khai báo chuyển động.) */
@media (forced-colors: active) {
  .avs-chip[aria-pressed="true"], .avs-tab[aria-selected="true"], .avs-swatch[aria-pressed="true"] { outline: 2px solid Highlight; }
}