/* conv-rail.css — the conversation's icon column
 * (conv-rail.js), as respond.io draws them: a 48px column of 36px bordered
 * squares on the thread's far edge, the open one in lime with black ink. No coloured edge on anything. */

.crm-cr {
  --cr-line: rgba(53, 60, 69, .16);
  --cr-ink: #282e34;
  --cr-muted: #626f7f;
  --cr-card: #ffffff;
  --cr-hover: #f5f6f7;

  flex: 0 0 48px;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-inline-start: 1px solid var(--cr-line);
  background: var(--cr-card);
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 5;
}

:root.dark .crm-cr, .dark .crm-cr {
  --cr-line: #2c3138;
  --cr-ink: #e8eaed;
  --cr-muted: #9aa3af;
  --cr-card: #1b1e23;
  --cr-hover: rgba(255, 255, 255, .06);
}

.crm-cr__btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-card);
  color: var(--cr-ink);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  padding: 0;   /* a general button rule gave it 10px each side, pushing the icon off centre */
  transition: background-color .15s ease;
}

.crm-cr__btn:hover { background: var(--cr-hover); }
.crm-cr__btn.is-on, .dark .crm-cr__btn.is-on { background: #d4fb08; border-color: #d4fb08; color: #000; }
.crm-cr__btn > [class*="i-woot-captain"] { width: 19px; height: 19px; }
.crm-cr__btn > svg { width: 19px; height: 19px; }
.crm-cr__btn:focus-visible { outline: 2px solid var(--cr-ink); outline-offset: 1px; }

.crm-cr__sep { width: 24px; height: 1px; margin: 2px 0; background: var(--cr-line); }

/* The platform's floating two-button pill and the loose Wevo button: the
   column stands in for them (they are still what conv-rail.js presses). */
[data-crm-cr-host] div[class~="rounded-full"][class~="absolute"][class~="top-36"] { display: none !important; }
body:has([data-crm-cr-host]) .crm-wevo__rail { display: none !important; }

/* ---------- the integrations card (the +), as respond.io's ---------- */
.crm-cr-card {
  --cc-line: rgba(53, 60, 69, .16);
  --cc-ink: #282e34;
  --cc-muted: #626f7f;
  --cc-card: #ffffff;
  position: fixed;
  z-index: 2147480000;
  width: 320px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: var(--cc-card);
  color: var(--cc-ink);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}
:root.dark .crm-cr-card, .dark .crm-cr-card {
  --cc-line: #2c3138;
  --cc-ink: #e8eaed;
  --cc-muted: #9aa3af;
  --cc-card: #1b1e23;
}
.crm-cr-card__logos { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crm-cr-card__logos img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.crm-cr-card__more { font-size: 14px; font-weight: 600; color: var(--cc-muted); }
.crm-cr-card__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.crm-cr-card__text { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--cc-muted); }
.crm-cr-card__go {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #d4fb08;
  color: #000;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
/* The owner's hover for a button: Facebook's blue. */
.crm-cr-card__go:hover { background: #1877f2; color: #fff; }

/* While Copilot is open the column stands after it (conv-rail.js moves it
   out of the section); the panel is given `order: 9` elsewhere, so the
   column takes the place after that. */
main > .crm-cr { order: 10; }