/* Assistant + back-to-top. Both live in the bottom inline-end corner and are
   stacked, never overlapping — the arrow sits above the launcher and steps out
   of the way when the chat panel is open. Logical properties throughout, so
   the whole cluster mirrors on the Arabic build without a second rule. */

.j-top,
.j-launch {
  position: fixed;
  inset-inline-end: 16px;
  z-index: 60;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  box-shadow: 0 2px 6px rgba(14,31,28,.12), 0 14px 34px -18px rgba(14,31,28,.6);
}

/* ---- back to top ---- */
.j-top {
  inset-block-end: 82px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, color .15s ease, border-color .15s ease;
}
body.j-scrolled .j-top { opacity: 1; visibility: visible; transform: none; }
.j-top:hover { color: var(--petrol); border-color: var(--petrol); }
.j-top:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* No assistant on the page: the arrow takes the corner itself. */
body:not(.j-has-chat) .j-top { inset-block-end: 20px; }
/* Panel open: get out of its way rather than floating over it. */
body.j-open .j-top { opacity: 0; visibility: hidden; }

/* ---- launcher ---- */
.j-launch {
  inset-block-end: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 17px;
  background: var(--petrol); color: #fff;
  border-radius: 40px;
  font-size: 14.5px; font-weight: 700;
  transition: background .15s ease;
}
.j-launch:hover { background: var(--petrol-dk); }
.j-launch:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.j-launch svg { flex: none; }
body.j-open .j-launch { background: var(--ink); }

/* ---- panel ---- */
.j-panel {
  position: fixed;
  inset-block-end: 76px;
  inset-inline-end: 16px;
  z-index: 61;
  width: min(376px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(14,31,28,.08), 0 30px 70px -30px rgba(14,31,28,.7);
}
@media (max-width: 520px) {
  /* A phone gets a sheet, not a floating card — thumbs need the whole width. */
  .j-panel {
    inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: 0;
  }
  body.j-open .j-launch { display: none; }
}

.j-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  background: var(--petrol); color: #fff;
}
.j-head b { display: block; font-size: 15px; font-weight: 700; }
.j-head span { display: block; font-size: 11.5px; color: #B8DCD8; margin-block-start: 2px; }
.j-close {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.j-close:hover { background: rgba(255,255,255,.26); }
.j-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.j-log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  overscroll-behavior: contain;
}
.j-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 14.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.loc-ar .j-msg { line-height: 1.85; }
.j-bot {
  align-self: flex-start;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  border-start-start-radius: 4px;
}
.j-me {
  align-self: flex-end;
  background: var(--petrol); color: #fff;
  border-start-end-radius: 4px;
}
.j-bot a { color: var(--petrol); font-weight: 700; }

.j-typing { display: flex; gap: 4px; align-items: center; padding: 14px 15px; }
.j-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  animation: j-blink 1.2s infinite ease-in-out;
}
.j-typing i:nth-child(2) { animation-delay: .18s; }
.j-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes j-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.j-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px; background: var(--paper); }
.j-chips:empty { display: none; }
.j-chip {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--petrol); background: var(--primary-soft);
  border: 1px solid transparent; border-radius: 30px;
  padding: 7px 12px; cursor: pointer; text-align: start;
}
.j-chip:hover { border-color: var(--petrol); }
.j-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.j-form {
  display: flex; gap: 8px; padding: 12px 14px 8px;
  background: var(--paper); border-block-start: 1px solid var(--line);
}
.j-form input {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 30px;
  padding: 11px 15px;
}
.j-form input:focus { outline: 2px solid var(--petrol); outline-offset: -1px; }
.j-form button {
  flex: none; width: 42px; height: 42px;
  background: var(--petrol); color: #fff;
  border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.j-form button:hover { background: var(--petrol-dk); }
.j-form button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.j-fine {
  margin: 0; padding: 0 16px 12px;
  background: var(--paper);
  font-size: 11px; line-height: 1.6; color: var(--ink-3); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .j-top, .j-launch, .j-typing i { transition: none; animation: none; }
}

/* The wordmark in the assistant header — the brand should be on the one
   surface a customer talks to, not just the pages they scroll past. */
.j-mark{line-height:1;padding-bottom:3px}
.j-mark .lw{
  display:inline-flex; align-items:baseline; white-space:nowrap;
  font-family:Archivo,system-ui,sans-serif; font-size:18px; letter-spacing:-.03em; color:#fff;
}
/* .j-head b sets display:block for the old title layout — it also caught the
   <b> inside the wordmark and dropped "cargo" onto a second line. */
.j-mark .lw b{display:inline;font-weight:800;font-size:inherit}
.j-mark .lw i{display:inline;color:#E0A44F;font-weight:500;font-style:normal}

/* Install button. Only ever in the DOM when the browser has said installing
   will actually work, so it can never be a button that does nothing. Sits
   above the back-to-top so the corner stack stays: install, top, chat. */
.j-install{
  position:fixed; inset-inline-end:16px; inset-block-end:136px; z-index:60;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border:1px solid var(--line); border-radius:40px;
  background:var(--surface); color:var(--petrol);
  font-family:var(--sans); font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 6px rgba(14,31,28,.12), 0 14px 34px -18px rgba(14,31,28,.6);
}
.j-install:hover{border-color:var(--petrol)}
.j-install:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.j-install svg{flex:none}
body:not(.j-has-chat) .j-install{inset-block-end:74px}
body.j-open .j-install{display:none}