/* ============================================================
   GRANNY'S AVATAR SYSTEM v2.2
   ============================================================ */

/* ── Base avatar display ──────────────────────────────────── */
.gavt-avatar {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  background: #F3F4F7;
  flex-shrink: 0;
}
.gavt-avatar--xl {
  width: 140px; height: 140px;
  border: 3px solid #FDB439;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  display: block;
}
.gavt-avatar--fallback {
  border-radius: 50%;
  background: linear-gradient(135deg,#1F2933,#3E4C59);
  color: #FDB439;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  vertical-align: middle;
}
/* Emoji avatars — shown as a span not img */
.gavt-avatar--emoji {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  /* Emoji font stack — ensures emoji render across all OS */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
  line-height: 1;
  user-select: none;
}

/* ── Picker wrapper ───────────────────────────────────────── */
.gavt-picker {
  background: #FFFAF5;
  border: 1px solid #E8E0D8;
  border-radius: 14px;
  overflow: hidden;
}

/* ── Tab bar (Illustrated / Emoji) ───────────────────────── */
.gavt-tab-bar {
  display: flex;
  background: #FDB439;
  border-bottom: 3px solid #E47B02;
}
.gavt-tab-btn {
  flex: 1;
  padding: 13px 16px;
  border: none;
  background: transparent;
  color: rgba(31,41,51,0.55);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-bottom-color 0.15s;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.gavt-tab-btn:hover { color: #1F2933; }
.gavt-tab-btn.active { color: #1F2933; border-bottom-color: #1F2933; }

/* ── Mode bar (Simple / Advanced) ────────────────────────── */
.gavt-mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #3E4C59;
  flex-wrap: wrap;
}
.gavt-mode-btn {
  padding: 6px 16px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.25);
  background: transparent;
  /* WHITE text on dark mode bar */
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.gavt-mode-btn.active { background: #FDB439; border-color: #FDB439; color: #1F2933; }
.gavt-mode-btn:not(.active):hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.gavt-mode-desc { font-size: 11px; color: rgba(255,255,255,0.5); font-style: italic; }

/* ── Picker body layout ───────────────────────────────────── */
.gavt-picker__body {
  display: flex;
  gap: 0;
}
.gavt-picker__left {
  width: 200px;
  flex-shrink: 0;
  padding: 20px 16px;
  border-right: 1px solid #E8E0D8;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
}
.gavt-picker__right {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Preview ──────────────────────────────────────────────── */
.gavt-preview-wrap { text-align: center; }
.gavt-preview-label { font-size: 11px; color: #7B8794; margin: 8px 0 0; line-height: 1.4; }

/* ── Style grid ───────────────────────────────────────────── */
.gavt-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(76px,1fr));
  gap: 8px;
}
.gavt-style-thumb {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  border: 2px solid #E8E0D8; border-radius: 10px;
  cursor: pointer; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gavt-style-thumb:hover { border-color: #FDB439; }
.gavt-style-thumb--active { border-color: #FDB439; box-shadow: 0 0 0 2px #FDB439; }
.gavt-style-thumb img { border-radius: 50%; width:60px; height:60px; object-fit:cover; }
.gavt-style-thumb span { font-size:10px; color:#52606D; font-weight:600; text-align:center; }

/* ── Controls ─────────────────────────────────────────────── */
.gavt-controls-area { display:flex; flex-direction:column; gap:14px; }
.gavt-section { display:flex; flex-direction:column; gap:8px; }
.gavt-field { display:flex; flex-direction:column; gap:6px; }

.gavt-label {
  font-size: 12px; font-weight: 700; color: #3E4C59;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.gavt-hint {
  display: block; font-size: 11px; font-weight: 400;
  color: #7B8794; text-transform: none; letter-spacing: 0;
}

/* Radio (Male/Female) */
.gavt-radio-row { display:flex; gap:8px; flex-wrap:wrap; }
.gavt-radio-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #1F2933; cursor: pointer;
  padding: 7px 14px;
  border: 2px solid #E8E0D8; border-radius: 50px;
  transition: all 0.15s;
}
.gavt-radio-label:has(input:checked) { background:#FDB439; border-color:#FDB439; }
.gavt-radio-label input { display:none; }

/* Color swatches */
.gavt-swatches { display:flex; flex-wrap:wrap; gap:6px; }
.gavt-swatch {
  width:28px; height:28px; border-radius:50%;
  cursor:pointer; transition:transform 0.1s,box-shadow 0.1s;
  border: 2px solid transparent;
}
.gavt-swatch:hover { transform:scale(1.2); box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.gavt-swatch--active { border:3px solid #1F2933 !important; }

/* Select */
.gavt-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #E8E0D8; border-radius: 8px;
  font-size: 13px; color: #1F2933; background: #fff;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B8794' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer; width: 100%;
}
.gavt-select:focus { border-color:#FDB439; outline:none; box-shadow:0 0 0 2px rgba(253,180,57,0.2); }

/* Abstract note */
.gavt-abstract-note {
  padding: 16px; background: #F9F9FB;
  border-radius: 10px; border: 1px solid #E8E0D8;
  font-size: 14px; color: #52606D; line-height: 1.6; text-align: center;
}

/* ── Seed section — STACKED layout ───────────────────────── */
.gavt-seed-row {
  display: flex;
  flex-direction: column;   /* stacked: input on top, button below */
  gap: 8px;
}
.gavt-seed-row input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #E8E0D8; border-radius: 8px;
  font-size: 13px; color: #1F2933; box-sizing: border-box;
}
.gavt-seed-row input:focus { border-color:#FDB439; outline:none; box-shadow:0 0 0 2px rgba(253,180,57,0.2); }

/* ── Buttons ──────────────────────────────────────────────── */
.gavt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 16px; border-radius: 50px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.15s; white-space: nowrap;
  width: 100%;
}
.gavt-btn--ghost { background:#F3F4F7; color:#3E4C59; border:1px solid #E8E0D8; }
.gavt-btn--ghost:hover { background:#E8E0D8; }
.gavt-btn--save { background:#FDB439; color:#1F2933; font-size:14px; padding:11px; }
.gavt-btn--save:hover { background:#E47B02; color:#fff; }
.gavt-btn:disabled { opacity:0.5; cursor:not-allowed; }

.gavt-actions { display:flex; flex-direction:column; gap:8px; }
#gavt-save-msg, #gavt-emoji-save-msg {
  font-size: 13px; font-weight: 600; text-align: center; min-height: 18px;
}

/* ── Emoji panel ──────────────────────────────────────────── */
.gavt-emoji-panel .gavt-picker__right {
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Emoji groups ─────────────────────────────────────────── */
.gavt-emoji-group { display:flex; flex-direction:column; gap:8px; }

.gavt-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.gavt-emoji-btn {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid #E8E0D8;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, transform 0.1s, box-shadow 0.12s;
  /* Emoji font stack — critical for rendering */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
  font-size: 24px;
  line-height: 1;
  padding: 0;
}
.gavt-emoji-btn:hover {
  border-color: #FDB439;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.gavt-emoji-btn--selected {
  border-color: #FDB439;
  background: #FFFAF5;
  box-shadow: 0 0 0 2px #FDB439;
}

/* ── Emoji preview (large) ────────────────────────────────── */
#gavt-emoji-preview {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .gavt-picker__body { flex-direction: column; }
  .gavt-picker__left { width: auto; border-right: none; border-bottom: 1px solid #E8E0D8; }
  .gavt-picker__right { max-height: none; }
  .gavt-style-grid { grid-template-columns: repeat(4,1fr); }
  .gavt-emoji-grid { gap: 4px; }
  .gavt-emoji-btn { width: 38px; height: 38px; font-size: 20px; }
}

/* ── Gender appearance note ───────────────────────────────── */
.gavt-gender-note {
  font-size: 12px;
  color: #52606D;
  background: #F3F4F7;
  border-left: 3px solid #FDB439;
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
  line-height: 1.5;
}