/* ads-ui.css — the strip above a conversation that came from an ad.
 * Sits where the comments post strip sits, in the ad-blue instead of the
 * comments amber, so the two are never mistaken for each other.
 */
.crm-ad-strip {
  --ad-blue: var(--crm-ink);
  --ad-bg: var(--crm-tint);
  --ad-line: #d5dcff;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--ad-bg);
  border-bottom: 1px solid var(--ad-line);
  color: #1b2a8f;
  font-size: 12.5px;
  line-height: 1.4;
  flex: none;
}

:root.dark .crm-ad-strip,
.dark .crm-ad-strip,
[data-theme="dark"] .crm-ad-strip {
  --ad-bg: #171d3a;
  --ad-line: #26306a;
  color: #b9c4ff;
}

.crm-ad-strip__tag {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  /* Facebook blue for "From an ad" (owner, 2026-09-30); the campaign strip
     below sets its own green through --ad-blue. */
  background: var(--ad-tag, #1877f2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

/* NOTHING WAS CLIPPING THE MIDDLE, so it ran under the link (owner, 23 Sep
   2026: an ad id printed straight through "Open the ad"). The title was
   already ellipsised, but the id beside it is `nowrap` with nowhere to be cut,
   and `min-width: 0` on its parent only allows the shrink - it does not hide
   what no longer fits. So the block shrank to nothing and the text kept
   drawing past its own edge, over a link that is `flex: none` and pinned to
   the far end by `margin-inline-start: auto`.

   Now the middle is the part that gives: it takes the space left after the
   tag and the link, hides what does not fit, and both pieces inside it end in
   an ellipsis rather than running on. */
.crm-ad-strip { flex-wrap: wrap; row-gap: 4px; }
.crm-ad-strip__text {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 200px; min-width: 0; overflow: hidden;
}
.crm-ad-strip__title {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-ad-strip__meta {
  opacity: .8; font-size: 11.5px; unicode-bidi: isolate; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-ad-strip__link {
  margin-inline-start: auto;
  flex: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* WHAT MATTERS IS THE STRIP'S WIDTH, NOT THE WINDOW'S. This sits above the
   conversation, in a column that is narrow on a wide screen the moment the
   sidebar and the contact panel are both open - measured at 485px inside a
   1440px window. A `@media` query would have kept the full text there and
   dropped it on a phone that had more room for it, which is backwards, so the
   strip asks about its own width instead.

   AND THE ID IS THE FIRST THING TO GO, not the ad's name. An id is for
   looking one thing up in Ads Manager later; the name is what tells the agent
   who they are talking to right now. Narrower still, the link drops to its own
   line so the name and the link both stay whole - a strip two lines tall
   reads, a strip with two things drawn on top of each other does not. */
.crm-ad-strip { container-type: inline-size; container-name: adstrip; }

@container adstrip (max-width: 560px) {
  .crm-ad-strip__meta { display: none; }
}
@container adstrip (max-width: 360px) {
  .crm-ad-strip__text { flex-basis: 100%; }
  .crm-ad-strip__link { margin-inline-start: 0; }
}

/* A browser without container queries still gets the window-sized rules, and
   the ellipsis above keeps it from overlapping either way. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) { .crm-ad-strip__meta { display: none; } }
  @media (max-width: 420px) {
    .crm-ad-strip__text { flex-basis: 100%; }
    .crm-ad-strip__link { margin-inline-start: 0; }
  }
}
.crm-ad-strip__link:hover { opacity: .75; }

/* An answer to a WhatsApp campaign (owner, 2026-09-30): the same strip in
   the WhatsApp green, so it is never read as a paid ad. */
.crm-ad-strip--campaign { --ad-bg: #effaf3; --ad-line: #c7ecd4; --ad-blue: #0f7b3f; --ad-tag: #0f7b3f; color: #0b5a2e; }
:root.dark .crm-ad-strip--campaign,
.dark .crm-ad-strip--campaign,
[data-theme="dark"] .crm-ad-strip--campaign { --ad-bg: #10261a; --ad-line: #1d4a30; --ad-blue: #1f9d57; --ad-tag: #1f9d57; color: #a7e8c1; }

/* The same fact on the list's card, beside the inbox name: which campaign or
   which ad this customer came from. Cut short before it can push the inbox
   name or the time out of place. */
.crm-src-cap {
  flex: 0 20 auto; min-width: 24px; max-width: 55%; overflow: hidden;
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px;
}
.crm-src-cap > i { flex: none; width: 12px; height: 12px; font-size: 12px; line-height: 0; }
.crm-src-cap__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.crm-src-cap--campaign { background: #e7f7ed; color: #0b5a2e; }
.crm-src-cap--ad { background: #eef1ff; color: #1b2a8f; }
:root.dark .crm-src-cap--campaign, .dark .crm-src-cap--campaign { background: #10261a; color: #a7e8c1; }
:root.dark .crm-src-cap--ad, .dark .crm-src-cap--ad { background: #171d3a; color: #b9c4ff; }