/* Zimam AI (#zimam-ai). Prefix: ha-.
   Two columns on the sky zone: the promise on the start side (eyebrow, H2, lead, four checks) and,
   on the end side, the assistant itself. The panel is a graphite window in both themes (like a real
   assistant docked in the product): a title bar with the product's own four-point star, the morning
   briefing (three insights, each with a type icon and one action), one question and its answer, and
   the input. The markup is the final frame; js/h-ai.js plays it in.
   >= 1024px: two columns. Below: copy first, then the panel at full width. */

.ha {
  --ha-col: clamp(48px, 6vw, 104px);
}

/* ---------- Layout ---------- */
.ha-grid { display: grid; gap: clamp(44px, 7vw, 64px); }
@media (min-width: 1024px) {
  .ha-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); column-gap: var(--ha-col); align-items: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ha-copy, .ha-panel { width: 100%; max-width: 640px; margin-inline: auto; }
}

/* ---------- Copy ---------- */
.ha-head { margin-block-end: 0; max-width: 34rem; }
.ha-lead { max-width: 32rem; }
.ha-checks { display: grid; gap: 14px; max-width: 32rem; margin-block-start: clamp(28px, 3.2vw, 40px); }
.ha-check {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em;
  color: var(--page-ink);
  text-wrap: pretty;
}
.ha-check__ico { display: grid; place-items: center; width: 24px; height: 24px; margin-block-start: 1px; border-radius: 50%; background: var(--z-blue); color: #fff; }
.ha-check__ico .ico { width: 13px; height: 13px; }
:lang(ar) .ha-check { letter-spacing: 0; line-height: 1.7; }
:lang(ar) .ha-check__ico { margin-block-start: 3px; }

/* ---------- The assistant panel (always graphite) ---------- */
.ha-panel {
  --ha-bg: #141419;
  --ha-raise: #1B1B22;
  --ha-ink: #F2F2F5;
  --ha-ink-2: rgba(242, 242, 245, .72);
  --ha-ink-3: rgba(242, 242, 245, .48);
  --ha-line: rgba(255, 255, 255, .075);
  --ha-chip: rgba(255, 255, 255, .07);
  --ha-star: #FF9F43;
  --ha-sh: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(16, 24, 40, .08), 0 26px 50px -18px rgba(16, 24, 40, .34), 0 70px 110px -50px rgba(30, 52, 120, .38);
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  border-radius: 24px;
  background: var(--ha-bg);
  box-shadow: var(--ha-sh);
  color: var(--ha-ink);
  color-scheme: dark;
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em;
  text-align: start;
  overflow: hidden;
}
:lang(ar) .ha-panel { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; letter-spacing: 0; }
[data-theme="dark"] .ha-panel {
  --ha-bg: #17171E;
  --ha-raise: #1E1E26;
  --ha-sh: inset 0 0 0 1px rgba(255, 255, 255, .085), 0 30px 60px -24px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .ha-panel { --ha-bg: #17171E; --ha-raise: #1E1E26; }
}

/* Title bar: the product's star, the name, a quiet close */
.ha-bar { display: flex; align-items: center; gap: 10px; min-height: 54px; padding-inline: 20px 12px; border-block-end: 1px solid var(--ha-line); }
.ha-bar__star { width: 17px; height: 17px; fill: var(--ha-star); }
.ha-bar__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.ha-bar__x { display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: auto; border-radius: 8px; color: var(--ha-ink-3); }
.ha-bar__x .ico { width: 16px; height: 16px; }

.ha-body { display: grid; gap: 16px; padding: 22px 20px 4px; }

/* The morning briefing */
.ha-greet { font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; text-wrap: balance; }
.ha-greet__need { color: var(--ha-ink-2); }
:lang(ar) .ha-greet { letter-spacing: 0; line-height: 1.6; }

.ha-list { border-radius: 16px; background: var(--ha-raise); box-shadow: inset 0 0 0 1px var(--ha-line); }
.ha-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 13px 14px; }
.ha-item + .ha-item { border-block-start: 1px solid var(--ha-line); }
.ha-item__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ha-c-bg); color: var(--ha-c); }
.ha-item__ico .ico { width: 18px; height: 18px; }
.ha-item--risk { --ha-c: #FF8F8F; --ha-c-bg: rgba(248, 113, 113, .14); }
.ha-item--opp  { --ha-c: #5FE290; --ha-c-bg: rgba(74, 222, 128, .12); }
.ha-item--time { --ha-c: #A3B4FF; --ha-c-bg: rgba(123, 147, 255, .17); }
.ha-item__text { font-size: 14px; line-height: 1.45; color: var(--ha-ink); text-wrap: pretty; }
.ha-item__text .amt { font-weight: 600; }
:lang(ar) .ha-item__text { line-height: 1.65; }
.ha-chip {
  justify-self: end;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--ha-chip); box-shadow: inset 0 0 0 1px var(--ha-line);
  font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: var(--ha-ink);
}

/* One question, one answer */
.ha-q {
  justify-self: end; max-width: 82%;
  margin-block-start: 6px; padding: 10px 14px;
  border-radius: 16px; border-end-end-radius: 6px;
  background: var(--z-blue); color: #fff;
  font-size: 14px; line-height: 1.45;
}
.ha-a { max-width: 96%; font-size: 14.5px; line-height: 1.6; color: var(--ha-ink-2); text-wrap: pretty; }
.ha-a__do { color: var(--ha-ink); }
:lang(ar) .ha-a { line-height: 1.8; }

/* The input: the placeholder and the typed question share one cell */
.ha-input {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 14px 14px; min-height: 52px; padding-block: 8px; padding-inline: 16px 9px;
  border-radius: 16px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--ha-line);
}
.ha-input__field { display: grid; flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.ha-input__ph, .ha-input__typed { grid-area: 1 / 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ha-input__ph { color: var(--ha-ink-3); }
.ha-input__typed { color: var(--ha-ink); }
.ha-input__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-inline-start: 1px; vertical-align: -.2em; background: #A3B4FF; opacity: 0; }
.ha-input__send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: var(--ha-ink-3); transition: background-color .25s var(--ease-out), color .25s var(--ease-out); }
.ha-input__send .ico { width: 17px; height: 17px; }
.ha-input.is-typing .ha-input__ph { opacity: 0; }
.ha-input.is-typing .ha-input__typed::after { opacity: 1; }
.ha-input.is-typing .ha-input__send { background: var(--z-blue); color: #fff; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .ha-check { font-size: 1rem; column-gap: 12px; }
  .ha-check__ico { width: 22px; height: 22px; margin-block-start: 1.5px; }
  .ha-check__ico .ico { width: 12px; height: 12px; }
  :lang(ar) .ha-check__ico { margin-block-start: 4px; }

  .ha-panel { border-radius: 20px; }
  .ha-bar { min-height: 50px; padding-inline: 16px 10px; }
  .ha-body { gap: 14px; padding: 18px 14px 2px; }
  .ha-greet { font-size: 16px; }
  .ha-list { border-radius: 14px; }
  .ha-item { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; padding: 13px 12px 14px; }
  .ha-item .ha-chip { grid-column: 2; justify-self: start; }
  .ha-q { max-width: 88%; }
  .ha-a { max-width: none; font-size: 14px; }
  .ha-input { margin: 16px 10px 10px; min-height: 50px; padding-inline: 14px 8px; }
}