/* Results: panel, cards, pager, zero results, details sheet, comparison. Colors come from styles.css. */

.panel {
  --card-media-min: 120px;
  flex: 0 0 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  padding: 14px 16px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-muted);
}
.panel[hidden], .sheet[hidden] { display: none; }
/* Desktop: the results sit beside the messages, so their place in the conversation stays empty. */
.message--panel:empty { display: none; }
.panel--fresh { animation: panel-in var(--appear); }
.panel--fresh .card { animation: message-in 0.3s ease-out both; }
.panel--fresh .card:nth-child(2) { animation-delay: 0.06s; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
/* Paging: the next cards come from the right, the previous ones from the left. */
.panel--next .card { animation: slide-from-right 0.3s ease-out both; }
.panel--prev .card { animation: slide-from-left 0.3s ease-out both; }
.panel--next .card:nth-child(2), .panel--prev .card:nth-child(2) { animation-delay: 0.05s; }
.panel--next .pager-status, .panel--prev .pager-status { animation: panel-in 0.3s ease-out; }
@keyframes slide-from-right { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: none; } }
@keyframes slide-from-left { from { opacity: 0; translate: -36px 0; } to { opacity: 1; translate: none; } }

.panel-header { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-muted); }

/* Desktop: the two cards fill the panel; the image takes the height the text leaves. */
.panel .cards {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Never shorter than its content: the pager may not cover the cards; the image gives way first. */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  min-width: 0;
  transition: translate 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .card:hover { translate: 0 -3px; border-color: var(--accent); box-shadow: 0 8px 20px rgba(28, 38, 48, 0.12); }
}
.card-media { position: relative; flex: 1 1 auto; min-height: var(--card-media-min); background: #ffffff; display: grid; place-items: center; border-bottom: 1px solid var(--edge); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card--project .card-media img, .card--space .card-media img { object-fit: cover; }
.card-media-empty { color: var(--text-muted); font-size: 13px; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.card-title { margin: 0; font-size: 18px; font-weight: 600; }
.card-value { margin: 0; font-size: 26px; font-weight: 700; color: var(--accent-strong); }
.card-subtitle, .card-detail { margin: 0; font-size: 14px; color: var(--text-muted); }
.card-price { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Large, easy to hit; they share the card width, and on a narrow card each takes a full row. */
.card-actions .button-primary, .card-actions .button-link { flex: 1 1 auto; justify-content: center; min-height: 38px; padding: 8px 10px; font-size: 14px; font-weight: 600; }
.card-source { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

.button-primary, .button-link, .button-secondary {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, scale 0.1s ease;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.button-primary { background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); }
.button-secondary { background: var(--surface); color: var(--accent-strong); border: 1px solid var(--accent); }
.button-link { color: var(--accent-strong); border: 1px solid var(--edge-strong); background: var(--surface); }
.button-primary:disabled, .button-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.button-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.button-link:hover, .button-secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pager-status { font-size: 14px; font-weight: 600; color: var(--text); }
/* Paging is the main way through the results: filled buttons, clearly different when unavailable. */
.button-pager {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(47, 111, 106, 0.28);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, scale 0.1s ease;
}
.button-pager:hover:not(:disabled), .button-pager:focus-visible { background: var(--accent-strong); box-shadow: 0 5px 14px rgba(47, 111, 106, 0.36); }
.button-pager:disabled { background: var(--surface-muted); border-color: var(--edge); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }

.zero { text-align: center; padding: 24px 8px; margin-block: auto; }
.zero-art { width: 180px; height: auto; margin: 0 auto 12px; display: block; }
.zero-art-building { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.zero-art-window, .zero-art-door { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.zero-art-ground { stroke: var(--border); stroke-width: 2; }
.zero-art-badge { fill: var(--accent); }
.zero-art-mark { fill: none; stroke: var(--accent-contrast); stroke-width: 3.5; stroke-linecap: round; }
.zero-art-dot { fill: var(--accent-contrast); }
.zero-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.zero-tip { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); }
.zero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

/* Short or narrow desktop panels (e.g. 1100 × 700): flatter images, so both cards and the pager fit. */
@media (min-width: 980px) {
  .panel { container: results / size; }
  /* The two cards share their rows: same image height, titles on one line, buttons aligned at the bottom. */
  .panel .cards { grid-template-rows: minmax(var(--card-media-min), 1fr) auto; }
  .card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .card-actions { margin-top: auto; padding-top: 8px; }
  @container results (max-height: 600px) {
    .card-source { display: none; }
    .cards { --card-media-min: 70px; }
    .card-body { padding: 10px 12px; }
    .card-value { font-size: 22px; }
  }
  @container results (max-width: 500px) {
    .card-title { font-size: 16px; }
    .card-value { font-size: 22px; }
    .card-actions .button-primary, .card-actions .button-link { min-height: 36px; padding: 7px 8px; font-size: 13px; }
  }
}

/* ---------- Details sheet ---------- */

.sheet {
  --sheet-pad: 16px;
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sheet-pad);
  z-index: 2;
  container-type: size;
  animation: sheet-in var(--appear);
}
@keyframes sheet-in { from { opacity: 0; translate: 16px 0; } to { opacity: 1; translate: none; } }
.sheet--closing { animation: sheet-out 0.2s ease-in forwards; }
@keyframes sheet-out { to { opacity: 0; translate: 24px 0; } }
/* The first screen of the sheet is exactly the visible height: the image shrinks or grows so the
   section buttons are always seen on opening; the sections follow below. */
.sheet-hero { min-height: calc(100cqh - 2 * var(--sheet-pad)); display: flex; flex-direction: column; }
.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sheet-title { margin: 0; font-size: 20px; }
.sheet-subtitle { margin: 2px 0 12px; font-size: 14px; color: var(--text-muted); }
.sheet-hero:not(:has(.sheet-media)) { min-height: 0; }
.sheet-media { flex: 1 1 0; min-height: 140px; display: flex; flex-direction: column; }
.sheet-gallery { position: relative; flex: 1 1 auto; min-height: 0; background: #ffffff; border: 1px solid var(--edge); border-radius: var(--radius-card); overflow: hidden; }
.sheet-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.image-swap { animation: panel-in 0.25s ease-out; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}
.gallery-arrow--prev { left: 8px; }
.gallery-arrow--next { right: 8px; }
.gallery-thumbs { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; overscroll-behavior: contain; }
.gallery-thumb { flex: 0 0 64px; height: 48px; border: 1px solid var(--edge); border-radius: 8px; padding: 0; background: #ffffff; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb[aria-current="true"] { border: 2px solid var(--accent); }
.sheet-intro { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.sheet-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.sheet-nav .button-secondary { min-height: 36px; }
.sheet-section { padding-top: 14px; }
.sheet-section h3 { margin: 0 0 6px; font-size: 15px; }
.sheet-section ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.sheet-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- Comparison ---------- */

.message--with-table { max-width: 100%; width: 100%; }
.comparison { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; background: var(--surface); border-radius: 10px; overflow: hidden; overflow-wrap: normal; }
.comparison th, .comparison td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.comparison tbody th { white-space: nowrap; }
.comparison thead th { background: var(--accent-soft); }
.comparison .value-unpublished { color: var(--text-muted); font-style: italic; }

/* ---------- Phone and tablet: results inside the conversation, compact cards ---------- */

@media (max-width: 979.98px) {
  .panel {
    display: block;
    flex: none;
    border-left: none;
    padding: 0;
    background: transparent;
    overflow: visible;
  }
  .message--panel { max-width: 100%; width: 100%; padding: 0; background: transparent; }
  .panel-header { margin-bottom: 8px; }
  .panel .cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .card { flex-direction: row; }
  /* The image fills the media box; the text decides the card height, so loading never moves the list. */
  .card-media { flex: 0 0 36%; min-height: 0; border-bottom: none; border-right: 1px solid var(--edge); }
  /* Beside the image the text shrinks: a long name never pushes the card out of the screen. */
  .card-body { flex: 1 1 auto; padding: 8px 10px; gap: 2px; min-width: 0; line-height: 1.3; }
  .card-title { font-size: 14px; }
  .card-value { font-size: 17px; }
  .card-subtitle, .card-detail { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-price { font-size: 12px; margin-top: 0; }
  .card-actions { margin-top: 4px; gap: 6px; }
  .card-actions .button-primary, .card-actions .button-link { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  .card-source { display: none; }
  .pager { margin-top: 8px; }
  .button-pager { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .sheet { inset: 0; width: auto; border-left: none; }
  .comparison thead { display: none; }
  .comparison tr { display: block; border-bottom: 1px solid var(--border); padding: 4px 0; }
  .comparison th, .comparison td { display: block; border: none; padding: 2px 8px; }
  .comparison td::before { content: attr(data-column) ": "; color: var(--text-muted); }
}

/* Tablet width: the two cards side by side, still inside the conversation. */
@media (min-width: 600px) and (max-width: 979.98px) {
  .panel .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone held sideways: the sheet shows the image beside the title, details and section buttons. */
@media (max-width: 979.98px) and (max-height: 500px) {
  .sheet-hero {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "media top" "media intro" "media nav";
    column-gap: 14px;
  }
  .sheet { --sheet-pad: 12px; }
  .sheet-top { grid-area: top; }
  .sheet-title { font-size: 17px; }
  .sheet-subtitle { margin-bottom: 6px; font-size: 13px; }
  .sheet-media { grid-area: media; min-height: 0; }
  .sheet-intro { grid-area: intro; margin-top: 0; font-size: 13px; line-height: 1.35; }
  .sheet-nav { grid-area: nav; align-self: end; margin-top: 8px; }
}