/* Khối "Ask an AI" trong bài (.art-tools) + dock nổi bên phải (.ux-dock).
   Dùng lại token màu của assets/css/style.css (--accent/--ink/--line/--card)
   thay vì tự đặt bảng màu riêng, để khối này luôn khớp giao diện site. */

/* Gọn, căn giữa, không dùng khung card nặng — chỉ một dải viền trên/dưới mảnh,
   giống một divider cuối bài hơn là một hộp quảng cáo riêng. */
.art-tools {
  max-width: 560px;
  margin: 28px auto 8px;
  padding: 14px 12px;
  border-top: 1px solid var(--line, #e5e7eb);
  border-bottom: 1px solid var(--line, #e5e7eb);
  text-align: center;
}
.art-tools-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.art-tools-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3, #6b7280);
}
.art-tools-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.art-tools-sep {
  width: 1px;
  height: 20px;
  background: var(--line, #e5e7eb);
  margin: 0 3px;
}
.art-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #111827);
  cursor: pointer;
  /* Không transition border-color/color/background: PageSpeed báo "ảnh động
     không được ghép" — những thuộc tính đó buộc vẽ lại trên main thread thay
     vì chạy trên compositor (GPU). Chỉ transform/opacity mới ghép được, nên
     đổi màu hover ở đây SNAP tức thì, không animate. */
}
.art-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent-deep, #195fd7); }
.art-btn.is-done { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }

.art-tools-ai {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
/* +12% so với bản đầu (26px) — bản gốc nhỏ quá, khó nhìn trên desktop.
   .art-copy-icon dùng chung khung tròn này cho nút "Copy link" dạng icon. */
.art-ai, .art-copy-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink, #111827);
  text-decoration: none;
  cursor: pointer;
  /* Chỉ transform ở đây được ghép (composite) — border-color đổi tức thì,
     không animate, để không bị PageSpeed tính là "ảnh động không ghép". */
  transition: transform .1s ease;
}
.art-ai:hover, .art-copy-icon:hover { border-color: var(--accent, #2563eb); transform: translateY(-1px); }
.art-copy-icon.is-done { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.art-ai-i { display: block; width: 16px; height: 16px; }
/* Nhãn (tên AI / "Copy link") chỉ dành cho screen reader — bản gọn không có
   chỗ cho text, dùng title="" (tooltip) cho chuột và .art-ai-t ẩn sr-only. */
.art-ai-t {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.art-tools-note {
  min-height: 14px;
  font-size: 11px;
  color: #047857;
}

@media screen and (max-width: 520px) {
  .art-tools { padding: 12px 8px; }
  .art-tools-row { row-gap: 10px; gap: 8px; }
  /* +10% nữa so với mức desktop (29px) — icon 26px gốc bị chê nhỏ/khó bấm
     trên di động, cần to hơn và cách nhau rõ hơn ngón tay chạm chuẩn hơn. */
  .art-ai, .art-copy-icon { width: 32px; height: 32px; }
  .art-ai-i { width: 18px; height: 18px; }
  .art-tools-ai { gap: 9px; }
  /* Ở bề rộng này hàng luôn phải xuống dòng (2 dòng: nút copy | icon AI) —
     dấu gạch dọc giữa 2 nhóm rơi ngay mép chỗ xuống dòng, trông như ký tự lạc.
     Bỏ hẳn, khoảng cách 2 dòng đã đủ để phân biệt 2 nhóm. */
  .art-tools-sep { display: none; }
}

/* ── Dock nổi bên phải ─────────────────────────────────────── */
.ux-dock {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  /* Chỉ opacity/transform được ghép — visibility và bottom vẫn ĐỔI (ở dưới),
     chỉ không nằm trong danh sách transition nên đổi tức thì thay vì animate
     trên main thread (đúng cái PageSpeed "ảnh động không được ghép" báo). */
  transition: opacity .2s ease, transform .2s ease;
}
.ux-dock.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Trang công cụ có sẵn nút nổi "Lưu site" (.save-tool-floating, 2 nút x 52px,
   xem assets/save-tool/save-tool.css) ở đúng góc này — nếu không né thì 2
   khối chồng lên nhau. :has() tự phát hiện, không cần JS phối hợp giữa 2
   widget độc lập. 202px = 86px đáy của nút đó + chiều cao 2 nút + khoảng cách. */
body:has(.save-tool-floating) .ux-dock {
  bottom: max(218px, calc(env(safe-area-inset-bottom) + 218px));
}

.ux-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ux-share-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ux-share-more[hidden] { display: none; }

.ux-btn-wrap { position: relative; }

.ux-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .08);
  color: var(--ink2, #4b5563);
  cursor: pointer;
  /* Chỉ transform ghép được — border-color/color đổi tức thì lúc hover. */
  transition: transform .1s ease;
}
.ux-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent-deep, #195fd7); transform: translateY(-1px); }
.ux-btn-solid { background: var(--ink, #111827); border-color: var(--ink, #111827); color: #fff; }
.ux-btn-solid:hover { color: #fff; border-color: var(--accent-deep, #195fd7); background: var(--accent-deep, #195fd7); }
.ux-ai-i { display: block; }

.ux-share-tog .ux-chev { transition: transform .15s ease; }
.ux-share-tog.is-open .ux-chev { transform: rotate(180deg); }

/* Tooltip nhãn — hiện bên trái nút khi hover/focus, ẩn khỏi luồng đọc còn lại. */
.ux-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--ink, #111827);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.ux-btn:hover .ux-tip, .ux-btn:focus-visible .ux-tip { opacity: 1; }

.ux-jump {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 0;
  width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, .14);
  padding: 8px;
  display: none;
  flex-direction: column;
}
.ux-jump.is-open { display: flex; }
.ux-jump-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3, #6b7280);
  padding: 6px 8px;
}
.ux-jump a {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink, #111827);
  text-decoration: none;
}
.ux-jump a:hover { background: var(--paper, #f8fafc); color: var(--accent-deep, #195fd7); }
.ux-jump a.ux-jump-sub { padding-left: 18px; font-size: 12.5px; color: var(--ink2, #4b5563); }

/* Thu gọn ở mobile: icon nhỏ hơn, danh sách "xem thêm" không tự mở, dock nằm
   sát mép để không đè lên nội dung hay nút hệ thống của trình duyệt. */
@media screen and (max-width: 767px) {
  .ux-dock { right: 10px; bottom: 14px; gap: 6px; }
  .ux-btn { width: 36px; height: 36px; }
  .ux-tip { display: none; }
  .ux-jump { width: min(78vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .ux-dock, .ux-share-tog .ux-chev { transition: none; }
}