/* support#F10454.W49 — общий каркас шторки интеграции (js/components-integration.js). Мерки — те же,
   что у шторки Битрикс24 (b24-dr-* в design.css): секции через линию, заголовок 14/600 со значком
   цвета службы, состояние точкой, код привязки плашкой. Цвета — только токены темы (обе темы берут
   их из tokens.css), сетка 4px, тени sm/md, движение 150–300 мс и только transform/opacity. */

.intg-drawer { display: flex; flex-direction: column; }
.intg-btn { display: inline-flex; align-items: center; gap: 6px; }
.intg-ic { flex: none; }

/* ── Секция ───────────────────────────────────────────────────────────────────────────── */
.intg-section { padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.intg-section:last-child { border-bottom: none; }
.intg-section-hdr { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
.intg-section-hdr > .intg-ic { color: var(--accent); }
.intg-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-hover); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.intg-hint { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.intg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.intg-status + .intg-hint { margin: 8px 0 0; }
.intg-section > .intg-details { margin-top: 12px; }

/* ── Состояние точкой ─────────────────────────────────────────────────────────────────── */
.intg-status { display: flex; align-items: center; gap: 10px; }
.intg-status-label { font-size: 14px; font-weight: 600; color: var(--text); }
.intg-status-body .intg-status-sub { font-size: 12px; color: var(--text-muted); }
.intg-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.intg-status.is-ok .intg-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.intg-status.is-info .intg-dot { background: var(--info); }
.intg-status.is-warn .intg-dot { background: var(--warning); }
.intg-status.is-danger .intg-dot { background: var(--danger); }
.intg-status.is-compact { display: inline-flex; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); }
.intg-status.is-compact .intg-dot { width: 8px; height: 8px; }
.intg-status.is-compact.is-danger { color: var(--danger); }
.intg-status.is-compact .intg-status-sub { font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* ── Код привязки ─────────────────────────────────────────────────────────────────────── */
.intg-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.intg-code-value { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-hover); color: var(--text); font: 700 14px/1.2 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .08em; user-select: all; }

/* ── Карточка подключения ─────────────────────────────────────────────────────────────── */
.intg-cards { display: flex; flex-direction: column; gap: 12px; }
.intg-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sm); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.intg-card:hover { border-color: var(--border); box-shadow: var(--shadow-md); }
.intg-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.intg-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.intg-card-side { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.intg-card-side .act-menu-btn { width: 28px; min-width: 28px; height: 28px; padding: 0; justify-content: center; color: var(--text-muted); }
.msg-menu-dropdown .intg-menu-sep { height: 1px; margin: 4px 0; background: var(--border-light); }

/* Полосы внутри карточки: беда (жёлтая), подсказка (цвет службы), сбой (красная). */
.intg-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.intg-note > .intg-ic { margin-top: 2px; }
.intg-note-body { flex: 1; min-width: 0; }
.intg-note .btn { flex: none; align-self: center; }
.intg-note.is-warn { background: var(--warning-bg); }
.intg-note.is-warn > .intg-ic { color: var(--warning-text); }
.intg-note.is-danger { background: var(--danger-bg); }
.intg-note.is-danger > .intg-ic { color: var(--danger); }
.intg-note.is-hint { align-items: center; background: var(--accent-light); color: var(--text); }
.intg-note.is-hint > .intg-ic { margin-top: 0; color: var(--accent); }
.intg-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--border-light);
  background: var(--card-bg); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.intg-chip.is-warn { border-color: transparent; background: var(--warning-bg); color: var(--warning-text); }

/* Свёрнутое второстепенное. */
.intg-details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); border-radius: 4px; transition: color .15s ease-out; }
.intg-details > summary::-webkit-details-marker { display: none; }
.intg-details > summary:hover { color: var(--text); }
.intg-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.intg-details > summary .intg-ic { transition: transform .2s ease-out; }
.intg-details[open] > summary .intg-ic { transform: rotate(180deg); }
.intg-details p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); max-width: 72ch; }
.intg-card > .intg-details { margin-top: -4px; padding-top: 8px; border-top: 1px solid var(--border-light); }

/* ── Пусто, загрузка ──────────────────────────────────────────────────────────────────── */
.intg-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; border: 1px dashed var(--border);
  border-radius: var(--radius); text-align: center; color: var(--text-secondary); }
.intg-empty > .intg-ic { color: var(--accent); }
.intg-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.intg-steps { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin: 0; padding: 0; list-style: none;
  counter-reset: intg-step; text-align: left; font-size: 13px; line-height: 1.5; }
.intg-steps li { display: flex; align-items: flex-start; gap: 8px; counter-increment: intg-step; }
.intg-steps li::before { content: counter(intg-step); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 700; }
.intg-skeleton { gap: 12px; }
.intg-skel-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-light); border-radius: var(--radius); }
.intg-skel { display: block; height: 12px; border-radius: 4px; background: var(--surface-hover); animation: intg-pulse 1.4s ease-in-out infinite; }
.intg-skel-status { height: 72px; border-radius: var(--radius-sm); }
.intg-skel.w40 { width: 40%; } .intg-skel.w60 { width: 60%; } .intg-skel.w90 { width: 90%; } .intg-skel.h32 { height: 32px; }
@keyframes intg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .intg-skel { animation: none; }
  .intg-card, .intg-details > summary .intg-ic { transition: none; }
}

@media (max-width: 560px) {
  .intg-card { padding: 12px; }
  .intg-note.is-hint { flex-wrap: wrap; }
}

/* support#F10533.W5i — подсказки полей общей шторки подключения переносятся на следующую строку, а не
   обрезаются; область — только шторка подключения (.icd-drawer), у других экранов .setting-info .desc прежний. */
.icd-drawer .setting-info { min-width: 0; }
.icd-drawer .setting-info .desc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }