/* THE CAPTAIN WIDGET'S LOOK (copilot-look.js says what and why).
 * Everything is under [data-crm-cpl], which only the widget in <main> gets -
 * never the Contact panel beside a conversation. Lime buttons carry black
 * text; light is the default, .dark has its own values. */
[data-crm-cpl] {
  --cpl-ink: #0f172a;
  --cpl-muted: #64748b;
  --cpl-line: #e5e7eb;
  --cpl-card: #ffffff;
  --cpl-soft: #f8fafc;
  --cpl-lime: #d4fb08;
  --cpl-lime-soft: #f3fce4;
  --cpl-lime-line: #d9f99d;
  --cpl-me: #ecfccb;
  --cpl-me-line: #d9f99d;
}
.dark [data-crm-cpl] {
  --cpl-ink: #f1f5f9;
  --cpl-muted: #94a3b8;
  --cpl-line: #334155;
  --cpl-card: #1e293b;
  --cpl-soft: #0f172a;
  --cpl-lime-soft: #1a2e05;
  --cpl-lime-line: #3f6212;
  --cpl-me: #243b0b;
  --cpl-me-line: #3f6212;
}

/* ---- header: title and subtitle ---- */
[data-crm-cpl] .crm-cpl-head {
  height: auto !important;
  min-height: 3rem;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
[data-crm-cpl] .crm-cpl-head > div:first-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}
[data-crm-cpl] .crm-cpl-head > div:first-child > .font-medium {
  grid-column: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--cpl-ink);
  line-height: 1.3;
}
[data-crm-cpl] .crm-cpl-sub {
  grid-column: 1;
  grid-row: 2;
  font-size: 12.5px;
  color: var(--cpl-muted);
  line-height: 1.4;
}
[data-crm-cpl] .crm-cpl-head > div:first-child > :not(.font-medium):not(.crm-cpl-sub) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ---- the start ---- */
[data-crm-cpl] .crm-cpl-hidden { display: none !important; }
.crm-cpl-home {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--cpl-ink);
}
.crm-cpl-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(115deg, var(--cpl-soft) 0%, var(--cpl-soft) 45%, var(--cpl-lime-soft) 100%);
  border: 1px solid var(--cpl-line);
}
.crm-cpl-hero__words { flex: 1; min-width: 0; }
.crm-cpl-hero__words h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--cpl-ink); }
.crm-cpl-hero__words p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cpl-muted); }
.crm-cpl-hero__art { position: relative; flex: 0 0 104px; width: 104px; }
.crm-cpl-hero__art .crm-cpl-robot { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .12)); }
.crm-cpl-hero__art .crm-cpl-sparks { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; }

.crm-cpl-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.crm-cpl-row h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--cpl-ink); }
.crm-cpl-link {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 2px 4px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--crm-ink);
}
.crm-cpl-link i { font-size: 12px; line-height: 1; }

.crm-cpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crm-cpl-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cpl-line); background: var(--cpl-card);
  text-align: start; color: var(--cpl-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.crm-cpl-card:hover { border-color: var(--cpl-lime); box-shadow: 0 4px 14px rgba(15, 23, 42, .06); transform: translateY(-1px); }
.crm-cpl-card__icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
}
.crm-cpl-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-cpl-card__text strong { font-size: 13px; font-weight: 700; line-height: 1.3; }
.crm-cpl-card__text span { font-size: 11.5px; line-height: 1.4; color: var(--cpl-muted); }
.crm-cpl-card > i { color: var(--cpl-muted); font-size: 12px; line-height: 1; }
.crm-cpl-tint-blue .crm-cpl-card__icon { background: var(--crm-tint); color: var(--crm-ink); }
.crm-cpl-tint-green .crm-cpl-card__icon { background: #ecfdf5; color: #059669; }
.crm-cpl-tint-purple .crm-cpl-card__icon { background: var(--crm-tint); color: var(--crm-ink); }
.crm-cpl-tint-orange .crm-cpl-card__icon { background: #fff7ed; color: #ea580c; }
.dark .crm-cpl-card__icon { background: rgba(255, 255, 255, .06) !important; }

.crm-cpl-recent {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cpl-line); background: var(--cpl-card);
  color: var(--cpl-ink); font-size: 13px; text-align: start;
}
.crm-cpl-recent:hover { border-color: var(--cpl-lime); }
.crm-cpl-recent > i { color: var(--cpl-muted); font-size: 13px; line-height: 1; }
.crm-cpl-recent > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }

/* A narrow widget: one card per row. */
@container (max-width: 360px) { .crm-cpl-grid { grid-template-columns: 1fr; } }
[data-crm-cpl] .flex-1.flex.overflow-y-auto.items-start { container-type: inline-size; }

/* ---- the conversation as bubbles ---- */
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full { gap: 14px; }
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* The person: lime, at the end of the line. */
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .space-y-1 {
  align-self: flex-end;
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 16px 16px 4px 16px;
  background: var(--cpl-me);
  border: 1px solid var(--cpl-me-line);
  color: var(--cpl-ink);
}
[dir="rtl"] [data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .space-y-1 { border-radius: 16px 16px 16px 4px; }
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .space-y-1 > .font-medium { display: none; }
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .space-y-1 > .break-words { white-space: pre-wrap; }
/* Captain: white card, at the start of the line, its name small above. */
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .flex.flex-col.gap-1 {
  align-self: flex-start;
  max-width: 94%;
  padding: 10px 14px 12px;
  border-radius: 16px 16px 16px 4px;
  background: var(--cpl-card);
  border: 1px solid var(--cpl-line);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  color: var(--cpl-ink);
}
[dir="rtl"] [data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .flex.flex-col.gap-1 { border-radius: 16px 16px 4px 16px; }
[data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .flex.flex-col.gap-1 > .font-medium {
  font-size: 11.5px;
  font-weight: 700;
  color: #4d7c0f;
  letter-spacing: .01em;
}
.dark [data-crm-cpl] .space-y-6.flex-1.flex.flex-col.w-full > .flex.flex-col.gap-1 > .font-medium { color: var(--cpl-lime); }

/* ---- the send box as a card ---- */
[data-crm-cpl] form.crm-cpl-form {
  position: relative;
  border: 1.5px solid var(--cpl-lime-line);
  border-radius: 8px;
  background: var(--cpl-card);
  padding: 10px 12px 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-crm-cpl] form.crm-cpl-form:focus-within { border-color: var(--cpl-lime); box-shadow: 0 0 0 3px rgba(163, 230, 53, .18); }
[data-crm-cpl] form.crm-cpl-form textarea {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 2px 2px !important;
  min-height: 24px;
  font-size: 14px;
}
[data-crm-cpl] form.crm-cpl-form textarea:focus { --tw-ring-shadow: 0 0 #0000 !important; box-shadow: none !important; }
[data-crm-cpl] form.crm-cpl-form > button[type="submit"] {
  top: auto !important;
  bottom: 8px;
  transform: none !important;
  --tw-translate-y: 0 !important;
  inset-inline-end: 8px;
  left: auto;
  right: auto;
  width: 40px;
  height: 34px;
  border-radius: 8px;
  background: var(--cpl-lime);
  color: #000 !important;
  font-size: 18px;
}
html:not([dir="rtl"]) [data-crm-cpl] form.crm-cpl-form > button[type="submit"] { right: 8px; }
html[dir="rtl"] [data-crm-cpl] form.crm-cpl-form > button[type="submit"] { left: 8px; }
[data-crm-cpl] form.crm-cpl-form > button[type="submit"]:hover { background: #c6ec00; }
.crm-cpl-tools { position: absolute; bottom: 8px; inset-inline-start: 8px; display: flex; gap: 4px; }
.crm-cpl-tool {
  width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--cpl-muted); font-size: 16px;
}
.crm-cpl-tool:hover { background: var(--cpl-soft); color: var(--cpl-ink); }
.crm-cpl-menu {
  position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; z-index: 10;
  width: min(280px, 100%); max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 8px; background: var(--cpl-card);
  border: 1px solid var(--cpl-line); box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.crm-cpl-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--cpl-ink); font-size: 13px; text-align: start;
}
.crm-cpl-menu__item:hover { background: var(--cpl-soft); }
.crm-cpl-menu__item i { color: var(--cpl-muted); font-size: 14px; line-height: 1; }