/* DAAC Hermes — Asistent Auto AI. Layout and behaviour: project rules 13.0 (approved figures); colours: 5c.11. */

:root {
  --accent: #007550;
  --accent-dark: #005c3f;
  --accent-soft: #e3f1ec;
  --ink: #231f20;
  --ink-soft: #5b5759;
  --line: #d6ddda;
  --line-strong: #a3b2ab;
  --focus-ring: 0 0 0 3px rgba(0, 117, 80, 0.2);
  --surface: #ffffff;
  --surface-soft: #f5f7f6;
  --bubble-user: #007550;
  --bubble-bot: #f1f3f2;
  --warning-bg: #fff7e0;
  --warning-line: #f0d48a;
  --shadow: 0 18px 48px rgba(35, 31, 32, 0.16);
  --radius: 18px;
  --page-zoom: 1;
  --side: clamp(16px, 5vw, 96px);
  --chat-compact-width: 460px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --press: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(135deg, #eef4f1 0%, #f7f8f7 45%, #e4eee9 100%);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Animations: messages, cards, the sheet and the chat window come in softly; off with prefers-reduced-motion. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide-left { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes chat-out { to { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes sheet-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { to { opacity: 0; transform: translateX(28px); } }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- presentation text ---------- */

.intro__title { margin: 0 0 14px; font-size: 27px; line-height: 1.2; }
.intro__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.intro__stats { display: flex; gap: 28px; margin: 0 0 22px; padding: 0; list-style: none; }
.intro__stats li { display: flex; flex-direction: column; gap: 2px; }
.intro__stats strong { font-size: 18px; color: var(--accent); }
.intro__stats span { font-size: 12px; color: var(--ink-soft); }
.intro__points { margin: 0 0 22px; padding-left: 18px; font-size: 13px; line-height: 1.7; list-style: disc; }
.intro__warning {
  display: block; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: 10px;
}
.intro__warning strong { display: block; margin-bottom: 2px; }

/* ---------- chat window ---------- */

.chat {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transform-origin: 100% 100%;
}
.chat:not(.chat--open) { display: none; }
.chat--open { animation: chat-in 0.32s var(--ease-out); }
.chat--closing { animation: chat-out 0.22s ease-in forwards; }

.chat__header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--accent); color: #fff;
}
.chat__avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.chat__title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.icon-button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: transparent; color: #fff;
  font-size: 18px; cursor: pointer; transition: var(--press);
}
.icon-button:hover, .icon-button:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.icon-button:focus-visible { outline-color: #fff; }
.icon-button:active:not(:disabled) { transform: scale(0.92); }
.icon-button:disabled { opacity: 0.5; cursor: default; }

.chat__body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }

.messages {
  position: relative; margin: 0; padding: 14px 14px 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}

.message {
  max-width: 85%; padding: 10px 13px; border: 1px solid transparent; border-radius: 14px;
  font-size: 15px; line-height: 1.45; animation: rise 0.3s var(--ease-out);
}
.message p { margin: 0; }
.message ul { margin: 2px 0; padding-left: 20px; list-style: disc; }
.message--bot { align-self: flex-start; background: var(--bubble-bot); border-color: var(--line); border-bottom-left-radius: 4px; }
.message--user { align-self: flex-end; background: var(--bubble-user); color: #fff; border-bottom-right-radius: 4px; animation-name: slide-left; }
.message--welcome { max-width: 100%; }
.message--notice { align-self: center; background: transparent; border-color: transparent; color: var(--ink-soft); font-size: 13px; }

.welcome-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  padding: 8px 13px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--surface); color: var(--accent); font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: var(--press);
}
.chip:hover, .chip:focus-visible { background: var(--accent-soft); box-shadow: 0 2px 6px rgba(0, 117, 80, 0.18); }
.chip:active { transform: scale(0.96); }

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; animation: fade 0.25s ease-out; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---------- composer ---------- */

.composer {
  display: flex; align-items: center; gap: 10px;
  padding: 26px 14px 44px; border-top: 1px solid var(--line); background: var(--surface);
}
/* A clear contour, so the place to write is seen at once; 13.5 px + 1.5 px keep the approved 78 px box. */
.composer__input {
  flex: 1; height: auto; resize: none; padding: 13.5px 14px; font: inherit; font-size: 17px; line-height: 1.4;
  color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(35, 31, 32, 0.06); transition: var(--press);
}
.composer__input:hover { border-color: var(--ink-soft); }
.composer__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.composer__input::placeholder { color: #7d8682; }

.send-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 117, 80, 0.3); transition: var(--press);
}
.send-button:hover, .send-button:focus-visible { background: var(--accent-dark); box-shadow: 0 5px 14px rgba(0, 117, 80, 0.38); }
.send-button:active:not(:disabled) { transform: scale(0.93); }
.send-button:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
/* The plane points up-right: moved 1 px left and down so it looks centred in the circle. */
.send-button__icon { flex: none; width: 24px; height: 24px; transform: translate(-1px, 1px); }
.send-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- results panel ---------- */

.panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.panel[hidden] { display: none; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-soft); animation: fade 0.3s ease-out; }
.panel__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.panel__pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 2px 8px rgba(35, 31, 32, 0.06); animation: rise 0.35s var(--ease-out) both;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:nth-child(2) { animation-delay: 0.07s; }
.card:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(35, 31, 32, 0.12); }
/* The whole car is shown, never cropped (owner, 2026-10-08: "prea zoomed-in"): the site's photos are 1.5–1.9 times
   wider than tall, most of them studio shots on white — so `contain` on a white background. */
.card__photo { position: relative; overflow: hidden; aspect-ratio: 1.15; background: #fff; cursor: pointer; }
.card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s var(--ease-out); }
.card:hover .card__photo img { transform: scale(1.04); }
.card__label {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
}
.card__label--used { background: var(--ink); }
.card__label--demo { background: #8a6d00; }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.card__title { margin: 0; font-size: 18px; line-height: 1.25; }
.card__trim { margin: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__price { margin: 2px 0; font-size: 26px; font-weight: 700; color: var(--accent); }
.card__old-price { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--ink-soft); text-decoration: line-through; }
.card__line { margin: 0; font-size: 14px; color: var(--ink-soft); }
.card__soon { margin: 0; font-size: 13px; color: #8a6d00; font-weight: 600; }
.card__actions { display: flex; gap: 8px; margin-top: 8px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--accent);
  font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: var(--press);
}
.button--solid { background: var(--accent); color: #fff; }
.button:hover, .button:focus-visible { background: var(--accent-soft); }
.button--solid:hover, .button--solid:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); }
.button:active:not(:disabled) { transform: scale(0.96); }
.button:disabled { opacity: 0.45; cursor: default; }

/* zero results (13.8) */
.zero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; text-align: center; animation: rise 0.35s var(--ease-out); }
.zero svg { width: 170px; height: auto; }
.zero__title { margin: 0; font-size: 18px; }
.zero__advice { margin: 0; font-size: 14px; color: var(--ink-soft); }
.zero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- detail sheet (13.4) ---------- */

.sheet {
  position: absolute; inset: 0; z-index: 2; display: block; container-type: size;
  background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
  animation: sheet-in 0.3s var(--ease-out);
}
.sheet[hidden] { display: none; }
.sheet--closing { animation: sheet-out 0.22s ease-in forwards; }
/* The bar stays on top while the sheet scrolls: "back" and the section buttons are always in view (owner, 2026-10-08). */
.sheet__top {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(35, 31, 32, 0.06);
}
.sheet__top .button { padding: 6px 11px; font-size: 13px; border-radius: 999px; }
.sheet__back { flex: none; gap: 4px; }
.sheet__back-arrow { font-size: 17px; line-height: 1; }
.sheet__nav { display: flex; flex: 1; justify-content: flex-end; gap: 6px; min-width: 0; }
/* The big photo leaves room under it for the title, the price and "Vezi oferta" — all seen when the sheet opens
   (owner, 2026-10-08); --sheet-below = the bar on top, the thumbnails and that block. */
.sheet__gallery { position: relative; overflow: hidden; background: #fff; }
.sheet__photo {
  --sheet-below: 330px;
  width: 100%; height: min(62.5cqw, max(150px, calc(100cqh - var(--sheet-below))));
  object-fit: contain; animation: fade 0.3s ease-out;
}
.sheet__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-size: 22px; cursor: pointer; transition: var(--press);
}
.sheet__arrow:hover { background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); }
.sheet__arrow:active { transform: translateY(-50%) scale(0.9); }
.sheet__arrow--prev { left: 10px; }
.sheet__arrow--next { right: 10px; }
.sheet__arrow[hidden] { display: none; }
.sheet__thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scroll-behavior: smooth; }
.sheet__thumbs button {
  flex: none; width: 72px; height: 50px; padding: 0; border: 2px solid var(--line); border-radius: 6px;
  overflow: hidden; cursor: pointer; background: none; opacity: 0.8; transition: var(--press), opacity 0.18s ease;
}
.sheet__thumbs button:hover { opacity: 1; border-color: var(--line-strong); }
.sheet__thumbs button[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.sheet__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sheet__content { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sheet__title { margin: 0; font-size: 20px; }
.sheet__price { margin: 0; font-size: 26px; font-weight: 700; color: var(--accent); }
.sheet__section { scroll-margin-top: 64px; }
.sheet__section h4 { margin: 8px 0; font-size: 16px; }
.sheet__specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.sheet__specs dt { color: var(--ink-soft); }
.sheet__specs dd { margin: 0; }
.sheet__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sheet__columns ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; list-style: disc; }

/* ---------- buttons outside the chat ---------- */

.reopen-button {
  position: fixed; right: 20px; bottom: 20px; z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 2px solid #fff; border-radius: 999px; background: var(--accent); color: #fff;
  box-shadow: var(--shadow); font-weight: 600; cursor: pointer;
  animation: pop 0.3s var(--ease-out); transition: var(--press);
}
.reopen-button:hover, .reopen-button:focus-visible { background: var(--accent-dark); transform: translateY(-2px); }
.reopen-button:active { transform: scale(0.95); }
.reopen-button[hidden] { display: none; }

.scroll-button {
  position: fixed; right: 6px; top: 50%; z-index: 20; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; transform: translateY(-50%);
  border: 2px solid #fff; border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); font-size: 18px; cursor: pointer; transition: var(--press);
}
.scroll-button:active { transform: translateY(-50%) scale(0.9); }
.scroll-button[hidden] { display: none; }

/* ---------- desktop (≥ 980 px) ---------- */

@media (min-width: 980px) {
  html, body { height: 100%; }
  body { zoom: var(--page-zoom); overflow: hidden; }
  .page {
    display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: center;
    max-width: 1560px; height: calc(100vh / var(--page-zoom)); margin: 0 auto; padding: 0 var(--side);
  }
  .intro { transform: translate(calc(-1 * min(3vw, 60px)), calc(-1 * min(2.5vh, 28px))); }

  .chat {
    --extra: min(60px, calc(var(--side) - 16px));
    --overhang: min(108px, calc(var(--side) - 16px));
    justify-self: end; align-self: center;
    width: var(--chat-compact-width);
    height: calc(min(700px, 100vh - 140px) / var(--page-zoom));
    margin-right: max(0px, calc((100% - var(--chat-compact-width)) / 2));
    transition: width 0.35s ease, height 0.35s ease, margin-right 0.35s ease;
  }
  .chat--expanded {
    width: calc(100% + var(--extra));
    height: calc(min(780px, 100vh - 140px) / var(--page-zoom));
    margin-right: calc(-1 * var(--overhang));
  }
  .chat--expanded .chat__body { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr); }
  .chat--expanded .panel { border-left: 1px solid var(--line); }
  /* The two cards take all the height left between the counter and the pager: the photos grow, no empty band below
     (owner, 2026-10-08: "cartonașele sunt cam mici și rămâne loc liber sub ele"). */
  /* The photo takes the height first (grow 1000 : 1), but at most 0.8 of its width — a taller box would only add
     white above and below the car; what is left goes to the text, with the buttons kept at the bottom of the card. */
  .panel__cards { flex: 1 0 auto; grid-auto-rows: minmax(0, 1fr); }
  .card { container-type: inline-size; }
  .card__photo { flex: 1000 1 auto; aspect-ratio: auto; min-height: 150px; max-height: 80cqw; }
  .card__body { flex: 1 0 auto; gap: 5px; padding: 12px 14px 14px; }
  .card__actions { margin-top: auto; padding-top: 8px; }
  .card__title { font-size: 19px; }
  .card__trim { font-size: 14px; }
  .card__line { font-size: 15px; }
  .card__actions .button { flex: 1; padding: 9px 14px; font-size: 15px; }
  .chat--expanded .sheet { left: auto; width: calc(100% * 1.6 / 2.45); border-left: 1px solid var(--line); }
  .chat:not(.chat--expanded) .message:first-child { margin-top: 20px; }
  .chat--expanded .send-button { width: auto; padding: 0 18px; border-radius: 999px; }
  .chat--expanded .send-button__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .scroll-button { display: none; }
}

/* Low desktop screens (e.g. 1100×700): shorter photos, so both cars and the pager stay visible. */
@media (min-width: 980px) and (max-height: 760px) {
  .card__photo { min-height: 120px; }
  .card__price { font-size: 22px; }
}

/* ---------- phone and tablet (< 980 px) ---------- */

@media (max-width: 979.98px) {
  body.chat-is-open, html.chat-is-open { overflow: hidden; }
  .page { display: flex; flex-direction: column; }
  .chat { order: -1; height: calc(100dvh - 24px); margin: 12px; }
  .intro { padding: 28px 20px 96px; }
  .message { font-size: 15px; }
  .panel-item { list-style: none; }
  .panel { padding: 4px 0; overflow: visible; }
  .panel__cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card { flex-direction: row; }
  .card__photo { flex: none; width: 36%; aspect-ratio: auto; min-height: 100%; }
  .card__body { min-width: 0; gap: 2px; padding: 8px 10px; }
  .card__title { font-size: 14px; }
  .card__trim { font-size: 12px; }
  .card__price { margin: 0; font-size: 17px; }
  .card__old-price { font-size: 12px; }
  .card__line { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card__actions { margin-top: 4px; }
  .card__actions .button { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
  .panel__pager .button { padding: 5px 10px; font-size: 13px; }
  .card__label { top: 5px; left: 5px; padding: 2px 6px; font-size: 10px; }
  .chip { padding: 6px 10px; font-size: 13px; }
  .composer { padding: 10px 10px 44px; }
  .composer__input { height: 44px; padding: 8.5px 12px; font-size: 16px; }
  .send-button { width: 44px; height: 44px; }
  .send-button__icon { width: 21px; height: 21px; }
  .sheet__columns { grid-template-columns: 1fr; }
  /* Narrow sheet bar: "back" keeps only its arrow (the name stays for screen readers), so the 4 buttons fit on one row. */
  .sheet__top { gap: 5px; padding: 8px 10px; }
  .sheet__top .button { padding: 6px 9px; font-size: 12.5px; }
  .sheet__back { width: 34px; padding: 0; height: 32px; }
  .sheet__back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sheet__nav { justify-content: space-between; }
}

@media (max-width: 559.98px) {
  .chat { height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}