:root {
  --paper: #EDF1EE;
  --surface: #F7F9F7;
  --ink: #17262A;
  --muted: #56676A;
  --line: #CBD5D1;
  --hot: #B36A0B;
  --hot-band: #E9A23B;
  --rare: #5446C4;
  --rare-band: #7D72E0;
  --warn-bg: #FBEBD0;
  --display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
  --body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101A1C;
    --surface: #172426;
    --ink: #E2EBE7;
    --muted: #93A3A4;
    --line: #2A3B3D;
    --hot: #F0B04F;
    --hot-band: #F0B04F;
    --rare: #A79EF5;
    --rare-band: #8D82EE;
    --warn-bg: #3A2C14;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 2px solid var(--rare);
  outline-offset: 2px;
}

/* Bố cục: một cột trên điện thoại, cột nguồn bên trái trên màn hình rộng */
.shell {
  max-width: 44rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem calc(3rem + env(safe-area-inset-bottom));
}

.side { min-width: 0; }
.content { min-width: 0; }

@media (min-width: 60rem) {
  .shell {
    max-width: 72rem;
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 3.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .side {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding-top: .5rem;
  }
}

/* Cột trái */
.when {
  margin: 0;
  color: var(--muted);
  font-size: .9375rem;
}

.title {
  margin: .1rem 0 1.25rem;
  font: 800 clamp(2.5rem, 11vw, 3.6rem)/.95 var(--display);
  letter-spacing: -.035em;
}

.periods {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.periods button {
  border: 0;
  background: none;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
}

.periods button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.sources {
  display: flex;
  gap: .4rem;
  margin: 1rem -1rem 0;
  padding: 0 1rem .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.sources::-webkit-scrollbar { display: none; }

.sources button {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  border: 1px solid var(--line);
  background: none;
  padding: .35rem .8rem;
  border-radius: 8px;
  font-size: .9375rem;
  text-align: left;
}

.sources .count { color: var(--muted); font-size: .8125rem; }
.sources .note { color: var(--muted); font-size: .8125rem; }

.sources button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.sources button[aria-pressed="true"] .count { color: inherit; opacity: .75; }
.sources button:disabled { opacity: .55; }

/* "Đã lưu" tách khỏi các nguồn bằng một khoảng trống và đường kẻ */
.sources .saved-entry { margin-left: .5rem; }

@media (min-width: 60rem) {
  .sources .saved-entry {
    margin: .75rem 0 0;
    position: relative;
  }
  .sources .saved-entry::before {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: -.4rem;
    border-top: 1px solid var(--line);
  }
}

@media (min-width: 60rem) {
  .sources {
    flex-direction: column;
    gap: .15rem;
    margin: 1.75rem 0 0;
    padding: 0;
    overflow: visible;
  }
  .sources button {
    justify-content: space-between;
    border-color: transparent;
    padding: .5rem .75rem;
  }
  .sources button:not(:disabled):not([aria-pressed="true"]):hover { background: var(--surface); }
}

.install {
  display: block;
  margin-top: 1.25rem;
  border: 0;
  background: none;
  padding: 0;
  color: var(--rare);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.install[hidden] { display: none; }

/* Cột nội dung */
.content { margin-top: 2rem; }

@media (min-width: 60rem) {
  .content { margin-top: 0; padding-top: 2.6rem; }
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
}

.list-title {
  margin: 0;
  font: 700 1.5rem/1.2 var(--display);
  letter-spacing: -.015em;
}

.list-note {
  color: var(--muted);
  font-size: .9375rem;
}

.list-note[hidden] { display: none; }

.source-link {
  color: var(--muted);
  font-size: .9375rem;
}

.source-link[hidden] { display: none; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.filters button {
  border: 1px solid var(--line);
  background: none;
  padding: .3rem .8rem;
  border-radius: 8px;
  font-size: .9375rem;
}

.filters span { color: var(--muted); }

.filters button[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.warnings {
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  background: var(--warn-bg);
  font-size: .9375rem;
}

.warnings p { margin: 0; }

.list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.repo {
  position: relative;
  padding: 0 0 2rem 1.1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.repo::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  bottom: 2rem;
  width: 4px;
  border-radius: 2px;
  background: var(--hot-band);
}

.repo[data-label="la"]::before { background: var(--rare-band); }

.tag {
  margin: 0;
  font-weight: 600;
  font-size: .875rem;
  color: var(--hot);
}

.repo[data-label="la"] .tag { color: var(--rare); }

.name {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: .1rem 0 .15rem;
  font: 700 clamp(1.35rem, 5.5vw, 1.75rem)/1.15 var(--display);
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.rank {
  flex: none;
  color: var(--muted);
  font-weight: 500;
}

.rank:empty { display: none; }

.name a { text-decoration: none; min-width: 0; }
.name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.source {
  display: inline-block;
  color: var(--muted);
  font-size: .875rem;
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
}

.chips li {
  padding: .1rem .55rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .8125rem;
}

.purpose {
  margin: .9rem 0 0;
  max-width: 38rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.ask-open {
  border: 1px solid var(--rare);
  background: none;
  color: var(--rare);
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
}

.ask-open:hover, .ask-open[aria-expanded="true"] { background: var(--rare); color: var(--paper); }

.demo-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.demo-link:hover { border-color: var(--ink); }

.preview {
  display: block;
  max-width: 100%;
  max-height: 22rem;
  margin-top: 1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  object-fit: contain;
}

.save-toggle {
  border: 1px solid var(--line);
  background: none;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
}

.save-toggle:hover { border-color: var(--ink); color: var(--ink); }

.save-toggle[aria-pressed="true"] {
  border-color: var(--hot-band);
  background: var(--hot-band);
  color: #1d1300;
}

.review { margin-top: .75rem; }

.review summary {
  width: fit-content;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--muted);
  cursor: pointer;
}

.review dl {
  display: grid;
  gap: .9rem;
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface);
}

.review dt {
  font-weight: 600;
  font-size: .875rem;
}

.review dd {
  margin: .1rem 0 0;
  max-width: 36rem;
  font-size: .9375rem;
}

.empty {
  margin-top: 2.5rem;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .review dl {
    grid-template-columns: 9rem 1fr;
    gap: .9rem 1.25rem;
  }
  .review dd { margin: 0; }
}

/* Hỏi AI: khung chat nằm bên phải, cao bằng cả mục repo (tính tới dòng "Xem đánh giá").
   Mở phần đánh giá thì mục dài ra nhưng khung giữ nguyên chiều cao. */
.repo.chatting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: start;
}

.main { min-width: 0; }

.chat[hidden] { display: none; }

.chat {
  position: relative;
  height: 16rem; /* JS đặt lại cho khớp chiều cao mục repo trên màn hình rộng */
}

.chat-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

@media (max-width: 40rem) {
  .repo.chatting { grid-template-columns: 1fr; gap: 1rem; }
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .875rem;
}

.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.chat-suggest button {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8125rem;
}

.msg {
  max-width: 94%;
  padding: .4rem .65rem;
  border-radius: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.msg p { margin: 0 0 .4rem; }
.msg p:last-child, .msg ul:last-child { margin-bottom: 0; }
.msg ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.msg code { font-size: .9em; padding: 0 .25em; border-radius: 4px; background: var(--surface); }

.msg-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
}

.msg-ai {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
}

.msg-error {
  align-self: flex-start;
  background: var(--warn-bg);
}

.msg-meta {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .75rem;
}

.chat-form {
  display: flex;
  gap: .4rem;
  padding: .45rem;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .875rem;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .35rem .6rem;
}

.chat-form button {
  flex: none;
  border: 0;
  background: var(--rare);
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
}

.chat-form button:disabled { opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  .review[open] dl { animation: open .18s ease-out; }
  @keyframes open { from { opacity: 0; transform: translateY(-4px); } }
}