/* ===================================================================
   bookspice · profile.html — Amazon User Profile layout
   =================================================================== */

/* ===================================================================
   🛠️ FIX: profile-main must be a grid container for book cards
   (profile.js sets gridTemplateColumns inline but main had no display)
   =================================================================== */
.profile-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
/* 🆕 เมื่อมีน้อยกว่า 3 ใบ ให้ card ขยายเต็มแถว */
.profile-main:has(.book-card:only-child) { grid-template-columns: 1fr; }
.profile-main:has(.book-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
@supports not selector(:has(*)) {
  .profile-main { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
/* .all-quotes-list / .following-grid / empty-state need to span full width */
.profile-main > .all-quotes-list,
.profile-main > .following-grid,
.profile-main > .empty-state {
  grid-column: 1 / -1;
}
.profile-main .empty-state {
  display: block;
  text-align: center;
  padding: 80px 24px;
  max-width: 480px;
  margin: 0 auto;
}

/* ====== ISBN row & cover preview (existing) ====== */
.isbn-row { display: flex; gap: 6px; margin-bottom: 8px; }
.isbn-row input { flex: 1; }
.isbn-row button { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.cover-preview {
  position: relative;
  display: inline-block;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cover-preview img { display: block; width: 80px; height: 120px; object-fit: cover; }
.cover-source {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 2px 4px;
  text-align: center;
}
.cover-clear {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11px;
}

/* ====== scanner (existing) ====== */
.modal-box-wide { max-width: 600px; }
.scanner-stage {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: #000; border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
}
.scanner-stage video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; height: 40%;
  border: 3px solid var(--spice);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: scannerPulse 2s ease-in-out infinite;
}
@keyframes scannerPulse {
  0%, 100% { border-color: var(--spice); }
  50% { border-color: var(--spice-3); }
}
.scanner-hint {
  position: absolute; top: 12px; left: 0; right: 0;
  color: #fff;
  text-align: center;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.scanner-status {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 8px;
  padding: 8px;
  background: var(--bg-2);
  border-radius: 6px;
}
.scanner-tip {
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(201, 100, 66, 0.08);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ====== book cards (existing) ====== */
.book-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.15s;
}
.book-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.book-card.has-cover .cover,
.book-card .cover img {
  width: 72px; height: 104px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.book-card .cover { position: relative; overflow: visible; }
.book-card .cover img { display: block; }
.book-card .cover-fallback {
  width: 72px; height: 104px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--spice), var(--spice-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: #fff;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.book-card .info { flex: 1; min-width: 0; }
.book-card .info h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.book-card .info h4 a { color: inherit; }
.book-card .info .author {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-style: italic;
}
.book-card .info .meta-line {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.book-card .info .meta-line span { display: inline-flex; align-items: center; gap: 2px; }
.book-card .info .meta-line .rating { color: var(--spice); font-size: 13px; }
.book-card .info .author a { color: var(--spice); }

/* 🆕 book-actions: ปุ่มย้าย + ลบ (สไตล์ใหม่) */
.book-card .book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.book-card .book-actions .move-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.book-card .book-actions .move-btn:hover {
  background: var(--spice);
  color: #fff;
  border-color: var(--spice);
  transform: translateY(-1px);
}
.book-card .book-actions .delete-btn {
  padding: 5px 8px;
  font-size: 13px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s;
}
.book-card .book-actions .delete-btn:hover {
  background: #c96442;
  color: #fff;
  border-color: #c96442;
}

/* 🆕 เมื่อ card ขยายเต็มแถว ให้ใช้ horizontal layout */
.profile-main:has(.book-card:only-child) .book-card { gap: 24px; }
.profile-main:has(.book-card:only-child) .book-card .cover,
.profile-main:has(.book-card:only-child) .book-card .cover img,
.profile-main:has(.book-card:only-child) .book-card .cover-fallback {
  width: 110px; height: 158px;
}
.profile-main:has(.book-card:only-child) .book-card .cover-fallback { font-size: 44px; }
.profile-main:has(.book-card:only-child) .book-card .info h4 { font-size: 22px; -webkit-line-clamp: 3; }
.profile-main:has(.book-card:only-child) .book-card .info .author { font-size: 14px; }

/* ====== collection mini cards (existing) ====== */
.collection-mini-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--col-color, var(--spice));
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.collection-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.collection-mini-card .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.collection-mini-card .emoji {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #fff;
}
.collection-mini-card h4 {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  flex: 1;
}
.collection-mini-card .count {
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ===================================================================
   🆕 Amazon Profile Banner (gradient + avatar overlap)
   =================================================================== */
.profile-banner {
  position: relative;
  background: var(--bg);
  overflow: visible;
}
.profile-banner-bg {
  height: 220px;
  background:
    /* 🆕 SVG pattern layer: book spines (more visible) + spice icon watermark */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23ffffff' fill-opacity='0.12'><rect x='8' y='20' width='8' height='80' rx='1.5'/><rect x='22' y='28' width='7' height='72' rx='1.5'/><rect x='36' y='14' width='10' height='86' rx='1.5'/><rect x='52' y='30' width='7' height='70' rx='1.5'/><rect x='66' y='18' width='9' height='82' rx='1.5'/><rect x='82' y='26' width='7' height='74' rx='1.5'/><rect x='96' y='20' width='8' height='80' rx='1.5'/></g><g fill='%23ffffff' fill-opacity='0.18'><text x='60' y='70' font-size='48' text-anchor='middle' font-family='serif'>🌶</text></g><g fill='%23ffffff' fill-opacity='0.07'><circle cx='30' cy='100' r='2'/><circle cx='90' cy='30' r='2.5'/><circle cx='100' cy='90' r='1.8'/></g></svg>"),
    /* warm glow circles (richer) */
    radial-gradient(circle at 20% 30%, rgba(232, 145, 113, 0.45) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(212, 165, 116, 0.35) 0, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(122, 140, 110, 0.25) 0, transparent 60%),
    /* base color: deep warm brown to terracotta */
    linear-gradient(135deg, #4a2419 0%, #6b3522 35%, #a85436 70%, #c96442 100%);
  background-size: 120px 120px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  position: relative;
}
.profile-banner-bg::after {
  /* 🆕 noise texture overlay (more visible) */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.88  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: overlay;
}
.profile-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 28px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  position: relative;
  min-height: 100px;     /* keep hero meta from collapsing on empty profile */
}
@media (max-width: 700px) {
  .profile-banner-inner { min-height: 60px; }
}
.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -80px;
}
.profile-avatar-big {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: var(--paper);
  border: 6px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  box-shadow: var(--shadow-lg);
}
.profile-hero-meta {
  flex: 1;
  padding-top: 20px;
  min-width: 0;
}
.profile-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--spice);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.profile-hero-meta h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.profile-bio {
  color: var(--ink-3);
  font-size: 15px;
  margin-bottom: 18px;
  max-width: 600px;
}
.profile-hero-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-hero-stats > div {
  display: flex;
  flex-direction: column;
}
.profile-hero-stats strong {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  font-weight: 600;
}
.profile-hero-stats span {
  font-size: 11px;
  color: var(--ink-3);
}
.profile-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===================================================================
   🆕 Profile Tabs (sticky under nav)
   nav inner = 14px*2 padding + ~36px content ≈ 64px, use 64 not 56
   =================================================================== */
.profile-tabs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  position: sticky;
  top: 70px;   /* nav ≈ 69px incl. borders, leave 1px breathing room */
  z-index: 40;
}
.profile-tabs-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.profile-tab {
  padding: 16px 20px;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.profile-tab:hover { color: var(--ink-2); }
.profile-tab.active {
  color: var(--spice);
  border-bottom-color: var(--spice);
  font-weight: 600;
}
.tab-count {
  display: inline-block;
  background: var(--bg-3);
  color: var(--ink-3);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.profile-tab.active .tab-count {
  background: var(--spice);
  color: #fff;
}

/* ===================================================================
   🆕 Body 2-column
   =================================================================== */
.profile-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px;
}
.profile-body-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: flex-start;
}
.profile-main { min-width: 0; }
.profile-side { min-width: 0; }

/* shelf grid (legacy) — kept for back-compat if any page still uses .shelf-grid */
.profile-main .shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* banner background stretches edge-to-edge even when body is narrower */
.profile-banner-bg {
  width: 100%;
}

/* ====== side cards (Amazon "right rail") ====== */
.side-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.side-head {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-2);
}

/* reading goal */
.goal-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.goal-stat strong {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
}
.goal-stat span {
  font-size: 13px;
  color: var(--ink-3);
}
.goal-bar {
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--spice), var(--spice-2));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.goal-note {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* recent list */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recent-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.recent-item:hover { opacity: 0.75; }
.recent-cover {
  width: 40px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--spice), var(--spice-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.recent-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-info { flex: 1; min-width: 0; }
.recent-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}
.recent-meta {
  font-size: 11px;
  color: var(--ink-3);
}

/* followed authors */
.followed-authors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.followed-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.followed-author:hover { background: var(--bg-2); }
.followed-author .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.followed-author .meta { flex: 1; min-width: 0; }
.followed-author .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.followed-author .count {
  font-size: 11px;
  color: var(--ink-3);
}

/* info list (stats) */
.info-list {
  list-style: none;
}
.info-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--line);
}
.info-list li:last-child { border-bottom: 0; }
.info-list strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ===================================================================
   🆕 Quotes tab (all quotes flattened)
   =================================================================== */
.all-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.all-quote-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--spice);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: all 0.15s;
}
.all-quote-row:hover {
  border-left-color: var(--spice-2);
  box-shadow: var(--shadow);
}
.all-quote-book {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.all-quote-book a {
  color: var(--spice);
  font-weight: 600;
}
.all-quote-text {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.3;
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.all-quote-meta {
  font-size: 11px;
  color: var(--ink-3);
}

/* ===================================================================
   🆕 Following tab (followed authors grid)
   =================================================================== */
.following-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.following-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.following-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.following-card .avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 3px solid var(--paper);
  box-shadow: var(--shadow);
}
.following-card .name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.following-card .genre {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  margin-bottom: 8px;
}
.following-card .count {
  font-size: 12px;
  color: var(--spice);
  font-weight: 600;
}

/* ====== responsive ====== */
@media (max-width: 900px) {
  .profile-body-inner {
    grid-template-columns: 1fr;
  }
  .profile-hero-meta h1 { font-size: 28px; }
  .profile-avatar-big {
    width: 104px;
    height: 104px;
    font-size: 56px;
  }
  .profile-banner-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-avatar-wrap {
    margin-top: -52px;
  }
}

@media (max-width: 700px) {
  .isbn-row { flex-wrap: wrap; }
  .isbn-row button { font-size: 11px; padding: 6px 10px; }
  .field-row { grid-template-columns: 1fr; }
}

/* ====== view toggle (Card grid <-> Kindle shelf) ====== */
.view-toggle-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.view-toggle {
  display: inline-flex;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.view-toggle-btn {
  padding: 8px 18px;
  border-radius: 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  transition: all .15s ease;
  cursor: pointer;
}
.view-toggle-btn:hover { color: var(--ink-2); background: rgba(201, 100, 66, 0.06); }
.view-toggle-btn.active {
  background: var(--spice);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.view-toggle-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0;
}
@media (max-width: 700px) {
  .view-toggle-wrap { padding: 12px 14px 0; }
  .view-toggle-btn { padding: 6px 12px; font-size: 12px; }
  .view-toggle-hint { display: none; }
}